feat: update TODO.md and enhance dashboard components
- Marked several UI/UX tasks as complete in TODO.md, including improvements for Kanban icons, tag visibility, recent tasks display, and header responsiveness. - Updated PriorityDistributionChart to adjust height for better layout. - Refined IntegrationFilter to improve filter display and added new trigger class for dropdowns. - Replaced RecentTaskTimeline with TaskCard in RecentTasks for better consistency. - Enhanced TagDistributionChart with improved tooltip and legend styling. - Updated DesktopControls and MobileControls to use lucide-react icons for filters and search functionality. - Removed RecentTaskTimeline component for cleaner codebase.
This commit is contained in:
Julien Froidefond
@@ -22,6 +22,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
|
||||
const { isConfigured: isJiraConfigured, config: jiraConfig } = useJiraConfig();
|
||||
const pathname = usePathname();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [tabletMenuOpen, setTabletMenuOpen] = useState(false);
|
||||
const [themeDropdownOpen, setThemeDropdownOpen] = useState(false);
|
||||
const { openModal: openShortcutsModal } = useKeyboardShortcutsModal();
|
||||
const { data: session } = useSession();
|
||||
@@ -171,44 +172,97 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
|
||||
|
||||
</div>
|
||||
|
||||
{/* Auth controls à droite mobile */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Auth controls à droite mobile - dans la ligne principale */}
|
||||
<div className="hidden sm:block">
|
||||
<AuthButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ligne Auth séparée sur très petits écrans */}
|
||||
<div className="lg:hidden sm:hidden flex justify-end pt-2">
|
||||
<AuthButton />
|
||||
</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="flex items-center gap-4 min-w-0">
|
||||
<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}
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-xl xl:text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider truncate">
|
||||
<span className="sm:hidden">{title}</span>
|
||||
<span className="hidden sm:inline">{title}</span>
|
||||
</h1>
|
||||
<p className="text-[var(--muted-foreground)] mt-1 font-mono text-sm">
|
||||
<p className="text-[var(--muted-foreground)] mt-1 font-mono text-xs sm:text-sm truncate">
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation desktop */}
|
||||
<nav className="flex items-center gap-2">
|
||||
{navLinks.map(({ href, label }) => (
|
||||
<nav className="flex items-center gap-1 xl:gap-2 flex-wrap">
|
||||
{navLinks.slice(0, 4).map(({ href, label }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={getLinkClasses(href)}
|
||||
className={`${getLinkClasses(href)} text-xs xl:text-sm`}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* Plus d'éléments sur très grands écrans */}
|
||||
<div className="hidden 2xl:flex items-center gap-1">
|
||||
{navLinks.slice(4).map(({ href, label }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={getLinkClasses(href)}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Menu dropdown pour écrans moyens */}
|
||||
<div className="xl:hidden relative">
|
||||
<button
|
||||
onClick={() => setTabletMenuOpen(!tabletMenuOpen)}
|
||||
className="font-mono text-xs uppercase tracking-wider transition-colors px-2 py-1.5 rounded-md text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]"
|
||||
title="Plus de liens"
|
||||
>
|
||||
⋯
|
||||
</button>
|
||||
|
||||
{tabletMenuOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-[200]"
|
||||
onClick={() => setTabletMenuOpen(false)}
|
||||
/>
|
||||
{/* Menu items */}
|
||||
<div className="absolute right-0 top-full mt-2 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] py-2 min-w-[119px]">
|
||||
{navLinks.slice(4).map(({ href, label }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={`block px-4 py-2 text-sm transition-colors ${getMobileLinkClasses(href)}`}
|
||||
onClick={() => setTabletMenuOpen(false)}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Keyboard Shortcuts desktop */}
|
||||
<button
|
||||
onClick={openShortcutsModal}
|
||||
@@ -311,7 +365,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
|
||||
className={getMobileLinkClasses('/profile')}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
👤 Profil
|
||||
Profil
|
||||
</Link>
|
||||
|
||||
{/* Bouton déconnexion */}
|
||||
@@ -322,7 +376,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
|
||||
}}
|
||||
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
|
||||
Déconnexion
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user