From b759cbb50549900b4795109dafcc79f592845670 Mon Sep 17 00:00:00 2001
From: EiSiMo <mail@moritz.run>
Date: Thu, 23 Apr 2026 13:50:15 +0200
Subject: [PATCH] feat(settings): hide push-channel fields when "Nur Dashboard"
 is picked
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Channel-dependent fields (Telegram bot token, chat id, event checkboxes,
"Test senden" button) now hide when the user switches the Kanal select
to "Nur Dashboard". Implemented as data-channel-only="telegram" markers
that a tiny syncChannelOnlyFields() in app.js toggles via inline
display:none. Initial state is set in Jinja so there's no flash on
load.

Hidden inputs stay in the form, so the values survive the round-trip:
switch to Dashboard → save → switch back to Telegram and the bot
token / chat id are still there.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/static/app.js                          | 20 ++++++++++++++++++++
 web/templates/_settings_notifications.html | 15 +++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/web/static/app.js b/web/static/app.js
index d41f866..fe87d11 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -144,6 +144,26 @@ function openDeepLinkedFlat() {
 
 document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
 
+// Notification-channel toggle — show fields tagged data-channel-only="<value>"
+// only while that channel is selected. Hidden inputs stay in the form so
+// values survive a round-trip (e.g. switch to "ui", save, switch back to
+// "telegram" and the bot token is still there).
+function syncChannelOnlyFields() {
+  const sel = document.querySelector('select[name="channel"]');
+  if (!sel) return;
+  const channel = sel.value;
+  document.querySelectorAll("[data-channel-only]").forEach((el) => {
+    el.style.display = el.dataset.channelOnly === channel ? "" : "none";
+  });
+}
+document.addEventListener("change", (ev) => {
+  if (ev.target && ev.target.matches && ev.target.matches('select[name="channel"]')) {
+    syncChannelOnlyFields();
+  }
+});
+document.addEventListener("DOMContentLoaded", syncChannelOnlyFields);
+document.body && document.body.addEventListener("htmx:afterSwap", syncChannelOnlyFields);
+
 // Image lightbox — single global modal in base.html, opened by clicking any
 // .flat-gallery-tile. Click handler is delegated so it survives HTMX swaps.
 // Visibility is driven by inline style.display rather than a `hidden` class
diff --git a/web/templates/_settings_notifications.html b/web/templates/_settings_notifications.html
index b6721be..1de5b05 100644
--- a/web/templates/_settings_notifications.html
+++ b/web/templates/_settings_notifications.html
@@ -19,6 +19,11 @@
       autocomplete="off" data-lpignore="true" data-1p-ignore data-bwignore data-form-type="other">
     <input type="hidden" name="csrf" value="{{ csrf }}">
 
+    {# Channel-dependent fields are wrapped in data-channel-only="telegram" so a
+       small JS handler in app.js can hide them when "Nur Dashboard" is picked.
+       Inputs stay in the form (display:none doesn't strip them), so values are
+       preserved when you switch back to Telegram. #}
+    {% set hide_telegram = notifications.channel != 'telegram' %}
     <div>
         <label class="block text-xs uppercase text-slate-500 mb-1">Kanal</label>
         <select class="input" name="channel">
@@ -27,19 +32,20 @@
         </select>
     </div>
 
-    <div>
+    <div data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>
         <label class="block text-xs uppercase text-slate-500 mb-1">Telegram Bot-Token</label>
         <input class="input" name="telegram_bot_token" value="{{ notifications.telegram_bot_token }}"
                placeholder="123456:ABC..." autocomplete="off" data-lpignore="true" data-1p-ignore data-bwignore>
         <p class="text-xs text-slate-500 mt-1">Bot bei @BotFather anlegen, Token hier eintragen.</p>
     </div>
-    <div>
+    <div data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>
         <label class="block text-xs uppercase text-slate-500 mb-1">Telegram Chat-ID</label>
         <input class="input" name="telegram_chat_id" value="{{ notifications.telegram_chat_id }}"
                placeholder="987654321" autocomplete="off" data-lpignore="true" data-1p-ignore data-bwignore>
     </div>
 
-    <div class="border-t border-soft pt-4 space-y-2">
+    <div class="border-t border-soft pt-4 space-y-2"
+         data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>
         <label class="flex items-center gap-2">
             <input type="checkbox" name="notify_on_match" {% if notifications.notify_on_match %}checked{% endif %}>
             <span>Bei passender Wohnung</span>
@@ -57,6 +63,7 @@
     <div class="flex gap-2">
         <button class="btn btn-primary" type="submit">Speichern</button>
         <button class="btn btn-ghost" type="submit"
-                formaction="/actions/notifications/test" formnovalidate>Test senden</button>
+                formaction="/actions/notifications/test" formnovalidate
+                data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>Test senden</button>
     </div>
 </form>