[ImgBot] Optimize images

*Total -- 457.02kb -> 376.99kb (17.51%) /img/iphone_thumbnail.png -- 456.29kb -> 376.33kb (17.52%) /web/public/favicon.svg -- 0.73kb -> 0.66kb (9.35%) Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>
2025-10-13 00:32:25 +00:00 · 2025-07-12 03:26:28 +00:00
22 changed files with 16 additions and 1169 deletions
--- a/img/iphone_thumbnail.png
+++ b/img/iphone_thumbnail.png
--- a/web/astro.config.mjs
+++ b/web/astro.config.mjs
@@ -10,7 +10,5 @@ export default defineConfig({
      plugins: [tailwindcss()]
 	},

-  integrations: [react({
-    experimentalDisableStreaming: true,
-  })]
+  integrations: [react()]
 });
--- a/web/package.json
+++ b/web/package.json
@@ -11,10 +11,8 @@
  "dependencies": {
    "@astrojs/mdx": "^4.3.0",
    "@astrojs/react": "^4.3.0",
-    "@base-ui-components/react": "1.0.0-beta.1",
    "@radix-ui/react-slot": "^1.2.3",
    "@tailwindcss/vite": "^4.1.3",
-    "@tanstack/react-virtual": "^3.13.12",
    "@types/canvas-confetti": "^1.9.0",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
@@ -22,10 +20,7 @@
    "canvas-confetti": "^1.9.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
    "lucide-react": "^0.525.0",
-    "next-themes": "^0.4.6",
-    "papaparse": "^5.5.3",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "tailwind-merge": "^3.3.1",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -14,18 +14,12 @@ importers:
      '@astrojs/react':
        specifier: ^4.3.0
        version: 4.3.0(@types/node@24.0.13)(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(jiti@2.4.2)(lightningcss@1.30.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@base-ui-components/react':
-        specifier: 1.0.0-beta.1
-        version: 1.0.0-beta.1(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      '@radix-ui/react-slot':
        specifier: ^1.2.3
        version: 1.2.3(@types/react@19.1.8)(react@19.1.0)
      '@tailwindcss/vite':
        specifier: ^4.1.3
        version: 4.1.11(vite@6.3.5(@types/node@24.0.13)(jiti@2.4.2)(lightningcss@1.30.1))
-      '@tanstack/react-virtual':
-        specifier: ^3.13.12
-        version: 3.13.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      '@types/canvas-confetti':
        specifier: ^1.9.0
        version: 1.9.0
@@ -47,18 +41,9 @@ importers:
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
-      date-fns:
-        specifier: ^4.1.0
-        version: 4.1.0
      lucide-react:
        specifier: ^0.525.0
        version: 0.525.0(react@19.1.0)
-      next-themes:
-        specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      papaparse:
-        specifier: ^5.5.3
-        version: 5.5.3
      react:
        specifier: ^19.1.0
        version: 19.1.0
@@ -185,10 +170,6 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0-0

-  '@babel/runtime@7.27.6':
-    resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/template@7.27.2':
    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
    engines: {node: '>=6.9.0'}
@@ -201,17 +182,6 @@ packages:
    resolution: {integrity: sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==}
    engines: {node: '>=6.9.0'}

-  '@base-ui-components/react@1.0.0-beta.1':
-    resolution: {integrity: sha512-7zmGiz4/+HKnv99lWftItoSMqnj2PdSvt2krh0/GP+Rj0xK0NMnFI/gIVvP7CB2G+k0JPUrRWXjXa3y08oiakg==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      '@types/react': ^17 || ^18 || ^19
-      react: ^17 || ^18 || ^19
-      react-dom: ^17 || ^18 || ^19
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
  '@capsizecss/unpack@2.4.0':
    resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==}

@@ -374,21 +344,6 @@ packages:
    cpu: [x64]
    os: [win32]

-  '@floating-ui/core@1.7.2':
-    resolution: {integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==}
-
-  '@floating-ui/dom@1.7.2':
-    resolution: {integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==}
-
-  '@floating-ui/react-dom@2.1.4':
-    resolution: {integrity: sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@floating-ui/utils@0.2.10':
-    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
-
  '@img/sharp-darwin-arm64@0.33.5':
    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -761,15 +716,6 @@ packages:
    peerDependencies:
      vite: ^5.2.0 || ^6 || ^7

-  '@tanstack/react-virtual@3.13.12':
-    resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  '@tanstack/virtual-core@3.13.12':
-    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
-
  '@types/babel__core@7.20.5':
    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}

@@ -1021,9 +967,6 @@ packages:
  csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}

-  date-fns@4.1.0:
-    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
-
  debug@4.4.1:
    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
    engines: {node: '>=6.0'}
@@ -1585,12 +1528,6 @@ packages:
    resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
    engines: {node: '>= 10'}

-  next-themes@0.4.6:
-    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
-    peerDependencies:
-      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-
  nlcst-to-string@4.0.0:
    resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}

@@ -1646,9 +1583,6 @@ packages:
  pako@0.2.9:
    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}

-  papaparse@5.5.3:
-    resolution: {integrity: sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==}
-
  parse-entities@4.0.2:
    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}

@@ -1762,9 +1696,6 @@ packages:
  remark-stringify@11.0.0:
    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}

-  reselect@5.1.1:
-    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
-
  restructure@3.0.2:
    resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}

@@ -1850,9 +1781,6 @@ packages:
  style-to-object@1.0.9:
    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}

-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
-
  tailwind-merge@3.3.1:
    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}

@@ -2030,11 +1958,6 @@ packages:
    peerDependencies:
      browserslist: '>= 4.21.0'

-  use-sync-external-store@1.5.0:
-    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
  vfile-location@5.0.3:
    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}

@@ -2340,8 +2263,6 @@ snapshots:
      '@babel/core': 7.28.0
      '@babel/helper-plugin-utils': 7.27.1

-  '@babel/runtime@7.27.6': {}
-
  '@babel/template@7.27.2':
    dependencies:
      '@babel/code-frame': 7.27.1
@@ -2365,19 +2286,6 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.27.1

-  '@base-ui-components/react@1.0.0-beta.1(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@babel/runtime': 7.27.6
-      '@floating-ui/react-dom': 2.1.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@floating-ui/utils': 0.2.10
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      reselect: 5.1.1
-      tabbable: 6.2.0
-      use-sync-external-store: 1.5.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.8
-
  '@capsizecss/unpack@2.4.0':
    dependencies:
      blob-to-buffer: 1.2.9
@@ -2469,23 +2377,6 @@ snapshots:
  '@esbuild/win32-x64@0.25.6':
    optional: true

-  '@floating-ui/core@1.7.2':
-    dependencies:
-      '@floating-ui/utils': 0.2.10
-
-  '@floating-ui/dom@1.7.2':
-    dependencies:
-      '@floating-ui/core': 1.7.2
-      '@floating-ui/utils': 0.2.10
-
-  '@floating-ui/react-dom@2.1.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@floating-ui/dom': 1.7.2
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
-  '@floating-ui/utils@0.2.10': {}
-
  '@img/sharp-darwin-arm64@0.33.5':
    optionalDependencies:
      '@img/sharp-libvips-darwin-arm64': 1.0.4
@@ -2802,14 +2693,6 @@ snapshots:
      tailwindcss: 4.1.11
      vite: 6.3.5(@types/node@24.0.13)(jiti@2.4.2)(lightningcss@1.30.1)

-  '@tanstack/react-virtual@3.13.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@tanstack/virtual-core': 3.13.12
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
-  '@tanstack/virtual-core@3.13.12': {}
-
  '@types/babel__core@7.20.5':
    dependencies:
      '@babel/parser': 7.28.0
@@ -3141,8 +3024,6 @@ snapshots:

  csstype@3.1.3: {}

-  date-fns@4.1.0: {}
-
  debug@4.4.1:
    dependencies:
      ms: 2.1.3
@@ -4032,11 +3913,6 @@ snapshots:

  neotraverse@0.6.18: {}

-  next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
  nlcst-to-string@4.0.0:
    dependencies:
      '@types/nlcst': 2.0.3
@@ -4084,8 +3960,6 @@ snapshots:

  pako@0.2.9: {}

-  papaparse@5.5.3: {}
-
  parse-entities@4.0.2:
    dependencies:
      '@types/unist': 2.0.11
@@ -4266,8 +4140,6 @@ snapshots:
      mdast-util-to-markdown: 2.1.2
      unified: 11.0.5

-  reselect@5.1.1: {}
-
  restructure@3.0.2: {}

  retext-latin@4.0.0:
@@ -4413,8 +4285,6 @@ snapshots:
    dependencies:
      inline-style-parser: 0.2.4

-  tabbable@6.2.0: {}
-
  tailwind-merge@3.3.1: {}

  tailwindcss@4.1.11: {}
@@ -4554,10 +4424,6 @@ snapshots:
      escalade: 3.2.0
      picocolors: 1.1.1

-  use-sync-external-store@1.5.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-
  vfile-location@5.0.3:
    dependencies:
      '@types/unist': 3.0.3
--- a/web/public/favicon.svg
+++ b/web/public/favicon.svg
@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"><path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>
--- a/web/src/components/SearchAndFilter.tsx
+++ b/web/src/components/SearchAndFilter.tsx
@@ -1,129 +0,0 @@
-import React from 'react';
-import { Input } from './ui/input';
-import { Select } from './ui/select';
-import { Button } from './ui/button';
-import { Badge } from './ui/badge';
-import type { VideoData } from '../types/video';
-import { getUniqueValues } from '../utils/search';
-
-interface SearchAndFilterProps {
-  data: VideoData[];
-  searchTerm: string;
-  onSearchChange: (term: string) => void;
-  filters: {
-    classification: string;
-    language: string;
-    playlist_name: string;
-  };
-  onFilterChange: (filters: any) => void;
-  totalResults: number;
-  filteredResults: number;
-}
-
-export function SearchAndFilter({
-  data,
-  searchTerm,
-  onSearchChange,
-  filters,
-  onFilterChange,
-  totalResults,
-  filteredResults
-}: SearchAndFilterProps) {
-  const classifications = getUniqueValues(data, 'classification');
-  const languages = getUniqueValues(data, 'language');
-  const playlists = getUniqueValues(data, 'playlist_name');
-
-  const clearFilters = () => {
-    onSearchChange('');
-    onFilterChange({
-      classification: 'all',
-      language: 'all',
-      playlist_name: 'all'
-    });
-  };
-
-  const activeFiltersCount = Object.values(filters).filter(value => value !== 'all').length + (searchTerm ? 1 : 0);
-
-  return (
-    <div className="space-y-4 p-6 bg-card border rounded-lg">
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <h2 className="text-lg font-semibold">Search & Filter</h2>
-          <p className="text-sm text-muted-foreground">
-            {filteredResults} of {totalResults} videos
-            {activeFiltersCount > 0 && (
-              <Badge variant="secondary" className="ml-2">
-                {activeFiltersCount} filter{activeFiltersCount !== 1 ? 's' : ''} active
-              </Badge>
-            )}
-          </p>
-        </div>
-        {activeFiltersCount > 0 && (
-          <Button variant="outline" size="sm" onClick={clearFilters}>
-            Clear All
-          </Button>
-        )}
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {/* Search */}
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Search</label>
-          <Input
-            placeholder="Search videos, channels, tags..."
-            value={searchTerm}
-            onChange={(e) => onSearchChange(e.target.value)}
-          />
-        </div>
-
-        {/* Classification Filter */}
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Classification</label>
-          <Select
-            value={filters.classification}
-            onChange={(e) => onFilterChange({ ...filters, classification: e.target.value })}
-          >
-            <option value="all">All Classifications</option>
-            {classifications.map((classification) => (
-              <option key={classification} value={classification}>
-                {classification}
-              </option>
-            ))}
-          </Select>
-        </div>
-
-        {/* Language Filter */}
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Language</label>
-          <Select
-            value={filters.language}
-            onChange={(e) => onFilterChange({ ...filters, language: e.target.value })}
-          >
-            <option value="all">All Languages</option>
-            {languages.map((language) => (
-              <option key={language} value={language}>
-                {language}
-              </option>
-            ))}
-          </Select>
-        </div>
-
-        {/* Playlist Filter */}
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Playlist</label>
-          <Select
-            value={filters.playlist_name}
-            onChange={(e) => onFilterChange({ ...filters, playlist_name: e.target.value })}
-          >
-            <option value="all">All Playlists</option>
-            {playlists.map((playlist) => (
-              <option key={playlist} value={playlist}>
-                {playlist}
-              </option>
-            ))}
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/web/src/components/StatsOverview.tsx
+++ b/web/src/components/StatsOverview.tsx
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Badge } from './ui/badge';
-import type { VideoData } from '../types/video';
-import { getUniqueValues } from '../utils/search';
-
-interface StatsOverviewProps {
-  data: VideoData[];
-}
-
-export function StatsOverview({ data }: StatsOverviewProps) {
-  const totalVideos = data.length;
-  const totalDuration = data.reduce((sum, video) => sum + video.video_length_seconds, 0);
-  const uniqueChannels = getUniqueValues(data, 'channel_name').length;
-  const uniqueClassifications = getUniqueValues(data, 'classification').length;
-  const uniqueLanguages = getUniqueValues(data, 'language').length;
-
-  const formatTotalDuration = (seconds: number) => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    return `${hours}h ${minutes}m`;
-  };
-
-  const stats = [
-    { label: 'Total Videos', value: totalVideos.toLocaleString() },
-    { label: 'Total Duration', value: formatTotalDuration(totalDuration) },
-    { label: 'Channels', value: uniqueChannels },
-    { label: 'Categories', value: uniqueClassifications },
-    { label: 'Languages', value: uniqueLanguages },
-  ];
-
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-      {stats.map((stat) => (
-        <div key={stat.label} className="text-center p-4 bg-card border rounded-lg">
-          <div className="text-2xl font-bold text-primary">{stat.value}</div>
-          <div className="text-sm text-muted-foreground">{stat.label}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
--- a/web/src/components/ThemeProvider.tsx
+++ b/web/src/components/ThemeProvider.tsx
@@ -1,75 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
-
-type Theme = 'dark' | 'light' | 'system'
-
-type ThemeProviderProps = {
-  children: React.ReactNode
-  defaultTheme?: Theme
-  storageKey?: string
-}
-
-type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-}
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-}
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
-
-export function ThemeProvider({
-  children,
-  defaultTheme = 'system',
-  storageKey = 'vite-ui-theme',
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage ? localStorage.getItem(storageKey) as Theme : undefined) || defaultTheme
-  )
-
-  useEffect(() => {
-    const root = window.document.documentElement
-
-    root.classList.remove('light', 'dark')
-
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
-        ? 'dark'
-        : 'light'
-
-      root.classList.add(systemTheme)
-      return
-    }
-
-    root.classList.add(theme)
-  }, [theme])
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      if (localStorage) {
-        localStorage.setItem(storageKey, theme)
-      }
-      setTheme(theme)
-    },
-  }
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  )
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext)
-
-  if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider')
-
-  return context
-}
--- a/web/src/components/ThemeToggle.tsx
+++ b/web/src/components/ThemeToggle.tsx
@@ -1,21 +0,0 @@
-import React from 'react'
-import { Moon, Sun } from 'lucide-react'
-import { Button } from './ui/button'
-import { useTheme } from './ThemeProvider'
-
-export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-
-  return (
-    <Button
-      variant="outline"
-      size="icon"
-      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-      className="relative"
-    >
-      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  )
-}
--- a/web/src/components/VideoClassifierApp.tsx
+++ b/web/src/components/VideoClassifierApp.tsx
@@ -1,136 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-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';
-
-interface ApiResponse {
-  videos?: VideoData[];
-  error?: string;
-  message?: string;
-}
-
-export default function VideoClassifierApp({ videos }: { videos: VideoData[] }) {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filters, setFilters] = useState({
-    classification: 'all',
-    language: 'all',
-    playlist_name: 'all'
-  });
-
-  // Filter and search data
-  const filteredData = useMemo(() => {
-    let result = videos;
-    
-    // Apply filters
-    result = filterVideos(result, filters);
-    
-    // Apply search
-    result = searchVideos(result, searchTerm);
-    
-    return result;
-  }, [videos, searchTerm, filters]);
-
-  if (!videos) {
-    return (
-      <div className="min-h-screen flex items-center justify-center p-6">
-        <div className="max-w-md text-center space-y-4">
-          <div className="text-6xl">📁</div>
-          <h1 className="text-2xl font-bold text-destructive">CSV File Not Found</h1>
-          <p className="text-muted-foreground">
-            It seems the <code className="bg-background px-1 rounded">video_classifications.csv</code> file is missing or not properly configured.
-          </p>
-          <div className="bg-muted p-4 rounded-lg text-sm text-left">
-            <p className="font-medium mb-2">To fix this:</p>
-            <ol className="list-decimal list-inside space-y-1 text-muted-foreground">
-              <li>Make sure <code className="bg-background px-1 rounded">video_classifications.csv</code> exists in your project root</li>
-              <li>Run your YouTube classifier script to generate the CSV</li>
-              <li>Refresh this page</li>
-            </ol>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <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>
-            <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>
-              </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>
-    </ThemeProvider>
-  );
-}
--- a/web/src/components/VirtualTable.tsx
+++ b/web/src/components/VirtualTable.tsx
@@ -1,172 +0,0 @@
-import React, { useRef } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import type { VideoData } from '../types/video';
-import { formatDuration, formatDate } from '../utils/csvParser';
-import { Badge } from './ui/badge';
-import { Button } from './ui/button';
-import { Tooltip,TooltipContent, TooltipTrigger  } from './ui/tooltip';
-
-interface VirtualTableProps {
-  data: VideoData[];
-}
-
-export function VirtualTable({ data }: VirtualTableProps) {
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  console.log(data);
-  const rowVirtualizer = useVirtualizer({
-    count: data.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 120,
-    overscan: 5,
-  });
-
-  const virtualItems = rowVirtualizer.getVirtualItems();
-
-  return (
-    <div className="border rounded-lg overflow-hidden">
-      {/* Table Header */}
-      <div className="bg-muted/50 border-b">
-        <div className="grid grid-cols-12 gap-3 px-4 py-3 text-sm font-medium text-muted-foreground">
-          <div className="col-span-3 flex items-center">Video</div>
-          <div className="col-span-2 flex items-center">Channel</div>
-          <div className="col-span-2 flex items-center">Classification</div>
-          <div className="col-span-1 flex items-center">Language</div>
-          <div className="col-span-1 flex items-center">Duration</div>
-          <div className="col-span-2 flex items-center">Date</div>
-          <div className="col-span-1 flex items-center">Actions</div>
-        </div>
-      </div>
-
-      {/* Virtual Container */}
-      <div
-        ref={parentRef}
-        className="h-[600px] overflow-auto"
-        style={{
-          contain: 'strict',
-        }}
-      >
-        <div
-          style={{
-            height: `${rowVirtualizer.getTotalSize()}px`,
-            width: '100%',
-            position: 'relative',
-          }}
-        >
-          {virtualItems.map((virtualItem) => {
-            const video = data[virtualItem.index];
-            console.log(data, virtualItem, video);
-            if (!video) return null;
-
-            return (
-              <div
-                key={virtualItem.key}
-                data-index={virtualItem.index}
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: '100%',
-                  transform: `translateY(${virtualItem.start}px)`,
-                }}
-              >
-                <div className="border-b hover:bg-muted/50 transition-colors">
-                  <div className="grid grid-cols-12 gap-3 px-4 py-3 items-center min-h-[80px]">
-                    {/* Video Info */}
-                    <div className="col-span-3 space-y-2 min-w-0">
-                      <Tooltip>
-                        <TooltipContent>
-                          {video.video_title}
-                        </TooltipContent>
-                        <TooltipTrigger>
-                        <h3 className="text-start font-medium text-sm leading-tight truncate sm:w-[150px] lg:w-[200px] xl:w-[250px] 2xl:w-[300px]">
-                          {video.video_title}
-                        </h3>
-                        </TooltipTrigger>
-                      </Tooltip>
-                      <div className="flex flex-wrap gap-1">
-                        {video.detailed_subtags.split(',').slice(0, 2).map((tag, i) => (
-                            <Badge variant="secondary" className="text-xs max-w-20 truncate">
-                              {tag.trim()}
-                            </Badge>
-                        ))}
-                        {video.detailed_subtags.split(',').length > 2 && (
-                          <Tooltip>
-                            <TooltipContent>
-                              {video.detailed_subtags.split(',').slice(2).join(', ')}
-                            </TooltipContent>
-                            <TooltipTrigger>
-                            <Badge variant="outline" className="text-xs">
-                              +{video.detailed_subtags.split(',').length - 2}
-                            </Badge>
-                            </TooltipTrigger>
-                          </Tooltip>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Channel */}
-                    <div className="col-span-2 min-w-0">
-                      <Tooltip content={video.channel_name}>
-                        <div className="text-sm font-medium truncate">{video.channel_name}</div>
-                      </Tooltip>
-                      <Tooltip content={video.playlist_name}>
-                        <div className="text-xs text-muted-foreground truncate">{video.playlist_name}</div>
-                      </Tooltip>
-                    </div>
-
-                    {/* Classification */}
-                    <div className="col-span-2 min-w-0">
-                      <Badge variant="default" className="text-xs truncate max-w-full">
-                        {video.classification}
-                      </Badge>
-                    </div>
-
-                    {/* Language */}
-                    <div className="col-span-1 min-w-0">
-                      <Badge variant="outline" className="text-xs truncate max-w-full">
-                        {video.language}
-                      </Badge>
-                    </div>
-
-                    {/* Duration */}
-                    <div className="col-span-1 text-sm font-mono">
-                      {formatDuration(video.video_length_seconds)}
-                    </div>
-
-                    {/* Date */}
-                    <div className="col-span-2 space-y-1 min-w-0">
-                      <div className="text-sm">{formatDate(video.video_date)}</div>
-                      <div className="text-xs text-muted-foreground truncate">
-                        Added: {formatDate(video.timestamp)}
-                      </div>
-                    </div>
-
-                    {/* Actions */}
-                    <div className="col-span-1">
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() => window.open(video.video_url, '_blank')}
-                        className="text-xs"
-                      >
-                        Watch
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="bg-muted/50 border-t px-4 py-3">
-        <div className="text-sm text-muted-foreground text-center">
-          Showing {data.length} videos
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -1,36 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -1,25 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -1,23 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-const Select = React.forwardRef<
-  HTMLSelectElement,
-  React.SelectHTMLAttributes<HTMLSelectElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <select
-      className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </select>
-  )
-})
-Select.displayName = "Select"
-
-export { Select }
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -1,103 +0,0 @@
-import * as React from "react"
-import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip"
-
-import { cn } from "@/lib/utils"
-
-function TooltipProvider({
-	delay = 0,
-	closeDelay = 0,
-	...props
-}: React.ComponentProps<typeof BaseTooltip.Provider>) {
-	return (
-		<BaseTooltip.Provider
-			data-slot="tooltip-provider"
-			delay={delay}
-			closeDelay={closeDelay}
-			{...props}
-		/>
-	)
-}
-
-function Tooltip({ ...props }: React.ComponentProps<typeof BaseTooltip.Root>) {
-	return (
-		<TooltipProvider>
-			<BaseTooltip.Root data-slot="tooltip" {...props} />
-		</TooltipProvider>
-	)
-}
-
-function TooltipTrigger({
-	...props
-}: React.ComponentProps<typeof BaseTooltip.Trigger>) {
-	return <BaseTooltip.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipPortal({
-	...props
-}: React.ComponentProps<typeof BaseTooltip.Portal>) {
-	return <BaseTooltip.Portal data-slot="tooltip-portal" {...props} />
-}
-
-function TooltipPositioner({
-	...props
-}: React.ComponentProps<typeof BaseTooltip.Positioner>) {
-	return <BaseTooltip.Positioner data-slot="tooltip-positioner" {...props} />
-}
-
-function TooltipArrow({
-	...props
-}: React.ComponentProps<typeof BaseTooltip.Arrow>) {
-	return <BaseTooltip.Arrow data-slot="tooltip-arrow" {...props} />
-}
-
-function TooltipContent({
-	className,
-	align = "center",
-	sideOffset = 8,
-	side = "top",
-	children,
-	...props
-}: React.ComponentProps<typeof BaseTooltip.Popup> & {
-	align?: BaseTooltip.Positioner.Props["align"]
-	side?: BaseTooltip.Positioner.Props["side"]
-	sideOffset?: BaseTooltip.Positioner.Props["sideOffset"]
-}) {
-	return (
-		<TooltipPortal>
-			<TooltipPositioner sideOffset={sideOffset} align={align} side={side}>
-				<BaseTooltip.Popup
-					data-slot="tooltip-content"
-					className={cn(
-						"bg-popover text-popover-foreground outline-border z-50 w-fit origin-[var(--transform-origin)] rounded-md px-3 py-1.5 text-xs text-balance shadow-sm outline -outline-offset-1 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
-						className
-					)}
-					{...props}
-				>
-					{children}
-					<TooltipArrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-						<svg width="20" height="10" viewBox="0 0 20 10" fill="none">
-							<path
-								d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-								className="fill-popover"
-							/>
-							<path
-								d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-								className="fill-border"
-							/>
-						</svg>
-					</TooltipArrow>
-				</BaseTooltip.Popup>
-			</TooltipPositioner>
-		</TooltipPortal>
-	)
-}
-
-export {
-	Tooltip,
-	TooltipTrigger,
-	TooltipContent,
-	TooltipPortal,
-	TooltipPositioner,
-	TooltipArrow,
-	TooltipProvider,
-}
--- a/web/src/env.d.ts
+++ b/web/src/env.d.ts
@@ -1,2 +0,0 @@
-/// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
--- a/web/src/pages/api/videos.ts
+++ b/web/src/pages/api/videos.ts
@@ -1,51 +0,0 @@
-import type { APIRoute } from 'astro';
-import { readFileSync, existsSync } from 'fs';
-import { join } from 'path';
-import { parseCSV } from '../../utils/csvParser';
-
-export const GET: APIRoute = async () => {
-  try {
-    // Look for CSV file in the project root (outside web folder)
-    const csvPath = join(process.cwd(), '..', 'video_classifications.csv');
-    
-    if (!existsSync(csvPath)) {
-      return new Response(
-        JSON.stringify({ 
-          error: 'CSV file not found',
-          message: 'video_classifications.csv not found in project root',
-          path: csvPath
-        }), 
-        {
-          status: 404,
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
-      );
-    }
-
-    const csvContent = readFileSync(csvPath, 'utf-8');
-    const videos = parseCSV(csvContent);
-
-    return new Response(JSON.stringify({ videos }), {
-      status: 200,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-  } catch (error) {
-    console.error('Error reading CSV file:', error);
-    return new Response(
-      JSON.stringify({ 
-        error: 'Failed to read CSV file',
-        message: error instanceof Error ? error.message : 'Unknown error'
-      }), 
-      {
-        status: 500,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }
-    );
-  }
-};
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,27 +1,27 @@
 ---
-import VideoClassifierApp from '@/components/VideoClassifierApp';
 import '../styles/global.css';
-import { join } from 'path';
-import { readFileSync } from 'fs';
-import { parseCSV } from '@/utils/csvParser';
-
- const csvPath = join(process.cwd(), '..', 'video_classifications.csv')
-    const csvContent = readFileSync(csvPath, 'utf-8');
-    const videos = parseCSV(csvContent);
+// Component Imports
+import Button from '../components/Button.astro';
+import {Button as ShadcnButton} from '../components/ui/button.tsx';

+// Full Astro Component Syntax:
+// https://docs.astro.build/basics/astro-components/
 ---

 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
-		<title>YouTube Video Classifier</title>
-		<meta name="description" content="AI-powered YouTube video classification and management platform" />
+		<title>Astro + TailwindCSS</title>
 	</head>

-	<body class="min-h-screen bg-background">
-		<VideoClassifierApp client:only videos={videos}  />
+	<body>
+		<div class="grid place-items-center h-screen content-center">
+			<Button>Tailwind Button in Astro!</Button>
+			<a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>
+			<ShadcnButton>Shadcn Button</ShadcnButton>
+		</div>
 	</body>
-</html>
+</html>
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -39,33 +39,6 @@
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
-  --font-sans: Poppins, sans-serif;
-  --font-mono: Fira Code, monospace;
-  --font-serif: Lora, serif;
-  --radius: 0.4rem;
-  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
-  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
-  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
-  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
-  --tracking-normal: var(--tracking-normal);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-md: var(--shadow-md);
-  --shadow: var(--shadow);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-2xs: var(--shadow-2xs);
-  --spacing: var(--spacing);
-  --letter-spacing: var(--letter-spacing);
-  --shadow-offset-y: var(--shadow-offset-y);
-  --shadow-offset-x: var(--shadow-offset-x);
-  --shadow-spread: var(--shadow-spread);
-  --shadow-blur: var(--shadow-blur);
-  --shadow-opacity: var(--shadow-opacity);
-  --color-shadow-color: var(--shadow-color);
-  --color-destructive-foreground: var(--destructive-foreground);
 }

 :root {
@@ -101,27 +74,6 @@
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
-  --destructive-foreground: oklch(1.0000 0 0);
-  --font-sans: Poppins, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: Fira Code, monospace;
-  --shadow-color: hsl(325.78 58.18% 56.86% / 0.5);
-  --shadow-opacity: 1.0;
-  --shadow-blur: 0px;
-  --shadow-spread: 0px;
-  --shadow-offset-x: 3px;
-  --shadow-offset-y: 3px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
-  --shadow-2xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
-  --shadow-xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
-  --shadow-sm: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
-  --shadow: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
-  --shadow-md: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
-  --shadow-lg: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
-  --shadow-xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
-  --shadow-2xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 2.50);
-  --tracking-normal: 0em;
 }

 .dark {
@@ -156,27 +108,6 @@
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
-  --destructive-foreground: oklch(0.2497 0.0305 234.1628);
-  --radius: 0.4rem;
-  --font-sans: Poppins, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: Fira Code, monospace;
-  --shadow-color: #324859;
-  --shadow-opacity: 1.0;
-  --shadow-blur: 0px;
-  --shadow-spread: 0px;
-  --shadow-offset-x: 3px;
-  --shadow-offset-y: 3px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
-  --shadow-2xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
-  --shadow-xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
-  --shadow-sm: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
-  --shadow: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
-  --shadow-md: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
-  --shadow-lg: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
-  --shadow-xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
-  --shadow-2xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 2.50);
 }

@layer base {
@@ -185,7 +116,6 @@
  }
  body {
    @apply bg-background text-foreground;
-    letter-spacing: var(--tracking-normal);
  }
 }

--- a/web/src/types/video.ts
+++ b/web/src/types/video.ts
@@ -1,22 +0,0 @@
-export interface VideoData {
-  video_title: string;
-  video_url: string;
-  thumbnail_url: string;
-  classification: string;
-  language: string;
-  channel_name: string;
-  channel_link: string;
-  video_length_seconds: number;
-  video_date: string;
-  detailed_subtags: string;
-  playlist_name: string;
-  playlist_link: string;
-  image_data: string;
-  timestamp: string;
-}
-
-export interface FilterOptions {
-  classification: string[];
-  language: string[];
-  playlist_name: string[];
-}
--- a/web/src/utils/csvParser.ts
+++ b/web/src/utils/csvParser.ts
@@ -1,41 +0,0 @@
-import Papa from 'papaparse';
-import type { VideoData } from '../types/video';
-
-export function parseCSV(csvText: string): VideoData[] {
-  const result = Papa.parse<VideoData>(csvText, {
-    header: true,
-    skipEmptyLines: true,
-    transform: (value, field) => {
-      // Convert numeric fields
-      if (field === 'video_length_seconds') {
-        return parseInt(value) || 0;
-      }
-      return value;
-    }
-  });
-
-  if (result.errors.length > 0) {
-    console.warn('CSV parsing errors:', result.errors);
-  }
-
-  return result.data;
-}
-
-export function formatDuration(seconds: number): string {
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
-  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
-}
-
-export function formatDate(dateString: string): string {
-  try {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric'
-    });
-  } catch {
-    return dateString;
-  }
-}
--- a/web/src/utils/search.ts
+++ b/web/src/utils/search.ts
@@ -1,57 +0,0 @@
-import type { VideoData } from '../types/video';
-
-export function searchVideos(videos: VideoData[], searchTerm: string): VideoData[] {
-  if (!searchTerm.trim()) return videos;
-
-  const term = searchTerm.toLowerCase();
-  
-  return videos.filter(video => {
-    const searchableFields = [
-      video.video_title,
-      video.channel_name,
-      video.detailed_subtags,
-      video.classification,
-      video.language,
-      video.playlist_name,
-      video.video_length_seconds.toString(),
-      formatDateForSearch(video.video_date),
-      formatDateForSearch(video.timestamp)
-    ];
-
-    return searchableFields.some(field => 
-      field && field.toLowerCase().includes(term)
-    );
-  });
-}
-
-function formatDateForSearch(dateString: string): string {
-  try {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US');
-  } catch {
-    return dateString;
-  }
-}
-
-export function filterVideos(
-  videos: VideoData[], 
-  filters: { classification?: string; language?: string; playlist_name?: string }
-): VideoData[] {
-  return videos.filter(video => {
-    if (filters.classification && filters.classification !== 'all' && video.classification !== filters.classification) {
-      return false;
-    }
-    if (filters.language && filters.language !== 'all' && video.language !== filters.language) {
-      return false;
-    }
-    if (filters.playlist_name && filters.playlist_name !== 'all' && video.playlist_name !== filters.playlist_name) {
-      return false;
-    }
-    return true;
-  });
-}
-
-export function getUniqueValues(videos: VideoData[], field: keyof VideoData): string[] {
-  const values = videos.map(video => video[field] as string).filter(Boolean);
-  return [...new Set(values)].sort();
-}