feat: structure

frontend/src/App.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import { Timeline } from './components/timeline/Timeline'
+import { LeftSidebar } from './components/layout/LeftSidebar'
+import { RightSidebar } from './components/layout/RightSidebar'
+import { TopBar } from './components/layout/TopBar'
+import { usePhotoStore } from './store/photoStore'
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
+
+function App() {
+  const [leftSidebarOpen, setLeftSidebarOpen] = useState(true)
+  const [rightSidebarOpen, setRightSidebarOpen] = useState(false)
+  const selectedPhotos = usePhotoStore((state) => state.selectedPhotos)
+
+  // Set up global keyboard shortcuts
+  useKeyboardShortcuts({
+    onToggleLeftSidebar: () => setLeftSidebarOpen(!leftSidebarOpen),
+    onToggleRightSidebar: () => setRightSidebarOpen(!rightSidebarOpen),
+  })
+
+  // Show right sidebar when photos are selected
+  if (selectedPhotos.length > 0 && !rightSidebarOpen) {
+    setRightSidebarOpen(true)
+  } else if (selectedPhotos.length === 0 && rightSidebarOpen) {
+    setRightSidebarOpen(false)
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-bg text-text">
+      <TopBar />
+      
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left Sidebar */}
+        <div
+          className={`transition-all duration-200 ${
+            leftSidebarOpen ? 'w-64' : 'w-0'
+          } overflow-hidden border-r border-border bg-surface`}
+        >
+          <LeftSidebar />
+        </div>
+
+        {/* Main Content - Timeline */}
+        <div className="flex-1 overflow-auto">
+          <Timeline />
+        </div>
+
+        {/* Right Sidebar */}
+        <div
+          className={`transition-all duration-200 ${
+            rightSidebarOpen ? 'w-80' : 'w-0'
+          } overflow-hidden border-l border-border bg-surface`}
+        >
+          <RightSidebar />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App