From 54ba99673f9fdb8f6e6509b1d4643c0dedfc6566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 21 Apr 2026 14:17:14 +0400
Subject: [PATCH] Break up settings into sub sections

---
 app/components/app-menu/settings.gjs | 194 ++++++++++++++++-----------
 app/styles/app.css                   |   2 +-
 2 files changed, 115 insertions(+), 81 deletions(-)

diff --git a/app/components/app-menu/settings.gjs b/app/components/app-menu/settings.gjs
index 1e5f909..55673d4 100644
--- a/app/components/app-menu/settings.gjs
+++ b/app/components/app-menu/settings.gjs
@@ -29,6 +29,7 @@ export default class AppMenuSettings extends Component {
   }
 
   <template>
+    {{! template-lint-disable no-nested-interactive }}
     <div class="sidebar-header">
       <button type="button" class="back-btn" {{on "click" @onBack}}>
         <Icon @name="arrow-left" @size={{20}} @color="#333" />
@@ -41,88 +42,121 @@ export default class AppMenuSettings extends Component {
 
     <div class="sidebar-content">
       <section class="settings-section">
-        <div class="form-group">
-          <label for="show-quick-search">Quick search buttons visible</label>
-          <select
-            id="show-quick-search"
-            class="form-control"
-            {{on "change" this.toggleQuickSearchButtons}}
-          >
-            <option
-              value="true"
-              selected={{if this.settings.showQuickSearchButtons "selected"}}
-            >
-              Yes
-            </option>
-            <option
-              value="false"
-              selected={{unless
-                this.settings.showQuickSearchButtons
-                "selected"
-              }}
-            >
-              No
-            </option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
-          <select
-            id="map-kinetic"
-            class="form-control"
-            {{on "change" this.toggleKinetic}}
-          >
-            <option
-              value="true"
-              selected={{if this.settings.mapKinetic "selected"}}
-            >
-              On
-            </option>
-            <option
-              value="false"
-              selected={{unless this.settings.mapKinetic "selected"}}
-            >
-              Off
-            </option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="overpass-api">Overpass API Provider</label>
-          <select
-            id="overpass-api"
-            class="form-control"
-            {{on "change" this.updateApi}}
-          >
-            {{#each this.settings.overpassApis as |api|}}
-              <option
-                value={{api.url}}
-                selected={{if
-                  (eq api.url this.settings.overpassApi)
-                  "selected"
-                }}
+        <details>
+          <summary>
+            <Icon @name="map" @size={{20}} />
+            <span>Map & UI</span>
+          </summary>
+          <div class="details-content">
+            <div class="form-group">
+              <label for="show-quick-search">Quick search buttons visible</label>
+              <select
+                id="show-quick-search"
+                class="form-control"
+                {{on "change" this.toggleQuickSearchButtons}}
               >
-                {{api.name}}
-              </option>
-            {{/each}}
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="photon-api">Photon API Provider</label>
-          <select
-            id="photon-api"
-            class="form-control"
-            {{on "change" this.updatePhotonApi}}
-          >
-            {{#each this.settings.photonApis as |api|}}
-              <option
-                value={{api.url}}
-                selected={{if (eq api.url this.settings.photonApi) "selected"}}
+                <option
+                  value="true"
+                  selected={{if
+                    this.settings.showQuickSearchButtons
+                    "selected"
+                  }}
+                >
+                  Yes
+                </option>
+                <option
+                  value="false"
+                  selected={{unless
+                    this.settings.showQuickSearchButtons
+                    "selected"
+                  }}
+                >
+                  No
+                </option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
+              <select
+                id="map-kinetic"
+                class="form-control"
+                {{on "change" this.toggleKinetic}}
               >
-                {{api.name}}
-              </option>
-            {{/each}}
-          </select>
-        </div>
+                <option
+                  value="true"
+                  selected={{if this.settings.mapKinetic "selected"}}
+                >
+                  On
+                </option>
+                <option
+                  value="false"
+                  selected={{unless this.settings.mapKinetic "selected"}}
+                >
+                  Off
+                </option>
+              </select>
+            </div>
+          </div>
+        </details>
+
+        <details>
+          <summary>
+            <Icon @name="server" @size={{20}} />
+            <span>API Providers</span>
+          </summary>
+          <div class="details-content">
+            <div class="form-group">
+              <label for="overpass-api">Overpass API Provider</label>
+              <select
+                id="overpass-api"
+                class="form-control"
+                {{on "change" this.updateApi}}
+              >
+                {{#each this.settings.overpassApis as |api|}}
+                  <option
+                    value={{api.url}}
+                    selected={{if
+                      (eq api.url this.settings.overpassApi)
+                      "selected"
+                    }}
+                  >
+                    {{api.name}}
+                  </option>
+                {{/each}}
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="photon-api">Photon API Provider</label>
+              <select
+                id="photon-api"
+                class="form-control"
+                {{on "change" this.updatePhotonApi}}
+              >
+                {{#each this.settings.photonApis as |api|}}
+                  <option
+                    value={{api.url}}
+                    selected={{if
+                      (eq api.url this.settings.photonApi)
+                      "selected"
+                    }}
+                  >
+                    {{api.name}}
+                  </option>
+                {{/each}}
+              </select>
+            </div>
+          </div>
+        </details>
+
+        <details>
+          <summary>
+            <Icon @name="zap" @size={{20}} />
+            <span>Nostr</span>
+          </summary>
+          <div class="details-content">
+            {{! Nostr settings will go here }}
+          </div>
+        </details>
       </section>
     </div>
   </template>
diff --git a/app/styles/app.css b/app/styles/app.css
index 4f953c5..eb668b1 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -595,7 +595,7 @@ body {
   display: block;
   font-size: 0.85rem;
   color: #666;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
 }
 
 .form-control {