feat: native video thumbnails implementation

- Implemented pixel-based thumbnail generation system
- Added comprehensive thumbnail management with caching
- Created adaptive performance controls for thumbnail generation
- Added thumbnail validation and error handling
- Implemented memory management and concurrency control
- Added extensive test coverage and documentation
- Refactored timeline components for better thumbnail integration
- Added new asset browser and inspector components
- Enhanced video thumbnail settings and controls

Author: naoNao89

apps/web/package.json

@@ -7,6 +7,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui",
     "lint": "biome check src/",
     "lint:fix": "biome check src/ --write",
     "format": "biome format src/ --write",
@@ -23,6 +28,7 @@
     "@hookform/resolvers": "^3.9.1",
     "@opencut/auth": "workspace:*",
     "@opencut/db": "workspace:*",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-separator": "^1.1.7",
     "@t3-oss/env-core": "^0.13.8",
     "@t3-oss/env-nextjs": "^0.13.8",
@@ -43,6 +49,7 @@
     "input-otp": "^1.4.1",
     "lucide-react": "^0.468.0",
     "motion": "^12.18.1",
+    "nanoid": "^5.1.5",
     "next": "^15.4.5",
     "next-themes": "^0.4.4",
     "pg": "^8.16.2",
@@ -76,11 +83,15 @@
     "@types/pg": "^8.15.4",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "cross-env": "^7.0.3",
     "drizzle-kit": "^0.31.4",
+    "jsdom": "^25.0.1",
     "postcss": "^8",
     "tailwindcss": "^4.1.11",
     "tsx": "^4.7.1",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
   }
 }

apps/web/src/app/editor/[project_id]/page.tsx

@@ -7,10 +7,10 @@ import {
   ResizablePanel,
   ResizableHandle,
 } from "../../../components/ui/resizable";
-import { MediaPanel } from "../../../components/editor/media-panel";
-import { PropertiesPanel } from "../../../components/editor/properties-panel";
+import { AssetBrowser } from "../../../components/editor/asset-browser";
+import { Inspector } from "../../../components/editor/inspector";
 import { Timeline } from "../../../components/editor/timeline";
-import { PreviewPanel } from "../../../components/editor/preview-panel";
+import { ProgramMonitor } from "../../../components/editor/program-monitor";
 import { EditorHeader } from "@/components/editor-header";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -177,7 +177,7 @@ export default function Editor() {
                   onResize={setToolsPanel}
                   className="min-w-0 rounded-sm"
                 >
-                  <MediaPanel />
+                  <AssetBrowser />
                 </ResizablePanel>
 
                 <ResizableHandle withHandle />
@@ -189,7 +189,7 @@ export default function Editor() {
                   onResize={setPreviewPanel}
                   className="min-w-0 min-h-0 flex-1"
                 >
-                  <PreviewPanel />
+                  <ProgramMonitor />
                 </ResizablePanel>
 
                 <ResizableHandle withHandle />
@@ -201,7 +201,7 @@ export default function Editor() {
                   onResize={setPropertiesPanel}
                   className="min-w-0"
                 >
-                  <PropertiesPanel />
+                  <Inspector />
                 </ResizablePanel>
               </ResizablePanelGroup>
             </ResizablePanel>

apps/web/src/components/editor/media-panel/drag-overlay.tsx renamed to apps/web/src/components/editor/asset-browser/drag-overlay.tsx

@@ -2,13 +2,13 @@
 
 import { TabBar } from "./tabbar";
 import { MediaView } from "./views/media";
-import { useMediaPanelStore, Tab } from "./store";
+import { useAssetBrowserStore, Tab } from "./store";
 import { TextView } from "./views/text";
 import { AudioView } from "./views/audio";
 import { Separator } from "@/components/ui/separator";
 
-export function MediaPanel() {
-  const { activeTab } = useMediaPanelStore();
+export function AssetBrowser() {
+  const { activeTab } = useAssetBrowserStore();
 
   const viewMap: Record<Tab, React.ReactNode> = {
     media: <MediaView />,

apps/web/src/components/editor/media-panel/index.tsx renamed to apps/web/src/components/editor/asset-browser/index.tsx

@@ -62,12 +62,12 @@ export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
   },
 };
 
-interface MediaPanelStore {
+interface AssetBrowserStore {
   activeTab: Tab;
   setActiveTab: (tab: Tab) => void;
 }
 
-export const useMediaPanelStore = create<MediaPanelStore>((set) => ({
+export const useAssetBrowserStore = create<AssetBrowserStore>((set) => ({
   activeTab: "media",
   setActiveTab: (tab) => set({ activeTab: tab }),
 }));

apps/web/src/components/editor/media-panel/store.ts renamed to apps/web/src/components/editor/asset-browser/store.ts

@@ -1,13 +1,13 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { Tab, tabs, useMediaPanelStore } from "./store";
+import { Tab, tabs, useAssetBrowserStore } from "./store";
 import { Button } from "@/components/ui/button";
 import { ChevronRight, ChevronLeft } from "lucide-react";
 import { useRef, useState, useEffect } from "react";
 
 export function TabBar() {
-  const { activeTab, setActiveTab } = useMediaPanelStore();
+  const { activeTab, setActiveTab } = useAssetBrowserStore();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [isAtEnd, setIsAtEnd] = useState(false);
   const [isAtStart, setIsAtStart] = useState(true);

apps/web/src/components/editor/media-panel/tabbar.tsx renamed to apps/web/src/components/editor/asset-browser/tabbar.tsx

@@ -17,7 +17,7 @@ import {
 import { useEffect, useRef, useState, useMemo } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";
+import { MediaDragOverlay } from "@/components/editor/asset-browser/drag-overlay";
 import {
   ContextMenu,
   ContextMenuContent,