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>
+export default class AppMenuSettings extends Component {
-  <div class="sidebar-header">
+  @service settings;
-    <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">
+  @action
-    <section class="settings-section">
+  updateSetting(key, event) {
-      <AppMenuSettingsMapUi />
+    let value = event.target.value;
-      <AppMenuSettingsApis />
+    if (value === 'true') value = true;
-      <AppMenuSettingsNostr />
+    if (value === 'false') value = false;
-    </section>
+
-  </div>
+    this.settings.update(key, value);
-</template>
+  }
+
+  <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>
+}

app/components/app-menu/settings/apis.gjs

@@ -1,23 +1,13 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
-import { action } from '@ember/object';
+import { fn } from '@ember/helper';
 import Icon from '#components/icon';
 import eq from 'ember-truth-helpers/helpers/eq';
 
 export default class AppMenuSettingsApis extends Component {
   @service settings;
 
-  @action
-  updateApi(event) {
-    this.settings.updateOverpassApi(event.target.value);
-  }
-
-  @action
-  updatePhotonApi(event) {
-    this.settings.updatePhotonApi(event.target.value);
-  }
-
   <template>
     {{! template-lint-disable no-nested-interactive }}
     <details>
@@ -31,7 +21,7 @@ export default class AppMenuSettingsApis extends Component {
           <select
             id="overpass-api"
             class="form-control"
-            {{on "change" this.updateApi}}
+            {{on "change" (fn @onChange "overpassApi")}}
           >
             {{#each this.settings.overpassApis as |api|}}
               <option
@@ -51,7 +41,7 @@ export default class AppMenuSettingsApis extends Component {
           <select
             id="photon-api"
             class="form-control"
-            {{on "change" this.updatePhotonApi}}
+            {{on "change" (fn @onChange "photonApi")}}
           >
             {{#each this.settings.photonApis as |api|}}
               <option

app/components/app-menu/settings/map-ui.gjs

@@ -1,22 +1,12 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
-import { action } from '@ember/object';
+import { fn } from '@ember/helper';
 import Icon from '#components/icon';
 
 export default class AppMenuSettingsMapUi extends Component {
   @service settings;
 
-  @action
-  toggleKinetic(event) {
-    this.settings.updateMapKinetic(event.target.value === 'true');
-  }
-
-  @action
-  toggleQuickSearchButtons(event) {
-    this.settings.updateShowQuickSearchButtons(event.target.value === 'true');
-  }
-
   <template>
     {{! template-lint-disable no-nested-interactive }}
     <details>
@@ -30,7 +20,7 @@ export default class AppMenuSettingsMapUi extends Component {
           <select
             id="show-quick-search"
             class="form-control"
-            {{on "change" this.toggleQuickSearchButtons}}
+            {{on "change" (fn @onChange "showQuickSearchButtons")}}
           >
             <option
               value="true"
@@ -54,7 +44,7 @@ export default class AppMenuSettingsMapUi extends Component {
           <select
             id="map-kinetic"
             class="form-control"
-            {{on "change" this.toggleKinetic}}
+            {{on "change" (fn @onChange "mapKinetic")}}
           >
             <option
               value="true"

app/components/app-menu/settings/nostr.gjs

@@ -1,19 +1,12 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
-import { action } from '@ember/object';
+import { fn } from '@ember/helper';
 import Icon from '#components/icon';
 
 export default class AppMenuSettingsNostr extends Component {
   @service settings;
 
-  @action
-  togglePhotoFallbackUploads(event) {
-    this.settings.updateNostrPhotoFallbackUploads(
-      event.target.value === 'true'
-    );
-  }
-
   <template>
     {{! template-lint-disable no-nested-interactive }}
     <details>
@@ -28,7 +21,7 @@ export default class AppMenuSettingsNostr extends Component {
           <select
             id="nostr-photo-fallback-uploads"
             class="form-control"
-            {{on "change" this.togglePhotoFallbackUploads}}
+            {{on "change" (fn @onChange "nostrPhotoFallbackUploads")}}
           >
             <option
               value="true"

app/services/settings.js

@@ -1,12 +1,21 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
+const DEFAULT_SETTINGS = {
+  overpassApi: 'https://overpass-api.de/api/interpreter',
+  mapKinetic: true,
+  photonApi: 'https://photon.komoot.io/api/',
+  showQuickSearchButtons: true,
+  nostrPhotoFallbackUploads: false,
+};
+
 export default class SettingsService extends Service {
-  @tracked overpassApi = 'https://overpass-api.de/api/interpreter';
+  @tracked overpassApi = DEFAULT_SETTINGS.overpassApi;
-  @tracked mapKinetic = true;
+  @tracked mapKinetic = DEFAULT_SETTINGS.mapKinetic;
-  @tracked photonApi = 'https://photon.komoot.io/api/';
+  @tracked photonApi = DEFAULT_SETTINGS.photonApi;
-  @tracked showQuickSearchButtons = true;
+  @tracked showQuickSearchButtons = DEFAULT_SETTINGS.showQuickSearchButtons;
-  @tracked nostrPhotoFallbackUploads = false;
+  @tracked nostrPhotoFallbackUploads =
+    DEFAULT_SETTINGS.nostrPhotoFallbackUploads;
 
   overpassApis = [
     {
@@ -40,62 +49,79 @@ export default class SettingsService extends Service {
   }
 
   loadSettings() {
-    const savedApi = localStorage.getItem('marco:overpass-api');
+    let settings = {};
-    if (savedApi) {
+    const savedSettings = localStorage.getItem('marco:settings');
-      // Check if saved API is still in the allowed list
+
-      const isValid = this.overpassApis.some((api) => api.url === savedApi);
+    if (savedSettings) {
-      if (isValid) {
+      try {
-        this.overpassApi = savedApi;
+        settings = JSON.parse(savedSettings);
-      } else {
+      } catch (e) {
-        // If not valid, revert to default
+        console.error('Failed to parse settings from localStorage', e);
-        this.overpassApi = 'https://overpass-api.de/api/interpreter';
-        localStorage.setItem('marco:overpass-api', this.overpassApi);
       }
+    } else {
+      // Migration from old individual keys
+      const savedApi = localStorage.getItem('marco:overpass-api');
+      if (savedApi) settings.overpassApi = savedApi;
+
+      const savedKinetic = localStorage.getItem('marco:map-kinetic');
+      if (savedKinetic !== null) settings.mapKinetic = savedKinetic === 'true';
+
+      const savedShowQuickSearch = localStorage.getItem(
+        'marco:show-quick-search'
+      );
+      if (savedShowQuickSearch !== null) {
+        settings.showQuickSearchButtons = savedShowQuickSearch === 'true';
+      }
+
+      const savedNostrPhotoFallbackUploads = localStorage.getItem(
+        'marco:nostr-photo-fallback-uploads'
+      );
+      if (savedNostrPhotoFallbackUploads !== null) {
+        settings.nostrPhotoFallbackUploads =
+          savedNostrPhotoFallbackUploads === 'true';
+      }
+
+      const savedPhotonApi = localStorage.getItem('marco:photon-api');
+      if (savedPhotonApi) settings.photonApi = savedPhotonApi;
     }
 
-    const savedKinetic = localStorage.getItem('marco:map-kinetic');
+    // Merge with defaults
-    if (savedKinetic !== null) {
+    const finalSettings = { ...DEFAULT_SETTINGS, ...settings };
-      this.mapKinetic = savedKinetic === 'true';
-    }
-    // Default is true (initialized in class field)
 
-    const savedShowQuickSearch = localStorage.getItem(
+    // Validate overpass API
-      'marco:show-quick-search'
+    const isValid = this.overpassApis.some(
+      (api) => api.url === finalSettings.overpassApi
     );
-    if (savedShowQuickSearch !== null) {
+    if (!isValid) {
-      this.showQuickSearchButtons = savedShowQuickSearch === 'true';
+      finalSettings.overpassApi = DEFAULT_SETTINGS.overpassApi;
     }
 
-    const savedNostrPhotoFallbackUploads = localStorage.getItem(
+    // Apply to tracked properties
-      'marco:nostr-photo-fallback-uploads'
+    this.overpassApi = finalSettings.overpassApi;
-    );
+    this.mapKinetic = finalSettings.mapKinetic;
-    if (savedNostrPhotoFallbackUploads !== null) {
+    this.photonApi = finalSettings.photonApi;
-      this.nostrPhotoFallbackUploads =
+    this.showQuickSearchButtons = finalSettings.showQuickSearchButtons;
-        savedNostrPhotoFallbackUploads === 'true';
+    this.nostrPhotoFallbackUploads = finalSettings.nostrPhotoFallbackUploads;
+
+    // Save to ensure migrated settings are stored in the new format
+    this.saveSettings();
+  }
+
+  saveSettings() {
+    const settings = {
+      overpassApi: this.overpassApi,
+      mapKinetic: this.mapKinetic,
+      photonApi: this.photonApi,
+      showQuickSearchButtons: this.showQuickSearchButtons,
+      nostrPhotoFallbackUploads: this.nostrPhotoFallbackUploads,
+    };
+    localStorage.setItem('marco:settings', JSON.stringify(settings));
+  }
+
+  update(key, value) {
+    if (key in DEFAULT_SETTINGS) {
+      this[key] = value;
+      this.saveSettings();
     }
   }
-
-  updateOverpassApi(url) {
-    this.overpassApi = url;
-    localStorage.setItem('marco:overpass-api', url);
-  }
-
-  updateMapKinetic(enabled) {
-    this.mapKinetic = enabled;
-    localStorage.setItem('marco:map-kinetic', String(enabled));
-  }
-
-  updateShowQuickSearchButtons(enabled) {
-    this.showQuickSearchButtons = enabled;
-    localStorage.setItem('marco:show-quick-search', String(enabled));
-  }
-
-  updatePhotonApi(url) {
-    this.photonApi = url;
-  }
-
-  updateNostrPhotoFallbackUploads(enabled) {
-    this.nostrPhotoFallbackUploads = enabled;
-    localStorage.setItem('marco:nostr-photo-fallback-uploads', String(enabled));
-  }
 }