From f76169ada15cff51dbf9ce3af148a78c46ed36c6 Mon Sep 17 00:00:00 2001
From: Simon Orzel <simonorzel@gmail.com>
Date: Wed, 16 Jul 2025 00:48:00 +0200
Subject: feat: refactors media drag overlay and media tab

---
 apps/web/src/components/ui/drag-overlay.tsx | 78 ++++++++++++++++++++++++++---
 1 file changed, 72 insertions(+), 6 deletions(-)

(limited to 'apps/web/src/components/ui/drag-overlay.tsx')

diff --git a/apps/web/src/components/ui/drag-overlay.tsx b/apps/web/src/components/ui/drag-overlay.tsx
index ba6fe08f..eb190e89 100644
--- a/apps/web/src/components/ui/drag-overlay.tsx
+++ b/apps/web/src/components/ui/drag-overlay.tsx
@@ -1,25 +1,91 @@
-import { Upload } from "lucide-react";
+import { Upload, Plus, Image } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface DragOverlayProps {
   isVisible: boolean;
   title?: string;
   description?: string;
+  isProcessing?: boolean;
+  progress?: number;
+  onClick?: () => void;
+  isEmptyState?: boolean;
 }
 
 export function DragOverlay({
   isVisible,
   title = "Drop files here",
   description = "Images, videos, and audio files",
+  isProcessing = false,
+  progress = 0,
+  onClick,
+  isEmptyState = false,
 }: DragOverlayProps) {
   if (!isVisible) return null;
 
+  const handleClick = (e: React.MouseEvent) => {
+    if (isProcessing || !onClick) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  };
+
   return (
-    <div className="absolute inset-0 bg-accent/20 backdrop-blur-lg border-2 border-dashed border-accent flex items-center justify-center z-10 pointer-events-none">
-      <div className="text-center">
-        <Upload className="h-8 w-8 text-accent mx-auto mb-2" />
-        <p className="text-sm font-medium text-accent">{title}</p>
-        <p className="text-xs text-muted-foreground">{description}</p>
+    <div
+      className="flex flex-col items-center justify-center h-full min-h-[300px] text-center cursor-pointer rounded-lg border-2 border-dashed border-primary/30 hover:border-primary/50 hover:bg-primary/5 transition-all duration-200 p-8 z-10 bg-background/50 backdrop-blur-sm"
+      onClick={handleClick}
+    >
+      <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary/10 to-primary/20 flex items-center justify-center mb-6 border border-primary/20">
+        {isProcessing ? (
+          <Upload className="h-10 w-10 text-primary animate-spin" />
+        ) : isEmptyState ? (
+          <Image className="h-10 w-10 text-primary" />
+        ) : (
+          <Upload className="h-10 w-10 text-primary" />
+        )}
+      </div>
+
+      <div className="space-y-2 mb-6">
+        <h3 className="text-lg font-medium text-foreground">
+          {isProcessing ? "Processing files..." : title}
+        </h3>
+        <p className="text-sm text-muted-foreground max-w-sm">
+          {isProcessing
+            ? `Processing your files (${progress}%)`
+            : description
+          }
+        </p>
       </div>
+
+      {!isProcessing && (
+        <div className="flex flex-col items-center gap-3">
+          <Button
+            variant="default"
+            size="lg"
+            onClick={handleClick}
+            className="gap-2 px-6"
+          >
+            <Plus className="h-5 w-5" />
+            {isEmptyState ? "Choose Files" : "Browse Files"}
+          </Button>
+          <p className="text-xs text-muted-foreground/60">
+            {isEmptyState
+              ? "Supports images, videos, and audio files"
+              : "Or drop your files here"
+            }
+          </p>
+        </div>
+      )}
+
+      {isProcessing && (
+        <div className="w-full max-w-xs">
+          <div className="w-full bg-muted/50 rounded-full h-2">
+            <div
+              className="bg-primary h-2 rounded-full transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
-- 
cgit v1.3.1


From a7e23ec714faabbeaa3b6a673e7e2d86825944bd Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 16 Jul 2025 12:22:09 +0200
Subject: media drag overlay cleanup

---
 .../components/editor/media-panel/drag-overlay.tsx | 57 ++++++++++++++
 .../components/editor/media-panel/views/media.tsx  | 20 +----
 apps/web/src/components/ui/drag-overlay.tsx        | 91 ----------------------
 3 files changed, 60 insertions(+), 108 deletions(-)
 create mode 100644 apps/web/src/components/editor/media-panel/drag-overlay.tsx
 delete mode 100644 apps/web/src/components/ui/drag-overlay.tsx

(limited to 'apps/web/src/components/ui/drag-overlay.tsx')

diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
new file mode 100644
index 00000000..3f3820db
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
@@ -0,0 +1,57 @@
+import { Upload, Plus, Image } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface MediaDragOverlayProps {
+  isVisible: boolean;
+  isProcessing?: boolean;
+  progress?: number;
+  onClick?: () => void;
+  isEmptyState?: boolean;
+}
+
+export function MediaDragOverlay({
+  isVisible,
+  isProcessing = false,
+  progress = 0,
+  onClick,
+  isEmptyState = false,
+}: MediaDragOverlayProps) {
+  if (!isVisible) return null;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isProcessing || !onClick) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  };
+
+  return (
+    <div
+      className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"
+      onClick={handleClick}
+    >
+      <div className="flex items-center justify-center">
+        <Upload className="h-10 w-10 text-foreground" />
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-xs text-muted-foreground max-w-sm">
+          {isProcessing
+            ? `Processing your files (${progress}%)`
+            : "Drag and drop videos, photos, and audio files here"}
+        </p>
+      </div>
+
+      {isProcessing && (
+        <div className="w-full max-w-xs">
+          <div className="w-full bg-muted/50 rounded-full h-2">
+            <div
+              className="bg-primary h-2 rounded-full transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index e532e540..631fe39a 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -7,7 +7,7 @@ import { Image, Loader2, Music, Plus, Video } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { DragOverlay } from "@/components/ui/drag-overlay";
+import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -242,23 +242,9 @@ export function MediaView() {
         </div>
 
         <div className="flex-1 overflow-y-auto p-3 pt-0">
-          {(isDragOver || filteredMediaItems.length === 0) ? (
-            <DragOverlay
+          {isDragOver || filteredMediaItems.length === 0 ? (
+            <MediaDragOverlay
               isVisible={true}
-              title={
-                isDragOver
-                  ? "Drop files here"
-                  : mediaItems.length === 0
-                    ? "No media in project"
-                    : "No media found"
-              }
-              description={
-                isDragOver
-                  ? "Release to add files"
-                  : mediaItems.length === 0
-                    ? "Drag and drop your images, videos, or audio files here to get started"
-                    : "No media matches your current search or filter. Try adjusting your filters or add new media."
-              }
               isProcessing={isProcessing}
               progress={progress}
               onClick={handleFileSelect}
diff --git a/apps/web/src/components/ui/drag-overlay.tsx b/apps/web/src/components/ui/drag-overlay.tsx
deleted file mode 100644
index eb190e89..00000000
--- a/apps/web/src/components/ui/drag-overlay.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Upload, Plus, Image } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-interface DragOverlayProps {
-  isVisible: boolean;
-  title?: string;
-  description?: string;
-  isProcessing?: boolean;
-  progress?: number;
-  onClick?: () => void;
-  isEmptyState?: boolean;
-}
-
-export function DragOverlay({
-  isVisible,
-  title = "Drop files here",
-  description = "Images, videos, and audio files",
-  isProcessing = false,
-  progress = 0,
-  onClick,
-  isEmptyState = false,
-}: DragOverlayProps) {
-  if (!isVisible) return null;
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isProcessing || !onClick) return;
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  };
-
-  return (
-    <div
-      className="flex flex-col items-center justify-center h-full min-h-[300px] text-center cursor-pointer rounded-lg border-2 border-dashed border-primary/30 hover:border-primary/50 hover:bg-primary/5 transition-all duration-200 p-8 z-10 bg-background/50 backdrop-blur-sm"
-      onClick={handleClick}
-    >
-      <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary/10 to-primary/20 flex items-center justify-center mb-6 border border-primary/20">
-        {isProcessing ? (
-          <Upload className="h-10 w-10 text-primary animate-spin" />
-        ) : isEmptyState ? (
-          <Image className="h-10 w-10 text-primary" />
-        ) : (
-          <Upload className="h-10 w-10 text-primary" />
-        )}
-      </div>
-
-      <div className="space-y-2 mb-6">
-        <h3 className="text-lg font-medium text-foreground">
-          {isProcessing ? "Processing files..." : title}
-        </h3>
-        <p className="text-sm text-muted-foreground max-w-sm">
-          {isProcessing
-            ? `Processing your files (${progress}%)`
-            : description
-          }
-        </p>
-      </div>
-
-      {!isProcessing && (
-        <div className="flex flex-col items-center gap-3">
-          <Button
-            variant="default"
-            size="lg"
-            onClick={handleClick}
-            className="gap-2 px-6"
-          >
-            <Plus className="h-5 w-5" />
-            {isEmptyState ? "Choose Files" : "Browse Files"}
-          </Button>
-          <p className="text-xs text-muted-foreground/60">
-            {isEmptyState
-              ? "Supports images, videos, and audio files"
-              : "Or drop your files here"
-            }
-          </p>
-        </div>
-      )}
-
-      {isProcessing && (
-        <div className="w-full max-w-xs">
-          <div className="w-full bg-muted/50 rounded-full h-2">
-            <div
-              className="bg-primary h-2 rounded-full transition-all duration-300"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-- 
cgit v1.3.1