From 44df8c89b822a1c3ac7a34dd6d0a69ec0c103bfd Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Mon, 15 Sep 2025 21:31:34 +0200
Subject: [PATCH] feat: add user preferences for filter and objective
 visibility in HomePageClient - Implemented state management for filter and
 objective visibility using `useState`. - Integrated `userPreferencesService`
 to load and save user preferences on component mount and toggle actions. -
 Updated `KanbanBoardContainer` to conditionally render filters and objectives
 based on user preferences. - Enhanced UI with buttons for toggling
 visibility, improving user experience and customization.

---
 components/HomePageClient.tsx        | 72 ++++++++++++++++++++++-
 components/kanban/BoardContainer.tsx | 29 ++++++---
 components/ui/Header.tsx             | 61 ++++---------------
 components/ui/SimpleHeader.tsx       | 78 ++++++++++++++++++++++++
 services/user-preferences.ts         |  4 +-
 src/app/daily/DailyPageClient.tsx    | 88 +++++++++++++---------------
 src/app/tags/TagsPageClient.tsx      | 34 ++++-------
 7 files changed, 235 insertions(+), 131 deletions(-)
 create mode 100644 components/ui/SimpleHeader.tsx

diff --git a/components/HomePageClient.tsx b/components/HomePageClient.tsx
index dfbbf9a..eee7ba8 100644
--- a/components/HomePageClient.tsx
+++ b/components/HomePageClient.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
 import { Header } from '@/components/ui/Header';
 import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
 import { Task, Tag, TaskStats } from '@/lib/types';
+import { userPreferencesService } from '@/services/user-preferences';
 
 interface HomePageClientProps {
   initialTasks: Task[];
@@ -13,6 +15,28 @@ interface HomePageClientProps {
 
 function HomePageContent() {
   const { stats, syncing } = useTasksContext();
+  const [showFilters, setShowFilters] = useState(true);
+  const [showObjectives, setShowObjectives] = useState(true);
+
+  // Charger les préférences depuis le service
+  useEffect(() => {
+    const viewPreferences = userPreferencesService.getViewPreferences();
+    setShowFilters(viewPreferences.showFilters);
+    setShowObjectives(viewPreferences.showObjectives);
+  }, []);
+
+  // Sauvegarder les préférences via le service
+  const handleToggleFilters = () => {
+    const newValue = !showFilters;
+    setShowFilters(newValue);
+    userPreferencesService.updateViewPreferences({ showFilters: newValue });
+  };
+
+  const handleToggleObjectives = () => {
+    const newValue = !showObjectives;
+    setShowObjectives(newValue);
+    userPreferencesService.updateViewPreferences({ showObjectives: newValue });
+  };
 
   return (
     <div className="min-h-screen bg-[var(--background)]">
@@ -23,8 +47,52 @@ function HomePageContent() {
         syncing={syncing}
       />
       
-      <main className="h-[calc(100vh-120px)]">
-        <KanbanBoardContainer />
+      {/* Barre de contrôles de visibilité */}
+      <div className="bg-[var(--card)]/30 border-b border-[var(--border)]/30">
+        <div className="container mx-auto px-6 py-2">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleToggleFilters}
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
+                  showFilters 
+                    ? 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30' 
+                    : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50'
+                }`}
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
+                </svg>
+                Filtres
+              </button>
+              
+              <button
+                onClick={handleToggleObjectives}
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
+                  showObjectives 
+                    ? 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30' 
+                    : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--accent)]/50'
+                }`}
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+                </svg>
+                Objectifs
+              </button>
+            </div>
+            
+            <div className="text-xs text-[var(--muted-foreground)] font-mono">
+              Affichage des composants
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <main className="h-[calc(100vh-160px)]">
+        <KanbanBoardContainer 
+          showFilters={showFilters}
+          showObjectives={showObjectives}
+        />
       </main>
     </div>
   );
diff --git a/components/kanban/BoardContainer.tsx b/components/kanban/BoardContainer.tsx
index 3012af3..0c049ec 100644
--- a/components/kanban/BoardContainer.tsx
+++ b/components/kanban/BoardContainer.tsx
@@ -13,7 +13,15 @@ import { UpdateTaskData } from '@/clients/tasks-client';
 import { useColumnVisibility } from '@/hooks/useColumnVisibility';
 import { getAllStatuses } from '@/lib/status-config';
 
-export function KanbanBoardContainer() {
+interface KanbanBoardContainerProps {
+  showFilters?: boolean;
+  showObjectives?: boolean;
+}
+
+export function KanbanBoardContainer({ 
+  showFilters = true, 
+  showObjectives = true 
+}: KanbanBoardContainerProps = {}) {
   const { 
     filteredTasks, 
     pinnedTasks,
@@ -61,15 +69,18 @@ export function KanbanBoardContainer() {
 
   return (
     <>
-      <KanbanFilters 
-        filters={kanbanFilters} 
-        onFiltersChange={setKanbanFilters}
-        hiddenStatuses={hiddenStatuses}
-        onToggleStatusVisibility={toggleStatusVisibility}
-      />
+      {/* Barre de filtres - conditionnelle */}
+      {showFilters && (
+        <KanbanFilters 
+          filters={kanbanFilters} 
+          onFiltersChange={setKanbanFilters}
+          hiddenStatuses={hiddenStatuses}
+          onToggleStatusVisibility={toggleStatusVisibility}
+        />
+      )}
       
-      {/* Section Objectifs Principaux */}
-      {pinnedTasks.length > 0 && (
+      {/* Section Objectifs Principaux - conditionnelle */}
+      {showObjectives && pinnedTasks.length > 0 && (
         <ObjectivesBoard
           tasks={pinnedTasks}
           onDeleteTask={deleteTask}
diff --git a/components/ui/Header.tsx b/components/ui/Header.tsx
index 177826c..6c8fbb0 100644
--- a/components/ui/Header.tsx
+++ b/components/ui/Header.tsx
@@ -75,62 +75,23 @@ export function Header({ title, subtitle, stats, syncing = false }: HeaderProps)
             </nav>
           </div>
 
-          {/* Stats tech dashboard */}
+          {/* Stats essentielles */}
           <div className="flex flex-wrap gap-3">
             <StatCard 
               label="TOTAL" 
               value={String(stats.total).padStart(2, '0')} 
               color="blue"
             />
-            {stats.completed > 0 && (
-              <StatCard 
-                label="DONE" 
-                value={String(stats.completed).padStart(2, '0')} 
-                color="green"
-              />
-            )}
-            {stats.inProgress > 0 && (
-              <StatCard 
-                label="ACTIVE" 
-                value={String(stats.inProgress).padStart(2, '0')} 
-                color="yellow"
-              />
-            )}
-            {stats.backlog > 0 && (
-              <StatCard 
-                label="BACKLOG" 
-                value={String(stats.backlog).padStart(2, '0')} 
-                color="gray"
-              />
-            )}
-            {stats.todo > 0 && (
-              <StatCard 
-                label="QUEUE" 
-                value={String(stats.todo).padStart(2, '0')} 
-                color="gray"
-              />
-            )}
-            {stats.freeze > 0 && (
-              <StatCard 
-                label="FREEZE" 
-                value={String(stats.freeze).padStart(2, '0')} 
-                color="blue"
-              />
-            )}
-            {stats.cancelled > 0 && (
-              <StatCard 
-                label="CANCEL" 
-                value={String(stats.cancelled).padStart(2, '0')} 
-                color="gray"
-              />
-            )}
-            {stats.archived > 0 && (
-              <StatCard 
-                label="ARCHIVE" 
-                value={String(stats.archived).padStart(2, '0')} 
-                color="gray"
-              />
-            )}
+            <StatCard 
+              label="DONE" 
+              value={String(stats.completed).padStart(2, '0')} 
+              color="green"
+            />
+            <StatCard 
+              label="ACTIVE" 
+              value={String(stats.inProgress).padStart(2, '0')} 
+              color="yellow"
+            />
             <StatCard 
               label="RATE" 
               value={`${stats.completionRate}%`} 
diff --git a/components/ui/SimpleHeader.tsx b/components/ui/SimpleHeader.tsx
new file mode 100644
index 0000000..e832773
--- /dev/null
+++ b/components/ui/SimpleHeader.tsx
@@ -0,0 +1,78 @@
+import { useTheme } from '@/contexts/ThemeContext';
+import Link from 'next/link';
+
+interface SimpleHeaderProps {
+  title: string;
+  subtitle: string;
+  syncing?: boolean;
+}
+
+export function SimpleHeader({ title, subtitle, syncing = false }: SimpleHeaderProps) {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <header className="bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
+      <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-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-[var(--foreground)] tracking-wider">
+                  {title}
+                </h1>
+                <p className="text-[var(--muted-foreground)] 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-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
+              >
+                Kanban
+              </Link>
+              <Link
+                href="/daily"
+                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
+              >
+                Daily
+              </Link>
+              <Link
+                href="/tags"
+                className="text-[var(--muted-foreground)] hover:text-[var(--accent)] transition-colors font-mono text-sm uppercase tracking-wider"
+              >
+                Tags
+              </Link>
+              
+              {/* Theme Toggle */}
+              <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>
+                )}
+              </button>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/services/user-preferences.ts b/services/user-preferences.ts
index 2173187..996ff30 100644
--- a/services/user-preferences.ts
+++ b/services/user-preferences.ts
@@ -14,6 +14,7 @@ export interface ViewPreferences {
   swimlanesByTags: boolean;
   swimlanesMode?: 'tags' | 'priority';
   showObjectives: boolean;
+  showFilters: boolean;
 }
 
 export interface ColumnVisibility {
@@ -37,7 +38,8 @@ const DEFAULT_PREFERENCES: UserPreferences = {
   viewPreferences: {
     compactView: false,
     swimlanesByTags: false,
-    showObjectives: true
+    showObjectives: true,
+    showFilters: true
   },
   columnVisibility: {
     hiddenStatuses: []
diff --git a/src/app/daily/DailyPageClient.tsx b/src/app/daily/DailyPageClient.tsx
index 98bfe25..b639b0b 100644
--- a/src/app/daily/DailyPageClient.tsx
+++ b/src/app/daily/DailyPageClient.tsx
@@ -10,6 +10,7 @@ import { Card } from '@/components/ui/Card';
 import Link from 'next/link';
 import { DailyCalendar } from '@/components/daily/DailyCalendar';
 import { dailyClient } from '@/clients/daily-client';
+import { SimpleHeader } from '@/components/ui/SimpleHeader';
 
 interface DailySectionProps {
   title: string;
@@ -367,58 +368,51 @@ export function DailyPageClient({
 
   return (
     <div className="min-h-screen bg-[var(--background)]">
-      {/* Header */}
-      <header className="bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 sticky top-0 z-10">
-        <div className="container mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <Link
-                href="/"
-                className="text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono text-sm"
-              >
-                ← Kanban
-              </Link>
-              <h1 className="text-xl font-bold text-[var(--foreground)] font-mono">
-                📝 Daily
-              </h1>
-            </div>
+      {/* Header uniforme */}
+      <SimpleHeader 
+        title="TowerControl" 
+        subtitle="Daily - Gestion quotidienne"
+        syncing={saving}
+      />
 
-            <div className="flex items-center gap-2">
-              <Button
-                onClick={goToPreviousDay}
-                variant="ghost"
-                size="sm"
-                disabled={saving}
-              >
-                ←
-              </Button>
-              
-              <div className="text-center min-w-[200px]">
-                <div className="text-sm font-bold text-[var(--foreground)] font-mono">
-                  {formatCurrentDate()}
-                </div>
-                {!isToday() && (
-                  <button
-                    onClick={goToToday}
-                    className="text-xs text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono"
-                  >
-                    Aller à aujourd&apos;hui
-                  </button>
-                )}
+      {/* Navigation Daily spécifique */}
+      <div className="bg-[var(--card)]/50 border-b border-[var(--border)]/30">
+        <div className="container mx-auto px-4 py-3">
+          <div className="flex items-center justify-center gap-2">
+            <Button
+              onClick={goToPreviousDay}
+              variant="ghost"
+              size="sm"
+              disabled={saving}
+            >
+              ←
+            </Button>
+            
+            <div className="text-center min-w-[200px]">
+              <div className="text-sm font-bold text-[var(--foreground)] font-mono">
+                {formatCurrentDate()}
               </div>
-
-              <Button
-                onClick={goToNextDay}
-                variant="ghost"
-                size="sm"
-                disabled={saving}
-              >
-                →
-              </Button>
+              {!isToday() && (
+                <button
+                  onClick={goToToday}
+                  className="text-xs text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono"
+                >
+                  Aller à aujourd&apos;hui
+                </button>
+              )}
             </div>
+
+            <Button
+              onClick={goToNextDay}
+              variant="ghost"
+              size="sm"
+              disabled={saving}
+            >
+              →
+            </Button>
           </div>
         </div>
-      </header>
+      </div>
 
       {/* Contenu principal */}
       <main className="container mx-auto px-4 py-8">
diff --git a/src/app/tags/TagsPageClient.tsx b/src/app/tags/TagsPageClient.tsx
index b4608b4..45380a2 100644
--- a/src/app/tags/TagsPageClient.tsx
+++ b/src/app/tags/TagsPageClient.tsx
@@ -8,7 +8,7 @@ import { CreateTagData } from '@/clients/tags-client';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { TagForm } from '@/components/forms/TagForm';
-import Link from 'next/link';
+import { SimpleHeader } from '@/components/ui/SimpleHeader';
 
 interface TagsPageClientProps {
   initialTags: Tag[];
@@ -82,31 +82,21 @@ export function TagsPageClient({ initialTags }: TagsPageClientProps) {
 
   return (
     <div className="min-h-screen bg-[var(--background)]">
-      {/* Header simplifié */}
-      <div className="bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50">
+      {/* Header uniforme */}
+      <SimpleHeader 
+        title="TowerControl" 
+        subtitle="Tags - Gestion des étiquettes"
+        syncing={loading}
+      />
+
+      {/* Header spécifique aux tags */}
+      <div className="bg-[var(--card)]/50 border-b border-[var(--border)]/30">
         <div className="container mx-auto px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
-              {/* Bouton retour */}
-              <Link
-                href="/"
-                className="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--card)] border border-[var(--border)] hover:border-[var(--primary)]/50 hover:bg-[var(--card-hover)] transition-all duration-200 group"
-                title="Retour au Kanban"
-              >
-                <svg 
-                  className="w-5 h-5 text-[var(--muted-foreground)] group-hover:text-[var(--primary)] transition-colors" 
-                  fill="none" 
-                  stroke="currentColor" 
-                  viewBox="0 0 24 24"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                </svg>
-              </Link>
-
-              <div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
-              <h1 className="text-xl font-mono font-bold text-[var(--foreground)] tracking-wider">
+              <h2 className="text-lg font-mono font-bold text-[var(--foreground)] tracking-wider">
                 Tags ({filteredAndSortedTags.length})
-              </h1>
+              </h2>
             </div>
             
             <Button