From a18e902046920a0d0be7312ffd7df99a10fde0cb Mon Sep 17 00:00:00 2001
From: fen <fen@archfox.org>
Date: Thu, 10 Sep 2026 09:02:16 -0500
Subject: [PATCH] new paste tab: rework number box submenus (#157)

Give the custom expiry and readable N times submenus a shared boxed
container with proper padding, indent them under their parent option,
and style the number inputs and unit select with palette vars, the
existing radius scale, and the select chevron. No em dashes, no hard
coded colors in new rules.
---
 internal/web/static/app.css     | 33 +++++++++++++++++++++++++++++++++
 internal/web/templates/new.html | 30 +++++++++++++++++++-----------
 2 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index 88e9b0a..ae212c1 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -398,6 +398,39 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 /* protection section rhythm (#20) */
 .protect { display: flex; flex-direction: column; gap: 2px; }
 .protect .pw-row { padding: 2px 8px 4px; }
+
+/* submenu number boxes (#157): styled number inputs + unit selects,
+   padded + indented to line up with parent option labels */
+.submenu {
+  margin: 6px 0 4px 8px;
+  padding: 8px 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.exp-group { display: flex; align-items: center; gap: 8px; }
+.num-input {
+  width: 72px;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface-2); color: var(--fg);
+  font: inherit; font-size: 21.6px; padding: 6px 10px; outline: none;
+  -moz-appearance: textfield; appearance: textfield;
+}
+.num-input::-webkit-outer-spin-button,
+.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.num-input:focus { border-color: var(--accent); }
+.unit-select {
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background-color: var(--surface-2); color: var(--muted-fg);
+  font: inherit; font-size: 21.6px; padding: 6px 28px 6px 10px;
+  cursor: pointer; outline: none;
+  appearance: none; -webkit-appearance: none;
+  background-image: var(--chevron);
+  background-repeat: no-repeat; background-position: right 10px center;
+}
+.unit-select:focus { border-color: var(--accent); }
+.readable-group { gap: 8px; }
+.readable-label { font-size: 19px; color: var(--muted-fg); white-space: nowrap; }
 .pw-field {
   display: flex; align-items: center; gap: 2px; width: 100%;
   border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
diff --git a/internal/web/templates/new.html b/internal/web/templates/new.html
index b51e191..ceb2b03 100644
--- a/internal/web/templates/new.html
+++ b/internal/web/templates/new.html
@@ -46,16 +46,18 @@
         <label><input type="radio" name="exp" value="720h"> 30 days</label>
         <label><input type="radio" name="exp" value="custom"> Custom</label>
       </div>
-      <div class="pw-row" id="customexp-row" style="display:none">
-        <input type="number" id="expnum" min="1" style="width:80px" placeholder="90"> 
-        <select id="expunit">
-          <option value="m">minutes</option>
-          <option value="h" selected>hours</option>
-          <option value="d">days</option>
-          <option value="w">weeks</option>
-          <option value="mo">months</option>
-        </select>
-        <div class="hint" id="customexp-err" style="display:none; color:var(--danger, #c0392b); margin-top:6px;"></div>
+      <div class="pw-row submenu" id="customexp-row" style="display:none">
+        <div class="exp-group">
+          <input type="number" class="num-input" id="expnum" min="1" placeholder="90" aria-label="Custom expiry amount">
+          <select id="expunit" class="unit-select">
+            <option value="m">minutes</option>
+            <option value="h" selected>hours</option>
+            <option value="d">days</option>
+            <option value="w">weeks</option>
+            <option value="mo">months</option>
+          </select>
+        </div>
+        <div class="hint" id="customexp-err" style="display:none; color:var(--err, #c0392b); margin-top:6px;"></div>
       </div>
     </div>
     <div class="float side-section">
@@ -64,7 +66,13 @@
         <label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
         <div class="pw-row" id="pwrow" style="display:none"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
         <label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
-        <div class="pw-row" id="burnrow" style="display:none"><label class="hint" style="font-size:19px;">Readable <input type="number" id="burnreads" min="1" value="1" style="width:64px"> times</label></div>
+        <div class="pw-row submenu" id="burnrow" style="display:none">
+          <div class="exp-group readable-group">
+            <label class="hint readable-label">Readable</label>
+            <input type="number" class="num-input" id="burnreads" min="1" value="1" aria-label="Times readable">
+            <label class="hint readable-label">times</label>
+          </div>
+        </div>
         <label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
       </div>
     </div>