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/dashboard/RecentTasks.tsx

@@ -2,12 +2,8 @@
 
 import { Task } from '@/lib/types';
 import { Card } from '@/components/ui/Card';
-import { TagDisplay } from '@/components/ui/TagDisplay';
-import { formatDateShort } from '@/lib/date-utils';
 import { TaskCard } from '@/components/ui';
 import { useTasksContext } from '@/contexts/TasksContext';
-import { getPriorityConfig, getStatusLabel } from '@/lib/status-config';
-import { TaskPriority } from '@/lib/types';
 import Link from 'next/link';
 
 interface RecentTasksProps {
@@ -45,46 +41,44 @@ export function RecentTasks({ tasks }: RecentTasksProps) {
       ) : (
         <div className="space-y-3">
           {recentTasks.map((task) => (
-            <TaskCard
-              key={task.id}
-              title={task.title}
-              description={task.description}
-              status={getStatusLabel(task.status)}
-              priority={task.priority ? (() => {
-                try {
-                  return getPriorityConfig(task.priority as TaskPriority).label;
-                } catch {
-                  return task.priority;
-                }
-              })() : undefined}
-              tags={task.tags && task.tags.length > 0 ? [
-                <TagDisplay 
-                  key="tags"
-                  tags={task.tags.slice(0, 2)} 
-                  availableTags={availableTags}
-                  size="sm" 
-                  maxTags={2}
-                  showColors={true}
-                />,
-                ...(task.tags.length > 2 ? [
-                  <span key="more" className="text-xs text-[var(--muted-foreground)]">
-                    +{task.tags.length - 2}
-                  </span>
-                ] : [])
-              ] : undefined}
-              metadata={formatDateShort(task.updatedAt)}
-              actions={
-                <Link 
-                  href={`/kanban?taskId=${task.id}`}
-                  className="p-1 rounded hover:bg-[var(--muted)]/50 transition-colors"
-                  title="Ouvrir dans le Kanban"
-                >
-                  <svg className="w-3 h-3 text-[var(--primary)] hover:text-[var(--primary)]/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div key={task.id} className="relative group">
+              <TaskCard
+                variant="detailed"
+                source={task.source || 'manual'}
+                title={task.title}
+                description={task.description}
+                status={task.status}
+                priority={task.priority as 'low' | 'medium' | 'high' | 'urgent'}
+                tags={task.tags || []}
+                dueDate={task.dueDate}
+                completedAt={task.completedAt}
+                jiraKey={task.jiraKey}
+                jiraProject={task.jiraProject}
+                jiraType={task.jiraType}
+                tfsPullRequestId={task.tfsPullRequestId}
+                tfsProject={task.tfsProject}
+                tfsRepository={task.tfsRepository}
+                availableTags={availableTags}
+                fontSize="small"
+                onTitleClick={() => {
+                  // Navigation vers le kanban avec la tâche sélectionnée
+                  window.location.href = `/kanban?taskId=${task.id}`;
+                }}
+              />
+              
+              {/* Overlay avec lien vers le kanban */}
+              <Link 
+                href={`/kanban?taskId=${task.id}`}
+                className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-[var(--primary)]/5 rounded-lg flex items-center justify-center"
+                title="Ouvrir dans le Kanban"
+              >
+                <div className="bg-[var(--primary)]/20 backdrop-blur-sm rounded-full p-2 border border-[var(--primary)]/30">
+                  <svg className="w-4 h-4 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                   </svg>
-                </Link>
-              }
-            />
+                </div>
+              </Link>
+            </div>
           ))}
         </div>
       )}