feat: visual orientation picker on configure page + fix 404→setup QR in firmware

Replace orientation <select> dropdown on setup/configure with the same
visual two-button picker used in the SPA (SVG frame diagrams, ribbon
indicator, active highlight). Hidden input carries the value on submit.

Firmware: normal_operation() now calls show_setup_qr(mac) on 404 instead
of epd_fill(COLOR_RED) — device shows scannable QR with its own MAC when
not yet registered.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

firmware/src/main.cpp

@@ -195,8 +195,8 @@ static void normal_operation(const String& mac) {
         }
         // No stored image yet: keep current display (e-ink is persistent)
     } else if (code == 404) {
-        // Device not registered — show red border indication
+        // Device not registered — show setup QR so user can link this device
-        epd_fill(COLOR_RED);
+        show_setup_qr(mac);
     } else {
         // Server error / timeout: yellow border indication (server reachable, sync failed)
         epd_fill(COLOR_YELLOW);

templates/setup/configure.html.twig

@@ -16,9 +16,18 @@
         input[type="text"], select {
             width: 100%; min-height: 44px; padding: 0 .875rem; border: 1px solid #e8d9c4;
             border-radius: 10px; background: #fff; font-size: 1rem; color: #3a2e22; }
-        select { padding-right: 2rem; appearance: none;
+        .orientation-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
-                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7060' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
+        .orientation-opt { display: flex; flex-direction: column; align-items: center; gap: .25rem;
-                 background-repeat: no-repeat; background-position: right .875rem center; }
+                           padding: .75rem .5rem; background: #fff9f2; border: 2px solid #e8d9c4;
+                           border-radius: 12px; cursor: pointer; transition: border-color .15s; }
+        .orientation-opt--active { border-color: #c97c3a; }
+        .orientation-opt__diagram { width: 48px; height: 48px; color: #8a7060; }
+        .orientation-opt .opt-body { stroke: #8a7060; fill: #f5ede0; }
+        .orientation-opt--active .opt-body { stroke: #c97c3a; fill: rgba(201,124,58,.12); }
+        .orientation-opt .opt-ribbon { fill: #8a7060; }
+        .orientation-opt--active .opt-ribbon { fill: #c97c3a; }
+        .orientation-opt__label { font-size: .75rem; font-weight: 700; color: #3a2e22; }
+        .orientation-opt__sub { font-size: .6875rem; color: #8a7060; text-align: center; line-height: 1.2; }
         .field-error { margin-top: .375rem; font-size: .8125rem; color: #c0392b; }
         .hint { margin-top: .375rem; font-size: .8125rem; color: #8a7060; }
         .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
@@ -45,11 +54,38 @@
         </div>
 
         <div class="field">
-            <label for="orientation">Display orientation</label>
+            <label>Display orientation</label>
-            <select id="orientation" name="orientation">
+            <input type="hidden" id="orientation" name="orientation" value="{{ device.orientation.value }}">
-                <option value="landscape" {% if device.orientation.value == 'landscape' %}selected{% endif %}>Landscape — ribbon at bottom</option>
+            <div class="orientation-picker" role="radiogroup" aria-label="Display orientation">
-                <option value="portrait"  {% if device.orientation.value == 'portrait'  %}selected{% endif %}>Portrait — ribbon on left</option>
+                <button type="button" role="radio"
-            </select>
+                        class="orientation-opt{% if device.orientation.value == 'landscape' %} orientation-opt--active{% endif %}"
+                        aria-checked="{{ device.orientation.value == 'landscape' ? 'true' : 'false' }}"
+                        aria-label="Landscape"
+                        data-value="landscape">
+                    <svg class="orientation-opt__diagram" viewBox="0 0 48 48" fill="none" aria-hidden="true">
+                        <rect x="4" y="12" width="40" height="24" rx="2" stroke-width="1.5"
+                              class="opt-body"/>
+                        <rect x="20" y="36" width="8" height="5" rx="1"
+                              class="opt-ribbon"/>
+                    </svg>
+                    <span class="orientation-opt__label">Landscape</span>
+                    <span class="orientation-opt__sub">Ribbon at bottom</span>
+                </button>
+                <button type="button" role="radio"
+                        class="orientation-opt{% if device.orientation.value == 'portrait' %} orientation-opt--active{% endif %}"
+                        aria-checked="{{ device.orientation.value == 'portrait' ? 'true' : 'false' }}"
+                        aria-label="Portrait"
+                        data-value="portrait">
+                    <svg class="orientation-opt__diagram" viewBox="0 0 48 48" fill="none" aria-hidden="true">
+                        <rect x="12" y="4" width="24" height="40" rx="2" stroke-width="1.5"
+                              class="opt-body"/>
+                        <rect x="7" y="20" width="5" height="8" rx="1"
+                              class="opt-ribbon"/>
+                    </svg>
+                    <span class="orientation-opt__label">Portrait</span>
+                    <span class="orientation-opt__sub">Ribbon on left</span>
+                </button>
+            </div>
         </div>
 
         <div class="field">
@@ -77,5 +113,22 @@
         <button type="submit" class="btn">Save &amp; finish setup</button>
     </form>
 </div>
+<script>
+(function () {
+    var hidden = document.getElementById('orientation');
+    var btns = document.querySelectorAll('.orientation-opt');
+    btns.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            btns.forEach(function (b) {
+                b.classList.remove('orientation-opt--active');
+                b.setAttribute('aria-checked', 'false');
+            });
+            btn.classList.add('orientation-opt--active');
+            btn.setAttribute('aria-checked', 'true');
+            hidden.value = btn.dataset.value;
+        });
+    });
+}());
+</script>
 </body>
 </html>