julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance KanbanPageClient and KeyboardShortcuts with new functionality

Browse Source 
- Added `toggleFontSize` and `handleToggleDueDateFilter` to `KanbanPageClient` for improved user control over font size and due date visibility.
- Replaced `useKeyboardShortcuts` with `useGlobalKeyboardShortcuts` for better shortcut management across components.
- Updated keyboard shortcuts in `KeyboardShortcutsContext` to include new actions for toggling objectives, due date filters, and font size.
- Refined `KeyboardShortcutsModal` layout for better usability and consistency.
- Removed deprecated `useKeyboardShortcuts` hook to streamline codebase.
This commit is contained in:
Julien Froidefond
2025-09-29 20:57:00 +02:00
parent 749f69680b
commit 32f9d1d5de
6 changed files with 127 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/hooks/useGlobalKeyboardShortcuts.ts
View File

@@ -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]);
}

30
src/hooks/useKeyboardShortcuts.ts
View File

@@ -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]);
}