Refactor settings, DRY up everything

app/components/app-menu/settings.gjs

@@ -1,25 +1,41 @@
+import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
 import Icon from '#components/icon';
 import AppMenuSettingsMapUi from './settings/map-ui';
 import AppMenuSettingsApis from './settings/apis';
 import AppMenuSettingsNostr from './settings/nostr';
 
-<template>
-  <div class="sidebar-header">
-    <button type="button" class="back-btn" {{on "click" @onBack}}>
-      <Icon @name="arrow-left" @size={{20}} @color="#333" />
-    </button>
-    <h2>Settings</h2>
-    <button type="button" class="close-btn" {{on "click" @onClose}}>
-      <Icon @name="x" @size={{20}} @color="#333" />
-    </button>
-  </div>
+export default class AppMenuSettings extends Component {
+  @service settings;
 
-  <div class="sidebar-content">
-    <section class="settings-section">
-      <AppMenuSettingsMapUi />
-      <AppMenuSettingsApis />
-      <AppMenuSettingsNostr />
-    </section>
-  </div>
-</template>
+  @action
+  updateSetting(key, event) {
+    let value = event.target.value;
+    if (value === 'true') value = true;
+    if (value === 'false') value = false;
+
+    this.settings.update(key, value);
+  }
+
+  <template>
+    <div class="sidebar-header">
+      <button type="button" class="back-btn" {{on "click" @onBack}}>
+        <Icon @name="arrow-left" @size={{20}} @color="#333" />
+      </button>
+      <h2>Settings</h2>
+      <button type="button" class="close-btn" {{on "click" @onClose}}>
+        <Icon @name="x" @size={{20}} @color="#333" />
+      </button>
+    </div>
+
+    <div class="sidebar-content">
+      <section class="settings-section">
+        <AppMenuSettingsMapUi @onChange={{this.updateSetting}} />
+        <AppMenuSettingsApis @onChange={{this.updateSetting}} />
+        <AppMenuSettingsNostr @onChange={{this.updateSetting}} />
+      </section>
+    </div>
+  </template>
+}