From 0b50b0b43245082ffc1a92cda2af08f90d136adf Mon Sep 17 00:00:00 2001
From: Song367 <601337784@qq.com>
Date: Sat, 21 Mar 2026 14:25:50 +0800
Subject: [PATCH] feat: embed subtitle defaults in upload card

---
 src/components/UploadScreen.test.tsx |  18 ++-
 src/components/UploadScreen.tsx      | 195 ++++++++++++++-------------
 2 files changed, 116 insertions(+), 97 deletions(-)

diff --git a/src/components/UploadScreen.test.tsx b/src/components/UploadScreen.test.tsx
index 614ba2e..dfdfd63 100644
--- a/src/components/UploadScreen.test.tsx
+++ b/src/components/UploadScreen.test.tsx
@@ -73,7 +73,15 @@ describe('UploadScreen', () => {
     expect(screen.getByTestId('upload-dropzone-card')).toBeInTheDocument();
     expect(screen.getByTestId('mode-card')).toBeInTheDocument();
     expect(screen.getByTestId('language-card')).toBeInTheDocument();
-    expect(screen.getByTestId('subtitle-defaults-card')).toBeInTheDocument();
+  });
+
+  it('renders subtitle defaults inside the upload card footer area', () => {
+    renderUploadScreen();
+
+    expect(screen.getByTestId('upload-dropzone-card')).toContainElement(
+      screen.getByTestId('upload-subtitle-defaults-panel'),
+    );
+    expect(screen.queryByTestId('subtitle-defaults-card')).not.toBeInTheDocument();
   });
 
   it('shows all supported tts languages in a compact always-visible grid', () => {
@@ -100,6 +108,14 @@ describe('UploadScreen', () => {
     expect(screen.getByRole('button', { name: 'Generate Translated Video' })).toBeInTheDocument();
   });
 
+  it('keeps subtitle preview controls active after moving them into the upload card', () => {
+    renderUploadScreen();
+
+    expect(screen.getByTestId('upload-subtitle-defaults-panel')).toContainElement(
+      screen.getByTestId('upload-subtitle-preview'),
+    );
+  });
+
   it('shows a fixed English subtitle language and the supported TTS languages', () => {
     renderUploadScreen();
 
diff --git a/src/components/UploadScreen.tsx b/src/components/UploadScreen.tsx
index 116a9dd..814e367 100644
--- a/src/components/UploadScreen.tsx
+++ b/src/components/UploadScreen.tsx
@@ -64,7 +64,7 @@ export default function UploadScreen({
     >
       <section
         data-testid="upload-dropzone-card"
-        className="app-surface min-w-0 rounded-[28px] border border-white/70 px-4 py-4 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.35)] sm:px-5 sm:py-5 lg:px-6 lg:py-5 xl:row-span-2"
+        className="app-surface min-w-0 rounded-[28px] border border-white/70 px-4 py-4 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.35)] sm:px-5 sm:py-5 lg:px-6 lg:py-5"
       >
         <div className="mb-4 flex flex-col gap-3">
           <div className="min-w-0 space-y-2">
@@ -105,10 +105,104 @@ export default function UploadScreen({
           </div>
         </div>
 
-        <div className="mt-4 flex flex-col gap-2 text-sm text-slate-500 md:flex-row md:items-center md:justify-between">
-          <p>{m.upload.supportedFormats}</p>
-          <div className="inline-flex items-center rounded-full border border-slate-200 bg-white/80 px-3 py-1.5 font-medium text-slate-700">
-            {activeModeLabel}
+        <div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,1fr)_220px] xl:items-end">
+          <section
+            data-testid="upload-subtitle-defaults-panel"
+            className="rounded-[22px] border border-slate-200 bg-white/82 p-3 shadow-sm shadow-slate-200/70"
+          >
+            <div className="mb-3 flex items-start justify-between gap-4">
+              <div>
+                <h3 className="text-sm font-semibold text-slate-950">{m.upload.subtitleDefaults}</h3>
+                <p className="mt-1 text-xs leading-5 text-slate-600">{m.upload.subtitleDefaultsDesc}</p>
+              </div>
+              <button
+                type="button"
+                className="text-xs font-medium text-sky-700 transition-colors hover:text-sky-800"
+                onClick={() => setSubtitleDefaults(DEFAULT_SUBTITLE_DEFAULTS)}
+              >
+                {m.upload.reset}
+              </button>
+            </div>
+
+            <div className="mb-3 rounded-[18px] border border-slate-200 bg-slate-950/95 p-2.5">
+              <div className="relative h-24 overflow-hidden rounded-[14px] bg-[radial-gradient(circle_at_top,_rgba(148,163,184,0.35),_transparent_40%),linear-gradient(180deg,_#1e293b_0%,_#0f172a_100%)]">
+                <div className="absolute inset-0 bg-[linear-gradient(90deg,transparent_0%,rgba(255,255,255,0.04)_50%,transparent_100%)]" />
+                <p
+                  data-testid="upload-subtitle-preview"
+                  className="absolute left-1/2 max-w-[88%] -translate-x-1/2 whitespace-pre-wrap px-3 py-1 text-center font-semibold text-white"
+                  style={{
+                    bottom: `${subtitleDefaults.bottomOffsetPercent}%`,
+                    fontSize: `${subtitleDefaults.fontSize}px`,
+                    textShadow: '2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000',
+                  }}
+                >
+                  {m.upload.subtitlePreview}
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <label htmlFor="subtitle-position" className="text-sm font-medium text-slate-700">
+                    {m.upload.subtitleInitialPosition}
+                  </label>
+                  <span className="text-xs text-slate-500">
+                    {format(m.upload.fromBottom, { value: subtitleDefaults.bottomOffsetPercent })}
+                  </span>
+                </div>
+                <input
+                  id="subtitle-position"
+                  aria-label="Subtitle initial position"
+                  type="range"
+                  min="4"
+                  max="30"
+                  step="1"
+                  value={subtitleDefaults.bottomOffsetPercent}
+                  onChange={(e) =>
+                    setSubtitleDefaults((previous) => ({
+                      ...previous,
+                      bottomOffsetPercent: Number(e.target.value),
+                    }))
+                  }
+                  className="w-full accent-sky-500"
+                />
+              </div>
+
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <label htmlFor="subtitle-size" className="text-sm font-medium text-slate-700">
+                    {m.upload.subtitleInitialSize}
+                  </label>
+                  <span className="text-xs text-slate-500">
+                    {format(m.upload.pxValue, { value: subtitleDefaults.fontSize })}
+                  </span>
+                </div>
+                <input
+                  id="subtitle-size"
+                  aria-label="Subtitle initial size"
+                  type="range"
+                  min="16"
+                  max="40"
+                  step="1"
+                  value={subtitleDefaults.fontSize}
+                  onChange={(e) =>
+                    setSubtitleDefaults((previous) => ({
+                      ...previous,
+                      fontSize: Number(e.target.value),
+                    }))
+                  }
+                  className="w-full accent-sky-500"
+                />
+              </div>
+            </div>
+          </section>
+
+          <div className="flex flex-col gap-2 text-sm text-slate-500 xl:items-end xl:text-right">
+            <p>{m.upload.supportedFormats}</p>
+            <div className="inline-flex items-center rounded-full border border-slate-200 bg-white/80 px-3 py-1.5 font-medium text-slate-700">
+              {activeModeLabel}
+            </div>
           </div>
         </div>
       </section>
@@ -230,97 +324,6 @@ export default function UploadScreen({
           </button>
         </section>
 
-        <section
-          data-testid="subtitle-defaults-card"
-          className={`${settingsCardClass} xl:col-start-2 xl:col-span-2 xl:row-start-2`}
-        >
-          <div className="mb-3 flex items-start justify-between gap-4">
-            <div>
-              <h2 className="text-base font-semibold text-slate-950">{m.upload.subtitleDefaults}</h2>
-              <p className="mt-1 text-sm leading-5 text-slate-600">{m.upload.subtitleDefaultsDesc}</p>
-            </div>
-            <button
-              type="button"
-              className="text-sm font-medium text-sky-700 transition-colors hover:text-sky-800"
-              onClick={() => setSubtitleDefaults(DEFAULT_SUBTITLE_DEFAULTS)}
-            >
-              {m.upload.reset}
-            </button>
-          </div>
-
-          <div className="mb-4 rounded-[22px] border border-slate-200 bg-slate-950/95 p-2.5">
-            <div className="relative h-28 overflow-hidden rounded-[16px] bg-[radial-gradient(circle_at_top,_rgba(148,163,184,0.35),_transparent_40%),linear-gradient(180deg,_#1e293b_0%,_#0f172a_100%)] sm:h-30">
-              <div className="absolute inset-0 bg-[linear-gradient(90deg,transparent_0%,rgba(255,255,255,0.04)_50%,transparent_100%)]" />
-              <p
-                data-testid="upload-subtitle-preview"
-                className="absolute left-1/2 max-w-[88%] -translate-x-1/2 whitespace-pre-wrap px-3 py-1 text-center font-semibold text-white"
-                style={{
-                  bottom: `${subtitleDefaults.bottomOffsetPercent}%`,
-                  fontSize: `${subtitleDefaults.fontSize}px`,
-                  textShadow: '2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000',
-                }}
-              >
-                {m.upload.subtitlePreview}
-              </p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div>
-              <div className="mb-2 flex items-center justify-between">
-                <label htmlFor="subtitle-position" className="text-sm font-medium text-slate-700">
-                  {m.upload.subtitleInitialPosition}
-                </label>
-                <span className="text-xs text-slate-500">
-                  {format(m.upload.fromBottom, { value: subtitleDefaults.bottomOffsetPercent })}
-                </span>
-              </div>
-              <input
-                id="subtitle-position"
-                aria-label="Subtitle initial position"
-                type="range"
-                min="4"
-                max="30"
-                step="1"
-                value={subtitleDefaults.bottomOffsetPercent}
-                onChange={(e) =>
-                  setSubtitleDefaults((previous) => ({
-                    ...previous,
-                    bottomOffsetPercent: Number(e.target.value),
-                  }))
-                }
-                className="w-full accent-sky-500"
-              />
-            </div>
-
-            <div>
-              <div className="mb-2 flex items-center justify-between">
-                <label htmlFor="subtitle-size" className="text-sm font-medium text-slate-700">
-                  {m.upload.subtitleInitialSize}
-                </label>
-                <span className="text-xs text-slate-500">
-                  {format(m.upload.pxValue, { value: subtitleDefaults.fontSize })}
-                </span>
-              </div>
-              <input
-                id="subtitle-size"
-                aria-label="Subtitle initial size"
-                type="range"
-                min="16"
-                max="40"
-                step="1"
-                value={subtitleDefaults.fontSize}
-                onChange={(e) =>
-                  setSubtitleDefaults((previous) => ({
-                    ...previous,
-                    fontSize: Number(e.target.value),
-                  }))
-                }
-                className="w-full accent-sky-500"
-              />
-            </div>
-          </div>
-        </section>
       </div>
 
       {showTrimModal && tempFile && (