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.
This commit is contained in:
Julien Froidefond
2025-09-15 21:31:34 +02:00
parent cb2e8e9c9f
commit 44df8c89b8
7 changed files with 235 additions and 131 deletions

View File

@@ -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>
);