Add files via upload

frontend/src/App.jsx

@@ -1,12 +1,17 @@
-import { useEffect } from 'react'
+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 { fetchProjects } from './api/projects'
 import useProjectStore from './store/useProjectStore'
+import useUIStore from './store/useUIStore'
 
 export default function App() {
   const { setProjects, setLoading } = useProjectStore()
+  const { sidebarOpen, toggleSidebar } = useUIStore()
+  const calApiRef    = useRef(null)
+  const newProjectFn = useRef(null)
 
   useEffect(() => {
     setLoading(true)
@@ -15,15 +20,40 @@ export default function App() {
       .catch(() => setLoading(false))
   }, [])
 
+  // Global keyboard shortcuts
+  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">
-      <aside className="w-72 flex-shrink-0 bg-surface-raised border-r border-surface-border flex flex-col h-full">
-        <ProjectList />
+      {/* 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'}`}>
+        <ProjectList onRegisterNewProject={fn => { newProjectFn.current = fn }} />
       </aside>
+
+      {/* Sidebar toggle tab */}
+      <button onClick={toggleSidebar} title={`${sidebarOpen ? 'Collapse' : 'Expand'} sidebar  [B]`}
+        className={`absolute top-4 z-30 bg-surface-elevated border border-surface-border hover:border-gold/50 text-text-muted hover:text-gold rounded-r-lg px-1 py-3 transition-all duration-300 text-xs ${sidebarOpen ? 'left-72' : 'left-0'}`}>
+        {sidebarOpen ? '◀' : '▶'}
+      </button>
+
+      {/* Main content */}
       <main className="flex-1 overflow-hidden">
-        <MainCalendar />
+        <MainCalendar onCalendarReady={api => { calApiRef.current = api }} />
       </main>
+
       <FocusDrawer />
+      <ToastContainer />
     </div>
   )
 }