10c1f811ce
- Added `ToastProvider` to `RootLayout` for improved user feedback on theme changes. - Updated `ThemeProvider` to display toast notifications with theme names and icons upon theme changes. - Refactored theme-related imports to streamline code and improve maintainability. - Simplified background cycling logic in `useBackgroundCycle` to utilize centralized background definitions. - Cleaned up unused background definitions in `BackgroundContext` for better clarity and performance.
345 lines
15 KiB
TypeScript
345 lines
15 KiB
TypeScript
'use client';
|
||
|
||
import { useTheme } from '@/contexts/ThemeContext';
|
||
import { useJiraConfig } from '@/contexts/JiraConfigContext';
|
||
import { usePathname } from 'next/navigation';
|
||
import Link from 'next/link';
|
||
import { useState } from 'react';
|
||
import { Theme, THEME_CONFIG, getThemeIcon } from '@/lib/ui-config';
|
||
import { useKeyboardShortcutsModal } from '@/contexts/KeyboardShortcutsContext';
|
||
import { AuthButton } from '@/components/AuthButton';
|
||
import { useSession, signOut } from 'next-auth/react';
|
||
|
||
interface HeaderProps {
|
||
title?: string;
|
||
subtitle?: string;
|
||
syncing?: boolean;
|
||
}
|
||
|
||
export function Header({ title = "TowerControl", subtitle = "Task Management", syncing = false }: HeaderProps) {
|
||
const { theme, setTheme } = useTheme();
|
||
const { isConfigured: isJiraConfigured, config: jiraConfig } = useJiraConfig();
|
||
const pathname = usePathname();
|
||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||
const [themeDropdownOpen, setThemeDropdownOpen] = useState(false);
|
||
const { openModal: openShortcutsModal } = useKeyboardShortcutsModal();
|
||
const { data: session } = useSession();
|
||
|
||
// Liste des thèmes disponibles avec leurs labels et icônes
|
||
const themes: { value: Theme; label: string; icon: string }[] = THEME_CONFIG.allThemes.map(themeValue => {
|
||
return {
|
||
value: themeValue,
|
||
label: themeValue.charAt(0).toUpperCase() + themeValue.slice(1).replace('_', ' '),
|
||
icon: getThemeIcon(themeValue)
|
||
};
|
||
});
|
||
|
||
// Fonction pour déterminer si un lien est actif
|
||
const isActiveLink = (href: string) => {
|
||
if (href === '/') {
|
||
return pathname === '/';
|
||
}
|
||
return pathname.startsWith(href);
|
||
};
|
||
|
||
// Fonction pour obtenir les classes CSS d'un lien (desktop)
|
||
const getLinkClasses = (href: string) => {
|
||
const baseClasses = "font-mono text-sm uppercase tracking-wider transition-colors px-3 py-1.5 rounded-md";
|
||
|
||
if (isActiveLink(href)) {
|
||
return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border border-[var(--primary)]/30`;
|
||
}
|
||
|
||
return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
|
||
};
|
||
|
||
// Fonction pour obtenir les classes CSS d'un lien (mobile)
|
||
const getMobileLinkClasses = (href: string) => {
|
||
const baseClasses = "font-mono text-sm uppercase tracking-wider transition-colors px-4 py-3 rounded-md block w-full text-left";
|
||
|
||
if (isActiveLink(href)) {
|
||
return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border border-[var(--primary)]/30`;
|
||
}
|
||
|
||
return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
|
||
};
|
||
|
||
// Liste des liens de navigation
|
||
const navLinks = [
|
||
{ href: '/', label: 'Dashboard' },
|
||
{ href: '/kanban', label: 'Kanban' },
|
||
{ href: '/daily', label: 'Daily' },
|
||
{ href: '/weekly-manager', label: 'Weekly' },
|
||
...(isJiraConfigured ? [{ href: '/jira-dashboard', label: `Jira${jiraConfig?.projectKey ? ` (${jiraConfig.projectKey})` : ''}` }] : []),
|
||
{ href: '/settings', label: 'Settings' }
|
||
];
|
||
|
||
return (
|
||
<header className="relative z-50 bg-[var(--card)]/80 border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
|
||
<div className="container mx-auto px-4 sm:px-6 py-4">
|
||
{/* Layout mobile/tablette */}
|
||
<div className="lg:hidden">
|
||
<div className="flex items-center justify-between">
|
||
{/* Titre et status */}
|
||
<div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
|
||
<div className={`w-3 h-3 rounded-full shadow-lg flex-shrink-0 ${
|
||
syncing
|
||
? 'bg-yellow-400 animate-spin shadow-yellow-400/50'
|
||
: 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
|
||
}`}></div>
|
||
<div className="min-w-0">
|
||
<h1 className="text-xl sm:text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider truncate">
|
||
{title}
|
||
</h1>
|
||
<p className="text-[var(--muted-foreground)] mt-1 font-mono text-xs sm:text-sm truncate">
|
||
{subtitle}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Controls mobile/tablette */}
|
||
<div className="flex items-center gap-2 flex-shrink-0">
|
||
{/* Keyboard Shortcuts */}
|
||
<button
|
||
onClick={openShortcutsModal}
|
||
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
|
||
title="Raccourcis clavier (Cmd+?)"
|
||
>
|
||
⌨️
|
||
</button>
|
||
|
||
{/* Theme Dropdown */}
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setThemeDropdownOpen(!themeDropdownOpen)}
|
||
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
|
||
title="Select theme"
|
||
>
|
||
{themes.find(t => t.value === theme)?.icon || '🎨'}
|
||
</button>
|
||
|
||
{themeDropdownOpen && (
|
||
<>
|
||
{/* Backdrop */}
|
||
<div
|
||
className="fixed inset-0 z-[200]"
|
||
onClick={() => setThemeDropdownOpen(false)}
|
||
/>
|
||
{/* Dropdown */}
|
||
<div className="absolute right-0 top-full mt-2 w-48 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] overflow-hidden">
|
||
<div className="py-2">
|
||
{themes.map((themeOption) => (
|
||
<button
|
||
key={themeOption.value}
|
||
onClick={() => {
|
||
setTheme(themeOption.value);
|
||
setThemeDropdownOpen(false);
|
||
}}
|
||
className={`w-full text-left px-4 py-2 text-sm transition-colors flex items-center gap-3 ${
|
||
theme === themeOption.value
|
||
? 'text-[var(--primary)] bg-[var(--primary)]/10'
|
||
: 'text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--card-hover)]'
|
||
}`}
|
||
>
|
||
<span className="text-base">{themeOption.icon}</span>
|
||
<span className="font-mono">{themeOption.label}</span>
|
||
{theme === themeOption.value && (
|
||
<svg className="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Menu burger */}
|
||
<button
|
||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
|
||
title="Toggle menu"
|
||
>
|
||
{mobileMenuOpen ? (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
) : (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Auth controls à droite mobile */}
|
||
<div className="flex items-center gap-1">
|
||
<AuthButton />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Layout desktop - une seule ligne comme avant */}
|
||
<div className="hidden lg:flex items-center justify-between gap-6">
|
||
{/* Titre et status */}
|
||
<div className="flex items-center gap-6">
|
||
<div className="flex items-center gap-4 w-[300px]">
|
||
<div className={`w-3 h-3 rounded-full shadow-lg ${
|
||
syncing
|
||
? 'bg-yellow-400 animate-spin shadow-yellow-400/50'
|
||
: 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
|
||
}`}></div>
|
||
<div>
|
||
<h1 className="text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider">
|
||
{title}
|
||
</h1>
|
||
<p className="text-[var(--muted-foreground)] mt-1 font-mono text-sm">
|
||
{subtitle}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation desktop */}
|
||
<nav className="flex items-center gap-2">
|
||
{navLinks.map(({ href, label }) => (
|
||
<Link
|
||
key={href}
|
||
href={href}
|
||
className={getLinkClasses(href)}
|
||
>
|
||
{label}
|
||
</Link>
|
||
))}
|
||
|
||
{/* Keyboard Shortcuts desktop */}
|
||
<button
|
||
onClick={openShortcutsModal}
|
||
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
|
||
title="Raccourcis clavier (Cmd+?)"
|
||
>
|
||
⌨️
|
||
</button>
|
||
|
||
{/* Theme Dropdown desktop */}
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setThemeDropdownOpen(!themeDropdownOpen)}
|
||
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
|
||
title="Select theme"
|
||
>
|
||
{themes.find(t => t.value === theme)?.icon || '🎨'}
|
||
</button>
|
||
|
||
{themeDropdownOpen && (
|
||
<>
|
||
{/* Backdrop */}
|
||
<div
|
||
className="fixed inset-0 z-[200]"
|
||
onClick={() => setThemeDropdownOpen(false)}
|
||
/>
|
||
{/* Dropdown */}
|
||
<div className="absolute right-0 top-full mt-2 w-48 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] overflow-hidden">
|
||
<div className="py-2">
|
||
{themes.map((themeOption) => (
|
||
<button
|
||
key={themeOption.value}
|
||
onClick={() => {
|
||
setTheme(themeOption.value);
|
||
setThemeDropdownOpen(false);
|
||
}}
|
||
className={`w-full text-left px-4 py-2 text-sm transition-colors flex items-center gap-3 ${
|
||
theme === themeOption.value
|
||
? 'text-[var(--primary)] bg-[var(--primary)]/10'
|
||
: 'text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--card-hover)]'
|
||
}`}
|
||
>
|
||
<span className="text-base">{themeOption.icon}</span>
|
||
<span className="font-mono">{themeOption.label}</span>
|
||
{theme === themeOption.value && (
|
||
<svg className="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Contrôles à droite */}
|
||
<div className="flex items-center gap-2">
|
||
<AuthButton />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Menu mobile/tablette en modal */}
|
||
{mobileMenuOpen && (
|
||
<div className="lg:hidden fixed inset-0 z-[9999] flex items-start justify-center pt-20">
|
||
{/* Backdrop */}
|
||
<div
|
||
className="absolute inset-0 bg-black/50"
|
||
onClick={() => setMobileMenuOpen(false)}
|
||
/>
|
||
|
||
{/* Modal content */}
|
||
<div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-xl mx-4 w-full max-w-sm">
|
||
<nav className="p-6">
|
||
<div className="space-y-3">
|
||
{navLinks.map(({ href, label }) => (
|
||
<Link
|
||
key={href}
|
||
href={href}
|
||
className={getMobileLinkClasses(href)}
|
||
onClick={() => setMobileMenuOpen(false)}
|
||
>
|
||
{label}
|
||
</Link>
|
||
))}
|
||
|
||
{/* Séparateur */}
|
||
{session && (
|
||
<>
|
||
<div className="border-t border-[var(--border)]/30 my-4"></div>
|
||
|
||
{/* Lien profil */}
|
||
<Link
|
||
href="/profile"
|
||
className={getMobileLinkClasses('/profile')}
|
||
onClick={() => setMobileMenuOpen(false)}
|
||
>
|
||
👤 Profil
|
||
</Link>
|
||
|
||
{/* Bouton déconnexion */}
|
||
<button
|
||
onClick={() => {
|
||
signOut({ callbackUrl: '/login' });
|
||
setMobileMenuOpen(false);
|
||
}}
|
||
className="font-mono text-sm uppercase tracking-wider transition-colors px-4 py-3 rounded-md block w-full text-left text-[var(--destructive)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10"
|
||
>
|
||
🚪 Déconnexion
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</header>
|
||
);
|
||
}
|
||
|