84 lines
3.2 KiB
JavaScript
84 lines
3.2 KiB
JavaScript
import { useEffect, useRef } from 'react'
|
|
import ProjectList from './components/Projects/ProjectList'
|
|
import MainCalendar from './components/Calendar/MainCalendar'
|
|
import FocusDrawer from './components/FocusView/FocusDrawer'
|
|
import ToastContainer from './components/UI/Toast'
|
|
import useProjectStore from './store/useProjectStore'
|
|
import useUIStore from './store/useUIStore'
|
|
|
|
export default function App() {
|
|
const { loadProjects } = useProjectStore()
|
|
const { sidebarOpen, toggleSidebar } = useUIStore()
|
|
const calApiRef = useRef(null)
|
|
const newProjectFn = useRef(null)
|
|
|
|
useEffect(() => {
|
|
loadProjects()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const handler = (e) => {
|
|
if (['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)) return
|
|
if (e.key === 'n' || e.key === 'N') { e.preventDefault(); newProjectFn.current?.() }
|
|
if (e.key === 'b' || e.key === 'B') toggleSidebar()
|
|
if (e.key === 'ArrowLeft' && calApiRef.current) calApiRef.current.prev()
|
|
if (e.key === 'ArrowRight' && calApiRef.current) calApiRef.current.next()
|
|
if ((e.key === 't' || e.key === 'T') && calApiRef.current) calApiRef.current.today()
|
|
}
|
|
document.addEventListener('keydown', handler)
|
|
return () => document.removeEventListener('keydown', handler)
|
|
}, [toggleSidebar])
|
|
|
|
return (
|
|
<div className="flex h-screen bg-surface overflow-hidden">
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={`flex-shrink-0 bg-surface-raised border-r border-surface-border flex flex-col h-full transition-[width] duration-300 overflow-hidden ${sidebarOpen ? 'w-72' : 'w-0'}`}
|
|
style={{ '--sidebar-width': '18rem' }}
|
|
>
|
|
<ProjectList onRegisterNewProject={fn => { newProjectFn.current = fn }} />
|
|
</aside>
|
|
|
|
{/* Toggle button — docked to left edge, never overlaps calendar header */}
|
|
<button
|
|
onClick={toggleSidebar}
|
|
title={`${sidebarOpen ? 'Collapse' : 'Expand'} sidebar [B]`}
|
|
className={`fixed z-30 flex items-center justify-center
|
|
border-surface-border bg-surface-raised hover:bg-surface-elevated
|
|
transition-all duration-300
|
|
${sidebarOpen
|
|
? 'top-16 w-6 h-10 rounded-r-lg border border-l-0 hover:border-gold/40'
|
|
: 'top-4 left-4 w-16 h-16 rounded-xl border hover:border-gold/30 shadow-lg'
|
|
}`}
|
|
style={{ left: sidebarOpen ? '18rem' : '1rem' }}
|
|
>
|
|
{sidebarOpen ? (
|
|
<span className="text-text-muted hover:text-gold text-[11px]">◀</span>
|
|
) : (
|
|
<img
|
|
src="/logo.png"
|
|
alt="FabDash"
|
|
className="w-10 h-10 object-contain rounded"
|
|
onError={e => {
|
|
e.target.style.display = 'none'
|
|
e.target.nextSibling.style.display = 'flex'
|
|
}}
|
|
/>
|
|
)}
|
|
{/* Fallback when no logo file present */}
|
|
<span className="text-gold font-black text-sm tracking-widest hidden flex-col items-center leading-none">
|
|
<span>FAB</span><span className="text-white">DASH</span>
|
|
</span>
|
|
</button>
|
|
|
|
{/* Main content */}
|
|
<main className="flex-1 overflow-hidden">
|
|
<MainCalendar onCalendarReady={api => { calApiRef.current = api }} />
|
|
</main>
|
|
|
|
<FocusDrawer />
|
|
<ToastContainer />
|
|
</div>
|
|
)
|
|
}
|