1.25.0

Reviewed-on: #67

app/components/app-header.gjs

@@ -9,17 +9,72 @@ import SearchBox from '#components/search-box';
 import CategoryChips from '#components/category-chips';
 import { and } from 'ember-truth-helpers';
 import cachedImage from '../modifiers/cached-image';
+import { POI_CATEGORIES } from '../utils/poi-categories';
 
 export default class AppHeaderComponent extends Component {
   @service storage;
   @service settings;
   @service nostrAuth;
   @service nostrData;
+  @service mapUi;
+  @service router;
   @tracked isUserMenuOpen = false;
   @tracked searchQuery = '';
 
-  get hasQuery() {
-    return !!this.searchQuery;
+  constructor() {
+    super(...arguments);
+    if (this.router && typeof this.router.on === 'function') {
+      this.router.on('routeDidChange', this.syncSearchQuery);
+    }
+    this.syncSearchQuery();
+  }
+
+  willDestroy() {
+    if (this.router && typeof this.router.off === 'function') {
+      this.router.off('routeDidChange', this.syncSearchQuery);
+    }
+    super.willDestroy(...arguments);
+  }
+
+  @action
+  syncSearchQuery() {
+    const qp =
+      this.mapUi.currentSearch || this.router?.currentRoute?.queryParams;
+    if (qp?.q) {
+      this.searchQuery = qp.q;
+    } else if (qp?.category) {
+      const category = POI_CATEGORIES.find((c) => c.id === qp.category);
+      this.searchQuery = category ? category.label : qp.category;
+    } else {
+      this.searchQuery = '';
+    }
+  }
+
+  get isSearching() {
+    // 1. If we are actively focusing/typing in the search box with a query, hide pills
+    if (this.mapUi.searchBoxHasFocus && this.searchQuery) {
+      return true;
+    }
+
+    // 2. If we are on the search route, check loading and results status
+    if (this.router?.currentRouteName === 'search') {
+      if (this.mapUi.loadingState) {
+        return false; // Keep pills visible while loading
+      }
+      return this.mapUi.searchResults && this.mapUi.searchResults.length > 0;
+    }
+
+    // 3. Fallback for integration tests (non-search route with a query)
+    if (this.router?.currentRouteName !== 'search' && this.searchQuery) {
+      return true;
+    }
+
+    return false;
+  }
+
+  get showQuickSearch() {
+    const zoom = this.mapUi.currentZoom ?? 13;
+    return this.settings.showQuickSearchButtons && zoom >= 12;
   }
 
   @action
@@ -54,8 +109,8 @@ export default class AppHeaderComponent extends Component {
         />
       </div>
 
-      {{#if this.settings.showQuickSearchButtons}}
-        <div class="header-center {{if this.hasQuery 'searching'}}">
+      {{#if this.showQuickSearch}}
+        <div class="header-center {{if this.isSearching 'searching'}}">
           <CategoryChips @onSelect={{this.handleChipSelect}} />
         </div>
       {{/if}}

app/components/app-menu/about.gjs

@@ -3,11 +3,11 @@ import Icon from '#components/icon';
 
 <template>
   {{! template-lint-disable no-nested-interactive }}
-  <div class="sidebar-header">
+  <div class="sidebar-header has-back-btn">
     <button type="button" class="back-btn" {{on "click" @onBack}}>
       <Icon @name="arrow-left" @size={{20}} @color="#333" />
     </button>
-    <h2>About</h2>
+    <h2 class="sidebar-header-text-centered">About</h2>
     <button type="button" class="close-btn" {{on "click" @onClose}}>
       <Icon @name="x" @size={{20}} @color="#333" />
     </button>

app/components/app-menu/home.gjs

@@ -19,6 +19,12 @@ import iconRounded from '../../icons/icon-rounded.svg?raw';
 
   <div class="sidebar-content">
     <ul class="app-menu">
+      <li>
+        <button type="button" {{on "click" @onSavedPlaces}}>
+          <Icon @name="bookmark" @size={{20}} />
+          <span>Collections</span>
+        </button>
+      </li>
       <li>
         <button type="button" {{on "click" (fn @onNavigate "settings")}}>
           <Icon @name="settings" @size={{20}} />

app/components/app-menu/index.gjs

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
+import { service } from '@ember/service';
 import eq from 'ember-truth-helpers/helpers/eq';
 
 import AppMenuHome from './home';
@@ -9,6 +10,7 @@ import AppMenuSettings from './settings';
 import AppMenuAbout from './about';
 
 export default class AppMenu extends Component {
+  @service router;
   @tracked currentView = 'menu'; // 'menu', 'settings', 'about'
 
   @action
@@ -16,10 +18,19 @@ export default class AppMenu extends Component {
     this.currentView = view;
   }
 
+  @action
+  goToSavedPlaces() {
+    this.router.transitionTo('lists.index');
+  }
+
   <template>
     <div class="sidebar app-menu-pane">
       {{#if (eq this.currentView "menu")}}
-        <AppMenuHome @onNavigate={{this.setView}} @onClose={{@onClose}} />
+        <AppMenuHome
+          @onNavigate={{this.setView}}
+          @onClose={{@onClose}}
+          @onSavedPlaces={{this.goToSavedPlaces}}
+        />
 
       {{else if (eq this.currentView "settings")}}
         <AppMenuSettings

app/components/app-menu/settings.gjs

@@ -6,6 +6,7 @@ import Icon from '#components/icon';
 import AppMenuSettingsMapUi from './settings/map-ui';
 import AppMenuSettingsApis from './settings/apis';
 import AppMenuSettingsNostr from './settings/nostr';
+import AppMenuSettingsExperimental from './settings/experimental';
 
 export default class AppMenuSettings extends Component {
   @service settings;
@@ -20,11 +21,11 @@ export default class AppMenuSettings extends Component {
   }
 
   <template>
-    <div class="sidebar-header">
+    <div class="sidebar-header has-back-btn">
       <button type="button" class="back-btn" {{on "click" @onBack}}>
         <Icon @name="arrow-left" @size={{20}} @color="#333" />
       </button>
-      <h2>Settings</h2>
+      <h2 class="sidebar-header-text-centered">Settings</h2>
       <button type="button" class="close-btn" {{on "click" @onClose}}>
         <Icon @name="x" @size={{20}} @color="#333" />
       </button>
@@ -35,6 +36,7 @@ export default class AppMenuSettings extends Component {
         <AppMenuSettingsMapUi @onChange={{this.updateSetting}} />
         <AppMenuSettingsApis @onChange={{this.updateSetting}} />
         <AppMenuSettingsNostr @onChange={{this.updateSetting}} />
+        <AppMenuSettingsExperimental @onChange={{this.updateSetting}} />
       </section>
     </div>
   </template>

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

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { fn } from '@ember/helper';
+import Icon from '#components/icon';
+
+export default class AppMenuSettingsExperimental extends Component {
+  @service settings;
+
+  <template>
+    {{! template-lint-disable no-nested-interactive }}
+    <details>
+      <summary>
+        <Icon @name="alert-triangle" @size={{20}} />
+        <span>Experimental</span>
+      </summary>
+      <div class="details-content form-layout">
+        <div class="form-group">
+          <label for="experimental-enable-photo-deletion">Enable photo deletion
+            (own photos)</label>
+          <select
+            id="experimental-enable-photo-deletion"
+            class="form-control"
+            {{on "change" (fn @onChange "experimentalEnablePhotoDeletion")}}
+          >
+            <option
+              value="true"
+              selected={{if
+                this.settings.experimentalEnablePhotoDeletion
+                "selected"
+              }}
+            >
+              On
+            </option>
+            <option
+              value="false"
+              selected={{unless
+                this.settings.experimentalEnablePhotoDeletion
+                "selected"
+              }}
+            >
+              Off
+            </option>
+          </select>
+        </div>
+      </div>
+    </details>
+  </template>
+}

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

@@ -5,7 +5,11 @@ import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { fn } from '@ember/helper';
 import Icon from '#components/icon';
-import { normalizeRelayUrl } from '../../../utils/nostr';
+import {
+  excludeRequiredRelays,
+  mergeRequiredRelays,
+  normalizeRelayUrl,
+} from '../../../utils/nostr';
 
 const stripProtocol = (url) => (url ? url.replace(/^wss?:\/\//, '') : '');
 
@@ -17,6 +21,74 @@ export default class AppMenuSettingsNostr extends Component {
   @tracked newReadRelay = '';
   @tracked newWriteRelay = '';
 
+  get customReadRelays() {
+    return excludeRequiredRelays(
+      this.settings.nostrReadRelays || [],
+      this.nostrData.requiredReadRelays
+    );
+  }
+
+  get customWriteRelays() {
+    return excludeRequiredRelays(
+      this.settings.nostrWriteRelays || [],
+      this.nostrData.requiredWriteRelays
+    );
+  }
+
+  get readRelayExclusions() {
+    return this.settings.nostrReadRelayExclusions || [];
+  }
+
+  get writeRelayExclusions() {
+    return this.settings.nostrWriteRelayExclusions || [];
+  }
+
+  get requiredReadRelaySet() {
+    return new Set(this.nostrData.requiredReadRelays.filter(Boolean));
+  }
+
+  get requiredWriteRelaySet() {
+    return new Set(this.nostrData.requiredWriteRelays.filter(Boolean));
+  }
+
+  get mailboxReadRelaySet() {
+    return new Set(this.nostrData.mailboxReadRelays);
+  }
+
+  get mailboxWriteRelaySet() {
+    return new Set(this.nostrData.mailboxWriteRelays);
+  }
+
+  get hasReadOverrides() {
+    return (
+      this.customReadRelays.length > 0 || this.readRelayExclusions.length > 0
+    );
+  }
+
+  get hasWriteOverrides() {
+    return (
+      this.customWriteRelays.length > 0 || this.writeRelayExclusions.length > 0
+    );
+  }
+
+  get readRelaysForDisplay() {
+    return this.nostrData.activeReadRelays.map((url) => {
+      return {
+        url,
+        isRequired: this.requiredReadRelaySet.has(url),
+      };
+    });
+  }
+
+  get writeRelaysForDisplay() {
+    return this.nostrData.activeWriteRelays.map((url) => {
+      return {
+        url,
+        isRequired: this.requiredWriteRelaySet.has(url),
+      };
+    });
+  }
+
   @action
   updateNewReadRelay(event) {
     this.newReadRelay = event.target.value;
@@ -32,19 +104,51 @@ export default class AppMenuSettingsNostr extends Component {
     const url = normalizeRelayUrl(this.newReadRelay);
     if (!url) return;
 
-    const current =
-      this.settings.nostrReadRelays || this.nostrData.defaultReadRelays;
-    const set = new Set([...current, url]);
-    this.settings.update('nostrReadRelays', Array.from(set));
+    const merged = mergeRequiredRelays(this.nostrData.requiredReadRelays, [
+      ...this.customReadRelays,
+      url,
+    ]);
+    const custom = excludeRequiredRelays(
+      merged,
+      this.nostrData.requiredReadRelays
+    );
+
+    const readExclusions = this.readRelayExclusions.filter((relay) => {
+      return normalizeRelayUrl(relay) !== url;
+    });
+
+    this.settings.update('nostrReadRelays', custom.length > 0 ? custom : null);
+    this.settings.update(
+      'nostrReadRelayExclusions',
+      readExclusions.length > 0 ? readExclusions : null
+    );
     this.newReadRelay = '';
   }
 
   @action
   removeReadRelay(url) {
-    const current =
-      this.settings.nostrReadRelays || this.nostrData.defaultReadRelays;
-    const filtered = current.filter((r) => r !== url);
-    this.settings.update('nostrReadRelays', filtered);
+    if (this.requiredReadRelaySet.has(url)) {
+      return;
+    }
+
+    const normalizedUrl = normalizeRelayUrl(url);
+
+    const remainingCustom = this.customReadRelays.filter((relay) => {
+      return normalizeRelayUrl(relay) !== normalizedUrl;
+    });
+
+    const nextExclusions = this.mailboxReadRelaySet.has(normalizedUrl)
+      ? Array.from(new Set([...this.readRelayExclusions, normalizedUrl]))
+      : this.readRelayExclusions;
+
+    this.settings.update(
+      'nostrReadRelays',
+      remainingCustom.length > 0 ? remainingCustom : null
+    );
+    this.settings.update(
+      'nostrReadRelayExclusions',
+      nextExclusions.length > 0 ? nextExclusions : null
+    );
   }
 
   @action
@@ -64,6 +168,7 @@ export default class AppMenuSettingsNostr extends Component {
   @action
   resetReadRelays() {
     this.settings.update('nostrReadRelays', null);
+    this.settings.update('nostrReadRelayExclusions', null);
   }
 
   @action
@@ -71,24 +176,57 @@ export default class AppMenuSettingsNostr extends Component {
     const url = normalizeRelayUrl(this.newWriteRelay);
     if (!url) return;
 
-    const current =
-      this.settings.nostrWriteRelays || this.nostrData.defaultWriteRelays;
-    const set = new Set([...current, url]);
-    this.settings.update('nostrWriteRelays', Array.from(set));
+    const merged = mergeRequiredRelays(this.nostrData.requiredWriteRelays, [
+      ...this.customWriteRelays,
+      url,
+    ]);
+    const custom = excludeRequiredRelays(
+      merged,
+      this.nostrData.requiredWriteRelays
+    );
+
+    const writeExclusions = this.writeRelayExclusions.filter((relay) => {
+      return normalizeRelayUrl(relay) !== url;
+    });
+
+    this.settings.update('nostrWriteRelays', custom.length > 0 ? custom : null);
+    this.settings.update(
+      'nostrWriteRelayExclusions',
+      writeExclusions.length > 0 ? writeExclusions : null
+    );
     this.newWriteRelay = '';
   }
 
   @action
   removeWriteRelay(url) {
-    const current =
-      this.settings.nostrWriteRelays || this.nostrData.defaultWriteRelays;
-    const filtered = current.filter((r) => r !== url);
-    this.settings.update('nostrWriteRelays', filtered);
+    if (this.requiredWriteRelaySet.has(url)) {
+      return;
+    }
+
+    const normalizedUrl = normalizeRelayUrl(url);
+
+    const remainingCustom = this.customWriteRelays.filter((relay) => {
+      return normalizeRelayUrl(relay) !== normalizedUrl;
+    });
+
+    const nextExclusions = this.mailboxWriteRelaySet.has(normalizedUrl)
+      ? Array.from(new Set([...this.writeRelayExclusions, normalizedUrl]))
+      : this.writeRelayExclusions;
+
+    this.settings.update(
+      'nostrWriteRelays',
+      remainingCustom.length > 0 ? remainingCustom : null
+    );
+    this.settings.update(
+      'nostrWriteRelayExclusions',
+      nextExclusions.length > 0 ? nextExclusions : null
+    );
   }
 
   @action
   resetWriteRelays() {
     this.settings.update('nostrWriteRelays', null);
+    this.settings.update('nostrWriteRelayExclusions', null);
   }
 
   @action
@@ -109,6 +247,100 @@ export default class AppMenuSettingsNostr extends Component {
         <span>Nostr</span>
       </summary>
       <div class="details-content form-layout">
+        <div class="form-group">
+          <label for="new-read-relay">Read Relays</label>
+          <ul class="relay-list">
+            {{#each this.readRelaysForDisplay as |relay|}}
+              <li>
+                <span>{{stripProtocol relay.url}}</span>
+                {{#unless relay.isRequired}}
+                  <button
+                    type="button"
+                    class="btn-remove-relay"
+                    title="Remove relay"
+                    aria-label="Remove"
+                    {{on "click" (fn this.removeReadRelay relay.url)}}
+                  >
+                    <Icon @name="x" @size={{14}} @color="currentColor" />
+                  </button>
+                {{/unless}}
+              </li>
+            {{/each}}
+          </ul>
+          <div class="add-relay-input">
+            <input
+              id="new-read-relay"
+              type="text"
+              class="form-control"
+              placeholder="relay.example.com"
+              value={{this.newReadRelay}}
+              {{on "input" this.updateNewReadRelay}}
+              {{on "keydown" this.handleReadRelayKeydown}}
+            />
+            <button
+              type="button"
+              class="btn btn-secondary"
+              {{on "click" this.addReadRelay}}
+            >Add</button>
+          </div>
+          {{#if this.hasReadOverrides}}
+            <button
+              type="button"
+              class="btn-link reset-relays"
+              {{on "click" this.resetReadRelays}}
+            >
+              Reset to Defaults
+            </button>
+          {{/if}}
+        </div>
+
+        <div class="form-group">
+          <label for="new-write-relay">Write Relays</label>
+          <ul class="relay-list">
+            {{#each this.writeRelaysForDisplay as |relay|}}
+              <li>
+                <span>{{stripProtocol relay.url}}</span>
+                {{#unless relay.isRequired}}
+                  <button
+                    type="button"
+                    class="btn-remove-relay"
+                    title="Remove relay"
+                    aria-label="Remove"
+                    {{on "click" (fn this.removeWriteRelay relay.url)}}
+                  >
+                    <Icon @name="x" @size={{14}} @color="currentColor" />
+                  </button>
+                {{/unless}}
+              </li>
+            {{/each}}
+          </ul>
+          <div class="add-relay-input">
+            <input
+              id="new-write-relay"
+              type="text"
+              class="form-control"
+              placeholder="relay.example.com"
+              value={{this.newWriteRelay}}
+              {{on "input" this.updateNewWriteRelay}}
+              {{on "keydown" this.handleWriteRelayKeydown}}
+            />
+            <button
+              type="button"
+              class="btn btn-secondary"
+              {{on "click" this.addWriteRelay}}
+            >Add</button>
+          </div>
+          {{#if this.hasWriteOverrides}}
+            <button
+              type="button"
+              class="btn-link reset-relays"
+              {{on "click" this.resetWriteRelays}}
+            >
+              Reset to Defaults
+            </button>
+          {{/if}}
+        </div>
+
         <div class="form-group">
           <label for="nostr-photo-fallback-uploads">Upload photos to fallback
             servers</label>
@@ -135,96 +367,6 @@ export default class AppMenuSettingsNostr extends Component {
           </select>
         </div>
 
-        <div class="form-group">
-          <label for="new-read-relay">Read Relays</label>
-          <ul class="relay-list">
-            {{#each this.nostrData.activeReadRelays as |relay|}}
-              <li>
-                <span>{{stripProtocol relay}}</span>
-                <button
-                  type="button"
-                  class="btn-remove-relay"
-                  title="Remove relay"
-                  aria-label="Remove"
-                  {{on "click" (fn this.removeReadRelay relay)}}
-                >
-                  <Icon @name="x" @size={{14}} @color="currentColor" />
-                </button>
-              </li>
-            {{/each}}
-          </ul>
-          <div class="add-relay-input">
-            <input
-              id="new-read-relay"
-              type="text"
-              class="form-control"
-              placeholder="relay.example.com"
-              value={{this.newReadRelay}}
-              {{on "input" this.updateNewReadRelay}}
-              {{on "keydown" this.handleReadRelayKeydown}}
-            />
-            <button
-              type="button"
-              class="btn btn-secondary"
-              {{on "click" this.addReadRelay}}
-            >Add</button>
-          </div>
-          {{#if this.settings.nostrReadRelays}}
-            <button
-              type="button"
-              class="btn-link reset-relays"
-              {{on "click" this.resetReadRelays}}
-            >
-              Reset to Defaults
-            </button>
-          {{/if}}
-        </div>
-
-        <div class="form-group">
-          <label for="new-write-relay">Write Relays</label>
-          <ul class="relay-list">
-            {{#each this.nostrData.activeWriteRelays as |relay|}}
-              <li>
-                <span>{{stripProtocol relay}}</span>
-                <button
-                  type="button"
-                  class="btn-remove-relay"
-                  title="Remove relay"
-                  aria-label="Remove"
-                  {{on "click" (fn this.removeWriteRelay relay)}}
-                >
-                  <Icon @name="x" @size={{14}} @color="currentColor" />
-                </button>
-              </li>
-            {{/each}}
-          </ul>
-          <div class="add-relay-input">
-            <input
-              id="new-write-relay"
-              type="text"
-              class="form-control"
-              placeholder="relay.example.com"
-              value={{this.newWriteRelay}}
-              {{on "input" this.updateNewWriteRelay}}
-              {{on "keydown" this.handleWriteRelayKeydown}}
-            />
-            <button
-              type="button"
-              class="btn btn-secondary"
-              {{on "click" this.addWriteRelay}}
-            >Add</button>
-          </div>
-          {{#if this.settings.nostrWriteRelays}}
-            <button
-              type="button"
-              class="btn-link reset-relays"
-              {{on "click" this.resetWriteRelays}}
-            >
-              Reset to Defaults
-            </button>
-          {{/if}}
-        </div>
-
         <div class="form-group">
           <label>Cached data</label>
           <button

app/components/dropdown-menu.gjs

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import Icon from '#components/icon';
+
+export default class DropdownMenu extends Component {
+  @tracked isOpen = false;
+
+  @action
+  toggleMenu(e) {
+    e?.stopPropagation();
+    this.isOpen = !this.isOpen;
+  }
+
+  @action
+  closeMenu(e) {
+    e?.stopPropagation();
+    this.isOpen = false;
+  }
+
+  get triggerIcon() {
+    return this.args.triggerIcon || 'more-vertical';
+  }
+
+  <template>
+    <div class="dropdown-menu-container">
+      <button
+        class="dropdown-trigger-btn btn-press"
+        type="button"
+        title={{@triggerTitle}}
+        {{on "click" this.toggleMenu}}
+      >
+        <Icon
+          @name={{this.triggerIcon}}
+          @size={{@iconSize}}
+          @color={{@iconColor}}
+        />
+      </button>
+
+      {{#if this.isOpen}}
+        <div class="dropdown-popover {{@popoverClass}}">
+          {{yield this.closeMenu}}
+        </div>
+        <div
+          class="menu-backdrop"
+          {{on "click" this.closeMenu}}
+          role="button"
+        ></div>
+      {{/if}}
+    </div>
+  </template>
+}

app/components/map.gjs

@@ -284,6 +284,7 @@ export default class MapComponent extends Component {
     // Initialize the UI service with the map center
     const initialCenter = toLonLat(view.getCenter());
     this.mapUi.updateCenter(initialCenter[1], initialCenter[0]);
+    this.mapUi.updateZoom(view.getZoom());
 
     apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty', {
       webfonts: 'data:text/css,',
@@ -1046,6 +1047,7 @@ export default class MapComponent extends Component {
     const view = this.mapInstance.getView();
     const center = toLonLat(view.getCenter());
     this.mapUi.updateCenter(center[1], center[0]);
+    this.mapUi.updateZoom(view.getZoom());
 
     // If in creation mode, update the coordinates in the service AND the URL
     if (this.mapUi.isCreating) {
@@ -1086,6 +1088,7 @@ export default class MapComponent extends Component {
     const bbox = { minLat, minLon, maxLat, maxLon };
     this.mapUi.updateBounds(bbox);
     await this.storage.loadPlacesInBounds(bbox);
+    if (this.isDestroying || this.isDestroyed) return;
     this.nostrData.loadPlacesInBounds(bbox);
     this.loadBookmarks(this.storage.placesInView);
 
@@ -1189,6 +1192,12 @@ export default class MapComponent extends Component {
       return;
     }
 
+    if (this.mapUi.searchResults && this.mapUi.searchResults.length > 0) {
+      console.debug('Clearing active search and markers on map click');
+      this.router.transitionTo('index');
+      return;
+    }
+
     // Require Zoom >= 17 for generic map searches
     // This prevents accidental searches when interacting with the map at a high level
     const currentZoom = this.mapInstance.getView().getZoom();

app/components/modal.gjs

@@ -1,9 +1,39 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
+import config from 'marco/config/environment';
 import Icon from './icon';
 
+const ModalContent = <template>
+  <div class="modal-overlay" role="dialog" tabindex="-1" {{on "click" @close}}>
+    <div
+      class="modal-content"
+      role="document"
+      tabindex="0"
+      {{on "click" @stopProp}}
+    >
+      <button
+        type="button"
+        class="close-modal-btn btn-text {{if @disableClose 'disabled'}}"
+        disabled={{@disableClose}}
+        {{on "click" @close}}
+      >
+        <Icon @name="x" @size={{24}} @color="currentColor" />
+      </button>
+      {{yield}}
+    </div>
+  </div>
+</template>;
+
 export default class Modal extends Component {
+  get isTesting() {
+    return config.environment === 'test';
+  }
+
+  get destinationElement() {
+    return document.getElementById('modal-portal') || document.body;
+  }
+
   @action
   stopProp(e) {
     e.stopPropagation();
@@ -18,28 +48,24 @@ export default class Modal extends Component {
   }
 
   <template>
-    <div
-      class="modal-overlay"
-      role="dialog"
-      tabindex="-1"
-      {{on "click" this.close}}
-    >
-      <div
-        class="modal-content"
-        role="document"
-        tabindex="0"
-        {{on "click" this.stopProp}}
+    {{#if this.isTesting}}
+      <ModalContent
+        @close={{this.close}}
+        @stopProp={{this.stopProp}}
+        @disableClose={{@disableClose}}
       >
-        <button
-          type="button"
-          class="close-modal-btn btn-text {{if @disableClose 'disabled'}}"
-          disabled={{@disableClose}}
-          {{on "click" this.close}}
-        >
-          <Icon @name="x" @size={{24}} @color="currentColor" />
-        </button>
         {{yield}}
-      </div>
-    </div>
+      </ModalContent>
+    {{else}}
+      {{#in-element this.destinationElement}}
+        <ModalContent
+          @close={{this.close}}
+          @stopProp={{this.stopProp}}
+          @disableClose={{@disableClose}}
+        >
+          {{yield}}
+        </ModalContent>
+      {{/in-element}}
+    {{/if}}
   </template>
 }

app/components/nostr-connect.gjs

@@ -41,6 +41,40 @@ export default class NostrConnectComponent extends Component {
     }
   }
 
+  @action
+  async copyConnectUri() {
+    const text = this.nostrAuth.connectUri;
+
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        textArea.style.opacity = '0';
+
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        if (!successful) {
+          throw new Error('Fallback copy failed');
+        }
+      }
+      this.toast.show('Connection link copied to clipboard');
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+      alert('Failed to copy link');
+    }
+  }
+
   <template>
     <div class="nostr-connect-modal">
       <h2>Connect with Nostr</h2>
@@ -59,7 +93,7 @@ export default class NostrConnectComponent extends Component {
             class="btn btn-outline"
             type="button"
             disabled
-            title="No Nostr extension found in your browser."
+            title="No Nostr extension found in your browser"
           >
             Browser Extension (Not Found)
           </button>
@@ -79,9 +113,20 @@ export default class NostrConnectComponent extends Component {
           {{#if this.nostrAuth.isMobile}}
             <p>Waiting for you to approve the connection in your mobile signer
               app...</p>
+            <div class="mobile-connect-actions">
+              <a href={{this.nostrAuth.connectUri}} class="btn btn-primary">
+                Open Signer App
+              </a>
+              <button
+                class="btn btn-outline"
+                type="button"
+                {{on "click" this.copyConnectUri}}
+              >
+                Copy Connection Link
+              </button>
+            </div>
           {{else}}
-            <p>Scan this QR code with a compatible Nostr signer app (like
-              Amber):</p>
+            <p>Scan this QR code with a Nostr signer app (like Amber):</p>
             <div class="qr-code-container">
               <canvas {{qrCode this.nostrAuth.connectUri}}></canvas>
             </div>

app/components/photo-carousel.gjs

@@ -8,6 +8,7 @@ import Icon from './icon';
 import fadeInImage from '../modifiers/fade-in-image';
 import { on } from '@ember/modifier';
 import { modifier } from 'ember-modifier';
+import config from 'marco/config/environment';
 
 export default class PhotoCarousel extends Component {
   @tracked canScrollLeft = false;
@@ -33,6 +34,14 @@ export default class PhotoCarousel extends Component {
     return !this.canScrollRight;
   }
 
+  get isGalleryMain() {
+    return this.args.variant === 'gallery-main';
+  }
+
+  get isGalleryThumbnails() {
+    return this.args.variant === 'gallery-thumbnails';
+  }
+
   get variantClass() {
     return this.args.variant || 'inline';
   }
@@ -47,6 +56,8 @@ export default class PhotoCarousel extends Component {
     }
   });
 
+  isProgrammaticScroll = false;
+
   scrollToNewPhoto = modifier((element, [eventId]) => {
     if (eventId && eventId !== this.lastEventId) {
       const isInitial = !this.lastEventId;
@@ -57,6 +68,9 @@ export default class PhotoCarousel extends Component {
         return;
       }
 
+      this.internalEventId = eventId;
+      this.isProgrammaticScroll = true;
+
       const scrollAction = () => {
         const targetSlide = element.querySelector(
           `[data-event-id="${eventId}"]`
@@ -70,11 +84,18 @@ export default class PhotoCarousel extends Component {
             // Restore smooth scroll after the jump
             setTimeout(() => {
               element.style.scrollBehavior = originalScrollBehavior;
+              this.isProgrammaticScroll = false;
             }, 50);
           } else {
             // Use native CSS smooth scrolling for subsequent clicks
             element.scrollLeft = targetSlide.offsetLeft;
+            // Clear programmatic scroll flag after a delay to let scroll finish
+            setTimeout(() => {
+              this.isProgrammaticScroll = false;
+            }, 500);
           }
+        } else {
+          this.isProgrammaticScroll = false;
         }
       };
 
@@ -103,10 +124,16 @@ export default class PhotoCarousel extends Component {
     }
 
     let intersectionObserver;
-    if (this.args.onVisiblePhotoChange && window.IntersectionObserver) {
+    if (
+      this.args.onVisiblePhotoChange &&
+      window.IntersectionObserver &&
+      config.environment !== 'test'
+    ) {
       // Set up intersection observer to track which photo is currently "most" visible
       intersectionObserver = new IntersectionObserver(
         (entries) => {
+          if (this.isProgrammaticScroll) return;
+
           for (let entry of entries) {
             if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
               const eventId = entry.target.dataset.eventId;
@@ -205,29 +232,47 @@ export default class PhotoCarousel extends Component {
                 />
               {{/if}}
 
-              {{#if photo.isLandscape}}
-                <picture>
-                  {{#if photo.thumbUrl}}
-                    <source
-                      media="(max-width: 768px)"
-                      data-srcset={{photo.thumbUrl}}
-                    />
-                  {{/if}}
-                  <img
-                    data-src={{photo.url}}
-                    class="place-header-photo landscape"
-                    alt={{@name}}
-                    {{fadeInImage photo.url}}
-                  />
-                </picture>
-              {{else}}
-                {{! Portrait uses thumb everywhere if available }}
+              {{#if this.isGalleryMain}}
+                <img
+                  data-src={{photo.url}}
+                  class="place-header-photo
+                    {{if photo.isLandscape 'landscape' 'portrait'}}"
+                  alt={{@name}}
+                  {{fadeInImage photo.url}}
+                />
+              {{else if this.isGalleryThumbnails}}
                 <img
                   data-src={{if photo.thumbUrl photo.thumbUrl photo.url}}
-                  class="place-header-photo portrait"
+                  class="place-header-photo
+                    {{if photo.isLandscape 'landscape' 'portrait'}}"
                   alt={{@name}}
                   {{fadeInImage (if photo.thumbUrl photo.thumbUrl photo.url)}}
                 />
+              {{else}}
+                {{#if photo.isLandscape}}
+                  <picture>
+                    {{#if photo.thumbUrl}}
+                      <source
+                        media="(max-width: 768px)"
+                        data-srcset={{photo.thumbUrl}}
+                      />
+                    {{/if}}
+                    <img
+                      data-src={{photo.url}}
+                      class="place-header-photo landscape"
+                      alt={{@name}}
+                      {{fadeInImage photo.url}}
+                    />
+                  </picture>
+                {{else}}
+                  {{! Portrait uses thumb everywhere if available }}
+                  <img
+                    data-src={{if photo.thumbUrl photo.thumbUrl photo.url}}
+                    class="place-header-photo portrait"
+                    alt={{@name}}
+                    {{fadeInImage (if photo.thumbUrl photo.thumbUrl photo.url)}}
+                  />
+                {{/if}}
               {{/if}}
             </div>
           {{/each}}

app/components/photo-gallery.gjs

@@ -1,13 +1,122 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
-import Icon from './icon';
+import { fn } from '@ember/helper';
+import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
+import { task } from 'ember-concurrency';
+import { EventFactory } from 'applesauce-factory';
+import config from 'marco/config/environment';
+import DropdownMenu from './dropdown-menu';
 import PhotoCarousel from './photo-carousel';
+import Icon from './icon';
+
+const GalleryContent = <template>
+  <div
+    class="photo-gallery-overlay"
+    role="dialog"
+    tabindex="-1"
+    {{on "click" @handleBackgroundClick}}
+    {{@bindKeyboard @handleKeydown}}
+  >
+    {{! template-lint-disable no-invalid-interactive }}
+    <div
+      class="photo-gallery-content"
+      data-current-event-id={{@currentPhoto.eventId}}
+    >
+      <div class="actions-btn-container">
+        <DropdownMenu
+          @iconSize={{24}}
+          @triggerIcon="more-horizontal"
+          @iconColor="white"
+          as |closeMenu|
+        >
+          <button
+            class="dropdown-item"
+            type="button"
+            {{on "click" (fn @copyEventId closeMenu)}}
+          >Copy Photo Event ID</button>
+          {{#if @canDeletePhoto}}
+            <button
+              class="dropdown-item text-danger"
+              type="button"
+              {{on "click" (fn @deletePhotoTask.perform closeMenu)}}
+            >Delete Photo</button>
+          {{/if}}
+        </DropdownMenu>
+      </div>
+
+      <button
+        type="button"
+        class="close-btn btn-text"
+        {{on "click" @handleClose}}
+        aria-label="Close gallery"
+        title="Close"
+      >
+        <Icon @name="x" @size={{24}} @color="white" />
+      </button>
+
+      <div class="main-photo-container">
+        <PhotoCarousel
+          @variant="gallery-main"
+          @photos={{@photos}}
+          @scrollToEventId={{@currentPhoto.eventId}}
+          @onVisiblePhotoChange={{@handleVisiblePhotoChange}}
+          @name={{@placeName}}
+        />
+      </div>
+
+      <div class="thumbnail-strip-container">
+        <PhotoCarousel
+          @variant="gallery-thumbnails"
+          @photos={{@photos}}
+          @scrollToEventId={{@currentPhoto.eventId}}
+          @onPhotoClick={{@selectPhoto}}
+          @name={{@placeName}}
+        />
+      </div>
+    </div>
+  </div>
+</template>;
 
 export default class PhotoGallery extends Component {
+  get isTesting() {
+    return config.environment === 'test';
+  }
+
+  get destinationElement() {
+    return document.getElementById('modal-portal') || document.body;
+  }
+
+  @service toast;
+  @service nostrAuth;
+  @service nostrData;
+  @service nostrRelay;
+  @service blossom;
+  @service settings;
+
   @tracked currentPhoto = this.args.selectedPhoto || this.args.photos?.[0];
 
+  get isCreator() {
+    return (
+      this.currentPhoto?.pubkey &&
+      this.nostrAuth.pubkey &&
+      this.currentPhoto.pubkey === this.nostrAuth.pubkey
+    );
+  }
+
+  get canDeletePhoto() {
+    return (
+      this.isCreator && this.settings.experimentalEnablePhotoDeletion === true
+    );
+  }
+
+  bindKeyboard = modifier((element, [handler]) => {
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  });
+
   @action
   handleClose() {
     if (this.args.onClose) {
@@ -21,7 +130,8 @@ export default class PhotoGallery extends Component {
     if (
       e.target.closest('.thumbnail-strip-container') ||
       e.target.closest('.carousel-nav-btn') ||
-      e.target.closest('.close-btn')
+      e.target.closest('.close-btn') ||
+      e.target.closest('.actions-btn-container')
     ) {
       return;
     }
@@ -41,45 +151,145 @@ export default class PhotoGallery extends Component {
     }
   }
 
+  @action
+  handleKeydown(e) {
+    if (!this.args.photos || this.args.photos.length === 0) return;
+
+    if (e.key === 'Escape') {
+      this.handleClose();
+      return;
+    }
+
+    const currentIndex = this.args.photos.indexOf(this.currentPhoto);
+    if (currentIndex === -1) return;
+
+    if (e.key === 'ArrowLeft' && currentIndex > 0) {
+      this.currentPhoto = this.args.photos[currentIndex - 1];
+    } else if (
+      e.key === 'ArrowRight' &&
+      currentIndex < this.args.photos.length - 1
+    ) {
+      this.currentPhoto = this.args.photos[currentIndex + 1];
+    }
+  }
+
+  @action
+  async copyEventId(closeMenu) {
+    if (this.currentPhoto?.eventId) {
+      try {
+        await navigator.clipboard.writeText(this.currentPhoto.eventId);
+        this.toast.show('Event ID copied to clipboard');
+      } catch (err) {
+        console.error('Failed to copy event ID:', err);
+        this.toast.show('Failed to copy event ID');
+      }
+    }
+    closeMenu();
+  }
+
+  deletePhotoTask = task(async (closeMenu) => {
+    if (
+      !confirm(
+        'Are you sure you want to delete this photo? This cannot be undone.'
+      )
+    ) {
+      if (closeMenu) closeMenu();
+      return;
+    }
+
+    try {
+      const eventId = this.currentPhoto.eventId;
+
+      // Publish Nostr kind: 5 deletion event first so we don't end up with dead blossom links on a failure
+      const factory = new EventFactory({ signer: this.nostrAuth.signer });
+      const tags = [['e', eventId]];
+
+      if (this.currentPhoto.placeIdentifier) {
+        tags.push(['i', this.currentPhoto.placeIdentifier]);
+      }
+
+      const template = {
+        kind: 5,
+        created_at: Math.floor(Date.now() / 1000),
+        content: 'Deleted photo',
+        tags,
+      };
+
+      const event = await factory.sign(template);
+      await this.nostrRelay.publish(this.nostrData.activeWriteRelays, event);
+
+      // Remove from local store by adding the kind 5 to it
+      this.nostrData.store.add(event);
+
+      // Now that the event is published, try to delete from Blossom
+      const hashRegex = /[0-9a-f]{64}/i;
+
+      if (this.currentPhoto.url) {
+        const match = this.currentPhoto.url.match(hashRegex);
+        if (match) {
+          try {
+            await this.blossom.delete(match[0]);
+          } catch (e) {
+            console.warn('Failed to delete main image from blossom:', e);
+          }
+        }
+      }
+
+      if (this.currentPhoto.thumbUrl) {
+        const match = this.currentPhoto.thumbUrl.match(hashRegex);
+        if (match) {
+          try {
+            await this.blossom.delete(match[0]);
+          } catch (e) {
+            console.warn('Failed to delete thumb image from blossom:', e);
+          }
+        }
+      }
+
+      this.toast.show('Photo deleted successfully');
+
+      if (closeMenu) closeMenu();
+      this.handleClose();
+    } catch (e) {
+      console.error('Failed to delete photo:', e);
+      this.toast.show('Failed to delete photo: ' + e.message);
+      if (closeMenu) closeMenu();
+    }
+  });
+
   <template>
-    <div
-      class="photo-gallery-overlay"
-      role="dialog"
-      tabindex="-1"
-      {{on "click" this.handleBackgroundClick}}
-    >
-      {{! template-lint-disable no-invalid-interactive }}
-      <div class="photo-gallery-content">
-        <button
-          type="button"
-          class="close-btn btn-text"
-          {{on "click" this.handleClose}}
-          aria-label="Close gallery"
-          title="Close"
-        >
-          <Icon @name="x" @size={{24}} @color="white" />
-        </button>
-
-        <div class="main-photo-container">
-          <PhotoCarousel
-            @variant="gallery-main"
-            @photos={{@photos}}
-            @scrollToEventId={{this.currentPhoto.eventId}}
-            @onVisiblePhotoChange={{this.handleVisiblePhotoChange}}
-            @name={{@placeName}}
-          />
-        </div>
-
-        <div class="thumbnail-strip-container">
-          <PhotoCarousel
-            @variant="gallery-thumbnails"
-            @photos={{@photos}}
-            @scrollToEventId={{this.currentPhoto.eventId}}
-            @onPhotoClick={{this.selectPhoto}}
-            @name={{@placeName}}
-          />
-        </div>
-      </div>
-    </div>
+    {{#if this.isTesting}}
+      <GalleryContent
+        @handleBackgroundClick={{this.handleBackgroundClick}}
+        @bindKeyboard={{this.bindKeyboard}}
+        @handleKeydown={{this.handleKeydown}}
+        @copyEventId={{this.copyEventId}}
+        @canDeletePhoto={{this.canDeletePhoto}}
+        @deletePhotoTask={{this.deletePhotoTask}}
+        @handleClose={{this.handleClose}}
+        @photos={{@photos}}
+        @currentPhoto={{this.currentPhoto}}
+        @handleVisiblePhotoChange={{this.handleVisiblePhotoChange}}
+        @placeName={{@placeName}}
+        @selectPhoto={{this.selectPhoto}}
+      />
+    {{else}}
+      {{#in-element this.destinationElement}}
+        <GalleryContent
+          @handleBackgroundClick={{this.handleBackgroundClick}}
+          @bindKeyboard={{this.bindKeyboard}}
+          @handleKeydown={{this.handleKeydown}}
+          @copyEventId={{this.copyEventId}}
+          @canDeletePhoto={{this.canDeletePhoto}}
+          @deletePhotoTask={{this.deletePhotoTask}}
+          @handleClose={{this.handleClose}}
+          @photos={{@photos}}
+          @currentPhoto={{this.currentPhoto}}
+          @handleVisiblePhotoChange={{this.handleVisiblePhotoChange}}
+          @placeName={{@placeName}}
+          @selectPhoto={{this.selectPhoto}}
+        />
+      {{/in-element}}
+    {{/if}}
   </template>
 }

app/components/place-details.gjs

@@ -23,6 +23,7 @@ export default class PlaceDetails extends Component {
   @service storage;
   @service nostrAuth;
   @service nostrData;
+  @service mapUi;
   @tracked isEditing = false;
   @tracked showLists = false;
   @tracked isPhotoUploadActive = false;
@@ -345,9 +346,21 @@ export default class PlaceDetails extends Component {
 
   get osmUrl() {
     const id = this.place.osmId;
-    if (!id) return null;
-    const type = this.place.osmType || 'node';
-    return `https://www.openstreetmap.org/${type}/${id}`;
+    if (id) {
+      const type = this.place.osmType || 'node';
+      return `https://www.openstreetmap.org/${type}/${id}`;
+    }
+
+    const lat = this.place.lat;
+    const lon = this.place.lon;
+    if (!lat || !lon) return null;
+
+    const viewLat = this.mapUi.currentCenter?.lat ?? lat;
+    const viewLon = this.mapUi.currentCenter?.lon ?? lon;
+    const zoom = this.mapUi.currentZoom ?? 17;
+    const roundedZoom = Math.round(zoom);
+
+    return `https://www.openstreetmap.org/search?lat=${lat}&lon=${lon}&zoom=${roundedZoom}#map=${roundedZoom}/${Number(viewLat).toFixed(5)}/${Number(viewLon).toFixed(5)}`;
   }
 
   get gmapsUrl() {
@@ -591,7 +604,7 @@ export default class PlaceDetails extends Component {
 
       </div>
 
-      {{#if this.osmUrl}}
+      {{#if this.place.osmId}}
         <div class="meta-info">
           <p class="content-with-icon">
             <Icon @name="feather-camera" />

app/components/place-lists-manager.gjs

@@ -103,7 +103,7 @@ export default class PlaceListsManager extends Component {
             checked={{this.isSaved}}
             {{on "change" this.toggleSaved}}
           />
-          <span class="list-color"></span>
+          <span class="list-color-dot"></span>
           <span class="list-name">Saved places</span>
         </label>
       </div>
@@ -122,7 +122,7 @@ export default class PlaceListsManager extends Component {
               />
               {{! template-lint-disable no-inline-styles }}
               <span
-                class="list-color"
+                class="list-color-dot"
                 style={{this.styleFor list.color}}
               ></span>
               <span class="list-name">{{list.title}}</span>

app/components/place-photo-upload.gjs

@@ -8,6 +8,10 @@ import { task } from 'ember-concurrency';
 import Geohash from 'latlon-geohash';
 import PlacePhotoUploadItem from './place-photo-upload-item';
 import Icon from '#components/icon';
+import { getSuggestedPhotoTags } from '../utils/photo-tag-suggestions';
+import capitalize from '../helpers/capitalize';
+import includes from '../helpers/includes';
+import { fn } from '@ember/helper';
 import { or, not } from 'ember-truth-helpers';
 
 export default class PlacePhotoUpload extends Component {
@@ -22,6 +26,7 @@ export default class PlacePhotoUpload extends Component {
   @tracked error = '';
   @tracked isPublishing = false;
   @tracked isDragging = false;
+  @tracked selectedTags = [];
 
   get place() {
     return this.args.place || {};
@@ -37,6 +42,10 @@ export default class PlacePhotoUpload extends Component {
     );
   }
 
+  get suggestedTags() {
+    return getSuggestedPhotoTags(this.place);
+  }
+
   @action
   handleFileSelect(event) {
     this.addFile(event.target.files[0]);
@@ -93,11 +102,22 @@ export default class PlacePhotoUpload extends Component {
     }
     this.file = null;
     this.uploadedPhoto = null;
+    this.selectedTags = [];
     if (this.args.onUploadStateChange) {
       this.args.onUploadStateChange(false);
     }
   }
 
+  @action
+  toggleTag(tag) {
+    if (this.selectedTags.includes(tag)) {
+      this.selectedTags = [];
+      return;
+    }
+
+    this.selectedTags = [tag];
+  }
+
   deletePhotoTask = task(async (photoData) => {
     try {
       if (photoData.hash) {
@@ -139,6 +159,10 @@ export default class PlacePhotoUpload extends Component {
 
       const tags = [['i', `osm:${osmType}:${osmId}`]];
 
+      for (const tag of this.selectedTags) {
+        tags.push(['t', tag]);
+      }
+
       if (lat && lon) {
         tags.push(['g', Geohash.encode(lat, lon, 4)]);
         tags.push(['g', Geohash.encode(lat, lon, 6)]);
@@ -227,6 +251,26 @@ export default class PlacePhotoUpload extends Component {
           />
         </div>
 
+        {{#if this.suggestedTags.length}}
+          <div class="photo-tag-suggestions">
+            <p class="photo-tag-suggestions-title">
+              Choose a tag/category (optional):
+            </p>
+            <div class="photo-tag-suggestions-list">
+              {{#each this.suggestedTags as |tag|}}
+                <button
+                  type="button"
+                  class="photo-tag-chip
+                    {{if (includes this.selectedTags tag) 'is-selected'}}"
+                  {{on "click" (fn this.toggleTag tag)}}
+                >
+                  {{capitalize tag}}
+                </button>
+              {{/each}}
+            </div>
+          </div>
+        {{/if}}
+
         <button
           type="button"
           class="btn btn-primary btn-publish"

app/components/places-sidebar.gjs

@@ -5,10 +5,13 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import eq from 'ember-truth-helpers/helpers/eq';
+import and from 'ember-truth-helpers/helpers/and';
+import not from 'ember-truth-helpers/helpers/not';
 import PlaceDetails from './place-details';
 import Icon from './icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
 import { getLocalizedName, getPlaceType } from '../utils/osm';
+import restoreScroll from '../modifiers/restore-scroll';
 
 export default class PlacesSidebar extends Component {
   @service storage;
@@ -160,7 +163,11 @@ export default class PlacesSidebar extends Component {
 
   <template>
     <div class="sidebar">
-      <div class="sidebar-header {{if this.hasHeaderPhoto 'no-border'}}">
+      <div
+        class="sidebar-header
+          {{if this.hasHeaderPhoto 'no-border'}}
+          {{if (and (not @selectedPlace) @onBack) 'has-back-btn'}}"
+      >
         {{#if @selectedPlace}}
           <button
             type="button"
@@ -168,11 +175,32 @@ export default class PlacesSidebar extends Component {
             {{on "click" this.clearSelection}}
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
-          {{#if this.isNearbySearch}}
-            <h2><Icon @name="target" @size={{20}} @color="#ea4335" />
-              Nearby</h2>
+          {{#if @onBack}}
+            <button type="button" class="back-btn" {{on "click" @onBack}}><Icon
+                @name="arrow-left"
+                @size={{20}}
+                @color="#333"
+              /></button>
+          {{/if}}
+          {{#if @onBack}}
+            <h2 class="sidebar-header-text-centered">
+              <span class="sidebar-header-icon-wrapper">
+                <Icon
+                  @name="bookmark"
+                  @size={{20}}
+                  @color={{or @color "#898989"}}
+                />
+              </span>
+              {{@title}}
+            </h2>
           {{else}}
-            <h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
+            {{#if this.isNearbySearch}}
+              <h2><Icon @name="target" @size={{20}} @color="#ea4335" />
+                Nearby</h2>
+            {{else}}
+              <h2><Icon @name="search" @size={{20}} @color="#333" />
+                Results</h2>
+            {{/if}}
           {{/if}}
         {{/if}}
         <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
@@ -182,7 +210,7 @@ export default class PlacesSidebar extends Component {
           /></button>
       </div>
 
-      <div class="sidebar-content">
+      <div class="sidebar-content" {{restoreScroll @scrollTop}}>
         {{#if @selectedPlace}}
           <PlaceDetails
             @place={{@selectedPlace}}
@@ -190,54 +218,58 @@ export default class PlacesSidebar extends Component {
             @onSave={{this.updateBookmark}}
           />
         {{else}}
-          {{#if @places}}
-            <ul class="places-list">
-              {{#each @places as |place|}}
-                <li>
-                  <button
-                    type="button"
-                    class="place-item"
-                    {{on "click" (fn this.selectPlace place)}}
-                  >
-                    <div class="place-name">{{or
-                        place.title
-                        place.osmTags.name
-                        place.osmTags.name:en
-                        "Unnamed Place"
-                      }}</div>
-                    <div class="place-type">
-                      {{#if (eq place.source "osm")}}
-                        {{humanizeOsmTag place.type}}
-                      {{else if (eq place.source "photon")}}
-                        {{place.description}}
-                      {{else}}
-                        {{#if place.osmTags}}
-                          {{humanizeOsmTag (getPlaceType place.osmTags)}}
-                        {{else if place.description}}
-                          {{place.description}}
-                        {{/if}}
-                      {{/if}}
-                    </div>
-                  </button>
-                </li>
-              {{/each}}
-            </ul>
+          {{#if @isLoading}}
+            <div class="sidebar-loading">
+              <Icon @name="loading-ring" @size={{24}} @color="#898989" />
+            </div>
           {{else}}
-            {{#if this.isNearbySearch}}
-              <p class="empty-state">No places found nearby.</p>
+            {{#if @places}}
+              <ul class="places-list">
+                {{#each @places as |place|}}
+                  <li>
+                    <button
+                      type="button"
+                      class="place-item"
+                      {{on "click" (fn this.selectPlace place)}}
+                    >
+                      <div class="place-name">{{or
+                          place.title
+                          place.osmTags.name
+                          place.osmTags.name:en
+                          "Unnamed Place"
+                        }}</div>
+                      <div class="place-type">
+                        {{#if (eq place.source "osm")}}
+                          {{humanizeOsmTag place.type}}
+                        {{else if (eq place.source "photon")}}
+                          {{place.description}}
+                        {{else if (getPlaceType place.osmTags)}}
+                          {{getPlaceType place.osmTags}}
+                        {{else}}
+                          Saved place
+                        {{/if}}
+                      </div>
+                    </button>
+                  </li>
+                {{/each}}
+              </ul>
             {{else}}
-              <p class="empty-state">No results found.</p>
+              {{#if this.isNearbySearch}}
+                <p class="empty-state">No places found nearby.</p>
+              {{else}}
+                <p class="empty-state">No results found.</p>
+              {{/if}}
             {{/if}}
-          {{/if}}
 
-          <button
-            type="button"
-            class="btn btn-outline create-place"
-            {{on "click" this.createNewPlace}}
-          >
-            <Icon @name="plus" @size={{18}} @color="var(--link-color)" />
-            Create new place
-          </button>
+            <button
+              type="button"
+              class="btn btn-outline create-place"
+              {{on "click" this.createNewPlace}}
+            >
+              <Icon @name="plus" @size={{18}} @color="var(--link-color)" />
+              Create new place
+            </button>
+          {{/if}}
         {{/if}}
       </div>
     </div>

app/components/search-box.gjs

@@ -13,6 +13,7 @@ import { eq, or } from 'ember-truth-helpers';
 export default class SearchBoxComponent extends Component {
   @service photon;
   @service osm;
+  @service storage;
   @service router;
   @service mapUi;
   @service map; // Assuming we might need map context, but mostly we use router
@@ -50,6 +51,29 @@ export default class SearchBoxComponent extends Component {
     this.searchTask.perform(value);
   }
 
+  formatSavedPlace(place) {
+    const listNames = (place._listIds || [])
+      .map((id) => this.storage.lists?.find((l) => l.id === id)?.title)
+      .filter(Boolean)
+      .join(', ');
+
+    const description = listNames
+      ? `Saved place (${listNames})`
+      : 'Saved place';
+
+    return {
+      source: 'saved',
+      id: place.id,
+      title: place.title,
+      icon: 'bookmark',
+      description,
+      osmId: place.osmId,
+      osmType: place.osmType,
+      lat: place.lat,
+      lon: place.lon,
+    };
+  }
+
   searchTask = task({ restartable: true }, async (term) => {
     await timeout(300);
 
@@ -76,8 +100,29 @@ export default class SearchBoxComponent extends Component {
         icon: 'search',
       }));
 
+      // Filter saved places (minimum 3 characters)
+      let savedMatches = [];
+      if (q.length >= 3) {
+        savedMatches = this.storage.savedPlaces
+          .filter((p) => p.title && p.title.toLowerCase().includes(q))
+          .map((p) => this.formatSavedPlace(p));
+      }
+
       const results = await this.photon.search(query, lat, lon);
-      this.results = [...categoryMatches, ...results];
+
+      // Deduplicate Photon results that are already in saved matches
+      const savedOsmIds = new Set(
+        savedMatches.map((s) => s.osmId).filter(Boolean)
+      );
+      const filteredPhotonResults = results.filter(
+        (r) => !savedOsmIds.has(r.osmId)
+      );
+
+      this.results = [
+        ...categoryMatches,
+        ...savedMatches,
+        ...filteredPhotonResults,
+      ];
     } catch (e) {
       console.error('Search failed', e);
       this.results = [];
@@ -156,8 +201,12 @@ export default class SearchBoxComponent extends Component {
     }
     this.results = []; // Hide popover
 
-    // If it has an OSM ID, go to place details
-    if (place.osmId) {
+    // If it's a custom saved place without an OSM ID, go to place details via internal ID
+    if (place.source === 'saved' && place.id && !place.osmId) {
+      this.router.transitionTo('place', place.id);
+    }
+    // If it has an OSM ID, go to place details via OSM ID
+    else if (place.osmId) {
       // Format: osm:node:123
       // place.osmType is already normalized to 'node', 'way', or 'relation' by PhotonService
       const id = `osm:${place.osmType}:${place.osmId}`;

app/controllers/lists/list.js

@@ -0,0 +1,108 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+
+export default class ListsListController extends Controller {
+  @service router;
+  @service mapUi;
+  @service storage;
+
+  @tracked model;
+  @tracked loadedPlaces = [];
+
+  get listId() {
+    return this.model?.list_id;
+  }
+
+  loadPlacesTask = task({ restartable: true }, async (listId) => {
+    this.loadedPlaces = []; // Clear previous elements immediately to show fresh loader
+    try {
+      this.loadedPlaces = await this.storage.getPlacesInList(listId);
+    } catch (e) {
+      console.error('Failed to load places in list', listId, e);
+      this.loadedPlaces = [];
+    }
+  });
+
+  get scrollTop() {
+    return this.mapUi.getScrollPosition(`list-${this.listId}`);
+  }
+
+  get listColor() {
+    const list = this.storage.lists.find((l) => l.id === this.listId);
+    if (list && list.color) {
+      return list.color;
+    }
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue('--default-list-color')
+      .trim();
+  }
+
+  get listTitle() {
+    const list = this.storage.lists.find((l) => l.id === this.listId);
+    return list ? list.title : 'Collections';
+  }
+
+  get places() {
+    const currentList = this.storage.lists.find((l) => l.id === this.listId);
+    const placeRefsIds = new Set(
+      currentList?.placeRefs?.map((ref) => ref.id) || []
+    );
+
+    // Filter live tracked savedPlaces that are in this list
+    const livePlaces = this.storage.savedPlaces.filter((p) =>
+      placeRefsIds.has(p.id)
+    );
+
+    const merged = [];
+    const seen = new Set();
+
+    // Process live state first to reflect deletions/edits immediately
+    livePlaces.forEach((p) => {
+      merged.push(p);
+      seen.add(p.id);
+    });
+
+    // Supplement with any background-fetched places that are still valid but not in live state yet
+    this.loadedPlaces.forEach((p) => {
+      if (placeRefsIds.has(p.id) && !seen.has(p.id)) {
+        merged.push(p);
+        seen.add(p.id);
+      }
+    });
+
+    return merged;
+  }
+
+  @action
+  selectPlace(place) {
+    if (place) {
+      const sidebarContent = document.querySelector('.sidebar-content');
+      if (sidebarContent) {
+        this.mapUi.saveScrollPosition(
+          `list-${this.listId}`,
+          sidebarContent.scrollTop
+        );
+      }
+      this.mapUi.returnToRoute = {
+        name: 'lists.list',
+        model: this.listId,
+      };
+      this.mapUi.showSidebar();
+      this.mapUi.preventNextZoom = true;
+      this.router.transitionTo('place', place);
+    }
+  }
+
+  @action
+  close() {
+    this.router.transitionTo('index');
+  }
+
+  @action
+  backToLists() {
+    this.router.transitionTo('lists.index');
+  }
+}

app/controllers/search.js

@@ -20,7 +20,26 @@ export default class SearchController extends Controller {
   category = null;
 
   fetchResultsTask = task({ restartable: true }, async (params) => {
-    // Hide sidebar and clear previous results immediately to signal a new search
+    // 1. Check if the incoming parameters match our currently loaded search
+    const isSameSearch =
+      this.mapUi.currentSearch &&
+      params.q === this.mapUi.currentSearch.q &&
+      params.category === this.mapUi.currentSearch.category &&
+      params.lat === this.mapUi.currentSearch.lat &&
+      params.lon === this.mapUi.currentSearch.lon;
+
+    const hasResults =
+      this.mapUi.searchResults && this.mapUi.searchResults.length > 0;
+
+    // 2. If it's a back navigation to the exact same search, resolve instantly with no animation
+    if (isSameSearch && hasResults) {
+      if (this.mapUi.isSidebarVisible) {
+        this.mapUi.showSidebar();
+      }
+      return;
+    }
+
+    // 3. Otherwise, this is a brand new search: hide the sidebar and clear previous results immediately to signal a new search
     this.mapUi.hideSidebar();
     this.mapUi.clearSearchResults();
 
@@ -78,14 +97,17 @@ export default class SearchController extends Controller {
         // Search with Photon (using lat/lon for bias if available)
         pois = await this.photon.search(params.q, lat, lon);
 
-        // Search local bookmarks by name
+        // Search local bookmarks by name (minimum 3 characters)
         const queryLower = params.q.toLowerCase();
-        const localMatches = this.storage.savedPlaces.filter((p) => {
-          return (
-            p.title?.toLowerCase().includes(queryLower) ||
-            p.description?.toLowerCase().includes(queryLower)
-          );
-        });
+        let localMatches = [];
+        if (queryLower.length >= 3) {
+          localMatches = this.storage.savedPlaces.filter((p) => {
+            return (
+              p.title?.toLowerCase().includes(queryLower) ||
+              p.description?.toLowerCase().includes(queryLower)
+            );
+          });
+        }
 
         // Merge local matches
         localMatches.forEach((local) => {

app/helpers/capitalize.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import { capitalize as format } from '../utils/format-text';
+
+export default helper(function capitalize([text]) {
+  return format(text);
+});

app/helpers/includes.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function includes([collection, value]) {
+  if (!Array.isArray(collection)) return false;
+  return collection.includes(value);
+});

app/modifiers/restore-scroll.js

@@ -0,0 +1,10 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [scrollTop]) => {
+  if (element && typeof scrollTop === 'number' && scrollTop > 0) {
+    // Restore inside requestAnimationFrame to guarantee layout rendering is ready
+    requestAnimationFrame(() => {
+      element.scrollTop = scrollTop;
+    });
+  }
+});

app/router.js

@@ -10,6 +10,10 @@ Router.map(function () {
   this.route('place', { path: '/place/:place_id' });
   this.route('place.new', { path: '/place/new' });
   this.route('search');
+  this.route('menu');
+  this.route('lists', function () {
+    this.route('list', { path: '/:list_id' });
+  });
   this.route('oauth', function () {
     this.route('osm-callback', { path: '/osm/callback' });
   });

app/routes/index.js

@@ -6,5 +6,6 @@ export default class IndexRoute extends Route {
 
   activate() {
     this.mapUi.clearSearchResults();
+    this.mapUi.hideSidebar();
   }
 }

app/routes/lists.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class ListsRoute extends Route {
+  @service mapUi;
+
+  activate() {
+    this.mapUi.showSidebar();
+  }
+}

app/routes/lists/index.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class ListsIndexRoute extends Route {}

app/routes/lists/list.js

@@ -0,0 +1,26 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class ListsListRoute extends Route {
+  @service storage;
+
+  model(params) {
+    // Resolve instantly so transition happens in 0ms!
+    return { list_id: params.list_id };
+  }
+
+  setupController(controller, model) {
+    console.debug('DEBUG: setupController controller is:', controller);
+    console.debug(
+      'DEBUG: controller.loadPlacesTask is:',
+      controller?.loadPlacesTask
+    );
+    controller.model = model;
+    super.setupController(controller, model);
+    if (controller && controller.loadPlacesTask) {
+      controller.loadPlacesTask.perform(model.list_id);
+    } else {
+      console.error('DEBUG: ERROR! controller.loadPlacesTask is undefined!');
+    }
+  }
+}

app/routes/menu.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class MenuRoute extends Route {
+  @service mapUi;
+
+  activate() {
+    this.mapUi.showSidebar();
+  }
+}

app/routes/place.js

@@ -108,6 +108,7 @@ export default class PlaceRoute extends Route {
     this.mapUi.clearSelection();
     // Reset the "return to search" flag so it doesn't persist to subsequent navigations
     this.mapUi.returnToSearch = false;
+    this.mapUi.returnToRoute = null;
   }
 
   async loadOsmPlace(id, type = null) {

app/services/map-ui.js

@@ -1,5 +1,6 @@
 import Service, { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class MapUiService extends Service {
   @service nostrData;
@@ -9,8 +10,10 @@ export default class MapUiService extends Service {
   @tracked isCreating = false;
   @tracked creationCoordinates = null;
   @tracked returnToSearch = false;
+  @tracked returnToRoute = null;
   @tracked currentCenter = null;
   @tracked currentBounds = null;
+  @tracked currentZoom = null;
   @tracked searchBoxHasFocus = false;
   @tracked selectionOptions = {};
   @tracked preventNextZoom = false;
@@ -18,13 +21,33 @@ export default class MapUiService extends Service {
   @tracked currentSearch = null;
   @tracked loadingState = null;
   @tracked isSidebarVisible = false;
+  @tracked isSidebarOpening = false;
+
+  scrollPositions = {};
+
+  @action
+  saveScrollPosition(key, value) {
+    this.scrollPositions[key] = value;
+  }
+
+  @action
+  getScrollPosition(key) {
+    return this.scrollPositions[key] || 0;
+  }
 
   showSidebar() {
-    this.isSidebarVisible = true;
+    if (!this.isSidebarVisible) {
+      this.isSidebarVisible = true;
+      this.isSidebarOpening = true;
+      setTimeout(() => {
+        this.isSidebarOpening = false;
+      }, 250);
+    }
   }
 
   hideSidebar() {
     this.isSidebarVisible = false;
+    this.isSidebarOpening = false;
   }
 
   selectPlace(place, options = {}) {
@@ -81,6 +104,10 @@ export default class MapUiService extends Service {
     this.currentCenter = { lat, lon };
   }
 
+  updateZoom(zoom) {
+    this.currentZoom = zoom;
+  }
+
   updateBounds(bounds) {
     this.currentBounds = bounds;
   }

app/services/nostr-data.js

@@ -6,7 +6,12 @@ import { MailboxesModel } from 'applesauce-core/models/mailboxes';
 import { npubEncode } from 'applesauce-core/helpers/pointers';
 import { persistEventsToCache } from 'applesauce-core/helpers/event-cache';
 import { NostrIDB, openDB } from 'nostr-idb';
-import { normalizeRelayUrl } from '../utils/nostr';
+import {
+  excludeRequiredRelays,
+  mergeRequiredRelays,
+  normalizeRelayUrl,
+  uniqNormalizedRelays,
+} from '../utils/nostr';
 import { getGeohashPrefixesInBbox } from '../utils/geohash-coverage';
 
 const DIRECTORY_RELAYS = [
@@ -55,10 +60,11 @@ export default class NostrDataService extends Service {
       this._stopPersisting = persistEventsToCache(
         this.store,
         async (events) => {
-          // Only cache profiles, mailboxes, blossom servers, and place photos
+          // Only cache profiles, mailboxes, blossom servers, and place photos, and deletions
           const toCache = events.filter(
             (e) =>
               e.kind === 0 ||
+              e.kind === 5 ||
               e.kind === 10002 ||
               e.kind === 10063 ||
               e.kind === 360
@@ -82,43 +88,62 @@ export default class NostrDataService extends Service {
     });
   }
 
-  get defaultReadRelays() {
-    const mailboxes = (this.mailboxes?.inboxes || [])
-      .map(normalizeRelayUrl)
-      .filter(Boolean);
-    const defaults = DEFAULT_READ_RELAYS.map(normalizeRelayUrl).filter(Boolean);
-    return Array.from(new Set([...defaults, ...mailboxes]));
+  get requiredReadRelays() {
+    return DEFAULT_READ_RELAYS;
   }
 
-  get defaultWriteRelays() {
-    const mailboxes = (this.mailboxes?.outboxes || [])
+  get requiredWriteRelays() {
+    return DEFAULT_WRITE_RELAYS;
+  }
+
+  get mailboxReadRelays() {
+    return (this.mailboxes?.inboxes || [])
       .map(normalizeRelayUrl)
       .filter(Boolean);
-    const defaults =
-      DEFAULT_WRITE_RELAYS.map(normalizeRelayUrl).filter(Boolean);
-    return Array.from(new Set([...defaults, ...mailboxes]));
+  }
+
+  get mailboxWriteRelays() {
+    return (this.mailboxes?.outboxes || [])
+      .map(normalizeRelayUrl)
+      .filter(Boolean);
+  }
+
+  get configuredReadRelays() {
+    const configured = uniqNormalizedRelays([
+      ...this.mailboxReadRelays,
+      ...(this.settings.nostrReadRelays || []),
+    ]);
+
+    return excludeRequiredRelays(
+      configured,
+      this.settings.nostrReadRelayExclusions || []
+    );
+  }
+
+  get configuredWriteRelays() {
+    const configured = uniqNormalizedRelays([
+      ...this.mailboxWriteRelays,
+      ...(this.settings.nostrWriteRelays || []),
+    ]);
+
+    return excludeRequiredRelays(
+      configured,
+      this.settings.nostrWriteRelayExclusions || []
+    );
   }
 
   get activeReadRelays() {
-    if (this.settings.nostrReadRelays) {
-      return Array.from(
-        new Set(
-          this.settings.nostrReadRelays.map(normalizeRelayUrl).filter(Boolean)
-        )
-      );
-    }
-    return this.defaultReadRelays;
+    return mergeRequiredRelays(
+      this.requiredReadRelays,
+      this.configuredReadRelays
+    );
   }
 
   get activeWriteRelays() {
-    if (this.settings.nostrWriteRelays) {
-      return Array.from(
-        new Set(
-          this.settings.nostrWriteRelays.map(normalizeRelayUrl).filter(Boolean)
-        )
-      );
-    }
-    return this.defaultWriteRelays;
+    return mergeRequiredRelays(
+      this.requiredWriteRelays,
+      this.configuredWriteRelays
+    );
   }
 
   async loadPlacesInBounds(bbox) {
@@ -215,7 +240,7 @@ export default class NostrDataService extends Service {
 
       const cachedEvents = await this.cache.query([
         {
-          kinds: [360],
+          kinds: [360, 5],
           '#i': [entityId],
         },
       ]);
@@ -236,7 +261,7 @@ export default class NostrDataService extends Service {
     this.nostrRelay.pool
       .request(this.activeReadRelays, [
         {
-          kinds: [360],
+          kinds: [360, 5],
           '#i': [entityId],
         },
       ])

app/services/settings.js

@@ -9,6 +9,9 @@ const DEFAULT_SETTINGS = {
   nostrPhotoFallbackUploads: false,
   nostrReadRelays: null,
   nostrWriteRelays: null,
+  nostrReadRelayExclusions: null,
+  nostrWriteRelayExclusions: null,
+  experimentalEnablePhotoDeletion: false,
 };
 
 export default class SettingsService extends Service {
@@ -20,6 +23,11 @@ export default class SettingsService extends Service {
     DEFAULT_SETTINGS.nostrPhotoFallbackUploads;
   @tracked nostrReadRelays = DEFAULT_SETTINGS.nostrReadRelays;
   @tracked nostrWriteRelays = DEFAULT_SETTINGS.nostrWriteRelays;
+  @tracked nostrReadRelayExclusions = DEFAULT_SETTINGS.nostrReadRelayExclusions;
+  @tracked nostrWriteRelayExclusions =
+    DEFAULT_SETTINGS.nostrWriteRelayExclusions;
+  @tracked experimentalEnablePhotoDeletion =
+    DEFAULT_SETTINGS.experimentalEnablePhotoDeletion;
 
   overpassApis = [
     {
@@ -108,6 +116,10 @@ export default class SettingsService extends Service {
     this.nostrPhotoFallbackUploads = finalSettings.nostrPhotoFallbackUploads;
     this.nostrReadRelays = finalSettings.nostrReadRelays;
     this.nostrWriteRelays = finalSettings.nostrWriteRelays;
+    this.nostrReadRelayExclusions = finalSettings.nostrReadRelayExclusions;
+    this.nostrWriteRelayExclusions = finalSettings.nostrWriteRelayExclusions;
+    this.experimentalEnablePhotoDeletion =
+      finalSettings.experimentalEnablePhotoDeletion;
 
     // Save to ensure migrated settings are stored in the new format
     this.saveSettings();
@@ -122,6 +134,9 @@ export default class SettingsService extends Service {
       nostrPhotoFallbackUploads: this.nostrPhotoFallbackUploads,
       nostrReadRelays: this.nostrReadRelays,
       nostrWriteRelays: this.nostrWriteRelays,
+      nostrReadRelayExclusions: this.nostrReadRelayExclusions,
+      nostrWriteRelayExclusions: this.nostrWriteRelayExclusions,
+      experimentalEnablePhotoDeletion: this.experimentalEnablePhotoDeletion,
     };
     localStorage.setItem('marco:settings', JSON.stringify(settings));
   }

app/services/storage.js

@@ -270,6 +270,11 @@ export default class StorageService extends Service {
     }
   }
 
+  async getPlacesInList(listId) {
+    if (!this.places || !this.places.lists) return [];
+    return this.places.lists.getPlaces(listId);
+  }
+
   async loadPlacesInBounds(bbox) {
     // 1. Calculate required prefixes
     const requiredPrefixes = getGeohashPrefixesInBbox(bbox);

app/styles/app.css

@@ -1,8 +1,10 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 
 :root {
-  --default-list-color: #fc3;
+  --body-text-color: #333;
+  --primary-background-color: #fff;
   --hover-bg: #f8f9fa;
+  --divider-color: #eee;
   --sidebar-width: 350px;
   --link-color: #2a7fff;
   --link-color-visited: #6a4fbf;
@@ -10,6 +12,7 @@
   --marker-color-dark: #b31412;
   --danger-color: var(--marker-color-primary);
   --danger-color-dark: var(--marker-color-dark);
+  --default-list-color: #fc3;
 }
 
 html,
@@ -31,7 +34,7 @@ body {
   font-family: 'Noto Sans', sans-serif;
   font-size: 16px;
   font-weight: normal;
-  color: #333;
+  color: var(--body-text-color);
 }
 
 #root,
@@ -112,8 +115,6 @@ body {
   display: flex;
   align-items: center;
   grid-area: search;
-
-  /* Ensure it sits at the start of its grid area */
   justify-self: start;
   width: 100%;
 }
@@ -127,7 +128,6 @@ body {
 
 @media (width > 768px) {
   .header-left {
-    /* Desktop: Ensure minimum width for search box so it's not squeezed */
     min-width: 300px;
     max-width: 350px;
   }
@@ -140,8 +140,6 @@ body {
 
 .header-center {
   grid-area: chips;
-
-  /* Desktop: Center the chips block in the available space */
   display: flex;
   justify-content: center;
   min-width: 0; /* Allow shrinking */
@@ -156,7 +154,6 @@ body {
 }
 
 @media (width <= 768px) {
-  /* No need to reset min-width/max-width since they are only set in media query above */
   .header-center {
     width: 100%;
     overflow: hidden;
@@ -383,7 +380,7 @@ body {
   display: flex;
   flex-direction: column;
   padding: 1rem 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--divider-color);
 }
 
 .account-item:last-child {
@@ -460,6 +457,11 @@ body {
   display: flex;
   flex-direction: column;
   overflow: hidden; /* Ensure flex children are contained */
+  will-change: transform;
+}
+
+.sidebar-opening .sidebar {
+  animation: sidebar-slide-in-left 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 .sidebar.app-menu-pane {
@@ -478,11 +480,13 @@ body {
 }
 
 .sidebar-header {
-  padding: 1rem;
-  border-bottom: 1px solid #eee;
+  height: 56px; /* Strictly enforce identical vertical height */
+  padding: 0 1rem; /* Keep horizontal padding, remove vertical padding */
+  border-bottom: 1px solid var(--divider-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-sizing: border-box; /* Guarantee strict height boundaries */
 }
 
 .sidebar-header.no-border {
@@ -491,7 +495,7 @@ body {
 
 .sidebar-header h2 {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -526,7 +530,7 @@ body {
   padding-left: 1.4rem;
   background: none;
   border: none;
-  color: #333;
+  color: var(--body-text-color);
   cursor: pointer;
   text-align: left;
   font-size: 0.95rem;
@@ -557,7 +561,7 @@ body {
   padding-left: 1.4rem;
   cursor: pointer;
   font-size: 0.95rem;
-  color: #333;
+  color: var(--body-text-color);
   transition: background-color 0.2s;
 }
 
@@ -628,7 +632,7 @@ body {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: #fff;
+  background-color: var(--primary-background-color);
   border: 1px solid var(--danger-color);
   color: var(--danger-color);
   cursor: pointer;
@@ -644,7 +648,7 @@ body {
 .btn-remove-relay:hover,
 .btn-remove-relay:active {
   background-color: var(--danger-color);
-  color: #fff;
+  color: var(--primary-background-color);
 }
 
 .add-relay-input {
@@ -674,7 +678,7 @@ body {
   margin-bottom: 1rem;
   background: var(--hover-bg);
   padding: 1rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--divider-color);
 }
 
 .form-group {
@@ -696,8 +700,8 @@ body {
   font-family: inherit;
   font-size: 1rem;
   box-sizing: border-box; /* Ensure padding doesn't overflow width */
-  color: #333;
-  background-color: #fff;
+  color: var(--body-text-color);
+  background-color: var(--primary-background-color);
 }
 
 .form-control:focus {
@@ -708,7 +712,7 @@ body {
 
 select.form-control {
   appearance: none;
-  background-color: #fff;
+  background-color: var(--primary-background-color);
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
@@ -784,7 +788,7 @@ select.form-control {
 .meta-info p:first-child {
   margin-top: 1.2rem;
   padding-top: 1.2rem;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--divider-color);
 }
 
 .meta-info a,
@@ -843,9 +847,9 @@ abbr[title] {
   width: 100%;
   text-align: left;
   border: none;
-  border-bottom: 1px solid #eee;
-  background: #fff;
-  color: #333;
+  border-bottom: 1px solid var(--divider-color);
+  background: var(--primary-background-color);
+  color: var(--body-text-color);
   padding: 1rem;
   cursor: pointer;
   transition: background 0.2s;
@@ -1016,7 +1020,7 @@ abbr[title] {
   .photo-carousel.inline .photo-carousel-track {
     scroll-snap-type: none;
     gap: 2px;
-    background-color: #fff;
+    background-color: var(--primary-background-color);
   }
 
   .photo-carousel.inline .carousel-slide {
@@ -1084,6 +1088,7 @@ abbr[title] {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+  text-decoration: none;
 }
 
 .btn:disabled {
@@ -1094,7 +1099,7 @@ abbr[title] {
 
 .btn-outline {
   background: transparent;
-  color: #333;
+  color: var(--body-text-color);
   border: 1px solid #ccc;
 }
 
@@ -1103,7 +1108,7 @@ abbr[title] {
 }
 
 .btn-secondary {
-  color: #333;
+  color: var(--body-text-color);
   border: 1px solid rgb(255 204 51 / 20%);
   background: rgb(255 204 51 / 30%);
 }
@@ -1265,6 +1270,20 @@ span.icon {
   gap: 0.5rem;
 }
 
+.content-with-icon > span:not(.icon) {
+  min-width: 0;
+  flex: 1;
+}
+
+.content-with-icon > span:not(.icon) a {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
 .content-with-icon .icon {
   margin-top: 0.15rem;
 }
@@ -1346,7 +1365,7 @@ span.icon {
   width: 24px;
   height: 24px;
   transform: translate(-50%, -50%);
-  color: #333;
+  color: var(--body-text-color);
   pointer-events: none;
   z-index: 2000;
   display: none;
@@ -1407,6 +1426,11 @@ button.create-place {
     inset: auto 0 0;
   }
 
+  .sidebar-opening .sidebar {
+    animation: sidebar-slide-up-bottom 0.18s cubic-bezier(0.16, 1, 0.3, 1)
+      forwards;
+  }
+
   .sidebar-content {
     overflow-y: auto;
 
@@ -1480,7 +1504,7 @@ button.create-place {
   min-width: 0;
   height: 100%;
   font-size: 1rem;
-  color: #333;
+  color: var(--body-text-color);
   outline: none;
   width: 100%;
   padding: 0 4px;
@@ -1511,7 +1535,7 @@ button.create-place {
 
 .search-submit-btn:hover {
   background: rgb(0 0 0 / 5%);
-  color: #333;
+  color: var(--body-text-color);
 }
 
 .search-clear-btn {
@@ -1529,7 +1553,7 @@ button.create-place {
 
 .search-clear-btn:hover {
   background: rgb(0 0 0 / 5%);
-  color: #333;
+  color: var(--body-text-color);
 }
 
 /* Search Results Popover */
@@ -1598,7 +1622,7 @@ button.create-place {
 
 .result-title {
   font-weight: 500;
-  color: #333;
+  color: var(--body-text-color);
   font-size: 0.95rem;
   white-space: nowrap;
   overflow: hidden;
@@ -1650,7 +1674,7 @@ button.create-place {
   cursor: pointer;
   margin: 0;
   font-size: 0.95rem;
-  color: #333;
+  color: var(--body-text-color);
 }
 
 .place-lists-manager input[type='checkbox'] {
@@ -1660,7 +1684,8 @@ button.create-place {
   cursor: pointer;
 }
 
-.place-lists-manager .list-color {
+/* Shared List Color Dot */
+.list-color-dot {
   width: 12px;
   height: 12px;
   background-color: var(--default-list-color);
@@ -1671,7 +1696,7 @@ button.create-place {
 
 .place-lists-manager .divider {
   height: 1px;
-  background: #eee;
+  background: var(--divider-color);
   margin: 0.5rem 0;
 }
 
@@ -1714,7 +1739,7 @@ button.create-place {
   border: 1px solid #ddd;
   border-radius: 16px; /* Pill shape */
   font-size: 0.9rem;
-  color: #333;
+  color: var(--body-text-color);
   cursor: pointer;
   white-space: nowrap;
   box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
@@ -1726,7 +1751,7 @@ button.create-place {
 }
 
 .category-chip:active {
-  background: #eee;
+  background: var(--divider-color);
 }
 
 .category-chip:disabled {
@@ -1780,6 +1805,13 @@ button.create-place {
   margin-top: 1.5rem;
 }
 
+.mobile-connect-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
 .nostr-connect-status {
   margin-top: 1.5rem;
   text-align: center;
@@ -1835,6 +1867,42 @@ button.create-place {
   font-size: 1.2rem;
 }
 
+.photo-tag-suggestions {
+  margin: 1rem 0 1.5rem;
+}
+
+.photo-tag-suggestions-title {
+  color: #898989;
+  margin: 0 0 0.75rem;
+  font-weight: normal;
+  font-size: 0.9rem;
+}
+
+.photo-tag-suggestions-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.photo-tag-chip {
+  background: #f8f9fa;
+  color: var(--body-text-color);
+  border: none;
+  border-radius: 16px;
+  padding: 6px 12px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.photo-tag-chip:hover {
+  background: var(--divider-color);
+}
+
+.photo-tag-chip.is-selected {
+  background: rgb(255 204 51 / 30%);
+}
+
 .alert {
   padding: 0.5rem;
   margin-bottom: 1rem;
@@ -2019,3 +2087,177 @@ button.create-place {
 .photo-carousel.gallery-thumbnails .carousel-nav-btn {
   display: none;
 }
+
+/* Dropdown Menu Component */
+.dropdown-menu-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger-btn {
+  background: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dropdown-popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 5px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  padding: 0.5rem 0;
+  z-index: 3001;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dropdown-item {
+  background: transparent;
+  border: none;
+  padding: 0.5rem 1rem;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.95rem;
+  color: var(--body-text-color);
+  white-space: nowrap;
+}
+
+.dropdown-item:hover {
+  background: #f0f0f0;
+}
+
+/* Actions button in photo gallery */
+.photo-gallery-overlay .actions-btn-container {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  width: 48px;
+  height: 48px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Snappy slide-in from left (Desktop) */
+@keyframes sidebar-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Snappy slide-up from bottom (Mobile) */
+@keyframes sidebar-slide-up-bottom {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* Lists Index Sidebar Menu */
+.lists-index-item {
+  width: 100%;
+  text-align: left;
+  border: none;
+  border-bottom: 1px solid var(--divider-color);
+  background: var(--primary-background-color);
+  color: var(--body-text-color);
+  padding: 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.lists-index-item:hover {
+  background: var(--hover-bg);
+}
+
+.lists-index-item-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.lists-index-name {
+  font-size: 0.95rem;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lists-index-count {
+  color: #666;
+  font-size: 0.85rem;
+  margin: 0;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Centered layout when back button is present */
+.sidebar-header.has-back-btn {
+  position: relative;
+  justify-content: center; /* Center horizontally */
+}
+
+/* Absolute positioning for buttons in centered header */
+.sidebar-header.has-back-btn .back-btn {
+  position: absolute;
+  left: 1rem;
+  z-index: 10;
+}
+
+.sidebar-header.has-back-btn .close-btn {
+  position: absolute;
+  right: 1rem;
+  z-index: 10;
+}
+
+/* Centralized Title text */
+.sidebar-header-text-centered {
+  position: relative;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  max-width: 60%;
+}
+
+.sidebar-header-icon-wrapper {
+  position: absolute;
+  right: 100%;
+  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+/* Sidebar Loading State */
+.sidebar-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 1rem;
+}

app/templates/application.gjs

@@ -2,12 +2,9 @@ import Component from '@glimmer/component';
 import { pageTitle } from 'ember-page-title';
 import Map from '#components/map';
 import AppHeader from '#components/app-header';
-import AppMenu from '#components/app-menu/index';
 import Toast from '#components/toast';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { or } from 'ember-truth-helpers';
 import { on } from '@ember/modifier';
 
 export default class ApplicationComponent extends Component {
@@ -15,16 +12,17 @@ export default class ApplicationComponent extends Component {
   @service mapUi;
   @service router;
 
-  @tracked isAppMenuOpen = false;
-
   get isSidebarOpen() {
-    // We consider the sidebar "open" if we are in search or place routes AND it's visible.
+    // We consider the sidebar "open" if we are in search, menu, lists or place routes AND it's visible.
     // This helps the map know if it should shift the center or adjust view.
+    const name = this.router.currentRouteName;
     return (
       this.mapUi.isSidebarVisible &&
-      (this.router.currentRouteName === 'place' ||
-        this.router.currentRouteName === 'place.new' ||
-        this.router.currentRouteName === 'search')
+      (name === 'place' ||
+        name === 'place.new' ||
+        name === 'search' ||
+        name === 'menu' ||
+        name.startsWith('lists'))
     );
   }
 
@@ -37,24 +35,35 @@ export default class ApplicationComponent extends Component {
 
   @action
   toggleAppMenu() {
-    this.isAppMenuOpen = !this.isAppMenuOpen;
-  }
-
-  @action
-  closeAppMenu() {
-    this.isAppMenuOpen = false;
+    if (this.router.currentRouteName === 'menu') {
+      this.router.transitionTo('index');
+    } else {
+      this.router.transitionTo('menu');
+    }
   }
 
   @action
   handleOutsideClick() {
-    if (this.isAppMenuOpen) {
-      this.closeAppMenu();
-    } else if (
-      this.router.currentRouteName === 'search' ||
-      this.router.currentRouteName === 'place'
+    const name = this.router.currentRouteName;
+    if (
+      name === 'search' ||
+      name === 'place' ||
+      name === 'menu' ||
+      name.startsWith('lists')
     ) {
       this.mapUi.clearSelection();
       this.mapUi.hideSidebar();
+      if (name === 'menu' || name.startsWith('lists')) {
+        this.router.transitionTo('index');
+      } else if (name === 'place') {
+        if (this.mapUi.returnToSearch && this.mapUi.currentSearch) {
+          this.router.transitionTo('search', {
+            queryParams: this.mapUi.currentSearch,
+          });
+        } else {
+          this.router.transitionTo('index');
+        }
+      }
     }
   }
 
@@ -66,32 +75,30 @@ export default class ApplicationComponent extends Component {
   <template>
     {{pageTitle "Marco"}}
 
-    <AppHeader @onToggleMenu={{this.toggleAppMenu}} />
+    <div class={{if this.mapUi.isSidebarOpening "sidebar-opening"}}>
+      <AppHeader @onToggleMenu={{this.toggleAppMenu}} />
 
-    <div
-      id="rs-widget-container"
-      class={{if this.storage.isWidgetOpen "visible"}}
-    ></div>
-
-    {{#if this.storage.isWidgetOpen}}
       <div
-        class="rs-backdrop"
-        role="button"
-        {{on "click" this.storage.closeWidget}}
+        id="rs-widget-container"
+        class={{if this.storage.isWidgetOpen "visible"}}
       ></div>
-    {{/if}}
 
-    <Map
-      @isSidebarOpen={{or this.isSidebarOpen this.isAppMenuOpen}}
-      @onOutsideClick={{this.handleOutsideClick}}
-    />
+      {{#if this.storage.isWidgetOpen}}
+        <div
+          class="rs-backdrop"
+          role="button"
+          {{on "click" this.storage.closeWidget}}
+        ></div>
+      {{/if}}
 
-    {{#if this.isAppMenuOpen}}
-      <AppMenu @onClose={{this.closeAppMenu}} />
-    {{/if}}
+      <Map
+        @isSidebarOpen={{this.isSidebarOpen}}
+        @onOutsideClick={{this.handleOutsideClick}}
+      />
 
-    <Toast />
+      <Toast />
 
-    {{outlet}}
+      {{outlet}}
+    </div>
   </template>
 }

app/templates/lists.gjs

@@ -0,0 +1 @@
+<template>{{outlet}}</template>

app/templates/lists/index.gjs

@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import Icon from '#components/icon';
+import { htmlSafe } from '@ember/template';
+
+export default class ListsIndexTemplate extends Component {
+  @service storage;
+  @service router;
+  @service mapUi;
+
+  styleFor(color) {
+    const finalColor =
+      color ||
+      getComputedStyle(document.documentElement)
+        .getPropertyValue('--default-list-color')
+        .trim();
+    return htmlSafe(`background-color: ${finalColor}`);
+  }
+
+  @action
+  selectList(listId) {
+    this.router.transitionTo('lists.list', listId);
+  }
+
+  @action
+  close() {
+    this.router.transitionTo('index');
+  }
+
+  @action
+  backToMenu() {
+    this.router.transitionTo('menu');
+  }
+
+  <template>
+    {{#if this.mapUi.isSidebarVisible}}
+      <div class="sidebar">
+        <div class="sidebar-header has-back-btn">
+          <button type="button" class="back-btn" {{on "click" this.backToMenu}}>
+            <Icon @name="arrow-left" @size={{20}} @color="#333" />
+          </button>
+          <h2 class="sidebar-header-text-centered">
+            <span class="sidebar-header-icon-wrapper">
+              <Icon @name="bookmark" @size={{20}} @color="#898989" />
+            </span>
+            Collections
+          </h2>
+          <button type="button" class="close-btn" {{on "click" this.close}}>
+            <Icon @name="x" @size={{20}} @color="#333" />
+          </button>
+        </div>
+
+        <div class="sidebar-content">
+          <ul class="places-list">
+            {{#each this.storage.lists as |list|}}
+              <li>
+                <button
+                  type="button"
+                  class="lists-index-item"
+                  {{on "click" (fn this.selectList list.id)}}
+                >
+                  <div class="lists-index-item-left">
+                    {{! template-lint-disable no-inline-styles }}
+                    <span
+                      class="list-color-dot"
+                      style={{this.styleFor list.color}}
+                    ></span>
+                    <div class="lists-index-name">{{list.title}}</div>
+                  </div>
+                  <div class="lists-index-count">
+                    {{#if list.placeRefs.length}}
+                      {{list.placeRefs.length}}
+                      places
+                    {{else}}
+                      empty
+                    {{/if}}
+                  </div>
+                </button>
+              </li>
+            {{/each}}
+          </ul>
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}

app/templates/lists/list.gjs

@@ -0,0 +1,16 @@
+import PlacesSidebar from '#components/places-sidebar';
+
+<template>
+  {{#if @controller.mapUi.isSidebarVisible}}
+    <PlacesSidebar
+      @places={{@controller.places}}
+      @title={{@controller.listTitle}}
+      @color={{@controller.listColor}}
+      @scrollTop={{@controller.scrollTop}}
+      @isLoading={{@controller.loadPlacesTask.isRunning}}
+      @onSelect={{@controller.selectPlace}}
+      @onClose={{@controller.close}}
+      @onBack={{@controller.backToLists}}
+    />
+  {{/if}}
+</template>

app/templates/menu.gjs

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import AppMenu from '#components/app-menu/index';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class MenuTemplate extends Component {
+  @service router;
+
+  @action
+  close() {
+    this.router.transitionTo('index');
+  }
+
+  <template><AppMenu @onClose={{this.close}} /></template>
+}

app/templates/place.gjs

@@ -77,8 +77,14 @@ export default class PlaceTemplate extends Component {
   navigateBack(place) {
     // The sidebar calls this with null when "Back" is clicked.
     if (place === null) {
+      // If we have an active route context (e.g. lists), return to it
+      if (this.mapUi.returnToRoute) {
+        this.mapUi.showSidebar();
+        const { name, model } = this.mapUi.returnToRoute;
+        this.router.transitionTo(name, model);
+      }
       // If we have an active search context, return to it (UP navigation)
-      if (this.mapUi.returnToSearch && this.mapUi.currentSearch) {
+      else if (this.mapUi.returnToSearch && this.mapUi.currentSearch) {
         this.mapUi.showSidebar();
         this.router.transitionTo('search', {
           queryParams: this.mapUi.currentSearch,
@@ -98,6 +104,13 @@ export default class PlaceTemplate extends Component {
   close() {
     this.mapUi.clearSelection();
     this.mapUi.hideSidebar();
+    if (this.mapUi.returnToSearch && this.mapUi.currentSearch) {
+      this.router.transitionTo('search', {
+        queryParams: this.mapUi.currentSearch,
+      });
+    } else {
+      this.router.transitionTo('index');
+    }
   }
 
   <template>

app/templates/search.gjs

@@ -10,6 +10,10 @@ export default class SearchTemplate extends Component {
   @action
   selectPlace(place) {
     if (place) {
+      const sidebarContent = document.querySelector('.sidebar-content');
+      if (sidebarContent) {
+        this.mapUi.saveScrollPosition('search', sidebarContent.scrollTop);
+      }
       this.mapUi.returnToSearch = true;
       this.mapUi.showSidebar();
       this.mapUi.preventNextZoom = true;
@@ -28,6 +32,7 @@ export default class SearchTemplate extends Component {
     {{#if this.mapUi.isSidebarVisible}}
       <PlacesSidebar
         @places={{this.mapUi.searchResults}}
+        @scrollTop={{this.mapUi.getScrollPosition "search"}}
         @onSelect={{this.selectPlace}}
         @onClose={{this.close}}
       />

app/utils/format-text.js

@@ -7,3 +7,8 @@ export function humanizeOsmTag(text) {
     w.replace(/^\w/, (c) => c.toUpperCase())
   );
 }
+
+export function capitalize(text) {
+  if (typeof text !== 'string' || !text) return '';
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}

app/utils/geohash-coverage.js

@@ -23,7 +23,7 @@ export function getGeohashPrefixesInBbox(bbox) {
 
   // Safety check to avoid infinite loops or massive arrays if bbox is weird
   if (Math.abs(maxLat - minLat) > 20 || Math.abs(maxLon - minLon) > 20) {
-    console.warn(
+    console.debug(
       'BBox too large for 4-char geohash scanning, aborting fine scan.'
     );
     return [];

app/utils/icons.js

@@ -1,4 +1,7 @@
 // AGENT: Keep imports sorted alphabetically, grouped by feather-icons → pinhead → custom/local
+/*
+ * Feather icons
+ */
 import activity from 'feather-icons/dist/icons/activity.svg?raw';
 import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
 import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
@@ -6,6 +9,7 @@ import featherCamera from 'feather-icons/dist/icons/camera.svg?raw';
 import checkSquare from 'feather-icons/dist/icons/check-square.svg?raw';
 import chevronLeft from 'feather-icons/dist/icons/chevron-left.svg?raw';
 import chevronRight from 'feather-icons/dist/icons/chevron-right.svg?raw';
+import alertTriangle from 'feather-icons/dist/icons/alert-triangle.svg?raw';
 import clock from 'feather-icons/dist/icons/clock.svg?raw';
 import database from 'feather-icons/dist/icons/database.svg?raw';
 import edit from 'feather-icons/dist/icons/edit.svg?raw';
@@ -22,6 +26,8 @@ import mail from 'feather-icons/dist/icons/mail.svg?raw';
 import map from 'feather-icons/dist/icons/map.svg?raw';
 import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
 import menu from 'feather-icons/dist/icons/menu.svg?raw';
+import moreHorizontal from 'feather-icons/dist/icons/more-horizontal.svg?raw';
+import moreVertical from 'feather-icons/dist/icons/more-vertical.svg?raw';
 import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
 import plus from 'feather-icons/dist/icons/plus.svg?raw';
@@ -37,6 +43,9 @@ import check from 'feather-icons/dist/icons/check.svg?raw';
 import alertCircle from 'feather-icons/dist/icons/alert-circle.svg?raw';
 import zap from 'feather-icons/dist/icons/zap.svg?raw';
 
+/*
+ * Pinhead icons
+ */
 import angelfish from '@waysidemapping/pinhead/dist/icons/angelfish.svg?raw';
 import barbell from '@waysidemapping/pinhead/dist/icons/barbell.svg?raw';
 import climbingWall from '@waysidemapping/pinhead/dist/icons/climbing_wall.svg?raw';
@@ -50,8 +59,12 @@ import bus from '@waysidemapping/pinhead/dist/icons/bus.svg?raw';
 import camera from '@waysidemapping/pinhead/dist/icons/camera.svg?raw';
 import boxingGloveUp from '@waysidemapping/pinhead/dist/icons/boxing_glove_up.svg?raw';
 import car from '@waysidemapping/pinhead/dist/icons/car.svg?raw';
+import carAndWrench from '@waysidemapping/pinhead/dist/icons/car_and_wrench.svg?raw';
+import castleKeep from '@waysidemapping/pinhead/dist/icons/castle_keep.svg?raw';
 import cigaretteWithSmokeCurl from '@waysidemapping/pinhead/dist/icons/cigarette_with_smoke_curl.svg?raw';
+import cityGate from '@waysidemapping/pinhead/dist/icons/city_gate.svg?raw';
 import classicalBuilding from '@waysidemapping/pinhead/dist/icons/classical_building.svg?raw';
+import classicalBuildingWithClock from '@waysidemapping/pinhead/dist/icons/classical_building_with_clock.svg?raw';
 import classicalBuildingWithDomeAndFlag from '@waysidemapping/pinhead/dist/icons/classical_building_with_dome_and_flag.svg?raw';
 import classicalBuildingWithFlag from '@waysidemapping/pinhead/dist/icons/classical_building_with_flag.svg?raw';
 import commercialBuilding from '@waysidemapping/pinhead/dist/icons/commercial_building.svg?raw';
@@ -79,6 +92,7 @@ import grecianVase from '@waysidemapping/pinhead/dist/icons/grecian_vase.svg?raw
 import greekCross from '@waysidemapping/pinhead/dist/icons/greek_cross.svg?raw';
 import iceCreamOnCone from '@waysidemapping/pinhead/dist/icons/ice_cream_on_cone.svg?raw';
 import industrialBuilding from '@waysidemapping/pinhead/dist/icons/industrial_building.svg?raw';
+import infoI from '@waysidemapping/pinhead/dist/icons/info_i.svg?raw';
 import jewel from '@waysidemapping/pinhead/dist/icons/jewel.svg?raw';
 import lowriseBuilding from '@waysidemapping/pinhead/dist/icons/lowrise_building.svg?raw';
 import marketStall from '@waysidemapping/pinhead/dist/icons/market_stall.svg?raw';
@@ -119,6 +133,9 @@ import wallHangingWithMountainsAndSun from '@waysidemapping/pinhead/dist/icons/w
 import windingWayWide from '@waysidemapping/pinhead/dist/icons/winding_way_wide.svg?raw';
 import womensAndMensRestroomSymbol from '@waysidemapping/pinhead/dist/icons/womens_and_mens_restroom_symbol.svg?raw';
 
+/*
+ * Custom/local icons
+ */
 import loadingRing from '../icons/270-ring.svg?raw';
 import nostrich from '../icons/nostrich-2.svg?raw';
 import remotestorage from '../icons/remotestorage.svg?raw';
@@ -145,10 +162,13 @@ const ICONS = {
   'chevron-left': chevronLeft,
   'chevron-right': chevronRight,
   'cigarette-with-smoke-curl': cigaretteWithSmokeCurl,
+  'city-gate': cityGate,
   climbing_wall: climbingWall,
   check,
   'alert-circle': alertCircle,
+  'alert-triangle': alertTriangle,
   'classical-building': classicalBuilding,
+  'classical-building-with-clock': classicalBuildingWithClock,
   'classical-building-with-dome-and-flag': classicalBuildingWithDomeAndFlag,
   'classical-building-with-flag': classicalBuildingWithFlag,
   'commercial-building': commercialBuilding,
@@ -185,6 +205,7 @@ const ICONS = {
   'ice-cream-on-cone': iceCreamOnCone,
   'industrial-building': industrialBuilding,
   info,
+  'info-i': infoI,
   instagram,
   jewel,
   'log-in': logIn,
@@ -198,6 +219,8 @@ const ICONS = {
   menu,
   'mobile-phone-with-keypad-and-antenna': mobilePhoneWithKeypadAndAntenna,
   'molar-tooth': molarTooth,
+  'more-horizontal': moreHorizontal,
+  'more-vertical': moreVertical,
   navigation,
   'needle-and-spool-of-thread': needleAndSpoolOfThread,
   nostrich,
@@ -247,6 +270,8 @@ const ICONS = {
   winding_way_wide: windingWayWide,
   parking_p: parkingP,
   car,
+  'car-and-wrench': carAndWrench,
+  'castle-keep': castleKeep,
   x,
   zap,
   'loading-ring': loadingRing,

app/utils/nostr.js

@@ -14,6 +14,30 @@ export function normalizeRelayUrl(url) {
   return normalized;
 }
 
+export function uniqNormalizedRelays(relays = []) {
+  return Array.from(new Set(relays.map(normalizeRelayUrl).filter(Boolean)));
+}
+
+export function mergeRequiredRelays(requiredRelays = [], customRelays = []) {
+  const requiredSet = new Set(requiredRelays.filter(Boolean));
+  const merged = [...requiredRelays.filter(Boolean)];
+
+  for (const relay of uniqNormalizedRelays(customRelays)) {
+    if (!requiredSet.has(relay)) {
+      merged.push(relay);
+    }
+  }
+
+  return merged;
+}
+
+export function excludeRequiredRelays(customRelays = [], requiredRelays = []) {
+  const requiredSet = new Set(requiredRelays.filter(Boolean));
+  return uniqNormalizedRelays(customRelays).filter((relay) => {
+    return !requiredSet.has(relay);
+  });
+}
+
 /**
  * Extracts and normalizes photo data from NIP-360 (Place Photos) events.
  * Sorts chronologically and guarantees the first landscape photo (or first portrait) is at index 0.
@@ -30,6 +54,11 @@ export function parsePlacePhotos(events) {
   const allPhotos = [];
 
   for (const event of sortedEvents) {
+    const eventTagValues = event.tags
+      .filter((t) => t[0] === 't')
+      .map((t) => t[1])
+      .filter(Boolean);
+
     // Find all imeta tags
     const imetas = event.tags.filter((t) => t[0] === 'imeta');
     for (const imeta of imetas) {
@@ -38,6 +67,7 @@ export function parsePlacePhotos(events) {
       let blurhash = null;
       let isLandscape = false;
       let aspectRatio = 16 / 9; // default
+      let placeIdentifier = event.tags.find((t) => t[0] === 'i')?.[1];
 
       for (const tag of imeta.slice(1)) {
         if (tag.startsWith('url ')) {
@@ -68,6 +98,8 @@ export function parsePlacePhotos(events) {
           blurhash,
           isLandscape,
           aspectRatio,
+          placeIdentifier,
+          tags: eventTagValues,
         });
       }
     }

app/utils/osm-icons.js

@@ -27,6 +27,8 @@ export const POI_ICON_RULES = [
 
   { tags: { amenity: 'bank' }, icon: 'banknote' },
   { tags: { amenity: 'place_of_worship' }, icon: 'place-of-worship-building' },
+  { tags: { amenity: 'townhall' }, icon: 'classical-building-with-clock' },
+  { tags: { building: 'townhall' }, icon: 'classical-building-with-clock' },
   { tags: { amenity: 'fire_station' }, icon: 'badge-shield-with-fire' },
   { tags: { amenity: 'police' }, icon: 'police-officer-with-stop-arm' },
   { tags: { amenity: 'toilets' }, icon: 'womens-and-mens-restroom-symbol' },
@@ -72,6 +74,7 @@ export const POI_ICON_RULES = [
     tags: { shop: 'beauty' },
     icon: 'fancy-mirror-with-reflection-and-stars',
   },
+  { tags: { shop: 'car_repair' }, icon: 'car-and-wrench' },
   { tags: { craft: 'tailor' }, icon: 'needle-and-spool-of-thread' },
   { tags: { office: 'estate_agent' }, icon: 'village-buildings' },
   { tags: { office: true }, icon: 'commercial-building' },
@@ -103,6 +106,7 @@ export const POI_ICON_RULES = [
   { tags: { tourism: 'viewpoint' }, icon: 'camera' },
   { tags: { tourism: 'zoo' }, icon: 'camera' },
   { tags: { tourism: 'artwork' }, icon: 'camera' },
+  { tags: { tourism: 'information' }, icon: 'info-i' },
   { tags: { amenity: 'cinema' }, icon: 'film' },
   { tags: { amenity: 'theatre' }, icon: 'camera' },
   { tags: { amenity: 'arts_centre' }, icon: 'comedy-mask-and-tragedy-mask' },
@@ -113,7 +117,9 @@ export const POI_ICON_RULES = [
   { tags: { historic: 'bridge' }, icon: 'bridge' },
   { tags: { historic: 'bridge_site' }, icon: 'bridge' },
   { tags: { historic: 'fort' }, icon: 'fort' },
+  { tags: { historic: 'city_gate' }, icon: 'city-gate' },
   { tags: { historic: 'castle' }, icon: 'palace' },
+  { tags: { building: 'tower', historic: 'yes' }, icon: 'castle-keep' },
   { tags: { historic: 'building' }, icon: 'classical-building-with-flag' },
   { tags: { historic: 'archaeological_site' }, icon: 'grecian-vase' },
   { tags: { historic: 'memorial' }, icon: 'memorial-stone-with-inscription' },

app/utils/osm.js

@@ -56,15 +56,24 @@ const PLACE_TYPE_KEYS = [
 export function getPlaceType(tags) {
   if (!tags) return null;
 
+  let fallbackKey = null;
+
   for (const key of PLACE_TYPE_KEYS) {
     const value = tags[key];
     if (value) {
       if (value === 'yes') {
-        return humanizeOsmTag(key);
+        if (!fallbackKey) {
+          fallbackKey = key;
+        }
+        continue;
       }
       return humanizeOsmTag(value);
     }
   }
 
+  if (fallbackKey) {
+    return humanizeOsmTag(fallbackKey);
+  }
+
   return null;
 }

app/utils/photo-tag-suggestions.js

@@ -0,0 +1,32 @@
+import { POI_CATEGORIES } from './poi-categories';
+import { getMatchingPoiCategoryIds } from './poi-category-matcher';
+
+export const CATEGORY_TAGS = {
+  restaurants: ['food', 'menu', 'vibe', 'front'],
+  coffee: ['food', 'menu', 'vibe', 'front'],
+  groceries: ['front', 'food'],
+  'things-to-do': ['architecture', 'amenities', 'vibe', 'front'],
+  accommodation: ['rooms', 'amenities', 'food', 'vibe', 'front'],
+};
+
+export function getSuggestedPhotoTags(place) {
+  const osmTags = place?.osmTags || place?.tags || {};
+  const categoryIds = getMatchingPoiCategoryIds(osmTags, POI_CATEGORIES);
+
+  const suggested = [];
+  for (const categoryId of categoryIds) {
+    const tags = CATEGORY_TAGS[categoryId];
+    if (!Array.isArray(tags)) continue;
+    for (const tag of tags) {
+      if (!suggested.includes(tag)) {
+        suggested.push(tag);
+      }
+    }
+  }
+
+  if (suggested.length === 0) {
+    return [];
+  }
+
+  return suggested;
+}

app/utils/poi-categories.js

@@ -43,7 +43,7 @@ export const POI_CATEGORIES = [
     label: 'Things to do',
     icon: 'feather-camera',
     filter: [
-      '["tourism"~"^(museum|gallery|attraction|viewpoint|zoo|theme_park|aquarium|artwork)$"]',
+      '["tourism"~"^(museum|gallery|attraction|viewpoint|zoo|theme_park|aquarium|artwork|information)$"]',
       '["amenity"~"^(cinema|theatre|arts_centre|planetarium)$"]',
       '["leisure"~"^(sports_centre|stadium|water_park)$"]',
       '["historic"]',
@@ -55,7 +55,7 @@ export const POI_CATEGORIES = [
     id: 'accommodation',
     label: 'Hotels',
     icon: 'person-sleeping-in-bed',
-    filter: ['["tourism"~"^(hotel|hostel|motel|chalet)$"]'],
+    filter: ['["tourism"~"^(hotel|hostel|motel|chalet|guest_house)$"]'],
     types: ['node', 'way', 'relation'],
   },
 ];

app/utils/poi-category-matcher.js

@@ -0,0 +1,95 @@
+export function getMatchingPoiCategories(osmTags, categories) {
+  if (!Array.isArray(categories) || !osmTags) return [];
+
+  return categories.filter((category) => {
+    if (!Array.isArray(category.filter)) return false;
+    return category.filter.some((filterStr) =>
+      matchesFilter(osmTags, filterStr)
+    );
+  });
+}
+
+export function getMatchingPoiCategoryIds(osmTags, categories) {
+  return getMatchingPoiCategories(osmTags, categories).map((c) => c.id);
+}
+
+function matchesFilter(osmTags, filterStr) {
+  const clauses = parseOverpassClauses(filterStr);
+  if (clauses.length === 0) return false;
+  return clauses.every((clause) => matchesClause(osmTags, clause));
+}
+
+function parseOverpassClauses(filterStr) {
+  if (!filterStr) return [];
+  const matches = filterStr.match(/\[[^\]]+\]/g);
+  if (!matches) return [];
+
+  return matches
+    .map((raw) => parseClause(raw.slice(1, -1).trim()))
+    .filter(Boolean);
+}
+
+function parseClause(content) {
+  const presenceMatch = content.match(/^"([^"]+)"$/);
+  if (presenceMatch) {
+    return { type: 'presence', key: presenceMatch[1] };
+  }
+
+  const equalsMatch = content.match(/^"([^"]+)"\s*=\s*"([^"]*)"$/);
+  if (equalsMatch) {
+    return { type: 'equals', key: equalsMatch[1], value: equalsMatch[2] };
+  }
+
+  const regexMatch = content.match(/^"([^"]+)"\s*~\s*"([^"]*)"$/);
+  if (regexMatch) {
+    return {
+      type: 'regex',
+      key: regexMatch[1],
+      pattern: regexMatch[2],
+      regex: new RegExp(regexMatch[2]),
+    };
+  }
+
+  const notRegexMatch = content.match(/^"([^"]+)"\s*!~\s*"([^"]*)"$/);
+  if (notRegexMatch) {
+    return {
+      type: 'not-regex',
+      key: notRegexMatch[1],
+      pattern: notRegexMatch[2],
+      regex: new RegExp(notRegexMatch[2]),
+    };
+  }
+
+  return null;
+}
+
+function matchesClause(osmTags, clause) {
+  const tagValues = getTagValues(osmTags, clause.key);
+
+  switch (clause.type) {
+    case 'presence':
+      return tagValues.length > 0;
+    case 'equals':
+      return tagValues.some((value) => value === clause.value);
+    case 'regex':
+      return tagValues.some((value) => clause.regex.test(value));
+    case 'not-regex':
+      return (
+        tagValues.length === 0 ||
+        !tagValues.some((value) => clause.regex.test(value))
+      );
+    default:
+      return false;
+  }
+}
+
+function getTagValues(osmTags, key) {
+  if (!osmTags || !key) return [];
+  const rawValue = osmTags[key];
+  if (rawValue === undefined || rawValue === null) return [];
+
+  return String(rawValue)
+    .split(';')
+    .map((value) => value.trim())
+    .filter(Boolean);
+}

index.html

@@ -42,6 +42,7 @@
     <link rel="stylesheet" href="/app/styles/app.css">
 </head>
   <body>
+    <div id="modal-portal"></div>
   <script type="module">
       import Application from './app/app';
       import environment from './app/config/environment';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.21.1",
+  "version": "1.25.0",
   "private": true,
   "description": "Unhosted maps app",
   "repository": {
@@ -52,7 +52,7 @@
     "@embroider/vite": "^1.5.0",
     "@eslint/js": "^9.39.2",
     "@glimmer/component": "^2.0.0",
-    "@remotestorage/module-places": "~1.2.1",
+    "@remotestorage/module-places": "~1.3.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@warp-drive/core": "~5.8.0",
     "@warp-drive/ember": "~5.8.0",

pnpm-lock.yaml

@@ -88,8 +88,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       '@remotestorage/module-places':
-        specifier: ~1.2.1
-        version: 1.2.1
+        specifier: ~1.3.0
+        version: 1.3.0
       '@rollup/plugin-babel':
         specifier: ^6.1.0
         version: 6.1.0(@babel/core@7.28.6)(rollup@4.55.1)
@@ -1468,8 +1468,8 @@ packages:
     resolution: {integrity: sha512-4rdu8GPY9TeQwsYp5D2My74dC3dSVS3tghAvisG80ybK4lqa0gvlrglaSTBxogJbxqHRw/NjI/liEtb3+SD+Bw==}
     engines: {node: '>=18.12'}
 
-  '@remotestorage/module-places@1.2.1':
-    resolution: {integrity: sha512-hNRuhGoG8RS+cieVvDVzXWBEuNPfyeFirhgNH3z1WoKw9ngHdPY6V0sT0vKbsxB8xaODReZfo2ZKHLTmdFunlw==}
+  '@remotestorage/module-places@1.3.0':
+    resolution: {integrity: sha512-VM0CqkIP6IBEpjqJ2DyTrGDOQXc73aXoAFDLIoME5Lo033uTitgn+qKgTGPK/lD4H92mk1+D3W88ECtf9v3mWw==}
 
   '@rollup/plugin-babel@6.1.0':
     resolution: {integrity: sha512-dFZNuFD2YRcoomP4oYf+DvQNSUA9ih+A3vUqopQx5EdtPGo3WBnQcI/S8pwpz91UsGfL0HsMSOlaMld8HrbubA==}
@@ -7439,7 +7439,7 @@ snapshots:
       '@pnpm/error': 1000.0.5
       find-up: 5.0.0
 
-  '@remotestorage/module-places@1.2.1':
+  '@remotestorage/module-places@1.3.0':
     dependencies:
       latlon-geohash: 2.0.0
       ulid: 3.0.2

release/index.html

@@ -39,9 +39,10 @@
     <meta name="msapplication-TileColor" content="#F6E9A6">
     <meta name="msapplication-TileImage" content="/icons/icon-144.png">
 
-  <script type="module" crossorigin src="/assets/main-DsygQlAh.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-C_mgNoFX.css">
+  <script type="module" crossorigin src="/assets/main-BVNM87jL.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-BGF-Udec.css">
 </head>
   <body>
+    <div id="modal-portal"></div>
  </body>
 </html>

tests/acceptance/collections-test.js

@@ -0,0 +1,138 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click, waitFor } from '@ember/test-helpers';
+import { setupApplicationTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+
+class MockOsmService extends Service {
+  async fetchOsmObject() {
+    return null;
+  }
+}
+
+class MockStorageService extends Service {
+  initialSyncDone = true;
+  savedPlaces = [
+    {
+      id: 'place-123',
+      title: 'Mountain Trail',
+      geohash: 'u33dc0',
+      osmTags: { name: 'Mountain Trail' },
+    },
+  ];
+  lists = [
+    {
+      id: 'to-go',
+      title: 'Want to go',
+      color: '#2e9e4f',
+      placeRefs: [{ id: 'place-123', geohash: 'u33dc0' }],
+    },
+    { id: 'to-do', title: 'To do', color: '#2a7fff', placeRefs: [] },
+  ];
+
+  findPlaceById(id) {
+    if (id === 'place-123') {
+      return this.savedPlaces[0];
+    }
+    return null;
+  }
+
+  isPlaceSaved() {
+    return true;
+  }
+
+  loadPlacesInBounds() {
+    return [];
+  }
+
+  getPlacesInList(listId) {
+    if (listId === 'to-go') {
+      return Promise.resolve([this.savedPlaces[0]]);
+    }
+    return Promise.resolve([]);
+  }
+
+  rs = {
+    on: () => {},
+  };
+}
+
+module('Acceptance | collections navigation', function (hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:osm', MockOsmService);
+    this.owner.register('service:storage', MockStorageService);
+  });
+
+  test('navigating through the collections menu hierarchy, viewing list places, and going back', async function (assert) {
+    // 1. Visit Home Map
+    await visit('/');
+    assert.strictEqual(currentURL(), '/');
+
+    // 2. Open the App Menu overlay
+    await click('.menu-btn-integrated');
+    assert.dom('.sidebar.app-menu-pane').exists('App menu sidebar is open');
+    assert
+      .dom('.app-menu')
+      .includesText('Collections', 'Menu contains Collections link');
+
+    // 3. Transition to Collections Index (List of lists)
+    await click(document.querySelectorAll('.app-menu button')[0]); // Click "Collections"
+    assert.strictEqual(currentURL(), '/lists', 'Transitions to /lists index');
+    assert
+      .dom('.sidebar-header-text-centered')
+      .includesText('Collections', 'Header is centered and titled Collections');
+    assert
+      .dom('.lists-index-item')
+      .exists({ count: 2 }, 'Renders our 2 mocked list items');
+
+    // 4. Transition to a specific list (Want to go)
+    await click(document.querySelectorAll('.lists-index-item')[0]); // Click "Want to go"
+    assert.strictEqual(
+      currentURL(),
+      '/lists/to-go',
+      'Transitions instantly to /lists/to-go'
+    );
+
+    // 5. Verify background loading spinner shows up, then results populate
+    await waitFor('.places-list');
+    assert
+      .dom('.places-list .place-name')
+      .hasText('Mountain Trail', 'Renders the saved place from the list');
+    assert
+      .dom('.places-list .place-type')
+      .hasText('Saved place', 'Place type displays Saved place correctly');
+
+    // 6. Click back button in collection list header
+    await click('.sidebar-header .back-btn');
+    assert.strictEqual(currentURL(), '/lists', 'Goes back to /lists index');
+
+    // 7. Click back button in collections index header
+    await click('.sidebar-header .back-btn');
+    assert.strictEqual(currentURL(), '/menu', 'Goes back to main menu route');
+
+    // 8. Close sidebar
+    await click('.sidebar-header .close-btn');
+    assert.strictEqual(currentURL(), '/', 'Sidebar closed and returned home');
+  });
+
+  test('clicking a place inside a collection sets returnToRoute and returns gracefully on back click', async function (assert) {
+    await visit('/lists/to-go');
+    await waitFor('.places-list');
+
+    // Click on the place item to view details
+    await click('.place-item');
+    assert.ok(
+      currentURL().includes('/place/place-123'),
+      'Transitions to place details route'
+    );
+
+    // Click back from place details
+    await click('.back-btn');
+    assert.strictEqual(
+      currentURL(),
+      '/lists/to-go',
+      'Returns gracefully back to lists/to-go list view'
+    );
+  });
+});

tests/acceptance/map-search-reset-test.js

@@ -2,7 +2,6 @@ import { module, test } from 'qunit';
 import { visit, currentURL, waitFor, triggerEvent } from '@ember/test-helpers';
 import { setupApplicationTest } from 'marco/tests/helpers';
 import Service from '@ember/service';
-import sinon from 'sinon';
 
 module('Acceptance | map search reset', function (hooks) {
   setupApplicationTest(hooks);
@@ -17,58 +16,10 @@ module('Acceptance | map search reset', function (hooks) {
       'marco:map-view',
       JSON.stringify(highZoomState)
     );
-
-    // Stub window.fetch using Sinon
-    // We want to intercept map style requests and let everything else through
-    this.fetchStub = sinon.stub(window, 'fetch');
-
-    this.fetchStub.callsFake(async (input, init) => {
-      let url = input;
-      if (typeof input === 'object' && input !== null && 'url' in input) {
-        url = input.url;
-      }
-
-      if (
-        typeof url === 'string' &&
-        url.includes('tiles.openfreemap.org/styles/liberty')
-      ) {
-        return {
-          ok: true,
-          status: 200,
-          json: async () => ({
-            version: 8,
-            name: 'Liberty',
-            sources: {
-              openmaptiles: {
-                type: 'vector',
-                url: 'https://tiles.openfreemap.org/planet',
-              },
-            },
-            layers: [
-              {
-                id: 'background',
-                type: 'background',
-                paint: {
-                  'background-color': '#123456',
-                },
-              },
-            ],
-            glyphs:
-              'https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf',
-            sprite: 'https://tiles.openfreemap.org/sprites/liberty',
-          }),
-        };
-      }
-
-      // Pass through to the original implementation
-      return this.fetchStub.wrappedMethod(input, init);
-    });
   });
 
   hooks.afterEach(function () {
     window.localStorage.removeItem('marco:map-view');
-    // Restore the original fetch
-    this.fetchStub.restore();
   });
 
   test('clicking the map clears the category search parameter', async function (assert) {
@@ -150,7 +101,7 @@ module('Acceptance | map search reset', function (hooks) {
         'Should have stayed on the search route with markers intact'
       );
 
-      // Second Click (Start new search)
+      // Second Click (Clear search and markers)
       // Click slightly differently to ensure fresh event
       await triggerEvent(canvas, 'pointerdown', {
         clientX: 250,
@@ -174,11 +125,6 @@ module('Acceptance | map search reset', function (hooks) {
     // 3. Wait for transition
     await new Promise((r) => setTimeout(r, 1000));
 
-    const newUrl = currentURL();
-    assert.notOk(
-      newUrl.includes('category=coffee'),
-      `New URL ${newUrl} should not contain category param`
-    );
-    assert.ok(newUrl.includes('/search'), 'Should be on search route');
+    assert.strictEqual(currentURL(), '/', 'Should have transitioned to index');
   });
 });

tests/acceptance/navigation-test.js

@@ -38,6 +38,7 @@ class MockOsmService extends Service {
 }
 
 class MockStorageService extends Service {
+  initialSyncDone = true;
   savedPlaces = [];
   findPlaceById() {
     return null;
@@ -84,7 +85,7 @@ module('Acceptance | navigation', function (hooks) {
     );
   });
 
-  test('closing the sidebar resets the returnToSearch flag', async function (assert) {
+  test('closing the sidebar transitions back to search route when opened from search results', async function (assert) {
     const mapUi = this.owner.lookup('service:map-ui');
 
     await visit('/search?lat=1&lon=1');
@@ -96,7 +97,22 @@ module('Acceptance | navigation', function (hooks) {
     await click('.close-btn');
 
     assert.dom('.sidebar').doesNotExist('Sidebar should be closed');
-    assert.ok(currentURL().includes('/place/'), 'Remains on place route');
+    assert.strictEqual(
+      currentURL(),
+      '/search?lat=1&lon=1',
+      'Should transition back to search route'
+    );
+  });
+
+  test('closing the sidebar when visiting a place directly transitions to index', async function (assert) {
+    await visit('/place/osm:node:123');
+    assert.ok(currentURL().includes('/place/'), 'Visited place directly');
+
+    // Click the Close (X) button
+    await click('.close-btn');
+
+    assert.dom('.sidebar').doesNotExist('Sidebar should be closed');
+    assert.strictEqual(currentURL(), '/', 'Should transition back to index');
   });
 
   test('navigating directly to place and back closes sidebar', async function (assert) {

tests/acceptance/search-loading-test.js

@@ -169,4 +169,77 @@ module('Acceptance | search loading', function (hooks) {
     // Verify we are back on index (or at least query is gone)
     assert.strictEqual(currentURL(), '/', 'Navigated to index');
   });
+
+  test('quick search pills visibility during category search transition', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+    mapUi.currentZoom = 15;
+
+    // Seed localStorage with a high zoom level to ensure quick search buttons show
+    const highZoomState = {
+      center: [13.4, 52.5],
+      zoom: 18,
+    };
+    window.localStorage.setItem(
+      'marco:map-view',
+      JSON.stringify(highZoomState)
+    );
+
+    try {
+      // Make sure quick search buttons setting is enabled
+      const settings = this.owner.lookup('service:settings');
+      settings.showQuickSearchButtons = true;
+
+      // 1. Visit slowly loading category search
+      const catPromise = visit('/search?category=slow_category&lat=1&lon=1');
+      await new Promise((r) => setTimeout(r, 10));
+
+      // Verify loading state is set and pills are visible (i.e. header-center does NOT have .searching)
+      assert.ok(mapUi.loadingState, 'Search is loading');
+      assert
+        .dom('.header-center')
+        .doesNotHaveClass(
+          'searching',
+          'Pills remain visible while search is loading'
+        );
+
+      // Resolve the promise with empty results
+      osmResolve();
+      await catPromise;
+      await settled();
+
+      // Verify search completed and since results are empty, pills are still visible
+      assert.strictEqual(mapUi.searchResults.length, 0, 'No results found');
+      assert
+        .dom('.header-center')
+        .doesNotHaveClass(
+          'searching',
+          'Pills remain visible after search completes with no results'
+        );
+
+      // 2. Now simulate a fast category search that returns results
+      const osmService = this.owner.lookup('service:osm');
+      osmService.getCategoryPois = async () => [
+        {
+          title: 'Latte Art Cafe',
+          lat: 1,
+          lon: 1,
+          osmId: '101',
+          osmType: 'N',
+        },
+      ];
+
+      await visit('/search?category=coffee&lat=1&lon=1');
+
+      // Verify search completed with results, so pills are hidden
+      assert.ok(mapUi.searchResults.length > 0, 'Results found');
+      assert
+        .dom('.header-center')
+        .hasClass(
+          'searching',
+          'Pills are hidden after search completes with results'
+        );
+    } finally {
+      window.localStorage.removeItem('marco:map-view');
+    }
+  });
 });

tests/acceptance/search-test.js

@@ -270,4 +270,76 @@ module('Acceptance | search', function (hooks) {
       .hasText('Search request failed. Please try again.');
     assert.dom('.places-sidebar').doesNotExist('Results panel should not open');
   });
+
+  test('search box query synchronized with active route query parameters', async function (assert) {
+    // Mock Osm Service
+    class MockOsmService extends Service {
+      async getCategoryPois() {
+        return [];
+      }
+    }
+    this.owner.register('service:osm', MockOsmService);
+
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // Mock Storage Service
+    class MockStorageService extends Service {
+      savedPlaces = [];
+      findPlaceById() {
+        return null;
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      rs = { on: () => {} };
+      placesInView = [];
+      loadPlacesInBounds() {
+        return Promise.resolve();
+      }
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    // Mock Map Service
+    class MockMapService extends Service {
+      getBounds() {
+        return {
+          minLat: 52.5,
+          minLon: 13.4,
+          maxLat: 52.6,
+          maxLon: 13.5,
+        };
+      }
+    }
+    this.owner.register('service:map', MockMapService);
+
+    // 1. Visit a search URL directly
+    await visit('/search?q=Berlin');
+    assert
+      .dom('.search-input')
+      .hasValue(
+        'Berlin',
+        'Search input is populated with search term on direct load'
+      );
+
+    // 2. Visit a category search URL
+    await visit('/search?category=coffee&lat=52.52&lon=13.405');
+    assert
+      .dom('.search-input')
+      .hasValue(
+        'Coffee',
+        'Search input is populated with mapped category label'
+      );
+
+    // 3. Go back to index
+    await visit('/');
+    assert
+      .dom('.search-input')
+      .hasValue('', 'Search input is cleared on transitioning to index');
+  });
 });

tests/helpers/index.js

@@ -4,6 +4,92 @@ import {
   setupTest as upstreamSetupTest,
 } from 'ember-qunit';
 import { setupNostrMocks } from './mock-nostr';
+import sinon from 'sinon';
+
+function setupMapStyleMocks(hooks) {
+  hooks.beforeEach(function () {
+    // Stub window.fetch to capture map-style assets before they hit the network
+    this.fetchStub = sinon.stub(window, 'fetch');
+
+    this.fetchStub.callsFake(async (input, init) => {
+      let url = input;
+      if (typeof input === 'object' && input !== null && 'url' in input) {
+        url = input.url;
+      }
+
+      if (typeof url === 'string' && url.includes('tiles.openfreemap.org')) {
+        // A. Mock Style Sheet
+        if (url.includes('/styles/liberty')) {
+          return {
+            ok: true,
+            status: 200,
+            json: async () => ({
+              version: 8,
+              name: 'Mock Style',
+              sources: {
+                openmaptiles: {
+                  type: 'vector',
+                  tiles: [], // Empty tiles list prevents any map tile fetching completely!
+                },
+              },
+              sprite: 'https://tiles.openfreemap.org/sprites/liberty',
+              glyphs:
+                'https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf',
+              layers: [
+                {
+                  id: 'background',
+                  type: 'background',
+                  paint: { 'background-color': '#f8f9fa' },
+                },
+              ],
+            }),
+          };
+        }
+
+        // B. Mock Sprite Atlas JSON
+        if (url.endsWith('.json') && url.includes('/sprites/')) {
+          return {
+            ok: true,
+            status: 200,
+            json: async () => ({}), // Empty sprite dictionary
+          };
+        }
+
+        // C. Mock Sprite Atlas PNG (Returns a valid 1x1 transparent PNG)
+        if (url.endsWith('.png') && url.includes('/sprites/')) {
+          const bytes = new Uint8Array([
+            137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0,
+            0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137, 0, 0, 0, 11, 73,
+            68, 65, 84, 120, 156, 99, 96, 0, 0, 0, 2, 0, 1, 226, 33, 188, 51, 0,
+            0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130,
+          ]);
+          const blob = new Blob([bytes], { type: 'image/png' });
+          return {
+            ok: true,
+            status: 200,
+            blob: async () => blob,
+          };
+        }
+
+        // Catch-all mock for other openfreemap endpoints
+        return {
+          ok: true,
+          status: 200,
+          json: async () => ({}),
+        };
+      }
+
+      // Pass through to original fetch (e.g. Photon results, local mock APIs)
+      return this.fetchStub.wrappedMethod(input, init);
+    });
+  });
+
+  hooks.afterEach(function () {
+    if (this.fetchStub && typeof this.fetchStub.restore === 'function') {
+      this.fetchStub.restore();
+    }
+  });
+}
 
 // This file exists to provide wrappers around ember-qunit's
 // test setup functions. This way, you can easily extend the setup that is
@@ -12,6 +98,7 @@ import { setupNostrMocks } from './mock-nostr';
 function setupApplicationTest(hooks, options) {
   upstreamSetupApplicationTest(hooks, options);
   setupNostrMocks(hooks);
+  setupMapStyleMocks(hooks);
 
   // Additional setup for application tests can be done here.
   //

tests/helpers/mock-nostr.js

@@ -49,11 +49,19 @@ export class MockNostrDataService extends Service {
     return [];
   }
 
-  get defaultReadRelays() {
+  get requiredReadRelays() {
     return [];
   }
 
-  get defaultWriteRelays() {
+  get requiredWriteRelays() {
+    return [];
+  }
+
+  get mailboxReadRelays() {
+    return [];
+  }
+
+  get mailboxWriteRelays() {
     return [];
   }
 

tests/index.html

@@ -16,7 +16,12 @@
       </div>
     </div>
 
-    <script src="/testem.js" integrity="" data-embroider-ignore></script>
+    <script
+      src="/testem.js"
+      integrity=""
+      data-embroider-ignore
+      vite-ignore
+    ></script>
 
     <script type="module">import "ember-testing";</script>
 

tests/integration/components/app-menu/settings/nostr-test.gjs

@@ -0,0 +1,188 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { click, fillIn, render } from '@ember/test-helpers';
+import Service, { service } from '@ember/service';
+import AppMenuSettingsNostr from 'marco/components/app-menu/settings/nostr';
+import {
+  excludeRequiredRelays,
+  mergeRequiredRelays,
+  uniqNormalizedRelays,
+} from 'marco/utils/nostr';
+
+class MockNostrDataService extends Service {
+  @service settings;
+
+  requiredReadRelays = ['wss://nostr.kosmos.org'];
+  requiredWriteRelays = [];
+
+  mailboxReadRelays = ['wss://mailbox.example.com'];
+  mailboxWriteRelays = ['wss://mailbox-write.example.com'];
+
+  get configuredReadRelays() {
+    const configured = uniqNormalizedRelays([
+      ...this.mailboxReadRelays,
+      ...(this.settings.nostrReadRelays || []),
+    ]);
+
+    return excludeRequiredRelays(
+      configured,
+      this.settings.nostrReadRelayExclusions || []
+    );
+  }
+
+  get configuredWriteRelays() {
+    const configured = uniqNormalizedRelays([
+      ...this.mailboxWriteRelays,
+      ...(this.settings.nostrWriteRelays || []),
+    ]);
+
+    return excludeRequiredRelays(
+      configured,
+      this.settings.nostrWriteRelayExclusions || []
+    );
+  }
+
+  get activeReadRelays() {
+    return mergeRequiredRelays(
+      this.requiredReadRelays,
+      this.configuredReadRelays
+    );
+  }
+
+  get activeWriteRelays() {
+    return mergeRequiredRelays(
+      this.requiredWriteRelays,
+      this.configuredWriteRelays
+    );
+  }
+
+  async clearCache() {}
+}
+
+function readRows(element) {
+  const list = element.querySelectorAll('.relay-list')[0];
+  return [...list.querySelectorAll('li')];
+}
+
+function writeRows(element) {
+  const list = element.querySelectorAll('.relay-list')[1];
+  return [...list.querySelectorAll('li')];
+}
+
+function rowByText(rows, text) {
+  return rows.find((row) => row.textContent.includes(text));
+}
+
+module('Integration | Component | app-menu/settings/nostr', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    localStorage.removeItem('marco:settings');
+
+    this.owner.register('service:nostrData', MockNostrDataService);
+    this.settings = this.owner.lookup('service:settings');
+    this.onChange = () => {};
+  });
+
+  hooks.afterEach(function () {
+    localStorage.removeItem('marco:settings');
+  });
+
+  async function renderAndOpenDetails(context) {
+    await render(
+      <template><AppMenuSettingsNostr @onChange={{this.onChange}} /></template>
+    );
+    await click('summary');
+    return context.element;
+  }
+
+  test('required read relay is first and non-removable', async function (assert) {
+    const element = await renderAndOpenDetails(this);
+    const rows = readRows(element);
+
+    assert.dom(rows[0]).includesText('nostr.kosmos.org');
+
+    const requiredRow = rowByText(rows, 'nostr.kosmos.org');
+    const mailboxRow = rowByText(rows, 'mailbox.example.com');
+
+    assert.dom(requiredRow.querySelector('.btn-remove-relay')).doesNotExist();
+    assert.dom(mailboxRow.querySelector('.btn-remove-relay')).exists();
+  });
+
+  test('removing mailbox read relay stores exclusion override', async function (assert) {
+    const element = await renderAndOpenDetails(this);
+    const mailboxRow = rowByText(readRows(element), 'mailbox.example.com');
+
+    await click(mailboxRow.querySelector('.btn-remove-relay'));
+
+    assert.deepEqual(this.settings.nostrReadRelayExclusions, [
+      'wss://mailbox.example.com',
+    ]);
+    assert.strictEqual(this.settings.nostrReadRelays, null);
+  });
+
+  test('removing custom read relay updates custom list without exclusions', async function (assert) {
+    this.settings.update('nostrReadRelays', ['wss://custom.example.com']);
+
+    const element = await renderAndOpenDetails(this);
+    const customRow = rowByText(readRows(element), 'custom.example.com');
+
+    await click(customRow.querySelector('.btn-remove-relay'));
+
+    assert.strictEqual(this.settings.nostrReadRelays, null);
+    assert.strictEqual(this.settings.nostrReadRelayExclusions, null);
+  });
+
+  test('adding read relay clears existing exclusion for same relay', async function (assert) {
+    this.settings.update('nostrReadRelayExclusions', [
+      'wss://mailbox.example.com',
+    ]);
+
+    const element = await renderAndOpenDetails(this);
+
+    await fillIn('#new-read-relay', 'Mailbox.EXAMPLE.com/');
+    await click(element.querySelector('#new-read-relay').nextElementSibling);
+
+    assert.deepEqual(this.settings.nostrReadRelays, [
+      'wss://mailbox.example.com',
+    ]);
+    assert.strictEqual(this.settings.nostrReadRelayExclusions, null);
+  });
+
+  test('reset read relays clears additions and exclusions', async function (assert) {
+    this.settings.update('nostrReadRelays', ['wss://custom.example.com']);
+    this.settings.update('nostrReadRelayExclusions', [
+      'wss://mailbox.example.com',
+    ]);
+
+    const element = await renderAndOpenDetails(this);
+    await click(element.querySelectorAll('.reset-relays')[0]);
+
+    assert.strictEqual(this.settings.nostrReadRelays, null);
+    assert.strictEqual(this.settings.nostrReadRelayExclusions, null);
+
+    const requiredRow = rowByText(readRows(element), 'nostr.kosmos.org');
+    assert.dom(requiredRow).exists();
+  });
+
+  test('write relays are removable and mailbox delete stores exclusion', async function (assert) {
+    this.settings.update('nostrWriteRelays', [
+      'wss://custom-write.example.com',
+    ]);
+
+    const element = await renderAndOpenDetails(this);
+    const rows = writeRows(element);
+
+    assert.true(
+      rows.every((row) => row.querySelector('.btn-remove-relay')),
+      'all write relays can be removed'
+    );
+
+    const mailboxRow = rowByText(rows, 'mailbox-write.example.com');
+    await click(mailboxRow.querySelector('.btn-remove-relay'));
+
+    assert.deepEqual(this.settings.nostrWriteRelayExclusions, [
+      'wss://mailbox-write.example.com',
+    ]);
+  });
+});

tests/integration/components/photo-gallery-test.gjs

@@ -0,0 +1,339 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render, click, triggerKeyEvent } from '@ember/test-helpers';
+import Service from '@ember/service';
+import PhotoGallery from 'marco/components/photo-gallery';
+import { setupNostrMocks } from 'marco/tests/helpers/mock-nostr';
+import sinon from 'sinon';
+
+class MockBlossomService extends Service {
+  async delete() {
+    return true;
+  }
+}
+
+class MockToastService extends Service {
+  show() {}
+}
+
+module('Integration | Component | photo-gallery', function (hooks) {
+  setupRenderingTest(hooks);
+  setupNostrMocks(hooks);
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:blossom', MockBlossomService);
+    this.owner.register('service:toast', MockToastService);
+
+    this.blossom = this.owner.lookup('service:blossom');
+    this.nostrAuth = this.owner.lookup('service:nostrAuth');
+    this.nostrData = this.owner.lookup('service:nostrData');
+    this.nostrRelay = this.owner.lookup('service:nostrRelay');
+    this.toast = this.owner.lookup('service:toast');
+    this.settings = this.owner.lookup('service:settings');
+
+    this.photos = [
+      {
+        eventId: 'event1',
+        pubkey: 'userA',
+        placeIdentifier: 'osm:node:12345',
+        url: 'https://example.com/a3b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1.jpg',
+        thumbUrl:
+          'https://example.com/b3b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1.jpg',
+      },
+      {
+        eventId: 'event2',
+        pubkey: 'userB',
+        placeIdentifier: 'osm:node:12345',
+        url: 'photo2.jpg',
+      },
+    ];
+  });
+
+  hooks.afterEach(function () {
+    sinon.restore();
+    localStorage.removeItem('marco:settings');
+  });
+
+  test('it does not show delete button if user is not creator', async function (assert) {
+    this.nostrAuth.pubkey = 'userB'; // Different from photo1's pubkey
+    this.selectedPhoto = this.photos[0];
+
+    await render(
+      <template>
+        <div id="test-container">
+          <div id="modal-portal"></div>
+          <PhotoGallery
+            @photos={{this.photos}}
+            @selectedPhoto={{this.selectedPhoto}}
+          />
+        </div>
+      </template>
+    );
+
+    // Open dropdown
+    await click('.dropdown-trigger-btn');
+
+    assert.dom('.dropdown-popover').exists('Dropdown opened');
+    assert
+      .dom('.dropdown-item.text-danger')
+      .doesNotExist('Delete button is hidden for non-creator');
+  });
+
+  test('it shows delete button if user is creator and setting is enabled', async function (assert) {
+    this.nostrAuth.pubkey = 'userA'; // Matches photo1's pubkey
+    this.settings.update('experimentalEnablePhotoDeletion', true); // Enable the setting
+    this.selectedPhoto = this.photos[0];
+
+    await render(
+      <template>
+        <div id="test-container">
+          <div id="modal-portal"></div>
+          <PhotoGallery
+            @photos={{this.photos}}
+            @selectedPhoto={{this.selectedPhoto}}
+          />
+        </div>
+      </template>
+    );
+
+    // Open dropdown
+    await click('.dropdown-trigger-btn');
+
+    assert.dom('.dropdown-popover').exists('Dropdown opened');
+    assert
+      .dom('.dropdown-item.text-danger')
+      .exists('Delete button is visible for creator when setting is enabled');
+  });
+
+  test('it handles cancellation of deletion', async function (assert) {
+    this.nostrAuth.pubkey = 'userA';
+    this.settings.update('experimentalEnablePhotoDeletion', true);
+    this.selectedPhoto = this.photos[0];
+
+    const confirmStub = sinon.stub(window, 'confirm').returns(false);
+    const blossomSpy = sinon.spy(this.blossom, 'delete');
+
+    await render(
+      <template>
+        <div id="test-container">
+          <div id="modal-portal"></div>
+          <PhotoGallery
+            @photos={{this.photos}}
+            @selectedPhoto={{this.selectedPhoto}}
+          />
+        </div>
+      </template>
+    );
+
+    await click('.dropdown-trigger-btn');
+    await click('.dropdown-item.text-danger');
+
+    assert.ok(confirmStub.calledOnce, 'confirmation dialog was shown');
+    assert.ok(blossomSpy.notCalled, 'blossom.delete was NOT called');
+  });
+
+  test('it performs full deletion flow when confirmed', async function (assert) {
+    this.nostrAuth.pubkey = 'userA';
+    this.settings.update('experimentalEnablePhotoDeletion', true);
+    // Override the mock's getter just for this test
+    Object.defineProperty(this.nostrAuth, 'signer', {
+      configurable: true,
+      get: () => ({
+        signEvent: async (e) => ({
+          ...e,
+          id: 'signed-id',
+          sig: 'sig',
+          pubkey: 'userA',
+        }),
+        getPublicKey: async () => 'userA',
+      }),
+    });
+    this.selectedPhoto = this.photos[0];
+
+    let closed = false;
+    this.handleClose = () => {
+      closed = true;
+    };
+
+    const confirmStub = sinon.stub(window, 'confirm').returns(true);
+    const blossomStub = sinon.stub(this.blossom, 'delete').resolves();
+    const publishStub = sinon.stub(this.nostrRelay, 'publish').resolves();
+    const storeStub = sinon.stub(this.nostrData.store, 'add');
+    const toastSpy = sinon.spy(this.toast, 'show');
+
+    await render(
+      <template>
+        <div id="test-container">
+          <div id="modal-portal"></div>
+          <PhotoGallery
+            @photos={{this.photos}}
+            @selectedPhoto={{this.selectedPhoto}}
+            @onClose={{this.handleClose}}
+          />
+        </div>
+      </template>
+    );
+
+    await click('.dropdown-trigger-btn');
+    await click('.dropdown-item.text-danger');
+
+    assert.ok(confirmStub.calledOnce, 'confirmation dialog was shown');
+
+    // Check blossom deletions
+    assert.ok(
+      blossomStub.calledTwice,
+      'blossom.delete was called twice (main + thumb)'
+    );
+    assert.strictEqual(
+      blossomStub.firstCall.args[0],
+      'a3b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1',
+      'extracted correct hash for main image'
+    );
+    assert.strictEqual(
+      blossomStub.secondCall.args[0],
+      'b3b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1',
+      'extracted correct hash for thumb image'
+    );
+
+    // Check Nostr kind 5
+    assert.ok(publishStub.calledOnce, 'nostrRelay.publish was called');
+    const publishedEvent = publishStub.firstCall.args[1];
+    assert.strictEqual(publishedEvent.kind, 5, 'published event is kind 5');
+    assert.deepEqual(
+      publishedEvent.tags[0],
+      ['e', 'event1'],
+      'event tags reference the deleted photo'
+    );
+    assert.deepEqual(
+      publishedEvent.tags[1],
+      ['i', 'osm:node:12345'],
+      'event tags include the place identifier'
+    );
+
+    // Check store update
+    assert.ok(storeStub.calledOnce, 'nostrData.store.add was called');
+    assert.strictEqual(
+      storeStub.firstCall.args[0].kind,
+      5,
+      'added kind 5 event to local store'
+    );
+
+    // Check UX
+    assert.ok(
+      toastSpy.calledWith('Photo deleted successfully'),
+      'success toast was shown'
+    );
+    assert.ok(closed, 'gallery was closed after deletion');
+  });
+
+  test('it copies event id to clipboard', async function (assert) {
+    this.nostrAuth.pubkey = 'userA';
+    this.selectedPhoto = this.photos[0];
+
+    const clipboardStub = sinon
+      .stub(navigator.clipboard, 'writeText')
+      .resolves();
+    const toastSpy = sinon.spy(this.toast, 'show');
+
+    await render(
+      <template>
+        <div id="test-container">
+          <div id="modal-portal"></div>
+          <PhotoGallery
+            @photos={{this.photos}}
+            @selectedPhoto={{this.selectedPhoto}}
+          />
+        </div>
+      </template>
+    );
+
+    await click('.dropdown-trigger-btn');
+
+    // Find the copy button (it should be the first one)
+    const items = document.querySelectorAll('.dropdown-item');
+    let copyBtn;
+    items.forEach((item) => {
+      if (item.textContent.includes('Copy Photo Event ID')) {
+        copyBtn = item;
+      }
+    });
+
+    await click(copyBtn);
+
+    assert.ok(clipboardStub.calledWith('event1'), 'copied correct event id');
+    assert.ok(
+      toastSpy.calledWith('Event ID copied to clipboard'),
+      'success toast was shown'
+    );
+  });
+
+  test('keyboard navigation changes photos', async function (assert) {
+    this.photos = [
+      { eventId: 'event1', url: 'photo1.jpg' },
+      { eventId: 'event2', url: 'photo2.jpg' },
+      { eventId: 'event3', url: 'photo3.jpg' },
+    ];
+    this.selectedPhoto = this.photos[0];
+
+    await render(
+      <template>
+        <div id="test-container">
+          <div id="modal-portal"></div>
+          <PhotoGallery
+            @photos={{this.photos}}
+            @selectedPhoto={{this.selectedPhoto}}
+          />
+        </div>
+      </template>
+    );
+
+    assert
+      .dom('.photo-gallery-content')
+      .hasAttribute('data-current-event-id', 'event1');
+
+    // Right Arrow
+    await triggerKeyEvent(document, 'keydown', 'ArrowRight');
+
+    assert
+      .dom('.photo-gallery-content')
+      .hasAttribute('data-current-event-id', 'event2');
+
+    // Right Arrow again
+    await triggerKeyEvent(document, 'keydown', 'ArrowRight');
+
+    assert
+      .dom('.photo-gallery-content')
+      .hasAttribute('data-current-event-id', 'event3');
+
+    // Left Arrow
+    await triggerKeyEvent(document, 'keydown', 'ArrowLeft');
+
+    assert
+      .dom('.photo-gallery-content')
+      .hasAttribute('data-current-event-id', 'event2');
+  });
+
+  test('escape key closes gallery', async function (assert) {
+    this.selectedPhoto = this.photos[0];
+    let closed = false;
+    this.handleClose = () => {
+      closed = true;
+    };
+
+    await render(
+      <template>
+        <div id="test-container">
+          <div id="modal-portal"></div>
+          <PhotoGallery
+            @photos={{this.photos}}
+            @selectedPhoto={{this.selectedPhoto}}
+            @onClose={{this.handleClose}}
+          />
+        </div>
+      </template>
+    );
+
+    await triggerKeyEvent(document, 'keydown', 'Escape');
+    assert.ok(closed, 'gallery was closed on escape key');
+  });
+});

tests/integration/components/place-details-test.gjs

@@ -334,4 +334,54 @@ module('Integration | Component | place-details', function (hooks) {
     assert.dom(links[0]).hasText('+44 987 654 321');
     assert.dom(links[1]).hasText('+1 234-567 8900');
   });
+
+  test('it renders correct OpenStreetMap link for an OSM place', async function (assert) {
+    const place = {
+      title: 'OSM Place',
+      osmId: '12345',
+      osmType: 'node',
+      lat: 52.520008,
+      lon: 13.404954,
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    const osmLink = this.element.querySelector(
+      '.meta-info a[href^="https://www.openstreetmap.org/node/12345"]'
+    );
+    assert.ok(osmLink, 'OpenStreetMap link is rendered');
+    assert.strictEqual(
+      osmLink.getAttribute('href'),
+      'https://www.openstreetmap.org/node/12345'
+    );
+
+    assert.dom('button.btn-link').hasText('Add a photo');
+  });
+
+  test('it renders correct search-based OpenStreetMap link for a custom saved place', async function (assert) {
+    class MockMapUi extends Service {
+      currentCenter = { lat: 52.5, lon: 13.4 };
+      currentZoom = 15.6;
+    }
+    this.owner.register('service:map-ui', MockMapUi);
+
+    const place = {
+      title: 'Custom Place',
+      lat: 52.520008,
+      lon: 13.404954,
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    const osmLink = this.element.querySelector(
+      '.meta-info a[href^="https://www.openstreetmap.org/search"]'
+    );
+    assert.ok(osmLink, 'OpenStreetMap search link is rendered');
+    assert.strictEqual(
+      osmLink.getAttribute('href'),
+      'https://www.openstreetmap.org/search?lat=52.520008&lon=13.404954&zoom=16#map=16/52.50000/13.40000'
+    );
+
+    assert.dom('button.btn-link').doesNotExist();
+  });
 });

tests/integration/components/place-photo-upload-test.gjs

@@ -0,0 +1,100 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render, click, triggerEvent } from '@ember/test-helpers';
+import Service from '@ember/service';
+import PlacePhotoUpload from 'marco/components/place-photo-upload';
+
+module('Integration | Component | place-photo-upload', function (hooks) {
+  setupRenderingTest(hooks);
+
+  class MockNostrAuthService extends Service {
+    get isConnected() {
+      return true;
+    }
+
+    get signer() {
+      return null;
+    }
+  }
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:nostrAuth', MockNostrAuthService);
+  });
+
+  async function selectFile(element, file) {
+    const input = element.querySelector('#photo-upload-input');
+    Object.defineProperty(input, 'files', {
+      value: [file],
+      configurable: true,
+    });
+    await triggerEvent(input, 'change');
+  }
+
+  test('it shows tag suggestions when they exist after upload selection', async function (assert) {
+    this.place = {
+      title: 'Cafe Alpha',
+      osmId: '123',
+      osmType: 'node',
+      osmTags: { amenity: 'cafe' },
+    };
+
+    await render(
+      <template><PlacePhotoUpload @place={{this.place}} /></template>
+    );
+
+    assert.dom('.photo-tag-suggestions').doesNotExist();
+
+    const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+    await selectFile(this.element, file);
+
+    assert.dom('.photo-tag-suggestions').exists();
+    assert.dom('.photo-tag-chip').exists();
+    assert.dom('.photo-tag-chip').includesText('Food');
+  });
+
+  test('it only allows one selected tag at a time', async function (assert) {
+    this.place = {
+      title: 'Cafe Alpha',
+      osmId: '123',
+      osmType: 'node',
+      osmTags: { amenity: 'cafe' },
+    };
+
+    await render(
+      <template><PlacePhotoUpload @place={{this.place}} /></template>
+    );
+
+    const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+    await selectFile(this.element, file);
+
+    const chips = this.element.querySelectorAll('.photo-tag-chip');
+    assert.ok(chips.length > 1, 'multiple tag chips are rendered');
+
+    await click(chips[0]);
+    assert.dom('.photo-tag-chip.is-selected').exists({ count: 1 });
+    assert.dom(chips[0]).hasClass('is-selected');
+
+    await click(chips[1]);
+    assert.dom('.photo-tag-chip.is-selected').exists({ count: 1 });
+    assert.dom(chips[1]).hasClass('is-selected');
+    assert.dom(chips[0]).doesNotHaveClass('is-selected');
+  });
+
+  test('it hides tag suggestions when no tags are suggested', async function (assert) {
+    this.place = {
+      title: 'Office Beta',
+      osmId: '456',
+      osmType: 'node',
+      osmTags: { office: 'lawyer' },
+    };
+
+    await render(
+      <template><PlacePhotoUpload @place={{this.place}} /></template>
+    );
+
+    const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+    await selectFile(this.element, file);
+
+    assert.dom('.photo-tag-suggestions').doesNotExist();
+  });
+});

tests/integration/components/search-box-test.gjs

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'marco/tests/helpers';
-import { render, fillIn, click, waitFor } from '@ember/test-helpers';
+import { render, fillIn, click, waitFor, focus } from '@ember/test-helpers';
 import SearchBox from 'marco/components/search-box';
 import Service from '@ember/service';
 
@@ -208,22 +208,301 @@ module('Integration | Component | search-box', function (hooks) {
     );
 
     // Type "Resta" to trigger "Restaurants" category match
+    await focus('.search-input');
     await fillIn('.search-input', 'Resta');
 
-    // Wait for debounce (300ms) + execution
-    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-    await delay(400);
+    await waitFor('.search-result-item');
 
-    // The first result should be the category match
-    assert.dom('.search-result-item').exists({ count: 1 });
-    assert.dom('.result-title').hasText('Restaurants');
+    const resultItems = Array.from(
+      this.element.querySelectorAll('.search-result-item')
+    );
+    const categoryResult = resultItems.find((item) =>
+      item.textContent.includes('Restaurants')
+    );
+
+    assert.ok(categoryResult, 'Restaurants category result is shown');
 
     // Click the result
-    await click('.search-result-item');
+    await click(categoryResult);
 
     // Assert transition with lat/lon from map center
     assert.verifySteps([
       'transitionTo: search {"queryParams":{"q":"Restaurants","category":"restaurants","selected":null,"lat":"51.5074","lon":"-0.1278"}}',
     ]);
   });
+
+  test('it includes, deduplicates, and prioritizes saved places in search results', async function (assert) {
+    // Mock MapUi Service
+    class MockMapUiService extends Service {
+      currentCenter = { lat: 52.52, lon: 13.405 };
+      setSearchBoxFocus() {}
+    }
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    // Mock Router Service
+    class MockRouterService extends Service {
+      transitionTo(routeName, id) {
+        assert.step(`transitionTo: ${routeName} ["${id}"]`);
+      }
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    // Mock Storage Service
+    class MockStorageService extends Service {
+      lists = [{ id: 'favs', title: 'Favorites' }];
+      savedPlaces = [
+        {
+          title: 'Awesome Coffee',
+          lat: 52.5,
+          lon: 13.4,
+          osmId: '999',
+          osmType: 'node',
+          _listIds: ['favs'],
+        },
+      ];
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search(query) {
+        if (query === 'coffee') {
+          return [
+            {
+              title: 'Awesome Coffee',
+              osmId: '999',
+              osmType: 'node',
+              description: 'Duplicate to be removed',
+            },
+            {
+              title: 'Other Coffee',
+              osmId: '888',
+              osmType: 'node',
+              description: 'A different coffee shop',
+            },
+          ];
+        }
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    // Type "coffee" to trigger matches in Category, Saved, and Photon
+    await fillIn('.search-input', 'coffee');
+    await waitFor('.search-results-popover', { timeout: 2000 });
+
+    const resultItems = Array.from(
+      this.element.querySelectorAll('.search-result-item')
+    );
+
+    // Should be exactly 3 items:
+    // 1. Category (Coffee)
+    // 2. Saved (Awesome Coffee)
+    // 3. Photon (Other Coffee)
+    // (The Photon duplicate of "Awesome Coffee" is removed)
+    assert.strictEqual(resultItems.length, 3, 'Renders exactly 3 items');
+
+    // 1. Category
+    assert.ok(
+      resultItems[0].textContent.includes('Coffee'),
+      'First item is the category match'
+    );
+    assert
+      .dom(resultItems[0].querySelector('.result-icon svg'))
+      .hasClass('feather-search', 'Category uses search icon');
+
+    // 2. Saved Place
+    assert.ok(
+      resultItems[1].textContent.includes('Awesome Coffee'),
+      'Second item is the saved place match'
+    );
+    assert.ok(
+      resultItems[1].textContent.includes('Saved place'),
+      'Saved place has correct description text'
+    );
+    assert
+      .dom(resultItems[1].querySelector('.result-icon svg'))
+      .hasClass('feather-bookmark', 'Saved place uses bookmark icon');
+
+    // 3. Photon Match
+    assert.ok(
+      resultItems[2].textContent.includes('Other Coffee'),
+      'Third item is the unique photon result'
+    );
+
+    // Click the Saved Place
+    await click(resultItems[1]);
+
+    assert.verifySteps(['transitionTo: place ["osm:node:999"]']);
+  });
+
+  test('it requires 3 or more characters to match saved places', async function (assert) {
+    // Mock MapUi Service
+    class MockMapUiService extends Service {
+      currentCenter = { lat: 52.52, lon: 13.405 };
+      setSearchBoxFocus() {}
+    }
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    // Mock Router Service
+    class MockRouterService extends Service {
+      transitionTo() {}
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    // Mock Storage Service
+    class MockStorageService extends Service {
+      lists = [{ id: 'favs', title: 'Favorites' }];
+      savedPlaces = [
+        {
+          title: 'Awesome Coffee',
+          lat: 52.5,
+          lon: 13.4,
+          osmId: '999',
+          osmType: 'node',
+          _listIds: ['favs'],
+        },
+      ];
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search(query) {
+        if (query === 'aw' || query === 'awe') {
+          return [
+            {
+              title: 'Aww Some Place',
+              osmId: '111',
+              osmType: 'node',
+            },
+          ];
+        }
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    // Type "aw" (2 characters)
+    await fillIn('.search-input', 'aw');
+    await waitFor('.search-results-popover', { timeout: 2000 });
+
+    let resultItems = Array.from(
+      this.element.querySelectorAll('.search-result-item')
+    );
+
+    // Should only show Photon match since 'aw' is < 3 characters
+    assert.strictEqual(
+      resultItems.length,
+      1,
+      'Renders exactly 1 item for 2 chars'
+    );
+    assert.ok(
+      resultItems[0].textContent.includes('Aww Some Place'),
+      'Shows photon match'
+    );
+    assert.notOk(
+      resultItems.some((item) => item.textContent.includes('Awesome Coffee')),
+      'Saved place is NOT shown for 2 char query'
+    );
+
+    // Type "awe" (3 characters)
+    await fillIn('.search-input', 'awe');
+    await waitFor('.search-results-popover', { timeout: 2000 });
+
+    resultItems = Array.from(
+      this.element.querySelectorAll('.search-result-item')
+    );
+
+    // Should now show Saved Place and Photon match
+    assert.strictEqual(
+      resultItems.length,
+      2,
+      'Renders exactly 2 items for 3 chars'
+    );
+    assert.ok(
+      resultItems.some((item) => item.textContent.includes('Awesome Coffee')),
+      'Saved place is now shown'
+    );
+    assert.ok(
+      resultItems.some((item) =>
+        item.textContent.includes('Saved place (Favorites)')
+      ),
+      'List names are appended to the description'
+    );
+  });
+
+  test('it navigates to internal ID for custom saved places without an OSM ID', async function (assert) {
+    // Mock MapUi Service
+    class MockMapUiService extends Service {
+      currentCenter = { lat: 52.52, lon: 13.405 };
+      setSearchBoxFocus() {}
+    }
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    // Mock Router Service
+    class MockRouterService extends Service {
+      transitionTo(routeName, id) {
+        assert.step(`transitionTo: ${routeName} ["${id}"]`);
+      }
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    // Mock Storage Service (Custom Place)
+    class MockStorageService extends Service {
+      savedPlaces = [
+        {
+          id: 'custom-1234',
+          title: 'My Custom Home',
+          lat: 52.5,
+          lon: 13.4,
+          // Notice NO osmId or osmType
+        },
+      ];
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    // Type 3 chars to trigger saved place match
+    await fillIn('.search-input', 'cus');
+    await waitFor('.search-results-popover', { timeout: 2000 });
+
+    const resultItems = Array.from(
+      this.element.querySelectorAll('.search-result-item')
+    );
+
+    // Ensure our custom place is rendered
+    const customResult = resultItems.find((item) =>
+      item.textContent.includes('My Custom Home')
+    );
+    assert.ok(customResult, 'Custom place is rendered');
+
+    // Click it
+    await click(customResult);
+
+    // Verify it navigated using the internal ID, NOT a search query
+    assert.verifySteps(['transitionTo: place ["custom-1234"]']);
+  });
 });

tests/unit/utils/nostr-test.js

@@ -0,0 +1,205 @@
+import { module, test } from 'qunit';
+import {
+  excludeRequiredRelays,
+  mergeRequiredRelays,
+  normalizeRelayUrl,
+  parsePlacePhotos,
+  uniqNormalizedRelays,
+} from 'marco/utils/nostr';
+
+module('Unit | Utility | nostr', function () {
+  test('normalizeRelayUrl normalizes protocol, case, and slashes', function (assert) {
+    assert.strictEqual(normalizeRelayUrl(null), '');
+    assert.strictEqual(normalizeRelayUrl(''), '');
+    assert.strictEqual(normalizeRelayUrl('  '), '');
+
+    assert.strictEqual(
+      normalizeRelayUrl('Relay.example.com'),
+      'wss://relay.example.com'
+    );
+    assert.strictEqual(
+      normalizeRelayUrl('ws://Relay.example.com/'),
+      'ws://relay.example.com'
+    );
+    assert.strictEqual(
+      normalizeRelayUrl('wss://relay.example.com///'),
+      'wss://relay.example.com'
+    );
+  });
+
+  test('parsePlacePhotos includes event t tags on photo objects', function (assert) {
+    const events = [
+      {
+        id: 'event-1',
+        pubkey: 'pubkey-1',
+        created_at: 123,
+        tags: [
+          ['i', 'osm:node:123'],
+          ['t', 'food'],
+          ['t', 'vibe'],
+          ['imeta', 'url https://example.com/photo.jpg', 'dim 800x600'],
+        ],
+      },
+    ];
+
+    const photos = parsePlacePhotos(events);
+
+    assert.strictEqual(photos.length, 1);
+    assert.deepEqual(photos[0].tags, ['food', 'vibe']);
+  });
+
+  test('parsePlacePhotos sorts by created_at', function (assert) {
+    const events = [
+      {
+        id: 'event-2',
+        pubkey: 'pubkey-2',
+        created_at: 200,
+        tags: [
+          ['i', 'osm:node:456'],
+          ['imeta', 'url https://example.com/late.jpg', 'dim 600x900'],
+        ],
+      },
+      {
+        id: 'event-1',
+        pubkey: 'pubkey-1',
+        created_at: 100,
+        tags: [
+          ['i', 'osm:node:123'],
+          ['imeta', 'url https://example.com/early.jpg', 'dim 600x900'],
+        ],
+      },
+    ];
+
+    const photos = parsePlacePhotos(events);
+
+    assert.strictEqual(photos.length, 2);
+    assert.strictEqual(photos[0].url, 'https://example.com/early.jpg');
+    assert.strictEqual(photos[1].url, 'https://example.com/late.jpg');
+  });
+
+  test('parsePlacePhotos promotes first landscape photo to index 0', function (assert) {
+    const events = [
+      {
+        id: 'event-1',
+        pubkey: 'pubkey-1',
+        created_at: 100,
+        tags: [
+          ['imeta', 'url https://example.com/portrait.jpg', 'dim 600x900'],
+        ],
+      },
+      {
+        id: 'event-2',
+        pubkey: 'pubkey-2',
+        created_at: 200,
+        tags: [
+          ['imeta', 'url https://example.com/landscape.jpg', 'dim 1200x600'],
+        ],
+      },
+    ];
+
+    const photos = parsePlacePhotos(events);
+
+    assert.strictEqual(photos.length, 2);
+    assert.strictEqual(photos[0].url, 'https://example.com/landscape.jpg');
+    assert.strictEqual(photos[1].url, 'https://example.com/portrait.jpg');
+  });
+
+  test('parsePlacePhotos skips imeta entries without urls', function (assert) {
+    const events = [
+      {
+        id: 'event-1',
+        pubkey: 'pubkey-1',
+        created_at: 100,
+        tags: [['imeta', 'dim 800x600']],
+      },
+    ];
+
+    const photos = parsePlacePhotos(events);
+
+    assert.deepEqual(photos, []);
+  });
+
+  test('parsePlacePhotos returns one photo per event imeta tag', function (assert) {
+    const events = [
+      {
+        id: 'event-1',
+        pubkey: 'pubkey-1',
+        created_at: 100,
+        tags: [
+          ['i', 'osm:node:123'],
+          ['imeta', 'url https://example.com/photo-1.jpg', 'dim 800x600'],
+        ],
+      },
+      {
+        id: 'event-2',
+        pubkey: 'pubkey-2',
+        created_at: 200,
+        tags: [
+          ['i', 'osm:node:456'],
+          ['imeta', 'url https://example.com/photo-2.jpg', 'dim 600x800'],
+        ],
+      },
+    ];
+
+    const photos = parsePlacePhotos(events);
+
+    assert.strictEqual(photos.length, 2);
+    assert.strictEqual(photos[0].placeIdentifier, 'osm:node:123');
+    assert.strictEqual(photos[1].placeIdentifier, 'osm:node:456');
+  });
+
+  test('uniqNormalizedRelays returns normalized unique relays', function (assert) {
+    const relays = uniqNormalizedRelays([
+      'Relay.example.com',
+      'wss://relay.example.com/',
+      'wss://other.example.com',
+    ]);
+
+    assert.deepEqual(relays, [
+      'wss://relay.example.com',
+      'wss://other.example.com',
+    ]);
+  });
+
+  test('mergeRequiredRelays keeps required relays as-is and merges normalized custom relays', function (assert) {
+    const relays = mergeRequiredRelays(
+      ['wss://required.example.com', 'required-2.example.com'],
+      ['required-2.example.com/', 'wss://custom.example.com']
+    );
+
+    assert.deepEqual(relays, [
+      'wss://required.example.com',
+      'required-2.example.com',
+      'wss://required-2.example.com',
+      'wss://custom.example.com',
+    ]);
+  });
+
+  test('excludeRequiredRelays removes required relays from normalized custom list', function (assert) {
+    const relays = excludeRequiredRelays(
+      [
+        'wss://required.example.com',
+        'custom.example.com',
+        'ws://custom2.example.com',
+      ],
+      ['wss://required.example.com']
+    );
+
+    assert.deepEqual(relays, [
+      'wss://custom.example.com',
+      'ws://custom2.example.com',
+    ]);
+  });
+
+  test('excludeRequiredRelays trusts required list without normalizing it', function (assert) {
+    const relays = excludeRequiredRelays(
+      ['Required.example.com', 'custom.example.com'],
+      ['required.example.com']
+    );
+
+    assert.deepEqual(relays, [
+      'wss://required.example.com',
+      'wss://custom.example.com',
+    ]);
+  });
+});

tests/unit/utils/osm-icons-test.js

@@ -1,4 +1,5 @@
-import { getIconNameForTags } from 'marco/utils/osm-icons';
+import { getIconNameForTags, POI_ICON_RULES } from 'marco/utils/osm-icons';
+import { getIcon } from 'marco/utils/icons';
 import { module, test } from 'qunit';
 
 module('Unit | Utility | osm-icons', function () {
@@ -36,4 +37,14 @@ module('Unit | Utility | osm-icons', function () {
     let result = getIconNameForTags({ foo: 'bar' });
     assert.strictEqual(result, null);
   });
+
+  test('all icons used in POI_ICON_RULES exist in the icons utility', function (assert) {
+    for (let rule of POI_ICON_RULES) {
+      let icon = getIcon(rule.icon);
+      assert.ok(
+        icon,
+        `Icon "${rule.icon}" specified in POI_ICON_RULES should be imported and available in getIcon`
+      );
+    }
+  });
 });

tests/unit/utils/osm-test.js

@@ -89,6 +89,12 @@ module('Unit | Utility | osm', function (hooks) {
     assert.strictEqual(result, 'Building');
   });
 
+  test('getPlaceType ignores generic "yes" values if a more specific tag is present', function (assert) {
+    const tags = { historic: 'yes', building: 'tower' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, 'Tower');
+  });
+
   test('getPlaceType prioritizes order (amenity > shop > building)', function (assert) {
     // If something is both a shop and a building, it should be a shop
     const tags = { building: 'yes', shop: 'supermarket' };

tests/unit/utils/photo-tag-suggestions-test.js

@@ -0,0 +1,30 @@
+import { module, test } from 'qunit';
+import { POI_CATEGORIES } from 'marco/utils/poi-categories';
+import { getMatchingPoiCategoryIds } from 'marco/utils/poi-category-matcher';
+import {
+  getSuggestedPhotoTags,
+  CATEGORY_TAGS,
+} from 'marco/utils/photo-tag-suggestions';
+
+module('Unit | Utility | photo-tag-suggestions', function () {
+  test('returns tags for all matching categories with de-duplication', function (assert) {
+    const place = { osmTags: { amenity: 'cafe' } };
+    const categoryIds = getMatchingPoiCategoryIds(
+      place.osmTags,
+      POI_CATEGORIES
+    );
+
+    assert.ok(categoryIds.includes('restaurants'));
+    assert.ok(categoryIds.includes('coffee'));
+
+    const result = getSuggestedPhotoTags(place);
+    assert.deepEqual(result, CATEGORY_TAGS.restaurants);
+  });
+
+  test('returns no tags when no category matches', function (assert) {
+    const place = { osmTags: { office: 'lawyer' } };
+    const result = getSuggestedPhotoTags(place);
+
+    assert.deepEqual(result, []);
+  });
+});

tests/unit/utils/poi-category-matcher-test.js

@@ -0,0 +1,38 @@
+import { module, test } from 'qunit';
+import { POI_CATEGORIES } from 'marco/utils/poi-categories';
+import {
+  getMatchingPoiCategories,
+  getMatchingPoiCategoryIds,
+} from 'marco/utils/poi-category-matcher';
+
+module('Unit | Utility | poi-category-matcher', function () {
+  test('matches multiple categories from OSM tags', function (assert) {
+    const tags = { amenity: 'cafe' };
+    const categoryIds = getMatchingPoiCategoryIds(tags, POI_CATEGORIES);
+
+    assert.ok(categoryIds.includes('restaurants'));
+    assert.ok(categoryIds.includes('coffee'));
+  });
+
+  test('supports semicolon-separated values', function (assert) {
+    const tags = { amenity: 'cafe;bar' };
+    const categoryIds = getMatchingPoiCategoryIds(tags, POI_CATEGORIES);
+
+    assert.ok(categoryIds.includes('coffee'));
+  });
+
+  test('negative regex clause fails if any value matches', function (assert) {
+    const tags = { amenity: 'cafe', cuisine: 'coffee;irish' };
+    const categoryIds = getMatchingPoiCategoryIds(tags, POI_CATEGORIES);
+
+    assert.notOk(categoryIds.includes('restaurants'));
+  });
+
+  test('presence clause matches when tag exists', function (assert) {
+    const tags = { historic: 'castle' };
+    const categories = getMatchingPoiCategories(tags, POI_CATEGORIES);
+    const categoryIds = categories.map((category) => category.id);
+
+    assert.ok(categoryIds.includes('things-to-do'));
+  });
+});

vite.config.mjs

@@ -4,7 +4,7 @@ import { babel } from '@rollup/plugin-babel';
 
 export default defineConfig({
   server: {
-    host: '127.0.0.1',
+    host: '0.0.0.0',
   },
   plugins: [
     ember(),