From 100c9af72d6677af9aba5c21c931a2cedcf85668 Mon Sep 17 00:00:00 2001
From: sirdave73 <sirdave73@epub2pdf.local>
Date: Fri, 4 Sep 2026 21:17:23 -0400
Subject: [PATCH] feat(ui): standalone render-mode toggle above upload box +
 version 2.1.0

- Move High Quality / Fast segmented toggle out of the clickable upload
  zone into a standalone .render-control so clicking the drop box only uploads
- Update JS selector to .render-control; progressive disclosure keeps the
  toggle hidden for non-office files, visible for .docx/.odt/.rtf
- Version bump 2.0.0 -> 2.1.0 (dev-test branch save rule: bump version on save)
---
 app.py               |  2 +-
 templates/index.html | 45 ++++++++++++++++++++++++++------------------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/app.py b/app.py
index ed1cf56..93ccb4b 100644
--- a/app.py
+++ b/app.py
@@ -49,7 +49,7 @@ for _d in (UPLOAD_DIR, OUTPUT_DIR, WORK_DIR):
 MAX_UPLOAD_MB = 400
 
 # Semantic version exposed by /health so the UI can show "vX.Y.Z" in the footer.
-APP_VERSION = "2.0.0"
+APP_VERSION = "2.1.0"
 
 # req 3 (health): supported formats advertised to clients. Additive key — the
 # existing /health contract asserts only status + max_upload_mb.
diff --git a/templates/index.html b/templates/index.html
index 047ccc3..29c9bfe 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -177,6 +177,8 @@
   .drop.over { border-color: transparent; transform: translateY(-2px); background: rgba(139, 92, 246, 0.08); }
   .drop.over::before { opacity: 1; }
   .drop input { display: none; }
+  .render-control { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px auto 0; }
+  .render-caption { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
 
   .drop-visual {
     display: grid;
@@ -346,6 +348,30 @@
     </header>
 
     <main>
+      <div class="render-control">
+        <div class="render-caption">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+          <span>Rendering style</span>
+        </div>
+        <div class="render-modes" role="radiogroup" aria-label="Rendering mode">
+          <label class="mode-seg">
+            <input type="radio" name="render_mode" value="rich" checked>
+            <span class="seg-track">
+              <span class="seg-main">High Quality</span>
+              <span class="seg-sub">keeps fonts, colors &amp; tables</span>
+              <span class="badge-rec">Recommended</span>
+            </span>
+          </label>
+          <label class="mode-seg">
+            <input type="radio" name="render_mode" value="standard">
+            <span class="seg-track">
+              <span class="seg-main">Fast</span>
+              <span class="seg-sub">simpler, quicker</span>
+            </span>
+          </label>
+        </div>
+      </div>
+
       <section id="drop" class="drop" role="button" tabindex="0" aria-label="Upload a document">
         <div class="drop-visual" aria-hidden="true">
           <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 8 5-5 5 5"/><path d="M5 21h14"/></svg>
@@ -353,23 +379,6 @@
         <h1>Drop a file to set it in type</h1>
         <p class="drop-note">or <span class="browse">browse your files</span> &middot; up to <span id="maxmb">400</span>&nbsp;MB &middot; <code>.epub .docx .odt .md .html .txt .csv .svg .png .pdf</code></p>
         <p id="droperr" class="drop-err" role="alert"></p>
-         <div class="render-modes" role="radiogroup" aria-label="Rendering mode">
-           <label class="mode-seg">
-             <input type="radio" name="render_mode" value="rich" checked>
-             <span class="seg-track">
-               <span class="seg-main">High Quality</span>
-               <span class="seg-sub">keeps fonts, colors &amp; tables</span>
-               <span class="badge-rec">Recommended</span>
-             </span>
-           </label>
-           <label class="mode-seg">
-             <input type="radio" name="render_mode" value="standard">
-             <span class="seg-track">
-               <span class="seg-main">Fast</span>
-               <span class="seg-sub">simpler, quicker</span>
-             </span>
-           </label>
-         </div>
         <input type="file" id="file" accept=".epub,.html,.htm,.txt,.log,.md,.markdown,.csv,.tsv,.json,.xml,.svg,.png,.jpg,.jpeg,.webp,.tiff,.bmp,.pdf,.docx,.odt,.rtf,.tex,.latex,.org,.adoc,.rst">
       </section>
 
@@ -480,7 +489,7 @@
     if (!OKEXT.test(f.name)) { flashError('Unsupported file type &mdash; accepted: .epub .html .htm .txt .log .md .markdown .csv .tsv .json .xml .svg .png .jpg .jpeg .webp .tiff .bmp .pdf .docx .odt .rtf .tex .latex .org .adoc .rst'); return; }
     // STEP 3: progressive disclosure — toggle only for the office trio (.docx/.odt/.rtf)
     const isOffice = /\.(docx|odt|rtf)$/i.test(f.name);
-    const toggle = document.querySelector('.render-modes');
+    const toggle = document.querySelector('.render-control');
     if (toggle) toggle.style.display = isOffice ? '' : 'none';
     var form = new FormData();
     form.append('file', f);