From 60ebd858ef3c1ee01dc044428d9e2f392a96b635 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sun, 7 Dec 2025 13:54:42 +0100
Subject: [PATCH] Move upload progress bar below buttons in FileUpload
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve visual hierarchy by displaying the upload progress bar after the action buttons instead of before them.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/FileUpload.tsx | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 85e35d4..def5e6e 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -154,23 +154,6 @@ export function FileUpload({
         </div>
       )}
 
-      {isUploading && uploadProgress < 100 && (
-        <div className="mb-3">
-          <div className="flex justify-between items-center mb-1.5">
-            <span className="text-xs font-medium text-gray-600 dark:text-gray-400">Uploading</span>
-            <span className="text-xs font-bold text-orange-600 dark:text-orange-400">
-              {uploadProgress > 0 ? uploadProgress.toFixed(1) + '%' : 'Starting...'}
-            </span>
-          </div>
-          <div className="h-2.5 bg-gray-300 dark:bg-gray-600 rounded-full overflow-hidden shadow-inner relative">
-            <div
-              className="h-full bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 dark:from-orange-600 dark:via-orange-700 dark:to-orange-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite] rounded-full"
-              style={{ width: `${uploadProgress}%` }}
-            />
-          </div>
-        </div>
-      )}
-
       <div className="flex gap-2">
         <input
           type="file"
@@ -241,6 +224,23 @@ export function FileUpload({
           </button>
         )}
       </div>
+
+      {isUploading && uploadProgress < 100 && (
+        <div className="mt-3">
+          <div className="flex justify-between items-center mb-1.5">
+            <span className="text-xs font-medium text-gray-600 dark:text-gray-400">Uploading</span>
+            <span className="text-xs font-bold text-orange-600 dark:text-orange-400">
+              {uploadProgress > 0 ? uploadProgress.toFixed(1) + '%' : 'Starting...'}
+            </span>
+          </div>
+          <div className="h-2.5 bg-gray-300 dark:bg-gray-600 rounded-full overflow-hidden shadow-inner relative">
+            <div
+              className="h-full bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 dark:from-orange-600 dark:via-orange-700 dark:to-orange-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite] rounded-full"
+              style={{ width: `${uploadProgress}%` }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }