feat: structure 2

2026-04-07 00:15:00 +02:00
parent 46a0d7aba8
commit 6d1b227fb9
15 changed files with 7433 additions and 94 deletions
--- a/frontend/src/components/layout/LeftSidebar.tsx
+++ b/frontend/src/components/layout/LeftSidebar.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react'
+import { 
+  ChevronRight,
+  ChevronDown,
+  Folder,
+
+  Image,
+  Calendar,
+  Star,
+  Flag,
+  Trash2,
+  Plus,
+  MoreHorizontal,
+  HardDrive
+} from 'lucide-react'
+import clsx from 'clsx'
+
+interface TreeItem {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  count?: number
+  children?: TreeItem[]
+  type?: 'folder' | 'heap' | 'special'
+}
+
+export function LeftSidebar() {
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(['library', 'folders', 'heaps']))
+  const [selectedItem, setSelectedItem] = useState<string | null>('all-photos')
+  
+  const toggleExpanded = (id: string) => {
+    const newExpanded = new Set(expandedItems)
+    if (newExpanded.has(id)) {
+      newExpanded.delete(id)
+    } else {
+      newExpanded.add(id)
+    }
+    setExpandedItems(newExpanded)
+  }
+  
+  const libraryTree: TreeItem[] = [
+    {
+      id: 'library',
+      label: 'Library',
+      icon: <HardDrive className="h-4 w-4" />,
+      children: [
+        { id: 'all-photos', label: 'All Photos', icon: <Image className="h-4 w-4" />, count: 0 },
+        { id: 'by-date', label: 'By Date', icon: <Calendar className="h-4 w-4" /> },
+        { id: 'rated', label: 'Rated', icon: <Star className="h-4 w-4" />, count: 0 },
+        { id: 'flagged', label: 'Flagged', icon: <Flag className="h-4 w-4" />, count: 0 },
+        { id: 'trash', label: 'Trash', icon: <Trash2 className="h-4 w-4" />, count: 0 },
+      ],
+    },
+    {
+      id: 'folders',
+      label: 'Folders',
+      icon: <Folder className="h-4 w-4" />,
+      children: [], // Will be populated from API
+    },
+    {
+      id: 'heaps',
+      label: 'Heaps',
+      icon: <Folder className="h-4 w-4" />,
+      children: [], // Will be populated from API
+    },
+  ]
+  
+  const renderTreeItem = (item: TreeItem, depth: number = 0) => {
+    const hasChildren = item.children && item.children.length > 0
+    const isExpanded = expandedItems.has(item.id)
+    const isSelected = selectedItem === item.id
+    
+    return (
+      <div key={item.id}>
+        <div
+          className={clsx(
+            'group flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm',
+            isSelected ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
+            depth > 0 && 'text-[13px]'
+          )}
+          style={{ paddingLeft: `${8 + depth * 16}px` }}
+          onClick={() => {
+            setSelectedItem(item.id)
+            if (hasChildren) {
+              toggleExpanded(item.id)
+            }
+          }}
+        >
+          {/* Expand/Collapse Icon */}
+          {hasChildren ? (
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                toggleExpanded(item.id)
+              }}
+              className="rounded p-0.5 hover:bg-surface-offset"
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-3 w-3" />
+              ) : (
+                <ChevronRight className="h-3 w-3" />
+              )}
+            </button>
+          ) : (
+            <div className="w-4" />
+          )}
+          
+          {/* Item Icon */}
+          {item.icon && (
+            <span className={clsx('flex-shrink-0', isSelected ? 'text-primary' : 'text-text-muted')}>
+              {item.icon}
+            </span>
+          )}
+          
+          {/* Label */}
+          <span className="flex-1 truncate">{item.label}</span>
+          
+          {/* Count Badge */}
+          {item.count !== undefined && item.count > 0 && (
+            <span className="rounded bg-surface-offset px-1.5 py-0.5 text-xs text-text-muted">
+              {item.count}
+            </span>
+          )}
+          
+          {/* Actions (shown on hover) */}
+          {(item.id === 'folders' || item.id === 'heaps') && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                // Handle add folder/heap
+              }}
+              className="invisible rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text group-hover:visible"
+            >
+              <Plus className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        
+        {/* Render Children */}
+        {hasChildren && isExpanded && (
+          <div>
+            {item.children!.map((child) => renderTreeItem(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    )
+  }
+  
+  return (
+    <div className="flex h-full flex-col bg-surface">
+      {/* Sidebar Header */}
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <h2 className="text-sm font-semibold text-text">Library</h2>
+        <button className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text">
+          <MoreHorizontal className="h-4 w-4" />
+        </button>
+      </div>
+      
+      {/* Tree View */}
+      <div className="flex-1 overflow-y-auto py-2">
+        {libraryTree.map((item) => renderTreeItem(item))}
+      </div>
+      
+      {/* Bottom Actions */}
+      <div className="border-t border-border p-3">
+        <button className="flex w-full items-center gap-2 rounded bg-surface-2 px-3 py-2 text-sm text-text hover:bg-surface-offset">
+          <Plus className="h-4 w-4" />
+          Add Source Folder
+        </button>
+      </div>
+    </div>
+  )
+}