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

@@ -14,6 +14,7 @@ import { PendingTasksSection } from '@/components/daily/PendingTasksSection';
import { dailyClient } from '@/clients/daily-client';
import { Header } from '@/components/ui/Header';
import { getPreviousWorkday, formatDateLong, isToday, generateDateTitle, formatDateShort, isYesterday } from '@/lib/date-utils';
import { useGlobalKeyboardShortcuts } from '@/hooks/useGlobalKeyboardShortcuts';
interface DailyPageClientProps {
initialDailyView?: DailyView;
@@ -85,6 +86,13 @@ export function DailyPageClient({
await refreshDailyDates();
};
// Raccourcis clavier globaux pour la page Daily
useGlobalKeyboardShortcuts({
onNavigatePrevious: goToPreviousDay,
onNavigateNext: goToNextDay,
onGoToToday: goToToday
});
const handleToggleCheckbox = async (checkboxId: string) => {
await toggleCheckbox(checkboxId);
};

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

View File

@@ -4,6 +4,7 @@ import "./globals.css";
import { ThemeProvider } from "@/contexts/ThemeContext";
import { JiraConfigProvider } from "@/contexts/JiraConfigContext";
import { UserPreferencesProvider } from "@/contexts/UserPreferencesContext";
import { KeyboardShortcutsProvider } from "@/contexts/KeyboardShortcutsContext";
import { userPreferencesService } from "@/services/core/user-preferences";
import { KeyboardShortcuts } from "@/components/KeyboardShortcuts";
@@ -39,12 +40,14 @@ export default async function RootLayout({
initialTheme={initialPreferences.viewPreferences.theme}
userPreferredTheme={initialPreferences.viewPreferences.theme === 'light' ? 'dark' : initialPreferences.viewPreferences.theme}
>
<KeyboardShortcuts />
<JiraConfigProvider config={initialPreferences.jiraConfig}>
<UserPreferencesProvider initialPreferences={initialPreferences}>
{children}
</UserPreferencesProvider>
</JiraConfigProvider>
<KeyboardShortcutsProvider>
<KeyboardShortcuts />
<JiraConfigProvider config={initialPreferences.jiraConfig}>
<UserPreferencesProvider initialPreferences={initialPreferences}>
{children}
</UserPreferencesProvider>
</JiraConfigProvider>
</KeyboardShortcutsProvider>
</ThemeProvider>
</body>
</html>