1.7.0

Hide settings pane on outside click, render above places pane
Add setting for Overpass API provider
2026-01-24 21:07:40 +07:00 · 2026-01-24 21:06:50 +07:00 · 2026-01-24 20:47:55 +07:00 · 2026-01-24 20:47:42 +07:00 · 2026-01-24 18:00:47 +07:00 · 2026-01-24 18:00:23 +07:00
31 changed files with 1637 additions and 283 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,7 @@

 # compiled output
 /dist/
+/release/

 # misc
 /coverage/
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -3,3 +3,4 @@

 # compiled output
 /dist/
+/release/
--- a/.template-lintrc.mjs
+++ b/.template-lintrc.mjs
@@ -1,3 +1,6 @@
 export default {
  extends: 'recommended',
+  rules: {
+    'link-rel-noopener': 'off',
+  },
 };
--- a/PROJECT_STATUS.md
+++ b/PROJECT_STATUS.md
@@ -1,6 +1,6 @@
 # Project Status: Marco

-**Last Updated:** Mon Jan 19 2026
+**Last Updated:** Sat Jan 24 2026

 ## Project Context

@@ -19,12 +19,18 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 - **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:** Disabled browser tap highlights (`-webkit-tap-highlight-color: transparent`) to prevent blue flashing on Android.
+- **Mobile UX:**
+  - Disabled browser tap highlights (`-webkit-tap-highlight-color: transparent`) to prevent blue flashing on Android.
+  - 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.
 - **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`).

 ### 2. RemoteStorage Module (`@remotestorage/module-places`)

@@ -46,7 +52,14 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
  - `osm.js`: Fetches nearby POIs from Overpass API.
    - **Reliability:** Implemented `fetchWithRetry` to handle HTTP 504/502/503 timeouts and 429 rate limits, in addition to network errors.
 - **UI Components:**
-  - `places-sidebar.gjs`: Displays a list of nearby POIs. Allows selecting a place to view details and saving it as a bookmark. Links to the OSM website via the node ID.
+  - `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.
+    - **Mobile:** Renders as a 2/3 height bottom sheet on mobile.
 - **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.
@@ -54,6 +67,7 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 ### 4. Routing & Data Optimization

 - **Explicit URLs:** Implemented routing support for 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.
 - **Performance:** Optimized navigation to prevent redundant network requests. Clicking a map pin passes the existing data object to the route, skipping the `model` hook (no re-fetch) while maintaining correct deep-linkable URLs via a custom `serialize` hook in `PlaceRoute`.

@@ -63,26 +77,24 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 - **Workflow:**
  1.  User pans map -> `moveend` triggers `storage.loadPlacesInBounds`.
  2.  User clicks map -> "Pulse" animation -> hybrid hit detection (Visual Tile vs Overpass).
-  3.  **Navigation:** Selected place is passed to the route (`transitionTo` with model), updating the URL to `/place/<id>` or `/place/osm:<type>:<id>` without re-fetching data.
-  4.  Sidebar displays details (using normalized `osmTags`).
+  3.  **Navigation:** Selected place is checked against bookmarks; if found, it uses the Bookmark object. Otherwise, it uses the OSM object.
+  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.

 ## Files Currently in Focus

- `app/routes/place.js`: Routing logic, ID parsing, and URL serialization.
- `app/services/osm.js`: Data fetching and normalization.
- `app/components/map.gjs`: Map rendering and interaction.
- `app/services/storage.js`: Data sync logic.
+- `app/styles/app.css`: Responsive sidebar styles and mobile optimizations.
+- `app/components/place-details.gjs`: Place display and editing logic.
+- `app/services/storage.js`: Data sync and update logic.

 ## Next Steps & Pending Tasks

-1.  **App Header:** Implement a transparent header bar with the App Logo (left) and Login/User Info (right).
-2.  **Persist View:** Store the current map center and zoom level in `localStorage` to restore the view upon re-opening the app.
-3.  **Edit Bookmarks:** Allow users to edit the title and description of saved places.
-4.  **Refine UI/UX:** Further polish sidebar interactions and mobile responsiveness.
-5.  **Performance:** Monitor performance with large datasets (thousands of bookmarks).
-6.  **Testing:** Add automated tests for the geohash coverage and retry logic.
+1.  **Collections/Lists:** Implement ability to organize bookmarks into lists/collections.
+2.  **Linting & Code Quality:** Fix remaining CSS errors, remove inline styles in `map.gjs`, and address unused variables/runloop usage.
+3.  **Performance:** Monitor performance with large datasets (thousands of bookmarks).
+4.  **Testing:** Add automated tests for the geohash coverage, retry logic, and new editing features.

 ## Technical Constraints

--- a/app/components/app-header.gjs
+++ b/app/components/app-header.gjs
@@ -0,0 +1,64 @@
+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 Icon from '#components/icon';
+import UserMenu from '#components/user-menu';
+
+export default class AppHeaderComponent extends Component {
+  @service storage;
+  @tracked isUserMenuOpen = false;
+
+  @action
+  toggleUserMenu() {
+    this.isUserMenuOpen = !this.isUserMenuOpen;
+  }
+
+  @action
+  closeUserMenu() {
+    this.isUserMenuOpen = false;
+  }
+
+  <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>
+      </div>
+
+      <div class="header-right">
+        <div class="user-menu-container">
+          <button
+            class="user-btn"
+            type="button"
+            aria-label="User Menu"
+            {{on "click" this.toggleUserMenu}}
+          >
+            <div class="user-avatar-placeholder">
+              <Icon @name="user" @size={{20}} @color="white" />
+            </div>
+          </button>
+
+          {{#if this.isUserMenuOpen}}
+            <UserMenu
+              @storage={{this.storage}}
+              @onClose={{this.closeUserMenu}}
+            />
+            <div
+              class="menu-backdrop"
+              {{on "click" this.closeUserMenu}}
+              role="button"
+            ></div>
+          {{/if}}
+        </div>
+      </div>
+    </header>
+  </template>
+}
--- a/app/components/icon.gjs
+++ b/app/components/icon.gjs
@@ -0,0 +1,74 @@
+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 server from 'feather-icons/dist/icons/server.svg?raw';
+import settings from 'feather-icons/dist/icons/settings.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,
+  server,
+  settings,
+  user,
+  x,
+  zap,
+};
+
+export default class IconComponent extends Component {
+  get svg() {
+    return ICONS[this.args.name];
+  }
+
+  get size() {
+    return this.args.size || 16;
+  }
+
+  get color() {
+    return this.args.color || '#898989';
+  }
+
+  get style() {
+    return `width:${this.size}px;height:${this.size}px;color:${this.color}`;
+  }
+
+  get title() {
+    return this.args.title || '';
+  }
+
+  <template>
+    {{#if this.svg}}
+      <span class="icon" style={{this.style}} title={{this.title}}>
+        {{htmlSafe this.svg}}
+      </span>
+    {{/if}}
+  </template>
+}
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -20,11 +20,14 @@ import { getDistance } from '../utils/geo';
 export default class MapComponent extends Component {
  @service osm;
  @service storage;
+  @service mapUi;

  mapInstance;
  bookmarkSource;
  searchOverlay;
  searchOverlayElement;
+  selectedPinOverlay;
+  selectedPinElement;

  setupMap = modifier((element) => {
    if (this.mapInstance) return;
@@ -57,7 +60,6 @@ export default class MapComponent extends Component {
      zIndex: 10, // Ensure it sits above the map tiles
    });

-
    // Default view settings
    let center = [99.05738, 7.55087];
    let zoom = 13.0;
@@ -91,7 +93,11 @@ export default class MapComponent extends Component {
      target: element,
      layers: [openfreemap, bookmarkLayer],
      view: view,
-      controls: defaultControls({ zoom: false, rotate: true, attribution: true }),
+      controls: defaultControls({
+        zoom: false,
+        rotate: true,
+        attribution: true,
+      }),
    });

    apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty');
@@ -105,6 +111,34 @@ export default class MapComponent extends Component {
    });
    this.mapInstance.addOverlay(this.searchOverlay);

+    // Selected Pin Overlay (Red Marker)
+    // We create the element in the template (or JS) and attach it.
+    // Using JS creation to ensure it's cleanly managed by OpenLayers
+    this.selectedPinElement = document.createElement('div');
+    this.selectedPinElement.className = 'selected-pin-container';
+
+    // Create the icon structure inside
+    const pinIcon = document.createElement('div');
+    pinIcon.className = 'selected-pin';
+    // We can't use the Glimmer <Icon> component easily inside a raw DOM element created here.
+    // So we'll inject the SVG string directly or mount it.
+    // Feather icons are globally available if we used the script, but we are using the module approach.
+    // Simple SVG for Map Pin:
+    pinIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" 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"></path><circle cx="12" cy="10" r="3" style="fill: #b31412; stroke: none;"></circle></svg>`;
+
+    const pinShadow = document.createElement('div');
+    pinShadow.className = 'selected-pin-shadow';
+
+    this.selectedPinElement.appendChild(pinIcon);
+    this.selectedPinElement.appendChild(pinShadow);
+
+    this.selectedPinOverlay = new Overlay({
+      element: this.selectedPinElement,
+      positioning: 'bottom-center', // Important: Pin tip is at the bottom
+      stopEvent: false, // Let clicks pass through
+    });
+    this.mapInstance.addOverlay(this.selectedPinOverlay);
+
    // Geolocation Pulse Overlay
    this.locationOverlayElement = document.createElement('div');
    this.locationOverlayElement.className = 'search-pulse blue';
@@ -178,7 +212,9 @@ export default class MapComponent extends Component {
          geolocation.un('change:position', zoomToLocation);
          locateListenerKey = null;
        }
-      } catch (e) { /* ignore */ }
+      } catch {
+        /* ignore */
+      }

      // Hide pulse
      if (this.locationOverlayElement) {
@@ -229,7 +265,8 @@ export default class MapComponent extends Component {
      else if (accuracy) {
        const viewportWidthMeters = 6.325 * accuracy;
        const minDimensionPixels = Math.min(size[0], size[1]);
-        const requiredResolutionMeters = viewportWidthMeters / minDimensionPixels;
+        const requiredResolutionMeters =
+          viewportWidthMeters / minDimensionPixels;
        const metersPerMapUnit = getPointResolution(
          view.getProjection(),
          1,
@@ -312,10 +349,129 @@ export default class MapComponent extends Component {
    // });
  });

+  // Track the selected place from the UI Service (Router -> Map)
+  updateSelectedPin = modifier(() => {
+    const selected = this.mapUi.selectedPlace;
+
+    if (!this.selectedPinOverlay || !this.selectedPinElement) return;
+
+    if (selected && selected.lat && selected.lon) {
+      const coords = fromLonLat([selected.lon, selected.lat]);
+      this.selectedPinOverlay.setPosition(coords);
+
+      // Reset animation by removing/adding class
+      this.selectedPinElement.classList.remove('active');
+      // Force reflow
+      void this.selectedPinElement.offsetWidth;
+      this.selectedPinElement.classList.add('active');
+
+      this.handlePinVisibility(coords);
+    } else {
+      this.selectedPinElement.classList.remove('active');
+      // Hide it effectively by moving it away or just relying on display:none in CSS
+      this.selectedPinOverlay.setPosition(undefined);
+    }
+  });
+
+  handlePinVisibility(coords) {
+    if (!this.mapInstance) return;
+
+    const pixel = this.mapInstance.getPixelFromCoordinate(coords);
+    const size = this.mapInstance.getSize();
+
+    // Check if off-screen (not rendered or outside bounds)
+    const isOffScreen =
+      !pixel ||
+      pixel[0] < 0 ||
+      pixel[0] > size[0] ||
+      pixel[1] < 0 ||
+      pixel[1] > size[1];
+
+    if (isOffScreen) {
+      this.animateToSmartCenter(coords);
+    } else {
+      this.panIfObscured(coords);
+    }
+  }
+
+  animateToSmartCenter(coords) {
+    if (!this.mapInstance) return;
+
+    const size = this.mapInstance.getSize();
+    const view = this.mapInstance.getView();
+    const resolution = view.getResolution();
+    let targetCenter = coords;
+
+    // Check if mobile (width <= 768px matches CSS)
+    if (size[0] <= 768) {
+      // On mobile, the bottom 50% is covered by the sheet.
+      // We want the pin to be in the center of the TOP 50% (visible area).
+      // That means the pin should be at y = height * 0.25 (25% down from top).
+      // The map center is at y = height * 0.50.
+      // So the pin is "above" the center by 25% of the height in pixels.
+      // To put the pin there, the map center needs to be "below" the pin by that amount.
+
+      const height = size[1];
+      const offsetPixels = height * 0.25; // Distance from desired pin pos to map center
+      const offsetMapUnits = offsetPixels * resolution;
+
+      // Shift center SOUTH (decrease Y)
+      // Note: In Web Mercator (EPSG:3857), Y increases North.
+      // So to look "lower", we decrease Y? No wait.
+      // If we move the camera South (decrease Y), the features move North (Up) on screen.
+      // We want the Pin (fixed lat/lon) to be Higher up on screen.
+      // So we must move the Camera South (Lower Y).
+      targetCenter = [coords[0], coords[1] - offsetMapUnits];
+    }
+
+    view.animate({
+      center: targetCenter,
+      duration: 1000,
+      easing: (t) => t * (2 - t), // Ease-out
+    });
+  }
+
+  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];
+
+    // Sidebar covers the bottom 50%
+    const splitPoint = height / 2;
+
+    // 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;
+
+      const view = this.mapInstance.getView();
+      const center = view.getCenter();
+      const resolution = view.getResolution();
+
+      // 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];
+
+      view.animate({
+        center: newCenter,
+        duration: 500,
+        easing: (t) => t * (2 - t), // Ease-out
+      });
+    }
+  }
+
  // Re-fetch bookmarks when the version changes (triggered by parent action or service)
  updateBookmarks = modifier(() => {
-    // Depend on the tracked storage.savedPlaces to automatically update when they change
-    const places = this.storage.savedPlaces;
+    // Depend on the tracked storage.placesInView to automatically update when they change
+    const places = this.storage.placesInView;
    this.loadBookmarks(places);
  });

@@ -325,13 +481,13 @@ export default class MapComponent extends Component {

      if (!places || places.length === 0) {
        // Fallback or explicit check if we have tracked property usage?
-        // The service updates 'savedPlaces'. We should probably use that if we want reactiveness.
-        places = this.storage.savedPlaces;
+        // The service updates 'placesInView'. We should probably use that if we want reactiveness.
+        places = this.storage.placesInView;
      }

      // Previously: const places = await this.storage.places.getPlaces();
      // We no longer want to fetch everything blindly.
-      // We rely on 'savedPlaces' being updated by handleMapMove calling storage.loadPlacesInBounds.
+      // We rely on 'placesInView' being updated by handleMapMove calling storage.loadPlacesInBounds.

      this.bookmarkSource.clear();

@@ -364,7 +520,7 @@ export default class MapComponent extends Component {

    const bbox = { minLat, minLon, maxLat, maxLon };
    await this.storage.loadPlacesInBounds(bbox);
-    this.loadBookmarks(this.storage.savedPlaces);
+    this.loadBookmarks(this.storage.placesInView);

    // Persist view to localStorage
    try {
@@ -374,7 +530,7 @@ export default class MapComponent extends Component {

      const viewState = {
        center: currentCenter,
-        zoom: currentZoom
+        zoom: currentZoom,
      };

      localStorage.setItem('marco:map-view', JSON.stringify(viewState));
@@ -393,6 +549,10 @@ export default class MapComponent extends Component {
    let selectedFeatureType = null;

    if (features && features.length > 0) {
+      console.debug(`Found ${features.length} features in map layer:`);
+      for (const f of features) {
+        console.debug(f);
+      }
      const bookmarkFeature = features.find((f) => f.get('isBookmark'));
      if (bookmarkFeature) {
        clickedBookmark = bookmarkFeature.get('originalPlace');
@@ -532,7 +692,7 @@ export default class MapComponent extends Component {
      class="map-container"
      {{this.setupMap}}
      {{this.updateBookmarks}}
-      style="position: absolute; inset: 0;"
+      {{this.updateSelectedPin}}
    ></div>
  </template>
 }
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -2,8 +2,21 @@ import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import capitalize from '../helpers/capitalize';
+import Icon from '../components/icon';
+
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';

 export default class PlaceDetails extends Component {
+  @tracked isEditing = false;
+  @tracked editTitle = '';
+  @tracked editDescription = '';
+
+  constructor() {
+    super(...arguments);
+    this.resetEditFields();
+  }
+
  get place() {
    return this.args.place || {};
  }
@@ -21,6 +34,47 @@ export default class PlaceDetails extends Component {
    );
  }

+  @action
+  resetEditFields() {
+    this.editTitle = this.name;
+    this.editDescription = this.place.description || '';
+  }
+
+  @action
+  startEditing() {
+    if (!this.place.createdAt) return; // Only allow editing saved places
+    this.resetEditFields();
+    this.isEditing = true;
+  }
+
+  @action
+  cancelEditing() {
+    this.isEditing = false;
+  }
+
+  @action
+  async saveChanges(event) {
+    event.preventDefault();
+    if (this.args.onSave) {
+      await this.args.onSave({
+        ...this.place,
+        title: this.editTitle,
+        description: this.editDescription,
+      });
+    }
+    this.isEditing = false;
+  }
+
+  @action
+  updateTitle(e) {
+    this.editTitle = e.target.value;
+  }
+
+  @action
+  updateDescription(e) {
+    this.editDescription = e.target.value;
+  }
+
  get type() {
    return (
      this.tags.amenity ||
@@ -66,6 +120,11 @@ export default class PlaceDetails extends Component {
    return this.place.url || this.tags.website || this.tags['contact:website'];
  }

+  get websiteDomain() {
+    const url = new URL(this.website);
+    return url.hostname;
+  }
+
  get openingHours() {
    return this.tags.opening_hours;
  }
@@ -73,10 +132,10 @@ export default class PlaceDetails extends Component {
  get cuisine() {
    if (!this.tags.cuisine) return null;
    return this.tags.cuisine
-               .split(';')
-               .map(c => capitalize.compute([c]))
-               .map(c => c.replace('_', ' '))
-               .join(', ');
+      .split(';')
+      .map((c) => capitalize.compute([c]))
+      .map((c) => c.replace('_', ' '))
+      .join(', ');
  }

  get wikipedia() {
@@ -105,81 +164,165 @@ export default class PlaceDetails extends Component {
    return `https://www.openstreetmap.org/${type}/${id}`;
  }

+  get gmapsUrl() {
+    return `https://www.google.com/maps/search/?api=1&query=${this.name}&query=${this.place.lat},${this.place.lon}`;
+  }
+
  <template>
    <div class="place-details">
-      <h3>{{this.name}}</h3>
-      <p class="place-type">
-        {{this.type}}
-      </p>
-      {{#if this.place.description}}
-        <p class="place-description">
-            {{this.place.description}}
+      {{#if this.isEditing}}
+        <form class="edit-form" {{on "submit" this.saveChanges}}>
+          <div class="form-group">
+            <label for="edit-title">Title</label>
+            <input
+              id="edit-title"
+              type="text"
+              value={{this.editTitle}}
+              {{on "input" this.updateTitle}}
+              class="form-control"
+            />
+          </div>
+          <div class="form-group">
+            <label for="edit-desc">Description</label>
+            <textarea
+              id="edit-desc"
+              value={{this.editDescription}}
+              {{on "input" this.updateDescription}}
+              class="form-control"
+              rows="3"
+            ></textarea>
+          </div>
+          <div class="edit-actions">
+            <button type="submit" class="btn btn-blue btn-sm">Save</button>
+            <button type="button" class="btn btn-outline btn-sm" {{on "click" this.cancelEditing}}>Cancel</button>
+          </div>
+        </form>
+      {{else}}
+        <h3>{{this.name}}</h3>
+        <p class="place-type">
+          {{this.type}}
        </p>
+        {{#if this.place.description}}
+          <p class="place-description">
+            {{this.place.description}}
+          </p>
+        {{/if}}
      {{/if}}

      <div class="actions">
        <button
          type="button"
-          class={{if this.place.createdAt "btn-secondary" "btn-primary"}}
+          class={{if
+            this.place.createdAt
+            "btn btn-secondary"
+            "btn btn-outline"
+          }}
          {{on "click" (fn @onToggleSave this.place)}}
        >
-          {{if this.place.createdAt "Saved ✓" "Save"}}
+          <Icon
+            @name="bookmark"
+            @color={{if this.place.createdAt "currentColor" "#007bff"}}
+          />
+          {{if this.place.createdAt "Saved" "Save"}}
        </button>
+
+        {{#if this.place.createdAt}}
+          <button
+            type="button"
+            class="btn btn-outline"
+            title="Edit"
+            {{on "click" this.startEditing}}
+          >
+            <Icon @name="edit" @color="#007bff" />
+            Edit
+          </button>
+        {{/if}}
      </div>

      <div class="meta-info">
+
        {{#if this.cuisine}}
-          <p><strong>Cuisine:</strong> {{this.cuisine}}</p>
+          <p>
+            <strong>Cuisine:</strong>
+            {{this.cuisine}}
+          </p>
        {{/if}}

        {{#if this.openingHours}}
-          <p><strong>Open:</strong> {{this.openingHours}}</p>
+          <p class="content-with-icon">
+            <Icon @name="clock" @title="Opening hours" />
+            <span>{{this.openingHours}}</span>
+          </p>
        {{/if}}

        {{#if this.phone}}
-          <p><strong>Phone:</strong> <a href="tel:{{this.phone}}">{{this.phone}}</a></p>
+          <p class="content-with-icon">
+            <Icon @name="phone" @title="Phone" />
+            <span><a href="tel:{{this.phone}}">{{this.phone}}</a></span>
+          </p>
        {{/if}}

        {{#if this.website}}
-          <p>
-            <strong>Website:</strong>
-            <a href={{this.website}} target="_blank" rel="noopener noreferrer">
-              Visit Link
-            </a>
+          <p class="content-with-icon">
+            <Icon @name="globe" @title="Website" />
+            <span><a
+                href={{this.website}}
+                target="_blank"
+                rel="noopener noreferrer"
+              >{{this.websiteDomain}}</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>
+            <a
+              href="https://wikipedia.org/wiki/{{this.wikipedia}}"
+              target="_blank"
+              rel="noopener noreferrer"
+            >Article</a>
          </p>
        {{/if}}

-        <hr class="meta-divider">
+      </div>
+      <div class="meta-info">

        {{#if this.address}}
-          <p><strong>Address:</strong> {{this.address}}</p>
+          <p class="content-with-icon">
+            <Icon @name="home" @title="Address" />
+            <span>{{this.address}}</span>
+          </p>
        {{/if}}

-
-        <p>
-          <strong>Geo:</strong>
-          <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
-            {{this.visibleGeoLink}}
-          </a>
+        <p class="content-with-icon">
+          <Icon @name="map-pin" @title="Geo link" />
+          <span>
+            <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
+              {{this.visibleGeoLink}}
+            </a>
+          </span>
        </p>

        {{#if this.osmUrl}}
-          <p>
-            <strong>OSM ID:</strong>
-            <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
-              {{this.place.osmId}}
-            </a>
+          <p class="content-with-icon">
+            <Icon @name="map" @title="OSM ID" />
+            <span>
+              <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
+                OpenStreetMap
+              </a>
+            </span>
          </p>
        {{/if}}
+
+        <p class="content-with-icon">
+          <Icon @name="map" @title="OSM ID" />
+          <span>
+            <a href={{this.gmapsUrl}} target="_blank" rel="noopener noreferrer">
+              Google Maps
+            </a>
+          </span>
+        </p>
+
      </div>
    </div>
  </template>
--- a/app/components/places-sidebar.gjs
+++ b/app/components/places-sidebar.gjs
@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import PlaceDetails from './place-details';
+import Icon from './icon';

 export default class PlacesSidebar extends Component {
  @service storage;
@@ -31,70 +32,46 @@ export default class PlacesSidebar extends Component {
    }
  }

-  get geoLink() {
-    if (!this.args.selectedPlace) return '#';
-    const p = this.args.selectedPlace;
-    // geo:lat,lon?q=lat,lon(Label)
-    const label = encodeURIComponent(
-      p.title ||
-        p.tags?.name ||
-        p.tags?.['name:en'] ||
-        'Location'
-    );
-    return `geo:${p.lat},${p.lon}?q=${p.lat},${p.lon}(${label})`;
-  }
-
-  get visibleGeoLink() {
-    if (!this.args.selectedPlace) return '';
-    const p = this.args.selectedPlace;
-    return `geo:${p.lat},${p.lon}`;
-  }
-
  @action
  async toggleSave(place) {
    if (!place) return;

    if (place.createdAt) {
-      // It's a saved bookmark -> Delete it
      if (confirm(`Delete "${place.title}"?`)) {
        try {
-          if (place.id && place.geohash) {
-            await this.storage.places.remove(place.id, place.geohash);
-            console.log('Place deleted:', place.title);
+          await this.storage.removePlace(place);
+          console.log('Place deleted:', place.title);

-            // Notify parent to refresh map bookmarks
-            if (this.args.onBookmarkChange) {
-              this.args.onBookmarkChange();
-            }
+          // Notify parent to refresh map bookmarks
+          if (this.args.onBookmarkChange) {
+            this.args.onBookmarkChange();
+          }

-            // Update selection to the new saved place object
-            // This updates the local UI state immediately without a route refresh
-            if (this.args.onUpdate) {
-               // When deleting, we revert to a "fresh" object or just close.
-               // Since we close the sidebar below, we might not strictly need to update local state,
-               // but it's good practice.
-               // Reconstruct the "original" place without ID/Geohash/CreatedAt
-               const freshPlace = {
-                  ...place,
-                  id: undefined,
-                  geohash: undefined,
-                  createdAt: undefined
-               };
-               this.args.onUpdate(freshPlace);
-            }
+          // Update selection to the new saved place object
+          // This updates the local UI state immediately without a route refresh
+          if (this.args.onUpdate) {
+            // When deleting, we revert to a "fresh" object or just close.
+            // Since we close the sidebar below, we might not strictly need to update local state,
+            // but it's good practice.
+            // 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) {
-               // Similar logic for select if needed, but we usually close.
-               this.args.onSelect(null);
-            }
+          // Also fire onSelect if it exists (for list view)
+          if (this.args.onSelect) {
+            // Similar logic for select if needed, but we usually close.
+            this.args.onSelect(null);
+          }

-            // Close sidebar after delete
-            if (this.args.onClose) {
-              this.args.onClose();
-            }
-          } else {
-            alert('Cannot delete: Missing ID or Geohash');
+          // Close sidebar after delete
+          if (this.args.onClose) {
+            this.args.onClose();
          }
        } catch (e) {
          console.error('Failed to delete:', e);
@@ -104,7 +81,8 @@ export default class PlacesSidebar extends Component {
    } else {
      // It's a fresh POI -> Save it
      const placeData = {
-        title: place.osmTags.name || place.osmTags['name:en'] || 'Untitled Place',
+        title:
+          place.osmTags.name || place.osmTags['name:en'] || 'Untitled Place',
        lat: place.lat,
        lon: place.lon,
        tags: [],
@@ -115,7 +93,7 @@ export default class PlacesSidebar extends Component {
      };

      try {
-        const savedPlace = await this.storage.places.store(placeData);
+        const savedPlace = await this.storage.storePlace(placeData);
        console.log('Place saved:', placeData.title);

        // Notify parent to refresh map bookmarks
@@ -139,6 +117,27 @@ export default class PlacesSidebar extends Component {
    }
  }

+  @action
+  async updateBookmark(updatedPlace) {
+    try {
+      const savedPlace = await this.storage.updatePlace(updatedPlace);
+      console.log('Place updated:', savedPlace.title);
+      
+      // Notify parent to refresh map/lists
+      if (this.args.onBookmarkChange) {
+        this.args.onBookmarkChange();
+      }
+
+      // Update local view
+      if (this.args.onUpdate) {
+        this.args.onUpdate(savedPlace);
+      }
+    } catch (e) {
+      console.error('Failed to update place:', e);
+      alert('Failed to update place: ' + e.message);
+    }
+  }
+
  <template>
    <div class="sidebar">
      <div class="sidebar-header">
@@ -147,23 +146,23 @@ export default class PlacesSidebar extends Component {
            type="button"
            class="back-btn"
            {{on "click" this.clearSelection}}
-          >←</button>
-          <h2>Details</h2>
+          ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
        {{else}}
          <h2>Nearby Places</h2>
        {{/if}}
-        <button
-          type="button"
-          class="close-btn"
-          {{on "click" @onClose}}
-        >×</button>
+        <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
+            @name="x"
+            @size={{20}}
+            @color="#333"
+          /></button>
      </div>

      <div class="sidebar-content">
        {{#if @selectedPlace}}
-          <PlaceDetails 
-            @place={{@selectedPlace}} 
-            @onToggleSave={{this.toggleSave}} 
+          <PlaceDetails
+            @place={{@selectedPlace}}
+            @onToggleSave={{this.toggleSave}}
+            @onSave={{this.updateBookmark}}
          />
        {{else}}
          {{#if @places}}
--- a/app/components/settings-pane.gjs
+++ b/app/components/settings-pane.gjs
@@ -0,0 +1,75 @@
+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
+            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>
+}
--- a/app/components/user-menu.gjs
+++ b/app/components/user-menu.gjs
@@ -0,0 +1,66 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import Icon from '#components/icon';
+import { on } from '@ember/modifier';
+
+export default class UserMenuComponent extends Component {
+  @action
+  connectRS() {
+    this.args.onClose();
+    this.args.storage.connect();
+  }
+
+  @action
+  disconnectRS() {
+    this.args.storage.disconnect();
+  }
+
+  <template>
+    <div class="user-menu-popover">
+      <div class="user-status">
+        {{#if @storage.connected}}
+          Connected as
+          <strong>{{@storage.userAddress}}</strong>
+        {{else}}
+          Not connected
+        {{/if}}
+      </div>
+
+      <ul class="account-list">
+        <li class="account-item">
+          <div class="account-info">
+            <Icon @name="server" @size={{18}} />
+            <span>RemoteStorage</span>
+          </div>
+          {{#if @storage.connected}}
+            <button
+              class="btn-text text-danger"
+              type="button"
+              {{on "click" this.disconnectRS}}
+            >Disconnect</button>
+          {{else}}
+            <button
+              class="btn-text text-primary"
+              type="button"
+              {{on "click" this.connectRS}}
+            >Connect</button>
+          {{/if}}
+        </li>
+
+        <li class="account-item disabled">
+          <div class="account-info">
+            <Icon @name="globe" @size={{18}} />
+            <span>OpenStreetMap</span>
+          </div>
+        </li>
+
+        <li class="account-item disabled">
+          <div class="account-info">
+            <Icon @name="zap" @size={{18}} />
+            <span>Nostr</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </template>
+}
--- a/app/routes/place.js
+++ b/app/routes/place.js
@@ -4,35 +4,56 @@ import { service } from '@ember/service';
 export default class PlaceRoute extends Route {
  @service storage;
  @service osm;
+  @service mapUi;

  async model(params) {
    const id = params.place_id;

-    // Check for explicit OSM prefixes
    if (id.startsWith('osm:node:') || id.startsWith('osm:way:')) {
      const [, type, osmId] = id.split(':');
      console.log(`Fetching explicit OSM ${type}:`, osmId);
      return this.loadOsmPlace(osmId, type);
    }

-    // 1. Try to find in local bookmarks
-    // We rely on the service maintaining the list
-    let bookmark = this.storage.findPlaceById(id);
+    await this.waitForSync();

-    // If not found instantly, maybe wait for storage ready?
-    // For now assuming storage is reasonably fast or "ready" has fired.
-    // If we land here directly on refresh, "savedPlaces" might be empty initially.
-    // We could retry or wait, but simpler to fall back to OSM for now.
-    // Ideally, we await `storage.loadAllPlaces()` promise if it's pending.
+    let bookmark = this.storage.findPlaceById(id);

    if (bookmark) {
      console.log('Found in bookmarks:', bookmark.title);
      return bookmark;
    }

-    // 2. Fallback: Fetch from OSM (assuming generic ID or old format)
-    console.log('Not in bookmarks, fetching from OSM:', id);
-    return this.loadOsmPlace(id);
+    console.warn('Not in bookmarks:', id);
+    return null;
+  }
+
+  async waitForSync() {
+    if (this.storage.initialSyncDone) return;
+
+    console.log('Waiting for initial storage sync...');
+    const timeout = 5000;
+    const start = Date.now();
+
+    while (!this.storage.initialSyncDone) {
+      if (Date.now() - start > timeout) {
+        console.warn('Timed out waiting for initial sync');
+        break;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+  }
+
+  afterModel(model) {
+    // Notify the Map UI to show the pin
+    if (model) {
+      this.mapUi.selectPlace(model);
+    }
+  }
+
+  deactivate() {
+    // Clear the pin when leaving the route
+    this.mapUi.clearSelection();
  }

  async loadOsmPlace(id, type = null) {
--- a/app/services/map-ui.js
+++ b/app/services/map-ui.js
@@ -0,0 +1,14 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class MapUiService extends Service {
+  @tracked selectedPlace = null;
+
+  selectPlace(place) {
+    this.selectedPlace = place;
+  }
+
+  clearSelection() {
+    this.selectedPlace = null;
+  }
+}
--- a/app/services/osm.js
+++ b/app/services/osm.js
@@ -1,6 +1,8 @@
-import Service from '@ember/service';
+import Service, { service } from '@ember/service';

 export default class OsmService extends Service {
+  @service settings;
+
  controller = null;

  async getNearbyPois(lat, lon, radius = 50) {
@@ -23,9 +25,7 @@ export default class OsmService extends Service {
 out center;
    `.trim();

-    const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
-      query
-    )}`;
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;

    try {
      const res = await this.fetchWithRetry(url, { signal });
@@ -58,6 +58,7 @@ out center;

  async fetchWithRetry(url, options = {}, retries = 3) {
    try {
+      // eslint-disable-next-line warp-drive/no-external-request-patterns
      const res = await fetch(url, options);

      if (!res.ok && retries > 0 && [502, 503, 504, 429].includes(res.status)) {
@@ -99,9 +100,7 @@ out center;
      `.trim();
    }

-    const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
-      query
-    )}`;
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;
    const res = await this.fetchWithRetry(url);
    if (!res.ok) throw new Error('Overpass request failed');
    const data = await res.json();
--- a/app/services/settings.js
+++ b/app/services/settings.js
@@ -0,0 +1,32 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class SettingsService extends Service {
+  @tracked overpassApi = 'https://overpass.bke.ro/api/interpreter';
+
+  overpassApis = [
+    { name: 'bke.ro', url: 'https://overpass.bke.ro/api/interpreter' },
+    { name: 'overpass-api.de', url: 'https://overpass-api.de/api/interpreter' },
+    {
+      name: 'private.coffee',
+      url: 'https://overpass.private.coffee/api/interpreter',
+    },
+  ];
+
+  constructor() {
+    super(...arguments);
+    this.loadSettings();
+  }
+
+  loadSettings() {
+    const savedApi = localStorage.getItem('marco-overpass-api');
+    if (savedApi) {
+      this.overpassApi = savedApi;
+    }
+  }
+
+  updateOverpassApi(url) {
+    this.overpassApi = url;
+    localStorage.setItem('marco-overpass-api', url);
+  }
+}
--- a/app/services/storage.js
+++ b/app/services/storage.js
@@ -1,17 +1,25 @@
 import Service from '@ember/service';
 import RemoteStorage from 'remotestoragejs';
 import Places from '@remotestorage/module-places';
+import Widget from 'remotestorage-widget';
 import { tracked } from '@glimmer/tracking';
 import { getGeohashPrefixesInBbox } from '../utils/geohash-coverage';
-import { debounce } from '@ember/runloop';
+import { action } from '@ember/object';
+import { debounceTask } from 'ember-lifeline';
 import Geohash from 'latlon-geohash';

 export default class StorageService extends Service {
  rs;
+  widget;
+  @tracked placesInView = [];
  @tracked savedPlaces = [];
  @tracked loadedPrefixes = [];
  @tracked currentBbox = null;
  @tracked version = 0; // Shared version tracker for bookmarks
+  @tracked initialSyncDone = false;
+  @tracked connected = false;
+  @tracked userAddress = null;
+  @tracked isWidgetOpen = false;

  constructor() {
    super(...arguments);
@@ -22,30 +30,97 @@ export default class StorageService extends Service {
    });

    this.rs.access.claim('places', 'rw');
-    // Caching strategy:
    this.rs.caching.enable('/places/');

    window.remoteStorage = this.rs;

-    // const widget = new Widget(this.rs);
-    // widget.attach();
+    this.widget = new Widget(this.rs, {
+      leaveOpen: true,
+      skipInitial: true,
+    });
+    // We don't attach immediately; we'll attach when the user clicks Connect

    this.rs.on('ready', () => {
-      // this.loadAllPlaces();
+      // console.debug('[rs] client ready');
+    });
+
+    this.rs.on('connected', () => {
+      console.debug('Remote storage connected');
+      this.connected = true;
+      this.userAddress = this.rs.remote.userAddress;
+    });
+
+    this.rs.on('disconnected', () => {
+      console.debug('Remote storage disconnected');
+      this.connected = false;
+      this.userAddress = null;
+      this.placesInView = [];
+      this.savedPlaces = [];
+      this.loadedPrefixes = [];
+      this.initialSyncDone = false;
+    });
+
+    this.rs.on('sync-done', () => {
+      // console.debug('[rs] sync done:', result);
+      if (!this.initialSyncDone) {
+        this.initialSyncDone = true;
+      }
    });

    this.rs.scope('/places/').on('change', (event) => {
-      debounce(this, this.reloadCurrentView, 200);
+      // console.debug(event);
+      this.handlePlaceChange(event);
+      debounceTask(this, 'reloadCurrentView', 200);
    });
  }

+  handlePlaceChange(event) {
+    const { newValue, relativePath } = event;
+
+    // Remove old entry if exists
+    // The relativePath is like "geohash/geohash/ULID" or just "ULID" depending on structure.
+    // Our structure is <2-char>/<2-char>/<id>.
+    // But let's rely on the ID inside the object if possible, or extract from path.
+
+    // We can't easily identify the ID from just relativePath without parsing logic if it's nested.
+    // However, for deletions (newValue is undefined), we might need the ID.
+    // Fortunately, our objects (newValue) contain the ID.
+
+    // If it's a deletion, we need to find the object in our array to remove it.
+    // Since we don't have the ID in newValue (it's null), we rely on `relativePath`.
+    // Let's assume the filename is the ID.
+    const pathParts = relativePath.split('/');
+    const id = pathParts[pathParts.length - 1];
+
+    if (!newValue) {
+      // Deletion
+      this.savedPlaces = this.savedPlaces.filter((p) => p.id !== id);
+    } else {
+      // Add or Update
+      // Ensure the object has the ID (it should)
+      const place = { ...newValue, id };
+
+      // Update existing or add new
+      const index = this.savedPlaces.findIndex((p) => p.id === id);
+      if (index !== -1) {
+        // Replace
+        const newPlaces = [...this.savedPlaces];
+        newPlaces[index] = place;
+        this.savedPlaces = newPlaces;
+      } else {
+        // Add
+        this.savedPlaces = [...this.savedPlaces, place];
+      }
+    }
+  }
+
  get places() {
    return this.rs.places;
  }

  notifyChange() {
    this.version++;
-    debounce(this, this.reloadCurrentView, 200);
+    debounceTask(this, 'reloadCurrentView', 200);
  }

  reloadCurrentView() {
@@ -98,7 +173,7 @@ export default class StorageService extends Service {
          // Identify existing places that belong to the reloaded prefixes and remove them
          const prefixSet = new Set(prefixes);

-          const keptPlaces = this.savedPlaces.filter((place) => {
+          const keptPlaces = this.placesInView.filter((place) => {
            if (!place.lat || !place.lon) return false;
            try {
              // Calculate 4-char geohash for the existing place
@@ -106,33 +181,85 @@ export default class StorageService extends Service {
              // If the hash is in the set of reloaded prefixes, we discard the old version
              // (because the 'places' array contains the authoritative new state for this prefix)
              return !prefixSet.has(hash);
-            } catch (e) {
+            } catch {
              return true; // Keep malformed/unknown places safe
            }
          });

          // Merge the kept places (from other areas) with the fresh places (from these areas)
-          this.savedPlaces = [...keptPlaces, ...places];
+          this.placesInView = [...keptPlaces, ...places];
        } else {
          // Full reload
-          this.savedPlaces = places;
+          this.placesInView = places;
        }
      } else {
-        if (!prefixes) this.savedPlaces = [];
+        if (!prefixes) this.placesInView = [];
      }
-      console.log('Loaded saved places:', this.savedPlaces.length);
+      console.log('Loaded saved places:', this.placesInView.length);
    } catch (e) {
      console.error('Failed to load places:', e);
    }
  }

  findPlaceById(id) {
-    // Search by internal ID first
-    let place = this.savedPlaces.find((p) => p.id === id);
+    if (!id) return undefined;
+    const strId = String(id);
+
+    // Search by internal ID first (loose comparison via string cast)
+    let place = this.savedPlaces.find((p) => p.id && String(p.id) === strId);
    if (place) return place;

    // Then search by OSM ID
-    place = this.savedPlaces.find((p) => p.osmId === id);
+    place = this.savedPlaces.find((p) => p.osmId && String(p.osmId) === strId);
    return place;
  }
+
+  async storePlace(placeData) {
+    const savedPlace = await this.places.store(placeData);
+    // Only append if not already there (handlePlaceChange might also fire)
+    if (!this.savedPlaces.some((p) => p.id === savedPlace.id)) {
+      this.savedPlaces = [...this.savedPlaces, savedPlace];
+    }
+    return savedPlace;
+  }
+
+  async updatePlace(placeData) {
+    const savedPlace = await this.places.store(placeData);
+
+    // Update local list
+    const index = this.savedPlaces.findIndex((p) => p.id === savedPlace.id);
+    if (index !== -1) {
+      const newPlaces = [...this.savedPlaces];
+      newPlaces[index] = savedPlace;
+      this.savedPlaces = newPlaces;
+    }
+    return savedPlace;
+  }
+
+  async removePlace(place) {
+    await this.places.remove(place.id, place.geohash);
+    this.savedPlaces = this.savedPlaces.filter((p) => p.id !== place.id);
+  }
+
+  @action
+  connect() {
+    this.isWidgetOpen = true;
+
+    // Check if widget is already attached
+    if (!document.querySelector('.rs-widget')) {
+      // Attach to our specific container
+      this.widget.attach('rs-widget-container');
+    }
+  }
+
+  @action
+  closeWidget() {
+    this.isWidgetOpen = false;
+  }
+
+  @action
+  disconnect() {
+    this.rs.disconnect();
+    this.isWidgetOpen = false;
+  }
 }
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -3,10 +3,12 @@
 html,
 body {
  height: 100%;
+  overscroll-behavior: none; /* Prevent pull-to-refresh on mobile */
 }

 body {
  margin: 0;
+  font-family: 'Noto Serif', serif;
 }

 #root,
@@ -19,14 +21,165 @@ body {
  background: #f8f9fa;
  -webkit-tap-highlight-color: transparent;
  outline: none; /* Prevent focus outline on click */
+  position: absolute;
+  inset: 0;
 }

-/* Ensure RS widget is above the map */
-#remotestorage-widget {
+/* Ensure RS widget is above the map but potentially hidden initially if needed */
+#rs-widget-container {
  position: absolute;
-  top: 10px;
+  top: 60px; /* Below header */
  right: 10px;
-  z-index: 1000;
+  z-index: 4000;
+  display: none; /* Hidden by default */
+}
+
+#rs-widget-container.visible {
+  display: block;
+}
+
+.rs-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 3999; /* Below widget container but above everything else */
+
+  /* background: rgb(0 0 0 / 20%); Optional: dim background */
+}
+
+/* App Header */
+.app-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 3000; /* Above sidebar (2000) and map */
+  pointer-events: none; /* Let clicks pass through to map where transparent */
+}
+
+.header-left,
+.header-right {
+  pointer-events: auto; /* Re-enable clicks for buttons */
+}
+
+.icon-btn {
+  background: white;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.icon-btn:active {
+  transform: scale(0.95);
+}
+
+.user-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.user-avatar-placeholder {
+  width: 40px;
+  height: 40px;
+  background: #333;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
+}
+
+/* User Menu Popover */
+.user-menu-container {
+  position: relative;
+}
+
+.user-menu-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 10px;
+  width: 280px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  padding: 1rem;
+  z-index: 3001;
+}
+
+.menu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 3000; /* Below popover but above everything else */
+
+  /* background: rgb(0 0 0 / 10%); Optional dimming */
+}
+
+.user-status {
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #eee;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.account-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.account-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+}
+
+.account-item.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.account-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-weight: 500;
+}
+
+.btn-text {
+  background: none;
+  border: none;
+  padding: 0;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.text-primary {
+  color: #007bff;
+}
+
+.text-danger {
+  color: #dc3545;
+}
+
+.btn-text:hover {
+  text-decoration: underline;
 }

 /* Sidebar Styles */
@@ -38,12 +191,28 @@ body {
  width: 300px;
  background: white;
  color: #333;
-  z-index: 2000;
+  z-index: 3100; /* Higher than Header (3000) */
  box-shadow: 2px 0 5px rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
 }

+.settings-pane.sidebar {
+  z-index: 3200; /* Higher than Places Sidebar (3100) */
+}
+
+/* Settings Pane Mobile Overrides */
+@media (width <= 768px) {
+  .settings-pane.sidebar {
+    width: 100%;
+    right: 0;
+    border-radius: 16px 16px 0 0;
+    height: 66vh;
+    top: auto;
+    bottom: 0;
+  }
+}
+
 .sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid #eee;
@@ -61,54 +230,120 @@ body {
  padding: 1rem;
 }

-.close-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0 0.5rem;
+.edit-form {
+  margin: -1rem;
+  margin-bottom: 1rem;
+  background: #f8f9fa;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
 }

-.back-btn {
-  background: none;
-  border: none;
-  font-size: 1.2rem;
-  cursor: pointer;
-  margin-right: 0.5rem;
+.form-group {
+  margin-bottom: 0.75rem;
 }

-.place-details {
-}
-
-.place-details h3 {
-  font-size: 1.2rem;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-.place-details .place-type {
+.form-group label {
+  display: block;
+  font-size: 0.85rem;
  color: #666;
-  font-size: 0.9rem;
-  text-transform: capitalize;
-  margin: 0 0 1rem 0;
+  margin-bottom: 0.25rem;
 }

-.place-details .place-description {
+.form-control {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 0.95rem;
+  box-sizing: border-box; /* Ensure padding doesn't overflow width */
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
+}
+
+.edit-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.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;
+}
+
+.settings-section .form-group {
+  margin-top: 1rem;
+}
+
+.btn-full {
+  width: 100%;
 }

 .btn-primary {
  background: #007bff;
  color: white;
  border: none;
-  padding: 0.75rem 1.5rem;
+  padding: 0.75rem;
  border-radius: 4px;
+  font-weight: 500;
  cursor: pointer;
-  width: 100%;
-  font-size: 1rem;
 }

 .btn-primary:hover {
-  background: #0056b3;
+  background: #0069d9;
+}
+
+.meta-info {
+  font-size: 0.9rem;
+}
+
+.meta-info p:first-child {
+  margin-top: 1.2rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid #eee;
+}
+
+.meta-info a {
+  color: #007bff;
+  text-decoration: none;
+  padding-bottom: 4rem;
+}
+
+.meta-info a:hover {
+  text-decoration: underline;
+}
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.link-list li {
+  margin-bottom: 0.5rem;
+}
+
+.link-list a {
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+
+.link-list a:hover {
+  text-decoration: underline;
 }

 .places-list {
@@ -147,44 +382,113 @@ body {
  text-transform: capitalize;
 }

-.meta-info {
-  margin-top: 1.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid #eee;
+.back-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  margin-left: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  margin-right: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.place-details h3 {
+  font-size: 1.2rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.place-details .place-type {
+  color: #666;
  font-size: 0.9rem;
-  text-align: left;
+  text-transform: capitalize;
+  margin: 0 0 1rem;
 }

-.meta-info p {
-  margin: 0.75rem 0;
-  line-height: 1.4;
-  word-break: break-word; /* Prevent long URLs from breaking layout */
+.place-details .place-description {
+  margin-bottom: 1.5rem;
 }

-.meta-info strong {
-  font-weight: bold;
+.place-details .actions {
+  padding-bottom: 0.3rem;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
 }

-.meta-info a {
-  color: #007bff;
-  text-decoration: none;
+.btn {
+  padding: 0.75rem 1.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }

-.meta-info a:hover {
-  text-decoration: underline;
+.btn-sm {
+  padding: 0.4rem 1rem !important;
+  font-size: 0.9rem !important;
 }

-.meta-divider {
-  border: 0;
-  border-top: 1px dashed #ddd;
-  margin: 1rem 0;
+.btn-outline {
+  background: transparent;
+  color: #333;
+  border: 1px solid #ccc;
+}
+
+.btn-outline:hover {
+  border: 1px solid #898989;
+}
+
+.btn-secondary {
+  color: #333;
+  border: 1px solid rgb(255 204 51 / 20%);
+  background: rgb(255 204 51 / 30%);
+}
+
+.btn-secondary:hover {
+  background: rgb(255 204 51 / 40%);
+}
+
+.btn-blue {
+  background: #007bff;
+  color: white;
+  border: none;
+}
+
+.btn-blue:hover {
+  background: #0056b3;
+}
+
+.btn-green {
+  background: #198754;
+  color: white;
+  border: none;
+}
+
+.btn-green:hover {
+  background: #157347;
 }

 /* Map Search Pulse Animation */
 .search-pulse {
  border-radius: 50%;
-  border: 2px solid rgba(255, 204, 51, 0.8); /* Gold/Yellow to match markers */
-  background: rgba(255, 204, 51, 0.2);
+  border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
+  background: rgb(255 204 51 / 20%);
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
@@ -198,8 +502,8 @@ body {
 }

 .search-pulse.blue {
-  border-color: rgba(51, 153, 204, 0.8);
-  background: rgba(51, 153, 204, 0.2);
+  border-color: rgb(51 153 204 / 80%);
+  background: rgb(51 153 204 / 20%);
 }

@keyframes pulse {
@@ -207,6 +511,7 @@ body {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
  }
+
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
@@ -215,11 +520,129 @@ body {

 /* Locate Control */
 .ol-control.ol-locate {
-  top: 5em; /* Position below zoom controls (usually at .5em or similar) */
-  right: 0.5em;
-  left: auto;
+  inset: auto 0.5em 2.5em auto;
 }

 .ol-touch .ol-control.ol-locate {
-  top: 5.5em; /* Adjust for touch devices where controls might be larger */
+  inset: auto auto 3.5em;
+}
+
+/* Rotate Control */
+.ol-rotate {
+  inset: auto 0.5em 5em auto;
+}
+
+.ol-touch .ol-rotate {
+  inset: auto auto 6em;
+}
+
+span.icon {
+  display: inline-block;
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+  stroke: currentcolor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.content-with-icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Selected Pin Animation */
+.selected-pin-container {
+  position: absolute;
+
+  /* Center the bottom tip of the pin at the coordinate */
+  transform: translate(-50%, -100%);
+  pointer-events: none; /* Let clicks pass through to the map features below if needed */
+  display: none;
+}
+
+.selected-pin-container.active {
+  display: block;
+  animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.selected-pin {
+  width: 40px;
+  height: 40px;
+  color: #ea4335; /* Google Red */
+  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 30%));
+}
+
+.selected-pin svg {
+  width: 100%;
+  height: 100%;
+  fill: #ea4335;
+  stroke: #b31412; /* Darker red stroke */
+  stroke-width: 1;
+}
+
+/* Optional: Small dot at the bottom to ground it */
+.selected-pin-shadow {
+  width: 10px;
+  height: 4px;
+  background: rgb(0 0 0 / 30%);
+  border-radius: 50%;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+  opacity: 0;
+  animation: shadow-fade 0.5s 0.2s forwards;
+}
+
+@keyframes drop-in {
+  0% {
+    transform: translate(-50%, -200%) scale(0);
+    opacity: 0;
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -100%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes shadow-fade {
+  to {
+    opacity: 1;
+  }
+}
+
+@media (width <= 768px) {
+  .sidebar {
+    width: 100%;
+    height: 50vh;
+    box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    inset: auto 0 0;
+  }
+
+  .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);
+  }
 }
--- a/app/templates/application.gjs
+++ b/app/templates/application.gjs
@@ -2,17 +2,21 @@ import Component from '@glimmer/component';
 import { pageTitle } from 'ember-page-title';
 import Map from '#components/map';
 import PlacesSidebar from '#components/places-sidebar';
+import AppHeader from '#components/app-header';
+import SettingsPane from '#components/settings-pane';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { eq } from 'ember-truth-helpers';
-import { and } from 'ember-truth-helpers';
+import { and, or } from 'ember-truth-helpers';
+import { on } from '@ember/modifier';

 export default class ApplicationComponent extends Component {
  @service storage;
  @service router;

  @tracked nearbyPlaces = null;
+  @tracked isSettingsOpen = false;
  // @tracked bookmarksVersion = 0; // Moved to storage service

  get isSidebarOpen() {
@@ -28,19 +32,40 @@ export default class ApplicationComponent extends Component {

  @action
  showPlaces(places, selectedPlace = null) {
+    // Helper to resolve a place to its bookmark if it exists
+    const resolvePlace = (p) => {
+      if (!p) return null;
+      // We use the OSM ID to check if we already have this place saved
+      const saved = this.storage.findPlaceById(p.osmId);
+      return saved || p;
+    };
+
+    const resolvedSelected = resolvePlace(selectedPlace);
+    const resolvedPlaces = places ? places.map(resolvePlace) : [];
+
    // If we have a specific place, transition to the route
-    if (selectedPlace) {
+    if (resolvedSelected) {
      // Pass the FULL object model to avoid re-fetching!
      // The Route's serialize() hook handles URL generation.
-      this.router.transitionTo('place', selectedPlace);
+      this.router.transitionTo('place', resolvedSelected);
      this.nearbyPlaces = null; // Clear list when selecting specific
-    } else if (places && places.length > 0) {
+    } else if (resolvedPlaces && resolvedPlaces.length > 0) {
      // Show list case
-      this.nearbyPlaces = places;
+      this.nearbyPlaces = resolvedPlaces;
      this.router.transitionTo('index');
    }
  }

+  @action
+  toggleSettings() {
+    this.isSettingsOpen = !this.isSettingsOpen;
+  }
+
+  @action
+  closeSettings() {
+    this.isSettingsOpen = false;
+  }
+
  @action
  selectFromList(place) {
    if (place) {
@@ -49,6 +74,15 @@ export default class ApplicationComponent extends Component {
    }
  }

+  @action
+  handleOutsideClick() {
+    if (this.isSettingsOpen) {
+      this.closeSettings();
+    } else {
+      this.closeSidebar();
+    }
+  }
+
  @action
  closeSidebar() {
    this.nearbyPlaces = null;
@@ -63,10 +97,25 @@ export default class ApplicationComponent extends Component {
  <template>
    {{pageTitle "M/\RCO"}}

+    <AppHeader @onToggleMenu={{this.toggleSettings}} />
+
+    <div
+      id="rs-widget-container"
+      class={{if this.storage.isWidgetOpen "visible"}}
+    ></div>
+
+    {{#if this.storage.isWidgetOpen}}
+      <div
+        class="rs-backdrop"
+        role="button"
+        {{on "click" this.storage.closeWidget}}
+      ></div>
+    {{/if}}
+
    <Map
      @onPlacesFound={{this.showPlaces}}
-      @isSidebarOpen={{this.isSidebarOpen}}
-      @onOutsideClick={{this.closeSidebar}}
+      @isSidebarOpen={{or this.isSidebarOpen this.isSettingsOpen}}
+      @onOutsideClick={{this.handleOutsideClick}}
    />

    {{#if (and (eq this.router.currentRouteName "index") this.nearbyPlaces)}}
@@ -77,6 +126,10 @@ export default class ApplicationComponent extends Component {
      />
    {{/if}}

+    {{#if this.isSettingsOpen}}
+      <SettingsPane @onClose={{this.closeSettings}} />
+    {{/if}}
+
    {{outlet}}
  </template>
 }
--- a/app/templates/place.gjs
+++ b/app/templates/place.gjs
@@ -23,20 +23,40 @@ export default class PlaceTemplate extends Component {
  // Let's use a modifier or just sync it.

  get place() {
-    // If we have a manually updated place (from save), use it.
-    // Otherwise use the route model.
-    // We need to ensure we reset `localPlace` when navigating to a NEW place.
-    // Comparing IDs is a safe bet.
-
+    // 1. Resolve the ID from the model (OSM ID or internal ID)
    const model = this.args.model;
+    const id = model.osmId || model.id;
+
+    // 2. Check the storage service for a LIVE version of this bookmark
+    // This is the most critical fix: Storage is the source of truth.
+    // Since `this.storage.savedPlaces` is @tracked, this getter will re-compute
+    // whenever a bookmark is added or removed.
+    const saved = this.storage.findPlaceById(id);
+    if (saved) {
+      return saved;
+    }
+
+    // 3. If not saved, check our local "optimistic" state (from handleUpdate)
+    // This handles the "unsaved" state immediately after deletion before any other sync
    if (
      this.localPlace &&
-      (this.localPlace.id === model.id || this.localPlace.osmId === model.osmId)
+      (this.localPlace.osmId === id || this.localPlace.id === id)
    ) {
-      // If the local place is "richer" (has createdAt), prefer it.
-      if (this.localPlace.createdAt && !model.createdAt) return this.localPlace;
-      // If we deleted it (local has no createdAt, model might?) - wait, if we delete, we close sidebar.
+      return this.localPlace;
    }
+
+    // 4. Fallback to the route model (which might be the stale "saved" object from when the route loaded)
+    // If the model *has* a createdAt but we didn't find it in step 2 (storage),
+    // it means it was deleted. We must return a sanitized version.
+    if (model.createdAt) {
+      return {
+        ...model,
+        id: undefined,
+        createdAt: undefined,
+        geohash: undefined,
+      };
+    }
+
    return model;
  }

--- a/app/utils/geohash-coverage.js
+++ b/app/utils/geohash-coverage.js
@@ -41,6 +41,7 @@ export function getGeohashPrefixesInBbox(bbox) {
      try {
        const hash = Geohash.encode(cLat, cLon, 4);
        prefixes.add(hash);
+        // eslint-disable-next-line no-unused-vars
      } catch (e) {
        // Ignore invalid coords if any
      }
@@ -50,16 +51,28 @@ export function getGeohashPrefixesInBbox(bbox) {
  // Ensure corners are definitely included (floating point steps might miss slightly)
  try {
    prefixes.add(Geohash.encode(minLat, minLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }
  try {
    prefixes.add(Geohash.encode(maxLat, maxLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }
  try {
    prefixes.add(Geohash.encode(minLat, maxLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }
  try {
    prefixes.add(Geohash.encode(maxLat, minLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }

  return Array.from(prefixes);
 }
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -30,7 +30,7 @@ const esmParserOptions = {
 };

 export default defineConfig([
-  globalIgnores(['dist/', 'coverage/', '!**/.*']),
+  globalIgnores(['dist/', 'coverage/', 'release/', '!**/.*']),
  js.configs.recommended,
  eslintConfigPrettier,
  ember.configs.base,
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "marco",
-  "version": "1.2.0",
+  "version": "1.7.0",
  "private": true,
  "description": "Small description for marco goes here",
  "repository": "",
@@ -46,6 +46,7 @@
    "@embroider/vite": "^1.5.0",
    "@eslint/js": "^9.39.2",
    "@glimmer/component": "^2.0.0",
+    "@remotestorage/module-places": "link:vendor/remotestorage-module-places",
    "@rollup/plugin-babel": "^6.1.0",
    "@warp-drive/core": "~5.8.0",
    "@warp-drive/ember": "~5.8.0",
@@ -62,6 +63,7 @@
    "ember-resolver": "^13.1.1",
    "ember-source": "~6.11.0-alpha.6",
    "ember-template-lint": "^7.9.3",
+    "ember-truth-helpers": "^5.0.0",
    "ember-welcome-page": "^8.0.4",
    "eslint": "^9.39.2",
    "eslint-config-prettier": "^10.1.8",
@@ -69,11 +71,17 @@
    "eslint-plugin-n": "^17.23.1",
    "eslint-plugin-qunit": "^8.2.5",
    "eslint-plugin-warp-drive": "^5.8.0",
+    "feather-icons": "^4.29.2",
    "globals": "^16.5.0",
+    "latlon-geohash": "^2.0.0",
+    "ol": "^10.7.0",
+    "ol-mapbox-style": "^13.2.0",
    "prettier": "^3.7.4",
    "prettier-plugin-ember-template-tag": "^2.1.2",
    "qunit": "^2.25.0",
    "qunit-dom": "^3.5.0",
+    "remotestorage-widget": "^1.8.0",
+    "remotestoragejs": "2.0.0-beta.8",
    "sinon": "^21.0.1",
    "stylelint": "^16.26.1",
    "stylelint-config-standard": "^38.0.0",
@@ -87,12 +95,6 @@
    "edition": "octane"
  },
  "dependencies": {
-    "@remotestorage/module-places": "link:vendor/remotestorage-module-places",
-    "ember-truth-helpers": "^5.0.0",
-    "latlon-geohash": "^2.0.0",
-    "ol": "^10.7.0",
-    "ol-mapbox-style": "^13.2.0",
-    "remotestorage-widget": "^1.8.0",
-    "remotestoragejs": "2.0.0-beta.8"
+    "ember-lifeline": "^7.0.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,27 +8,9 @@ importers:

  .:
    dependencies:
-      '@remotestorage/module-places':
-        specifier: link:vendor/remotestorage-module-places
-        version: link:vendor/remotestorage-module-places
-      ember-truth-helpers:
-        specifier: ^5.0.0
-        version: 5.0.0
-      latlon-geohash:
-        specifier: ^2.0.0
-        version: 2.0.0
-      ol:
-        specifier: ^10.7.0
-        version: 10.7.0
-      ol-mapbox-style:
-        specifier: ^13.2.0
-        version: 13.2.0(ol@10.7.0)
-      remotestorage-widget:
-        specifier: ^1.8.0
-        version: 1.8.0
-      remotestoragejs:
-        specifier: 2.0.0-beta.8
-        version: 2.0.0-beta.8
+      ember-lifeline:
+        specifier: ^7.0.0
+        version: 7.0.0(@ember/test-helpers@5.4.1(@babel/core@7.28.6))
    devDependencies:
      '@babel/core':
        specifier: ^7.28.5
@@ -69,6 +51,9 @@ importers:
      '@glimmer/component':
        specifier: ^2.0.0
        version: 2.0.0
+      '@remotestorage/module-places':
+        specifier: link:vendor/remotestorage-module-places
+        version: link:vendor/remotestorage-module-places
      '@rollup/plugin-babel':
        specifier: ^6.1.0
        version: 6.1.0(@babel/core@7.28.6)(rollup@4.55.1)
@@ -117,6 +102,9 @@ importers:
      ember-template-lint:
        specifier: ^7.9.3
        version: 7.9.3
+      ember-truth-helpers:
+        specifier: ^5.0.0
+        version: 5.0.0
      ember-welcome-page:
        specifier: ^8.0.4
        version: 8.0.5(@babel/core@7.28.6)
@@ -138,9 +126,21 @@ importers:
      eslint-plugin-warp-drive:
        specifier: ^5.8.0
        version: 5.8.1(@babel/core@7.28.6)
+      feather-icons:
+        specifier: ^4.29.2
+        version: 4.29.2
      globals:
        specifier: ^16.5.0
        version: 16.5.0
+      latlon-geohash:
+        specifier: ^2.0.0
+        version: 2.0.0
+      ol:
+        specifier: ^10.7.0
+        version: 10.7.0
+      ol-mapbox-style:
+        specifier: ^13.2.0
+        version: 13.2.0(ol@10.7.0)
      prettier:
        specifier: ^3.7.4
        version: 3.7.4
@@ -153,6 +153,12 @@ importers:
      qunit-dom:
        specifier: ^3.5.0
        version: 3.5.0
+      remotestorage-widget:
+        specifier: ^1.8.0
+        version: 1.8.0
+      remotestoragejs:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8
      sinon:
        specifier: ^21.0.1
        version: 21.0.1
@@ -1794,6 +1800,9 @@ packages:
  charm@1.0.2:
    resolution: {integrity: sha512-wqW3VdPnlSWT4eRiYX+hcs+C6ViBPUWk1qTCd+37qw9kEm/a5n2qcyQDMBWvSYKN/ctqZzeXNQaeBjOetJJUkw==}

+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
  clean-up-path@1.0.0:
    resolution: {integrity: sha512-PHGlEF0Z6976qQyN6gM7kKH6EH0RdfZcc8V+QhFe36eRxV0SMH5OUBZG7Bxa9YcreNzyNbK63cGiZxdSZgosRw==}

@@ -2062,6 +2071,9 @@ packages:
    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

+  core-js@3.47.0:
+    resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==}
+
  core-util-is@1.0.3:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}

@@ -2246,6 +2258,15 @@ packages:
      '@typescript-eslint/parser':
        optional: true

+  ember-lifeline@7.0.0:
+    resolution: {integrity: sha512-2l51NzgH5vjN972zgbs+32rnXnnEFKB7qsSpJF+lBI4V5TG6DMy4SfowC72ZEuAtS58OVfwITbOO+RnM21EdpA==}
+    engines: {node: 16.* || >= 18}
+    peerDependencies:
+      '@ember/test-helpers': '>= 1.0.0'
+    peerDependenciesMeta:
+      '@ember/test-helpers':
+        optional: true
+
  ember-modifier@4.2.2:
    resolution: {integrity: sha512-pPYBAGyczX0hedGWQFQOEiL9s45KS9efKxJxUQkMLjQyh+1Uef1mcmAGsdw2KmvNupITkE/nXxmVO1kZ9tt3ag==}

@@ -2544,6 +2565,9 @@ packages:
      picomatch:
        optional: true

+  feather-icons@4.29.2:
+    resolution: {integrity: sha512-0TaCFTnBTVCz6U+baY2UJNKne5ifGh7sMG4ZC2LoBWCZdIyPa+y6UiR4lEYGws1JOFWdee8KAsAIvu0VcXqiqA==}
+
  file-entry-cache@11.1.1:
    resolution: {integrity: sha512-TPVFSDE7q91Dlk1xpFLvFllf8r0HyOMOlnWy7Z2HBku5H3KhIeOGInexrIeg2D64DosVB/JXkrrk6N/7Wriq4A==}

@@ -6397,6 +6421,8 @@ snapshots:
    dependencies:
      inherits: 2.0.4

+  classnames@2.5.1: {}
+
  clean-up-path@1.0.0: {}

  cliui@8.0.1:
@@ -6497,6 +6523,8 @@ snapshots:

  core-js@2.6.12: {}

+  core-js@3.47.0: {}
+
  core-util-is@1.0.3: {}

  cors@2.8.5:
@@ -6747,6 +6775,14 @@ snapshots:
      - eslint
      - typescript

+  ember-lifeline@7.0.0(@ember/test-helpers@5.4.1(@babel/core@7.28.6)):
+    dependencies:
+      '@embroider/addon-shim': 1.10.2
+    optionalDependencies:
+      '@ember/test-helpers': 5.4.1(@babel/core@7.28.6)
+    transitivePeerDependencies:
+      - supports-color
+
  ember-modifier@4.2.2(@babel/core@7.28.6):
    dependencies:
      '@embroider/addon-shim': 1.10.2
@@ -7206,6 +7242,11 @@ snapshots:
    optionalDependencies:
      picomatch: 4.0.3

+  feather-icons@4.29.2:
+    dependencies:
+      classnames: 2.5.1
+      core-js: 3.47.0
+
  file-entry-cache@11.1.1:
    dependencies:
      flat-cache: 6.1.19
--- a/release/assets/main-B9HZHSjP.css
+++ b/release/assets/main-B9HZHSjP.css
--- a/release/assets/main-DMYEQljq.js
+++ b/release/assets/main-DMYEQljq.js
--- a/release/assets/main-Dpm1fpXl.js
+++ b/release/assets/main-Dpm1fpXl.js
--- a/release/assets/main-DySxVUEA.css
+++ b/release/assets/main-DySxVUEA.css
--- a/release/assets/modules-4-12-BCnZwyls.js
+++ b/release/assets/modules-4-12-BCnZwyls.js
--- a/release/assets/modules-4-12-C4l7nL3x.js
+++ b/release/assets/modules-4-12-C4l7nL3x.js
--- a/release/index.html
+++ b/release/index.html
@@ -6,8 +6,8 @@
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
-  <script type="module" crossorigin src="/assets/main-DMYEQljq.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-DySxVUEA.css">
+  <script type="module" crossorigin src="/assets/main-Dpm1fpXl.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-B9HZHSjP.css">
 </head>
  <body>
 </body>
--- a/tests/unit/routes/place-test.js
+++ b/tests/unit/routes/place-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+
+module('Unit | Route | place', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:place');
+    assert.ok(route);
+  });
+});
Author	SHA1	Message	Date
Râu Cao	da64ae1572	1.7.0	2026-01-24 21:07:40 +07:00
Râu Cao	1a96f95c82	Hide settings pane on outside click, render above places pane	2026-01-24 21:06:50 +07:00
Râu Cao	911e6ddf38	Add setting for Overpass API provider	2026-01-24 20:47:55 +07:00
Râu Cao	e61dc00725	Restore some lost styles	2026-01-24 20:47:42 +07:00
Râu Cao	25d45a62c3	1.6.1	2026-01-24 18:00:47 +07:00
Râu Cao	76dd8cdf24	Comment for app settings	2026-01-24 18:00:23 +07:00
Râu Cao	269a6c9eef	1.6.0	2026-01-24 17:55:00 +07:00
Râu Cao	1a2aae631d	Fix JS linting errors	2026-01-24 17:54:34 +07:00
Râu Cao	94b7959fd8	Fix CSS linting, organize properly	2026-01-24 17:47:37 +07:00
Râu Cao	9082fb9762	Fix template linting errors	2026-01-24 16:42:53 +07:00
Râu Cao	90730a935d	Update status doc	2026-01-24 16:33:07 +07:00
Râu Cao	0f44f42c23	Add settings/about pane	2026-01-24 16:18:39 +07:00
Râu Cao	0d5a0325f4	Allow editing of bookmarks/places	2026-01-24 16:15:48 +07:00
Râu Cao	e8f7e74e40	WIP Add settings/about pane	2026-01-24 14:33:00 +07:00
Râu Cao	f60dacac80	1.5.0	2026-01-24 14:16:40 +07:00
Râu Cao	9a02363515	Move all map controls to bottom right corner	2026-01-24 14:16:08 +07:00
Râu Cao	f28be0c994	Add user/accounts menu, RS connect	2026-01-24 13:51:29 +07:00
Râu Cao	721fe5f01d	Fix linting/formatting	2026-01-24 12:52:19 +07:00
Râu Cao	518685b7dc	Improve secondary btn style	2026-01-24 11:17:07 +07:00
Râu Cao	262e5b61a8	1.4.3	2026-01-23 16:52:21 +07:00
Râu Cao	f87d8bdda9	Improve save button styles	2026-01-23 16:51:53 +07:00
Râu Cao	f17f8ca17b	Use feather icons in sidebar header	2026-01-23 15:49:59 +07:00
Râu Cao	026d1c4712	1.4.2	2026-01-23 12:59:37 +07:00
Râu Cao	6bd55843bb	Switch to bkero's API (for now)	2026-01-23 12:59:11 +07:00
Râu Cao	33a6469a19	Various layout and style improvements for place details	2026-01-23 12:41:27 +07:00
Râu Cao	6d7bea411a	1.4.1	2026-01-23 10:21:25 +07:00
Râu Cao	7b01bb1118	Fix place store/remove behavior	2026-01-23 10:21:02 +07:00
Râu Cao	84d4f9cbbf	1.4.0	2026-01-22 17:35:06 +07:00
Râu Cao	f7e7480e51	Pan map to bring loaded place into view if necessary	2026-01-22 17:34:19 +07:00
Râu Cao	6e87ef3573	Load all saved place into memory Fixes launching the app with a place URL directly, and will be useful for search etc. later.	2026-01-22 17:23:50 +07:00
Râu Cao	86b85e9a0b	Ignore release dir for linting etc.	2026-01-22 16:52:26 +07:00
Râu Cao	2a203e8e82	Add initialSyncDone property to storage service Allows us to know when the first sync cycle has been completed	2026-01-22 16:40:02 +07:00
Râu Cao	b08dcedd13	Slightly brighter icon color	2026-01-22 16:39:26 +07:00
Râu Cao	5267ffdd5c	Log map features on click	2026-01-22 14:54:01 +07:00
Râu Cao	deae2260b1	Fix occasional exception on mobiles	2026-01-22 14:40:35 +07:00
Râu Cao	3c5b4d9b98	Update status doc	2026-01-21 22:00:34 +07:00
Râu Cao	b419b498da	1.3.2	2026-01-21 19:58:08 +07:00
Râu Cao	be921cf3ca	Prevent pull-to-refresh on mobile	2026-01-21 19:57:34 +07:00
Râu Cao	99aeee51bd	1.3.1	2026-01-21 19:39:52 +07:00
Râu Cao	fa4115b714	Pan map on mobile when pin obscured by sidebar	2026-01-21 19:38:55 +07:00
Râu Cao	360e511849	1.3.0	2026-01-21 19:16:22 +07:00
Râu Cao	0fee9ad2dd	Link to bookmarked places from nearby places	2026-01-21 19:15:38 +07:00
Râu Cao	c61c2c0e7a	Show map pin for currently selected place	2026-01-21 19:07:35 +07:00
Râu Cao	25f50f9091	Update status doc	2026-01-21 18:32:37 +07:00
Râu Cao	cf9139b9c1	1.2.1	2026-01-21 16:10:58 +07:00
Râu Cao	01c3b5a1ac	Improve place details with icons	2026-01-21 16:10:22 +07:00
Râu Cao	3fcaa0bfa2	Move all deps to devDependencies, install feather-icons	2026-01-21 15:00:31 +07:00