feat(extension): implement accordion mutual exclusion behavior for settings details categories

examples/Caddyfile.example

@@ -84,7 +84,7 @@ sync.koalastuff.net {
     import security_headers
     header {
         # CSP hardened with base-uri and form-action limits
-        Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: blob:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"
+        Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"
         
         # Modern Permissions Policy (blocks browser hardware access for enhanced privacy)
         Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=(), usb=()"

extension/popup.html

@@ -813,7 +813,7 @@
     
     <!-- Settings Tab -->
     <div id="tab-settings" class="tab-content">
-        <details class="form-group" open>
+        <details class="form-group" name="settings-accordion" open>
             <summary title="Change your username, theme, and language." data-i18n="LABEL_SETTINGS_GROUP_PROFILE" data-i18n-title="LABEL_SETTINGS_GROUP_PROFILE_TOOLTIP">👤 Profile & Theme</summary>
             <div class="details-content">
                 <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
@@ -851,7 +851,7 @@
             </div>
         </details>
 
-        <details class="form-group">
+        <details class="form-group" name="settings-accordion">
             <summary title="Choose which titles are sent to the room." data-i18n="LABEL_PRIVACY_SETTINGS" data-i18n-title="LABEL_PRIVACY_SETTINGS_TOOLTIP">🔒 Privacy Settings</summary>
             <div class="details-content">
                 <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
@@ -872,7 +872,7 @@
             </div>
         </details>
 
-        <details class="form-group">
+        <details class="form-group" name="settings-accordion">
             <summary title="Customize playback, notifications, and audio preferences." data-i18n="LABEL_SETTINGS_GROUP_SYNC" data-i18n-title="LABEL_SETTINGS_GROUP_SYNC_TOOLTIP">⚡ Playback & Sync</summary>
             <div class="details-content">
                 <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
@@ -910,7 +910,7 @@
             </div>
         </details>
 
-        <details class="form-group">
+        <details class="form-group" name="settings-accordion">
             <summary title="Tools for fixing connection issues." data-i18n="LABEL_TROUBLESHOOTING" data-i18n-title="LABEL_TROUBLESHOOTING_TOOLTIP">🔧 Troubleshooting</summary>
             <div class="details-content" style="gap: 8px;">
                 <button id="restartTourBtn" class="secondary" style="width: 100%; font-size: 11px;" title="Restart the onboarding tutorial" data-i18n="BTN_RESTART_TOUR" data-i18n-title="BTN_RESTART_TOUR_TOOLTIP">Restart Tutorial</button>

extension/popup.js

@@ -1375,6 +1375,19 @@ if (elements.langSelector) {
     });
 }
 
+// Accordion behavior for settings details categories (collapses others when one opens)
+document.querySelectorAll('#tab-settings details.form-group').forEach(det => {
+    det.addEventListener('toggle', () => {
+        if (det.open) {
+            document.querySelectorAll('#tab-settings details.form-group').forEach(other => {
+                if (other !== det && other.open) {
+                    other.removeAttribute('open');
+                }
+            });
+        }
+    });
+});
+
 elements.serverUrl.addEventListener('change', () => {
     let url = elements.serverUrl.value.trim();
     if (url && !url.includes('://')) {

website/README.md

@@ -90,7 +90,7 @@ sync.koalastuff.net {
     header @static Cache-Control "public, max-age=31536000, must-revalidate"
 
     header {
-        Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: blob:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"
+        Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"
         Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=(), usb=()"
         Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
         X-Content-Type-Options nosniff

website/template.html

@@ -1440,7 +1440,7 @@
     <span class="t-comment"># Hardened Security & Permission Policies</span>
     <span class="t-key">import</span> <span class="t-val">security_headers</span>
     <span class="t-key">header</span> {
-        Content-Security-Policy <span class="t-str">"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: blob:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"</span>
+        Content-Security-Policy <span class="t-str">"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"</span>
         Permissions-Policy <span class="t-str">"camera=(), microphone=(), geolocation=(), payment=(), usb=()"</span>
     }
 }