From f72f5c100badb8ad744a20b9110f9f5e7a9bf774 Mon Sep 17 00:00:00 2001
From: StarKnightt <prasenjitt4e@gmail.com>
Date: Mon, 23 Jun 2025 20:01:12 +0530
Subject: Add video speed control and improve playback smoothness

Added a speed control dropdown in the timeline toolbar that lets users change video playback speed between 0.5x to 2x. The dropdown shows the current speed and offers preset options.

Made video playback smoother by:
- Using better timing for speed changes
- Improving video synchronization
- Reducing playback stutters
- Making speed changes more responsive

The speed control is now easily accessible while editing and works smoothly with all video clips.
---
 apps/web/src/components/ui/command.tsx      |  2 +-
 apps/web/src/components/ui/video-player.tsx | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 29f29cf2..11b27041 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { type DialogProps } from "radix-ui";
+import { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index 0c4f8498..8731e1a8 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -25,7 +25,7 @@ export function VideoPlayer({
     clipDuration
 }: VideoPlayerProps) {
     const videoRef = useRef<HTMLVideoElement>(null);
-    const { isPlaying, currentTime, volume, play, pause, setVolume } = usePlaybackStore();
+    const { isPlaying, currentTime, volume, speed, play, pause, setVolume } = usePlaybackStore();
 
     // Calculate if we're within this clip's timeline range
     const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
@@ -59,18 +59,26 @@ export function VideoPlayer({
                 timelineTime - clipStartTime + trimStart
             ));
 
-            // Only sync if there's a significant difference
-            if (Math.abs(video.currentTime - targetVideoTime) > 0.2) {
+            // Only sync if there's a significant difference to avoid micro-adjustments
+            if (Math.abs(video.currentTime - targetVideoTime) > 0.5) {
                 video.currentTime = targetVideoTime;
             }
         };
 
+        const handleSpeedEvent = (e: CustomEvent) => {
+            if (!isInClipRange) return;
+            // Set playbackRate directly without any additional checks
+            video.playbackRate = e.detail.speed;
+        };
+
         window.addEventListener("playback-seek", handleSeekEvent as EventListener);
         window.addEventListener("playback-update", handleUpdateEvent as EventListener);
+        window.addEventListener("playback-speed", handleSpeedEvent as EventListener);
 
         return () => {
             window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
             window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
+            window.removeEventListener("playback-speed", handleSpeedEvent as EventListener);
         };
     }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
 
@@ -93,6 +101,13 @@ export function VideoPlayer({
         video.volume = volume;
     }, [volume]);
 
+    // Sync speed immediately when it changes
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.playbackRate = speed;
+    }, [speed]);
+
     return (
         <div className={`relative group ${className}`}>
             <video
@@ -101,7 +116,7 @@ export function VideoPlayer({
                 poster={poster}
                 className="w-full h-full object-cover"
                 playsInline
-                preload="metadata"
+                preload="auto"
             />
 
             <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
-- 
cgit v1.3.1


From e664ea0271a9c34bb7290447823367ba6fffac7d Mon Sep 17 00:00:00 2001
From: Pulkit Garg <pulkitgargbnl@gmail.com>
Date: Tue, 24 Jun 2025 10:28:58 +0530
Subject: feat: Enable Playhead Dragging for Video Navigation

---
 apps/web/package-lock.json                  |  1 +
 apps/web/src/components/editor/timeline.tsx | 67 +++++++++++++++++++++++------
 apps/web/src/components/ui/video-player.tsx |  4 +-
 package-lock.json                           |  6 +++
 4 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 package-lock.json

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/package-lock.json b/apps/web/package-lock.json
index 7718a971..40178823 100644
--- a/apps/web/package-lock.json
+++ b/apps/web/package-lock.json
@@ -45,6 +45,7 @@
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
         "vaul": "^1.1.1",
+        "zod": "^3.25.67",
         "zustand": "^5.0.2"
       },
       "devDependencies": {
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 675b398c..e97b9cec 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -27,7 +27,7 @@ import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { processMediaFiles } from "@/lib/media-processing";
 import { toast } from "sonner";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import {
   Select,
   SelectContent,
@@ -69,6 +69,10 @@ export function Timeline() {
     additive: boolean;
   } | null>(null);
 
+  // Playhead scrubbing state
+  const [isScrubbing, setIsScrubbing] = useState(false);
+  const [scrubTime, setScrubTime] = useState<number | null>(null);
+
   // Update timeline duration when tracks change
   useEffect(() => {
     const totalDuration = getTotalDuration();
@@ -304,6 +308,41 @@ export function Timeline() {
     setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
   };
 
+  // --- Playhead Scrubbing Handlers ---
+  const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsScrubbing(true);
+    handleScrub(e);
+  }, [duration, zoomLevel]);
+
+  const handleScrub = useCallback((e: MouseEvent | React.MouseEvent) => {
+    const timeline = timelineRef.current;
+    if (!timeline) return;
+    const rect = timeline.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
+    setScrubTime(time);
+    seek(time); // update video preview in real time
+  }, [duration, zoomLevel, seek]);
+
+  useEffect(() => {
+    if (!isScrubbing) return;
+    const onMouseMove = (e: MouseEvent) => handleScrub(e);
+    const onMouseUp = (e: MouseEvent) => {
+      setIsScrubbing(false);
+      if (scrubTime !== null) seek(scrubTime); // finalize seek
+      setScrubTime(null);
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [isScrubbing, scrubTime, seek, handleScrub]);
+
+  const playheadPosition = isScrubbing && scrubTime !== null ? scrubTime : currentTime;
+
   const dragProps = {
     onDragEnter: handleDragEnter,
     onDragOver: handleDragOver,
@@ -555,10 +594,11 @@ export function Timeline() {
                   }).filter(Boolean);
                 })()}
 
-                {/* Playhead in ruler */}
+                {/* Playhead in ruler (scrubbable) */}
                 <div
-                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"
-                  style={{ left: `${currentTime * 50 * zoomLevel}px` }}
+                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-auto z-10 cursor-ew-resize"
+                  style={{ left: `${playheadPosition * 50 * zoomLevel}px` }}
+                  onMouseDown={handlePlayheadMouseDown}
                 >
                   <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
                 </div>
@@ -668,14 +708,17 @@ export function Timeline() {
                       </div>
                     ))}
 
-                    {/* Playhead for tracks area */}
-                    <div
-                      className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"
-                      style={{
-                        left: `${currentTime * 50 * zoomLevel}px`,
-                        height: `${tracks.length * 60}px`,
-                      }}
-                    />
+                    {/* Playhead for tracks area (scrubbable) */}
+                    {tracks.length > 0 && (
+                      <div
+                        className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-20 cursor-ew-resize"
+                        style={{
+                          left: `${playheadPosition * 50 * zoomLevel}px`,
+                          height: `${tracks.length * 60}px`,
+                        }}
+                        onMouseDown={handlePlayheadMouseDown}
+                      />
+                    )}
                   </>
                 )}
               </div>
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index 8731e1a8..fdc2ed02 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -42,7 +42,7 @@ export function VideoPlayer({
         if (!video) return;
 
         const handleSeekEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
+            // Always update video time, even if outside clip range
             const timelineTime = e.detail.time;
             const newVideoTime = Math.max(trimStart, Math.min(
                 clipDuration - trimEnd,
@@ -52,7 +52,7 @@ export function VideoPlayer({
         };
 
         const handleUpdateEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
+            // Always update video time, even if outside clip range
             const timelineTime = e.detail.time;
             const targetVideoTime = Math.max(trimStart, Math.min(
                 clipDuration - trimEnd,
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..e1f6b630
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Opencut",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
-- 
cgit v1.3.1


From dc35619017ed7fbaa5e83151ba99c143da8cf1f1 Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Tue, 24 Jun 2025 08:10:11 +0300
Subject: clean up and simplifying more logic

---
 apps/web/src/app/editor/page.tsx                 | 104 +++---
 apps/web/src/components/editor-provider.tsx      |  14 +-
 apps/web/src/components/editor/preview-panel.tsx | 407 +++--------------------
 apps/web/src/components/ui/video-player.tsx      | 113 ++-----
 apps/web/src/stores/panel-store.ts               |  62 +---
 5 files changed, 156 insertions(+), 544 deletions(-)

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index 64186a3e..19df364c 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -42,59 +42,71 @@ export default function Editor() {
 
   return (
     <EditorProvider>
-      <div className="h-screen w-screen flex flex-col bg-background">
+      <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
         <EditorHeader />
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel
-            defaultSize={mainContent}
-            minSize={30}
-            onResize={setMainContent}
-          >
-            {/* Main content area */}
-            <ResizablePanelGroup direction="horizontal">
-              {/* Tools Panel */}
-              <ResizablePanel
-                defaultSize={toolsPanel}
-                minSize={15}
-                onResize={setToolsPanel}
-              >
-                <MediaPanel />
-              </ResizablePanel>
+        <div className="flex-1 min-h-0 min-w-0">
+          <ResizablePanelGroup direction="vertical" className="h-full w-full">
+            <ResizablePanel
+              defaultSize={mainContent}
+              minSize={30}
+              maxSize={85}
+              onResize={setMainContent}
+              className="min-h-0"
+            >
+              {/* Main content area */}
+              <ResizablePanelGroup direction="horizontal" className="h-full w-full">
+                {/* Tools Panel */}
+                <ResizablePanel
+                  defaultSize={toolsPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setToolsPanel}
+                  className="min-w-0"
+                >
+                  <MediaPanel />
+                </ResizablePanel>
 
-              <ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-              {/* Preview Area */}
-              <ResizablePanel
-                defaultSize={previewPanel}
-                onResize={setPreviewPanel}
-              >
-                <PreviewPanel />
-              </ResizablePanel>
+                {/* Preview Area */}
+                <ResizablePanel
+                  defaultSize={previewPanel}
+                  minSize={30}
+                  onResize={setPreviewPanel}
+                  className="min-w-0 min-h-0 flex-1"
+                >
+                  <PreviewPanel />
+                </ResizablePanel>
 
-              <ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-              {/* Properties Panel */}
-              {/* <ResizablePanel
-                defaultSize={propertiesPanel}
-                minSize={15}
-                onResize={setPropertiesPanel}
-              >
-                <PropertiesPanel />
-              </ResizablePanel> */}
-            </ResizablePanelGroup>
-          </ResizablePanel>
+                {/* Properties Panel - Hidden for now but ready */}
+                {/* <ResizablePanel
+                  defaultSize={propertiesPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setPropertiesPanel}
+                  className="min-w-0"
+                >
+                  <PropertiesPanel />
+                </ResizablePanel> */}
+              </ResizablePanelGroup>
+            </ResizablePanel>
 
-          <ResizableHandle withHandle />
+            <ResizableHandle withHandle />
 
-          {/* Timeline */}
-          <ResizablePanel
-            defaultSize={timeline}
-            minSize={15}
-            onResize={setTimeline}
-          >
-            <Timeline />
-          </ResizablePanel>
-        </ResizablePanelGroup>
+            {/* Timeline */}
+            <ResizablePanel
+              defaultSize={timeline}
+              minSize={15}
+              maxSize={70}
+              onResize={setTimeline}
+              className="min-h-0"
+            >
+              <Timeline />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
       </div>
     </EditorProvider>
   );
diff --git a/apps/web/src/components/editor-provider.tsx b/apps/web/src/components/editor-provider.tsx
index ab55c7d7..38255956 100644
--- a/apps/web/src/components/editor-provider.tsx
+++ b/apps/web/src/components/editor-provider.tsx
@@ -3,7 +3,6 @@
 import { useEffect } from "react";
 import { Loader2 } from "lucide-react";
 import { useEditorStore } from "@/stores/editor-store";
-import { usePanelStore } from "@/stores/panel-store";
 
 interface EditorProviderProps {
   children: React.ReactNode;
@@ -11,19 +10,10 @@ interface EditorProviderProps {
 
 export function EditorProvider({ children }: EditorProviderProps) {
   const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();
-  const { setInitialized } = usePanelStore();
 
   useEffect(() => {
-    const initialize = async () => {
-      // Initialize the app
-      await initializeApp();
-
-      // Initialize panel store for future resize events
-      setInitialized();
-    };
-
-    initialize();
-  }, [initializeApp, setInitialized]);
+    initializeApp();
+  }, [initializeApp]);
 
   // Show loading screen while initializing
   if (isInitializing || !isPanelsReady) {
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 5d03e941..101f1ff1 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -5,53 +5,25 @@ import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { VideoPlayer } from "@/components/ui/video-player";
 import { Button } from "@/components/ui/button";
-import { Play, Pause, Move, RotateCw, Crop, ZoomIn, ZoomOut } from "lucide-react";
-import { useState, useRef, useEffect, useCallback } from "react";
-
-interface ClipTransform {
-  x: number;
-  y: number;
-  scale: number;
-  rotation: number;
-  opacity: number;
-  width: number;
-  height: number;
-  blendMode: string;
-  cropTop: number;
-  cropBottom: number;
-  cropLeft: number;
-  cropRight: number;
-}
-
-interface DragState {
-  isDragging: boolean;
-  dragType: 'move' | 'resize-nw' | 'resize-ne' | 'resize-sw' | 'resize-se' | 'rotate' | 'scale' | 'crop-n' | 'crop-s' | 'crop-e' | 'crop-w';
-  startMouseX: number;
-  startMouseY: number;
-  startTransform: ClipTransform;
-  clipId: string;
-}
+import { Play, Pause } from "lucide-react";
+import { useState, useRef } from "react";
 
 export function PreviewPanel() {
   const { tracks } = useTimelineStore();
   const { mediaItems } = useMediaStore();
   const { isPlaying, toggle, currentTime } = usePlaybackStore();
-
-  const [clipTransforms, setClipTransforms] = useState<Record<string, ClipTransform>>({});
-  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 }); // Default 16:9
-  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
   const previewRef = useRef<HTMLDivElement>(null);
 
-  // Get all active clips at current time (for overlaying)
+  // Get active clips at current time
   const getActiveClips = () => {
     const activeClips: Array<{
       clip: any;
       track: any;
       mediaItem: any;
-      layer: number;
     }> = [];
 
-    tracks.forEach((track, trackIndex) => {
+    tracks.forEach((track) => {
       track.clips.forEach((clip) => {
         const clipStart = clip.startTime;
         const clipEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
@@ -62,338 +34,78 @@ export function PreviewPanel() {
             : mediaItems.find((item) => item.id === clip.mediaId);
 
           if (mediaItem || clip.mediaId === "test") {
-            activeClips.push({
-              clip,
-              track,
-              mediaItem,
-              layer: trackIndex, // Track index determines layer order
-            });
+            activeClips.push({ clip, track, mediaItem });
           }
         }
       });
     });
 
-    // Sort by layer (track order) - higher index = on top
-    return activeClips.sort((a, b) => a.layer - b.layer);
+    return activeClips;
   };
 
   const activeClips = getActiveClips();
   const aspectRatio = canvasSize.width / canvasSize.height;
 
-  // Get or create transform for a clip
-  const getClipTransform = (clipId: string): ClipTransform => {
-    return clipTransforms[clipId] || {
-      x: 0,
-      y: 0,
-      scale: 1,
-      rotation: 0,
-      opacity: 1,
-      width: 100, // Percentage of canvas
-      height: 100,
-      blendMode: 'normal',
-      cropTop: 0,
-      cropBottom: 0,
-      cropLeft: 0,
-      cropRight: 0,
-    };
-  };
-
-  // Update clip transform
-  const updateClipTransform = useCallback((clipId: string, updates: Partial<ClipTransform>) => {
-    setClipTransforms(prev => {
-      const currentTransform = prev[clipId] || {
-        x: 0,
-        y: 0,
-        scale: 1,
-        rotation: 0,
-        opacity: 1,
-        width: 100,
-        height: 100,
-        blendMode: 'normal',
-        cropTop: 0,
-        cropBottom: 0,
-        cropLeft: 0,
-        cropRight: 0,
-      };
-
-      return {
-        ...prev,
-        [clipId]: { ...currentTransform, ...updates }
-      };
-    });
-  }, []);
-
-  // Mouse event handlers
-  const handleMouseDown = (e: React.MouseEvent, clipId: string, dragType: DragState['dragType']) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setDragState({
-      isDragging: true,
-      dragType,
-      startMouseX: e.clientX,
-      startMouseY: e.clientY,
-      startTransform: getClipTransform(clipId),
-      clipId
-    });
-  };
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (!dragState || !dragState.isDragging) return;
-
-    const deltaX = e.clientX - dragState.startMouseX;
-    const deltaY = e.clientY - dragState.startMouseY;
-    const { startTransform, clipId, dragType } = dragState;
-
-    switch (dragType) {
-      case 'move':
-        updateClipTransform(clipId, {
-          x: Math.max(-100, Math.min(100, startTransform.x + deltaX * 0.3)),
-          y: Math.max(-100, Math.min(100, startTransform.y + deltaY * 0.3))
-        });
-        break;
-
-      case 'resize-nw':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width - deltaX * 0.5),
-          height: Math.max(20, startTransform.height - deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-ne':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width + deltaX * 0.5),
-          height: Math.max(20, startTransform.height - deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-sw':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width - deltaX * 0.5),
-          height: Math.max(20, startTransform.height + deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-se':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width + deltaX * 0.5),
-          height: Math.max(20, startTransform.height + deltaY * 0.5)
-        });
-        break;
-
-      case 'rotate':
-        updateClipTransform(clipId, {
-          rotation: (startTransform.rotation + deltaX * 2) % 360
-        });
-        break;
-
-      case 'scale':
-        updateClipTransform(clipId, {
-          scale: Math.max(0.1, Math.min(3, startTransform.scale + deltaX * 0.01))
-        });
-        break;
-
-      case 'crop-n':
-        updateClipTransform(clipId, {
-          cropTop: Math.max(0, Math.min(40, startTransform.cropTop + deltaY * 0.2))
-        });
-        break;
-
-      case 'crop-s':
-        updateClipTransform(clipId, {
-          cropBottom: Math.max(0, Math.min(40, startTransform.cropBottom - deltaY * 0.2))
-        });
-        break;
-
-      case 'crop-e':
-        updateClipTransform(clipId, {
-          cropRight: Math.max(0, Math.min(40, startTransform.cropRight - deltaX * 0.2))
-        });
-        break;
-
-      case 'crop-w':
-        updateClipTransform(clipId, {
-          cropLeft: Math.max(0, Math.min(40, startTransform.cropLeft + deltaX * 0.2))
-        });
-        break;
-    }
-  }, [dragState, updateClipTransform]);
-
-  const handleMouseUp = useCallback(() => {
-    setDragState(null);
-  }, []);
-
-  // Add global mouse event listeners
-  useEffect(() => {
-    if (dragState?.isDragging) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-    }
-  }, [dragState, handleMouseMove, handleMouseUp]);
-
-  // Initialize transforms for new clips
-  useEffect(() => {
-    const activeClips = getActiveClips();
-    const newTransforms: Record<string, ClipTransform> = {};
-    let hasNewClips = false;
-
-    activeClips.forEach(({ clip }) => {
-      if (!clipTransforms[clip.id]) {
-        hasNewClips = true;
-        newTransforms[clip.id] = {
-          x: 0,
-          y: 0,
-          scale: 1,
-          rotation: 0,
-          opacity: 1,
-          width: 100,
-          height: 100,
-          blendMode: 'normal',
-          cropTop: 0,
-          cropBottom: 0,
-          cropLeft: 0,
-          cropRight: 0,
-        };
-      }
-    });
-
-    if (hasNewClips) {
-      setClipTransforms(prev => ({ ...prev, ...newTransforms }));
-    }
-  }, [tracks, currentTime]); // Re-run when tracks or time changes
-
-
-
-  // Render a single clip layer
-  const renderClipLayer = (clipData: any, index: number) => {
+  // Render a clip
+  const renderClip = (clipData: any, index: number) => {
     const { clip, mediaItem } = clipData;
-    const transform = getClipTransform(clip.id);
-
-    const layerStyle = {
-      position: 'absolute' as const,
-      left: '50%',
-      top: '50%',
-      width: `${transform.width}%`,
-      height: `${transform.height}%`,
-      transform: `translate(-50%, -50%) translate(${transform.x}%, ${transform.y}%) scale(${transform.scale}) rotate(${transform.rotation}deg)`,
-      opacity: transform.opacity,
-      mixBlendMode: transform.blendMode as any,
-      clipPath: `inset(${transform.cropTop}% ${transform.cropRight}% ${transform.cropBottom}% ${transform.cropLeft}%)`,
-      zIndex: index + 10,
-      cursor: dragState?.isDragging && dragState.clipId === clip.id ? 'grabbing' : 'grab',
-      userSelect: 'none' as const,
-    };
 
-    const handleClipMouseDown = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      handleMouseDown(e, clip.id, 'move');
-    };
-
-    // Handle test clips
+    // Test clips
     if (!mediaItem || clip.mediaId === "test") {
       return (
         <div
           key={clip.id}
-          style={layerStyle}
-          onMouseDown={handleClipMouseDown}
-          className="bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center group"
+          className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
         >
-          <div className="text-center pointer-events-none">
-            <div className="text-2xl">🎬</div>
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎬</div>
             <p className="text-xs text-white">{clip.name}</p>
           </div>
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
 
-    // Render video
+    // Video clips
     if (mediaItem.type === "video") {
       return (
-        <div key={clip.id} style={layerStyle} onMouseDown={handleClipMouseDown} className="group">
+        <div key={clip.id} className="absolute inset-0">
           <VideoPlayer
             src={mediaItem.url}
             poster={mediaItem.thumbnailUrl}
-            className="w-full h-full pointer-events-none"
             clipStartTime={clip.startTime}
             trimStart={clip.trimStart}
             trimEnd={clip.trimEnd}
             clipDuration={clip.duration}
           />
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
 
-    // Render image
+    // Image clips
     if (mediaItem.type === "image") {
       return (
-        <div key={clip.id} style={layerStyle} onMouseDown={handleClipMouseDown} className="group">
+        <div key={clip.id} className="absolute inset-0">
           <img
             src={mediaItem.url}
             alt={mediaItem.name}
-            className="w-full h-full object-cover rounded pointer-events-none"
+            className="w-full h-full object-cover"
             draggable={false}
           />
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
 
-    // Render audio (visual representation)
+    // Audio clips (visual representation)
     if (mediaItem.type === "audio") {
       return (
         <div
           key={clip.id}
-          style={layerStyle}
-          onMouseDown={handleClipMouseDown}
-          className="bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center group"
+          className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
         >
-          <div className="text-center pointer-events-none">
-            <div className="text-2xl">🎵</div>
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎵</div>
             <p className="text-xs text-white">{mediaItem.name}</p>
           </div>
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
@@ -401,7 +113,7 @@ export function PreviewPanel() {
     return null;
   };
 
-  // Canvas size presets
+  // Canvas presets
   const canvasPresets = [
     { name: "16:9 HD", width: 1920, height: 1080 },
     { name: "16:9 4K", width: 3840, height: 2160 },
@@ -411,9 +123,9 @@ export function PreviewPanel() {
   ];
 
   return (
-    <div className="h-full flex flex-col">
-      {/* Canvas Controls */}
-      <div className="border-b p-2 flex items-center gap-2 text-xs">
+    <div className="h-full w-full flex flex-col min-h-0 min-w-0">
+      {/* Controls */}
+      <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">
         <span className="text-muted-foreground">Canvas:</span>
         <select
           value={`${canvasSize.width}x${canvasSize.height}`}
@@ -421,7 +133,7 @@ export function PreviewPanel() {
             const preset = canvasPresets.find(p => `${p.width}x${p.height}` === e.target.value);
             if (preset) setCanvasSize({ width: preset.width, height: preset.height });
           }}
-          className="bg-background border rounded px-2 py-1"
+          className="bg-background border rounded px-2 py-1 text-xs"
         >
           {canvasPresets.map(preset => (
             <option key={preset.name} value={`${preset.width}x${preset.height}`}>
@@ -430,70 +142,49 @@ export function PreviewPanel() {
           ))}
         </select>
 
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={toggle}
-          className="ml-auto"
-        >
+        <Button variant="outline" size="sm" onClick={toggle} className="ml-auto">
           {isPlaying ? <Pause className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}
           {isPlaying ? "Pause" : "Play"}
         </Button>
       </div>
 
-      {/* Preview Area - Full Width */}
-      <div className="flex-1 flex items-center justify-center p-4 bg-gray-900">
+      {/* Preview Area */}
+      <div className="flex-1 flex items-center justify-center p-2 sm:p-4 bg-gray-900 min-h-0 min-w-0">
         <div
           ref={previewRef}
-          className="relative overflow-hidden"
+          className="relative overflow-hidden rounded-sm max-w-full max-h-full bg-black border border-gray-600"
           style={{
             aspectRatio: aspectRatio.toString(),
-            width: aspectRatio > 1 ? "100%" : "auto",
-            height: aspectRatio <= 1 ? "100%" : "auto",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            background: '#000000',
-            border: '1px solid #374151'
+            width: "100%",
+            height: "100%",
           }}
-
         >
-
-
-          {/* Render all active clips as layers */}
           {activeClips.length === 0 ? (
             <div className="absolute inset-0 flex items-center justify-center text-white/50">
               {tracks.length === 0 ? "Drop media to start editing" : "No clips at current time"}
             </div>
           ) : (
-            activeClips.map((clipData, index) => renderClipLayer(clipData, index))
+            activeClips.map((clipData, index) => renderClip(clipData, index))
           )}
-
-
         </div>
       </div>
 
-      {/* Bottom Info Panel */}
-      <div className="border-t bg-background">
-        {/* Layer List */}
-        <div className="p-2 border-b">
-          <div className="text-xs font-medium mb-2">Active Layers ({activeClips.length})</div>
-          <div className="space-y-1 max-h-20 overflow-y-auto">
-            {activeClips.map((clipData, index) => (
-              <div
-                key={clipData.clip.id}
-                className="flex items-center gap-2 p-1 rounded text-xs hover:bg-muted/50"
-              >
-                <span className="w-4 h-4 bg-muted rounded text-center text-xs leading-4">
-                  {index + 1}
-                </span>
-                <span className="flex-1 truncate">{clipData.clip.name}</span>
-                <span className="text-muted-foreground">{clipData.track.name}</span>
-              </div>
-            ))}
-          </div>
+      {/* Info Panel */}
+      <div className="border-t bg-background p-2 flex-shrink-0">
+        <div className="text-xs font-medium mb-1">Active Clips ({activeClips.length})</div>
+        <div className="flex gap-2 overflow-x-auto">
+          {activeClips.map((clipData, index) => (
+            <div
+              key={clipData.clip.id}
+              className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
+            >
+              <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">
+                {index + 1}
+              </span>
+              <span>{clipData.clip.name}</span>
+            </div>
+          ))}
         </div>
-
-
       </div>
     </div>
   );
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index 8731e1a8..f489f70a 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { Button } from "./button";
-import { Play, Pause, Volume2 } from "lucide-react";
 import { usePlaybackStore } from "@/stores/playback-store";
 
 interface VideoPlayerProps {
@@ -25,128 +23,87 @@ export function VideoPlayer({
     clipDuration
 }: VideoPlayerProps) {
     const videoRef = useRef<HTMLVideoElement>(null);
-    const { isPlaying, currentTime, volume, speed, play, pause, setVolume } = usePlaybackStore();
+    const { isPlaying, currentTime, volume, speed } = usePlaybackStore();
 
     // Calculate if we're within this clip's timeline range
     const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
     const isInClipRange = currentTime >= clipStartTime && currentTime < clipEndTime;
 
-    // Calculate the video's internal time based on timeline position
-    const videoTime = Math.max(trimStart, Math.min(
-        clipDuration - trimEnd,
-        currentTime - clipStartTime + trimStart
-    ));
-
+    // Sync playback events
     useEffect(() => {
         const video = videoRef.current;
-        if (!video) return;
+        if (!video || !isInClipRange) return;
 
-        const handleSeekEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
+        const handleSeek = (e: CustomEvent) => {
             const timelineTime = e.detail.time;
-            const newVideoTime = Math.max(trimStart, Math.min(
+            const videoTime = Math.max(trimStart, Math.min(
                 clipDuration - trimEnd,
                 timelineTime - clipStartTime + trimStart
             ));
-            video.currentTime = newVideoTime;
+            video.currentTime = videoTime;
         };
 
-        const handleUpdateEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
+        const handleUpdate = (e: CustomEvent) => {
             const timelineTime = e.detail.time;
-            const targetVideoTime = Math.max(trimStart, Math.min(
+            const targetTime = Math.max(trimStart, Math.min(
                 clipDuration - trimEnd,
                 timelineTime - clipStartTime + trimStart
             ));
 
-            // Only sync if there's a significant difference to avoid micro-adjustments
-            if (Math.abs(video.currentTime - targetVideoTime) > 0.5) {
-                video.currentTime = targetVideoTime;
+            if (Math.abs(video.currentTime - targetTime) > 0.5) {
+                video.currentTime = targetTime;
             }
         };
 
-        const handleSpeedEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
-            // Set playbackRate directly without any additional checks
+        const handleSpeed = (e: CustomEvent) => {
             video.playbackRate = e.detail.speed;
         };
 
-        window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-        window.addEventListener("playback-update", handleUpdateEvent as EventListener);
-        window.addEventListener("playback-speed", handleSpeedEvent as EventListener);
+        window.addEventListener("playback-seek", handleSeek as EventListener);
+        window.addEventListener("playback-update", handleUpdate as EventListener);
+        window.addEventListener("playback-speed", handleSpeed as EventListener);
 
         return () => {
-            window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
-            window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
-            window.removeEventListener("playback-speed", handleSpeedEvent as EventListener);
+            window.removeEventListener("playback-seek", handleSeek as EventListener);
+            window.removeEventListener("playback-update", handleUpdate as EventListener);
+            window.removeEventListener("playback-speed", handleSpeed as EventListener);
         };
     }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
 
-    // Sync video playback state - only play if in clip range
+    // Sync playback state
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
 
         if (isPlaying && isInClipRange) {
-            video.play().catch(console.error);
+            video.play().catch(() => { });
         } else {
             video.pause();
         }
     }, [isPlaying, isInClipRange]);
 
-    // Sync volume
+    // Sync volume and speed
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
-        video.volume = volume;
-    }, [volume]);
 
-    // Sync speed immediately when it changes
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
+        video.volume = volume;
         video.playbackRate = speed;
-    }, [speed]);
+    }, [volume, speed]);
 
     return (
-        <div className={`relative group ${className}`}>
-            <video
-                ref={videoRef}
-                src={src}
-                poster={poster}
-                className="w-full h-full object-cover"
-                playsInline
-                preload="auto"
-            />
-
-            <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
-
-            <div className="absolute bottom-2 left-2 right-2 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
-                    onClick={isPlaying ? pause : play}
-                >
-                    {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
-                </Button>
-
-                <div className="flex-1 h-1 bg-white/30 rounded-full overflow-hidden">
-                    <div
-                        className="h-full bg-white transition-all duration-100"
-                        style={{ width: `${(currentTime / usePlaybackStore.getState().duration) * 100}%` }}
-                    />
-                </div>
-
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
-                    onClick={() => setVolume(volume > 0 ? 0 : 1)}
-                >
-                    <Volume2 className="h-4 w-4" />
-                </Button>
-            </div>
-        </div>
+        <video
+            ref={videoRef}
+            src={src}
+            poster={poster}
+            className={`w-full h-full object-cover ${className}`}
+            playsInline
+            preload="auto"
+            controls={false}
+            disablePictureInPicture
+            disableRemotePlayback
+            style={{ pointerEvents: 'none' }}
+            onContextMenu={(e) => e.preventDefault()}
+        />
     );
 } 
\ No newline at end of file
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index ea2dacb9..7706417a 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -2,78 +2,40 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 interface PanelState {
-  // Horizontal panel sizes
+  // Panel sizes as percentages
   toolsPanel: number;
   previewPanel: number;
   propertiesPanel: number;
-
-  // Vertical panel sizes
   mainContent: number;
   timeline: number;
 
-  // Flag to prevent initial overwrites
-  isInitialized: boolean;
-
   // Actions
   setToolsPanel: (size: number) => void;
   setPreviewPanel: (size: number) => void;
   setPropertiesPanel: (size: number) => void;
   setMainContent: (size: number) => void;
   setTimeline: (size: number) => void;
-  setInitialized: () => void;
 }
 
 export const usePanelStore = create<PanelState>()(
   persist(
-    (set, get) => ({
-      // Default sizes
-      toolsPanel: 20,
-      previewPanel: 60,
+    (set) => ({
+      // Default sizes - optimized for responsiveness
+      toolsPanel: 25,
+      previewPanel: 75,
       propertiesPanel: 20,
-      mainContent: 50,
-      timeline: 50,
-      isInitialized: false,
+      mainContent: 70,
+      timeline: 30,
 
       // Actions
-      setToolsPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ toolsPanel: size });
-      },
-      setPreviewPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ previewPanel: size });
-      },
-      setPropertiesPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ propertiesPanel: size });
-      },
-      setMainContent: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ mainContent: size });
-      },
-      setTimeline: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ timeline: size });
-      },
-      setInitialized: () => {
-        console.log("Panel store initialized for resize events");
-        set({ isInitialized: true });
-      },
+      setToolsPanel: (size) => set({ toolsPanel: size }),
+      setPreviewPanel: (size) => set({ previewPanel: size }),
+      setPropertiesPanel: (size) => set({ propertiesPanel: size }),
+      setMainContent: (size) => set({ mainContent: size }),
+      setTimeline: (size) => set({ timeline: size }),
     }),
     {
       name: "panel-sizes",
-      partialize: (state) => ({
-        toolsPanel: state.toolsPanel,
-        previewPanel: state.previewPanel,
-        propertiesPanel: state.propertiesPanel,
-        mainContent: state.mainContent,
-        timeline: state.timeline,
-      }),
     }
   )
 );
-- 
cgit v1.3.1


From b9e1dcf23e29e0adb08119b92f91e81db23ebb26 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 24 Jun 2025 10:32:19 +0200
Subject: refactor: change button variant from 'ghost' to 'text' across
 multiple components for consistency

---
 apps/web/src/app/(auth)/login/page.tsx           |  2 +-
 apps/web/src/app/(auth)/signup/page.tsx          |  2 +-
 apps/web/src/components/auth-form.tsx            |  2 +-
 apps/web/src/components/editor/preview-panel.tsx |  2 +-
 apps/web/src/components/editor/timeline.tsx      | 18 +++++++++---------
 apps/web/src/components/header.tsx               |  2 +-
 apps/web/src/components/ui/button.tsx            |  2 +-
 apps/web/src/components/ui/calendar.tsx          |  2 +-
 apps/web/src/components/ui/input.tsx             |  2 +-
 apps/web/src/components/ui/pagination.tsx        |  2 +-
 apps/web/src/components/ui/sidebar.tsx           |  2 +-
 11 files changed, 19 insertions(+), 19 deletions(-)

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index 5f37ced9..9935e153 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -137,7 +137,7 @@ export default function LoginPage() {
   return (
     <div className="flex h-screen items-center justify-center relative">
       <Button
-        variant="ghost"
+        variant="text"
         onClick={() => router.back()}
         className="absolute top-6 left-6"
       >
diff --git a/apps/web/src/app/(auth)/signup/page.tsx b/apps/web/src/app/(auth)/signup/page.tsx
index d1feece2..b28e2226 100644
--- a/apps/web/src/app/(auth)/signup/page.tsx
+++ b/apps/web/src/app/(auth)/signup/page.tsx
@@ -159,7 +159,7 @@ export default function SignUpPage() {
   return (
     <div className="flex h-screen items-center justify-center relative">
       <Button
-        variant="ghost"
+        variant="text"
         onClick={() => router.back()}
         className="absolute top-6 left-6"
       >
diff --git a/apps/web/src/components/auth-form.tsx b/apps/web/src/components/auth-form.tsx
index 3dd56036..0c02496f 100644
--- a/apps/web/src/components/auth-form.tsx
+++ b/apps/web/src/components/auth-form.tsx
@@ -313,7 +313,7 @@ export function AuthForm({ mode }: AuthFormProps) {
   return (
     <div className="flex h-screen items-center justify-center relative">
       <Button
-        variant="ghost"
+        variant="text"
         onClick={() => router.back()}
         className="absolute top-6 left-6"
       >
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 5c27da53..624a549e 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -149,7 +149,7 @@ export function PreviewPanel() {
         {/* Debug Toggle - Only show in development */}
         {SHOW_DEBUG_INFO && (
           <Button
-            variant="ghost"
+            variant="text"
             size="sm"
             onClick={() => setShowDebug(!showDebug)}
             className="text-xs"
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ce81f9e3..9abb5221 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -498,7 +498,7 @@ export function Timeline() {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                variant="ghost"
+                variant="text"
                 size="icon"
                 onClick={toggle}
                 className="mr-2"
@@ -549,7 +549,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleSplitSelected}>
+              <Button variant="text" size="icon" onClick={handleSplitSelected}>
                 <Scissors className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -558,7 +558,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
+              <Button variant="text" size="icon">
                 <ArrowLeftToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -567,7 +567,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
+              <Button variant="text" size="icon">
                 <ArrowRightToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -576,7 +576,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
+              <Button variant="text" size="icon">
                 <SplitSquareHorizontal className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -585,7 +585,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleDuplicateSelected}>
+              <Button variant="text" size="icon" onClick={handleDuplicateSelected}>
                 <Copy className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -594,7 +594,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleFreezeSelected}>
+              <Button variant="text" size="icon" onClick={handleFreezeSelected}>
                 <Snowflake className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -603,7 +603,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleDeleteSelected}>
+              <Button variant="text" size="icon" onClick={handleDeleteSelected}>
                 <Trash2 className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -1625,7 +1625,7 @@ function TimelineTrackContent({
                     {/* Clip options menu */}
                     <div className="absolute top-1 right-1 z-10">
                       <Button
-                        variant="ghost"
+                        variant="text"
                         size="icon"
                         className="opacity-0 group-hover:opacity-100 transition-opacity"
                         onClick={() => setClipMenuOpen(clip.id)}
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index 9f842b24..4b12b6e1 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -38,7 +38,7 @@ export function Header() {
     <nav className="flex items-center">
       <Link href="https://github.com/OpenCut-app/OpenCut" target="_blank">
         <Button
-          variant="ghost"
+          variant="text"
           className="flex items-center text-sm text-muted-foreground hover:text-foreground"
         >
           <span className="hidden sm:inline">GitHub</span>
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index f5863e20..d4406d5b 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -17,7 +17,7 @@ const buttonVariants = cva(
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        text: "bg-transparent p-0 rounded-none hover:text-muted-foreground", // Instead of ghost (matches app better)
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/web/src/components/ui/calendar.tsx b/apps/web/src/components/ui/calendar.tsx
index 2dca9b14..192643cb 100644
--- a/apps/web/src/components/ui/calendar.tsx
+++ b/apps/web/src/components/ui/calendar.tsx
@@ -43,7 +43,7 @@ function Calendar({
             : "[&:has([aria-selected])]:rounded-md"
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
+          buttonVariants({ variant: "text" }),
           "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
         ),
         day_range_start: "day-range-start",
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 42f4c452..72314045 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -41,7 +41,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {showPasswordToggle && (
           <Button
             type="button"
-            variant="ghost"
+            variant="text"
             size="icon"
             onClick={() => onShowPasswordChange?.(!showPassword)}
             className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx
index 79fd268e..61766cec 100644
--- a/apps/web/src/components/ui/pagination.tsx
+++ b/apps/web/src/components/ui/pagination.tsx
@@ -49,7 +49,7 @@ const PaginationLink = ({
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+        variant: isActive ? "outline" : "text",
         size,
       }),
       className
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index e69d8751..c1583503 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -269,7 +269,7 @@ const SidebarTrigger = React.forwardRef<
     <Button
       ref={ref}
       data-sidebar="trigger"
-      variant="ghost"
+      variant="text"
       size="icon"
       className={cn("h-8 w-8", className)}
       onClick={(event) => {
-- 
cgit v1.3.1