From 6ba135098bcac92f4191f3128c6504743b869b8d Mon Sep 17 00:00:00 2001
From: "Aaron D. Lee" <aaron.daniel.lee@mgial.com>
Date: Thu, 8 Jan 2026 17:03:08 -0500
Subject: [PATCH] Use consistent button group style for mode selectors

Convert DCT/LSB (encode) and Auto/LSB/DCT (decode) to use
Bootstrap btn-group style matching Color/Gray and JPEG/PNG.
Better mobile layout - all options on one line.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontends/web/templates/decode.html | 33 +++++++++++------------------
 frontends/web/templates/encode.html | 28 ++++++++++++------------
 2 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/frontends/web/templates/decode.html b/frontends/web/templates/decode.html
index 15dc998..7897078 100644
--- a/frontends/web/templates/decode.html
+++ b/frontends/web/templates/decode.html
@@ -241,18 +241,14 @@
 
                                     <!-- Extraction Mode (compact inline) -->
                                     <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
-                                        <label class="mode-btn mode-btn-sm active" id="autoModeCard" for="modeAuto">
-                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeAuto" value="auto" checked>
-                                            <i class="bi bi-magic text-success"></i> Auto
-                                        </label>
-                                        <label class="mode-btn mode-btn-sm" id="lsbModeCard" for="modeLsb">
-                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeLsb" value="lsb">
-                                            <i class="bi bi-grid-3x3-gap text-primary"></i> LSB
-                                        </label>
-                                        <label class="mode-btn mode-btn-sm {% if not has_dct %}opacity-50{% endif %}" id="dctModeCard" for="modeDct">
-                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %}>
-                                            <i class="bi bi-soundwave text-warning"></i> DCT
-                                        </label>
+                                        <div class="btn-group btn-group-sm" role="group">
+                                            <input type="radio" class="btn-check" name="embed_mode" id="modeAuto" value="auto" checked>
+                                            <label class="btn btn-outline-secondary btn-sm" for="modeAuto"><i class="bi bi-magic me-1"></i>Auto</label>
+                                            <input type="radio" class="btn-check" name="embed_mode" id="modeLsb" value="lsb">
+                                            <label class="btn btn-outline-secondary btn-sm" for="modeLsb">LSB</label>
+                                            <input type="radio" class="btn-check" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %}>
+                                            <label class="btn btn-outline-secondary btn-sm" for="modeDct" id="dctModeLabel"><i class="bi bi-soundwave me-1"></i>DCT</label>
+                                        </div>
                                     </div>
                                     <div class="form-text" id="modeHint">
                                         <i class="bi bi-lightning me-1"></i>Tries LSB first, then DCT
@@ -514,15 +510,10 @@ document.querySelector('input[name="rsa_key"]')?.addEventListener('change', upda
 // MODE SWITCHING
 // ============================================================================
 
-const modeRadios = document.querySelectorAll('input[name="embed_mode"]');
-const modeBtns = { 'auto': document.getElementById('autoModeCard'), 'lsb': document.getElementById('lsbModeCard'), 'dct': document.getElementById('dctModeCard') };
-
-modeRadios.forEach(radio => {
-    radio.addEventListener('change', () => {
-        Object.values(modeBtns).forEach(btn => btn?.classList.remove('active'));
-        modeBtns[radio.value]?.classList.add('active');
-    });
-});
+// Apply disabled styling to DCT if not available
+if (document.getElementById('modeDct')?.disabled) {
+    document.getElementById('dctModeLabel')?.classList.add('disabled', 'text-muted');
+}
 
 // ============================================================================
 // LOADING STATE
diff --git a/frontends/web/templates/encode.html b/frontends/web/templates/encode.html
index 1236336..26a3447 100644
--- a/frontends/web/templates/encode.html
+++ b/frontends/web/templates/encode.html
@@ -206,16 +206,13 @@
 
                                     <!-- Embedding Mode (compact inline) -->
                                     <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
-                                        <label class="mode-btn mode-btn-sm {% if not has_dct %}opacity-50{% endif %} {% if has_dct %}active{% endif %}" id="dctModeCard" for="modeDct">
-                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeDct" value="dct" {% if has_dct %}checked{% endif %} {% if not has_dct %}disabled{% endif %}>
-                                            <i class="bi bi-soundwave text-warning"></i> DCT
-                                        </label>
-                                        <label class="mode-btn mode-btn-sm {% if not has_dct %}active{% endif %}" id="lsbModeCard" for="modeLsb">
-                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeLsb" value="lsb" {% if not has_dct %}checked{% endif %}>
-                                            <i class="bi bi-grid-3x3-gap text-primary"></i> LSB
-                                        </label>
+                                        <div class="btn-group btn-group-sm" role="group">
+                                            <input type="radio" class="btn-check" name="embed_mode" id="modeDct" value="dct" {% if has_dct %}checked{% endif %} {% if not has_dct %}disabled{% endif %}>
+                                            <label class="btn btn-outline-secondary btn-sm" for="modeDct" id="dctModeLabel"><i class="bi bi-soundwave me-1"></i>DCT</label>
+                                            <input type="radio" class="btn-check" name="embed_mode" id="modeLsb" value="lsb" {% if not has_dct %}checked{% endif %}>
+                                            <label class="btn btn-outline-secondary btn-sm" for="modeLsb">LSB</label>
+                                        </div>
                                         <span class="d-flex gap-2 align-items-center" id="outputOptions">
-                                            <span class="text-muted">|</span>
                                             <div class="btn-group btn-group-sm" role="group">
                                                 <input type="radio" class="btn-check" name="dct_color_mode" id="colorMode" value="color" checked>
                                                 <label class="btn btn-outline-secondary btn-sm" for="colorMode">Color</label>
@@ -646,7 +643,7 @@ carrierInput?.addEventListener('change', function() {
 // ============================================================================
 
 const modeRadios = document.querySelectorAll('input[name="embed_mode"]');
-const modeBtns = { 'dct': document.getElementById('dctModeCard'), 'lsb': document.getElementById('lsbModeCard') };
+const dctModeLabel = document.getElementById('dctModeLabel');
 const grayModeInput = document.getElementById('grayMode');
 const grayModeLabel = document.getElementById('grayModeLabel');
 const jpegFormatInput = document.getElementById('jpegFormat');
@@ -654,6 +651,11 @@ const jpegFormatLabel = document.getElementById('jpegFormatLabel');
 const colorModeInput = document.getElementById('colorMode');
 const pngFormatInput = document.getElementById('pngFormat');
 
+// Apply disabled styling to DCT if not available
+if (document.getElementById('modeDct')?.disabled) {
+    dctModeLabel?.classList.add('disabled', 'text-muted');
+}
+
 function updateOutputOptions(mode) {
     const isLsb = mode === 'lsb';
     if (isLsb) {
@@ -676,11 +678,7 @@ function updateOutputOptions(mode) {
 }
 
 modeRadios.forEach(radio => {
-    radio.addEventListener('change', () => {
-        Object.values(modeBtns).forEach(btn => btn?.classList.remove('active'));
-        modeBtns[radio.value]?.classList.add('active');
-        updateOutputOptions(radio.value);
-    });
+    radio.addEventListener('change', () => updateOutputOptions(radio.value));
 });
 
 // Initialize output options based on initial mode