refactor: update theme management and enhance UI components

- Refactored theme imports in `preferences.ts` and `ThemeSelector.tsx` to use centralized `theme-config`.
- Added new CSS variables for special cards in `globals.css` to improve theme consistency.
- Enhanced `Header` and `TaskCard` components with theme dropdown functionality for better user experience.
- Updated `ThemeProvider` to support cycling through dark themes, improving theme selection flexibility.
- Cleaned up unused imports and streamlined component structures for better maintainability.

src/components/ui/Header.tsx

@@ -5,6 +5,8 @@ import { useJiraConfig } from '@/contexts/JiraConfigContext';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { useState } from 'react';
+import { Theme } from '@/lib/theme-config';
+import { THEME_CONFIG, getThemeMetadata } from '@/lib/theme-config';
 
 interface HeaderProps {
   title?: string;
@@ -13,10 +15,22 @@ interface HeaderProps {
 }
 
 export function Header({ title = "TowerControl", subtitle = "Task Management", syncing = false }: HeaderProps) {
-  const { theme, toggleTheme, userPreferredTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
   const { isConfigured: isJiraConfigured, config: jiraConfig } = useJiraConfig();
   const pathname = usePathname();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [themeDropdownOpen, setThemeDropdownOpen] = useState(false);
+
+  // Liste des thèmes disponibles avec leurs labels et icônes
+  const themes: { value: Theme; label: string; icon: string }[] = THEME_CONFIG.allThemes.map(themeValue => {
+    const metadata = getThemeMetadata(themeValue);
+    
+    return {
+      value: themeValue,
+      label: metadata.name,
+      icon: metadata.icon
+    };
+  });
 
   // Fonction pour déterminer si un lien est actif
   const isActiveLink = (href: string) => {
@@ -83,24 +97,53 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
 
             {/* Controls mobile/tablette */}
             <div className="flex items-center gap-2 flex-shrink-0">
-              {/* Theme Toggle */}
-              <button
-                onClick={toggleTheme}
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
-                title={theme === 'light' ? `Switch to ${userPreferredTheme} theme` : 'Switch to light theme'}
-              >
-                {theme === 'light' ? (
-                  // Soleil pour le thème clair
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                  </svg>
-                ) : (
-                  // Lune pour tous les thèmes sombres
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                  </svg>
+              {/* Theme Dropdown */}
+              <div className="relative">
+                <button
+                  onClick={() => setThemeDropdownOpen(!themeDropdownOpen)}
+                  className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
+                  title="Select theme"
+                >
+                  {themes.find(t => t.value === theme)?.icon || '🎨'}
+                </button>
+                
+                {themeDropdownOpen && (
+                  <>
+                    {/* Backdrop */}
+                    <div 
+                      className="fixed inset-0 z-[200]"
+                      onClick={() => setThemeDropdownOpen(false)}
+                    />
+                    {/* Dropdown */}
+                    <div className="absolute right-0 top-full mt-2 w-48 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] overflow-hidden">
+                      <div className="py-2">
+                        {themes.map((themeOption) => (
+                          <button
+                            key={themeOption.value}
+                            onClick={() => {
+                              setTheme(themeOption.value);
+                              setThemeDropdownOpen(false);
+                            }}
+                            className={`w-full text-left px-4 py-2 text-sm transition-colors flex items-center gap-3 ${
+                              theme === themeOption.value
+                                ? 'text-[var(--primary)] bg-[var(--primary)]/10'
+                                : 'text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--card-hover)]'
+                            }`}
+                          >
+                            <span className="text-base">{themeOption.icon}</span>
+                            <span className="font-mono">{themeOption.label}</span>
+                            {theme === themeOption.value && (
+                              <svg className="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                              </svg>
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  </>
                 )}
-              </button>
+              </div>
 
               {/* Menu burger */}
               <button
@@ -154,22 +197,53 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
                 </Link>
               ))}
               
-              {/* Theme Toggle desktop */}
-              <button
-                onClick={toggleTheme}
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
-                title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
-              >
-                {theme === 'dark' ? (
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                  </svg>
-                ) : (
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                  </svg>
+              {/* Theme Dropdown desktop */}
+              <div className="relative">
+                <button
+                  onClick={() => setThemeDropdownOpen(!themeDropdownOpen)}
+                  className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
+                  title="Select theme"
+                >
+                  {themes.find(t => t.value === theme)?.icon || '🎨'}
+                </button>
+                
+                {themeDropdownOpen && (
+                  <>
+                    {/* Backdrop */}
+                    <div 
+                      className="fixed inset-0 z-[200]"
+                      onClick={() => setThemeDropdownOpen(false)}
+                    />
+                    {/* Dropdown */}
+                    <div className="absolute right-0 top-full mt-2 w-48 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] overflow-hidden">
+                      <div className="py-2">
+                        {themes.map((themeOption) => (
+                          <button
+                            key={themeOption.value}
+                            onClick={() => {
+                              setTheme(themeOption.value);
+                              setThemeDropdownOpen(false);
+                            }}
+                            className={`w-full text-left px-4 py-2 text-sm transition-colors flex items-center gap-3 ${
+                              theme === themeOption.value
+                                ? 'text-[var(--primary)] bg-[var(--primary)]/10'
+                                : 'text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--card-hover)]'
+                            }`}
+                          >
+                            <span className="text-base">{themeOption.icon}</span>
+                            <span className="font-mono">{themeOption.label}</span>
+                            {theme === themeOption.value && (
+                              <svg className="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                              </svg>
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  </>
                 )}
-              </button>
+              </div>
             </nav>
           </div>
 

src/components/ui/TaskCard.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes, forwardRef, useState, useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
 import { Card } from './Card';
 import { Badge } from './Badge';
+import { formatDateForDisplay } from '@/lib/date-utils';
 
 interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
   // Variants
@@ -171,18 +172,16 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
     const getSourceStyles = () => {
       if (source === 'jira') {
         return {
-          border: '2px solid rgba(0, 130, 201, 0.8)',
-          borderLeft: '6px solid #0052CC',
-          background: 'linear-gradient(135deg, rgba(0, 130, 201, 0.3) 0%, rgba(0, 130, 201, 0.2) 100%)',
-          boxShadow: '0 4px 12px rgba(0, 130, 201, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)',
+          backgroundColor: 'var(--jira-card, #dbeafe)',
+          borderLeft: '3px solid var(--jira-border, #3b82f6)',
+          color: 'var(--jira-text, #1e40af)',
         };
       }
       if (source === 'tfs') {
         return {
-          border: '2px solid rgba(255, 165, 0, 0.8)',
-          borderLeft: '6px solid #FF8C00',
-          background: 'linear-gradient(135deg, rgba(255, 165, 0, 0.3) 0%, rgba(255, 165, 0, 0.2) 100%)',
-          boxShadow: '0 4px 12px rgba(255, 165, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)',
+          backgroundColor: 'var(--tfs-card, #fed7aa)',
+          borderLeft: '3px solid var(--tfs-border, #f59e0b)',
+          color: 'var(--tfs-text, #92400e)',
         };
       }
       return {};
@@ -224,20 +223,17 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
       return (
         <Card
           ref={ref}
-          style={sourceStyles}
           className={cn(
             'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
             isDragging && 'opacity-50 rotate-3 scale-105',
             (status === 'done' || status === 'archived') && 'opacity-60',
             status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
-            source === 'jira' && 'bg-blue-50 dark:bg-blue-900/20',
-            source === 'tfs' && 'bg-orange-50 dark:bg-orange-900/20',
             isPending && 'opacity-70 pointer-events-none',
             className
           )}
           {...props}
         >
-          <div className="p-2">
+          <div className="p-2" style={sourceStyles}>
             <div className="flex items-center gap-2">
               {/* Emojis */}
               {displayEmojis.length > 0 && (
@@ -318,20 +314,17 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
     return (
       <Card
         ref={ref}
-        style={sourceStyles}
         className={cn(
           'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
           isDragging && 'opacity-50 rotate-3 scale-105',
           (status === 'done' || status === 'archived') && 'opacity-60',
           status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
-          source === 'jira' && 'bg-blue-50 dark:bg-blue-900/20',
-          source === 'tfs' && 'bg-orange-50 dark:bg-orange-900/20',
           isPending && 'opacity-70 pointer-events-none',
           className
         )}
         {...props}
       >
-        <div className={`px-3 pt-3 ${(dueDate || (source && source !== 'manual') || completedAt) ? 'pb-3' : 'pb-0'}`}>
+        <div className={`px-3 pt-3 ${(dueDate || (source && source !== 'manual') || completedAt) ? 'pb-3' : 'pb-0'}`} style={sourceStyles}>
           {/* Header */}
           <div className="flex items-start gap-2 mb-2">
             {/* Emojis */}
@@ -452,7 +445,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
                 {dueDate ? (
                   <span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
                     <span className="text-[var(--primary)]">⏰</span>
-                    {dueDate.toLocaleDateString()}
+                    {formatDateForDisplay(dueDate, 'DISPLAY_MEDIUM')}
                   </span>
                 ) : (
                   <div></div>

src/components/ui/index.ts

@@ -24,5 +24,4 @@ export { DropZone } from './DropZone';
 
 // Composants existants
 export { Card, CardHeader, CardTitle, CardContent, CardFooter } from './Card';
-export { Header } from './Header';
 export { FontSizeToggle } from './FontSizeToggle';