feat: integrate global keyboard shortcuts across multiple components

- Added `KeyboardShortcutsProvider` to `RootLayout` for centralized keyboard shortcut management.
- Implemented `useGlobalKeyboardShortcuts` in `DailyPageClient`, `KanbanPageClient`, and `HomePageClient` to enhance navigation and task management with keyboard shortcuts.
- Updated `KeyboardShortcuts` component to render a modal for displaying available shortcuts, improving user accessibility.
- Enhanced `Header` component with buttons to open the keyboard shortcuts modal, streamlining user interaction.
This commit is contained in:
Julien Froidefond
2025-09-29 17:29:11 +02:00
parent c1a14f9196
commit 749f69680b
10 changed files with 487 additions and 8 deletions

View File

@@ -12,6 +12,7 @@ import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
import { MobileControls } from '@/components/kanban/MobileControls';
import { DesktopControls } from '@/components/kanban/DesktopControls';
import { useIsMobile } from '@/hooks/useIsMobile';
import { useGlobalKeyboardShortcuts } from '@/hooks/useGlobalKeyboardShortcuts';
interface KanbanPageClientProps {
initialTasks: Task[];
@@ -55,6 +56,19 @@ function KanbanPageContent() {
setIsCreateModalOpen(false);
};
// Raccourcis clavier globaux pour la page Kanban
useGlobalKeyboardShortcuts({
onCreateTask: () => setIsCreateModalOpen(true),
onToggleFilters: handleToggleFilters,
onToggleCompactView: handleToggleCompactView,
onToggleSwimlanes: handleToggleSwimlanes,
onOpenSearch: () => {
// Focus sur le champ de recherche dans les contrôles desktop
const searchInput = document.querySelector('input[placeholder*="Rechercher"]') as HTMLInputElement;
searchInput?.focus();
}
});
return (
<div className="min-h-screen bg-[var(--background)]">
<Header