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.

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>

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>

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>
+  );
+}