Add dark mode, tooltips, and fix column alignment

web/src/components/VideoClassifierApp.tsx

@@ -3,6 +3,8 @@ import { VirtualTable } from './VirtualTable';
 import { SearchAndFilter } from './SearchAndFilter';
 import { StatsOverview } from './StatsOverview';
 import { Button } from './ui/button';
+import { ThemeProvider } from './ThemeProvider';
+import { ThemeToggle } from './ThemeToggle';
 import type { VideoData } from '../types/video';
 import { searchVideos, filterVideos } from '../utils/search';
 
@@ -56,74 +58,79 @@ export default function VideoClassifierApp({ videos }: { videos: VideoData[] })
   }
 
   return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto px-6 py-8 space-y-8">
-        {/* Header */}
-        <div className="text-center space-y-4">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
-            YouTube Video Classifier
-          </h1>
-          <p className="text-muted-foreground max-w-2xl mx-auto">
-            AI-powered video classification and management platform. Search, filter, and organize your YouTube video collection with intelligent categorization.
-          </p>
-        </div>
-
-        {/* Stats Overview */}
-        {videos.length > 0 && (
-          <StatsOverview data={videos} />
-        )}
-
-        {/* Search and Filter */}
-        {videos.length > 0 && (
-          <SearchAndFilter
-            data={videos}
-            searchTerm={searchTerm}
-            onSearchChange={setSearchTerm}
-            filters={filters}
-            onFilterChange={setFilters}
-            totalResults={videos.length}
-            filteredResults={filteredData.length}
-          />
-        )}
-
-        {/* Results */}
-        {videos.length > 0 ? (
-          filteredData.length > 0 ? (
-            <VirtualTable data={filteredData} />
-          ) : (
-            <div className="text-center py-12">
-              <div className="text-6xl mb-4">🔍</div>
-              <h3 className="text-lg font-medium mb-2">No results found</h3>
-              <p className="text-muted-foreground">
-                Try adjusting your search terms or filters
-              </p>
+    <ThemeProvider defaultTheme="system" storageKey="video-classifier-theme">
+      <div className="min-h-screen bg-background">
+        <div className="container mx-auto px-6 py-8 space-y-8">
+          {/* Header */}
+          <div className="text-center space-y-4">
+            <div className="flex items-center justify-center gap-4">
+              <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                YouTube Video Classifier
+              </h1>
+              <ThemeToggle />
             </div>
-          )
-        ) : (
-          <div className="text-center py-12">
-            <div className="text-6xl mb-4">📹</div>
-            <h3 className="text-lg font-medium mb-2">No videos found</h3>
-            <p className="text-muted-foreground">
-              Your CSV file appears to be empty
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              AI-powered video classification and management platform. Search, filter, and organize your YouTube video collection with intelligent categorization.
             </p>
           </div>
-        )}
 
-        {/* Footer */}
-        <div className="text-center text-sm text-muted-foreground border-t pt-8">
-          <p>
-            {videos.length} videos indexed
-          </p>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => window.location.reload}
-            className="mt-2"
-          >
-            Refresh Data
-          </Button>
+          {/* Stats Overview */}
+          {videos.length > 0 && (
+            <StatsOverview data={videos} />
+          )}
+
+          {/* Search and Filter */}
+          {videos.length > 0 && (
+            <SearchAndFilter
+              data={videos}
+              searchTerm={searchTerm}
+              onSearchChange={setSearchTerm}
+              filters={filters}
+              onFilterChange={setFilters}
+              totalResults={videos.length}
+              filteredResults={filteredData.length}
+            />
+          )}
+
+          {/* Results */}
+          {videos.length > 0 ? (
+            filteredData.length > 0 ? (
+              <VirtualTable data={filteredData} />
+            ) : (
+              <div className="text-center py-12">
+                <div className="text-6xl mb-4">🔍</div>
+                <h3 className="text-lg font-medium mb-2">No results found</h3>
+                <p className="text-muted-foreground">
+                  Try adjusting your search terms or filters
+                </p>
+              </div>
+            )
+          ) : (
+            <div className="text-center py-12">
+              <div className="text-6xl mb-4">📹</div>
+              <h3 className="text-lg font-medium mb-2">No videos found</h3>
+              <p className="text-muted-foreground">
+                Your CSV file appears to be empty
+              </p>
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="text-center text-sm text-muted-foreground border-t pt-8">
+            <p>
+              {videos.length} videos indexed
+            </p>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => window.location.reload}
+              className="mt-2"
+            >
+              Refresh Data
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </ThemeProvider>
   );
 }