From eac9f65925e4adb048c58f5be1cfec3c8f11d051 Mon Sep 17 00:00:00 2001
From: Song367 <601337784@qq.com>
Date: Sat, 21 Mar 2026 14:46:55 +0800
Subject: [PATCH] feat: swap upload card panel order

---
 src/components/UploadScreen.test.tsx | 14 +++++++
 src/components/UploadScreen.tsx      | 59 +++++++++++++++-------------
 2 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/components/UploadScreen.test.tsx b/src/components/UploadScreen.test.tsx
index dfdfd63..a89451e 100644
--- a/src/components/UploadScreen.test.tsx
+++ b/src/components/UploadScreen.test.tsx
@@ -84,6 +84,20 @@ describe('UploadScreen', () => {
     expect(screen.queryByTestId('subtitle-defaults-card')).not.toBeInTheDocument();
   });
 
+  it('renders subtitle defaults before the upload surface inside the upload card', () => {
+    renderUploadScreen();
+
+    const uploadCard = screen.getByTestId('upload-dropzone-card');
+    const subtitlePanel = screen.getByTestId('upload-subtitle-defaults-panel');
+    const uploadSurface = screen.getByTestId('upload-dropzone-surface');
+
+    expect(uploadCard).toContainElement(subtitlePanel);
+    expect(uploadCard).toContainElement(uploadSurface);
+    expect(
+      subtitlePanel.compareDocumentPosition(uploadSurface) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
   it('shows all supported tts languages in a compact always-visible grid', () => {
     renderUploadScreen();
 
diff --git a/src/components/UploadScreen.tsx b/src/components/UploadScreen.tsx
index 814e367..b91a4e3 100644
--- a/src/components/UploadScreen.tsx
+++ b/src/components/UploadScreen.tsx
@@ -77,34 +77,6 @@ export default function UploadScreen({
           </div>
         </div>
 
-        <div className="relative overflow-hidden rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.88)_100%)] p-2.5 sm:p-3">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_38%)]" />
-          <div className="relative flex min-h-[250px] flex-col items-center justify-center rounded-[20px] border-2 border-dashed border-slate-300 bg-white/70 px-5 py-8 text-center sm:min-h-[280px] lg:min-h-[320px]">
-            <input
-              ref={fileInputRef}
-              type="file"
-              aria-label="Upload video file"
-              className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
-              accept="video/mp4,video/quicktime,video/webm"
-              onChange={handleFileChange}
-            />
-
-            <div className="pointer-events-none relative z-0 flex max-w-xl flex-col items-center">
-              <div className="mb-4 rounded-full bg-slate-900 p-4 text-white shadow-lg shadow-slate-300/70">
-                <Upload className="h-8 w-8 sm:h-10 sm:w-10" />
-              </div>
-              <h3 className="text-lg font-semibold text-slate-900 sm:text-xl">{m.upload.uploadVideo}</h3>
-              <p className="mt-2 max-w-md text-sm leading-5 text-slate-600">
-                {m.upload.clickToUpload}
-              </p>
-              <button className="mt-5 flex w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-[#16a34a] px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-200 transition-colors pointer-events-none">
-                <Upload className="h-5 w-5" />
-                {m.upload.uploadVideo}
-              </button>
-            </div>
-          </div>
-        </div>
-
         <div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,1fr)_220px] xl:items-end">
           <section
             data-testid="upload-subtitle-defaults-panel"
@@ -205,6 +177,37 @@ export default function UploadScreen({
             </div>
           </div>
         </div>
+
+        <div
+          data-testid="upload-dropzone-surface"
+          className="relative mt-4 overflow-hidden rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.88)_100%)] p-2.5 sm:p-3"
+        >
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_38%)]" />
+          <div className="relative flex min-h-[230px] flex-col items-center justify-center rounded-[20px] border-2 border-dashed border-slate-300 bg-white/70 px-5 py-8 text-center sm:min-h-[250px] lg:min-h-[280px]">
+            <input
+              ref={fileInputRef}
+              type="file"
+              aria-label="Upload video file"
+              className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
+              accept="video/mp4,video/quicktime,video/webm"
+              onChange={handleFileChange}
+            />
+
+            <div className="pointer-events-none relative z-0 flex max-w-xl flex-col items-center">
+              <div className="mb-4 rounded-full bg-slate-900 p-4 text-white shadow-lg shadow-slate-300/70">
+                <Upload className="h-8 w-8 sm:h-10 sm:w-10" />
+              </div>
+              <h3 className="text-lg font-semibold text-slate-900 sm:text-xl">{m.upload.uploadVideo}</h3>
+              <p className="mt-2 max-w-md text-sm leading-5 text-slate-600">
+                {m.upload.clickToUpload}
+              </p>
+              <button className="mt-5 flex w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-[#16a34a] px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-200 transition-colors pointer-events-none">
+                <Upload className="h-5 w-5" />
+                {m.upload.uploadVideo}
+              </button>
+            </div>
+          </div>
+        </div>
       </section>
 
       <div