feat: complete tag management and UI integration

- Marked multiple tasks as completed in TODO.md related to tag management features.
- Replaced manual tag input with `TagInput` component in `CreateTaskForm`, `EditTaskForm`, and `QuickAddTask` for better UX.
- Updated `TaskCard` to display tags using `TagDisplay` with color support.
- Enhanced `TasksService` to manage task-tag relationships with CRUD operations.
- Integrated tag management into the global context for better accessibility across components.

components/ui/Header.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent } from '@/components/ui/Card';
+import Link from 'next/link';
 
 interface HeaderProps {
   title: string;
@@ -19,20 +20,38 @@ export function Header({ title, subtitle, stats, syncing = false }: HeaderProps)
       <div className="container mx-auto px-6 py-4">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
           {/* Titre tech avec glow */}
-          <div className="flex items-center gap-4">
-            <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>
-              <h1 className="text-2xl font-mono font-bold text-slate-100 tracking-wider">
-                {title}
-              </h1>
-              <p className="text-slate-400 mt-1 font-mono text-sm">
-                {subtitle} {syncing && '• Synchronisation...'}
-              </p>
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-4">
+              <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>
+                <h1 className="text-2xl font-mono font-bold text-slate-100 tracking-wider">
+                  {title}
+                </h1>
+                <p className="text-slate-400 mt-1 font-mono text-sm">
+                  {subtitle} {syncing && '• Synchronisation...'}
+                </p>
+              </div>
             </div>
+
+            {/* Navigation */}
+            <nav className="hidden sm:flex items-center gap-4">
+              <Link
+                href="/"
+                className="text-slate-400 hover:text-cyan-400 transition-colors font-mono text-sm uppercase tracking-wider"
+              >
+                Kanban
+              </Link>
+              <Link
+                href="/tags"
+                className="text-slate-400 hover:text-purple-400 transition-colors font-mono text-sm uppercase tracking-wider"
+              >
+                Tags
+              </Link>
+            </nav>
           </div>
 
           {/* Stats tech dashboard */}