From bd33ea480476c59c05abc333f764104574518224 Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Sun, 12 Jul 2026 06:31:24 +0200
Subject: [PATCH] feat(extension): implement accordion mutual exclusion
 behavior for settings details categories

---
 examples/Caddyfile.example |  2 +-
 extension/popup.html       |  8 ++++----
 extension/popup.js         | 13 +++++++++++++
 website/README.md          |  2 +-
 website/template.html      |  2 +-
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/examples/Caddyfile.example b/examples/Caddyfile.example
index 85396ae..e74721e 100644
--- a/examples/Caddyfile.example
+++ b/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=()"
diff --git a/extension/popup.html b/extension/popup.html
index 6c73d62..cf435a9 100644
--- a/extension/popup.html
+++ b/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>
diff --git a/extension/popup.js b/extension/popup.js
index d392e3d..3510895 100644
--- a/extension/popup.js
+++ b/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('://')) {
diff --git a/website/README.md b/website/README.md
index 94cb740..af7a637 100644
--- a/website/README.md
+++ b/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
diff --git a/website/template.html b/website/template.html
index 5c6f092..69e2098 100644
--- a/website/template.html
+++ b/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>
     }
 }