From 9a56978f8186f1b9f7ec90dcd29bfe454652266c Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sun, 19 Apr 2026 11:23:36 +0200
Subject: [PATCH] =?UTF-8?q?UX:=20Sichtbarkeits-Pill=20im=20Route-Body=20an?=
 =?UTF-8?q?klickbar=20(gr=C3=BCn/blau)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/css/components.css |  3 ++-
 backend/static/js/app.js          |  2 +-
 backend/static/js/pages/routes.js | 26 +++++++++++++++++---------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index aa7f45c..bfa052e 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -2284,7 +2284,8 @@ html.modal-open {
 
 /* Hundetauglichkeit-Badge */
 .rk-badge--dog    { background: #fef3c7; color: #92400e; font-size: 1rem; }
-.rk-badge--private { background: #f1f5f9; color: #64748b; }
+.rk-badge--private { background: #dbeafe; color: #1d4ed8; }  /* blau = privat */
+.rk-badge--public  { background: #dcfce7; color: #15803d; }  /* grün = öffentlich */
 
 /* Foto-Galerie in Route-Detail */
 .rk-photo-gallery {
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 33fd887..bc0759b 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '225'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '226'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 
diff --git a/backend/static/js/pages/routes.js b/backend/static/js/pages/routes.js
index e04877c..7781401 100644
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@@ -726,7 +726,15 @@ window.Page_routes = (() => {
         ${paws ? `<span class="rk-badge rk-badge--dog" title="Hundetauglichkeit">${paws}</span>` : ''}
         ${route.schatten        ? `<span class="rk-badge">${UI.icon('tree')} Schatten</span>`         : ''}
         ${route.leine_empfohlen ? `<span class="rk-badge">${UI.icon('link')} Leine empfohlen</span>` : ''}
-        ${!route.is_public ? `<span class="rk-badge rk-badge--private">${UI.icon('lock')} Privat</span>` : ''}
+        ${isOwn
+          ? `<button type="button" id="rd-vis-pill"
+                     class="rk-badge ${route.is_public ? 'rk-badge--public' : 'rk-badge--private'}"
+                     style="border:none;cursor:pointer;font:inherit"
+                     title="${route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'}">
+               ${route.is_public ? UI.icon('lock-open')+' Öffentlich' : UI.icon('lock')+' Privat'}
+             </button>`
+          : (!route.is_public ? `<span class="rk-badge rk-badge--private">${UI.icon('lock')} Privat</span>` : '')
+        }
       </div>
       ${route.beschreibung ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-3)">${UI.escape(route.beschreibung)}</p>` : ''}
       <div id="rk-nearby" class="rk-nearby-section">
@@ -754,8 +762,6 @@ window.Page_routes = (() => {
     const ownerRow = isOwn ? `
       <div style="display:flex;gap:var(--space-2)">
         ${_actionBtn('rd-send-friend', 'paper-plane-tilt', 'Senden')}
-        ${_actionBtn('rd-vis', route.is_public ? 'lock-open' : 'lock',
-                     route.is_public ? 'Öffentlich' : 'Privat')}
         ${_actionBtn('rd-del', 'trash', 'Löschen', true)}
       </div>` : '';
 
@@ -811,15 +817,17 @@ window.Page_routes = (() => {
     // An Freund senden
     document.getElementById('rd-send-friend')?.addEventListener('click', () => _openSendToFriendModal(route));
 
-    // Sichtbarkeit toggle
-    document.getElementById('rd-vis')?.addEventListener('click', async () => {
+    // Sichtbarkeit toggle — Pill im Body
+    document.getElementById('rd-vis-pill')?.addEventListener('click', async () => {
+      const pill = document.getElementById('rd-vis-pill');
       try {
         await API.routes.update(route.id, { is_public: !route.is_public });
         route.is_public = !route.is_public;
-        const btn = document.getElementById('rd-vis');
-        if (btn) {
-          btn.innerHTML = `${UI.icon(route.is_public ? 'lock-open' : 'lock')}
-            <span>${route.is_public ? 'Öffentlich' : 'Privat'}</span>`;
+        if (pill) {
+          pill.className = `rk-badge ${route.is_public ? 'rk-badge--public' : 'rk-badge--private'}`;
+          pill.style.cssText = 'border:none;cursor:pointer;font:inherit';
+          pill.innerHTML     = route.is_public ? UI.icon('lock-open')+' Öffentlich' : UI.icon('lock')+' Privat';
+          pill.title         = route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen';
         }
         const r = _data.find(x => x.id === route.id);
         if (r) r.is_public = route.is_public;