Break up settings into sub sections

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,6 +42,12 @@ export default class AppMenuSettings extends Component {
 
     <div class="sidebar-content">
       <section class="settings-section">
+        <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
@@ -50,7 +57,10 @@ export default class AppMenuSettings extends Component {
               >
                 <option
                   value="true"
-              selected={{if this.settings.showQuickSearchButtons "selected"}}
+                  selected={{if
+                    this.settings.showQuickSearchButtons
+                    "selected"
+                  }}
                 >
                   Yes
                 </option>
@@ -86,6 +96,15 @@ export default class AppMenuSettings extends Component {
                 </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
@@ -116,13 +135,28 @@ export default class AppMenuSettings extends Component {
                 {{#each this.settings.photonApis as |api|}}
                   <option
                     value={{api.url}}
-                selected={{if (eq api.url this.settings.photonApi) "selected"}}
+                    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>

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 {