feat: add compact view feature to Kanban components

- Introduced `compactView` prop in `KanbanBoard`, `KanbanColumn`, and `TaskCard` for a streamlined task display.
- Updated `KanbanFilters` to include a toggle for compact view, enhancing user experience.
- Adjusted rendering logic in `TaskCard` to conditionally display task details based on the compact view state.
This commit is contained in:
Julien Froidefond
2025-09-14 21:37:33 +02:00
parent c1844cfb71
commit ef3ee1bdbf
5 changed files with 118 additions and 6 deletions

View File

@@ -25,9 +25,10 @@ interface KanbanBoardProps {
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
loading?: boolean;
compactView?: boolean;
}
export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, loading = false }: KanbanBoardProps) {
export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, loading = false, compactView = false }: KanbanBoardProps) {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [activeTask, setActiveTask] = useState<Task | null>(null);
@@ -157,6 +158,7 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
onDeleteTask={onDeleteTask}
onEditTask={onEditTask}
onUpdateTitle={onUpdateTitle}
compactView={compactView}
/>
))}
</div>