From 28e9e3bcf824fb27c268aaa3f86eac7c68b0c3c3 Mon Sep 17 00:00:00 2001
From: Youwes09 <yuvi.shen@outlook.com>
Date: Tue, 24 Feb 2026 22:02:53 -0600
Subject: [PATCH] [V1] Redid Series Detail Download Layout

---
 src-tauri/Cargo.lock                         |  2 +-
 src/components/pages/SeriesDetail.module.css | 40 +++++++++++++++++---
 src/components/pages/SeriesDetail.tsx        | 15 +++++---
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index b1dd3d0..db71532 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1797,7 +1797,7 @@ dependencies = [
 
 [[package]]
 name = "moku"
-version = "0.2.0"
+version = "0.3.0"
 dependencies = [
  "dirs 5.0.1",
  "nix",
diff --git a/src/components/pages/SeriesDetail.module.css b/src/components/pages/SeriesDetail.module.css
index 4ebc1dd..e56639a 100644
--- a/src/components/pages/SeriesDetail.module.css
+++ b/src/components/pages/SeriesDetail.module.css
@@ -973,7 +973,7 @@
 }
 /* ── Download dropdown extended: Next-N quick buttons + range picker ─────── */
 .dlSectionLabel {
-  padding: 6px var(--sp-3) 2px;
+  padding: 6px var(--sp-3) 4px;
   font-family: var(--font-ui);
   font-size: var(--text-2xs);
   color: var(--text-faint);
@@ -987,13 +987,14 @@
   padding: 2px var(--sp-2) var(--sp-2);
 }
 
+/* Clean pill-style buttons — label + count inline, no column stacking */
 .dlNextBtn {
   flex: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 6px 4px;
+  justify-content: center;
+  gap: 5px;
+  padding: 5px 6px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-dim);
   background: var(--bg-overlay);
@@ -1003,17 +1004,25 @@
   letter-spacing: var(--tracking-wide);
   cursor: pointer;
   transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+  white-space: nowrap;
 }
 .dlNextBtn:hover:not(:disabled) {
   background: var(--accent-muted);
   border-color: var(--accent-dim);
   color: var(--accent-fg);
 }
+.dlNextBtn:hover:not(:disabled) .dlNextSub {
+  color: var(--accent-fg);
+  opacity: 0.7;
+}
 .dlNextBtn:disabled { opacity: 0.3; cursor: default; }
 
+/* The "(n new)" count badge — sits inline as a dimmed suffix */
 .dlNextSub {
   font-size: var(--text-2xs);
   color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+  transition: color var(--t-fast), opacity var(--t-fast);
 }
 
 .dlDivider {
@@ -1022,13 +1031,34 @@
   margin: var(--sp-1) var(--sp-2);
 }
 
+/* Range row: swaps in at the same height as dlItem — no layout shift */
 .dlRangeRow {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 2px var(--sp-2) var(--sp-2);
+  padding: 7px var(--sp-2) 7px var(--sp-2);
+  border-radius: var(--radius-md);
+  min-height: 0;
 }
 
+.dlRangeBack {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-dim);
+  background: none;
+  color: var(--text-faint);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
+}
+.dlRangeBack:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-overlay); }
+
 .dlRangeInput {
   flex: 1;
   min-width: 0;
diff --git a/src/components/pages/SeriesDetail.tsx b/src/components/pages/SeriesDetail.tsx
index 9cbf2dc..feebbc2 100644
--- a/src/components/pages/SeriesDetail.tsx
+++ b/src/components/pages/SeriesDetail.tsx
@@ -131,18 +131,21 @@ function DownloadDropdown({
         </>
       )}
 
-      <button className={s.dlItem} onClick={() => setShowRange((p) => !p)}>
-        <span>Custom range…</span>
-        <span className={s.dlItemSub}>Enter chapter numbers</span>
-      </button>
-      {showRange && (
+      {!showRange ? (
+        <button className={s.dlItem} onClick={() => setShowRange(true)}>
+          <span>Custom range…</span>
+          <span className={s.dlItemSub}>Enter chapter numbers</span>
+        </button>
+      ) : (
         <div className={s.dlRangeRow}>
+          <button className={s.dlRangeBack} onClick={() => setShowRange(false)} title="Back">‹</button>
           <input
             className={s.dlRangeInput}
             placeholder="From"
             value={rangeFrom}
             onChange={(e) => setRangeFrom(e.target.value)}
             onKeyDown={(e) => e.key === "Enter" && enqueueRange()}
+            autoFocus
           />
           <span className={s.dlRangeSep}>–</span>
           <input
@@ -157,7 +160,7 @@ function DownloadDropdown({
             disabled={!rangeFrom.trim() || !rangeTo.trim()}
             onClick={enqueueRange}
           >
-            Queue
+            Go
           </button>
         </div>
       )}