feat: reintroduce ColumnVisibilityToggle in KanbanFilters

- Moved `ColumnVisibilityToggle` from `Board` and `SwimlanesBase` to `KanbanFilters` for better accessibility.
- Updated `KanbanFilters` to manage column visibility, enhancing user control over displayed statuses.
- Cleaned up unused imports and adjusted layout for improved UI consistency.
This commit is contained in:
Julien Froidefond
2025-09-15 10:33:49 +02:00
parent 363e739b5c
commit 2f18c08b55
4 changed files with 26 additions and 22 deletions

View File

@@ -7,7 +7,6 @@ import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
import { CreateTaskData } from '@/clients/tasks-client';
import { useMemo, useState } from 'react';
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
import { getAllStatuses } from '@/lib/status-config';
import {
DndContext,
@@ -129,14 +128,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
)}
</div>
{/* Toggle de visibilité des colonnes */}
<div className="px-6 pb-4">
<ColumnVisibilityToggle
hiddenStatuses={hiddenStatuses}
onToggleStatus={toggleStatusVisibility}
tasks={tasks}
/>
</div>
{/* Board tech dark */}
<div className="flex-1 flex gap-6 overflow-x-auto p-6">

View File

@@ -8,6 +8,8 @@ import { Input } from '@/components/ui/Input';
import { useTasksContext } from '@/contexts/TasksContext';
import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config';
import { SORT_OPTIONS } from '@/lib/sort-config';
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
export interface KanbanFilters {
search?: string;
@@ -28,6 +30,7 @@ interface KanbanFiltersProps {
export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps) {
const { tags: availableTags, regularTasks } = useTasksContext();
const { hiddenStatuses, toggleStatusVisibility } = useColumnVisibility();
const [isExpanded, setIsExpanded] = useState(false);
const [isSortExpanded, setIsSortExpanded] = useState(false);
const [isSwimlaneModeExpanded, setIsSwimlaneModeExpanded] = useState(false);
@@ -385,6 +388,16 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
)}
</div>
{/* Visibilité des colonnes */}
<div className="col-span-full border-t border-slate-700/50 pt-6 mt-4">
<ColumnVisibilityToggle
hiddenStatuses={hiddenStatuses}
onToggleStatus={toggleStatusVisibility}
tasks={regularTasks}
className="text-xs"
/>
</div>
{/* Résumé des filtres actifs */}
{activeFiltersCount > 0 && (
<div className="bg-slate-800/30 rounded-lg p-3 border border-slate-700/50">

View File

@@ -4,7 +4,6 @@ import { Task, TaskStatus } from '@/lib/types';
import { TaskCard } from './TaskCard';
import { useState } from 'react';
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
import { getAllStatuses } from '@/lib/status-config';
import {
DndContext,
@@ -158,18 +157,10 @@ export function SwimlanesBase({
</h2>
</div>
{/* Headers des colonnes avec boutons toggle */}
<div className="flex items-center justify-between px-6 pb-4">
<ColumnVisibilityToggle
hiddenStatuses={hiddenStatuses}
onToggleStatus={toggleStatusVisibility}
tasks={tasks}
/>
</div>
{/* Headers des colonnes visibles */}
<div
className={`grid gap-4 px-6 pb-4 ml-8`}
className={`grid gap-4 px-6 py-4 ml-8`}
style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
>
{visibleStatuses.map(status => {

View File

@@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/Badge';
import { TagDisplay } from '@/components/ui/TagDisplay';
import { useTasksContext } from '@/contexts/TasksContext';
import { useDraggable } from '@dnd-kit/core';
import { getPriorityConfig } from '@/lib/status-config';
import { getPriorityConfig, getPriorityColorHex } from '@/lib/status-config';
interface TaskCardProps {
task: Task;
@@ -167,7 +167,10 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
)}
{/* Indicateur de priorité compact */}
<div className={`w-1.5 h-1.5 rounded-full bg-${getPriorityConfig(task.priority).color}-400`} />
<div
className="w-1.5 h-1.5 rounded-full"
style={{ backgroundColor: getPriorityColorHex(getPriorityConfig(task.priority).color) }}
/>
</div>
</div>
</Card>
@@ -248,7 +251,13 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
)}
{/* Indicateur de priorité tech */}
<div className={`w-2 h-2 rounded-full animate-pulse bg-${getPriorityConfig(task.priority).color}-400 shadow-${getPriorityConfig(task.priority).color}-400/50 shadow-sm`} />
<div
className="w-2 h-2 rounded-full animate-pulse shadow-sm"
style={{
backgroundColor: getPriorityColorHex(getPriorityConfig(task.priority).color),
boxShadow: `0 0 4px ${getPriorityColorHex(getPriorityConfig(task.priority).color)}50`
}}
/>
</div>
</div>