From d9468f6814420b01aaca7dae02d67e34ce4d9e60 Mon Sep 17 00:00:00 2001
From: Moritz <moritz@moritz.run>
Date: Tue, 21 Apr 2026 11:50:50 +0200
Subject: [PATCH] ui: WBS dropdown, decimal-room filters, segmented toggle,
 'Final absenden'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Einstellungen → Profil: WBS-Typ jetzt <select> mit WBS 100/140/160/180/220
* Einstellungen → Filter: Zimmer min/max als number-Feld mit step=0.5
  (2.5-Zimmer-Wohnungen sauber eingebbar)
* Wohnungen-Top-Leiste: Segmented-Toggle (ein zusammenhängender Kippschalter)
  für die beiden Schalter, keine einzelnen Radio-Pills mehr
* Trockenmodus umbenannt in 'Final absenden' (positive Polarität: An=echt
  senden). Bestätigungsdialog beim Einschalten.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/templates/_settings_filter.html |  8 ++-
 web/templates/_settings_profil.html | 15 ++++--
 web/templates/_wohnungen_body.html  | 75 ++++++++++++++++++-----------
 web/templates/base.html             | 17 ++++---
 4 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/web/templates/_settings_filter.html b/web/templates/_settings_filter.html
index 47f3efb..195390b 100644
--- a/web/templates/_settings_filter.html
+++ b/web/templates/_settings_filter.html
@@ -8,11 +8,15 @@
     <input type="hidden" name="csrf" value="{{ csrf }}">
     <div>
         <label class="block text-xs uppercase tracking-wide text-slate-500 mb-1">Zimmer min</label>
-        <input class="input" name="rooms_min" value="{{ filters.rooms_min if filters.rooms_min is not none else '' }}">
+        <input class="input" type="number" step="0.5" min="0" max="20"
+               name="rooms_min" value="{{ filters.rooms_min if filters.rooms_min is not none else '' }}"
+               placeholder="z.B. 2 oder 2.5">
     </div>
     <div>
         <label class="block text-xs uppercase tracking-wide text-slate-500 mb-1">Zimmer max</label>
-        <input class="input" name="rooms_max" value="{{ filters.rooms_max if filters.rooms_max is not none else '' }}">
+        <input class="input" type="number" step="0.5" min="0" max="20"
+               name="rooms_max" value="{{ filters.rooms_max if filters.rooms_max is not none else '' }}"
+               placeholder="z.B. 3.5">
     </div>
     <div>
         <label class="block text-xs uppercase tracking-wide text-slate-500 mb-1">max Miete (€)</label>
diff --git a/web/templates/_settings_profil.html b/web/templates/_settings_profil.html
index 8370a0b..1be5f61 100644
--- a/web/templates/_settings_profil.html
+++ b/web/templates/_settings_profil.html
@@ -58,7 +58,12 @@
     </label>
     <div>
         <label class="block text-xs uppercase text-slate-500 mb-1">WBS-Typ</label>
-        <input class="input" name="wbs_type" value="{{ profile.wbs_type }}" placeholder="z.B. 180">
+        <select class="input" name="wbs_type">
+            <option value="0" {% if not profile.wbs_type or profile.wbs_type == '0' %}selected{% endif %}>—</option>
+            {% for t in ['100','140','160','180','220'] %}
+            <option value="{{ t }}" {% if profile.wbs_type|string == t %}selected{% endif %}>WBS {{ t }}</option>
+            {% endfor %}
+        </select>
     </div>
     <div>
         <label class="block text-xs uppercase text-slate-500 mb-1">gültig bis</label>
@@ -102,10 +107,10 @@
 </form>
 
 <hr class="my-6 border-soft">
-<h3 class="font-semibold mb-2">Trockenmodus</h3>
+<h3 class="font-semibold mb-2">Final absenden</h3>
 <p class="text-sm text-slate-600 mb-3">
     <span class="chip chip-warn">experimentell</span>
-    Im Trockenmodus wird das Formular ausgefüllt, aber nicht abgesendet. Erst deaktivieren,
-    wenn du jeden Anbieter einmal im Trockenmodus erfolgreich getestet hast — den Schalter
-    findest du auch oben auf der Wohnungen-Seite.
+    Solange „Final absenden" aus ist, füllt die Automation das Formular aus, klickt aber
+    nicht auf „Senden". Erst einschalten, wenn du jeden Anbieter einmal durchgetestet hast.
+    Der Schalter liegt auch oben auf der Wohnungen-Seite.
 </p>
diff --git a/web/templates/_wohnungen_body.html b/web/templates/_wohnungen_body.html
index 5ec910e..6ca7852 100644
--- a/web/templates/_wohnungen_body.html
+++ b/web/templates/_wohnungen_body.html
@@ -19,51 +19,68 @@
     </a>
 </section>
 
-<!-- Reihe 2: Schalter Automatisch bewerben + Trockenmodus (Radio-Gruppen) -->
+<!-- Reihe 2: Schalter Automatisch bewerben + Final absenden -->
 <section class="grid grid-cols-1 md:grid-cols-2 gap-3">
     <!-- Automatisch bewerben -->
-    <form class="card p-4"
-          hx-post="/actions/auto-apply"
-          hx-trigger="change"
-          hx-target="#wohnungen-body"
-          hx-swap="outerHTML">
+    <form class="card p-4 flex items-center justify-between gap-3">
         <input type="hidden" name="csrf" value="{{ csrf }}">
-        <div class="text-[11px] uppercase tracking-wide text-slate-500 mb-2">Automatisch bewerben</div>
-        <div class="flex gap-4">
-            <label class="radio-opt">
+        <div class="flex flex-col gap-0.5">
+            <div class="text-[11px] uppercase tracking-wide text-slate-500">Automatisch bewerben</div>
+            <div class="text-xs text-slate-500">bei Match ohne Nachfrage bewerben</div>
+        </div>
+        <div class="toggle warn">
+            <label>
                 <input type="radio" name="value" value="off"
+                       hx-post="/actions/auto-apply"
+                       hx-trigger="change"
+                       hx-include="closest form"
+                       hx-target="#wohnungen-body"
+                       hx-swap="outerHTML"
                        {% if not auto_apply_enabled %}checked{% endif %}>
-                <span>Aus</span>
+                Aus
             </label>
-            <label class="radio-opt"
-                   {% if not auto_apply_enabled %}data-hx-confirm="Automatisches Bewerben einschalten? Bei jedem passenden Flat wird automatisch beworben."{% endif %}>
+            <label>
                 <input type="radio" name="value" value="on"
+                       hx-post="/actions/auto-apply"
+                       hx-trigger="change"
+                       hx-include="closest form"
+                       hx-target="#wohnungen-body"
+                       hx-swap="outerHTML"
                        hx-confirm="Automatisches Bewerben einschalten? Bei jedem passenden Flat wird automatisch beworben."
                        {% if auto_apply_enabled %}checked{% endif %}>
-                <span>An</span>
+                An
             </label>
         </div>
     </form>
 
-    <!-- Trockenmodus -->
-    <form class="card p-4"
-          hx-post="/actions/submit-forms"
-          hx-trigger="change"
-          hx-target="#wohnungen-body"
-          hx-swap="outerHTML">
+    <!-- Final absenden (inverse of submit_forms: on=real, off=trocken) -->
+    <form class="card p-4 flex items-center justify-between gap-3">
         <input type="hidden" name="csrf" value="{{ csrf }}">
-        <div class="text-[11px] uppercase tracking-wide text-slate-500 mb-2">Trockenmodus</div>
-        <div class="flex gap-4">
-            <label class="radio-opt">
-                <input type="radio" name="value" value="on"
-                       {% if not submit_forms %}checked{% endif %}>
-                <span>An <span class="text-xs text-slate-500">(Formular ausfüllen, nicht absenden)</span></span>
-            </label>
-            <label class="radio-opt">
+        <div class="flex flex-col gap-0.5">
+            <div class="text-[11px] uppercase tracking-wide text-slate-500">Final absenden</div>
+            <div class="text-xs text-slate-500">aus = Formular ausfüllen, nicht abschicken</div>
+        </div>
+        <div class="toggle warn">
+            <label>
                 <input type="radio" name="value" value="off"
-                       hx-confirm="Trockenmodus ausschalten? Formulare werden dann WIRKLICH abgesendet!"
+                       hx-post="/actions/submit-forms"
+                       hx-trigger="change"
+                       hx-include="closest form"
+                       hx-target="#wohnungen-body"
+                       hx-swap="outerHTML"
+                       {% if not submit_forms %}checked{% endif %}>
+                Aus
+            </label>
+            <label>
+                <input type="radio" name="value" value="on"
+                       hx-post="/actions/submit-forms"
+                       hx-trigger="change"
+                       hx-include="closest form"
+                       hx-target="#wohnungen-body"
+                       hx-swap="outerHTML"
+                       hx-confirm="Final absenden einschalten? Formulare werden dann WIRKLICH abgeschickt!"
                        {% if submit_forms %}checked{% endif %}>
-                <span>Aus <span class="text-xs text-[#b8404e]">(echt senden)</span></span>
+                An
             </label>
         </div>
     </form>
diff --git a/web/templates/base.html b/web/templates/base.html
index b59fa1e..8ce2784 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -47,12 +47,17 @@
         .chip-warn { background: #fff4dd; color: #a36a1f; border: 1px solid #f5d48b; }
         .chip-bad  { background: #fde6e9; color: #b8404e; border: 1px solid #f5b5bf; }
         .chip-info { background: #e3effc; color: #1f5f99; border: 1px solid #b6d4f0; }
-        .radio-opt { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; padding: 0.35rem 0.65rem;
-                     border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
-                     transition: border-color .15s, background .15s; user-select: none; }
-        .radio-opt:has(input:checked) { border-color: var(--primary); background: #ecf4fc; box-shadow: 0 0 0 1px var(--primary) inset; }
-        .radio-opt:hover { background: var(--ghost); }
-        .radio-opt input[type="radio"] { accent-color: var(--primary); }
+        /* Segmented toggle (An/Aus Kippschalter) */
+        .toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
+                  overflow: hidden; background: var(--surface); font-size: 0.85rem; font-weight: 500; }
+        .toggle label { padding: 0.45rem 1.1rem; cursor: pointer; user-select: none;
+                        color: var(--muted); transition: background .15s, color .15s; }
+        .toggle label + label { border-left: 1px solid var(--border); }
+        .toggle label input[type="radio"] { position: absolute; opacity: 0; pointer-events: none;
+                                            width: 0; height: 0; }
+        .toggle label:hover { color: var(--text); background: var(--ghost); }
+        .toggle label:has(input:checked) { background: var(--primary); color: #fff; }
+        .toggle.warn label:has(input[value="on"]:checked) { background: var(--danger); }
         .brand-dot {
             width: 2rem; height: 2rem; border-radius: 10px;
             background: linear-gradient(135deg, #66b7f2 0%, #2f8ae0 60%, #fbd76b 100%);