109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import { NavLink, Outlet, useNavigate } from 'react-router-dom'
|
|
import { LayoutGrid, BarChart3, Link, Plus, Search } from 'lucide-react'
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import SearchModal from './SearchModal.tsx'
|
|
|
|
const navItems = [
|
|
{ to: '/board', label: 'Board', icon: LayoutGrid },
|
|
{ to: '/analytics', label: 'Analytics', icon: BarChart3 },
|
|
{ to: '/mappings', label: 'Mappings', icon: Link },
|
|
]
|
|
|
|
export default function Layout() {
|
|
const navigate = useNavigate()
|
|
const [searchOpen, setSearchOpen] = useState(false)
|
|
const [showCreateHint, setShowCreateHint] = useState(false)
|
|
|
|
// Global Cmd+K handler
|
|
const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault()
|
|
setSearchOpen(true)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
document.addEventListener('keydown', handleGlobalKeyDown)
|
|
return () => document.removeEventListener('keydown', handleGlobalKeyDown)
|
|
}, [handleGlobalKeyDown])
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen bg-[var(--color-page)] text-[var(--color-text-primary)] overflow-hidden">
|
|
{/* Top navigation bar */}
|
|
<header className="flex items-center h-12 px-4 border-b border-[var(--color-border)] shrink-0 bg-[var(--color-page)]">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-2 mr-8">
|
|
<div className="w-5 h-5 rounded bg-gradient-to-br from-[var(--color-accent)] to-[var(--color-accent-end)] flex items-center justify-center">
|
|
<span className="text-[10px] font-bold text-white">T</span>
|
|
</div>
|
|
<span className="text-sm font-semibold tracking-tight">TaskTracker</span>
|
|
</div>
|
|
|
|
{/* Nav tabs */}
|
|
<nav className="flex items-center gap-1">
|
|
{navItems.map(({ to, label, icon: Icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-medium transition-colors ${
|
|
isActive
|
|
? 'text-white bg-white/[0.08]'
|
|
: 'text-[var(--color-text-secondary)] hover:text-white hover:bg-white/[0.04]'
|
|
}`
|
|
}
|
|
>
|
|
<Icon size={15} />
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Spacer */}
|
|
<div className="flex-1" />
|
|
|
|
{/* Search trigger */}
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className="flex items-center gap-2 h-7 px-2.5 rounded-md text-[12px] text-[var(--color-text-secondary)] bg-white/[0.04] border border-[var(--color-border)] hover:border-[var(--color-border-hover)] hover:text-[var(--color-text-primary)] transition-colors mr-2"
|
|
>
|
|
<Search size={13} />
|
|
<span className="hidden sm:inline">Search</span>
|
|
<kbd className="hidden sm:inline text-[10px] font-mono text-[var(--color-text-tertiary)] bg-white/[0.06] px-1 py-0.5 rounded">
|
|
Ctrl K
|
|
</kbd>
|
|
</button>
|
|
|
|
{/* New task button */}
|
|
<button
|
|
onClick={() => {
|
|
navigate('/board')
|
|
setShowCreateHint(true)
|
|
setTimeout(() => setShowCreateHint(false), 100)
|
|
}}
|
|
className="flex items-center gap-1 h-7 px-2.5 rounded-md text-[12px] font-medium text-white bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-end)] hover:brightness-110 transition-all"
|
|
>
|
|
<Plus size={14} />
|
|
<span className="hidden sm:inline">New Task</span>
|
|
</button>
|
|
</header>
|
|
|
|
{/* Content */}
|
|
<main className="flex-1 overflow-auto p-5">
|
|
<Outlet context={{ showCreateHint }} />
|
|
</main>
|
|
|
|
{/* Search modal */}
|
|
{searchOpen && (
|
|
<SearchModal
|
|
onSelect={(taskId) => {
|
|
setSearchOpen(false)
|
|
navigate(`/board?task=${taskId}`)
|
|
}}
|
|
onClose={() => setSearchOpen(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|