Refactor settings menu, add Nostr settings

Adds a setting to control if photos should be uploaded only to the
main/default server, or all known servers of a user.

Only upload to the main server by default, to speed up adding photos.

app/components/app-menu/settings.gjs

@@ -1,163 +1,25 @@
-import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
-import { service } from '@ember/service';
-import { action } from '@ember/object';
 import Icon from '#components/icon';
-import eq from 'ember-truth-helpers/helpers/eq';
+import AppMenuSettingsMapUi from './settings/map-ui';
+import AppMenuSettingsApis from './settings/apis';
+import AppMenuSettingsNostr from './settings/nostr';
 
-export default class AppMenuSettings extends Component {
-  @service settings;
+<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>
 
-  @action
-  updateApi(event) {
-    this.settings.updateOverpassApi(event.target.value);
-  }
-
-  @action
-  toggleKinetic(event) {
-    this.settings.updateMapKinetic(event.target.value === 'true');
-  }
-
-  @action
-  toggleQuickSearchButtons(event) {
-    this.settings.updateShowQuickSearchButtons(event.target.value === 'true');
-  }
-
-  @action
-  updatePhotonApi(event) {
-    this.settings.updatePhotonApi(event.target.value);
-  }
-
-  <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" />
-      </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">
-        <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}}
-              >
-                <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>
-        </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>
-}
+  <div class="sidebar-content">
+    <section class="settings-section">
+      <AppMenuSettingsMapUi />
+      <AppMenuSettingsApis />
+      <AppMenuSettingsNostr />
+    </section>
+  </div>
+</template>

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

@@ -0,0 +1,69 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+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>
+      <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>
+  </template>
+}

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

@@ -0,0 +1,76 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+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>
+      <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}}
+          >
+            <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>
+    </details>
+  </template>
+}

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

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+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>
+      <summary>
+        <Icon @name="zap" @size={{20}} />
+        <span>Nostr</span>
+      </summary>
+      <div class="details-content">
+        <div class="form-group">
+          <label for="nostr-photo-fallback-uploads">Upload photos to fallback
+            servers</label>
+          <select
+            id="nostr-photo-fallback-uploads"
+            class="form-control"
+            {{on "change" this.togglePhotoFallbackUploads}}
+          >
+            <option
+              value="true"
+              selected={{if this.settings.nostrPhotoFallbackUploads "selected"}}
+            >
+              Yes
+            </option>
+            <option
+              value="false"
+              selected={{unless
+                this.settings.nostrPhotoFallbackUploads
+                "selected"
+              }}
+            >
+              No
+            </option>
+          </select>
+        </div>
+      </div>
+    </details>
+  </template>
+}

app/services/blossom.js

@@ -21,10 +21,17 @@ function getBlossomUrl(serverUrl, path) {
 export default class BlossomService extends Service {
   @service nostrAuth;
   @service nostrData;
+  @service settings;
 
   get servers() {
     const servers = this.nostrData.blossomServers;
-    return servers.length ? servers : [DEFAULT_BLOSSOM_SERVER];
+    const allServers = servers.length ? servers : [DEFAULT_BLOSSOM_SERVER];
+
+    if (!this.settings.nostrPhotoFallbackUploads) {
+      return [allServers[0]];
+    }
+
+    return allServers;
   }
 
   async _getAuthHeader(action, hash, serverUrl) {

app/services/settings.js

@@ -6,6 +6,7 @@ export default class SettingsService extends Service {
   @tracked mapKinetic = true;
   @tracked photonApi = 'https://photon.komoot.io/api/';
   @tracked showQuickSearchButtons = true;
+  @tracked nostrPhotoFallbackUploads = false;
 
   overpassApis = [
     {
@@ -64,6 +65,14 @@ export default class SettingsService extends Service {
     if (savedShowQuickSearch !== null) {
       this.showQuickSearchButtons = savedShowQuickSearch === 'true';
     }
+
+    const savedNostrPhotoFallbackUploads = localStorage.getItem(
+      'marco:nostr-photo-fallback-uploads'
+    );
+    if (savedNostrPhotoFallbackUploads !== null) {
+      this.nostrPhotoFallbackUploads =
+        savedNostrPhotoFallbackUploads === 'true';
+    }
   }
 
   updateOverpassApi(url) {
@@ -84,4 +93,9 @@ export default class SettingsService extends Service {
   updatePhotonApi(url) {
     this.photonApi = url;
   }
+
+  updateNostrPhotoFallbackUploads(enabled) {
+    this.nostrPhotoFallbackUploads = enabled;
+    localStorage.setItem('marco:nostr-photo-fallback-uploads', String(enabled));
+  }
 }