feat: update TODO.md and refactor Header component

- Removed redundant theme handling code from Header component, improving readability and maintainability.
- Integrated HeaderMobile and HeaderDesktop components for better responsive design.
- Marked the task for repositioning the theme icon in the header as complete in TODO.md.

src/components/ui/header/HeaderDesktop.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { AuthButton } from '@/components/AuthButton';
+import { HeaderControls } from './HeaderControls';
+import { ThemeDropdown } from './ThemeDropdown';
+import { useKeyboardShortcutsModal } from '@/contexts/KeyboardShortcutsContext';
+
+interface HeaderDesktopProps {
+  title: string;
+  subtitle: string;
+  syncing: boolean;
+}
+
+export function HeaderDesktop({ title, subtitle, syncing }: HeaderDesktopProps) {
+  const { openModal: openShortcutsModal } = useKeyboardShortcutsModal();
+  
+  return (
+    <div className="hidden lg:flex items-center justify-between gap-6">
+      {/* Titre et status */}
+      <div className="flex items-center gap-6">
+        <div className="flex items-center gap-4 min-w-0">
+          <div className={`w-3 h-3 rounded-full shadow-lg ${
+            syncing 
+              ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
+              : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
+          }`}></div>
+          <div className="min-w-0">
+            <h1 className="text-xl xl:text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider truncate">
+              <span className="sm:hidden">{title}</span>
+              <span className="hidden sm:inline">{title}</span>
+            </h1>
+            <p className="text-[var(--muted-foreground)] mt-1 font-mono text-xs sm:text-sm truncate">
+              {subtitle}
+            </p>
+          </div>
+        </div>
+
+        {/* Navigation desktop */}
+        <HeaderControls variant="desktop" />
+      </div>
+
+      {/* Contrôles à droite */}
+      <div className="flex items-center gap-2">
+        {/* Keyboard Shortcuts desktop */}
+        <button
+          onClick={openShortcutsModal}
+          className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
+          title="Raccourcis clavier (Cmd+?)"
+        >
+          ⌨️
+        </button>
+        <ThemeDropdown variant="desktop" />
+        <AuthButton />
+      </div>
+    </div>
+  );
+}