diff --git a/src/app/kanban/KanbanPageClient.tsx b/src/app/kanban/KanbanPageClient.tsx index c47413f..4e176b8 100644 --- a/src/app/kanban/KanbanPageClient.tsx +++ b/src/app/kanban/KanbanPageClient.tsx @@ -21,7 +21,7 @@ interface KanbanPageClientProps { function KanbanPageContent() { const { syncing, createTask, activeFiltersCount, kanbanFilters, setKanbanFilters } = useTasksContext(); - const { preferences, updateViewPreferences } = useUserPreferences(); + const { preferences, updateViewPreferences, toggleFontSize } = useUserPreferences(); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const isMobile = useIsMobile(768); // Tailwind md breakpoint const searchParams = useSearchParams(); @@ -50,6 +50,13 @@ function KanbanPageContent() { updateViewPreferences({ swimlanesByTags: !swimlanesByTags }); }; + const handleToggleDueDateFilter = () => { + setKanbanFilters({ + ...kanbanFilters, + showWithDueDate: !kanbanFilters.showWithDueDate + }); + }; + // Handler pour la création de tâche depuis la barre de contrôles const handleCreateTask = async (data: CreateTaskData) => { await createTask(data); @@ -62,6 +69,9 @@ function KanbanPageContent() { onToggleFilters: handleToggleFilters, onToggleCompactView: handleToggleCompactView, onToggleSwimlanes: handleToggleSwimlanes, + onToggleObjectives: handleToggleObjectives, + onToggleDueDateFilter: handleToggleDueDateFilter, + onToggleFontSize: toggleFontSize, onOpenSearch: () => { // Focus sur le champ de recherche dans les contrôles desktop const searchInput = document.querySelector('input[placeholder*="Rechercher"]') as HTMLInputElement; diff --git a/src/components/KeyboardShortcuts.tsx b/src/components/KeyboardShortcuts.tsx index 2db7965..a96f49f 100644 --- a/src/components/KeyboardShortcuts.tsx +++ b/src/components/KeyboardShortcuts.tsx @@ -1,11 +1,11 @@ 'use client'; -import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'; +import { useGlobalKeyboardShortcuts } from '@/hooks/useGlobalKeyboardShortcuts'; import { useKeyboardShortcutsModal } from '@/contexts/KeyboardShortcutsContext'; import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal'; export function KeyboardShortcuts() { - useKeyboardShortcuts(); + useGlobalKeyboardShortcuts(); const { isOpen, shortcuts, closeModal } = useKeyboardShortcutsModal(); return ( diff --git a/src/components/ui/KeyboardShortcutsModal.tsx b/src/components/ui/KeyboardShortcutsModal.tsx index 44b28e0..5b9d2f0 100644 --- a/src/components/ui/KeyboardShortcutsModal.tsx +++ b/src/components/ui/KeyboardShortcutsModal.tsx @@ -18,7 +18,7 @@ interface KeyboardShortcutsModalProps { function KeyBadge({ keyText }: { keyText: string }) { return ( - + {keyText} ); @@ -26,10 +26,10 @@ function KeyBadge({ keyText }: { keyText: string }) { function ShortcutRow({ shortcut }: { shortcut: KeyboardShortcut }) { return ( -
-
+
+
{shortcut.keys.map((key, index) => ( -
+
{index < shortcut.keys.length - 1 && ( + @@ -37,7 +37,7 @@ function ShortcutRow({ shortcut }: { shortcut: KeyboardShortcut }) {
))}
- + {shortcut.description}
@@ -61,14 +61,14 @@ export function KeyboardShortcutsModal({ }, {} as Record); return ( - -
+ +
{Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
-

+

{category}

-
+
{categoryShortcuts.map((shortcut, index) => ( ))} @@ -77,8 +77,8 @@ export function KeyboardShortcutsModal({ ))} {shortcuts.length === 0 && ( -
-

+

+

Aucun raccourci disponible sur cette page

@@ -86,9 +86,9 @@ export function KeyboardShortcutsModal({
{/* Footer avec info */} -
+

- Appuyez sur pour fermer cette fenêtre + pour fermer

diff --git a/src/contexts/KeyboardShortcutsContext.tsx b/src/contexts/KeyboardShortcutsContext.tsx index 1f48b7f..66655fa 100644 --- a/src/contexts/KeyboardShortcutsContext.tsx +++ b/src/contexts/KeyboardShortcutsContext.tsx @@ -23,13 +23,13 @@ const PAGE_SHORTCUTS: PageShortcuts = { category: 'Navigation' }, { - keys: ['Cmd', 'Ctrl', 'D'], + keys: ['Shift', 'Q'], description: 'Basculer le thème', category: 'Apparence' }, { - keys: ['Cmd', 'Ctrl', 'T'], - description: 'Changer de thème sombre', + keys: ['Shift', 'W'], + description: 'Faire tourner les thèmes dark', category: 'Apparence' }, { @@ -42,7 +42,7 @@ const PAGE_SHORTCUTS: PageShortcuts = { // Dashboard '/': [ { - keys: ['Cmd', 'Ctrl', 'K'], + keys: ['Shift', 'K'], description: 'Vers Kanban', category: 'Navigation' } @@ -51,7 +51,7 @@ const PAGE_SHORTCUTS: PageShortcuts = { // Kanban '/kanban': [ { - keys: ['Cmd', 'Ctrl', 'N'], + keys: ['Shift', 'N'], description: 'Créer une nouvelle tâche', category: 'Actions' }, @@ -61,15 +61,30 @@ const PAGE_SHORTCUTS: PageShortcuts = { category: 'Vue' }, { - keys: ['Cmd', 'Ctrl', 'F'], + keys: ['Shift', 'F'], description: 'Ouvrir les filtres', category: 'Filtres' }, { - keys: ['Cmd', 'Ctrl', 'S'], + keys: ['Shift', 'S'], description: 'Basculer les swimlanes', category: 'Vue' }, + { + keys: ['Shift', 'O'], + description: 'Basculer les objectifs', + category: 'Vue' + }, + { + keys: ['Shift', 'D'], + description: 'Filtrer par date de fin', + category: 'Filtres' + }, + { + keys: ['Shift', 'Z'], + description: 'Basculer la taille de police', + category: 'Vue' + }, { keys: ['Tab'], description: 'Navigation entre colonnes', @@ -95,7 +110,7 @@ const PAGE_SHORTCUTS: PageShortcuts = { category: 'Navigation' }, { - keys: ['Cmd', 'Ctrl', 'T'], + keys: ['Shift', 'H'], description: 'Aller à aujourd\'hui', category: 'Navigation' }, diff --git a/src/hooks/useGlobalKeyboardShortcuts.ts b/src/hooks/useGlobalKeyboardShortcuts.ts index 19119d7..acf657f 100644 --- a/src/hooks/useGlobalKeyboardShortcuts.ts +++ b/src/hooks/useGlobalKeyboardShortcuts.ts @@ -2,12 +2,16 @@ import { useEffect } from 'react'; import { usePathname } from 'next/navigation'; +import { useTheme } from '@/contexts/ThemeContext'; interface KeyboardShortcutsActions { onCreateTask?: () => void; onToggleFilters?: () => void; onToggleCompactView?: () => void; onToggleSwimlanes?: () => void; + onToggleObjectives?: () => void; + onToggleDueDateFilter?: () => void; + onToggleFontSize?: () => void; onNavigatePrevious?: () => void; onNavigateNext?: () => void; onGoToToday?: () => void; @@ -21,6 +25,7 @@ interface KeyboardShortcutsActions { export function useGlobalKeyboardShortcuts(actions: KeyboardShortcutsActions = {}) { const pathname = usePathname(); + const { toggleTheme, cycleDarkThemes } = useTheme(); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { @@ -36,61 +41,91 @@ export function useGlobalKeyboardShortcuts(actions: KeyboardShortcutsActions = { return; } - // Cmd+K - Ouvrir la recherche rapide - if ((event.metaKey || event.ctrlKey) && event.key === 'k') { - event.preventDefault(); - actions.onOpenSearch?.(); - return; + // Raccourcis globaux (toutes les pages) + if (event.shiftKey) { + switch (event.key) { + case 'Q': + event.preventDefault(); + toggleTheme(); + return; + case 'W': + event.preventDefault(); + cycleDarkThemes(); + return; + case 'K': + event.preventDefault(); + actions.onOpenSearch?.(); + return; + } } - // Cmd+N - Créer une nouvelle tâche/élément - if ((event.metaKey || event.ctrlKey) && event.key === 'n') { - event.preventDefault(); - actions.onCreateTask?.(); - return; + // Raccourcis spécifiques par page + switch (pathname) { + case '/kanban': + handleKanbanShortcuts(event, actions); + break; + case '/daily': + handleDailyShortcuts(event, actions); + break; + default: + handleDefaultShortcuts(event, actions); + break; } + }; - // Cmd+F - Ouvrir les filtres (Kanban) - if ((event.metaKey || event.ctrlKey) && event.key === 'f') { - event.preventDefault(); - actions.onToggleFilters?.(); - return; - } - - // Cmd+S - Basculer les swimlanes (Kanban) - if ((event.metaKey || event.ctrlKey) && event.key === 's') { - event.preventDefault(); - actions.onToggleSwimlanes?.(); - return; - } - - // Space - Basculer la vue compacte (Kanban) - if (event.key === ' ' && pathname === '/kanban') { + // Fonctions de gestion des raccourcis par page + const handleKanbanShortcuts = (event: KeyboardEvent, actions: KeyboardShortcutsActions) => { + if (event.shiftKey) { + switch (event.key) { + case 'N': + event.preventDefault(); + actions.onCreateTask?.(); + break; + case 'F': + event.preventDefault(); + actions.onToggleFilters?.(); + break; + case 'S': + event.preventDefault(); + actions.onToggleSwimlanes?.(); + break; + case 'O': + event.preventDefault(); + actions.onToggleObjectives?.(); + break; + case 'D': + event.preventDefault(); + actions.onToggleDueDateFilter?.(); + break; + case 'Z': + event.preventDefault(); + actions.onToggleFontSize?.(); + break; + } + } else if (event.key === ' ') { event.preventDefault(); actions.onToggleCompactView?.(); - return; } + }; - // Cmd+T - Aller à aujourd'hui/cette semaine - if ((event.metaKey || event.ctrlKey) && event.key === 't') { + const handleDailyShortcuts = (event: KeyboardEvent, actions: KeyboardShortcutsActions) => { + if (event.shiftKey && event.key === 'H') { event.preventDefault(); actions.onGoToToday?.(); - return; } + }; - // Flèches gauche/droite - Navigation - if (event.key === 'ArrowLeft') { - event.preventDefault(); - actions.onNavigatePrevious?.(); - return; + const handleDefaultShortcuts = (event: KeyboardEvent, actions: KeyboardShortcutsActions) => { + switch (event.key) { + case 'ArrowLeft': + event.preventDefault(); + actions.onNavigatePrevious?.(); + break; + case 'ArrowRight': + event.preventDefault(); + actions.onNavigateNext?.(); + break; } - - if (event.key === 'ArrowRight') { - event.preventDefault(); - actions.onNavigateNext?.(); - return; - } - }; document.addEventListener('keydown', handleKeyDown); @@ -98,5 +133,5 @@ export function useGlobalKeyboardShortcuts(actions: KeyboardShortcutsActions = { return () => { document.removeEventListener('keydown', handleKeyDown); }; - }, [pathname, actions]); + }, [pathname, actions, toggleTheme, cycleDarkThemes]); } diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts deleted file mode 100644 index 6b25982..0000000 --- a/src/hooks/useKeyboardShortcuts.ts +++ /dev/null @@ -1,30 +0,0 @@ -'use client'; - -import { useEffect } from 'react'; -import { useTheme } from '@/contexts/ThemeContext'; - -export function useKeyboardShortcuts() { - const { toggleTheme, cycleDarkThemes } = useTheme(); - - useEffect(() => { - const handleKeyDown = (event: KeyboardEvent) => { - // Cmd + Shift + D pour basculer entre light et le thème dark préféré - if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'D') { - event.preventDefault(); - toggleTheme(); - } - - // Cmd + Shift + T pour faire tourner les thèmes dark - if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'T') { - event.preventDefault(); - cycleDarkThemes(); - } - }; - - document.addEventListener('keydown', handleKeyDown); - - return () => { - document.removeEventListener('keydown', handleKeyDown); - }; - }, [toggleTheme, cycleDarkThemes]); -}