From acd42a29f6370417ef188d668c4567e9892a8ed1 Mon Sep 17 00:00:00 2001
From: Nizav <nizav.business@gmail.com>
Date: Mon, 14 Jul 2025 22:46:28 +0700
Subject: [PATCH] refactor: move the add button below the placeholder text

---
 .../editor/media-panel/views/media.tsx        | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

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 48e54961..8c5718b1 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -207,9 +207,8 @@ export function MediaView() {
         <DragOverlay isVisible={isDragOver} />
 
         <div className="p-3 pb-2">
-          {/* Button to add/upload media */}
+          {/* Search and filter controls (removed old Add button) */}
           <div className="flex gap-2">
-            {/* Search and filter controls */}
             <Select value={mediaFilter} onValueChange={setMediaFilter}>
               <SelectTrigger className="w-[80px] h-full text-xs">
                 <SelectValue />
@@ -228,29 +227,6 @@ export function MediaView() {
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
-
-            {/* Add media button */}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleFileSelect}
-              disabled={isProcessing}
-              className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
-            >
-              {isProcessing ? (
-                <>
-                  <Upload className="h-4 w-4 animate-spin" />
-                  <span className="hidden md:inline ml-2">{progress}%</span>
-                </>
-              ) : (
-                <>
-                  <Plus className="h-4 w-4" />
-                  <span className="hidden sm:inline ml-2" aria-label="Add file">
-                    Add
-                  </span>
-                </>
-              )}
-            </Button>
           </div>
         </div>
 
@@ -265,8 +241,29 @@ export function MediaView() {
                 No media in project
               </p>
               <p className="text-xs text-muted-foreground/70 mt-1">
-                Drag files here or use the button above
+                Drag files here or use the button below
               </p>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleFileSelect}
+                disabled={isProcessing}
+                className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center mt-2"
+              >
+                {isProcessing ? (
+                  <>
+                    <Upload className="h-4 w-4 animate-spin" />
+                    <span className="hidden md:inline ml-2">{progress}%</span>
+                  </>
+                ) : (
+                  <>
+                    <Plus className="h-4 w-4" />
+                    <span className="hidden sm:inline ml-2" aria-label="Add file">
+                      Add
+                    </span>
+                  </>
+                )}
+              </Button>
             </div>
           ) : (
             <div