window consistency across mac and win

src/components/video-editor/SettingsPanel.tsx

@@ -159,6 +159,9 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
           <Crop className="w-4 h-4" />
           Crop Video
         </Button>
+        <p className="text-[10px] text-slate-400/60 text-center mt-2">
+          If the preview looks weirdly positioned at any time, try force reloading
+        </p>
       </div>
       
       {showCropDropdown && cropRegion && onCropChange && (

src/components/video-editor/VideoEditor.tsx

@@ -9,6 +9,7 @@ import PlaybackControls from "./PlaybackControls";
 import TimelineEditor from "./timeline/TimelineEditor";
 import { SettingsPanel } from "./SettingsPanel";
 import { ExportDialog } from "./ExportDialog";
+import { WindowControls } from "./WindowControls";
 import type { Span } from "dnd-timeline";
 import {
   DEFAULT_ZOOM_DEPTH,
@@ -267,19 +268,32 @@ export default function VideoEditor() {
     );
   }
 
+  const isMac = navigator.userAgent.includes('Mac');
+
   return (
-    <div className="flex h-screen bg-background bg-black p-8 gap-8">
-      <Toaster position="top-center" />
-      <ExportDialog
-        isOpen={showExportDialog}
-        onClose={() => setShowExportDialog(false)}
-        progress={exportProgress}
-        isExporting={isExporting}
-        error={exportError}
-        onCancel={handleCancelExport}
-      />
-      <div className="flex flex-col flex-[7] min-w-0 gap-6">
-        <div className="flex flex-col gap-3 flex-1">
+    <div className="flex flex-col h-screen bg-background bg-black">
+      {/* Drag region for window - more padding on macOS for traffic lights */}
+      <div 
+        className={`h-8 flex-shrink-0 bg-black/50 backdrop-blur-sm flex items-center justify-between ${isMac ? 'pl-20 pr-4' : 'px-4'}`}
+        style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+      >
+        <div className="flex-1" />
+        <WindowControls />
+      </div>
+      <div className="flex flex-1 p-4 gap-4 overflow-hidden">
+        <div style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
+          <Toaster position="top-center" />
+        </div>
+        <ExportDialog
+          isOpen={showExportDialog}
+          onClose={() => setShowExportDialog(false)}
+          progress={exportProgress}
+          isExporting={isExporting}
+          error={exportError}
+          onCancel={handleCancelExport}
+        />
+      <div className="flex flex-col flex-[7] min-w-0 gap-4">
+        <div className="flex flex-col gap-2 flex-1">
           {videoPath && (
             <>
               <div className="flex justify-center w-full">
@@ -339,6 +353,7 @@ export default function VideoEditor() {
         videoElement={videoPlaybackRef.current?.video || null}
         onExport={handleExport}
       />
+      </div>
     </div>
   );
 }

src/components/video-editor/VideoPlayback.tsx

@@ -728,21 +728,24 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
             : 'none',
         }}
       />
-      <div
-        ref={overlayRef}
-        className="absolute inset-0 select-none"
-        style={{ pointerEvents: 'none' }}
-        onPointerDown={handleOverlayPointerDown}
-        onPointerMove={handleOverlayPointerMove}
-        onPointerUp={handleOverlayPointerUp}
-        onPointerLeave={handleOverlayPointerLeave}
-      >
+      {/* Only render overlay after PIXI and video are fully initialized */}
+      {pixiReady && videoReady && (
         <div
-          ref={focusIndicatorRef}
-          className="absolute rounded-md border border-sky-400/80 bg-sky-400/20 shadow-[0_0_0_1px_rgba(56,189,248,0.35)]"
-          style={{ display: 'none', pointerEvents: 'none' }}
-        />
-      </div>
+          ref={overlayRef}
+          className="absolute inset-0 select-none"
+          style={{ pointerEvents: 'none' }}
+          onPointerDown={handleOverlayPointerDown}
+          onPointerMove={handleOverlayPointerMove}
+          onPointerUp={handleOverlayPointerUp}
+          onPointerLeave={handleOverlayPointerLeave}
+        >
+          <div
+            ref={focusIndicatorRef}
+            className="absolute rounded-md border border-sky-400/80 bg-sky-400/20 shadow-[0_0_0_1px_rgba(56,189,248,0.35)]"
+            style={{ display: 'none', pointerEvents: 'none' }}
+          />
+        </div>
+      )}
       <video
         ref={videoRef}
         src={videoPath}

src/components/video-editor/WindowControls.tsx

@@ -0,0 +1,57 @@
+export function WindowControls() {
+  // Only show custom controls on Windows
+  const isWindows = navigator.userAgent.includes('Windows');
+  
+  if (!isWindows) {
+    return null;
+  }
+
+  const handleMinimize = () => {
+    window.electronAPI?.minimizeWindow?.();
+  };
+
+  const handleMaximize = () => {
+    window.electronAPI?.maximizeWindow?.();
+  };
+
+  const handleClose = () => {
+    window.electronAPI?.closeWindow?.();
+  };
+
+  return (
+    <div className="flex items-center" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
+      {/* Minimize - Horizontal Line */}
+      <button
+        onClick={handleMinimize}
+        className="w-12 h-8 flex items-center justify-center hover:bg-white/10 transition-colors group"
+        aria-label="Minimize"
+      >
+        <svg width="12" height="1" viewBox="0 0 12 1" className="text-gray-400 group-hover:text-white transition-colors">
+          <rect width="12" height="1" fill="currentColor" />
+        </svg>
+      </button>
+      
+      {/* Maximize - Square */}
+      <button
+        onClick={handleMaximize}
+        className="w-12 h-8 flex items-center justify-center hover:bg-white/10 transition-colors group"
+        aria-label="Maximize"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" className="text-gray-400 group-hover:text-white transition-colors">
+          <rect x="0" y="0" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="1" />
+        </svg>
+      </button>
+      
+      {/* Close - X */}
+      <button
+        onClick={handleClose}
+        className="w-12 h-8 flex items-center justify-center hover:bg-[#e81123] transition-colors group"
+        aria-label="Close"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" className="text-gray-400 group-hover:text-white transition-colors">
+          <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="currentColor" strokeWidth="1" />
+        </svg>
+      </button>
+    </div>
+  );
+}