Implement sidebar navigation and model management features. Refactor App component to utilize a Sidebar for tab navigation, integrating ProfileList, GenerationForm, HistoryTable, and ServerStatus components. Introduce ModelManagement and ModelProgress components for handling AI model downloads and status updates. Enhance CSS for sidebar styling and add progress tracking functionality in the backend for model downloads.

2026-09-20 15:20:39 -07:00 · 2026-01-25 03:10:16 -08:00
parent ca3409ebef
commit 6429cb6673
12 changed files with 1061 additions and 82 deletions
@@ -0,0 +1,47 @@
+import { History, Mic, Settings, Sparkles } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+interface SidebarProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}
+
+const tabs = [
+  { id: 'profiles', icon: Mic, label: 'Profiles' },
+  { id: 'generate', icon: Sparkles, label: 'Generate' },
+  { id: 'history', icon: History, label: 'History' },
+  { id: 'settings', icon: Settings, label: 'Settings' },
+];
+
+export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
+  return (
+    <div className="fixed left-0 top-0 h-full w-20 bg-sidebar border-r border-border flex flex-col items-center py-6 gap-6">
+      {/* Navigation Buttons */}
+      <div className="flex flex-col gap-3">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = activeTab === tab.id;
+          
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => onTabChange(tab.id)}
+              className={cn(
+                "w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200",
+                "hover:bg-accent hover:text-accent-foreground",
+                isActive
+                  ? "bg-primary text-primary-foreground shadow-lg"
+                  : "text-muted-foreground"
+              )}
+              title={tab.label}
+              aria-label={tab.label}
+            >
+              <Icon className="h-5 w-5" />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}