Integrate category search with search box

So we don't have to manually pass the option everywhere

.gitea/release-drafter.yml

@@ -0,0 +1,14 @@
+name-template: 'v$RESOLVED_VERSION'
+tag-template: 'v$RESOLVED_VERSION'
+version-resolver:
+  major:
+    labels:
+      - 'release/major'
+  minor:
+    labels:
+      - 'release/minor'
+      - 'feature'
+  patch:
+    labels:
+      - 'release/patch'
+  default: patch

.gitea/workflows/ci.yaml

@@ -18,15 +18,15 @@ jobs:
     timeout-minutes: 10
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
         with:
           version: 10
       - name: Install Node
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: pnpm
+
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
       - name: Lint
@@ -35,18 +35,16 @@ jobs:
   test:
     name: "Test"
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-22.19.0-chrome-139.0.7258.154-1-ff-142.0.1-edge-139.0.3405.125-1
     timeout-minutes: 10
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
         with:
           version: 10
-      - name: Install Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          cache: pnpm
+
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
       - name: Run Tests

.gitea/workflows/release_drafter.yml

@@ -0,0 +1,13 @@
+name: Release Drafter
+on:
+  pull_request:
+    types: [closed]
+jobs:
+  release_drafter_job:
+    name: Update release notes draft
+    runs-on: ubuntu-latest
+    steps:
+      - name: Release Drafter
+        uses: https://github.com/raucao/gitea-release-drafter@dev
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.stylelintrc.mjs

@@ -1,3 +1,7 @@
 export default {
   extends: ['stylelint-config-standard'],
+  rules: {
+    'no-descending-specificity': null,
+    'property-no-vendor-prefix': null,
+  },
 };

PROJECT_STATUS.md

@@ -1,126 +1,74 @@
 # Project Status: Marco
 
-**Last Updated:** Tue Jan 27 2026
+**Last Updated:** Wed Mar 18 2026
 
 ## Project Context
 
-We are building **Marco**, a decentralized maps application using **Ember.js** (Octane/Polaris edition with GJS/GLIMMER), **Vite**, and **OpenLayers**. The core feature is storing place bookmarks in **RemoteStorage.js**, using a custom module structure.
+We are building **Marco**, a decentralized maps application using **Ember.js** (Octane/Polaris), **Vite**, and **OpenLayers**. The core feature is storing place bookmarks in **RemoteStorage.js**.
 
 ## What We Have Done
 
 ### 1. Map Integration
 
-- Set up OpenLayers in `app/components/map.gjs` (class-based component).
-- Switched tiles to **OpenFreeMap Liberty** style (supports vector POIs).
-- Implemented a hybrid click handler:
-  - Detects clicks on visual vector tiles.
-  - Falls back to fetching authoritative data from an **Overpass API** service.
-  - **Logic Upgrade:** Map intelligently detects if _any_ sidebar/pane is open and handles outside clicks to close them instead of initiating new searches.
-- **Optimization:** Added **10px hit tolerance** for easier tapping on mobile devices.
-- **Visuals:** Increased bookmark marker size (Radius 9px) and added a subtle drop shadow.
-- **Feedback:** Implemented a "pulse" animation (via OpenLayers Overlay) at the click location to visualize the search radius (30m/50m).
-- **Mobile UX:**
-  - **Touch:** Disabled browser tap highlights (`-webkit-tap-highlight-color: transparent`) to prevent blue flashing on Android.
-  - **Scroll:** Disabled "pull-to-refresh" (`overscroll-behavior: none`) on the body to prevent accidental reloads while keeping the sidebar scrollable (`contain`).
-  - **Auto-Pan:** On mobile screens, if a selected pin is obscured by the bottom sheet, the map automatically pans to center the pin in the visible top half of the screen.
-  - **Controls:** Fixed positioning of "Locate" and "Rotate" buttons on mobile by correcting CSS `inset` syntax.
-  - **iOS Polish:**
-    - Prevented input auto-zoom by ensuring `.form-control` font size is `1rem` (16px).
-    - Added `-webkit-text-size-adjust: 100%` to prevent text inflation on rotation.
-    - Set base `body` font size to `16px`.
-- **Geolocation ("Locate Me"):**
-  - Implemented a "Locate Me" button with robust tracking logic.
-  - **Dynamic Zoom:** Automatically zooms to a level where the accuracy circle covers ~10% of the map (fallback logic handles missing accuracy data).
-  - **Smart Pulse:** Displays a pulsing blue circle during the search phase.
-  - **Auto-Stop:** Pulse and tracking automatically stop when high accuracy (≤20m) is achieved or after a 10s timeout.
-- **Persistence:** Saves and restores map center and zoom level using `localStorage` (key: `marco:map-view`).
-- **Controls:** Enabled standard OpenLayers Rotate control (re-north) and custom Locate control.
-- **Pin Animation:** Selected pins are highlighted with a custom **Red Pin** overlay that drops in with an animation. The center dot is styled as a solid dark red circle (`#b31412`).
+- **Vector Tiles:** Using **OpenFreeMap Liberty** style with a hybrid click handler (Visual Tiles + Overpass API fallback).
+- **Smart Interaction:**
+  - **Hit Tolerance:** 10px buffer for easier mobile tapping.
+  - **Auto-Pan:** Selected pins automatically center in the visible area (respecting bottom sheets/sidebars).
+  - **Smart Zoom:** `zoomToBbox` fits complex geometries (ways/relations) with dynamic padding, only zooming out to fit.
+- **Visuals:** Custom "Red Pin" overlay with drop animation. Selected OSM ways/relations show distinct blue outlines.
+- **Geolocation:** Robust "Locate Me" with dynamic zoom and accuracy visualization.
 
 ### 2. RemoteStorage Module (`@remotestorage/module-places`)
 
-- Created a custom TypeScript module in `vendor/remotestorage-module-places/`.
-- **Schema:** `place` object containing `id` (ULID), `title`, `lat`, `lon`, `geohash`, `osmId`, `url`, etc.
-- **Storage Path:** Nested `<2-char>/<2-char>/<id>` (based on geohash) for scalability.
-- **API:**
-  - `getPlaces(prefixes?)`: efficient partial loading of specific sectors (or full recursive scan if no prefixes provided).
-  - Uses `getListing` for directory traversal and `getAll` for object retrieval.
-  - configured with `maxAge: false` to ensure data freshness.
-- **Dependencies:** Uses `ulid` and `latlon-geohash` internally.
+- **Custom Module:** Handles `place` objects with Geohash-based partitioning (`<2-char>/<2-char>/<id>`).
+- **Optimization:** Supports efficient spatial querying via prefix loading.
+- **Lists Support:** Manages collection-based organization (e.g., "To Visit", "Favorites").
 
-### 3. App Infrastructure & Build
+### 3. App Infrastructure
 
 - **Services:**
-  - `storage.js`: Initializes RemoteStorage, claims access, enables caching, and sets up the widget. Consumes the new `getPlaces` API.
-    - **Optimization:** Implemented **Debounced Reload** (200ms) for bookmark updates to handle rapid change events efficiently.
-    - **Optimization:** Correctly handles deletion/updates by clearing stale data for reloaded geohash sectors.
-  - `osm.js`: Fetches nearby POIs from Overpass API.
-    - **Configurable:** Now supports dynamic API endpoints via `SettingsService`.
-    - **Reliability:** Implemented `fetchWithRetry` to handle HTTP 504/502/503 timeouts and 429 rate limits, in addition to network errors.
-    - **Caching:** Implemented in-memory cache for repeated `getNearbyPois` requests (same lat/lon/radius) to enable instant "Back" navigation.
-  - `settings.js`: Manages user preferences (currently Overpass API provider) persisted to `localStorage`.
+  - `storage.js`: Manages RemoteStorage, caching, and the new **Lists** feature (`to-go`, `to-do`).
+  - `osm.js`: Fetches/caches POIs from Overpass API (configurable endpoints).
+  - `settings.js`: Persists user preferences (e.g., API provider).
 - **UI Components:**
-  - `places-sidebar.gjs`: Displays a list of nearby POIs.
-    - **Layout:** Responsive design that transforms into a **Bottom Sheet** (50% height) on mobile screens (`<=768px`) with rounded corners and upward shadow.
-  - `place-details.gjs`: Dedicated component for displaying rich place information.
-    - **Features:** Icons (via `feather-icons`), Address, Phone, Website, Opening Hours, Cuisine, Wikipedia.
-    - **Layout:** Polished UI with distinct sections for Actions and Meta info.
-  - `app-header.gjs`: Transparent header with "Menu" button (Settings) and User Avatar (Login).
-  - `settings-pane.gjs`: Sidebar component for app info ("About" section) and settings.
-    - **Features:** Dropdown to select Overpass API provider (bke.ro, overpass-api.de, private.coffee).
-    - **Mobile:** Renders as a 2/3 height bottom sheet on mobile.
-    - **Z-Index:** Configured to overlay the Places sidebar correctly (`z-index: 3200`).
-- **Geo Utils:**
-  - `app/utils/geo.js`: Haversine distance calculations.
-  - `app/utils/geohash-coverage.js`: Logic to calculate required 4-char geohash prefixes for a given bounding box.
-- **Format Utils:**
-  - `app/utils/format-text.js` & `humanize-osm-tag` helper: Standardized logic (Title Case, space replacement) for displaying OSM tags like `guest_house` -> "Guest House".
-- **Build & DevOps:**
-  - **Icon Generation:** Added `build:icons` script using `magick` and `rsvg-convert` to automate PNG generation from SVG.
-  - **Dependencies:** Documented system requirements (ImageMagick, librsvg) in `README.md`.
-  - **Ember CLI:** Added as dev dependency to support generator commands.
-  - **License:** Added AGPLv3 license.
+  - **Responsive Layout:** Sidebar transforms into a Bottom Sheet on mobile.
+  - **Place Details:** Rich info (Address, Socials, Opening Hours) with distinct "Actions" and "Meta" sections.
+  - **App Menu:** Comprehensive settings and about section, implemented as a secondary sidebar.
+- **CI/CD:** Gitea Actions for automated testing and release drafting.
 
-### 4. Routing & Architecture (Refactored)
+### 4. Routing & Architecture
 
-- **URL-Driven Architecture:** Moved from service-based state to proper route-based state management.
-  - `/search?lat=...&lon=...&q=...`: Displays search results list.
-  - `/place/:place_id`: Displays details for a specific place (OSM POI or Bookmark).
-- **Heuristic Navigation:** The `search` route implements "visual click matching" logic. If a search yields a direct match (exact name or very close proximity), it automatically redirects to the `/place/` route, skipping the list view.
-- **Back Button Support:** Browser history works correctly. Navigating "Back" from a place returns to the cached search results instantly without network requests.
-- **Explicit URLs:** Routes support specific OSM entities via `/place/osm:node:<id>` and `/place/osm:way:<id>`, distinguishing them from local bookmarks (ULIDs).
-- **Smart Linking:** The `showPlaces` action intercepts search results and automatically resolves them to existing **Bookmarks** if a match is found (via `storage.findPlaceById`). This ensures the app navigates to the persistent Bookmark URL (ULID) and correctly reflects the "Saved" status in the UI instead of treating it as a new generic OSM place.
-- **Data Normalization:** Refactored `OsmService` to return normalized objects (`osmTags`, `osmType`) for all queries. This ensures consistent data structures between fresh Overpass results and saved bookmarks throughout the app.
+- **URL-Driven:** `/search` (list) and `/place/:id` (details) routes.
+- **Smart Navigation:**
+  - Direct hits redirect to details.
+  - Search results automatically resolve to existing **Bookmarks**.
+  - "Back" navigation returns to cached search results instantly.
+
+### 5. Features
+
+- **Search:** Typo-tolerant **Photon API** integration with location bias and debounce.
+- **Creation & Editing:**
+  - "Crosshair" mode for precise location picking.
+  - Edit Title/Description for saved places.
+- **Lists:** Users can add places to default lists ("To Go", "To Do") directly from the details view.
+- **Socials:** Place details now include Email, Facebook, and Instagram links.
+- **Data Sync:** Auto-refreshes OSM data (coords/tags) for saved places on view, preserving custom titles.
 
 ## Current State
 
-- **Repo:** The app runs via `pnpm start`.
+- **Repo:** Runs via `pnpm start`.
 - **Workflow:**
-  1.  User pans map -> `moveend` triggers `storage.loadPlacesInBounds`.
-  2.  User clicks map -> Route transition to `/search` -> "Pulse" animation -> hybrid hit detection (Visual Tile vs Overpass).
-  3.  **Navigation:**
-      - If direct match: Redirect to `/place/:id`.
-      - If multiple results: Show `/search` list view.
-  4.  Sidebar displays details via `<PlaceDetails>` component (Bottom sheet on mobile).
-  5.  User clicks "Save Bookmark" -> Stores JSON in RemoteStorage.
-  6.  RemoteStorage change event -> Debounced reload updates the map reactive-ly.
-  7.  **Editing:** User can edit the Title and Description of saved bookmarks via an "Edit" button in the details view.
-  8.  **Settings:** User can change the Overpass API provider via the new Settings menu.
+  1.  **Explore:** Pan/Zoom loads bookmarks from RemoteStorage.
+  2.  **Search:** Query via Photon -> List or Direct Result.
+  3.  **View:** Details pane (Sidebar/Bottom Sheet) shows rich info + social links.
+  4.  **Action:**
+      - **Save:** Persist to RemoteStorage.
+      - **Organize:** Add to "To Go" / "To Do" lists.
+      - **Edit:** Custom Title/Description.
+  5.  **Sync:** Background check updates OSM data if changed.
 
-## Files Currently in Focus
+## Next Steps
 
-- `app/services/osm.js`: Caching logic.
-- `app/routes/search.js`: Search heuristics.
-- `app/components/place-details.gjs`: Formatting logic.
-
-## Next Steps & Pending Tasks
-
-1.  **Linting & Code Quality:** Fix remaining CSS errors, remove inline styles in `map.gjs`, and address unused variables/runloop usage.
-2.  **Testing:** Add automated tests for the geohash coverage, retry logic, and new editing features.
-3.  **Performance:** Monitor performance with large datasets (thousands of bookmarks).
-
-## Technical Constraints
-
-- **Template Style:** Strict Mode GJS (`<template>`).
-- **Package Manager:** `pnpm` for the main app, `npm` for the vendor module.
-- **Visuals:** No Tailwind/Bootstrap; using custom CSS in `app/styles/app.css`.
+1.  **Testing:** Add automated tests for the new Lists logic and Geohash coverage.
+2.  **Performance:** Monitor with large datasets.
+3.  **Refinement:** Polish list UI and interactions.

README.md

@@ -1,4 +1,3 @@
-
 <br>
 
 <div align="center">

app/components/app-header.gjs

@@ -5,10 +5,17 @@ import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import Icon from '#components/icon';
 import UserMenu from '#components/user-menu';
+import SearchBox from '#components/search-box';
+import CategoryChips from '#components/category-chips';
 
 export default class AppHeaderComponent extends Component {
   @service storage;
   @tracked isUserMenuOpen = false;
+  @tracked searchQuery = '';
+
+  get hasQuery() {
+    return !!this.searchQuery;
+  }
 
   @action
   toggleUserMenu() {
@@ -20,23 +27,36 @@ export default class AppHeaderComponent extends Component {
     this.isUserMenuOpen = false;
   }
 
+  @action
+  handleQueryChange(query) {
+    this.searchQuery = query;
+  }
+
+  @action
+  handleChipSelect(category) {
+    this.searchQuery = category.label;
+    // The existing logic in CategoryChips triggers the route transition.
+    // This update simply fills the search box.
+  }
+
   <template>
     <header class="app-header">
       <div class="header-left">
-        <button
-          class="icon-btn"
-          type="button"
-          aria-label="Menu"
-          {{on "click" @onToggleMenu}}
-        >
-          <Icon @name="menu" @size={{24}} @color="#333" />
-        </button>
+        <SearchBox
+          @query={{this.searchQuery}}
+          @onToggleMenu={{@onToggleMenu}}
+          @onQueryChange={{this.handleQueryChange}}
+        />
+      </div>
+
+      <div class="header-center {{if this.hasQuery 'searching'}}">
+        <CategoryChips @onSelect={{this.handleChipSelect}} />
       </div>
 
       <div class="header-right">
         <div class="user-menu-container">
           <button
-            class="user-btn"
+            class="user-btn btn-press"
             type="button"
             aria-label="User Menu"
             {{on "click" this.toggleUserMenu}}

app/components/app-menu/about.gjs

@@ -0,0 +1,168 @@
+import { on } from '@ember/modifier';
+import Icon from '#components/icon';
+
+<template>
+  {{! template-lint-disable no-nested-interactive }}
+  <div class="sidebar-header">
+    <button type="button" class="back-btn" {{on "click" @onBack}}>
+      <Icon @name="arrow-left" @size={{20}} @color="#333" />
+    </button>
+    <h2>About</h2>
+    <button type="button" class="close-btn" {{on "click" @onClose}}>
+      <Icon @name="x" @size={{20}} @color="#333" />
+    </button>
+  </div>
+
+  <div class="sidebar-content">
+    <section class="about-section">
+      <p>
+        <strong>Marco</strong>
+        (as in
+        <a
+          href="https://en.wikipedia.org/wiki/Marco_Polo"
+          target="_blank"
+          rel="noopener"
+        >Marco Polo</a>) is an unhosted maps application that respects your
+        privacy and choices.
+      </p>
+      <p>
+        Connect your own
+        <a
+          href="https://remotestorage.io/"
+          target="_blank"
+          rel="noopener"
+        >remote storage</a>
+        to sync place bookmarks across apps and devices.
+      </p>
+
+      <details>
+        <summary>
+          <Icon @name="gift" @size={{20}} />
+          <span>Open Source</span>
+        </summary>
+        <div class="details-content">
+          <table>
+            <thead>
+              <tr>
+                <th>Source</th>
+                <th>License</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <a
+                    href="https://gitea.kosmos.org/raucao/marco"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    Marco App
+                  </a>
+                </td>
+                <td>
+                  <a
+                    href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <abbr title="GNU Affero General Public License">AGPL</abbr>
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://openstreetmap.org/copyright"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    Map Data
+                  </a>
+                </td>
+                <td>
+                  <a
+                    href="https://opendatacommons.org/licenses/odbl/"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <abbr
+                      title="Open Data Commons Open Database License"
+                    >ODbL</abbr>
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/feathericons/feather"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    Feather Icons
+                  </a>
+                </td>
+                <td>
+                  <a
+                    href="https://en.wikipedia.org/wiki/MIT_License"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <abbr title="MIT License">MIT</abbr>
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a href="https://pinhead.ink/" target="_blank" rel="noopener">
+                    Pinhead Icons
+                  </a>
+                </td>
+                <td>
+                  <a
+                    href="https://github.com/waysidemapping/pinhead?tab=readme-ov-file#where-the-icons-are-from"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    Various
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </details>
+      <details>
+        <summary>
+          <Icon @name="heart" @size={{20}} @color="#e5533d" />
+          <span>Contribute</span>
+        </summary>
+        <div class="details-content">
+          <p>
+            <strong>Most impactful:</strong>
+            Add and improve data for points of interest in
+            <a
+              href="https://www.openstreetmap.org"
+              target="_blank"
+              rel="noopener"
+            >OpenStreetMap</a>.
+          </p>
+          <p>
+            <strong>Most appreciated:</strong>
+            Use this app as much as you can and
+            <a
+              href="https://community.remotestorage.io/t/marco-an-unhosted-maps-app/941"
+              target="_blank"
+              rel="noopener"
+            >submit feedback</a>
+            about your experience, problems, feature wishes, etc.
+          </p>
+          <p>
+            <strong>Most supportive:</strong>
+            Tell others about this app, on social media, in blog posts,
+            educational videos, etc.
+          </p>
+        </div>
+      </details>
+    </section>
+  </div>
+</template>

app/components/app-menu/home.gjs

@@ -0,0 +1,36 @@
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { htmlSafe } from '@ember/template';
+import Icon from '#components/icon';
+import iconRounded from '../../icons/icon-rounded.svg?raw';
+
+<template>
+  <div class="sidebar-header">
+    <h2>
+      <span class="app-logo-icon">
+        {{htmlSafe iconRounded}}
+      </span>
+      Marco
+    </h2>
+    <button type="button" class="close-btn" {{on "click" @onClose}}>
+      <Icon @name="x" @size={{20}} @color="#333" />
+    </button>
+  </div>
+
+  <div class="sidebar-content">
+    <ul class="app-menu">
+      <li>
+        <button type="button" {{on "click" (fn @onNavigate "settings")}}>
+          <Icon @name="settings" @size={{20}} />
+          <span>Settings</span>
+        </button>
+      </li>
+      <li>
+        <button type="button" {{on "click" (fn @onNavigate "about")}}>
+          <Icon @name="info" @size={{20}} />
+          <span>About</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>

app/components/app-menu/index.gjs

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { fn } from '@ember/helper';
+import eq from 'ember-truth-helpers/helpers/eq';
+
+import AppMenuHome from './home';
+import AppMenuSettings from './settings';
+import AppMenuAbout from './about';
+
+export default class AppMenu extends Component {
+  @tracked currentView = 'menu'; // 'menu', 'settings', 'about'
+
+  @action
+  setView(view) {
+    this.currentView = view;
+  }
+
+  <template>
+    <div class="sidebar app-menu-pane">
+      {{#if (eq this.currentView "menu")}}
+        <AppMenuHome @onNavigate={{this.setView}} @onClose={{@onClose}} />
+
+      {{else if (eq this.currentView "settings")}}
+        <AppMenuSettings
+          @onBack={{fn this.setView "menu"}}
+          @onClose={{@onClose}}
+        />
+
+      {{else if (eq this.currentView "about")}}
+        <AppMenuAbout
+          @onBack={{fn this.setView "menu"}}
+          @onClose={{@onClose}}
+        />
+      {{/if}}
+    </div>
+  </template>
+}

app/components/app-menu/settings.gjs

@@ -0,0 +1,100 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import Icon from '#components/icon';
+import eq from 'ember-truth-helpers/helpers/eq';
+
+export default class AppMenuSettings extends Component {
+  @service settings;
+
+  @action
+  updateApi(event) {
+    this.settings.updateOverpassApi(event.target.value);
+  }
+
+  @action
+  toggleKinetic(event) {
+    this.settings.updateMapKinetic(event.target.value === 'true');
+  }
+
+  @action
+  updatePhotonApi(event) {
+    this.settings.updatePhotonApi(event.target.value);
+  }
+
+  <template>
+    <div class="sidebar-header">
+      <button type="button" class="back-btn" {{on "click" @onBack}}>
+        <Icon @name="arrow-left" @size={{20}} @color="#333" />
+      </button>
+      <h2>Settings</h2>
+      <button type="button" class="close-btn" {{on "click" @onClose}}>
+        <Icon @name="x" @size={{20}} @color="#333" />
+      </button>
+    </div>
+
+    <div class="sidebar-content">
+      <section class="settings-section">
+        <div class="form-group">
+          <label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
+          <select
+            id="map-kinetic"
+            class="form-control"
+            {{on "change" this.toggleKinetic}}
+          >
+            <option
+              value="true"
+              selected={{if this.settings.mapKinetic "selected"}}
+            >
+              On
+            </option>
+            <option
+              value="false"
+              selected={{unless this.settings.mapKinetic "selected"}}
+            >
+              Off
+            </option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="overpass-api">Overpass API Provider</label>
+          <select
+            id="overpass-api"
+            class="form-control"
+            {{on "change" this.updateApi}}
+          >
+            {{#each this.settings.overpassApis as |api|}}
+              <option
+                value={{api.url}}
+                selected={{if
+                  (eq api.url this.settings.overpassApi)
+                  "selected"
+                }}
+              >
+                {{api.name}}
+              </option>
+            {{/each}}
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="photon-api">Photon API Provider</label>
+          <select
+            id="photon-api"
+            class="form-control"
+            {{on "change" this.updatePhotonApi}}
+          >
+            {{#each this.settings.photonApis as |api|}}
+              <option
+                value={{api.url}}
+                selected={{if (eq api.url this.settings.photonApi) "selected"}}
+              >
+                {{api.name}}
+              </option>
+            {{/each}}
+          </select>
+        </div>
+      </section>
+    </div>
+  </template>
+}

app/components/category-chips.gjs

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import Icon from '#components/icon';
+import { POI_CATEGORIES } from '../utils/poi-categories';
+
+export default class CategoryChipsComponent extends Component {
+  @service router;
+  @service mapUi;
+
+  get categories() {
+    return POI_CATEGORIES;
+  }
+
+  @action
+  searchCategory(category) {
+    // If passed an onSelect action, call it (e.g. to clear search box)
+    if (this.args.onSelect) {
+      this.args.onSelect(category);
+    }
+
+    let queryParams = { category: category.id, q: null };
+
+    if (this.mapUi.currentCenter) {
+      const { lat, lon } = this.mapUi.currentCenter;
+      queryParams.lat = parseFloat(lat).toFixed(4);
+      queryParams.lon = parseFloat(lon).toFixed(4);
+    }
+
+    this.router.transitionTo('search', { queryParams });
+  }
+
+  <template>
+    <div class="category-chips-scroll">
+      <div class="category-chips-container">
+        {{#each this.categories as |category|}}
+          <button
+            type="button"
+            class="category-chip"
+            {{on "click" (fn this.searchCategory category)}}
+            aria-label={{category.label}}
+          >
+            <Icon @name={{category.icon}} @size={{16}} />
+            <span>{{category.label}}</span>
+          </button>
+        {{/each}}
+      </div>
+    </div>
+  </template>
+}

app/components/icon.gjs

@@ -1,55 +1,10 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-
-import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
-import activity from 'feather-icons/dist/icons/activity.svg?raw';
-import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
-import clock from 'feather-icons/dist/icons/clock.svg?raw';
-import edit from 'feather-icons/dist/icons/edit.svg?raw';
-import globe from 'feather-icons/dist/icons/globe.svg?raw';
-import home from 'feather-icons/dist/icons/home.svg?raw';
-import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
-import logOut from 'feather-icons/dist/icons/log-out.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 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';
-import server from 'feather-icons/dist/icons/server.svg?raw';
-import settings from 'feather-icons/dist/icons/settings.svg?raw';
-import target from 'feather-icons/dist/icons/target.svg?raw';
-import user from 'feather-icons/dist/icons/user.svg?raw';
-import x from 'feather-icons/dist/icons/x.svg?raw';
-import zap from 'feather-icons/dist/icons/zap.svg?raw';
-
-const ICONS = {
-  'arrow-left': arrowLeft,
-  activity,
-  bookmark,
-  clock,
-  edit,
-  globe,
-  home,
-  'log-in': logIn,
-  'log-out': logOut,
-  map,
-  'map-pin': mapPin,
-  menu,
-  navigation,
-  phone,
-  plus,
-  server,
-  settings,
-  target,
-  user,
-  x,
-  zap,
-};
+import { getIcon, isIconFilled } from '../utils/icons';
 
 export default class IconComponent extends Component {
   get svg() {
-    return ICONS[this.args.name];
+    return getIcon(this.args.name);
   }
 
   get size() {
@@ -61,16 +16,26 @@ export default class IconComponent extends Component {
   }
 
   get style() {
-    return `width:${this.size}px;height:${this.size}px;color:${this.color}`;
+    return htmlSafe(
+      `width:${this.size}px;height:${this.size}px;color:${this.color}`
+    );
   }
 
   get title() {
     return this.args.title || '';
   }
 
+  get isFilled() {
+    return this.args.filled || isIconFilled(this.args.name);
+  }
+
   <template>
     {{#if this.svg}}
-      <span class="icon" style={{this.style}} title={{this.title}}>
+      <span
+        class="icon {{if this.isFilled 'icon-filled'}}"
+        style={{this.style}}
+        title={{this.title}}
+      >
         {{htmlSafe this.svg}}
       </span>
     {{/if}}

app/components/map.gjs

@@ -4,6 +4,8 @@ import { modifier } from 'ember-modifier';
 import 'ol/ol.css';
 import Map from 'ol/Map.js';
 import { defaults as defaultControls, Control } from 'ol/control.js';
+import { defaults as defaultInteractions, DragPan } from 'ol/interaction.js';
+import Kinetic from 'ol/Kinetic.js';
 import View from 'ol/View.js';
 import { fromLonLat, toLonLat, getPointResolution } from 'ol/proj.js';
 import Overlay from 'ol/Overlay.js';
@@ -11,6 +13,7 @@ import LayerGroup from 'ol/layer/Group.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import VectorSource from 'ol/source/Vector.js';
 import Feature from 'ol/Feature.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
 import Point from 'ol/geom/Point.js';
 import Geolocation from 'ol/Geolocation.js';
 import { Style, Circle, Fill, Stroke } from 'ol/style.js';
@@ -21,26 +24,66 @@ export default class MapComponent extends Component {
   @service storage;
   @service mapUi;
   @service router;
+  @service settings;
 
   mapInstance;
   bookmarkSource;
+  selectedShapeSource;
   searchOverlay;
   searchOverlayElement;
   selectedPinOverlay;
   selectedPinElement;
   crosshairElement;
   crosshairOverlay;
+  ignoreNextMapClick = false;
 
   setupMap = modifier((element) => {
     if (this.mapInstance) return;
 
     const openfreemap = new LayerGroup();
 
+    // Create a vector source and layer for the selected shape (outline)
+    this.selectedShapeSource = new VectorSource();
+    const selectedShapeLayer = new VectorLayer({
+      source: this.selectedShapeSource,
+      style: new Style({
+        stroke: new Stroke({
+          color: '#3388ff',
+          width: 4,
+        }),
+        fill: new Fill({
+          color: 'rgba(51, 136, 255, 0.1)',
+        }),
+      }),
+      zIndex: 5, // Below bookmarks (10) but above tiles
+    });
+
     // Create a vector source and layer for bookmarks
     this.bookmarkSource = new VectorSource();
-    const bookmarkLayer = new VectorLayer({
-      source: this.bookmarkSource,
-      style: [
+
+    const bookmarkStyleFunction = (feature) => {
+      const originalPlace = feature.get('originalPlace');
+      let color =
+        getComputedStyle(document.documentElement)
+          .getPropertyValue('--default-list-color')
+          .trim() || '#000000'; // Fallback to black if variable is missing to make error obvious
+
+      if (
+        originalPlace &&
+        originalPlace._listIds &&
+        originalPlace._listIds.length > 0
+      ) {
+        // Find the first list color
+        // We need access to storage.lists.
+        // Since this is inside setupMap, 'this' refers to the component instance.
+        const firstListId = originalPlace._listIds[0];
+        const list = this.storage.lists.find((l) => l.id === firstListId);
+        if (list && list.color) {
+          color = list.color;
+        }
+      }
+
+      return [
         new Style({
           image: new Circle({
             radius: 10,
@@ -51,20 +94,26 @@ export default class MapComponent extends Component {
         new Style({
           image: new Circle({
             radius: 9,
-            fill: new Fill({ color: '#ffcc33' }), // Gold/Yellow
+            fill: new Fill({ color: color }),
             stroke: new Stroke({
               color: '#fff',
               width: 2,
             }),
           }),
         }),
-      ],
+      ];
+    };
+
+    const bookmarkLayer = new VectorLayer({
+      source: this.bookmarkSource,
+      style: bookmarkStyleFunction,
       zIndex: 10, // Ensure it sits above the map tiles
     });
 
     // Default view settings
     let center = [14.21683569, 27.060114248];
     let zoom = 2.661;
+    let restoredFromStorage = false;
 
     // Try to restore from localStorage
     try {
@@ -79,6 +128,7 @@ export default class MapComponent extends Component {
         ) {
           center = parsed.center;
           zoom = parsed.zoom;
+          restoredFromStorage = true;
         }
       }
     } catch (e) {
@@ -93,15 +143,22 @@ export default class MapComponent extends Component {
 
     this.mapInstance = new Map({
       target: element,
-      layers: [openfreemap, bookmarkLayer],
+      layers: [openfreemap, selectedShapeLayer, bookmarkLayer],
       view: view,
       controls: defaultControls({
-        zoom: false,
+        zoom: true,
         rotate: true,
         attribution: true,
       }),
+      interactions: defaultInteractions({
+        dragPan: false, // Disable default DragPan to add a custom one
+      }),
     });
 
+    // Initialize the UI service with the map center
+    const initialCenter = toLonLat(view.getCenter());
+    this.mapUi.updateCenter(initialCenter[1], initialCenter[0]);
+
     apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty');
 
     this.searchOverlayElement = document.createElement('div');
@@ -147,9 +204,6 @@ export default class MapComponent extends Component {
     `;
     element.appendChild(this.crosshairElement);
 
-
-
-
     // Geolocation Pulse Overlay
     this.locationOverlayElement = document.createElement('div');
     this.locationOverlayElement.className = 'search-pulse blue';
@@ -160,6 +214,18 @@ export default class MapComponent extends Component {
     });
     this.mapInstance.addOverlay(this.locationOverlay);
 
+    // Track search box focus state on pointer down to handle race conditions
+    // The blur event fires before click, so we need to capture state here
+    element.addEventListener(
+      'pointerdown',
+      () => {
+        if (this.mapUi.searchBoxHasFocus) {
+          this.ignoreNextMapClick = true;
+        }
+      },
+      true
+    );
+
     // Geolocation Setup
     const geolocation = new Geolocation({
       trackingOptions: {
@@ -237,6 +303,7 @@ export default class MapComponent extends Component {
       const coordinates = geolocation.getPosition();
       const accuracyGeometry = geolocation.getAccuracyGeometry();
       const accuracy = geolocation.getAccuracy();
+      console.debug('Geolocation change:', { coordinates, accuracy });
 
       if (!coordinates) return;
 
@@ -301,7 +368,8 @@ export default class MapComponent extends Component {
       this.mapInstance.getView().animate(viewOptions);
     };
 
-    locateBtn.addEventListener('click', () => {
+    const startLocating = () => {
+      console.debug('Getting current geolocation...');
       // 1. Clear any previous session
       stopLocating();
 
@@ -325,7 +393,9 @@ export default class MapComponent extends Component {
       locateTimeout = setTimeout(() => {
         stopLocating();
       }, 10000);
-    });
+    };
+
+    locateBtn.addEventListener('click', startLocating);
 
     const locateControl = new Control({
       element: locateElement,
@@ -334,6 +404,11 @@ export default class MapComponent extends Component {
     this.mapInstance.addLayer(geolocationLayer);
     this.mapInstance.addControl(locateControl);
 
+    // Auto-locate on first visit (if not restored from storage and on home page)
+    if (!restoredFromStorage && this.router.currentRouteName === 'index') {
+      startLocating();
+    }
+
     this.mapInstance.on('singleclick', this.handleMapClick);
 
     // Load places when map moves
@@ -353,12 +428,54 @@ export default class MapComponent extends Component {
     });
   });
 
+  updateInteractions = modifier(() => {
+    if (!this.mapInstance) return;
+
+    // Remove existing DragPan interactions
+    this.mapInstance
+      .getInteractions()
+      .getArray()
+      .slice()
+      .forEach((interaction) => {
+        if (interaction instanceof DragPan) {
+          this.mapInstance.removeInteraction(interaction);
+        }
+      });
+
+    // Add new DragPan with current setting
+    const kinetic = this.settings.mapKinetic
+      ? new Kinetic(-0.005, 0.05, 100)
+      : false;
+
+    // Fix for "sticky" touches on mobile:
+    // If we're on mobile (width <= 768) AND using kinetic,
+    // we increase the minimum velocity required to trigger kinetic panning.
+    // This prevents slow drags from being interpreted as a "throw"
+    if (this.settings.mapKinetic && window.innerWidth <= 768) {
+      // Default minVelocity is 0.05. We bump it up significantly.
+      // This means the user has to really "flick" the map to get inertia.
+      kinetic.minVelocity_ = 0.25;
+    }
+
+    this.mapInstance.addInteraction(
+      new DragPan({
+        kinetic: kinetic,
+      })
+    );
+  });
+
   // Track the selected place from the UI Service (Router -> Map)
   updateSelectedPin = modifier(() => {
     const selected = this.mapUi.selectedPlace;
+    const options = this.mapUi.selectionOptions || {};
 
     if (!this.selectedPinOverlay || !this.selectedPinElement) return;
 
+    // Clear any previous shape
+    if (this.selectedShapeSource) {
+      this.selectedShapeSource.clear();
+    }
+
     if (selected && selected.lat && selected.lon) {
       const coords = fromLonLat([selected.lon, selected.lat]);
       this.selectedPinOverlay.setPosition(coords);
@@ -369,7 +486,27 @@ export default class MapComponent extends Component {
       void this.selectedPinElement.offsetWidth;
       this.selectedPinElement.classList.add('active');
 
-      this.handlePinVisibility(coords);
+      // Draw GeoJSON shape if available
+      if (selected.geojson && this.selectedShapeSource) {
+        try {
+          const feature = new GeoJSON().readFeature(selected.geojson, {
+            featureProjection: 'EPSG:3857',
+          });
+          this.selectedShapeSource.addFeature(feature);
+        } catch (e) {
+          console.warn('Failed to render selected place shape:', e);
+        }
+      }
+
+      if (options.preventZoom) {
+        // If we are preventing zoom (e.g. user clicked a bookmark), we rely on visibility check.
+        // This avoids unnecessary panning if the place is already visible.
+        this.handlePinVisibility(coords, { maintainZoom: true });
+      } else if (selected.bbox) {
+        this.zoomToBbox(selected.bbox);
+      } else {
+        this.handlePinVisibility(coords);
+      }
     } else {
       this.selectedPinElement.classList.remove('active');
       // Hide it effectively by moving it away or just relying on display:none in CSS
@@ -377,9 +514,73 @@ export default class MapComponent extends Component {
     }
   });
 
-  handlePinVisibility(coords) {
+  zoomToBbox(bbox) {
+    if (!this.mapInstance || !bbox) return;
+
+    const view = this.mapInstance.getView();
+    const size = this.mapInstance.getSize();
+
+    // Convert bbox to extent: [minx, miny, maxx, maxy]
+    const min = fromLonLat([bbox.minLon, bbox.minLat]);
+    const max = fromLonLat([bbox.maxLon, bbox.maxLat]);
+    const extent = [...min, ...max];
+
+    // Default padding for full screen: 15% on all sides (70% visible)
+    let padding = [
+      size[1] * 0.15, // Top
+      size[0] * 0.15, // Right
+      size[1] * 0.15, // Bottom
+      size[0] * 0.15, // Left
+    ];
+
+    // Mobile: Bottom sheet covers 50% of the screen height
+    if (size[0] <= 768) {
+      // We want the geometry to be centered in the top 50% of the screen.
+      // Top padding: 15% of the VISIBLE height (size[1] * 0.5)
+      const visibleHeight = size[1] * 0.5;
+      const topPadding = visibleHeight * 0.15;
+      const bottomPadding = size[1] * 0.5 + visibleHeight * 0.15; // Sheet + padding
+
+      padding[0] = topPadding;
+      padding[2] = bottomPadding;
+    }
+    // Desktop: Sidebar covers left side (approx 400px)
+    else if (this.args.isSidebarOpen) {
+      const sidebarWidthVar = getComputedStyle(document.documentElement)
+        .getPropertyValue('--sidebar-width')
+        .trim();
+      const sidebarWidth = parseInt(sidebarWidthVar, 10) || 360;
+      const visibleWidth = size[0] - sidebarWidth;
+
+      // Left padding: Sidebar + 15% of visible width
+      padding[3] = sidebarWidth + visibleWidth * 0.15;
+      // Right padding: 15% of visible width
+      padding[1] = visibleWidth * 0.15;
+    }
+
+    const currentZoom = view.getZoom();
+
+    view.fit(extent, {
+      padding: padding,
+      duration: 1000,
+      easing: (t) => t * (2 - t),
+      maxZoom: Math.max(currentZoom, 18),
+    });
+  }
+
+  handlePinVisibility(coords, options = {}) {
     if (!this.mapInstance) return;
 
+    const view = this.mapInstance.getView();
+    const currentZoom = view.getZoom();
+
+    // If too far out (e.g. world view), zoom in to neighborhood level (16)
+    // UNLESS we want to maintain the current zoom
+    if (!options.maintainZoom && currentZoom < 16) {
+      this.animateToSmartCenter(coords, 16);
+      return;
+    }
+
     const pixel = this.mapInstance.getPixelFromCoordinate(coords);
     const size = this.mapInstance.getSize();
 
@@ -392,18 +593,27 @@ export default class MapComponent extends Component {
       pixel[1] > size[1];
 
     if (isOffScreen) {
-      this.animateToSmartCenter(coords);
+      // If off-screen, center it smartly (considering sidebar/bottom sheet)
+      // Pass maintainZoom to prevent zoom reset if desired
+      const zoom = options.maintainZoom ? null : 16;
+      this.animateToSmartCenter(coords, zoom);
     } else {
+      // If on-screen, only pan if obscured by UI
       this.panIfObscured(coords);
     }
   }
 
-  animateToSmartCenter(coords) {
+  animateToSmartCenter(coords, zoom = null) {
     if (!this.mapInstance) return;
 
     const size = this.mapInstance.getSize();
     const view = this.mapInstance.getView();
-    const resolution = view.getResolution();
+    let resolution = view.getResolution();
+
+    if (zoom !== null) {
+      resolution = view.getResolutionForZoom(zoom);
+    }
+
     let targetCenter = coords;
 
     // Check if mobile (width <= 768px matches CSS)
@@ -424,45 +634,113 @@ export default class MapComponent extends Component {
       // To move the camera South (Lower Y), we subtract.
       targetCenter = [coords[0], coords[1] - offsetMapUnits];
     }
+    // Desktop: Check if sidebar is open
+    else if (this.args.isSidebarOpen) {
+      const sidebarWidthVar = getComputedStyle(document.documentElement)
+        .getPropertyValue('--sidebar-width')
+        .trim();
+      const sidebarWidth = parseInt(sidebarWidthVar, 10) || 360;
 
-    view.animate({
+      // We want the pin to be in the center of the remaining space.
+      // Remaining space starts at x = sidebarWidth.
+      // Center of remaining space = sidebarWidth + (totalWidth - sidebarWidth) / 2
+      // = sidebarWidth/2 + totalWidth/2
+      // Map Center is totalWidth/2
+      // Offset = sidebarWidth/2 (to the right)
+
+      const offsetPixels = sidebarWidth / 2;
+      const offsetMapUnits = offsetPixels * resolution;
+
+      // We want pin at center + offset.
+      // So map center must be pin - offset.
+      // X increases to the right.
+      targetCenter = [coords[0] - offsetMapUnits, coords[1]];
+    }
+
+    const animationOptions = {
       center: targetCenter,
       duration: 1000,
       easing: (t) => t * (2 - t), // Ease-out
-    });
+    };
+
+    if (zoom !== null) {
+      animationOptions.zoom = zoom;
+    }
+
+    view.animate(animationOptions);
   }
 
   panIfObscured(coords) {
     if (!this.mapInstance) return;
 
     const size = this.mapInstance.getSize();
-    // Check if mobile (width <= 768px matches CSS)
-    if (size[0] > 768) return;
-
     const pixel = this.mapInstance.getPixelFromCoordinate(coords);
     if (!pixel) return;
 
-    const height = size[1];
+    const view = this.mapInstance.getView();
+    const center = view.getCenter();
+    const resolution = view.getResolution();
 
-    // Sidebar covers the bottom 50%
-    const splitPoint = height / 2;
+    // Default targets (current position)
+    let targetPixelX = pixel[0];
+    let targetPixelY = pixel[1];
+    let needsPan = false;
 
-    // If the pin is in the bottom half (y > splitPoint), it is obscured
-    if (pixel[1] > splitPoint) {
-      // Target position: Center of top half = height * 0.25
-      const targetY = height * 0.25;
-      const deltaY = pixel[1] - targetY;
+    // 1. Mobile Bottom Sheet Logic (Screen <= 768px)
+    if (size[0] <= 768) {
+      const height = size[1];
+      const splitPoint = height / 2;
 
-      const view = this.mapInstance.getView();
-      const center = view.getCenter();
-      const resolution = view.getResolution();
+      // If in bottom half
+      if (pixel[1] > splitPoint) {
+        targetPixelY = height * 0.25; // Target: Center of top half
+        needsPan = true;
+      }
+    }
+    // 2. Desktop Sidebar Logic (Screen > 768px + Sidebar Open)
+    else if (this.args.isSidebarOpen) {
+      const sidebarWidthVar = getComputedStyle(document.documentElement)
+        .getPropertyValue('--sidebar-width')
+        .trim();
+      const sidebarWidth = parseInt(sidebarWidthVar, 10) || 360;
 
-      // Move the map center SOUTH (decrease Y) to move the pin UP (decrease pixel Y)
-      const deltaMapUnits = deltaY * resolution;
-      const newCenter = [center[0], center[1] - deltaMapUnits];
+      // If under sidebar
+      if (pixel[0] < sidebarWidth) {
+        const visibleWidth = size[0] - sidebarWidth;
+        targetPixelX = sidebarWidth + visibleWidth / 2; // Target: Center of visible area
+        needsPan = true;
+      }
+    }
+
+    // 3. Header Logic (Any screen size)
+    // Check if the (potentially new) target Y is under the header
+    const headerHeight = 60;
+    const minTopDistance = headerHeight + 20; // 80px
+
+    if (targetPixelY < minTopDistance) {
+      targetPixelY = minTopDistance + 30; // Move it to ~110px, clear of header
+      needsPan = true;
+    }
+
+    if (needsPan) {
+      const deltaPixelX = pixel[0] - targetPixelX;
+      const deltaPixelY = pixel[1] - targetPixelY;
+
+      // X: Camera moves same direction as we want the world to move? No.
+      // If we want pin to move RIGHT (pixel increases), Camera must move LEFT (X decreases).
+      // deltaPixelX = current - target. If current < target (want move right), delta is negative.
+      // center + negative = decrease. Correct.
+      const newCenterX = center[0] + deltaPixelX * resolution;
+
+      // Y: Camera moves opposite direction to world relative to pixel coords.
+      // Pixel Y increases DOWN. Map Y increases UP.
+      // If we want pin to move DOWN (pixel increases), Camera must move UP (Y increases).
+      // deltaPixelY = current - target. If current < target (want move down), delta is negative.
+      // center - negative = increase. Correct.
+      const newCenterY = center[1] - deltaPixelY * resolution;
 
       view.animate({
-        center: newCenter,
+        center: [newCenterX, newCenterY],
         duration: 500,
         easing: (t) => t * (2 - t), // Ease-out
       });
@@ -595,18 +873,29 @@ export default class MapComponent extends Component {
   handleMapMove = async () => {
     if (!this.mapInstance) return;
 
+    const view = this.mapInstance.getView();
+    const center = toLonLat(view.getCenter());
+    this.mapUi.updateCenter(center[1], center[0]);
+
     // If in creation mode, update the coordinates in the service AND the URL
     if (this.mapUi.isCreating) {
       // Calculate coordinates under the crosshair element
       // We need the pixel position of the crosshair relative to the map viewport
       // The crosshair is positioned via CSS, so we can use getBoundingClientRect
-      const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect();
+      const mapRect = this.mapInstance
+        .getTargetElement()
+        .getBoundingClientRect();
       const crosshairRect = this.crosshairElement.getBoundingClientRect();
 
-      const centerX = crosshairRect.left + crosshairRect.width / 2 - mapRect.left;
-      const centerY = crosshairRect.top + crosshairRect.height / 2 - mapRect.top;
+      const centerX =
+        crosshairRect.left + crosshairRect.width / 2 - mapRect.left;
+      const centerY =
+        crosshairRect.top + crosshairRect.height / 2 - mapRect.top;
 
-      const coordinate = this.mapInstance.getCoordinateFromPixel([centerX, centerY]);
+      const coordinate = this.mapInstance.getCoordinateFromPixel([
+        centerX,
+        centerY,
+      ]);
       const center = toLonLat(coordinate);
 
       const lat = parseFloat(center[1].toFixed(6));
@@ -625,6 +914,7 @@ export default class MapComponent extends Component {
     const [maxLon, maxLat] = toLonLat([extent[2], extent[3]]);
 
     const bbox = { minLat, minLon, maxLat, maxLon };
+    this.mapUi.updateBounds(bbox);
     await this.storage.loadPlacesInBounds(bbox);
     this.loadBookmarks(this.storage.placesInView);
 
@@ -646,6 +936,11 @@ export default class MapComponent extends Component {
   };
 
   handleMapClick = async (event) => {
+    if (this.ignoreNextMapClick) {
+      this.ignoreNextMapClick = false;
+      return;
+    }
+
     // Check if user clicked on a rendered feature (POI or Bookmark) FIRST
     const features = this.mapInstance.getFeaturesAtPixel(event.pixel, {
       hitTolerance: 10,
@@ -677,6 +972,7 @@ export default class MapComponent extends Component {
           'Clicked bookmark while sidebar open (switching):',
           clickedBookmark
         );
+        this.mapUi.preventNextZoom = true;
         this.router.transitionTo('place', clickedBookmark);
         return;
       }
@@ -691,10 +987,18 @@ export default class MapComponent extends Component {
     // Normal behavior (sidebar is closed)
     if (clickedBookmark) {
       console.debug('Clicked bookmark:', clickedBookmark);
+      this.mapUi.preventNextZoom = true;
       this.router.transitionTo('place', clickedBookmark);
       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();
+    if (currentZoom < 16) {
+      return;
+    }
+
     const coords = toLonLat(event.coordinate);
     const [lon, lat] = coords;
 
@@ -724,10 +1028,9 @@ export default class MapComponent extends Component {
     const queryParams = {
       lat: lat.toFixed(6),
       lon: lon.toFixed(6),
+      q: null, // Clear q to force spatial search
+      selected: selectedFeatureName || null,
     };
-    if (selectedFeatureName) {
-      queryParams.q = selectedFeatureName;
-    }
 
     this.router.transitionTo('search', { queryParams });
   };
@@ -736,6 +1039,7 @@ export default class MapComponent extends Component {
     <div
       class="map-container {{if @isSidebarOpen 'sidebar-open'}}"
       {{this.setupMap}}
+      {{this.updateInteractions}}
       {{this.updateBookmarks}}
       {{this.updateSelectedPin}}
       {{this.syncPulse}}

app/components/place-details.gjs

@@ -1,36 +1,50 @@
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
+import { service } from '@ember/service';
 import { on } from '@ember/modifier';
+import { htmlSafe } from '@ember/template';
 import { humanizeOsmTag } from '../utils/format-text';
+import { getLocalizedName, getPlaceType } from '../utils/osm';
+import { mapToStorageSchema } from '../utils/place-mapping';
+import { getSocialInfo } from '../utils/social-links';
 import Icon from '../components/icon';
 import PlaceEditForm from './place-edit-form';
+import PlaceListsManager from './place-lists-manager';
 
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class PlaceDetails extends Component {
+  @service storage;
   @tracked isEditing = false;
+  @tracked showLists = false;
+
+  get isSaved() {
+    return this.storage.isPlaceSaved(this.place.id || this.place.osmId);
+  }
 
   get place() {
     return this.args.place || {};
   }
 
+  get saveablePlace() {
+    if (this.place.createdAt) {
+      return this.place;
+    }
+
+    return mapToStorageSchema(this.place);
+  }
+
   get tags() {
     return this.place.osmTags || {};
   }
 
   get name() {
-    return (
-      this.place.title ||
-      this.tags.name ||
-      this.tags['name:en'] ||
-      'Unnamed Place'
-    );
+    return this.place.title || getLocalizedName(this.tags) || 'Unnamed Place';
   }
 
   @action
   startEditing() {
-    if (!this.place.createdAt) return; // Only allow editing saved places
+    if (!this.isSaved) return; // Only allow editing saved places
     this.isEditing = true;
   }
 
@@ -39,6 +53,21 @@ export default class PlaceDetails extends Component {
     this.isEditing = false;
   }
 
+  @action
+  toggleLists(event) {
+    // Prevent this click from propagating to the document listener
+    // which handles the "click outside" logic.
+    if (event) {
+      event.stopPropagation();
+    }
+    this.showLists = !this.showLists;
+  }
+
+  @action
+  closeLists() {
+    this.showLists = false;
+  }
+
   @action
   async saveChanges(changes) {
     if (this.args.onSave) {
@@ -51,58 +80,118 @@ export default class PlaceDetails extends Component {
   }
 
   get type() {
-    const rawType =
-      this.tags.amenity ||
-      this.tags.shop ||
-      this.tags.tourism ||
-      this.tags.leisure ||
-      this.tags.historic ||
-      'Point of Interest';
-
-    return humanizeOsmTag(rawType);
+    return getPlaceType(this.tags);
   }
 
   get address() {
     const t = this.tags;
     const parts = [];
 
+    // Helper to get value from multiple keys
+    const get = (...keys) => {
+      for (const k of keys) {
+        if (t[k]) return t[k];
+      }
+      return null;
+    };
+
     // Street + Number
-    if (t['addr:street']) {
-      let street = t['addr:street'];
-      if (t['addr:housenumber']) {
-        street += ` ${t['addr:housenumber']}`;
+    let street = get('addr:street', 'street');
+    const number = get('addr:housenumber', 'housenumber');
+
+    if (street) {
+      if (number) {
+        street = `${street} ${number}`;
       }
       parts.push(street);
     }
 
     // Postcode + City
-    if (t['addr:city']) {
-      let city = t['addr:city'];
-      if (t['addr:postcode']) {
-        city = `${t['addr:postcode']} ${city}`;
+    let city = get('addr:city', 'city');
+    const postcode = get('addr:postcode', 'postcode');
+
+    if (city) {
+      if (postcode) {
+        city = `${postcode} ${city}`;
       }
       parts.push(city);
     }
 
+    // State + Country (if not already covered)
+    const state = get('addr:state', 'state');
+    const country = get('addr:country', 'country');
+
+    if (state && state !== city) parts.push(state);
+    if (country) parts.push(country);
+
     if (parts.length === 0) return null;
     return parts.join(', ');
   }
 
+  formatMultiLine(val, type) {
+    if (!val) return null;
+    const parts = val
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (parts.length === 0) return null;
+
+    if (type === 'phone') {
+      return htmlSafe(
+        parts.map((p) => `<a href="tel:${p}">${p}</a>`).join('<br>')
+      );
+    }
+
+    if (type === 'email') {
+      return htmlSafe(
+        parts.map((p) => `<a href="mailto:${p}">${p}</a>`).join('<br>')
+      );
+    }
+
+    if (type === 'url') {
+      return htmlSafe(
+        parts
+          .map(
+            (url) =>
+              `<a href="${url}" target="_blank" rel="noopener noreferrer">${this.getDomain(
+                url
+              )}</a>`
+          )
+          .join('<br>')
+      );
+    }
+
+    return htmlSafe(parts.join('<br>'));
+  }
+
   get phone() {
-    return this.tags.phone || this.tags['contact:phone'];
+    const val = this.tags.phone || this.tags['contact:phone'];
+    return this.formatMultiLine(val, 'phone');
+  }
+
+  get email() {
+    const val = this.tags.email || this.tags['contact:email'];
+    return this.formatMultiLine(val, 'email');
   }
 
   get website() {
-    return this.place.url || this.tags.website || this.tags['contact:website'];
+    const val =
+      this.place.url || this.tags.website || this.tags['contact:website'];
+    return this.formatMultiLine(val, 'url');
   }
 
-  get websiteDomain() {
-    const url = new URL(this.website);
-    return url.hostname;
+  getDomain(urlStr) {
+    try {
+      const url = new URL(urlStr);
+      return url.hostname;
+    } catch {
+      return urlStr;
+    }
   }
 
   get openingHours() {
-    return this.tags.opening_hours;
+    const val = this.tags.opening_hours;
+    return this.formatMultiLine(val);
   }
 
   get cuisine() {
@@ -113,8 +202,21 @@ export default class PlaceDetails extends Component {
       .join(', ');
   }
 
+  get facebook() {
+    return getSocialInfo(this.tags, 'facebook');
+  }
+
+  get instagram() {
+    return getSocialInfo(this.tags, 'instagram');
+  }
+
   get wikipedia() {
-    return this.tags.wikipedia;
+    const val = this.tags.wikipedia;
+    if (!val) return null;
+    return val
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean)[0];
   }
 
   get geoLink() {
@@ -129,7 +231,7 @@ export default class PlaceDetails extends Component {
     const lat = this.place.lat;
     const lon = this.place.lon;
     if (!lat || !lon) return '';
-    return `${lat}, ${lon}`;
+    return `${Number(lat).toFixed(6)}, ${Number(lon).toFixed(6)}`;
   }
 
   get osmUrl() {
@@ -145,6 +247,16 @@ export default class PlaceDetails extends Component {
     return `https://www.google.com/maps/search/?api=1&query=${this.name}&query=${this.place.lat},${this.place.lon}`;
   }
 
+  get showDescription() {
+    // If it's a Photon result, the description IS the address.
+    // Since we are showing the address in the meta section (bottom),
+    // we should hide the description to avoid duplication.
+    if (this.place.source === 'photon') return false;
+
+    // Otherwise (e.g. saved place with custom description), show it.
+    return !!this.place.description;
+  }
+
   <template>
     <div class="place-details">
       {{#if this.isEditing}}
@@ -158,7 +270,7 @@ export default class PlaceDetails extends Component {
         <p class="place-type">
           {{this.type}}
         </p>
-        {{#if this.place.description}}
+        {{#if this.showDescription}}
           <p class="place-description">
             {{this.place.description}}
           </p>
@@ -166,30 +278,37 @@ export default class PlaceDetails extends Component {
       {{/if}}
 
       <div class="actions">
-        <button
-          type="button"
-          class={{if
-            this.place.createdAt
-            "btn btn-secondary"
-            "btn btn-outline"
-          }}
-          {{on "click" (fn @onToggleSave this.place)}}
-        >
-          <Icon
-            @name="bookmark"
-            @color={{if this.place.createdAt "currentColor" "#007bff"}}
-          />
-          {{if this.place.createdAt "Saved" "Save"}}
-        </button>
+        <div class="save-button-wrapper">
+          <button
+            type="button"
+            class={{if this.isSaved "btn btn-secondary" "btn btn-outline"}}
+            {{on "click" this.toggleLists}}
+          >
+            <Icon
+              @name="bookmark"
+              @color={{if this.isSaved "currentColor" "var(--link-color)"}}
+            />
+            {{if this.isSaved "Saved" "Save"}}
+          </button>
 
-        {{#if this.place.createdAt}}
+          {{#if this.showLists}}
+            <PlaceListsManager
+              @place={{this.saveablePlace}}
+              @onClose={{this.closeLists}}
+              @isSaved={{this.isSaved}}
+            />
+          {{/if}}
+        </div>
+
+        {{#if this.isSaved}}
           <button
             type="button"
             class="btn btn-outline"
             title="Edit"
+            disabled={{this.isEditing}}
             {{on "click" this.startEditing}}
           >
-            <Icon @name="edit" @color="#007bff" />
+            <Icon @name="edit" @color="var(--link-color)" />
             Edit
           </button>
         {{/if}}
@@ -198,45 +317,92 @@ export default class PlaceDetails extends Component {
       <div class="meta-info">
 
         {{#if this.cuisine}}
-          <p>
-            <strong>Cuisine:</strong>
-            {{this.cuisine}}
+          <p class="content-with-icon">
+            <Icon @name="fork-and-knife" @title="Cuisine" />
+            <span>
+              {{this.cuisine}}
+            </span>
           </p>
         {{/if}}
 
         {{#if this.openingHours}}
           <p class="content-with-icon">
             <Icon @name="clock" @title="Opening hours" />
-            <span>{{this.openingHours}}</span>
+            <span>
+              {{this.openingHours}}
+            </span>
           </p>
         {{/if}}
 
         {{#if this.phone}}
           <p class="content-with-icon">
             <Icon @name="phone" @title="Phone" />
-            <span><a href="tel:{{this.phone}}">{{this.phone}}</a></span>
+            <span>
+              {{this.phone}}
+            </span>
           </p>
         {{/if}}
 
         {{#if this.website}}
           <p class="content-with-icon">
             <Icon @name="globe" @title="Website" />
-            <span><a
-                href={{this.website}}
+            <span>
+              {{this.website}}
+            </span>
+          </p>
+        {{/if}}
+
+        {{#if this.email}}
+          <p class="content-with-icon">
+            <Icon @name="mail" @title="Email" />
+            <span>
+              {{this.email}}
+            </span>
+          </p>
+        {{/if}}
+
+        {{#if this.facebook}}
+          <p class="content-with-icon">
+            <Icon @name="facebook" @title="Facebook" />
+            <span>
+              <a
+                href={{this.facebook.url}}
                 target="_blank"
                 rel="noopener noreferrer"
-              >{{this.websiteDomain}}</a></span>
+              >
+                {{this.facebook.username}}
+              </a>
+            </span>
+          </p>
+        {{/if}}
+
+        {{#if this.instagram}}
+          <p class="content-with-icon">
+            <Icon @name="instagram" @title="Instagram" />
+            <span>
+              <a
+                href={{this.instagram.url}}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {{this.instagram.username}}
+              </a>
+            </span>
           </p>
         {{/if}}
 
         {{#if this.wikipedia}}
-          <p>
-            <strong>Wikipedia:</strong>
-            <a
-              href="https://wikipedia.org/wiki/{{this.wikipedia}}"
-              target="_blank"
-              rel="noopener noreferrer"
-            >Article</a>
+          <p class="content-with-icon">
+            <Icon @name="wikipedia" @title="Wikipedia" />
+            <span>
+              <a
+                href="https://wikipedia.org/wiki/{{this.wikipedia}}"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Wikipedia
+              </a>
+            </span>
           </p>
         {{/if}}
 
@@ -274,7 +440,11 @@ export default class PlaceDetails extends Component {
           <p class="content-with-icon">
             <Icon @name="map" />
             <span>
-              <a href={{this.gmapsUrl}} target="_blank" rel="noopener noreferrer">
+              <a
+                href={{this.gmapsUrl}}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 Google Maps
               </a>
             </span>

app/components/place-edit-form.gjs

@@ -13,6 +13,13 @@ export default class PlaceEditForm extends Component {
     this.description = this.args.place?.description || '';
   }
 
+  get shouldAutofocus() {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth > 768;
+    }
+    return false;
+  }
+
   @action
   handleSubmit(event) {
     event.preventDefault();
@@ -38,6 +45,7 @@ export default class PlaceEditForm extends Component {
     <form class="edit-form" {{on "submit" this.handleSubmit}}>
       <div class="form-group">
         <label for="edit-title">Title</label>
+        {{! template-lint-disable no-autofocus-attribute }}
         <input
           id="edit-title"
           type="text"
@@ -45,7 +53,7 @@ export default class PlaceEditForm extends Component {
           {{on "input" this.updateTitle}}
           class="form-control"
           placeholder="Name of the place"
-          autofocus
+          autofocus={{this.shouldAutofocus}}
         />
       </div>
       <div class="form-group">

app/components/place-lists-manager.gjs

@@ -0,0 +1,135 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { htmlSafe } from '@ember/template';
+import onClickOutside from '../modifiers/on-click-outside';
+
+export default class PlaceListsManager extends Component {
+  @service storage;
+  @service router;
+  @tracked _forceClear = false;
+
+  get isSaved() {
+    return this.args.isSaved;
+  }
+
+  get placeListIds() {
+    if (this._forceClear) return [];
+    return this.args.place._listIds || [];
+  }
+
+  styleFor(color) {
+    return htmlSafe(`background-color: ${color}`);
+  }
+
+  @action
+  isInList(list) {
+    if (!this.placeListIds) return false;
+    return this.placeListIds.includes(list.id);
+  }
+
+  @action
+  async toggleSaved() {
+    if (this.isSaved) {
+      const { osmId, osmType } = this.args.place;
+
+      await this.storage.removePlace(this.args.place);
+
+      // Clean up the local object reference immediately to prevent UI flicker
+      // or stale state if the transition is delayed/cancelled.
+      if (this.args.place) {
+        this.args.place.id = null;
+        this.args.place.createdAt = null;
+        this.args.place._listIds = [];
+        this._forceClear = true;
+      }
+
+      // Transition immediately to the canonical state
+      if (osmId && osmType) {
+        // Create a transient copy that looks like a fresh OSM result
+        const rawPlace = { ...this.args.place };
+        delete rawPlace.id;
+        delete rawPlace.createdAt;
+        delete rawPlace._listIds;
+
+        // Transition to the place route using the raw object
+        // This updates the URL to 'osm:...' and renders immediately
+        this.router.transitionTo('place', rawPlace);
+      } else {
+        // Custom place deleted -> go home
+        this.router.transitionTo('index');
+      }
+
+      if (this.args.onClose) this.args.onClose();
+    } else {
+      await this.storage.storePlace(this.args.place);
+    }
+  }
+
+  @action
+  async toggleList(list) {
+    const isMember = this.placeListIds.includes(list.id);
+    const shouldAdd = !isMember;
+
+    if (shouldAdd && !this.isSaved) {
+      // Auto-save if adding to list
+      await this.storage.storePlace(this.args.place);
+    }
+
+    try {
+      // Toggle membership
+      // We must pass the SAVED place (with ID) to the toggle function
+      // If we just saved it above, the args.place might still be the old object reference unless storage updates it in-place?
+      // StorageService.storePlace returns the new object.
+      // But togglePlaceList handles saving internally if ID is missing.
+
+      // Let's rely on storage.togglePlaceList to handle the "save if needed" part.
+      await this.storage.togglePlaceList(this.args.place, list.id, shouldAdd);
+    } catch (e) {
+      console.error(e);
+      alert('Failed to update list: ' + e.message);
+    }
+  }
+
+  <template>
+    <div class="place-lists-manager" {{onClickOutside @onClose}}>
+      <div class="list-item master-toggle">
+        <label>
+          <input
+            type="checkbox"
+            checked={{this.isSaved}}
+            {{on "change" this.toggleSaved}}
+          />
+          <span class="list-color"></span>
+          <span class="list-name">Saved places</span>
+        </label>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="lists-container">
+        {{#each this.storage.lists as |list|}}
+          <div class="list-item">
+            <label>
+              <input
+                type="checkbox"
+                checked={{this.isInList list}}
+                {{on "change" (fn this.toggleList list)}}
+                disabled={{unless this.isSaved true}}
+              />
+              {{! template-lint-disable no-inline-styles }}
+              <span
+                class="list-color"
+                style={{this.styleFor list.color}}
+              ></span>
+              <span class="list-name">{{list.title}}</span>
+            </label>
+          </div>
+        {{/each}}
+      </div>
+    </div>
+  </template>
+}

app/components/places-sidebar.gjs

@@ -4,9 +4,11 @@ import { action } from '@ember/object';
 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 PlaceDetails from './place-details';
 import Icon from './icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
+import { getLocalizedName, getPlaceType } from '../utils/osm';
 
 export default class PlacesSidebar extends Component {
   @service storage;
@@ -22,8 +24,10 @@ export default class PlacesSidebar extends Component {
     if (lat && lon) {
       this.router.transitionTo('place.new', { queryParams: { lat, lon } });
     } else {
-       // Fallback (shouldn't happen in search context)
-       this.router.transitionTo('place.new', { queryParams: { lat: 0, lon: 0 } });
+      // Fallback (shouldn't happen in search context)
+      this.router.transitionTo('place.new', {
+        queryParams: { lat: 0, lon: 0 },
+      });
     }
   }
 
@@ -47,46 +51,44 @@ export default class PlacesSidebar extends Component {
     if (!place) return;
 
     if (place.createdAt) {
-      if (confirm(`Delete "${place.title}"?`)) {
-        try {
-          await this.storage.removePlace(place);
-          console.debug('Place deleted:', place.title);
+      // Direct delete without confirmation
+      try {
+        await this.storage.removePlace(place);
+        console.debug('Place deleted:', place.title);
 
-          // Notify parent to refresh map bookmarks
-          if (this.args.onBookmarkChange) {
-            this.args.onBookmarkChange();
-          }
-
-          if (this.args.onUpdate) {
-            // Reconstruct the "original" place without ID/Geohash/CreatedAt
-            const freshPlace = {
-              ...place,
-              id: undefined,
-              geohash: undefined,
-              createdAt: undefined,
-            };
-            this.args.onUpdate(freshPlace);
-          }
-
-          // Also fire onSelect if it exists (for list view)
-          if (this.args.onSelect) {
-            this.args.onSelect(null);
-          }
-
-          // Close sidebar after delete
-          if (this.args.onClose) {
-            this.args.onClose();
-          }
-        } catch (e) {
-          console.error('Failed to delete:', e);
-          alert('Failed to delete: ' + e.message);
+        // Notify parent to refresh map bookmarks
+        if (this.args.onBookmarkChange) {
+          this.args.onBookmarkChange();
         }
+
+        if (this.args.onUpdate) {
+          // Reconstruct the "original" place without ID/Geohash/CreatedAt
+          const freshPlace = {
+            ...place,
+            id: undefined,
+            geohash: undefined,
+            createdAt: undefined,
+          };
+          this.args.onUpdate(freshPlace);
+        }
+
+        // Also fire onSelect if it exists (for list view)
+        if (this.args.onSelect) {
+          this.args.onSelect(null);
+        }
+
+        // Close sidebar after delete
+        if (this.args.onClose) {
+          this.args.onClose();
+        }
+      } catch (e) {
+        console.error('Failed to delete:', e);
+        alert('Failed to delete: ' + e.message);
       }
     } else {
       // It's a fresh POI -> Save it
       const placeData = {
-        title:
-          place.osmTags.name || place.osmTags['name:en'] || 'Untitled Place',
+        title: getLocalizedName(place.osmTags, 'Untitled Place'),
         lat: place.lat,
         lon: place.lon,
         tags: [],
@@ -142,6 +144,11 @@ export default class PlacesSidebar extends Component {
     }
   }
 
+  get isNearbySearch() {
+    const qp = this.router.currentRoute.queryParams;
+    return !qp.q && !qp.category && qp.lat && qp.lon;
+  }
+
   <template>
     <div class="sidebar">
       <div class="sidebar-header">
@@ -152,7 +159,12 @@ export default class PlacesSidebar extends Component {
             {{on "click" this.clearSelection}}
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
-        <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</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}}
         <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
             @name="x"
@@ -184,20 +196,29 @@ export default class PlacesSidebar extends Component {
                         place.osmTags.name:en
                         "Unnamed Place"
                       }}</div>
-                    <div class="place-type">{{humanizeOsmTag (or
-                        place.osmTags.amenity
-                        place.osmTags.shop
-                        place.osmTags.tourism
-                        place.osmTags.leisure
-                        place.osmTags.historic
-                        "Point of Interest"
-                      )}}</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>
           {{else}}
-            <p class="empty-state">No places found nearby.</p>
+            {{#if this.isNearbySearch}}
+              <p class="empty-state">No places found nearby.</p>
+            {{else}}
+              <p class="empty-state">No results found.</p>
+            {{/if}}
           {{/if}}
 
           <button
@@ -205,7 +226,7 @@ export default class PlacesSidebar extends Component {
             class="btn btn-outline create-place"
             {{on "click" this.createNewPlace}}
           >
-            <Icon @name="plus" @size={{18}} @color="#007bff" />
+            <Icon @name="plus" @size={{18}} @color="var(--link-color)" />
             Create new place
           </button>
         {{/if}}

app/components/search-box.gjs

@@ -0,0 +1,266 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { task, timeout } from 'ember-concurrency';
+import Icon from '#components/icon';
+import humanizeOsmTag from '../helpers/humanize-osm-tag';
+import { POI_CATEGORIES } from '../utils/poi-categories';
+import eq from 'ember-truth-helpers/helpers/eq';
+
+export default class SearchBoxComponent extends Component {
+  @service photon;
+  @service router;
+  @service mapUi;
+  @service map; // Assuming we might need map context, but mostly we use router
+
+  @tracked _internalQuery = '';
+  @tracked results = [];
+  @tracked isFocused = false;
+  @tracked isLoading = false;
+
+  get query() {
+    return this.args.query ?? this._internalQuery;
+  }
+
+  set query(value) {
+    this._internalQuery = value;
+  }
+
+  get showPopover() {
+    return this.isFocused && this.results.length > 0;
+  }
+
+  @action
+  handleInput(event) {
+    const value = event.target.value;
+    this.query = value;
+    if (this.args.onQueryChange) {
+      this.args.onQueryChange(value);
+    }
+
+    if (value.length < 2) {
+      this.results = [];
+      return;
+    }
+
+    this.searchTask.perform(value);
+  }
+
+  searchTask = task({ restartable: true }, async (term) => {
+    await timeout(300);
+
+    const query = typeof term === 'string' ? term : this.query;
+
+    if (query.length < 2) return;
+
+    this.isLoading = true;
+    try {
+      // Use map center if available for location bias
+      let lat, lon;
+      if (this.mapUi.currentCenter) {
+        ({ lat, lon } = this.mapUi.currentCenter);
+      }
+
+      // Filter categories
+      const q = query.toLowerCase();
+      const categoryMatches = POI_CATEGORIES.filter((c) =>
+        c.label.toLowerCase().includes(q)
+      ).map((c) => ({
+        source: 'category',
+        title: c.label,
+        id: c.id,
+        icon: 'search',
+      }));
+
+      const results = await this.photon.search(query, lat, lon);
+      this.results = [...categoryMatches, ...results];
+    } catch (e) {
+      console.error('Search failed', e);
+      this.results = [];
+    } finally {
+      this.isLoading = false;
+    }
+  });
+
+  @action
+  handleFocus() {
+    this.isFocused = true;
+    this.mapUi.setSearchBoxFocus(true);
+    if (this.query.length >= 2 && this.results.length === 0) {
+      this.searchTask.perform();
+    }
+  }
+
+  @action
+  handleBlur() {
+    // Delay hiding so clicks on results can register
+    setTimeout(() => {
+      this.isFocused = false;
+      this.mapUi.setSearchBoxFocus(false);
+    }, 300);
+  }
+
+  @action
+  handleSubmit(event) {
+    event.preventDefault();
+    if (!this.query) return;
+
+    let queryParams = { q: this.query, selected: null, category: null };
+
+    if (this.mapUi.currentCenter) {
+      const { lat, lon } = this.mapUi.currentCenter;
+      queryParams.lat = parseFloat(lat).toFixed(4);
+      queryParams.lon = parseFloat(lon).toFixed(4);
+    }
+
+    this.router.transitionTo('search', { queryParams });
+    this.isFocused = false;
+  }
+
+  @action
+  selectResult(place) {
+    if (place.source === 'category') {
+      this.query = place.title;
+      if (this.args.onQueryChange) {
+        this.args.onQueryChange(place.title);
+      }
+      this.results = [];
+
+      let lat = null,
+        lon = null;
+      if (this.mapUi.currentCenter) {
+        ({ lat, lon } = this.mapUi.currentCenter);
+        lat = lat?.toString();
+        lon = lon?.toString();
+      }
+
+      this.router.transitionTo('search', {
+        queryParams: {
+          q: place.title,
+          category: place.id,
+          selected: null,
+          lat: lat,
+          lon: lon,
+        },
+      });
+      return;
+    }
+
+    this.query = place.title;
+    if (this.args.onQueryChange) {
+      this.args.onQueryChange(place.title);
+    }
+    this.results = []; // Hide popover
+
+    // If it has an OSM ID, go to place details
+    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}`;
+      this.router.transitionTo('place', id);
+    } else {
+      // Just a location (e.g. from Photon without OSM ID, though unlikely for Photon)
+      // Or we can treat it as a search query
+      this.router.transitionTo('search', {
+        queryParams: {
+          q: place.title,
+          lat: place.lat,
+          lon: place.lon,
+          selected: null,
+          category: null,
+        },
+      });
+    }
+  }
+
+  @action
+  clear() {
+    this.query = '';
+    this.results = [];
+    if (this.args.onQueryChange) {
+      this.args.onQueryChange('');
+    }
+    this.router.transitionTo('index');
+  }
+
+  <template>
+    <div class="search-box">
+      <form class="search-form" {{on "submit" this.handleSubmit}}>
+        <button
+          type="button"
+          class="menu-btn-integrated"
+          aria-label="Menu"
+          {{on "click" @onToggleMenu}}
+        >
+          <Icon @name="menu" @size={{20}} @color="#5f6368" />
+        </button>
+
+        <input
+          type="search"
+          class="search-input"
+          placeholder="Search places..."
+          aria-label="Search places"
+          value={{this.query}}
+          {{on "input" this.handleInput}}
+          {{on "focus" this.handleFocus}}
+          {{on "blur" this.handleBlur}}
+          autocomplete="off"
+        />
+
+        <button type="submit" class="search-submit-btn" aria-label="Search">
+          <Icon @name="search" @size={{20}} @color="#5f6368" />
+        </button>
+
+        {{#if this.query}}
+          <button
+            type="button"
+            class="search-clear-btn"
+            {{on "click" this.clear}}
+            aria-label="Clear"
+          >
+            <Icon @name="x" @size={{20}} @color="#5f6368" />
+          </button>
+        {{/if}}
+      </form>
+
+      {{#if this.showPopover}}
+        <div class="search-results-popover">
+          <ul class="search-results-list">
+            {{#each this.results as |result|}}
+              <li>
+                <button
+                  type="button"
+                  class="search-result-item"
+                  {{on "click" (fn this.selectResult result)}}
+                >
+                  <div class="result-icon">
+                    <Icon
+                      @name={{if result.icon result.icon "map-pin"}}
+                      @size={{16}}
+                      @color="#666"
+                    />
+                  </div>
+                  <div class="result-info">
+                    <span class="result-title">{{result.title}}</span>
+                    {{#if (eq result.source "osm")}}
+                      <span class="result-desc">{{humanizeOsmTag
+                          result.type
+                        }}</span>
+                    {{else}}
+                      {{#if result.description}}
+                        <span class="result-desc">{{result.description}}</span>
+                      {{/if}}
+                    {{/if}}
+                  </div>
+                </button>
+              </li>
+            {{/each}}
+          </ul>
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}

app/components/settings-pane.gjs

@@ -1,75 +0,0 @@
-import Component from '@glimmer/component';
-import { on } from '@ember/modifier';
-import { service } from '@ember/service';
-import { action } from '@ember/object';
-import Icon from '#components/icon';
-import eq from 'ember-truth-helpers/helpers/eq';
-
-export default class SettingsPane extends Component {
-  @service settings;
-
-  @action
-  updateApi(event) {
-    this.settings.updateOverpassApi(event.target.value);
-  }
-
-  <template>
-    <div class="sidebar settings-pane">
-      <div class="sidebar-header">
-        <h2>Marco</h2>
-        <button type="button" class="close-btn" {{on "click" @onClose}}>
-          <Icon @name="x" @size={{20}} @color="#333" />
-        </button>
-      </div>
-
-      <div class="sidebar-content">
-        <section class="settings-section">
-          <h3>Settings</h3>
-          <div class="form-group">
-            <label for="overpass-api">Overpass API Provider</label>
-            <select
-              id="overpass-api"
-              class="form-control"
-              {{on "change" this.updateApi}}
-            >
-              {{#each this.settings.overpassApis as |api|}}
-                <option
-                  value={{api.url}}
-                  selected={{if (eq api.url this.settings.overpassApi) "selected"}}
-                >
-                  {{api.name}}
-                </option>
-              {{/each}}
-            </select>
-          </div>
-        </section>
-        <section class="settings-section">
-          <h3>About</h3>
-          <p>
-            <strong>Marco</strong> (as in <a
-            href="https://en.wikipedia.org/wiki/Marco_Polo"
-            target="_blank" rel="noopener">Marco Polo</a>) is an unhosted maps application
-            that respects your privacy and choices.
-          </p>
-          <p>
-            Connect your own <a href="https://remotestorage.io/"
-              target="_blank" rel="noopener">remote storage</a> to sync place bookmarks across
-            apps and devices.
-          </p>
-          <ul class="link-list">
-            <li>
-              <a href="https://gitea.kosmos.org/raucao/marco" target="_blank" rel="noopener">
-                Source Code
-              </a> (<a href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License" target="_blank" rel="noopener">AGPL</a>)
-            </li>
-            <li>
-              <a href="https://openstreetmap.org/copyright" target="_blank" rel="noopener">
-                Map Data © OpenStreetMap
-              </a>
-            </li>
-          </ul>
-        </section>
-      </div>
-    </div>
-  </template>
-}

app/controllers/search.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+
+export default class SearchController extends Controller {
+  queryParams = ['lat', 'lon', 'q', 'selected', 'category'];
+
+  lat = null;
+  lon = null;
+  q = null;
+  selected = null;
+  category = null;
+}

app/icons/icon-rounded.svg

@@ -0,0 +1,45 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Background -->
+  <rect
+    x="0"
+    y="0"
+    width="1024"
+    height="1024"
+    rx="220"
+    fill="#F6E9A6"
+  />
+
+  <!-- Subtle map grid (kept well outside safe zone) -->
+  <g stroke="#E6D88A" stroke-width="10" opacity="0.6">
+    <line x1="256" y1="0" x2="256" y2="1024" />
+    <line x1="512" y1="0" x2="512" y2="1024" />
+    <line x1="768" y1="0" x2="768" y2="1024" />
+
+    <line x1="0" y1="256" x2="1024" y2="256" />
+    <line x1="0" y1="512" x2="1024" y2="512" />
+    <line x1="0" y1="768" x2="1024" y2="768" />
+  </g>
+
+  <!-- Location pin (exact app shape, larger, centered, safe-zone compliant) -->
+  <!-- Safe zone target: ~680px diameter -->
+  <g
+    transform="
+      translate(512 512)
+      scale(22)
+      translate(-12 -12)
+    "
+    fill="#ea4335"
+    stroke="#b31412"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" fill="#b31412" stroke="none" />
+  </g>
+</svg>

app/icons/wikipedia.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="7.15 7.15 113.7 113.7" fill="currentColor">
+<path d="M 120.85,29.21 C 120.85,29.62 120.72,29.99 120.47,30.33 C 120.21,30.66 119.94,30.83 119.63,30.83 C 117.14,31.07 115.09,31.87 113.51,33.24 C 111.92,34.6 110.29,37.21 108.6,41.05 L 82.8,99.19 C 82.63,99.73 82.16,100 81.38,100 C 80.77,100 80.3,99.73 79.96,99.19 L 65.49,68.93 L 48.85,99.19 C 48.51,99.73 48.04,100 47.43,100 C 46.69,100 46.2,99.73 45.96,99.19 L 20.61,41.05 C 19.03,37.44 17.36,34.92 15.6,33.49 C 13.85,32.06 11.4,31.17 8.27,30.83 C 8,30.83 7.74,30.69 7.51,30.4 C 7.27,30.12 7.15,29.79 7.15,29.42 C 7.15,28.47 7.42,28 7.96,28 C 10.22,28 12.58,28.1 15.05,28.3 C 17.34,28.51 19.5,28.61 21.52,28.61 C 23.58,28.61 26.01,28.51 28.81,28.3 C 31.74,28.1 34.34,28 36.6,28 C 37.14,28 37.41,28.47 37.41,29.42 C 37.41,30.36 37.24,30.83 36.91,30.83 C 34.65,31 32.87,31.58 31.57,32.55 C 30.27,33.53 29.62,34.81 29.62,36.4 C 29.62,37.21 29.89,38.22 30.43,39.43 L 51.38,86.74 L 63.27,64.28 L 52.19,41.05 C 50.2,36.91 48.56,34.23 47.28,33.03 C 46,31.84 44.06,31.1 41.46,30.83 C 41.22,30.83 41,30.69 40.78,30.4 C 40.56,30.12 40.45,29.79 40.45,29.42 C 40.45,28.47 40.68,28 41.16,28 C 43.42,28 45.49,28.1 47.38,28.3 C 49.2,28.51 51.14,28.61 53.2,28.61 C 55.22,28.61 57.36,28.51 59.62,28.3 C 61.95,28.1 64.24,28 66.5,28 C 67.04,28 67.31,28.47 67.31,29.42 C 67.31,30.36 67.15,30.83 66.81,30.83 C 62.29,31.14 60.03,32.42 60.03,34.68 C 60.03,35.69 60.55,37.26 61.6,39.38 L 68.93,54.26 L 76.22,40.65 C 77.23,38.73 77.74,37.11 77.74,35.79 C 77.74,32.69 75.48,31.04 70.96,30.83 C 70.55,30.83 70.35,30.36 70.35,29.42 C 70.35,29.08 70.45,28.76 70.65,28.46 C 70.86,28.15 71.06,28 71.26,28 C 72.88,28 74.87,28.1 77.23,28.3 C 79.49,28.51 81.35,28.61 82.8,28.61 C 83.84,28.61 85.38,28.52 87.4,28.35 C 89.96,28.12 92.11,28 93.83,28 C 94.23,28 94.43,28.4 94.43,29.21 C 94.43,30.29 94.06,30.83 93.32,30.83 C 90.69,31.1 88.57,31.83 86.97,33.01 C 85.37,34.19 83.37,36.87 80.98,41.05 L 71.26,59.02 L 84.42,85.83 L 103.85,40.65 C 104.52,39 104.86,37.48 104.86,36.1 C 104.86,32.79 102.6,31.04 98.08,30.83 C 97.67,30.83 97.47,30.36 97.47,29.42 C 97.47,28.47 97.77,28 98.38,28 C 100.03,28 101.99,28.1 104.25,28.3 C 106.34,28.51 108.1,28.61 109.51,28.61 C 111,28.61 112.72,28.51 114.67,28.3 C 116.7,28.1 118.52,28 120.14,28 C 120.61,28 120.85,28.4 120.85,29.21 z" />
+</svg>

app/modifiers/on-click-outside.js

@@ -0,0 +1,21 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback]) => {
+  const handler = (event) => {
+    // Check if the click target is contained within the element
+    if (element && !element.contains(event.target)) {
+      callback(event);
+    }
+  };
+
+  // Delay attaching the listener to avoid catching the opening click
+  // (using a microtask or setTimeout 0)
+  const timer = setTimeout(() => {
+    document.addEventListener('click', handler);
+  }, 0);
+
+  return () => {
+    clearTimeout(timer);
+    document.removeEventListener('click', handler);
+  };
+});

app/routes/place.js

@@ -9,7 +9,11 @@ export default class PlaceRoute extends Route {
   async model(params) {
     const id = params.place_id;
 
-    if (id.startsWith('osm:node:') || id.startsWith('osm:way:')) {
+    if (
+      id.startsWith('osm:node:') ||
+      id.startsWith('osm:way:') ||
+      id.startsWith('osm:relation:')
+    ) {
       const [, type, osmId] = id.split(':');
       console.debug(`Fetching explicit OSM ${type}:`, osmId);
       return this.loadOsmPlace(osmId, type);
@@ -44,10 +48,33 @@ export default class PlaceRoute extends Route {
     }
   }
 
-  afterModel(model) {
+  async afterModel(model) {
+    // If the model comes from a search result (e.g. Photon), it might lack detailed geometry.
+    // We want to ensure we have the full OSM object (with polygon/linestring) for display.
+    if (
+      model &&
+      model.osmId &&
+      model.osmType &&
+      model.osmType !== 'node' &&
+      !model.geojson
+    ) {
+      // Only fetch if it's NOT a node (nodes don't have interesting geometry anyway, just a point)
+      // Although fetching nodes again ensures we have the latest tags too.
+      console.debug('Model missing geometry, fetching full OSM details...');
+      const fullDetails = await this.loadOsmPlace(model.osmId, model.osmType);
+
+      if (fullDetails) {
+        // Update the model in-place with the fuller details
+        Object.assign(model, fullDetails);
+        console.debug('Enriched model with full OSM details', model);
+      }
+    }
+
     // Notify the Map UI to show the pin
     if (model) {
-      this.mapUi.selectPlace(model);
+      const options = { preventZoom: this.mapUi.preventNextZoom };
+      this.mapUi.selectPlace(model, options);
+      this.mapUi.preventNextZoom = false;
     }
     // Stop the pulse animation if it was running (e.g. redirected from search)
     this.mapUi.stopSearch();
@@ -56,11 +83,14 @@ export default class PlaceRoute extends Route {
   deactivate() {
     // Clear the pin when leaving the route
     this.mapUi.clearSelection();
+    // Reset the "return to search" flag so it doesn't persist to subsequent navigations
+    this.mapUi.returnToSearch = false;
   }
 
   async loadOsmPlace(id, type = null) {
     try {
-      const poi = await this.osm.getPoiById(id, type);
+      // Use the direct OSM API fetch instead of Overpass for single object lookups
+      const poi = await this.osm.fetchOsmObject(id, type);
       if (poi) {
         console.debug('Found OSM POI:', poi);
         return poi;
@@ -71,6 +101,23 @@ export default class PlaceRoute extends Route {
     return null;
   }
 
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    this.checkUpdates(model);
+  }
+
+  async checkUpdates(place) {
+    // Only check for updates if it's a saved place (has ID) and is an OSM object
+    if (place && place.id && place.osmId && place.osmType) {
+      const updatedPlace = await this.storage.refreshPlace(place);
+      if (updatedPlace) {
+        // If an update occurred, refresh the map UI selection without moving the camera
+        // This ensures the sidebar shows the new data
+        this.mapUi.selectPlace(updatedPlace, { preventZoom: true });
+      }
+    }
+  }
+
   serialize(model) {
     // If the model is a saved bookmark, use its ID
     if (model.id) {

app/routes/search.js

@@ -5,6 +5,7 @@ import { getDistance } from '../utils/geo';
 
 export default class SearchRoute extends Route {
   @service osm;
+  @service photon;
   @service mapUi;
   @service storage;
   @service router;
@@ -13,50 +14,106 @@ export default class SearchRoute extends Route {
     lat: { refreshModel: true },
     lon: { refreshModel: true },
     q: { refreshModel: true },
+    selected: { refreshModel: true },
+    category: { refreshModel: true },
   };
 
   async model(params) {
-    // If no coordinates, we can't search
-    if (!params.lat || !params.lon) {
-      return [];
-    }
+    const lat = params.lat ? parseFloat(params.lat) : null;
+    const lon = params.lon ? parseFloat(params.lon) : null;
+    let pois = [];
 
-    const lat = parseFloat(params.lat);
-    const lon = parseFloat(params.lon);
-    const searchRadius = params.q ? 30 : 50;
+    // Case 0: Category Search (category parameter present)
+    if (params.category && lat && lon) {
+      // We need bounds. If we have active map state, use it.
+      let bounds = this.mapUi.currentBounds;
 
-    // Fetch POIs
-    let pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
-
-    // Get cached/saved places in search radius
-    const localMatches = this.storage.savedPlaces.filter((p) => {
-      const dist = getDistance(lat, lon, p.lat, p.lon);
-      return dist <= searchRadius;
-    });
-
-    // Add local matches to the list if they aren't already there
-    // We use osmId to deduplicate if possible
-    localMatches.forEach((local) => {
-      const exists = pois.find(
-        (poi) =>
-          (local.osmId && poi.osmId === local.osmId) ||
-          (poi.id && poi.id === local.id)
-      );
-
-      if (!exists) {
-        pois.push(local);
+      // If we don't have bounds (direct URL visit), estimate them from lat/lon/zoom(16)
+      // or just use a fixed box around the center.
+      if (!bounds) {
+        // Approximate 0.01 degrees ~ 1km at equator. A viewport is roughly 0.02x0.01 at zoom 16?
+        // Let's take a safe box of ~1km radius.
+        const delta = 0.01;
+        bounds = {
+          minLat: lat - delta,
+          maxLat: lat + delta,
+          minLon: lon - delta,
+          maxLon: lon + delta,
+        };
       }
-    });
 
-    // Sort by distance from click
-    pois = pois
-      .map((p) => {
-        return {
+      pois = await this.osm.getCategoryPois(bounds, params.category);
+
+      // Sort by distance from center
+      pois = pois
+        .map((p) => ({
           ...p,
           _distance: getDistance(lat, lon, p.lat, p.lon),
-        };
-      })
-      .sort((a, b) => a._distance - b._distance);
+        }))
+        .sort((a, b) => a._distance - b._distance);
+    }
+    // Case 1: Text Search (q parameter present)
+    else if (params.q) {
+      // Search with Photon (using lat/lon for bias if available)
+      pois = await this.photon.search(params.q, lat, lon);
+
+      // Search local bookmarks by name
+      const queryLower = params.q.toLowerCase();
+      const localMatches = this.storage.savedPlaces.filter((p) => {
+        return (
+          p.title?.toLowerCase().includes(queryLower) ||
+          p.description?.toLowerCase().includes(queryLower)
+        );
+      });
+
+      // Merge local matches
+      localMatches.forEach((local) => {
+        const exists = pois.find(
+          (poi) =>
+            (local.osmId && poi.osmId === local.osmId) ||
+            (poi.id && poi.id === local.id)
+        );
+        if (!exists) {
+          pois.push(local);
+        }
+      });
+    }
+    // Case 2: Nearby Search (lat/lon present, no q)
+    else if (lat && lon) {
+      const searchRadius = 50; // Default radius
+
+      // Fetch POIs from Overpass
+      pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
+
+      // Get cached/saved places in search radius
+      const localMatches = this.storage.savedPlaces.filter((p) => {
+        const dist = getDistance(lat, lon, p.lat, p.lon);
+        return dist <= searchRadius;
+      });
+
+      // Merge local matches
+      localMatches.forEach((local) => {
+        const exists = pois.find(
+          (poi) =>
+            (local.osmId && poi.osmId === local.osmId) ||
+            (poi.id && poi.id === local.id)
+        );
+
+        if (!exists) {
+          pois.push(local);
+        }
+      });
+
+      // Sort by distance from click
+      pois = pois
+        .map((p) => {
+          return {
+            ...p,
+            _distance: getDistance(lat, lon, p.lat, p.lon),
+          };
+        })
+        .sort((a, b) => a._distance - b._distance);
+    }
 
     // Check if any of these are already bookmarked
     // We resolve them to the bookmark version if they exist
@@ -69,18 +126,24 @@ export default class SearchRoute extends Route {
   }
 
   afterModel(model, transition) {
-    const { q } = transition.to.queryParams;
+    const { q, selected } = transition.to.queryParams;
 
     // Heuristic Match Logic (ported from MapComponent)
-    if (q && model.length > 0) {
+    // If 'selected' is provided (from map click), try to find that specific feature.
+    // If 'q' is provided (from text search), try to find an exact match to auto-select.
+    const targetName = selected || q;
+
+    if (targetName && model.length > 0) {
       let matchedPlace = null;
 
       // 1. Exact Name Match
       matchedPlace = model.find(
-        (p) => p.osmTags && (p.osmTags.name === q || p.osmTags['name:en'] === q)
+        (p) =>
+          p.osmTags &&
+          (p.osmTags.name === targetName || p.osmTags['name:en'] === targetName)
       );
 
-      // 2. High Proximity Match (<= 10m)
+      // 2. High Proximity Match (<= 10m) - Only if we don't have a name match
       // Note: MapComponent had logic for <=20m + type match.
       // We might want to pass the 'type' in queryParams if we want to be that precise.
       // For now, let's stick to name or very close proximity.

app/services/map-ui.js

@@ -6,18 +6,28 @@ export default class MapUiService extends Service {
   @tracked isSearching = false;
   @tracked isCreating = false;
   @tracked creationCoordinates = null;
+  @tracked returnToSearch = false;
+  @tracked currentCenter = null;
+  @tracked currentBounds = null;
+  @tracked searchBoxHasFocus = false;
+  @tracked selectionOptions = {};
+  @tracked preventNextZoom = false;
 
-  selectPlace(place) {
+  selectPlace(place, options = {}) {
     this.selectedPlace = place;
+    this.selectionOptions = options;
   }
 
   clearSelection() {
     this.selectedPlace = null;
+    this.selectionOptions = {};
+    this.preventNextZoom = false;
   }
 
   startSearch() {
     this.isSearching = true;
     this.isCreating = false;
+    this.preventNextZoom = false;
   }
 
   stopSearch() {
@@ -37,4 +47,16 @@ export default class MapUiService extends Service {
   updateCreationCoordinates(lat, lon) {
     this.creationCoordinates = { lat, lon };
   }
+
+  setSearchBoxFocus(isFocused) {
+    this.searchBoxHasFocus = isFocused;
+  }
+
+  updateCenter(lat, lon) {
+    this.currentCenter = { lat, lon };
+  }
+
+  updateBounds(bounds) {
+    this.currentBounds = bounds;
+  }
 }

app/services/osm.js

@@ -1,4 +1,6 @@
 import Service, { service } from '@ember/service';
+import { getLocalizedName, getPlaceType } from '../utils/osm';
+import { getCategoryById } from '../utils/poi-categories';
 
 export default class OsmService extends Service {
   @service settings;
@@ -23,14 +25,30 @@ export default class OsmService extends Service {
     this.controller = new AbortController();
     const signal = this.controller.signal;
 
+    const typeKeys = [
+      'amenity',
+      'shop',
+      'tourism',
+      'historic',
+      'leisure',
+      'office',
+      'craft',
+      'building',
+      'landuse',
+      'public_transport',
+      'aeroway',
+    ];
+    const typeKeysQuery = [`~"^(${typeKeys.join('|')})$"~".*"`];
+
     const query = `
 [out:json][timeout:25];
 (
-  nw["amenity"](around:${radius},${lat},${lon});
-  nw["shop"](around:${radius},${lat},${lon});
-  nw["tourism"](around:${radius},${lat},${lon});
-  nw["leisure"](around:${radius},${lat},${lon});
-  nw["historic"](around:${radius},${lat},${lon});
+  node(around:${radius},${lat},${lon})
+    [${typeKeysQuery}][~"^name"~"."];
+  way(around:${radius},${lat},${lon})
+    [${typeKeysQuery}][~"^name"~"."];
+  relation(around:${radius},${lat},${lon})
+    [${typeKeysQuery}][~"^name"~"."];
 );
 out center;
     `.trim();
@@ -59,16 +77,63 @@ out center;
     }
   }
 
+  async getCategoryPois(bounds, categoryId) {
+    const category = getCategoryById(categoryId);
+    if (!category || !bounds) return [];
+
+    const { minLat, minLon, maxLat, maxLon } = bounds;
+
+    // Build the query parts for each filter string and type
+    const queryParts = [];
+
+    // Default types if not specified (legacy fallback)
+    const types = category.types || ['node', 'way', 'relation'];
+
+    category.filter.forEach((filterString) => {
+      types.forEach((type) => {
+        // We ensure we only fetch named POIs to reduce noise
+        queryParts.push(`${type}${filterString}[~"^name"~"."];`);
+      });
+    });
+
+    const query = `
+[out:json][timeout:25][bbox:${minLat},${minLon},${maxLat},${maxLon}];
+(
+  ${queryParts.join('\n  ')}
+);
+out center;
+    `.trim();
+
+    // No caching for now as bounds change frequently
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;
+
+    try {
+      const res = await this.fetchWithRetry(url);
+      if (!res.ok) throw new Error('Overpass request failed');
+      const data = await res.json();
+      const results = data.elements.map(this.normalizePoi);
+      return results;
+    } catch (e) {
+      console.error('Category search failed', e);
+      return [];
+    }
+  }
+
   normalizePoi(poi) {
+    const tags = poi.tags || {};
+    const type = getPlaceType(tags) || 'Point of Interest';
+
     return {
-      title: poi.tags?.name || poi.tags?.['name:en'] || 'Untitled Place',
+      title: getLocalizedName(tags),
       lat: poi.lat || poi.center?.lat,
       lon: poi.lon || poi.center?.lon,
-      url: poi.tags?.website,
+      url: tags.website,
       osmId: String(poi.id),
       osmType: poi.type,
-      osmTags: poi.tags || {},
-      description: poi.tags?.description,
+      osmTags: tags,
+      description: tags.description,
+      source: 'osm',
+      type: type,
     };
   }
 
@@ -123,4 +188,211 @@ out center;
     if (!data.elements[0]) return null;
     return this.normalizePoi(data.elements[0]);
   }
+
+  async fetchOsmObject(osmId, osmType) {
+    if (!osmId || !osmType) return null;
+
+    let url;
+    if (osmType === 'node') {
+      url = `https://www.openstreetmap.org/api/0.6/node/${osmId}.json`;
+    } else if (osmType === 'way') {
+      url = `https://www.openstreetmap.org/api/0.6/way/${osmId}/full.json`;
+    } else if (osmType === 'relation') {
+      url = `https://www.openstreetmap.org/api/0.6/relation/${osmId}/full.json`;
+    } else {
+      console.error('Unknown OSM type:', osmType);
+      return null;
+    }
+
+    try {
+      const res = await this.fetchWithRetry(url);
+      if (!res.ok) {
+        if (res.status === 410) {
+          console.warn('OSM object has been deleted');
+          return null;
+        }
+        throw new Error(`OSM API request failed: ${res.status}`);
+      }
+      const data = await res.json();
+      return this.normalizeOsmApiData(data.elements, osmId, osmType);
+    } catch (e) {
+      console.error('Failed to fetch OSM object:', e);
+      return null;
+    }
+  }
+
+  normalizeOsmApiData(elements, targetId, targetType) {
+    if (!elements || elements.length === 0) return null;
+
+    let mainElement = elements.find(
+      (el) => String(el.id) === String(targetId) && el.type === targetType
+    );
+
+    if (!mainElement) return null;
+
+    // Use a separate variable for the element we want to display (tags, id, specific coords)
+    // vs the element we use for geometry calculation (bbox).
+    let displayElement = mainElement;
+
+    // If it's a boundary relation, try to find the label or admin_centre node
+    // and use that as the display element (better coordinates and tags).
+    if (targetType === 'relation' && mainElement.members) {
+      const labelMember = mainElement.members.find(
+        (m) => m.role === 'label' && m.type === 'node'
+      );
+      const adminCentreMember = mainElement.members.find(
+        (m) => m.role === 'admin_centre' && m.type === 'node'
+      );
+
+      const targetMember = labelMember || adminCentreMember;
+
+      if (targetMember) {
+        const targetNode = elements.find(
+          (el) =>
+            String(el.id) === String(targetMember.ref) && el.type === 'node'
+        );
+        if (targetNode) {
+          displayElement = targetNode;
+        }
+      }
+    }
+
+    let lat = displayElement.lat;
+    let lon = displayElement.lon;
+    let bbox = null;
+    let geojson = null;
+
+    // If it's a way, calculate center from nodes
+    if (targetType === 'way' && mainElement.nodes) {
+      const nodeMap = new Map();
+      elements.forEach((el) => {
+        if (el.type === 'node') {
+          nodeMap.set(el.id, [el.lon, el.lat]);
+        }
+      });
+
+      const coords = mainElement.nodes
+        .map((id) => nodeMap.get(id))
+        .filter(Boolean);
+
+      if (coords.length > 0) {
+        // Only override lat/lon if we haven't switched to a specific display node
+        if (displayElement === mainElement) {
+          const sumLat = coords.reduce((sum, c) => sum + c[1], 0);
+          const sumLon = coords.reduce((sum, c) => sum + c[0], 0);
+          lat = sumLat / coords.length;
+          lon = sumLon / coords.length;
+        }
+
+        // Calculate BBox
+        const lats = coords.map((c) => c[1]);
+        const lons = coords.map((c) => c[0]);
+        bbox = {
+          minLat: Math.min(...lats),
+          maxLat: Math.max(...lats),
+          minLon: Math.min(...lons),
+          maxLon: Math.max(...lons),
+        };
+
+        // Construct GeoJSON
+        if (coords.length > 1) {
+          const first = coords[0];
+          const last = coords[coords.length - 1];
+          const isClosed = first[0] === last[0] && first[1] === last[1];
+
+          if (isClosed) {
+            geojson = {
+              type: 'Polygon',
+              coordinates: [coords],
+            };
+          } else {
+            geojson = {
+              type: 'LineString',
+              coordinates: coords,
+            };
+          }
+        }
+      }
+    } else if (targetType === 'relation' && mainElement.members) {
+      // Find all nodes that are part of this relation (directly or via ways)
+      const allNodes = [];
+      const nodeMap = new Map();
+      elements.forEach((el) => {
+        if (el.type === 'node') {
+          nodeMap.set(el.id, el);
+        }
+      });
+
+      const segments = [];
+
+      mainElement.members.forEach((member) => {
+        if (member.type === 'node') {
+          const node = nodeMap.get(member.ref);
+          if (node) allNodes.push(node);
+        } else if (member.type === 'way') {
+          const way = elements.find(
+            (el) => el.type === 'way' && el.id === member.ref
+          );
+          if (way && way.nodes) {
+            const wayCoords = [];
+            way.nodes.forEach((nodeId) => {
+              const node = nodeMap.get(nodeId);
+              if (node) {
+                allNodes.push(node);
+                wayCoords.push([node.lon, node.lat]);
+              }
+            });
+            if (wayCoords.length > 1) {
+              segments.push(wayCoords);
+            }
+          }
+        }
+      });
+
+      if (allNodes.length > 0) {
+        // Only override lat/lon if we haven't switched to a specific display node
+        if (displayElement === mainElement) {
+          const sumLat = allNodes.reduce((sum, n) => sum + n.lat, 0);
+          const sumLon = allNodes.reduce((sum, n) => sum + n.lon, 0);
+          lat = sumLat / allNodes.length;
+          lon = sumLon / allNodes.length;
+        }
+
+        // Calculate BBox
+        const lats = allNodes.map((n) => n.lat);
+        const lons = allNodes.map((n) => n.lon);
+        bbox = {
+          minLat: Math.min(...lats),
+          maxLat: Math.max(...lats),
+          minLon: Math.min(...lons),
+          maxLon: Math.max(...lons),
+        };
+      }
+
+      if (segments.length > 0) {
+        geojson = {
+          type: 'MultiLineString',
+          coordinates: segments,
+        };
+      }
+    }
+
+    const tags = displayElement.tags || {};
+    const type = getPlaceType(tags) || 'Point of Interest';
+
+    return {
+      title: getLocalizedName(tags),
+      lat,
+      lon,
+      bbox,
+      geojson,
+      url: tags.website,
+      osmId: String(displayElement.id),
+      osmType: displayElement.type,
+      osmTags: tags,
+      description: tags.description,
+      source: 'osm',
+      type: type,
+    };
+  }
 }

app/services/photon.js

@@ -0,0 +1,123 @@
+import Service, { service } from '@ember/service';
+import { getPlaceType } from '../utils/osm';
+import { humanizeOsmTag } from '../utils/format-text';
+
+export default class PhotonService extends Service {
+  @service settings;
+
+  get baseUrl() {
+    return this.settings.photonApi;
+  }
+
+  async search(query, lat, lon, limit = 10) {
+    if (!query || query.length < 2) return [];
+
+    const params = new URLSearchParams({
+      q: query,
+      limit: String(limit),
+    });
+
+    if (lat && lon) {
+      params.append('lat', parseFloat(lat).toFixed(4));
+      params.append('lon', parseFloat(lon).toFixed(4));
+    }
+
+    const url = `${this.baseUrl}?${params.toString()}`;
+
+    try {
+      const res = await this.fetchWithRetry(url);
+      if (!res.ok) {
+        throw new Error(`Photon request failed with status ${res.status}`);
+      }
+      const data = await res.json();
+
+      if (!data.features) return [];
+
+      return data.features.map((f) => this.normalizeFeature(f));
+    } catch (e) {
+      console.error('Photon search error:', e);
+      // Return empty array on error so UI doesn't break
+      return [];
+    }
+  }
+
+  normalizeFeature(feature) {
+    const props = feature.properties || {};
+    const geom = feature.geometry || {};
+    const coords = geom.coordinates || [];
+
+    // Photon returns [lon, lat] for Point geometries
+    const lon = coords[0];
+    const lat = coords[1];
+
+    // Construct a description from address fields
+    // Priority: name -> street -> city -> state -> country
+    const addressParts = [];
+    if (props.street)
+      addressParts.push(
+        props.housenumber
+          ? `${props.street} ${props.housenumber}`
+          : props.street
+      );
+    if (props.city && props.city !== props.name) addressParts.push(props.city);
+    if (props.state && props.state !== props.city)
+      addressParts.push(props.state);
+    if (props.country) addressParts.push(props.country);
+
+    const description = addressParts.join(', ');
+    const title = props.name || description || 'Unknown Place';
+
+    const osmTypeMap = {
+      N: 'node',
+      W: 'way',
+      R: 'relation',
+    };
+
+    const osmTags = { ...props };
+    // Photon often returns osm_key and osm_value for the main tag
+    if (props.osm_key && props.osm_value) {
+      osmTags[props.osm_key] = props.osm_value;
+    }
+
+    const type = getPlaceType(osmTags) || humanizeOsmTag(props.osm_value);
+
+    return {
+      title,
+      lat,
+      lon,
+      osmId: props.osm_id,
+      osmType: osmTypeMap[props.osm_type] || props.osm_type, // 'node', 'way', 'relation'
+      osmTags,
+      description: props.name ? description : addressParts.slice(1).join(', '),
+      source: 'photon',
+      type: type,
+    };
+  }
+
+  async fetchWithRetry(url, options = {}, retries = 3) {
+    try {
+      // eslint-disable-next-line warp-drive/no-external-request-patterns
+      const res = await fetch(url, options);
+
+      // Retry on 5xx errors or 429 Too Many Requests
+      if (!res.ok && retries > 0 && [502, 503, 504, 429].includes(res.status)) {
+        console.warn(
+          `Photon request failed with ${res.status}. Retrying... (${retries} left)`
+        );
+        // Exponential backoff or fixed delay? Let's do 1s fixed delay for simplicity
+        await new Promise((r) => setTimeout(r, 1000));
+        return this.fetchWithRetry(url, options, retries - 1);
+      }
+
+      return res;
+    } catch (e) {
+      // Retry on network errors (fetch throws) except AbortError
+      if (retries > 0 && e.name !== 'AbortError') {
+        console.debug(`Retrying Photon request... (${retries} left)`, e);
+        await new Promise((r) => setTimeout(r, 1000));
+        return this.fetchWithRetry(url, options, retries - 1);
+      }
+      throw e;
+    }
+  }
+}

app/services/settings.js

@@ -2,15 +2,34 @@ import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
 export default class SettingsService extends Service {
-  @tracked overpassApi = 'https://overpass.bke.ro/api/interpreter';
+  @tracked overpassApi = 'https://overpass-api.de/api/interpreter';
+  @tracked mapKinetic = true;
+  @tracked photonApi = 'https://photon.komoot.io/api/';
 
   overpassApis = [
-    { name: 'bke.ro', url: 'https://overpass.bke.ro/api/interpreter' },
-    { name: 'overpass-api.de', url: 'https://overpass-api.de/api/interpreter' },
     {
-      name: 'private.coffee',
+      name: 'overpass-api.de (DE)',
+      url: 'https://overpass-api.de/api/interpreter',
+    },
+    {
+      name: 'private.coffee (AT)',
       url: 'https://overpass.private.coffee/api/interpreter',
     },
+    // {
+    //   name: 'overpass.openstreetmap.us (US)',
+    //   url: 'https://overpass.openstreetmap.us/api/interpreter'
+    // },
+    // {
+    //   name: 'bke.ro (US)',
+    //   url: 'https://overpass.bke.ro/api/interpreter'
+    // },
+  ];
+
+  photonApis = [
+    {
+      name: 'photon.komoot.io',
+      url: 'https://photon.komoot.io/api/',
+    },
   ];
 
   constructor() {
@@ -19,14 +38,37 @@ export default class SettingsService extends Service {
   }
 
   loadSettings() {
-    const savedApi = localStorage.getItem('marco-overpass-api');
+    const savedApi = localStorage.getItem('marco:overpass-api');
     if (savedApi) {
-      this.overpassApi = savedApi;
+      // Check if saved API is still in the allowed list
+      const isValid = this.overpassApis.some((api) => api.url === savedApi);
+      if (isValid) {
+        this.overpassApi = savedApi;
+      } else {
+        // If not valid, revert to default
+        this.overpassApi = 'https://overpass-api.de/api/interpreter';
+        localStorage.setItem('marco:overpass-api', this.overpassApi);
+      }
     }
+
+    const savedKinetic = localStorage.getItem('marco:map-kinetic');
+    if (savedKinetic !== null) {
+      this.mapKinetic = savedKinetic === 'true';
+    }
+    // Default is true (initialized in class field)
   }
 
   updateOverpassApi(url) {
     this.overpassApi = url;
-    localStorage.setItem('marco-overpass-api', url);
+    localStorage.setItem('marco:overpass-api', url);
+  }
+
+  updateMapKinetic(enabled) {
+    this.mapKinetic = enabled;
+    localStorage.setItem('marco:map-kinetic', String(enabled));
+  }
+
+  updatePhotonApi(url) {
+    this.photonApi = url;
   }
 }

app/services/storage.js

@@ -1,4 +1,4 @@
-import Service from '@ember/service';
+import Service, { service } from '@ember/service';
 import RemoteStorage from 'remotestoragejs';
 import Places from '@remotestorage/module-places';
 import Widget from 'remotestorage-widget';
@@ -7,14 +7,17 @@ import { getGeohashPrefixesInBbox } from '../utils/geohash-coverage';
 import { action } from '@ember/object';
 import { debounceTask } from 'ember-lifeline';
 import Geohash from 'latlon-geohash';
+import { getLocalizedName } from '../utils/osm';
 
 export default class StorageService extends Service {
+  @service osm;
   rs;
   widget;
   @tracked placesInView = [];
   @tracked savedPlaces = [];
   @tracked loadedPrefixes = [];
   @tracked currentBbox = null;
+  @tracked lists = [];
   @tracked version = 0; // Shared version tracker for bookmarks
   @tracked initialSyncDone = false;
   @tracked connected = false;
@@ -46,6 +49,11 @@ export default class StorageService extends Service {
     this.rs.on('connected', () => {
       this.connected = true;
       this.userAddress = this.rs.remote.userAddress;
+      this.loadLists();
+    });
+
+    this.rs.on('not-connected', () => {
+      this.loadLists();
     });
 
     this.rs.on('disconnected', () => {
@@ -54,6 +62,7 @@ export default class StorageService extends Service {
       this.placesInView = [];
       this.savedPlaces = [];
       this.loadedPrefixes = [];
+      this.lists = [];
       this.initialSyncDone = false;
     });
 
@@ -61,13 +70,18 @@ export default class StorageService extends Service {
       // console.debug('[rs] sync done:', result);
       if (!this.initialSyncDone) {
         this.initialSyncDone = true;
+        this.loadLists();
       }
     });
 
     this.rs.scope('/places/').on('change', (event) => {
       // console.debug(event);
-      this.handlePlaceChange(event);
-      debounceTask(this, 'reloadCurrentView', 200);
+      if (event.relativePath.startsWith('_lists/')) {
+        this.loadLists();
+      } else {
+        this.handlePlaceChange(event);
+        debounceTask(this, 'reloadCurrentView', 200);
+      }
     });
   }
 
@@ -120,6 +134,98 @@ export default class StorageService extends Service {
     this.loadAllPlaces(required);
   }
 
+  async loadLists() {
+    try {
+      if (!this.places.lists) return; // Wait for module init
+
+      // Ensure defaults exist first
+      await this.places.lists.initDefaults();
+
+      const lists = await this.places.lists.getAll();
+      this.lists = lists || [];
+
+      // Decorate with hardcoded icons for default lists (in-memory only)
+      this.lists.forEach((list) => {
+        if (list.id === 'to-go') {
+          list.icon = 'bookmark';
+        } else if (list.id === 'to-do') {
+          list.icon = 'check-square';
+        }
+      });
+
+      this.refreshPlaceListAssociations();
+    } catch (e) {
+      console.error('Failed to load lists:', e);
+    }
+  }
+
+  refreshPlaceListAssociations() {
+    // 1. Build an index of PlaceID -> ListID[]
+    const placeToListMap = new Map();
+
+    this.lists.forEach((list) => {
+      if (list.placeRefs && Array.isArray(list.placeRefs)) {
+        list.placeRefs.forEach((ref) => {
+          if (!ref.id) return;
+          if (!placeToListMap.has(ref.id)) {
+            placeToListMap.set(ref.id, []);
+          }
+          placeToListMap.get(ref.id).push(list.id);
+        });
+      }
+    });
+
+    // 2. Helper to attach lists to a place object
+    const attachLists = (place) => {
+      const listIds = placeToListMap.get(place.id) || [];
+      // Assign directly to object property (non-tracked mutation is fine as we trigger updates below)
+      place._listIds = listIds;
+      return place;
+    };
+
+    // 3. Update savedPlaces
+    this.savedPlaces = this.savedPlaces.map((p) => attachLists({ ...p }));
+
+    // 4. Update placesInView
+    this.placesInView = this.placesInView.map((p) => attachLists({ ...p }));
+  }
+
+  async togglePlaceList(place, listId, shouldBeInList) {
+    if (!place) return;
+
+    // Ensure place is saved first if it's new
+    let savedPlace = place;
+    if (!place.id || !place.geohash) {
+      if (shouldBeInList) {
+        // If adding to a list, we must save the place first
+        savedPlace = await this.storePlace(place);
+      } else {
+        return; // Can't remove an unsaved place from a list
+      }
+    }
+
+    try {
+      if (shouldBeInList) {
+        await this.places.lists.addPlace(
+          listId,
+          savedPlace.id,
+          savedPlace.geohash
+        );
+      } else {
+        await this.places.lists.removePlace(listId, savedPlace.id);
+      }
+
+      // Reload lists to reflect changes
+      await this.loadLists();
+
+      // Return the updated place
+      return this.findPlaceById(savedPlace.id);
+    } catch (e) {
+      console.error('Failed to toggle place in list:', e);
+      throw e;
+    }
+  }
+
   async loadPlacesInBounds(bbox) {
     // 1. Calculate required prefixes
     const requiredPrefixes = getGeohashPrefixesInBbox(bbox);
@@ -173,6 +279,8 @@ export default class StorageService extends Service {
           // Full reload
           this.placesInView = places;
         }
+        // Refresh list associations
+        this.refreshPlaceListAssociations();
       } else {
         if (!prefixes) this.placesInView = [];
       }
@@ -190,11 +298,22 @@ export default class StorageService extends Service {
     let place = this.savedPlaces.find((p) => p.id && String(p.id) === strId);
     if (place) return place;
 
+    // Check placesInView as fallback
+    place = this.placesInView.find((p) => p.id && String(p.id) === strId);
+    if (place) return place;
+
     // Then search by OSM ID
     place = this.savedPlaces.find((p) => p.osmId && String(p.osmId) === strId);
+    if (place) return place;
+
+    place = this.placesInView.find((p) => p.osmId && String(p.osmId) === strId);
     return place;
   }
 
+  isPlaceSaved(id) {
+    return !!this.findPlaceById(id);
+  }
+
   async storePlace(placeData) {
     const savedPlace = await this.places.store(placeData);
 
@@ -249,6 +368,82 @@ export default class StorageService extends Service {
     }
   }
 
+  async refreshPlace(place) {
+    if (!place || !place.id || !place.osmId || !place.osmType) {
+      return null;
+    }
+
+    try {
+      console.debug(`Checking for updates for ${place.title} (${place.osmId})`);
+      const freshData = await this.osm.fetchOsmObject(
+        place.osmId,
+        place.osmType
+      );
+
+      if (!freshData) {
+        console.warn('Could not fetch fresh data for', place.osmId);
+        return null;
+      }
+
+      // Check for changes
+      let hasChanges = false;
+      const changes = {};
+
+      // 1. Check Coordinates (allow tiny drift < ~1m)
+      const latDiff = Math.abs(place.lat - freshData.lat);
+      const lonDiff = Math.abs(place.lon - freshData.lon);
+      if (latDiff > 0.00001 || lonDiff > 0.00001) {
+        hasChanges = true;
+        changes.lat = freshData.lat;
+        changes.lon = freshData.lon;
+      }
+
+      // 2. Check Tags
+      const oldTags = place.osmTags || {};
+      const newTags = freshData.osmTags || {};
+      const allKeys = new Set([
+        ...Object.keys(oldTags),
+        ...Object.keys(newTags),
+      ]);
+
+      for (const key of allKeys) {
+        if (oldTags[key] !== newTags[key]) {
+          hasChanges = true;
+          changes.osmTags = newTags;
+          break;
+        }
+      }
+
+      if (!hasChanges) {
+        console.debug('No changes detected for', place.title);
+        return null;
+      }
+
+      console.debug('Changes detected:', changes);
+
+      // 3. Prepare Update
+      const updatedPlace = {
+        ...place,
+        ...changes,
+      };
+
+      // If the current title matches the old localized name, update it to the
+      // new localized name. If the user renamed it (custom title), keep it.
+      const oldDefaultName = getLocalizedName(oldTags);
+      const newDefaultName = getLocalizedName(newTags);
+
+      if (place.title === oldDefaultName && oldDefaultName !== newDefaultName) {
+        updatedPlace.title = newDefaultName;
+      }
+
+      // 4. Save
+      return await this.updatePlace(updatedPlace);
+    } catch (e) {
+      console.error('Failed to refresh place:', e);
+      return null;
+    }
+  }
+
   @action
   connect() {
     this.isWidgetOpen = true;

app/styles/app.css

@@ -1,15 +1,28 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 
+:root {
+  --default-list-color: #fc3;
+  --hover-bg: #f8f9fa;
+  --sidebar-width: 350px;
+  --link-color: #2a7fff;
+  --link-color-visited: #6a4fbf;
+}
+
 html,
 body {
   height: 100%;
   overscroll-behavior: none; /* Prevent pull-to-refresh on mobile */
   -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+button {
+  -webkit-tap-highlight-color: transparent;
 }
 
 body {
   margin: 0;
-  font-family: 'Noto Serif', sans-serif;
+  font-family: 'Noto Sans', sans-serif;
   font-size: 16px;
   color: #333;
 }
@@ -56,34 +69,104 @@ body {
   left: 0;
   right: 0;
   height: 60px;
-  padding: 0 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  padding: 0.5rem 1rem;
   z-index: 3000; /* Above sidebar (2000) and map */
   pointer-events: none; /* Let clicks pass through to map where transparent */
+
+  /* Layout */
+  display: grid;
+
+  /* Desktop: 1fr auto 1fr ensures the center element is absolutely centered */
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-areas: 'search chips user';
+  align-items: center;
+  gap: 1rem;
+}
+
+@media (width <= 768px) {
+  .app-header {
+    padding: 0.5rem 0.5rem 0;
+    height: auto;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'search user'
+      'chips chips';
+    row-gap: 8px; /* Increased spacing */
+  }
 }
 
 .header-left,
-.header-right {
-  pointer-events: auto; /* Re-enable clicks for buttons */
+.header-right,
+.header-center {
+  pointer-events: auto; /* Re-enable clicks */
 }
 
-.icon-btn {
-  background: white;
-  border: none;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
+.header-left {
   display: flex;
   align-items: center;
+  grid-area: search;
+
+  /* Ensure it sits at the start of its grid area */
+  justify-self: start;
+  width: 100%;
+}
+
+@media (width > 768px) {
+  .header-left {
+    min-width: 300px;
+    max-width: 400px;
+  }
+}
+
+@media (width > 768px) {
+  .header-left {
+    /* Desktop: Ensure minimum width for search box so it's not squeezed */
+    min-width: 300px;
+    max-width: 350px;
+  }
+}
+
+.header-right {
+  grid-area: user;
+  justify-self: end;
+}
+
+.header-center {
+  grid-area: chips;
+
+  /* Desktop: Center the chips block in the available space */
+  display: flex;
   justify-content: center;
-  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
-  cursor: pointer;
+  min-width: 0; /* Allow shrinking */
+}
+
+/* Adjust scroll container for desktop centering */
+@media (width > 768px) {
+  .header-center .category-chips-scroll {
+    width: auto;
+    max-width: 100%;
+  }
+}
+
+@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;
+    justify-content: start;
+  }
+
+  /* Hide chips on mobile when searching to save space */
+  .header-center.searching {
+    display: none;
+  }
+}
+
+.btn-press {
   transition: transform 0.1s;
 }
 
-.icon-btn:active {
+.btn-press:active {
   transform: scale(0.95);
 }
 
@@ -174,7 +257,7 @@ body {
 }
 
 .text-primary {
-  color: #007bff;
+  color: var(--link-color);
 }
 
 .text-danger {
@@ -191,21 +274,21 @@ body {
   top: 0;
   left: 0;
   bottom: 0;
-  width: 300px;
+  width: var(--sidebar-width);
   background: white;
   z-index: 3100; /* Higher than Header (3000) */
   box-shadow: 2px 0 5px rgb(0 0 0 / 10%);
   display: flex;
   flex-direction: column;
+  overflow: hidden; /* Ensure flex children are contained */
 }
 
-.settings-pane.sidebar {
+.sidebar.app-menu-pane {
   z-index: 3200; /* Higher than Places Sidebar (3100) */
 }
 
-/* Settings Pane Mobile Overrides */
 @media (width <= 768px) {
-  .settings-pane.sidebar {
+  .sidebar.app-menu-pane {
     width: 100%;
     right: 0;
     border-radius: 16px 16px 0 0;
@@ -234,13 +317,118 @@ body {
 .sidebar-content {
   padding: 1rem;
   overflow-y: auto;
-  flex: 1; /* Take up remaining vertical space */
+  -webkit-overflow-scrolling: touch;
+  flex: 1;
+  min-height: 0;
+  touch-action: pan-y;
+  overscroll-behavior: contain;
+}
+
+.app-menu-pane .sidebar-content {
+  padding-top: 0.5rem;
+}
+
+.app-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0 -1rem;
+}
+
+.app-menu button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1rem;
+  padding-left: 1.4rem;
+  background: none;
+  border: none;
+  color: #333;
+  cursor: pointer;
+  text-align: left;
+  font-size: 0.95rem;
+  font-family: inherit;
+  transition: background-color 0.2s;
+}
+
+.app-menu button:hover {
+  background-color: var(--hover-bg);
+}
+
+.app-menu .icon {
+  color: #666;
+  width: 20px;
+  height: 20px;
+}
+
+.sidebar-content details {
+  margin: 0 -1rem; /* Top margin, negative side margins to span full width */
+}
+
+.sidebar-content details summary {
+  list-style: none; /* Hide default triangle */
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1rem;
+  padding-left: 1.4rem;
+  cursor: pointer;
+  font-size: 0.95rem;
+  color: #333;
+  transition: background-color 0.2s;
+}
+
+.sidebar-content details summary::-webkit-details-marker {
+  display: none; /* Hide default triangle in WebKit */
+}
+
+.sidebar-content details summary:hover {
+  background-color: var(--hover-bg);
+}
+
+.sidebar-content details summary .icon {
+  width: 20px;
+  height: 20px;
+}
+
+.sidebar-content details summary::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-left: auto;
+  transition: transform 0.2s ease;
+}
+
+.sidebar-content details[open] summary::after {
+  transform: rotate(90deg);
+}
+
+.sidebar-content details .details-content {
+  padding: 0 1.4rem 1rem;
+  animation: details-slide-down 0.2s ease-out;
+  font-size: 0.9rem;
+}
+
+@keyframes details-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .edit-form {
   margin: -1rem;
   margin-bottom: 1rem;
-  background: #f8f9fa;
+  background: var(--hover-bg);
   padding: 1rem;
   border-bottom: 1px solid #eee;
 }
@@ -264,12 +452,25 @@ body {
   font-family: inherit;
   font-size: 1rem;
   box-sizing: border-box; /* Ensure padding doesn't overflow width */
+  color: #333;
+  background-color: #fff;
 }
 
 .form-control:focus {
   outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
+  border-color: var(--link-color);
+  box-shadow: 0 0 0 2px rgb(42 127 255 / 10%);
+}
+
+select.form-control {
+  appearance: none;
+  background-color: #fff;
+  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;
+  background-size: 16px 16px;
+  padding-right: 2.5rem;
+  cursor: pointer;
 }
 
 .edit-actions {
@@ -280,27 +481,27 @@ body {
 
 .settings-section {
   margin-bottom: 2rem;
-}
-
-.settings-section h3 {
-  font-size: 1rem;
-  font-weight: bold;
-  color: #666;
-  margin: 0 0 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  font-size: 0.95rem;
 }
 
 .settings-section .form-group {
   margin-top: 1rem;
 }
 
-.settings-section p a {
-  color: #007bff;
+.about-section {
+  margin-bottom: 2rem;
+}
+
+.about-section a {
+  color: var(--link-color);
   text-decoration: none;
 }
 
-.settings-section p a:hover {
+.about-section a:visited {
+  color: var(--link-color-visited);
+}
+
+.about-section a:hover {
   text-decoration: underline;
 }
 
@@ -309,7 +510,7 @@ body {
 }
 
 .btn-primary {
-  background: #007bff;
+  background: var(--link-color);
   color: white;
   border: none;
   padding: 0.75rem;
@@ -338,42 +539,48 @@ body {
 }
 
 .meta-info a {
-  color: #007bff;
+  color: var(--link-color);
   text-decoration: none;
-  padding-bottom: 4rem;
 }
 
 .meta-info a:hover {
   text-decoration: underline;
 }
 
-.link-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.sidebar-content table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.link-list li {
-  margin-bottom: 0.5rem;
+.sidebar-content table th,
+.sidebar-content table td {
+  padding: 0.5rem 0;
+  text-align: left;
 }
 
-.link-list a {
-  color: #007bff;
-  text-decoration: none;
-  font-size: 0.95rem;
+.sidebar-content table th {
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #898989;
 }
 
-.link-list a:hover {
-  text-decoration: underline;
+.sidebar-content table td {
+  border-bottom: 1px solid #f9f9f9;
+}
+
+.sidebar-content table tr:last-child td {
+  border-bottom: none;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
 }
 
 .places-list {
   list-style: none;
   padding: 0;
-  margin: -1rem -1rem 0 -1rem;
-}
-
-.places-list li {
+  margin: -1rem -1rem 0;
 }
 
 .place-item {
@@ -390,7 +597,7 @@ body {
 }
 
 .place-item:hover {
-  background: #eee;
+  background: var(--hover-bg);
 }
 
 .place-name {
@@ -426,6 +633,10 @@ body {
   justify-content: center;
 }
 
+.place-details {
+  padding-bottom: 2rem;
+}
+
 .place-details h3 {
   font-size: 1.2rem;
   margin-top: 0;
@@ -461,6 +672,12 @@ body {
   gap: 0.5rem;
 }
 
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .btn-outline {
   background: transparent;
   color: #333;
@@ -482,7 +699,7 @@ body {
 }
 
 .btn-blue {
-  background: #007bff;
+  background: var(--link-color);
   color: white;
   border: none;
 }
@@ -507,6 +724,7 @@ body {
   border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
   background: rgb(255 204 51 / 20%);
   position: absolute;
+
   /* Use translate3d for GPU acceleration on iOS */
   transform: translate3d(-50%, -50%, 0);
   pointer-events: none;
@@ -539,22 +757,67 @@ body {
   }
 }
 
-/* Locate Control */
+/* Map controls */
+
+.ol-control.ol-attribution {
+  bottom: 1rem;
+}
+
+.ol-touch .ol-control.ol-attribution {
+  bottom: 0.5rem;
+}
+
+.ol-control.ol-zoom {
+  bottom: 3rem;
+}
+
+.ol-touch .ol-control.ol-zoom {
+  bottom: 3.5rem;
+}
+
 .ol-control.ol-locate {
-  inset: auto 0.5em 2.5em auto;
+  bottom: 6.5rem;
 }
 
 .ol-touch .ol-control.ol-locate {
-  inset: auto 0.5em 3.5em auto;
+  bottom: 8.5rem;
 }
 
-/* Rotate Control */
-.ol-rotate {
-  inset: auto 0.5em 5em auto;
+.ol-control.ol-rotate {
+  bottom: 9rem;
 }
 
-.ol-touch .ol-rotate {
-  inset: auto 0.5em 6em auto;
+.ol-touch .ol-control.ol-rotate {
+  bottom: 11.5rem;
+}
+
+.ol-control.ol-attribution,
+.ol-control.ol-zoom,
+.ol-control.ol-locate,
+.ol-control.ol-rotate {
+  top: auto;
+  left: auto;
+  right: 1rem;
+}
+
+.ol-touch .ol-control.ol-attribution,
+.ol-touch .ol-control.ol-zoom,
+.ol-touch .ol-control.ol-locate,
+.ol-touch .ol-control.ol-rotate {
+  right: 0.5rem;
+}
+
+/* Icons */
+
+.app-logo-icon {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+}
+
+.app-logo-icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 span.icon {
@@ -575,13 +838,22 @@ span.icon {
   stroke-linejoin: round;
 }
 
+.icon-filled svg {
+  stroke: none;
+  fill: currentcolor;
+}
+
 .content-with-icon {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.5rem;
 }
 
+.content-with-icon .icon {
+  margin-top: 0.15rem;
+}
+
 /* Selected Pin Animation */
 .selected-pin-container {
   position: absolute;
@@ -652,6 +924,7 @@ span.icon {
 /* Map Crosshair for "Create Place" mode */
 .map-crosshair {
   position: absolute;
+
   /* Default Center */
   top: 50%;
   left: 50%;
@@ -671,16 +944,19 @@ span.icon {
   display: block;
 }
 
-/* Sidebar is open (Desktop: Left 300px) */
-/* We want to center in the remaining space (width - 300px) */
-/* Center X = 300 + (width - 300) / 2 = 300 + width/2 - 150 = width/2 + 150 */
-/* So shift left by 150px from center */
+/* Sidebar is open (Desktop: Left var(--sidebar-width)) */
+
+/* We want to center in the remaining space (width - var(--sidebar-width)) */
+
+/* Center X = var(--sidebar-width) + (width - var(--sidebar-width)) / 2 = var(--sidebar-width)/2 + 50% */
+
 .map-container.sidebar-open .map-crosshair {
-  left: calc(50% + 150px);
+  left: calc(50% + var(--sidebar-width) / 2);
 }
 
 @media (width <= 768px) {
   /* Sidebar/Bottom Sheet is open (Mobile: Bottom 50%) */
+
   /* Center Y = (height/2) / 2 = height/4 = 25% */
   .map-container.sidebar-open .map-crosshair {
     left: 50%; /* Reset desktop shift */
@@ -718,9 +994,322 @@ button.create-place {
 
   .sidebar-content {
     overflow-y: auto;
-    overscroll-behavior: contain; /* Prevent scroll chaining */
 
     /* Ensure content doesn't get hidden behind bottom safe areas on mobile */
     padding-bottom: env(safe-area-inset-bottom, 20px);
   }
 }
+
+/* Search Box Component */
+.search-box {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  margin-left: 0;
+  z-index: 3002; /* Higher than menu button to be safe */
+}
+
+@media (width <= 768px) {
+  .search-box {
+    max-width: calc(100vw - 65px);
+  }
+}
+
+.search-form {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 24px; /* Pill shape */
+  box-shadow: 0 2px 5px rgb(0 0 0 / 15%);
+  padding: 0 0.5rem;
+  height: 48px; /* Slightly taller for touch targets */
+  transition: box-shadow 0.2s;
+}
+
+.search-form:focus-within {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+
+/* Integrated Menu Button */
+.menu-btn-integrated {
+  background: transparent;
+  border: none;
+  padding: 8px;
+  margin-right: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #5f6368;
+}
+
+.menu-btn-integrated:hover {
+  background: rgb(0 0 0 / 5%);
+}
+
+/* Fallback Search Icon (Left) */
+.search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5f6368;
+  margin-right: 0.5rem;
+  padding: 8px; /* Match button size */
+}
+
+.search-input {
+  border: none;
+  background: transparent;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  font-size: 1rem;
+  color: #333;
+  outline: none;
+  width: 100%;
+  padding: 0 4px;
+
+  /* Remove native search cancel button in WebKit */
+  -webkit-appearance: none;
+}
+
+/* Remove 'x' from search input in Chrome/Safari */
+.search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+/* Submit Button (Right) */
+.search-submit-btn {
+  background: transparent;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5f6368;
+  border-radius: 50%;
+  margin-left: 4px;
+  padding-left: 8px;
+}
+
+.search-submit-btn:hover {
+  background: rgb(0 0 0 / 5%);
+  color: #333;
+}
+
+.search-clear-btn {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5f6368;
+  border-radius: 50%;
+  margin-left: 2px;
+}
+
+.search-clear-btn:hover {
+  background: rgb(0 0 0 / 5%);
+  color: #333;
+}
+
+/* Search Results Popover */
+.search-results-popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 8px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  overflow: hidden;
+  max-height: 400px;
+  overflow-y: auto;
+  z-index: 3002;
+}
+
+.search-results-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.search-result-item {
+  width: 100%;
+  display: flex;
+  align-items: center; /* Vertical center alignment */
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: white;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-result-item:last-child {
+  border-bottom: none;
+}
+
+.search-result-item:hover,
+.search-result-item:focus {
+  background: var(--hover-bg);
+  outline: none;
+}
+
+.result-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #f0f0f0;
+  border-radius: 50%;
+  flex-shrink: 0;
+  color: #666;
+}
+
+.result-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* For text truncation if needed */
+}
+
+.result-title {
+  font-weight: 500;
+  color: #333;
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-desc {
+  font-size: 0.8rem;
+  color: #777;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
+/* Place Lists Manager */
+.save-button-wrapper {
+  position: relative;
+}
+
+.place-lists-manager {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  width: 220px;
+  z-index: 10;
+  padding: 0.5rem 0;
+}
+
+.place-lists-manager .list-item {
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.place-lists-manager .list-item:hover {
+  background: var(--hover-bg);
+}
+
+.place-lists-manager label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  cursor: pointer;
+  margin: 0;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+.place-lists-manager input[type='checkbox'] {
+  accent-color: var(--link-color);
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.place-lists-manager .list-color {
+  width: 12px;
+  height: 12px;
+  background-color: var(--default-list-color);
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid rgb(0 0 0 / 10%);
+}
+
+.place-lists-manager .divider {
+  height: 1px;
+  background: #eee;
+  margin: 0.5rem 0;
+}
+
+/* Category Chips */
+.category-chips-scroll {
+  width: 100%;
+  overflow-x: auto;
+
+  /* Add padding for shadows */
+  padding: 4px 0;
+  -webkit-overflow-scrolling: touch;
+
+  /* Hide scrollbar but keep functionality */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+
+  /* Remove top margin as spacing is handled by grid/layout */
+  margin-top: 0;
+}
+
+.category-chips-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.category-chips-container {
+  display: flex;
+  gap: 8px;
+
+  /* Padding on sides so first/last chip isn't flush with screen edge */
+  padding: 0 4px;
+  width: max-content; /* Ensure it scrolls */
+}
+
+.category-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 16px; /* Pill shape */
+  font-size: 0.9rem;
+  color: #333;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+  transition: background-color 0.2s;
+}
+
+.category-chip:hover {
+  background: var(--hover-bg);
+}
+
+.category-chip:active {
+  background: #eee;
+}

app/templates/application.gjs

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { pageTitle } from 'ember-page-title';
 import Map from '#components/map';
 import AppHeader from '#components/app-header';
-import SettingsPane from '#components/settings-pane';
+import AppMenu from '#components/app-menu/index';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -14,11 +14,11 @@ export default class ApplicationComponent extends Component {
   @service mapUi;
   @service router;
 
-  @tracked isSettingsOpen = false;
+  @tracked isAppMenuOpen = false;
 
   get isSidebarOpen() {
-     // We consider the sidebar "open" if we are in search or place routes.
-     // This helps the map know if it should shift the center or adjust view.
+    // We consider the sidebar "open" if we are in search or place routes.
+    // This helps the map know if it should shift the center or adjust view.
     return (
       this.router.currentRouteName === 'place' ||
       this.router.currentRouteName === 'place.new' ||
@@ -34,26 +34,26 @@ export default class ApplicationComponent extends Component {
   }
 
   @action
-  toggleSettings() {
-    this.isSettingsOpen = !this.isSettingsOpen;
+  toggleAppMenu() {
+    this.isAppMenuOpen = !this.isAppMenuOpen;
   }
 
   @action
-  closeSettings() {
-    this.isSettingsOpen = false;
+  closeAppMenu() {
+    this.isAppMenuOpen = false;
   }
 
   @action
   handleOutsideClick() {
-    if (this.isSettingsOpen) {
-      this.closeSettings();
+    if (this.isAppMenuOpen) {
+      this.closeAppMenu();
     } else if (this.router.currentRouteName === 'search') {
-       this.router.transitionTo('index');
+      this.router.transitionTo('index');
     } else if (this.router.currentRouteName === 'place') {
-       // If in place route, decide if we want to go back to search or index
-       // For now, let's go to index or maybe back to search if search params exist?
-       // Simplest behavior: clear selection
-       this.router.transitionTo('index');
+      // If in place route, decide if we want to go back to search or index
+      // For now, let's go to index or maybe back to search if search params exist?
+      // Simplest behavior: clear selection
+      this.router.transitionTo('index');
     }
   }
 
@@ -65,7 +65,7 @@ export default class ApplicationComponent extends Component {
   <template>
     {{pageTitle "Marco"}}
 
-    <AppHeader @onToggleMenu={{this.toggleSettings}} />
+    <AppHeader @onToggleMenu={{this.toggleAppMenu}} />
 
     <div
       id="rs-widget-container"
@@ -81,12 +81,12 @@ export default class ApplicationComponent extends Component {
     {{/if}}
 
     <Map
-      @isSidebarOpen={{or this.isSidebarOpen this.isSettingsOpen}}
+      @isSidebarOpen={{or this.isSidebarOpen this.isAppMenuOpen}}
       @onOutsideClick={{this.handleOutsideClick}}
     />
 
-    {{#if this.isSettingsOpen}}
-      <SettingsPane @onClose={{this.closeSettings}} />
+    {{#if this.isAppMenuOpen}}
+      <AppMenu @onClose={{this.closeAppMenu}} />
     {{/if}}
 
     {{outlet}}

app/templates/place.gjs

@@ -77,11 +77,11 @@ export default class PlaceTemplate extends Component {
   navigateBack(place) {
     // The sidebar calls this with null when "Back" is clicked.
     if (place === null) {
-      // If we have history, go back (preserves search state)
-      if (window.history.length > 1) {
+      // If we came from search results, go back in history
+      if (this.mapUi.returnToSearch) {
         window.history.back();
       } else {
-        // Fallback if opened directly
+        // Otherwise just close the sidebar (return to map index)
         this.router.transitionTo('index');
       }
     } else {

app/templates/search.gjs

@@ -5,10 +5,12 @@ import { action } from '@ember/object';
 
 export default class SearchTemplate extends Component {
   @service router;
+  @service mapUi;
 
   @action
   selectPlace(place) {
     if (place) {
+      this.mapUi.returnToSearch = true;
       this.router.transitionTo('place', place);
     }
   }

app/utils/icons.js

@@ -0,0 +1,90 @@
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
+import activity from 'feather-icons/dist/icons/activity.svg?raw';
+import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
+import checkSquare from 'feather-icons/dist/icons/check-square.svg?raw';
+import clock from 'feather-icons/dist/icons/clock.svg?raw';
+import edit from 'feather-icons/dist/icons/edit.svg?raw';
+import facebook from 'feather-icons/dist/icons/facebook.svg?raw';
+import gift from 'feather-icons/dist/icons/gift.svg?raw';
+import globe from 'feather-icons/dist/icons/globe.svg?raw';
+import heart from 'feather-icons/dist/icons/heart.svg?raw';
+import home from 'feather-icons/dist/icons/home.svg?raw';
+import info from 'feather-icons/dist/icons/info.svg?raw';
+import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
+import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
+import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
+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 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';
+import server from 'feather-icons/dist/icons/server.svg?raw';
+import search from 'feather-icons/dist/icons/search.svg?raw';
+import settings from 'feather-icons/dist/icons/settings.svg?raw';
+import target from 'feather-icons/dist/icons/target.svg?raw';
+import user from 'feather-icons/dist/icons/user.svg?raw';
+import x from 'feather-icons/dist/icons/x.svg?raw';
+import zap from 'feather-icons/dist/icons/zap.svg?raw';
+import camera from '@waysidemapping/pinhead/dist/icons/camera.svg?raw';
+import cupAndSaucer from '@waysidemapping/pinhead/dist/icons/cup_and_saucer.svg?raw';
+import forkAndKnife from '@waysidemapping/pinhead/dist/icons/fork_and_knife.svg?raw';
+import personSleepingInBed from '@waysidemapping/pinhead/dist/icons/person_sleeping_in_bed.svg?raw';
+import shoppingBasket from '@waysidemapping/pinhead/dist/icons/shopping_basket.svg?raw';
+import wikipedia from '../icons/wikipedia.svg?raw';
+
+const ICONS = {
+  'arrow-left': arrowLeft,
+  activity,
+  bookmark,
+  camera,
+  'check-square': checkSquare,
+  clock,
+  'cup-and-saucer': cupAndSaucer,
+  edit,
+  facebook,
+  gift,
+  globe,
+  heart,
+  home,
+  info,
+  instagram,
+  'fork-and-knife': forkAndKnife,
+  'log-in': logIn,
+  'log-out': logOut,
+  mail,
+  map,
+  'map-pin': mapPin,
+  menu,
+  navigation,
+  'person-sleeping-in-bed': personSleepingInBed,
+  phone,
+  plus,
+  server,
+  search,
+  settings,
+  'shopping-basket': shoppingBasket,
+  target,
+  user,
+  wikipedia,
+  x,
+  zap,
+};
+
+const FILLED_ICONS = [
+  'fork-and-knife',
+  'wikipedia',
+  'cup-and-saucer',
+  'shopping-basket',
+  'camera',
+  'person-sleeping-in-bed',
+];
+
+export function getIcon(name) {
+  return ICONS[name];
+}
+
+export function isIconFilled(name) {
+  return FILLED_ICONS.includes(name);
+}

app/utils/osm.js

@@ -0,0 +1,70 @@
+import { humanizeOsmTag } from './format-text';
+
+export function getLocalizedName(tags, defaultName = 'Untitled Place') {
+  if (!tags) return defaultName;
+
+  // 1. Get user's preferred languages
+  const languages = navigator.languages || [navigator.language || 'en'];
+
+  // 2. Try to find a match for each preferred language
+  for (const lang of languages) {
+    if (!lang) continue;
+
+    // Handle "en-US", "de-DE", etc. -> look for "name:en", "name:de"
+    const shortLang = lang.split('-')[0];
+    const tagKey = `name:${shortLang}`;
+
+    if (tags[tagKey]) {
+      return tags[tagKey];
+    }
+  }
+
+  // 3. Fallback to standard "name"
+  if (tags.name) {
+    return tags.name;
+  }
+
+  // 4. Fallback to "name:en" (common in international places without local name)
+  if (tags['name:en']) {
+    return tags['name:en'];
+  }
+
+  // 5. Final fallback
+  return defaultName;
+}
+
+const PLACE_TYPE_KEYS = [
+  'amenity',
+  'shop',
+  'tourism',
+  'historic',
+  'leisure',
+  'office',
+  'craft',
+  'building',
+  'landuse',
+  'public_transport',
+  'highway',
+  'aeroway',
+  'waterway',
+  'natural',
+  'place',
+  'border_type',
+  'admin_title',
+];
+
+export function getPlaceType(tags) {
+  if (!tags) return null;
+
+  for (const key of PLACE_TYPE_KEYS) {
+    const value = tags[key];
+    if (value) {
+      if (value === 'yes') {
+        return humanizeOsmTag(key);
+      }
+      return humanizeOsmTag(value);
+    }
+  }
+
+  return null;
+}

app/utils/place-mapping.js

@@ -0,0 +1,15 @@
+import { getLocalizedName } from './osm';
+
+export function mapToStorageSchema(place) {
+  return {
+    title: place.title || getLocalizedName(place.osmTags, 'Untitled Place'),
+    lat: place.lat,
+    lon: place.lon,
+    tags: [],
+    url: place.osmTags?.website,
+    osmId: String(place.osmId || place.id),
+    osmType: place.osmType,
+    osmTags: place.osmTags || {},
+    description: place.description,
+  };
+}

app/utils/poi-categories.js

@@ -0,0 +1,62 @@
+// This configuration defines the "Quick Search" categories available in the UI.
+//
+// Structure:
+// - id: The URL slug used for routing (e.g. ?category=restaurants)
+// - label: The human-readable name displayed in the UI
+// - icon: The icon name (must be registered in app/utils/icons.js)
+// - filter: An array of Overpass QL query parts.
+//   - Each string in the array is an independent query condition.
+//   - Multiple strings act as an OR condition (union of results).
+
+export const POI_CATEGORIES = [
+  {
+    id: 'restaurants',
+    label: 'Restaurants',
+    icon: 'fork-and-knife',
+    filter: ['["amenity"~"^(restaurant|fast_food|food_court|pub|cafe)$"]'],
+    types: ['node', 'way'],
+  },
+  {
+    id: 'coffee',
+    label: 'Coffee',
+    icon: 'cup-and-saucer',
+    filter: [
+      '["amenity"~"^(cafe|ice_cream)$"]',
+      '["shop"~"^(coffee|tea)$"]',
+      '["cuisine"~"coffee_shop"]',
+    ],
+    types: ['node', 'way'],
+  },
+  {
+    id: 'groceries',
+    label: 'Groceries',
+    icon: 'shopping-basket',
+    filter: [
+      '["shop"~"^(supermarket|convenience|grocery|greengrocer|bakery|butcher|deli|farm|seafood)$"]',
+    ],
+    types: ['node', 'way'],
+  },
+  {
+    id: 'things-to-do',
+    label: 'Things to do',
+    icon: 'camera',
+    filter: [
+      '["tourism"~"^(museum|gallery|attraction|viewpoint|zoo|theme_park|aquarium|artwork)$"]',
+      '["amenity"~"^(cinema|theatre|arts_centre|planetarium)$"]',
+      '["leisure"~"^(sports_centre|stadium|water_park)$"]',
+      '["historic"]',
+    ],
+    types: ['node', 'way', 'relation'],
+  },
+  {
+    id: 'accommodation',
+    label: 'Hotels',
+    icon: 'person-sleeping-in-bed',
+    filter: ['["tourism"~"^(hotel|hostel|motel)$"]'],
+    types: ['node', 'way', 'relation'],
+  },
+];
+
+export function getCategoryById(id) {
+  return POI_CATEGORIES.find((c) => c.id === id);
+}

app/utils/social-links.js

@@ -0,0 +1,52 @@
+// Helper to get value from multiple keys
+const get = (tags, ...keys) => {
+  for (const k of keys) {
+    if (tags[k]) return tags[k];
+  }
+  return null;
+};
+
+export function getSocialInfo(tags, platform) {
+  if (!tags) return null;
+
+  const key = platform;
+  const domain = `${platform}.com`;
+  const val = get(tags, `contact:${key}`, key);
+
+  if (!val) return null;
+
+  // Check if it's a full URL
+  if (val.startsWith('http')) {
+    try {
+      const url = new URL(val);
+
+      // Handle Facebook profile.php?id=...
+      if (
+        platform === 'facebook' &&
+        url.pathname === '/profile.php' &&
+        url.searchParams.has('id')
+      ) {
+        return {
+          url: val,
+          username: url.searchParams.get('id'),
+        };
+      }
+
+      // Clean up pathname to get username
+      let username = url.pathname.replace(/^\/|\/$/g, '');
+      return {
+        url: val,
+        username: username || val, // Fallback to full URL if path is empty
+      };
+    } catch {
+      return { url: val, username: val };
+    }
+  }
+
+  // Assume it's a username
+  const username = val.replace(/^@/, ''); // Remove leading @
+  return {
+    url: `https://${domain}/${username}`,
+    username: username,
+  };
+}

babel.config.mjs

@@ -2,6 +2,9 @@ import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { setConfig } from '@warp-drive/core/build-config';
 import { buildMacros } from '@embroider/macros/babel';
+import asyncArrowTaskTransform from 'ember-concurrency/async-arrow-task-transform';
+
+console.log('Babel config loading, plugin:', typeof asyncArrowTaskTransform);
 
 const macros = buildMacros({
   configure: (config) => {
@@ -14,6 +17,7 @@ const macros = buildMacros({
 
 export default {
   plugins: [
+    asyncArrowTaskTransform,
     [
       'babel-plugin-ember-template-compilation',
       {

index.html

@@ -3,9 +3,22 @@
   <head>
     <meta charset="utf-8">
     <title>Marco</title>
-    <meta name="description" content="">
+    <meta name="description" content="Unhosted maps app that respects your privacy and choices.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- Open Graph -->
+    <meta property="og:title" content="Marco">
+    <meta property="og:description" content="Unhosted maps app that respects your privacy and choices.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://marco.kosmos.org">
+    <meta property="og:image" content="https://marco.kosmos.org/icons/icon-512.png">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Marco">
+    <meta name="twitter:description" content="Unhosted maps app that respects your privacy and choices.">
+    <meta name="twitter:image" content="https://marco.kosmos.org/icons/icon-512.png">
+
     <!-- App identity -->
     <meta name="application-name" content="Marco">
     <meta name="apple-mobile-web-app-title" content="Marco">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.10.1",
+  "version": "1.16.0",
   "private": true,
   "description": "Unhosted maps app",
   "repository": {
@@ -21,19 +21,21 @@
   },
   "scripts": {
     "build": "vite build --outDir release/",
-    "build:icons": "for size in 32 48 144 180 192 512; do if [ \"$size\" -le 64 ]; then magick public/icons/icon.svg -define svg:remove-groups=map-grid -resize ${size}x${size} public/icons/icon-${size}.png; else rsvg-convert -w $size -h $size public/icons/icon.svg -o public/icons/icon-${size}.png; fi; done && rsvg-convert -w 512 -h 512 public/icons/icon.svg -o public/icons/icon-maskable.png",
+    "build:icons": "cp public/icons/icon-rounded.svg app/icons/icon-rounded.svg && for size in 32 48 144 180 192 512; do if [ \"$size\" -le 64 ]; then magick public/icons/icon.svg -define svg:remove-groups=map-grid -resize ${size}x${size} public/icons/icon-${size}.png; else rsvg-convert -w $size -h $size public/icons/icon.svg -o public/icons/icon-${size}.png; fi; done && rsvg-convert -w 512 -h 512 public/icons/icon.svg -o public/icons/icon-maskable.png",
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:css": "stylelint \"**/*.css\"",
-    "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
+    "lint:css:fix": "stylelint \"**/*.css\" --fix",
     "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm format",
     "lint:format": "prettier . --cache --check",
+    "lint:format:fix": "prettier . --cache --write",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "vite",
     "test": "vite build --mode development && testem ci --port 0",
+    "preversion": "pnpm lint && pnpm test",
     "version": "pnpm build && git add release/"
   },
   "devDependencies": {
@@ -50,7 +52,7 @@
     "@embroider/vite": "^1.5.0",
     "@eslint/js": "^9.39.2",
     "@glimmer/component": "^2.0.0",
-    "@remotestorage/module-places": "1.x",
+    "@remotestorage/module-places": "~1.2.1",
     "@rollup/plugin-babel": "^6.1.0",
     "@warp-drive/core": "~5.8.0",
     "@warp-drive/ember": "~5.8.0",
@@ -100,6 +102,8 @@
     "edition": "octane"
   },
   "dependencies": {
+    "@waysidemapping/pinhead": "^15.17.0",
+    "ember-concurrency": "^5.2.0",
     "ember-lifeline": "^7.0.0"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@waysidemapping/pinhead':
+        specifier: ^15.17.0
+        version: 15.17.0
+      ember-concurrency:
+        specifier: ^5.2.0
+        version: 5.2.0(@babel/core@7.28.6)
       ember-lifeline:
         specifier: ^7.0.0
         version: 7.0.0(@ember/test-helpers@5.4.1(@babel/core@7.28.6))
@@ -52,8 +58,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       '@remotestorage/module-places':
-        specifier: 1.x
-        version: 1.0.0
+        specifier: ~1.2.1
+        version: 1.2.1
       '@rollup/plugin-babel':
         specifier: ^6.1.0
         version: 6.1.0(@babel/core@7.28.6)(rollup@4.55.1)
@@ -1377,8 +1383,8 @@ packages:
     resolution: {integrity: sha512-4rdu8GPY9TeQwsYp5D2My74dC3dSVS3tghAvisG80ybK4lqa0gvlrglaSTBxogJbxqHRw/NjI/liEtb3+SD+Bw==}
     engines: {node: '>=18.12'}
 
-  '@remotestorage/module-places@1.0.0':
-    resolution: {integrity: sha512-vaqJeTw658gjPyLz70Mq2AbGfDZ66O2mpDFME+gtaGFYl2+UvrvRLCrXWHYuyTE21f3TJdegeXM6C5nZMxLv9A==}
+  '@remotestorage/module-places@1.2.1':
+    resolution: {integrity: sha512-hNRuhGoG8RS+cieVvDVzXWBEuNPfyeFirhgNH3z1WoKw9ngHdPY6V0sT0vKbsxB8xaODReZfo2ZKHLTmdFunlw==}
 
   '@rollup/plugin-babel@6.1.0':
     resolution: {integrity: sha512-dFZNuFD2YRcoomP4oYf+DvQNSUA9ih+A3vUqopQx5EdtPGo3WBnQcI/S8pwpz91UsGfL0HsMSOlaMld8HrbubA==}
@@ -1436,66 +1442,79 @@ packages:
     resolution: {integrity: sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.55.1':
     resolution: {integrity: sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.55.1':
     resolution: {integrity: sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.55.1':
     resolution: {integrity: sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.55.1':
     resolution: {integrity: sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.55.1':
     resolution: {integrity: sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.55.1':
     resolution: {integrity: sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.55.1':
     resolution: {integrity: sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.55.1':
     resolution: {integrity: sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.55.1':
     resolution: {integrity: sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.55.1':
     resolution: {integrity: sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.55.1':
     resolution: {integrity: sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.55.1':
     resolution: {integrity: sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.55.1':
     resolution: {integrity: sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==}
@@ -1635,6 +1654,9 @@ packages:
     peerDependencies:
       '@warp-drive/core': 5.8.1
 
+  '@waysidemapping/pinhead@15.17.0':
+    resolution: {integrity: sha512-XcL/0Ll+gkRIpXlO+skwd6USynA+mX3DNwqrWDMhgRmLP4DNRPTeaecK64BBxk1bB/F9Xi/9kgN6JA5zbdgejQ==}
+
   '@xmldom/xmldom@0.8.11':
     resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
     engines: {node: '>=10.0.0'}
@@ -2519,6 +2541,9 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
+  decorator-transforms@1.2.1:
+    resolution: {integrity: sha512-UUtmyfdlHvYoX3VSG1w5rbvBQ2r5TX1JsE4hmKU9snleFymadA3VACjl6SRfi9YgBCSjBbfQvR1bs9PRW9yBKw==}
+
   decorator-transforms@2.3.1:
     resolution: {integrity: sha512-PDOk74Zqqy0946Lx4ckXxbgG6uhPScOICtrxL/pXmfznxchqNee0TaJISClGJQe6FeT8ohGqsOgdjfahm4FwEw==}
 
@@ -2669,6 +2694,15 @@ packages:
     engines: {node: '>= 20.19.0'}
     hasBin: true
 
+  ember-concurrency@5.2.0:
+    resolution: {integrity: sha512-NUptPzaxaF2XWqn3VQ5KqiLSRqPFIZhWXH3UkOMhiedmiolxGYjUV96maoHWdd5msxNgQBC0UkZ28m7pV7A0sQ==}
+    engines: {node: 16.* || >= 18}
+    peerDependencies:
+      '@glint/template': '>= 1.0.0'
+    peerDependenciesMeta:
+      '@glint/template':
+        optional: true
+
   ember-eslint-parser@0.5.13:
     resolution: {integrity: sha512-b6ALDaxs9Bb4v0uagWud/5lECb78qpXHFv7M340dUHFW4Y0RuhlsfA4Rb+765X1+6KHp8G7TaAs0UgggWUqD3g==}
     engines: {node: '>=16.0.0'}
@@ -6974,7 +7008,7 @@ snapshots:
       '@pnpm/error': 1000.0.5
       find-up: 5.0.0
 
-  '@remotestorage/module-places@1.0.0':
+  '@remotestorage/module-places@1.2.1':
     dependencies:
       latlon-geohash: 2.0.0
       ulid: 3.0.2
@@ -7211,6 +7245,8 @@ snapshots:
       - '@glint/template'
       - supports-color
 
+  '@waysidemapping/pinhead@15.17.0': {}
+
   '@xmldom/xmldom@0.8.11': {}
 
   abbrev@1.1.1: {}
@@ -8110,6 +8146,13 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
+  decorator-transforms@1.2.1(@babel/core@7.28.6):
+    dependencies:
+      '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.28.6)
+      babel-import-util: 2.1.1
+    transitivePeerDependencies:
+      - '@babel/core'
+
   decorator-transforms@2.3.1(@babel/core@7.28.6):
     dependencies:
       '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.28.6)
@@ -8462,6 +8505,17 @@ snapshots:
       - walrus
       - whiskers
 
+  ember-concurrency@5.2.0(@babel/core@7.28.6):
+    dependencies:
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/types': 7.28.6
+      '@embroider/addon-shim': 1.10.2
+      decorator-transforms: 1.2.1(@babel/core@7.28.6)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-eslint-parser@0.5.13(@babel/core@7.28.6)(eslint@9.39.2)(typescript@5.9.3):
     dependencies:
       '@babel/core': 7.28.6

release/index.html

@@ -3,9 +3,22 @@
   <head>
     <meta charset="utf-8">
     <title>Marco</title>
-    <meta name="description" content="">
+    <meta name="description" content="Unhosted maps app that respects your privacy and choices.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- Open Graph -->
+    <meta property="og:title" content="Marco">
+    <meta property="og:description" content="Unhosted maps app that respects your privacy and choices.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://marco.kosmos.org">
+    <meta property="og:image" content="https://marco.kosmos.org/icons/icon-512.png">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Marco">
+    <meta name="twitter:description" content="Unhosted maps app that respects your privacy and choices.">
+    <meta name="twitter:image" content="https://marco.kosmos.org/icons/icon-512.png">
+
     <!-- App identity -->
     <meta name="application-name" content="Marco">
     <meta name="apple-mobile-web-app-title" content="Marco">
@@ -26,8 +39,8 @@
     <meta name="msapplication-TileColor" content="#F6E9A6">
     <meta name="msapplication-TileImage" content="/icons/icon-144.png">
 
-  <script type="module" crossorigin src="/assets/main-Dep3TjPE.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-D53xPL_H.css">
+  <script type="module" crossorigin src="/assets/main-C4F17h3W.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-CKp1bFPU.css">
 </head>
   <body>
  </body>

tests/acceptance/navigation-test.js

@@ -0,0 +1,117 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click } from '@ember/test-helpers';
+import { setupApplicationTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+import sinon from 'sinon';
+
+class MockOsmService extends Service {
+  async getNearbyPois() {
+    return [
+      {
+        osmId: '123',
+        lat: 1,
+        lon: 1,
+        osmTags: { name: 'Test Place', amenity: 'cafe' },
+        osmType: 'node',
+      },
+    ];
+  }
+  async getPoiById() {
+    return {
+      osmId: '123',
+      lat: 1,
+      lon: 1,
+      osmTags: { name: 'Test Place', amenity: 'cafe' },
+      osmType: 'node',
+    };
+  }
+  async fetchOsmObject(id, type) {
+    return {
+      osmId: id,
+      osmType: type,
+      lat: 1,
+      lon: 1,
+      osmTags: { name: 'Test Place', amenity: 'cafe' },
+      title: 'Test Place',
+    };
+  }
+}
+
+class MockStorageService extends Service {
+  savedPlaces = [];
+  findPlaceById() {
+    return null;
+  }
+  isPlaceSaved() {
+    return false;
+  }
+  loadPlacesInBounds() {
+    return [];
+  }
+  get placesInView() {
+    return [];
+  }
+  rs = {
+    on: () => {},
+  };
+}
+
+module('Acceptance | navigation', function (hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:osm', MockOsmService);
+    this.owner.register('service:storage', MockStorageService);
+  });
+
+  test('navigating from search results to place and back uses history', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+    const backStub = sinon.stub(window.history, 'back');
+
+    try {
+      await visit('/search?lat=1&lon=1');
+      assert.strictEqual(currentURL(), '/search?lat=1&lon=1');
+
+      await click('.place-item');
+      assert.ok(currentURL().includes('/place/'), 'Navigated to place');
+      assert.true(mapUi.returnToSearch, 'Flag returnToSearch is set');
+
+      // Click the back button in the sidebar
+      await click('.back-btn');
+
+      assert.true(backStub.calledOnce, 'window.history.back() was called');
+    } finally {
+      backStub.restore();
+    }
+  });
+
+  test('closing the sidebar resets the returnToSearch flag', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+
+    await visit('/search?lat=1&lon=1');
+    await click('.place-item'); // Sets returnToSearch = true
+
+    assert.true(mapUi.returnToSearch, 'Flag is set upon entering place');
+
+    // Click the Close (X) button
+    await click('.close-btn');
+
+    assert.strictEqual(currentURL(), '/', 'Returned to index');
+    assert.false(mapUi.returnToSearch, 'Flag is reset after closing sidebar');
+  });
+
+  test('navigating directly to place and back closes sidebar', async function (assert) {
+    const backStub = sinon.stub(window.history, 'back');
+    try {
+      await visit('/place/osm:node:123');
+      assert.ok(currentURL().includes('/place/'), 'Visited place directly');
+
+      await click('.back-btn');
+
+      assert.strictEqual(currentURL(), '/', 'Returned to index/map');
+      assert.true(backStub.notCalled, 'window.history.back() was NOT called');
+    } finally {
+      backStub.restore();
+    }
+  });
+});

tests/acceptance/search-test.js

@@ -0,0 +1,221 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+
+module('Acceptance | search', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /search with q parameter performs text search', async function (assert) {
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search(query) {
+        if (query === 'Berlin') {
+          return [
+            {
+              title: 'Berlin',
+              lat: 52.52,
+              lon: 13.405,
+              osmId: '123',
+              osmType: 'R',
+              description: 'City in Germany',
+            },
+            {
+              title: 'Berlin Alexanderplatz',
+              lat: 52.521,
+              lon: 13.41,
+              osmId: '456',
+              osmType: 'N',
+              description: 'Square in Berlin',
+            },
+          ];
+        }
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // Mock Storage Service (empty)
+    class MockStorageService extends Service {
+      savedPlaces = [];
+      findPlaceById() {
+        return null;
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      rs = {
+        on: () => {},
+      };
+      // Add placesInView since map component accesses it
+      placesInView = [];
+      loadPlacesInBounds() {
+        return Promise.resolve();
+      }
+    }
+
+    this.owner.register('service:storage', MockStorageService);
+
+    await visit('/search?q=Berlin');
+
+    assert.strictEqual(currentURL(), '/search?q=Berlin');
+    assert.dom('.sidebar-header h2').includesText('Results');
+    assert.dom('.places-list li').exists({ count: 2 });
+    assert.dom('.places-list li:first-child .place-name').hasText('Berlin');
+  });
+
+  test('visiting /search with lat/lon performs nearby search', async function (assert) {
+    // Mock Osm Service
+    class MockOsmService extends Service {
+      async getNearbyPois() {
+        return [
+          {
+            title: 'Nearby Cafe',
+            lat: 52.521,
+            lon: 13.406,
+            osmId: '789',
+            osmType: 'N',
+            _distance: 100, // Pre-calculated or ignored if mocked
+          },
+        ];
+      }
+    }
+    this.owner.register('service:osm', MockOsmService);
+
+    // Mock Storage Service (empty)
+    class MockStorageService extends Service {
+      savedPlaces = [];
+      findPlaceById() {
+        return null;
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      rs = {
+        on: () => {},
+      };
+      // Add placesInView since map component accesses it
+      placesInView = [];
+      loadPlacesInBounds() {
+        return Promise.resolve();
+      }
+    }
+
+    this.owner.register('service:storage', MockStorageService);
+
+    await visit('/search?lat=52.52&lon=13.405');
+
+    assert.strictEqual(currentURL(), '/search?lat=52.52&lon=13.405');
+    assert.dom('.sidebar-header h2').includesText('Nearby');
+    assert.dom('.places-list li').exists({ count: 1 });
+    assert.dom('.places-list li .place-name').hasText('Nearby Cafe');
+  });
+
+  test('local bookmarks are merged into search results', async function (assert) {
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // Mock Storage Service with a bookmark
+    class MockStorageService extends Service {
+      savedPlaces = [
+        {
+          title: 'My Secret Base',
+          lat: 50.0,
+          lon: 10.0,
+          osmId: '999',
+          osmType: 'N',
+          description: 'Top Secret',
+        },
+      ];
+      findPlaceById(id) {
+        if (id === '999') return this.savedPlaces[0];
+        return null;
+      }
+      isPlaceSaved(id) {
+        return !!this.findPlaceById(id);
+      }
+      rs = {
+        on: () => {},
+      };
+      placesInView = [];
+      loadPlacesInBounds() {
+        return Promise.resolve();
+      }
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    await visit('/search?q=Secret');
+
+    assert.strictEqual(currentURL(), '/search?q=Secret');
+    assert.dom('.places-list li').exists({ count: 1 });
+    assert.dom('.places-list li .place-name').hasText('My Secret Base');
+  });
+
+  test('visiting /search with category parameter performs category search', async function (assert) {
+    // Mock Osm Service
+    class MockOsmService extends Service {
+      async getCategoryPois(bounds, categoryId) {
+        if (categoryId === 'coffee') {
+          return [
+            {
+              title: 'Latte Art Cafe',
+              lat: 52.52,
+              lon: 13.405,
+              osmId: '101',
+              osmType: 'N',
+              description: 'Best Coffee',
+            },
+          ];
+        }
+        return [];
+      }
+    }
+    this.owner.register('service:osm', MockOsmService);
+
+    // Mock Storage Service (empty)
+    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 (needed for bounds)
+    class MockMapService extends Service {
+      getBounds() {
+        return {
+          minLat: 52.5,
+          minLon: 13.4,
+          maxLat: 52.6,
+          maxLon: 13.5,
+        };
+      }
+    }
+    this.owner.register('service:map', MockMapService);
+
+    await visit('/search?category=coffee&lat=52.52&lon=13.405');
+
+    assert.strictEqual(
+      currentURL(),
+      '/search?category=coffee&lat=52.52&lon=13.405'
+    );
+    assert.dom('.places-list li').exists({ count: 1 });
+    assert.dom('.places-list li .place-name').hasText('Latte Art Cafe');
+    // Ensure it shows "Results" not "Nearby"
+    assert.dom('.sidebar-header h2').includesText('Results');
+  });
+});

tests/integration/components/app-header-test.gjs

@@ -0,0 +1,66 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render, fillIn } from '@ember/test-helpers';
+import AppHeader from 'marco/components/app-header';
+import Service from '@ember/service';
+
+module('Integration | Component | app-header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the search box', async function (assert) {
+    this.noop = () => {};
+
+    class MockPhotonService extends Service {}
+    class MockRouterService extends Service {}
+    class MockMapUiService extends Service {}
+    class MockMapService extends Service {}
+
+    this.owner.register('service:photon', MockPhotonService);
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+    this.owner.register('service:map', MockMapService);
+
+    await render(
+      <template><AppHeader @onToggleMenu={{this.noop}} /></template>
+    );
+
+    assert.dom('header.app-header').exists();
+    assert.dom('.search-box').exists('Search box is present in the header');
+    assert.dom('.menu-btn-integrated').exists('Menu button is integrated');
+  });
+
+  test('typing in search box toggles .searching class on header-center', async function (assert) {
+    this.noop = () => {};
+
+    class MockPhotonService extends Service {
+      search() {
+        return [];
+      }
+    }
+    class MockRouterService extends Service {}
+    class MockMapUiService extends Service {
+      setSearchBoxFocus() {}
+      currentCenter = null;
+    }
+    class MockMapService extends Service {}
+
+    this.owner.register('service:photon', MockPhotonService);
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+    this.owner.register('service:map', MockMapService);
+
+    await render(
+      <template><AppHeader @onToggleMenu={{this.noop}} /></template>
+    );
+
+    assert.dom('.header-center').doesNotHaveClass('searching');
+
+    await fillIn('.search-input', 'test');
+
+    assert.dom('.header-center').hasClass('searching');
+
+    await fillIn('.search-input', '');
+
+    assert.dom('.header-center').doesNotHaveClass('searching');
+  });
+});

tests/integration/components/category-chips-test.gjs

@@ -0,0 +1,56 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import CategoryChips from 'marco/components/category-chips';
+import Service from '@ember/service';
+import { POI_CATEGORIES } from 'marco/utils/poi-categories';
+
+module('Integration | Component | category-chips', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the correct number of chips', async function (assert) {
+    class MockRouterService extends Service {}
+    class MockMapUiService extends Service {}
+
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    await render(<template><CategoryChips /></template>);
+
+    assert.dom('.category-chip').exists({ count: 5 });
+
+    // Check for some expected labels
+    assert.dom(this.element).includesText('Restaurants');
+    assert.dom(this.element).includesText('Coffee');
+  });
+
+  test('clicking a chip triggers the @onSelect action', async function (assert) {
+    let selectedCategory;
+    this.handleSelect = (category) => {
+      selectedCategory = category;
+    };
+
+    class MockRouterService extends Service {
+      transitionTo() {}
+    }
+    class MockMapUiService extends Service {}
+
+    this.owner.register('service:router', MockRouterService);
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    await render(
+      <template><CategoryChips @onSelect={{this.handleSelect}} /></template>
+    );
+
+    // Find the chip for "Coffee"
+    const coffeeCategory = POI_CATEGORIES.find((c) => c.id === 'coffee');
+    const chip = Array.from(
+      this.element.querySelectorAll('.category-chip')
+    ).find((el) => el.textContent.includes(coffeeCategory.label));
+
+    await click(chip);
+
+    assert.strictEqual(selectedCategory.id, 'coffee');
+    assert.strictEqual(selectedCategory.label, 'Coffee');
+  });
+});

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

@@ -0,0 +1,258 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import Service from '@ember/service';
+import PlaceDetails from 'marco/components/place-details';
+
+module('Integration | Component | place-details', function (hooks) {
+  setupRenderingTest(hooks);
+
+  class StorageService extends Service {
+    lists = [
+      { id: 'to-go', title: 'Want to go', color: '#2e9e4f' },
+      { id: 'to-do', title: 'To do', color: '#2a7fff' },
+    ];
+
+    isPlaceSaved() {
+      return false;
+    }
+
+    findPlaceById() {
+      return null;
+    }
+
+    async storePlace(place) {
+      return { ...place, id: '123', createdAt: new Date().toISOString() };
+    }
+
+    async removePlace() {
+      return true;
+    }
+
+    async togglePlaceList() {
+      return true;
+    }
+  }
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:storage', StorageService);
+
+    // Mock Router for all tests
+    class MockRouter extends Service {
+      transitionTo() {}
+    }
+    this.owner.register('service:router', MockRouter);
+  });
+
+  test('it formats coordinates correctly', async function (assert) {
+    const place = {
+      title: 'Test Place',
+      lat: 52.520006789,
+      lon: 13.404954123,
+      description: 'A place for testing.',
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    assert.dom('.place-details').exists();
+    assert.dom('.place-details h3').hasText('Test Place');
+
+    // Check for the formatted coordinates link text
+    // "52.520007, 13.404954" (rounded)
+    assert.dom('.meta-info a[href*="geo:"]').hasText('52.520007, 13.404954');
+  });
+
+  test('it handles missing coordinates gracefully', async function (assert) {
+    const place = {
+      title: 'Place without Coords',
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    assert.dom('.place-details h3').hasText('Place without Coords');
+    assert.dom('.meta-info a[href*="geo:"]').doesNotExist();
+  });
+
+  test('it reveals the list manager when save is clicked', async function (assert) {
+    const place = {
+      title: 'Cool Cafe',
+      lat: 10,
+      lon: 10,
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Manager is initially hidden
+    assert.dom('.place-lists-manager').doesNotExist();
+
+    // Find the Save button
+    // It's the first button in .actions
+    const saveBtn = this.element.querySelector('.actions button');
+    await click(saveBtn);
+
+    // Manager should be visible now
+    assert.dom('.place-lists-manager').exists();
+
+    // Check for default lists from mock service
+    assert.dom('.place-lists-manager').includesText('Want to go');
+    assert.dom('.place-lists-manager').includesText('To do');
+    assert.dom('.place-lists-manager').includesText('Saved');
+  });
+
+  test('it handles saving a new place via master toggle', async function (assert) {
+    let storedPlace = null;
+
+    // Override mock service specifically for this test to spy on storePlace
+    class MockStorage extends Service {
+      lists = [];
+      async storePlace(place) {
+        storedPlace = place;
+        return { ...place, id: 'new-id', createdAt: new Date().toISOString() };
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      findPlaceById() {
+        return null;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    const place = {
+      title: 'New Spot',
+      lat: 20,
+      lon: 20,
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Open manager
+    await click('.actions button');
+
+    // Find master "Saved" toggle
+    const masterToggle = this.element.querySelector(
+      '.place-lists-manager .master-toggle input'
+    );
+
+    // It should be unchecked initially for a new place
+    assert.dom(masterToggle).isNotChecked();
+
+    // Click it to save
+    await click(masterToggle);
+
+    // Verify storePlace was called
+    assert.ok(storedPlace, 'storePlace was called');
+    assert.strictEqual(storedPlace.title, 'New Spot');
+  });
+
+  test('it handles removing a saved place via master toggle', async function (assert) {
+    let removedPlaceId = null;
+
+    class MockStorage extends Service {
+      lists = [];
+      async removePlace(place) {
+        removedPlaceId = place.id;
+      }
+      isPlaceSaved() {
+        return true;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    const place = {
+      id: 'saved-id',
+      title: 'Saved Spot',
+      lat: 30,
+      lon: 30,
+      createdAt: '2023-01-01', // Marks it as saved
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Open manager
+    await click('.actions button');
+
+    // Find master "Saved" toggle
+    const masterToggle = this.element.querySelector(
+      '.place-lists-manager .master-toggle input'
+    );
+
+    // It should be checked initially for a saved place
+    assert.dom(masterToggle).isChecked();
+
+    // Click it to remove
+    await click(masterToggle);
+
+    assert.strictEqual(removedPlaceId, 'saved-id', 'removePlace was called');
+
+    assert.deepEqual(place._listIds, [], '_listIds was cleared on the object');
+  });
+
+  test('it adds place to a list', async function (assert) {
+    let listId = null;
+    let placeArg = null;
+    let shouldAdd = null;
+
+    class MockStorage extends Service {
+      lists = [{ id: 'favs', title: 'Favorites', color: 'red' }];
+      async togglePlaceList(place, id, add) {
+        placeArg = place;
+        listId = id;
+        shouldAdd = add;
+      }
+      isPlaceSaved() {
+        return true;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    // Provide a place that is already saved
+    const place = {
+      id: 'p1',
+      title: 'My Spot',
+      createdAt: '2023-01-01',
+      _listIds: [], // Not in any list yet
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Open manager
+    await click('.actions button');
+
+    // Find the checkbox for "Favorites"
+    const checkbox = this.element.querySelectorAll(
+      '.place-lists-manager input[type="checkbox"]'
+    )[1]; // Index 1 because 0 is master toggle
+
+    await click(checkbox);
+
+    assert.strictEqual(listId, 'favs');
+    assert.strictEqual(placeArg.id, 'p1');
+    assert.true(shouldAdd);
+  });
+
+  test('it respects storage service state over stale place object', async function (assert) {
+    class MockStorage extends Service {
+      lists = [];
+      isPlaceSaved() {
+        return false;
+      }
+      findPlaceById() {
+        return null;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    const place = {
+      id: 'stale-id',
+      title: 'Stale Place',
+      createdAt: '2023-01-01', // Looks saved
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Button should say "Save", not "Saved" because isPlaceSaved returns false
+    assert.dom('.actions button').hasText('Save');
+    assert.dom('.actions button').doesNotHaveClass('btn-secondary');
+  });
+});

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

@@ -0,0 +1,229 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render, fillIn, click, waitFor } from '@ember/test-helpers';
+import SearchBox from 'marco/components/search-box';
+import Service from '@ember/service';
+
+module('Integration | Component | search-box', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders and handles search input', async function (assert) {
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search(query) {
+        if (query === 'test') {
+          return [
+            {
+              title: 'Test Place',
+              description: 'A test description',
+              lat: 10,
+              lon: 20,
+              osmId: '123',
+              osmType: 'node',
+            },
+          ];
+        }
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // Mock Router Service
+    class MockRouterService extends Service {
+      transitionTo(routeName, ...args) {
+        assert.step(`transitionTo: ${routeName} ${JSON.stringify(args)}`);
+      }
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    assert.dom('.search-input').exists();
+    assert.dom('.search-results-popover').doesNotExist();
+
+    // Type 'test'
+    await fillIn('.search-input', 'test');
+
+    // Wait for debounce and async search
+    await waitFor('.search-results-popover', { timeout: 2000 });
+
+    assert.dom('.search-result-item').exists({ count: 1 });
+    assert.dom('.result-title').hasText('Test Place');
+    assert.dom('.result-desc').hasText('A test description');
+
+    // Click result
+    await click('.search-result-item');
+
+    assert.verifySteps(['transitionTo: place ["osm:node:123"]']);
+    assert
+      .dom('.search-results-popover')
+      .doesNotExist('Popover closes after selection');
+  });
+
+  test('it handles submit for full search', async function (assert) {
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // 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, options) {
+        assert.step(`transitionTo: ${routeName} ${JSON.stringify(options)}`);
+      }
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    await fillIn('.search-input', 'berlin');
+    await click('.search-input'); // Focus
+    // Trigger submit event on the form
+    await this.element
+      .querySelector('form')
+      .dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+
+    assert.verifySteps([
+      'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"category":null,"lat":"52.5200","lon":"13.4050"}}',
+    ]);
+  });
+
+  test('it uses map center for biased search', 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 Photon Service
+    class MockPhotonService extends Service {
+      async search(query, lat, lon) {
+        assert.step(`search: ${query}, ${lat}, ${lon}`);
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    await fillIn('.search-input', 'cafe');
+
+    // Wait for debounce (300ms) + execution
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    await delay(400);
+
+    assert.verifySteps(['search: cafe, 52.52, 13.405']);
+  });
+
+  test('it allows typing even when controlled by parent with a query argument', async function (assert) {
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    this.query = '';
+    this.updateQuery = (val) => {
+      this.set('query', val);
+    };
+    this.noop = () => {};
+
+    await render(
+      <template>
+        <SearchBox
+          @query={{this.query}}
+          @onQueryChange={{this.updateQuery}}
+          @onToggleMenu={{this.noop}}
+        />
+      </template>
+    );
+
+    // Initial state
+    assert.dom('.search-input').hasValue('');
+
+    // Simulate typing
+    await fillIn('.search-input', 't');
+    assert.dom('.search-input').hasValue('t', 'Input should show "t"');
+
+    await fillIn('.search-input', 'te');
+    assert.dom('.search-input').hasValue('te', 'Input should show "te"');
+
+    // Simulate external update (e.g. chip click)
+    this.set('query', 'restaurant');
+    // wait for re-render
+    await click('.search-input'); // just to trigger a change cycle or ensure stability
+    assert
+      .dom('.search-input')
+      .hasValue('restaurant', 'Input should update from external change');
+  });
+
+  test('it triggers category search with current location when clicking category result', async function (assert) {
+    // Mock MapUi Service
+    class MockMapUiService extends Service {
+      currentCenter = { lat: 51.5074, lon: -0.1278 };
+      setSearchBoxFocus() {}
+    }
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // Mock Router Service
+    class MockRouterService extends Service {
+      transitionTo(routeName, options) {
+        assert.step(`transitionTo: ${routeName} ${JSON.stringify(options)}`);
+      }
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    // Type "Resta" to trigger "Restaurants" category match
+    await fillIn('.search-input', 'Resta');
+
+    // Wait for debounce (300ms) + execution
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    await delay(400);
+
+    // The first result should be the category match
+    assert.dom('.search-result-item').exists({ count: 1 });
+    assert.dom('.result-title').hasText('Restaurants');
+
+    // Click the result
+    await click('.search-result-item');
+
+    // 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"}}',
+    ]);
+  });
+});

tests/unit/routes/place-test.js

@@ -1,5 +1,6 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
 
 module('Unit | Route | place', function (hooks) {
   setupTest(hooks);
@@ -8,4 +9,176 @@ module('Unit | Route | place', function (hooks) {
     let route = this.owner.lookup('route:place');
     assert.ok(route);
   });
+
+  test('afterModel enriches model with missing geometry', async function (assert) {
+    let route = this.owner.lookup('route:place');
+
+    // Mock Services
+    let fetchCalled = false;
+    let selectPlaceCalled = false;
+
+    class OsmStub extends Service {
+      async fetchOsmObject(id, type) {
+        fetchCalled = true;
+        assert.strictEqual(id, '123', 'Correct ID passed');
+        assert.strictEqual(type, 'way', 'Correct Type passed');
+        return {
+          osmId: '123',
+          osmType: 'way',
+          geojson: { type: 'Polygon', coordinates: [] },
+          tags: { updated: 'true' },
+        };
+      }
+    }
+
+    class MapUiStub extends Service {
+      selectPlace() {
+        selectPlaceCalled = true;
+      }
+      stopSearch() {}
+    }
+
+    this.owner.register('service:osm', OsmStub);
+    this.owner.register('service:map-ui', MapUiStub);
+
+    // Initial partial model (from search)
+    let model = {
+      osmId: '123',
+      osmType: 'way',
+      title: 'Partial Place',
+      // No geojson
+    };
+
+    await route.afterModel(model);
+
+    assert.ok(fetchCalled, 'fetchOsmObject should be called');
+    assert.ok(selectPlaceCalled, 'selectPlace should be called');
+    assert.ok(model.geojson, 'Model should now have geojson');
+    assert.strictEqual(
+      model.tags.updated,
+      'true',
+      'Model should have updated tags'
+    );
+  });
+
+  test('afterModel skips fetch if geometry exists', async function (assert) {
+    let route = this.owner.lookup('route:place');
+
+    let fetchCalled = false;
+
+    class OsmStub extends Service {
+      async fetchOsmObject() {
+        fetchCalled = true;
+        return null;
+      }
+    }
+
+    class MapUiStub extends Service {
+      selectPlace() {}
+      stopSearch() {}
+    }
+
+    this.owner.register('service:osm', OsmStub);
+    this.owner.register('service:map-ui', MapUiStub);
+
+    let model = {
+      osmId: '456',
+      osmType: 'relation',
+      geojson: { type: 'MultiLineString' },
+    };
+
+    await route.afterModel(model);
+
+    assert.notOk(
+      fetchCalled,
+      'fetchOsmObject should NOT be called if geojson exists'
+    );
+  });
+
+  test('afterModel skips fetch for nodes even if geometry is missing', async function (assert) {
+    let route = this.owner.lookup('route:place');
+
+    let fetchCalled = false;
+
+    class OsmStub extends Service {
+      async fetchOsmObject() {
+        fetchCalled = true;
+        return null;
+      }
+    }
+
+    class MapUiStub extends Service {
+      selectPlace() {}
+      stopSearch() {}
+    }
+
+    this.owner.register('service:osm', OsmStub);
+    this.owner.register('service:map-ui', MapUiStub);
+
+    let model = {
+      osmId: '789',
+      osmType: 'node',
+      // No geojson, but it's a node
+    };
+
+    await route.afterModel(model);
+
+    assert.notOk(fetchCalled, 'fetchOsmObject should NOT be called for nodes');
+  });
+
+  test('setupController triggers checkUpdates', async function (assert) {
+    let route = this.owner.lookup('route:place');
+
+    // Stub Storage Service
+    let refreshPlaceCalled = false;
+    class StorageStub extends Service {
+      async refreshPlace(place) {
+        refreshPlaceCalled = true;
+        assert.strictEqual(place.id, '123', 'Passed correct place to storage');
+        return {
+          ...place,
+          title: 'Updated Title',
+        };
+      }
+    }
+
+    // Stub MapUi Service
+    let selectPlaceCalled = false;
+    class MapUiStub extends Service {
+      selectPlace(place, options) {
+        selectPlaceCalled = true;
+        assert.strictEqual(
+          place.title,
+          'Updated Title',
+          'Selected updated place'
+        );
+        assert.ok(options.preventZoom, 'Prevented zoom on update');
+      }
+      stopSearch() {}
+    }
+
+    this.owner.register('service:storage', StorageStub);
+    this.owner.register('service:map-ui', MapUiStub);
+
+    let model = {
+      id: '123',
+      osmId: '456',
+      osmType: 'node',
+      title: 'Original Title',
+    };
+
+    let controller = {};
+
+    // Trigger setupController
+    route.setupController(controller, model);
+
+    // checkUpdates is async and not awaited in setupController, so we need to wait a tick
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    assert.ok(refreshPlaceCalled, 'refreshPlace should be called');
+    assert.ok(
+      selectPlaceCalled,
+      'mapUi.selectPlace should be called with update'
+    );
+  });
 });

tests/unit/services/osm-test.js

@@ -0,0 +1,254 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+
+module('Unit | Service | osm', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    assert.ok(service);
+  });
+
+  test('normalizeOsmApiData handles nodes correctly', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 123,
+        type: 'node',
+        lat: 52.5,
+        lon: 13.4,
+        tags: { name: 'Test Node' },
+      },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 123, 'node');
+
+    assert.strictEqual(result.title, 'Test Node');
+    assert.strictEqual(result.lat, 52.5);
+    assert.strictEqual(result.lon, 13.4);
+    assert.strictEqual(result.osmId, '123');
+    assert.strictEqual(result.osmType, 'node');
+  });
+
+  test('normalizeOsmApiData calculates centroid for ways', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 456,
+        type: 'way',
+        nodes: [1, 2],
+        tags: { name: 'Test Way' },
+      },
+      { id: 1, type: 'node', lat: 10, lon: 10 },
+      { id: 2, type: 'node', lat: 20, lon: 20 },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 456, 'way');
+
+    assert.strictEqual(result.title, 'Test Way');
+    assert.strictEqual(result.lat, 15); // (10+20)/2
+    assert.strictEqual(result.lon, 15); // (10+20)/2
+    assert.strictEqual(result.osmId, '456');
+    assert.strictEqual(result.osmType, 'way');
+  });
+
+  test('normalizeOsmApiData prioritizes label node for relations', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 789,
+        type: 'relation',
+        members: [
+          { type: 'node', ref: 1, role: 'admin_centre' },
+          { type: 'node', ref: 2, role: 'label' },
+        ],
+        tags: { name: 'Test Relation' },
+      },
+      { id: 1, type: 'node', lat: 10, lon: 10, tags: { name: 'Admin Centre' } },
+      { id: 2, type: 'node', lat: 30, lon: 30, tags: { name: 'Label Node' } },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 789, 'relation');
+
+    assert.strictEqual(result.title, 'Label Node');
+    assert.strictEqual(result.lat, 30);
+    assert.strictEqual(result.lon, 30);
+    assert.strictEqual(result.osmId, '2');
+    assert.strictEqual(result.osmType, 'node');
+  });
+
+  test('normalizeOsmApiData falls back to admin_centre node for relations', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 789,
+        type: 'relation',
+        members: [{ type: 'node', ref: 1, role: 'admin_centre' }],
+        tags: { name: 'Test Relation' },
+      },
+      { id: 1, type: 'node', lat: 10, lon: 10, tags: { name: 'Admin Centre' } },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 789, 'relation');
+
+    assert.strictEqual(result.title, 'Admin Centre');
+    assert.strictEqual(result.lat, 10);
+    assert.strictEqual(result.lon, 10);
+    assert.strictEqual(result.osmId, '1');
+    assert.strictEqual(result.osmType, 'node');
+  });
+
+  test('normalizeOsmApiData calculates bbox for relations', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 789,
+        type: 'relation',
+        members: [
+          { type: 'node', ref: 1, role: 'label' },
+          { type: 'node', ref: 2, role: 'border' },
+          { type: 'node', ref: 3, role: 'border' },
+        ],
+        tags: { name: 'Test Relation' },
+      },
+      { id: 1, type: 'node', lat: 10, lon: 10, tags: { name: 'Label' } },
+      { id: 2, type: 'node', lat: 0, lon: 0 },
+      { id: 3, type: 'node', lat: 20, lon: 20 },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 789, 'relation');
+
+    // Should prioritize admin centre for ID/Title/Center
+    assert.strictEqual(result.title, 'Label');
+    assert.strictEqual(result.lat, 10);
+    assert.strictEqual(result.lon, 10);
+    assert.strictEqual(result.osmId, '1');
+    assert.strictEqual(result.osmType, 'node');
+
+    // BUT should calculate BBox from ALL members (0,0 to 20,20)
+    assert.ok(result.bbox, 'BBox should be present');
+    assert.strictEqual(result.bbox.minLat, 0);
+    assert.strictEqual(result.bbox.minLon, 0);
+    assert.strictEqual(result.bbox.maxLat, 20);
+    assert.strictEqual(result.bbox.maxLon, 20);
+  });
+
+  test('normalizeOsmApiData calculates centroid for relations with member ways', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    /*
+      Relation 999
+        -> Way 888
+           -> Node 1 (10, 10)
+           -> Node 2 (20, 20)
+    */
+    const elements = [
+      {
+        id: 999,
+        type: 'relation',
+        members: [{ type: 'way', ref: 888, role: 'outer' }],
+        tags: { name: 'Complex Relation' },
+      },
+      {
+        id: 888,
+        type: 'way',
+        nodes: [1, 2],
+      },
+      { id: 1, type: 'node', lat: 10, lon: 10 },
+      { id: 2, type: 'node', lat: 20, lon: 20 },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 999, 'relation');
+
+    assert.strictEqual(result.title, 'Complex Relation');
+    // It averages all nodes found. In this case, Node 1 and Node 2.
+    assert.strictEqual(result.lat, 15); // (10+20)/2
+    assert.strictEqual(result.lon, 15); // (10+20)/2
+    assert.strictEqual(result.osmId, '999');
+    assert.strictEqual(result.osmType, 'relation');
+  });
+
+  test('normalizeOsmApiData creates GeoJSON for ways', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    const elements = [
+      {
+        id: 456,
+        type: 'way',
+        nodes: [1, 2, 3],
+        tags: { name: 'Test Way' },
+      },
+      { id: 1, type: 'node', lat: 0, lon: 0 },
+      { id: 2, type: 'node', lat: 10, lon: 10 },
+      { id: 3, type: 'node', lat: 0, lon: 0 }, // Closed loop
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 456, 'way');
+
+    assert.ok(result.geojson, 'GeoJSON should be present');
+    assert.strictEqual(
+      result.geojson.type,
+      'Polygon',
+      'Closed way should be a Polygon'
+    );
+    assert.strictEqual(
+      result.geojson.coordinates[0].length,
+      3,
+      'Should have 3 coordinates'
+    );
+    assert.deepEqual(result.geojson.coordinates[0][0], [0, 0]);
+    assert.deepEqual(result.geojson.coordinates[0][1], [10, 10]);
+  });
+
+  test('normalizeOsmApiData creates GeoJSON MultiLineString for relations', function (assert) {
+    let service = this.owner.lookup('service:osm');
+    /*
+      Relation 999
+        -> Way 888 (0,0 -> 10,10)
+        -> Way 777 (20,20 -> 30,30)
+    */
+    const elements = [
+      {
+        id: 999,
+        type: 'relation',
+        members: [
+          { type: 'way', ref: 888, role: 'outer' },
+          { type: 'way', ref: 777, role: 'inner' },
+        ],
+        tags: { name: 'Complex Relation' },
+      },
+      {
+        id: 888,
+        type: 'way',
+        nodes: [1, 2],
+      },
+      {
+        id: 777,
+        type: 'way',
+        nodes: [3, 4],
+      },
+      { id: 1, type: 'node', lat: 0, lon: 0 },
+      { id: 2, type: 'node', lat: 10, lon: 10 },
+      { id: 3, type: 'node', lat: 20, lon: 20 },
+      { id: 4, type: 'node', lat: 30, lon: 30 },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 999, 'relation');
+
+    assert.ok(result.geojson, 'GeoJSON should be present');
+    assert.strictEqual(result.geojson.type, 'MultiLineString');
+    assert.strictEqual(
+      result.geojson.coordinates.length,
+      2,
+      'Should have 2 segments'
+    );
+    // Check first segment (Way 888)
+    assert.deepEqual(result.geojson.coordinates[0], [
+      [0, 0],
+      [10, 10],
+    ]);
+    // Check second segment (Way 777)
+    assert.deepEqual(result.geojson.coordinates[1], [
+      [20, 20],
+      [30, 30],
+    ]);
+  });
+});

tests/unit/services/photon-test.js

@@ -0,0 +1,137 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+
+module('Unit | Service | photon', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let service = this.owner.lookup('service:photon');
+    assert.ok(service);
+  });
+
+  test('search truncates coordinates to 4 decimal places', async function (assert) {
+    let service = this.owner.lookup('service:photon');
+    const originalFetch = window.fetch;
+
+    let capturedUrl;
+    window.fetch = async (url) => {
+      capturedUrl = url;
+      return {
+        ok: true,
+        json: async () => ({ features: [] }),
+      };
+    };
+
+    try {
+      await service.search('Test', 52.123456, 13.987654);
+      assert.ok(
+        capturedUrl.includes('lat=52.1235'),
+        'lat is rounded to 4 decimals'
+      );
+      assert.ok(
+        capturedUrl.includes('lon=13.9877'),
+        'lon is rounded to 4 decimals'
+      );
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  test('search handles successful response', async function (assert) {
+    let service = this.owner.lookup('service:photon');
+
+    // Mock fetch
+    const originalFetch = window.fetch;
+    window.fetch = async () => {
+      return {
+        ok: true,
+        json: async () => ({
+          features: [
+            {
+              properties: {
+                name: 'Test Place',
+                osm_id: 123,
+                osm_type: 'N',
+                city: 'Test City',
+                country: 'Test Country',
+              },
+              geometry: {
+                coordinates: [13.4, 52.5], // lon, lat
+              },
+            },
+          ],
+        }),
+      };
+    };
+
+    try {
+      const results = await service.search('Test', 52.5, 13.4);
+      assert.strictEqual(results.length, 1);
+      assert.strictEqual(results[0].title, 'Test Place');
+      assert.strictEqual(results[0].lat, 52.5);
+      assert.strictEqual(results[0].lon, 13.4);
+      assert.strictEqual(results[0].description, 'Test City, Test Country');
+      assert.strictEqual(results[0].osmType, 'node', 'Normalizes N to node');
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  test('search handles empty response', async function (assert) {
+    let service = this.owner.lookup('service:photon');
+
+    // Mock fetch
+    const originalFetch = window.fetch;
+    window.fetch = async () => {
+      return {
+        ok: true,
+        json: async () => ({ features: [] }),
+      };
+    };
+
+    try {
+      const results = await service.search('Nonexistent', 52.5, 13.4);
+      assert.strictEqual(results.length, 0);
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  test('normalizeFeature handles missing properties', function (assert) {
+    let service = this.owner.lookup('service:photon');
+
+    const feature = {
+      properties: {
+        street: 'Main St',
+        housenumber: '123',
+        city: 'Metropolis',
+      },
+      geometry: {
+        coordinates: [10, 20],
+      },
+    };
+
+    const result = service.normalizeFeature(feature);
+    assert.strictEqual(result.title, 'Main St 123, Metropolis'); // Fallback to address description
+    assert.strictEqual(result.lat, 20);
+    assert.strictEqual(result.lon, 10);
+  });
+
+  test('normalizeFeature normalizes OSM types correctly', function (assert) {
+    let service = this.owner.lookup('service:photon');
+
+    const checkType = (input, expected) => {
+      const feature = {
+        properties: { osm_type: input, name: 'Test' },
+        geometry: { coordinates: [0, 0] },
+      };
+      const result = service.normalizeFeature(feature);
+      assert.strictEqual(result.osmType, expected, `${input} -> ${expected}`);
+    };
+
+    checkType('N', 'node');
+    checkType('W', 'way');
+    checkType('R', 'relation');
+    checkType('unknown', 'unknown'); // Fallback
+  });
+});

tests/unit/services/storage-test.js

@@ -0,0 +1,202 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+
+module('Unit | Service | storage', function (hooks) {
+  setupTest(hooks);
+
+  test('refreshPlace skips invalid places', async function (assert) {
+    let service = this.owner.lookup('service:storage');
+    let result = await service.refreshPlace({});
+    assert.strictEqual(result, null);
+  });
+
+  test('refreshPlace detects coordinate drift', async function (assert) {
+    let service = this.owner.lookup('service:storage');
+
+    // Stub OSM Service
+    class OsmStub extends Service {
+      async fetchOsmObject(id, type) {
+        return {
+          osmId: id,
+          osmType: type,
+          lat: 52.5201, // Changed significantly from 52.5200
+          lon: 13.405,
+          osmTags: { name: 'Foo' },
+        };
+      }
+    }
+    this.owner.register('service:osm', OsmStub);
+
+    // Mock storage update
+    let updatePlaceCalled = false;
+    service.updatePlace = async (place) => {
+      updatePlaceCalled = true;
+      return place;
+    };
+
+    let place = {
+      id: '123',
+      osmId: '456',
+      osmType: 'node',
+      lat: 52.52,
+      lon: 13.405,
+      osmTags: { name: 'Foo' },
+      title: 'Foo',
+    };
+
+    let result = await service.refreshPlace(place);
+
+    assert.ok(updatePlaceCalled, 'updatePlace should be called');
+    assert.strictEqual(result.lat, 52.5201, 'Latitude updated');
+  });
+
+  test('refreshPlace ignores tiny coordinate drift', async function (assert) {
+    let service = this.owner.lookup('service:storage');
+
+    class OsmStub extends Service {
+      async fetchOsmObject(id, type) {
+        return {
+          osmId: id,
+          osmType: type,
+          lat: 52.5200005, // Tiny change (< 0.00001)
+          lon: 13.405,
+          osmTags: { name: 'Foo' },
+        };
+      }
+    }
+    this.owner.register('service:osm', OsmStub);
+
+    let updatePlaceCalled = false;
+    service.updatePlace = async () => {
+      updatePlaceCalled = true;
+    };
+
+    let place = {
+      id: '123',
+      osmId: '456',
+      osmType: 'node',
+      lat: 52.52,
+      lon: 13.405,
+      osmTags: { name: 'Foo' },
+      title: 'Foo',
+    };
+
+    await service.refreshPlace(place);
+
+    assert.notOk(updatePlaceCalled, 'updatePlace should NOT be called');
+  });
+
+  test('refreshPlace detects tag changes', async function (assert) {
+    let service = this.owner.lookup('service:storage');
+
+    class OsmStub extends Service {
+      async fetchOsmObject(id, type) {
+        return {
+          osmId: id,
+          osmType: type,
+          lat: 52.52,
+          lon: 13.405,
+          osmTags: { name: 'Bar' }, // Changed name
+        };
+      }
+    }
+    this.owner.register('service:osm', OsmStub);
+
+    let updatePlaceCalled = false;
+    service.updatePlace = async (place) => {
+      updatePlaceCalled = true;
+      return place;
+    };
+
+    let place = {
+      id: '123',
+      osmId: '456',
+      osmType: 'node',
+      lat: 52.52,
+      lon: 13.405,
+      osmTags: { name: 'Foo' },
+      title: 'Foo',
+    };
+
+    let result = await service.refreshPlace(place);
+
+    assert.ok(updatePlaceCalled, 'updatePlace should be called');
+    assert.strictEqual(result.osmTags.name, 'Bar', 'Tags updated');
+  });
+
+  test('refreshPlace updates title if it was default', async function (assert) {
+    let service = this.owner.lookup('service:storage');
+
+    class OsmStub extends Service {
+      async fetchOsmObject(id, type) {
+        return {
+          osmId: id,
+          osmType: type,
+          lat: 52.52,
+          lon: 13.405,
+          osmTags: { name: 'New Name' },
+        };
+      }
+    }
+    this.owner.register('service:osm', OsmStub);
+
+    service.updatePlace = async (place) => place;
+
+    let place = {
+      id: '123',
+      osmId: '456',
+      osmType: 'node',
+      lat: 52.52,
+      lon: 13.405,
+      osmTags: { name: 'Old Name' },
+      title: 'Old Name', // Matches default
+    };
+
+    let result = await service.refreshPlace(place);
+
+    assert.strictEqual(result.title, 'New Name', 'Title should update');
+  });
+
+  test('refreshPlace preserves custom title', async function (assert) {
+    let service = this.owner.lookup('service:storage');
+
+    class OsmStub extends Service {
+      async fetchOsmObject(id, type) {
+        return {
+          osmId: id,
+          osmType: type,
+          lat: 52.52,
+          lon: 13.405,
+          osmTags: { name: 'New Name' },
+        };
+      }
+    }
+    this.owner.register('service:osm', OsmStub);
+
+    service.updatePlace = async (place) => place;
+
+    let place = {
+      id: '123',
+      osmId: '456',
+      osmType: 'node',
+      lat: 52.52,
+      lon: 13.405,
+      osmTags: { name: 'Old Name' },
+      title: 'My Custom Place', // User renamed it
+    };
+
+    let result = await service.refreshPlace(place);
+
+    assert.strictEqual(
+      result.title,
+      'My Custom Place',
+      'Title should NOT update'
+    );
+    assert.strictEqual(
+      result.osmTags.name,
+      'New Name',
+      'Tags should still update'
+    );
+  });
+});

tests/unit/utils/osm-test.js

@@ -0,0 +1,104 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+import { getLocalizedName, getPlaceType } from 'marco/utils/osm';
+
+module('Unit | Utility | osm', function (hooks) {
+  setupTest(hooks);
+
+  test('getLocalizedName returns default name if tags are missing', function (assert) {
+    const result = getLocalizedName(null);
+    assert.strictEqual(result, 'Untitled Place');
+  });
+
+  test('getLocalizedName returns name tag', function (assert) {
+    const tags = { name: 'Foo' };
+    const result = getLocalizedName(tags);
+    assert.strictEqual(result, 'Foo');
+  });
+
+  test('getLocalizedName falls back to name:en if name is missing', function (assert) {
+    const tags = { 'name:en': 'English Name' };
+    const result = getLocalizedName(tags);
+    assert.strictEqual(result, 'English Name');
+  });
+
+  test('getLocalizedName returns local name (name tag) if no preferred language match found', function (assert) {
+    // Assuming the test environment doesn't have 'fr' as a preferred language
+    const tags = { name: 'Local Name', 'name:fr': 'French Name' };
+    // Temporarily mock navigator to ensure no match
+    const originalLanguages = navigator.languages;
+    const originalLanguage = navigator.language;
+    Object.defineProperty(navigator, 'languages', {
+      value: ['es'],
+      configurable: true,
+    });
+    Object.defineProperty(navigator, 'language', {
+      value: 'es',
+      configurable: true,
+    });
+
+    try {
+      const result = getLocalizedName(tags);
+      assert.strictEqual(result, 'Local Name');
+    } finally {
+      // Restore
+      Object.defineProperty(navigator, 'languages', {
+        value: originalLanguages,
+        configurable: true,
+      });
+      Object.defineProperty(navigator, 'language', {
+        value: originalLanguage,
+        configurable: true,
+      });
+    }
+  });
+
+  test('getLocalizedName matches user preferred language', function (assert) {
+    const tags = {
+      name: 'Standard Name',
+      'name:de': 'Deutscher Name',
+      'name:fr': 'Nom Français',
+    };
+
+    const originalLanguages = navigator.languages;
+    Object.defineProperty(navigator, 'languages', {
+      value: ['de', 'en'],
+      configurable: true,
+    });
+
+    try {
+      const result = getLocalizedName(tags);
+      assert.strictEqual(result, 'Deutscher Name');
+    } finally {
+      Object.defineProperty(navigator, 'languages', {
+        value: originalLanguages,
+        configurable: true,
+      });
+    }
+  });
+
+  test('getPlaceType returns value for normal tags', function (assert) {
+    const tags = { amenity: 'restaurant' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, 'Restaurant');
+  });
+
+  test('getPlaceType returns key name if value is "yes"', function (assert) {
+    const tags = { building: 'yes' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, 'Building');
+  });
+
+  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' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, 'Supermarket');
+  });
+
+  test('getPlaceType returns null if no known type found', function (assert) {
+    const tags = { foo: 'bar' };
+    const result = getPlaceType(tags);
+    assert.strictEqual(result, null);
+  });
+});

tests/unit/utils/place-mapping-test.js

@@ -0,0 +1,58 @@
+import { mapToStorageSchema } from 'marco/utils/place-mapping';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | place-mapping', function () {
+  test('it maps a raw place object to the storage schema', function (assert) {
+    const rawPlace = {
+      osmId: 12345,
+      osmType: 'node',
+      lat: 52.52,
+      lon: 13.405,
+      osmTags: {
+        name: 'Test Place',
+        website: 'https://example.com',
+      },
+      description: 'A test description',
+    };
+
+    const result = mapToStorageSchema(rawPlace);
+
+    assert.strictEqual(result.title, 'Test Place');
+    assert.strictEqual(result.lat, 52.52);
+    assert.strictEqual(result.lon, 13.405);
+    assert.strictEqual(result.osmId, '12345');
+    assert.strictEqual(result.osmType, 'node');
+    assert.strictEqual(result.url, 'https://example.com');
+    assert.strictEqual(result.description, 'A test description');
+    assert.deepEqual(result.osmTags, rawPlace.osmTags);
+    assert.deepEqual(result.tags, []);
+  });
+
+  test('it prioritizes place.title over osmTags.name', function (assert) {
+    const rawPlace = {
+      osmId: 123,
+      lat: 0,
+      lon: 0,
+      title: 'Custom Title',
+      osmTags: {
+        name: 'OSM Name',
+      },
+    };
+
+    const result = mapToStorageSchema(rawPlace);
+    assert.strictEqual(result.title, 'Custom Title');
+  });
+
+  test('it handles fallback title correctly when no name is present', function (assert) {
+    const rawPlace = {
+      id: 987,
+      lat: 10,
+      lon: 20,
+      osmTags: {},
+    };
+
+    const result = mapToStorageSchema(rawPlace);
+    assert.strictEqual(result.title, 'Untitled Place');
+    assert.strictEqual(result.osmId, '987');
+  });
+});

tests/unit/utils/social-links-test.js

@@ -0,0 +1,66 @@
+import { getSocialInfo } from 'marco/utils/social-links';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | social-links', function () {
+  test('it returns null if tags are missing', function (assert) {
+    let result = getSocialInfo({}, 'facebook');
+    assert.strictEqual(result, null);
+  });
+
+  test('it returns null if specific platform tags are missing', function (assert) {
+    let result = getSocialInfo({ twitter: 'foo' }, 'facebook');
+    assert.strictEqual(result, null);
+  });
+
+  test('it handles simple usernames', function (assert) {
+    let result = getSocialInfo({ facebook: 'foo' }, 'facebook');
+    assert.deepEqual(result, {
+      url: 'https://facebook.com/foo',
+      username: 'foo',
+    });
+
+    result = getSocialInfo({ 'contact:instagram': '@bar' }, 'instagram');
+    assert.deepEqual(result, {
+      url: 'https://instagram.com/bar',
+      username: 'bar',
+    });
+  });
+
+  test('it handles full URLs', function (assert) {
+    let result = getSocialInfo(
+      { facebook: 'https://www.facebook.com/foo' },
+      'facebook'
+    );
+    assert.deepEqual(result, {
+      url: 'https://www.facebook.com/foo',
+      username: 'foo',
+    });
+  });
+
+  test('it handles Facebook profile.php URLs', function (assert) {
+    let result = getSocialInfo(
+      { facebook: 'https://www.facebook.com/profile.php?id=12345' },
+      'facebook'
+    );
+    assert.deepEqual(result, {
+      url: 'https://www.facebook.com/profile.php?id=12345',
+      username: '12345',
+    });
+  });
+
+  test('it falls back gracefully for malformed URLs', function (assert) {
+    let result = getSocialInfo({ facebook: 'http://' }, 'facebook');
+    assert.deepEqual(result, {
+      url: 'http://',
+      username: 'http://',
+    });
+  });
+
+  test('it prioritizes contact:tag over tag', function (assert) {
+    let result = getSocialInfo(
+      { 'contact:facebook': 'priority', facebook: 'fallback' },
+      'facebook'
+    );
+    assert.strictEqual(result.username, 'priority');
+  });
+});

vite.config.mjs

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