From 7394b1699912a4ef86ac29529d4b2e0f23843d8c Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 18 Sep 2025 09:51:40 +0200
Subject: [PATCH] feat: add font size toggle functionality - Implemented a
 FontSizeToggle component in HomePageClient for adjusting task font sizes in
 kanban views. - Updated TaskCard to apply dynamic font size classes based on
 user preferences. - Enhanced user preferences to include font size settings,
 defaulting to 'medium'. - Modified TODO.md to mark the font size toggle task
 as complete.

---
 TODO.md                                 |  2 +-
 components/HomePageClient.tsx           |  4 +++
 components/kanban/TaskCard.tsx          | 34 +++++++++++++++++---
 components/ui/FontSizeToggle.tsx        | 42 +++++++++++++++++++++++++
 lib/types.ts                            |  3 +-
 services/user-preferences.ts            |  3 +-
 src/contexts/UserPreferencesContext.tsx | 10 ++++++
 7 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 components/ui/FontSizeToggle.tsx

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() {
                   </svg>
                   {swimlanesByTags ? 'Standard' : 'Swimlanes'}
                 </button>
+                
+                {/* Font Size Toggle */}
+                <FontSizeToggle />
               </div>
               
             </div>
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<NodeJS.Timeout | null>(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 = () => (
     <div className="relative flex-1">
       <h4 
-        className="font-mono text-sm font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors"
+        className={`font-mono ${fontClasses.title} font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors`}
         onClick={handleTitleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -243,7 +269,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
               onKeyDown={handleTitleKeyPress}
               onBlur={handleTitleSave}
               autoFocus
-              className="flex-1 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium leading-tight"
+              className={`flex-1 bg-transparent border-none outline-none text-[var(--foreground)] font-mono ${fontClasses.title} font-medium leading-tight`}
             />
           ) : (
             <TitleWithTooltip />
@@ -372,7 +398,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
 
       {/* Description tech */}
       {task.description && (
-        <p className="text-xs text-[var(--muted-foreground)] mb-3 line-clamp-1 font-mono">
+        <p className={`${fontClasses.description} text-[var(--muted-foreground)] mb-3 line-clamp-1 font-mono`}>
           {task.description}
         </p>
       )}
@@ -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) && (
         <div className="pt-2 border-t border-[var(--border)]/50">
-          <div className="flex items-center justify-between text-xs">
+          <div className={`flex items-center justify-between ${fontClasses.meta}`}>
             {task.dueDate ? (
               <span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
                 <span className="text-[var(--primary)]">⏰</span>
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 (
+    <button
+      onClick={toggleFontSize}
+      className="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50 hover:text-[var(--primary)]"
+      title={`Font size: ${preferences.viewPreferences.fontSize} (click to cycle)`}
+    >
+      <span className={`font-mono font-bold ${getFontSizeScale()}`}>
+        {getFontSizeIcon()}
+      </span>
+    </button>
+  );
+}
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<void>;
   toggleTheme: () => Promise<void>;
   setTheme: (theme: 'light' | 'dark') => Promise<void>;
+  toggleFontSize: () => Promise<void>;
   
   // Column Visibility
   updateColumnVisibility: (updates: Partial<ColumnVisibility>) => Promise<void>;
@@ -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<ColumnVisibility>) => {
@@ -129,6 +138,7 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
     toggleObjectivesCollapse,
     toggleTheme,
     setTheme,
+    toggleFontSize,
     updateColumnVisibility,
     toggleColumnVisibility,
     isColumnVisible