From cebe64d6c14256a31247987bcafbce1a2bf2d8ba Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Sun, 30 Aug 2026 22:53:00 +0200
Subject: fix(ui): use toggle switches in Settings page, trim verbose hints

Replace checkboxes with the existing toggle-switch component for
notifications, keep-screen-on, and allow-public-groups. Remove the
"Notifications" label from per-group lines, and shorten the
music-keep-screen-on and hub-URL hints.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/meshbay-hub/src/meshbay_hub/static/app.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static/app.js')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index 268ec3f..611cb27 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -1733,9 +1733,10 @@ function SettingsPage({ user, theme, onThemeChange, groups, onPrefsChange }) {
         <h3 class="settings-heading">${t('settings.groups')}</h3>
         <div class="settings-row">
           <span class="settings-label">${t('settings.notif_global_disable')}</span>
-          <label class="settings-value" style="cursor:pointer">
+          <label class="toggle-switch">
             <input type="checkbox" checked=${globalMute}
               onChange=${toggleGlobalMute} />
+            <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
           </label>
         </div>
         ${!globalMute && html`
@@ -1743,10 +1744,10 @@ function SettingsPage({ user, theme, onThemeChange, groups, onPrefsChange }) {
           ${groups.map(g => html`
             <div class="settings-row" key=${g.id}>
               <span class="settings-label">${g.name}</span>
-              <label class="settings-value" style="cursor:pointer">
+              <label class="toggle-switch">
                 <input type="checkbox" checked=${!muted[g.id]}
                   onChange=${() => toggleMute(g.id)} />
-                ${' '}${t('settings.notifications')}
+                <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
               </label>
             </div>
           `)}
@@ -1766,9 +1767,10 @@ function SettingsPage({ user, theme, onThemeChange, groups, onPrefsChange }) {
         <p class="settings-hint">${t('settings.default_tab_hint')}</p>
         <div class="settings-row">
           <span class="settings-label">${t('settings.music_keep_screen_on')}</span>
-          <label class="settings-value" style="cursor:pointer">
+          <label class="toggle-switch">
             <input type="checkbox" checked=${keepScreenOnAudio}
               onChange=${toggleKeepScreenOnAudio} />
+            <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
           </label>
         </div>
         <p class="settings-hint">${t('settings.music_keep_screen_on_hint')}</p>
@@ -2005,10 +2007,11 @@ function AdminPage({ token, role }) {
           <h3 class="settings-heading">${t('admin.general_groups_heading')}</h3>
           <div class="settings-row">
             <span class="settings-label">${t('admin.allow_public_groups_label')}</span>
-            <label class="settings-value" style="cursor:pointer">
+            <label class="toggle-switch ${!canEditSettings || settingsSaving ? 'toggle-switch-disabled' : ''}">
               <input type="checkbox" checked=${settings.allow_public_groups}
                 disabled=${!canEditSettings || settingsSaving}
                 onChange=${e => saveSettings({ allow_public_groups: e.target.checked })} />
+              <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
             </label>
           </div>
           <p class="settings-hint">${t('admin.allow_public_groups_hint')}</p>
-- 
cgit v1.2.3