07cd3bde3b
- Added theme context and provider for light/dark mode support. - Integrated theme toggle button in the Header component. - Updated UI components to utilize CSS variables for consistent theming. - Enhanced Kanban components and forms with new theme styles for better visual coherence. - Adjusted global styles to define color variables for both themes, improving maintainability.
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo } from 'react';
|
|
import { Task, TaskStatus } from '@/lib/types';
|
|
import { getAllStatuses } from '@/lib/status-config';
|
|
|
|
interface ColumnVisibilityToggleProps {
|
|
hiddenStatuses: Set<TaskStatus>;
|
|
onToggleStatus: (status: TaskStatus) => void;
|
|
tasks: Task[];
|
|
className?: string;
|
|
}
|
|
|
|
export function ColumnVisibilityToggle({
|
|
hiddenStatuses,
|
|
onToggleStatus,
|
|
tasks,
|
|
className = ""
|
|
}: ColumnVisibilityToggleProps) {
|
|
const statuses = getAllStatuses();
|
|
|
|
// Calculer les compteurs pour chaque statut
|
|
const statusCounts = useMemo(() => {
|
|
const counts: Record<string, number> = {};
|
|
statuses.forEach(status => {
|
|
counts[status.key] = tasks.filter(task => task.status === status.key).length;
|
|
});
|
|
return counts;
|
|
}, [tasks, statuses]);
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
|
<span className="text-sm font-mono font-medium text-[var(--muted-foreground)]">
|
|
Colonnes :
|
|
</span>
|
|
{statuses.map(statusConfig => (
|
|
<button
|
|
key={statusConfig.key}
|
|
onClick={() => onToggleStatus(statusConfig.key)}
|
|
className={`px-3 py-1 rounded-lg text-xs font-mono font-medium transition-colors ${
|
|
hiddenStatuses.has(statusConfig.key)
|
|
? 'bg-[var(--muted)]/20 text-[var(--muted)] hover:bg-[var(--muted)]/30'
|
|
: 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30 hover:bg-[var(--primary)]/30'
|
|
}`}
|
|
title={hiddenStatuses.has(statusConfig.key) ? `Afficher ${statusConfig.label}` : `Masquer ${statusConfig.label}`}
|
|
>
|
|
{hiddenStatuses.has(statusConfig.key) ? '👁️🗨️' : '👁️'} {statusConfig.label} ({statusCounts[statusConfig.key] || 0})
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|