Hide settings pane on outside click, render above places pane

app/components/settings-pane.gjs

@@ -1,10 +1,16 @@
 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 SettingsPane extends Component {
-  constructor() {
+  @service settings;
-    super(...arguments);
+
+  @action
+  updateApi(event) {
+    this.settings.updateOverpassApi(event.target.value);
   }
 
   <template>
@@ -19,9 +25,23 @@ export default class SettingsPane extends Component {
       <div class="sidebar-content">
         <section class="settings-section">
           <h3>Settings</h3>
-          <p>
+          <div class="form-group">
-            <em>App settings/preferences go here.</em>
+            <label for="overpass-api">Overpass API Provider</label>
-          </p>
+            <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>
         </section>
         <section class="settings-section">
           <h3>About</h3>

app/services/osm.js

@@ -1,6 +1,8 @@
-import Service from '@ember/service';
+import Service, { service } from '@ember/service';
 
 export default class OsmService extends Service {
+  @service settings;
+
   controller = null;
 
   async getNearbyPois(lat, lon, radius = 50) {
@@ -23,10 +25,7 @@ export default class OsmService extends Service {
 out center;
     `.trim();
 
-    const url = `https://overpass.bke.ro/api/interpreter?data=${encodeURIComponent(
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;
-      // const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
-      query
-    )}`;
 
     try {
       const res = await this.fetchWithRetry(url, { signal });
@@ -101,10 +100,7 @@ out center;
       `.trim();
     }
 
-    const url = `https://overpass.bke.ro/api/interpreter?data=${encodeURIComponent(
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;
-      // const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
-      query
-    )}`;
     const res = await this.fetchWithRetry(url);
     if (!res.ok) throw new Error('Overpass request failed');
     const data = await res.json();

app/services/settings.js

@@ -0,0 +1,32 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class SettingsService extends Service {
+  @tracked overpassApi = 'https://overpass.bke.ro/api/interpreter';
+
+  overpassApis = [
+    { name: 'bke.ro', url: 'https://overpass.bke.ro/api/interpreter' },
+    { name: 'overpass-api.de', url: 'https://overpass-api.de/api/interpreter' },
+    {
+      name: 'private.coffee',
+      url: 'https://overpass.private.coffee/api/interpreter',
+    },
+  ];
+
+  constructor() {
+    super(...arguments);
+    this.loadSettings();
+  }
+
+  loadSettings() {
+    const savedApi = localStorage.getItem('marco-overpass-api');
+    if (savedApi) {
+      this.overpassApi = savedApi;
+    }
+  }
+
+  updateOverpassApi(url) {
+    this.overpassApi = url;
+    localStorage.setItem('marco-overpass-api', url);
+  }
+}

app/styles/app.css

@@ -197,6 +197,10 @@ body {
   flex-direction: column;
 }
 
+.settings-pane.sidebar {
+  z-index: 3200; /* Higher than Places Sidebar (3100) */
+}
+
 /* Settings Pane Mobile Overrides */
 @media (width <= 768px) {
   .settings-pane.sidebar {
@@ -280,6 +284,10 @@ body {
   letter-spacing: 0.5px;
 }
 
+.settings-section .form-group {
+  margin-top: 1rem;
+}
+
 .btn-full {
   width: 100%;
 }
@@ -298,6 +306,16 @@ body {
   background: #0069d9;
 }
 
+.meta-info {
+  font-size: 0.9rem;
+}
+
+.meta-info p:first-child {
+  margin-top: 1.2rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid #eee;
+}
+
 .meta-info a {
   color: #007bff;
   text-decoration: none;

app/templates/application.gjs

@@ -8,7 +8,7 @@ import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { eq } from 'ember-truth-helpers';
-import { and } from 'ember-truth-helpers';
+import { and, or } from 'ember-truth-helpers';
 import { on } from '@ember/modifier';
 
 export default class ApplicationComponent extends Component {
@@ -74,6 +74,15 @@ export default class ApplicationComponent extends Component {
     }
   }
 
+  @action
+  handleOutsideClick() {
+    if (this.isSettingsOpen) {
+      this.closeSettings();
+    } else {
+      this.closeSidebar();
+    }
+  }
+
   @action
   closeSidebar() {
     this.nearbyPlaces = null;
@@ -105,8 +114,8 @@ export default class ApplicationComponent extends Component {
 
     <Map
       @onPlacesFound={{this.showPlaces}}
-      @isSidebarOpen={{this.isSidebarOpen}}
+      @isSidebarOpen={{or this.isSidebarOpen this.isSettingsOpen}}
-      @onOutsideClick={{this.closeSidebar}}
+      @onOutsideClick={{this.handleOutsideClick}}
     />
 
     {{#if (and (eq this.router.currentRouteName "index") this.nearbyPlaces)}}