diff --git a/TODO.md b/TODO.md index 566bb13..c848f77 100644 --- a/TODO.md +++ b/TODO.md @@ -139,7 +139,7 @@ - [ ] Export des données en CSV/JSON ## Autre Todo -- [ ] Avoir un bouton pour réduire/agrandir la font des taches dans les kanban (swimlane et classique) +- [x] Avoir un bouton pour réduire/agrandir la font des taches dans les kanban (swimlane et classique) ## 🔧 Phase 4: Server Actions - Migration API Routes (Nouveau) diff --git a/components/HomePageClient.tsx b/components/HomePageClient.tsx index dcb0efd..6c68cd0 100644 --- a/components/HomePageClient.tsx +++ b/components/HomePageClient.tsx @@ -10,6 +10,7 @@ import { CreateTaskData } from '@/clients/tasks-client'; import { CreateTaskForm } from '@/components/forms/CreateTaskForm'; import { Button } from '@/components/ui/Button'; import { JiraQuickFilter } from '@/components/kanban/JiraQuickFilter'; +import { FontSizeToggle } from '@/components/ui/FontSizeToggle'; interface HomePageClientProps { initialTasks: Task[]; @@ -141,6 +142,9 @@ function HomePageContent() { {swimlanesByTags ? 'Standard' : 'Swimlanes'} + + {/* Font Size Toggle */} + diff --git a/components/kanban/TaskCard.tsx b/components/kanban/TaskCard.tsx index 252fedc..578ce03 100644 --- a/components/kanban/TaskCard.tsx +++ b/components/kanban/TaskCard.tsx @@ -25,6 +25,32 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) { const timeoutRef = useRef(null); const { tags: availableTags, refreshTasks } = useTasksContext(); const { preferences } = useUserPreferences(); + + // Classes CSS pour les différentes tailles de police + const getFontSizeClasses = () => { + switch (preferences.viewPreferences.fontSize) { + case 'small': + return { + title: 'text-xs', + description: 'text-xs', + meta: 'text-xs' + }; + case 'large': + return { + title: 'text-base', + description: 'text-sm', + meta: 'text-sm' + }; + default: // medium + return { + title: 'text-sm', + description: 'text-xs', + meta: 'text-xs' + }; + } + }; + + const fontClasses = getFontSizeClasses(); // Helper pour construire l'URL Jira const getJiraTicketUrl = (jiraKey: string): string => { @@ -159,7 +185,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) { const TitleWithTooltip = () => (

) : ( @@ -372,7 +398,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) { {/* Description tech */} {task.description && ( -

+

{task.description}

)} @@ -397,7 +423,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) { {/* Footer tech avec séparateur néon - seulement si des données à afficher */} {(task.dueDate || (task.source && task.source !== 'manual') || task.completedAt) && (
-
+
{task.dueDate ? ( ⏰ diff --git a/components/ui/FontSizeToggle.tsx b/components/ui/FontSizeToggle.tsx new file mode 100644 index 0000000..4fda56c --- /dev/null +++ b/components/ui/FontSizeToggle.tsx @@ -0,0 +1,42 @@ +'use client'; + +import { useUserPreferences } from '@/contexts/UserPreferencesContext'; + +export function FontSizeToggle() { + const { preferences, toggleFontSize } = useUserPreferences(); + + // Icône pour la taille de police + const getFontSizeIcon = () => { + switch (preferences.viewPreferences.fontSize) { + case 'small': + return 'A'; + case 'large': + return 'A'; + default: + return 'A'; + } + }; + + const getFontSizeScale = () => { + switch (preferences.viewPreferences.fontSize) { + case 'small': + return 'text-xs'; + case 'large': + return 'text-lg'; + default: + return 'text-sm'; + } + }; + + return ( + + ); +} diff --git a/lib/types.ts b/lib/types.ts index 47ba8a8..40f5652 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -70,7 +70,8 @@ export interface ViewPreferences { showFilters: boolean; objectivesCollapsed: boolean; theme: 'light' | 'dark'; - [key: string]: boolean | 'tags' | 'priority' | 'light' | 'dark' | undefined; + fontSize: 'small' | 'medium' | 'large'; + [key: string]: boolean | 'tags' | 'priority' | 'light' | 'dark' | 'small' | 'medium' | 'large' | undefined; } export interface ColumnVisibility { diff --git a/services/user-preferences.ts b/services/user-preferences.ts index dc1f487..5ca796d 100644 --- a/services/user-preferences.ts +++ b/services/user-preferences.ts @@ -18,7 +18,8 @@ const DEFAULT_PREFERENCES: UserPreferences = { showObjectives: true, showFilters: true, objectivesCollapsed: false, - theme: 'dark' + theme: 'dark', + fontSize: 'medium' }, columnVisibility: { hiddenStatuses: [] diff --git a/src/contexts/UserPreferencesContext.tsx b/src/contexts/UserPreferencesContext.tsx index 28b2d94..4e797aa 100644 --- a/src/contexts/UserPreferencesContext.tsx +++ b/src/contexts/UserPreferencesContext.tsx @@ -16,6 +16,7 @@ interface UserPreferencesContextType { toggleObjectivesCollapse: () => Promise; toggleTheme: () => Promise; setTheme: (theme: 'light' | 'dark') => Promise; + toggleFontSize: () => Promise; // Column Visibility updateColumnVisibility: (updates: Partial) => Promise; @@ -90,6 +91,14 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr await updateViewPreferences({ theme }); }, [updateViewPreferences]); + const toggleFontSize = useCallback(async () => { + const fontSizes: ('small' | 'medium' | 'large')[] = ['small', 'medium', 'large']; + const currentIndex = fontSizes.indexOf(preferences.viewPreferences.fontSize); + const nextIndex = (currentIndex + 1) % fontSizes.length; + const newFontSize = fontSizes[nextIndex]; + await updateViewPreferences({ fontSize: newFontSize }); + }, [preferences.viewPreferences.fontSize, updateViewPreferences]); + // === COLUMN VISIBILITY === const updateColumnVisibility = useCallback(async (updates: Partial) => { @@ -129,6 +138,7 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr toggleObjectivesCollapse, toggleTheme, setTheme, + toggleFontSize, updateColumnVisibility, toggleColumnVisibility, isColumnVisible