From 68da487f304018b6e8d06459def8fb45514ab7d4 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 1 Aug 2025 19:57:26 +0200
Subject: style: complete re-design of whole editor

---
 apps/web/src/components/editor/preview-panel.tsx | 157 +++--------------------
 1 file changed, 19 insertions(+), 138 deletions(-)

(limited to 'apps/web/src/components/editor/preview-panel.tsx')

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index c6f4e159..3a962025 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -5,24 +5,15 @@ import { TimelineElement, TimelineTrack } from "@/types/timeline";
 import { useMediaStore, type MediaItem } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useEditorStore } from "@/stores/editor-store";
-import { useAspectRatio } from "@/hooks/use-aspect-ratio";
 import { VideoPlayer } from "@/components/ui/video-player";
 import { AudioPlayer } from "@/components/ui/audio-player";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu";
 import { Play, Pause, Expand, SkipBack, SkipForward } from "lucide-react";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
 import { formatTimeCode } from "@/lib/time";
 import { EditableTimecode } from "@/components/ui/editable-timecode";
 import { FONT_CLASS_MAP } from "@/lib/font-config";
-import { BackgroundSettings } from "../background-settings";
 import { useProjectStore } from "@/stores/project-store";
 import { TextElementDragState } from "@/types/editor";
 
@@ -412,7 +403,7 @@ export function PreviewPanel() {
           >
             <div className="text-center">
               <div className="text-2xl mb-2">🎬</div>
-              <p className="text-xs text-white">{element.name}</p>
+              <p className="text-xs text-foreground">{element.name}</p>
             </div>
           </div>
         );
@@ -476,10 +467,10 @@ export function PreviewPanel() {
 
   return (
     <>
-      <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm">
+      <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm relative">
         <div
           ref={containerRef}
-          className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0"
+          className="flex-1 flex flex-col items-center justify-center min-h-0 min-w-0"
         >
           <div className="flex-1" />
           {hasAnyElements ? (
@@ -621,9 +612,9 @@ function FullscreenToolbar({
   return (
     <div
       data-toolbar
-      className="flex items-center gap-2 p-1 pt-2 w-full text-white"
+      className="flex items-center gap-2 p-1 pt-2 w-full text-foreground relative"
     >
-      <div className="flex items-center gap-1 text-[0.70rem] tabular-nums text-white/90">
+      <div className="flex items-center gap-1 text-[0.70rem] tabular-nums text-foreground/90">
         <EditableTimecode
           time={currentTime}
           duration={totalDuration}
@@ -631,7 +622,7 @@ function FullscreenToolbar({
           fps={activeProject?.fps || 30}
           onTimeChange={seek}
           disabled={!hasAnyElements}
-          className="text-white/90 hover:bg-white/10"
+          className="text-foreground/90 hover:bg-white/10"
         />
         <span className="opacity-50">/</span>
         <span>
@@ -649,7 +640,7 @@ function FullscreenToolbar({
           size="icon"
           onClick={skipBackward}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0 text-foreground"
           title="Skip backward 1s"
         >
           <SkipBack className="h-3 w-3" />
@@ -659,7 +650,7 @@ function FullscreenToolbar({
           size="icon"
           onClick={toggle}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0 text-foreground hover:text-foreground/80"
         >
           {isPlaying ? (
             <Pause className="h-3 w-3" />
@@ -672,7 +663,7 @@ function FullscreenToolbar({
           size="icon"
           onClick={skipForward}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0 text-foreground hover:text-foreground/80"
           title="Skip forward 1s"
         >
           <SkipForward className="h-3 w-3" />
@@ -682,7 +673,7 @@ function FullscreenToolbar({
       <div className="flex-1 flex items-center gap-2">
         <div
           className={cn(
-            "relative h-1 rounded-full cursor-pointer flex-1 bg-white/20",
+            "relative h-1 rounded-full cursor-pointer flex-1 bg-foreground/20",
             !hasAnyElements && "opacity-50 cursor-not-allowed"
           )}
           onClick={hasAnyElements ? handleTimelineClick : undefined}
@@ -691,13 +682,13 @@ function FullscreenToolbar({
         >
           <div
             className={cn(
-              "absolute top-0 left-0 h-full rounded-full bg-white",
+              "absolute top-0 left-0 h-full rounded-full bg-foreground",
               !isDragging && "duration-100"
             )}
             style={{ width: `${progress}%` }}
           />
           <div
-            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-xs bg-white border border-black/20"
+            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-xs bg-foreground border border-black/20"
             style={{ left: `${progress}%` }}
           />
         </div>
@@ -706,7 +697,7 @@ function FullscreenToolbar({
       <Button
         variant="text"
         size="icon"
-        className="size-4! text-white/80 hover:text-white"
+        className="size-4! text-foreground/80 hover:text-foreground"
         onClick={onToggleExpanded}
         title="Exit fullscreen (Esc)"
       >
@@ -776,7 +767,7 @@ function FullscreenPreview({
             )}
         </div>
       </div>
-      <div className="p-4 bg-black">
+      <div className="p-4 bg-background">
         <FullscreenToolbar
           hasAnyElements={hasAnyElements}
           onToggleExpanded={toggleExpanded}
@@ -807,37 +798,7 @@ function PreviewToolbar({
   toggle: () => void;
   getTotalDuration: () => number;
 }) {
-  const { isPlaying, seek } = usePlaybackStore();
-  const { setCanvasSize, setCanvasSizeToOriginal } = useEditorStore();
-  const { activeProject } = useProjectStore();
-  const {
-    currentPreset,
-    isOriginal,
-    getOriginalAspectRatio,
-    getDisplayName,
-    canvasPresets,
-  } = useAspectRatio();
-
-  const handlePresetSelect = (preset: { width: number; height: number }) => {
-    setCanvasSize({ width: preset.width, height: preset.height });
-  };
-
-  const handleOriginalSelect = () => {
-    const aspectRatio = getOriginalAspectRatio();
-    setCanvasSizeToOriginal(aspectRatio);
-  };
-
-  const totalDuration = getTotalDuration();
-
-  const skipBackward = () => {
-    const newTime = Math.max(0, currentTime - 1);
-    setCurrentTime(newTime);
-  };
-
-  const skipForward = () => {
-    const newTime = Math.min(totalDuration, currentTime + 1);
-    setCurrentTime(newTime);
-  };
+  const { isPlaying } = usePlaybackStore();
 
   if (isExpanded) {
     return (
@@ -857,50 +818,15 @@ function PreviewToolbar({
   return (
     <div
       data-toolbar
-      className="flex items-end justify-between gap-2 p-1 pt-2 w-full"
+      className="flex justify-between gap-2 px-1.5 pr-4 py-1.5 border border-border/50 w-auto absolute bottom-4 right-4 bg-black/20 rounded-full backdrop-blur-l text-white"
     >
-      <div>
-        <p
-          className={cn(
-            "text-[0.75rem] text-muted-foreground flex items-center gap-1 w-[10rem]",
-            !hasAnyElements && "opacity-50"
-          )}
-        >
-          <EditableTimecode
-            time={currentTime}
-            duration={getTotalDuration()}
-            format="HH:MM:SS:FF"
-            fps={activeProject?.fps || 30}
-            onTimeChange={seek}
-            disabled={!hasAnyElements}
-          />
-          <span className="opacity-50">/</span>
-          <span className="tabular-nums">
-            {formatTimeCode(
-              getTotalDuration(),
-              "HH:MM:SS:FF",
-              activeProject?.fps || 30
-            )}
-          </span>
-        </p>
-      </div>
-      <div className="flex items-center gap-1">
-        <Button
-          variant="text"
-          size="icon"
-          onClick={skipBackward}
-          disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
-          title="Skip backward 1s"
-        >
-          <SkipBack className="h-3 w-3" />
-        </Button>
+      <div className="flex items-center gap-2">
         <Button
           variant="text"
           size="icon"
           onClick={toggle}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0"
         >
           {isPlaying ? (
             <Pause className="h-3 w-3" />
@@ -911,52 +837,7 @@ function PreviewToolbar({
         <Button
           variant="text"
           size="icon"
-          onClick={skipForward}
-          disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
-          title="Skip forward 1s"
-        >
-          <SkipForward className="h-3 w-3" />
-        </Button>
-      </div>
-      <div className="flex items-center gap-3">
-        <BackgroundSettings />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="sm"
-              className="bg-panel-accent! text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
-              disabled={!hasAnyElements}
-            >
-              {getDisplayName()}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              onClick={handleOriginalSelect}
-              className={cn("text-xs", isOriginal && "font-semibold")}
-            >
-              Original
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            {canvasPresets.map((preset) => (
-              <DropdownMenuItem
-                key={preset.name}
-                onClick={() => handlePresetSelect(preset)}
-                className={cn(
-                  "text-xs",
-                  currentPreset?.name === preset.name && "font-semibold"
-                )}
-              >
-                {preset.name}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <Button
-          variant="text"
-          size="icon"
-          className="size-4! text-muted-foreground"
+          className="size-4!"
           onClick={onToggleExpanded}
           title="Enter fullscreen"
         >
-- 
cgit v1.3.1