Don't start nearby search when unfocusing search by clicking map

Allows us to make the search box wider, too

PROJECT_STATUS.md

@@ -1,6 +1,6 @@
 # Project Status: Marco
 
-**Last Updated:** Mon Jan 26 2026
+**Last Updated:** Tue Jan 27 2026
 
 ## Project Context
 
@@ -15,7 +15,6 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 - Implemented a hybrid click handler:
   - Detects clicks on visual vector tiles.
   - Falls back to fetching authoritative data from an **Overpass API** service.
-  - Uses a **heuristic** (distance + type matching) to link visual clicks to API results (handling data desynchronization).
   - **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.
@@ -58,6 +57,7 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
   - `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`.
 - **UI Components:**
   - `places-sidebar.gjs`: Displays a list of nearby POIs.
@@ -73,45 +73,62 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 - **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.
 
-### 4. Routing & Data Optimization
+### 4. Routing & Architecture (Refactored)
 
-- **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).
+- **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.
-- **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`.
+
+### 5. Creation & Editing Workflow
+
+- **Create Place:**
+  - Implemented `/place/new` route for creating new private places.
+  - **UX:** Map displays a central crosshair for precise location selection.
+  - **Mobile Optimization:**
+    - Disabled map inertia (`kinetic: false`) to ensure the map stops exactly where the finger releases.
+    - `PlaceEditForm` conditionally disables autofocus on mobile screens (`<= 768px`) to prevent the onscreen keyboard from obscuring the map view immediately.
+    - Responsive crosshair sizing (48px desktop / 24px mobile).
+  - **Persistence:** Form data (Title, Description) and Map coordinates are securely saved to RemoteStorage via `storage.storePlace`.
 
 ## Current State
 
 - **Repo:** The app runs via `pnpm start`.
 - **Workflow:**
   1.  User pans map -> `moveend` triggers `storage.loadPlacesInBounds`.
-  2.  User clicks map -> "Pulse" animation -> hybrid hit detection (Visual Tile vs Overpass).
+  2.  User clicks map -> Route transition to `/search` -> "Pulse" animation -> hybrid hit detection (Visual Tile vs Overpass).
-  3.  **Navigation:** Selected place is checked against bookmarks; if found, it uses the Bookmark object. Otherwise, it uses the OSM object.
+  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.
+  5.  **Creation:** User clicks "Create Place" -> Enters creation mode (crosshair) -> Positions map -> Enters details -> Save.
-  6.  RemoteStorage change event -> Debounced reload updates the map reactive-ly.
+  6.  **Persistence:** 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.
 
 ## Files Currently in Focus
 
-- `app/styles/app.css`: Mobile CSS fixes (font sizes, control positioning).
+- `app/components/map.gjs`
-- `package.json`: New scripts and dependencies.
+- `app/components/place-edit-form.gjs`
-- `README.md`: Updated documentation.
+- `app/templates/place/new.gjs`
 
 ## Next Steps & Pending Tasks
 
-1.  **Mobile Polish:** Verify "Locate Me" animation on iOS Safari.
+1.  **Linting & Code Quality:** Fix remaining CSS errors and address unused variables/runloop usage.
-2.  **Collections/Lists:** Implement ability to organize bookmarks into lists/collections.
+2.  **Testing:** Add automated tests for the geohash coverage, retry logic, and new editing features.
-3.  **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.  **Performance:** Monitor performance with large datasets (thousands of bookmarks).
-5.  **Testing:** Add automated tests for the geohash coverage, retry logic, and new editing features.
 
 ## Technical Constraints
 

app/components/app-header.gjs

@@ -5,6 +5,7 @@ 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';
 
 export default class AppHeaderComponent extends Component {
   @service storage;
@@ -23,20 +24,13 @@ export default class AppHeaderComponent extends Component {
   <template>
     <header class="app-header">
       <div class="header-left">
-        <button
+        <SearchBox @onToggleMenu={{@onToggleMenu}} />
-          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"
+            class="user-btn btn-press"
             type="button"
             aria-label="User Menu"
             {{on "click" this.toggleUserMenu}}

app/components/icon.gjs

@@ -15,7 +15,9 @@ 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';
@@ -37,7 +39,9 @@ const ICONS = {
   menu,
   navigation,
   phone,
+  plus,
   server,
+  search,
   settings,
   target,
   user,

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';
@@ -15,13 +17,13 @@ import Point from 'ol/geom/Point.js';
 import Geolocation from 'ol/Geolocation.js';
 import { Style, Circle, Fill, Stroke } from 'ol/style.js';
 import { apply } from 'ol-mapbox-style';
-import { getDistance } from '../utils/geo';
 
 export default class MapComponent extends Component {
   @service osm;
   @service storage;
   @service mapUi;
   @service router;
+  @service settings;
 
   mapInstance;
   bookmarkSource;
@@ -29,6 +31,9 @@ export default class MapComponent extends Component {
   searchOverlayElement;
   selectedPinOverlay;
   selectedPinElement;
+  crosshairElement;
+  crosshairOverlay;
+  ignoreNextMapClick = false;
 
   setupMap = modifier((element) => {
     if (this.mapInstance) return;
@@ -64,6 +69,7 @@ export default class MapComponent extends Component {
     // Default view settings
     let center = [14.21683569, 27.060114248];
     let zoom = 2.661;
+    let restoredFromStorage = false;
 
     // Try to restore from localStorage
     try {
@@ -78,6 +84,7 @@ export default class MapComponent extends Component {
         ) {
           center = parsed.center;
           zoom = parsed.zoom;
+          restoredFromStorage = true;
         }
       }
     } catch (e) {
@@ -95,12 +102,19 @@ export default class MapComponent extends Component {
       layers: [openfreemap, 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');
@@ -113,18 +127,13 @@ 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.
+    // Simple SVG for Map Pin
-    // 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');
@@ -135,11 +144,22 @@ export default class MapComponent extends Component {
 
     this.selectedPinOverlay = new Overlay({
       element: this.selectedPinElement,
-      positioning: 'bottom-center', // Important: Pin tip is at the bottom
+      positioning: 'bottom-center', // Pin tip is at the bottom
       stopEvent: false, // Let clicks pass through
     });
     this.mapInstance.addOverlay(this.selectedPinOverlay);
 
+    // Crosshair Overlay (for Creating New Place)
+    this.crosshairElement = document.createElement('div');
+    this.crosshairElement.className = 'map-crosshair';
+    this.crosshairElement.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="12" y1="5" x2="12" y2="19"></line>
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+      </svg>
+    `;
+    element.appendChild(this.crosshairElement);
+
     // Geolocation Pulse Overlay
     this.locationOverlayElement = document.createElement('div');
     this.locationOverlayElement.className = 'search-pulse blue';
@@ -150,6 +170,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: {
@@ -227,6 +259,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;
 
@@ -282,7 +315,7 @@ export default class MapComponent extends Component {
       };
 
       if (targetResolution) {
-        const maxResolution = view.getResolutionForZoom(17); // Use 17 as safe max zoom for accuracy < 20m
+        const maxResolution = view.getResolutionForZoom(17);
         viewOptions.resolution = Math.max(targetResolution, maxResolution);
       } else {
         viewOptions.zoom = 16;
@@ -291,7 +324,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();
 
@@ -315,7 +349,9 @@ export default class MapComponent extends Component {
       locateTimeout = setTimeout(() => {
         stopLocating();
       }, 10000);
-    });
+    };
+
+    locateBtn.addEventListener('click', startLocating);
 
     const locateControl = new Control({
       element: locateElement,
@@ -324,6 +360,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
@@ -338,16 +379,45 @@ export default class MapComponent extends Component {
       this.mapInstance.getTarget().style.cursor = hit ? 'pointer' : '';
     });
 
-    // Load initial bookmarks
     this.storage.rs.on('ready', () => {
-      // Initial load based on current view
       this.handleMapMove();
     });
+  });
 
-    // Listen for remote storage changes
+  updateInteractions = modifier(() => {
-    // this.storage.rs.on('connected', () => {
+    if (!this.mapInstance) return;
-    //   this.loadBookmarks();
+
-    // });
+    // 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)
@@ -416,12 +486,9 @@ export default class MapComponent extends Component {
       const offsetPixels = height * 0.25; // Distance from desired pin pos to map center
       const offsetMapUnits = offsetPixels * resolution;
 
-      // Shift center SOUTH (decrease Y)
+      // Shift center SOUTH (decrease Y).
       // Note: In Web Mercator (EPSG:3857), Y increases North.
-      // So to look "lower", we decrease Y? No wait.
+      // To move the camera South (Lower Y), we subtract.
-      // 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];
     }
 
@@ -469,7 +536,6 @@ export default class MapComponent extends Component {
     }
   }
 
-  // Re-fetch bookmarks when the version changes (triggered by parent action or service)
   updateBookmarks = modifier(() => {
     // Depend on the tracked storage.placesInView to automatically update when they change
     const places = this.storage.placesInView;
@@ -481,15 +547,10 @@ export default class MapComponent extends Component {
       if (!this.bookmarkSource) return;
 
       if (!places || places.length === 0) {
-        // Fallback or explicit check if we have tracked property usage?
-        // 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 'placesInView' being updated by handleMapMove calling storage.loadPlacesInBounds.
-
       this.bookmarkSource.clear();
 
       if (places && Array.isArray(places)) {
@@ -522,9 +583,120 @@ export default class MapComponent extends Component {
     }
   });
 
+  // Sync the creation mode (Crosshair)
+  syncCreationMode = modifier(() => {
+    if (!this.crosshairElement || !this.mapInstance) return;
+
+    if (this.mapUi.isCreating) {
+      this.crosshairElement.classList.add('visible');
+
+      // If we have initial coordinates from the route (e.g. reload or link),
+      // we need to pan the map so those coordinates are UNDER the crosshair.
+      const coords = this.mapUi.creationCoordinates;
+      if (coords && coords.lat && coords.lon) {
+        // We only animate if the map center isn't already "roughly" correct.
+        const targetCoords = fromLonLat([coords.lon, coords.lat]);
+        this.animateToCrosshair(targetCoords);
+      }
+    } else {
+      this.crosshairElement.classList.remove('visible');
+    }
+  });
+
+  animateToCrosshair(targetCoords) {
+    if (!this.mapInstance || !this.crosshairElement) return;
+
+    // 1. Get current visual position of the crosshair
+    const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect();
+    const crosshairRect = this.crosshairElement.getBoundingClientRect();
+
+    const crosshairPixelX =
+      crosshairRect.left + crosshairRect.width / 2 - mapRect.left;
+    const crosshairPixelY =
+      crosshairRect.top + crosshairRect.height / 2 - mapRect.top;
+
+    // 2. Get the center pixel of the map viewport
+    const size = this.mapInstance.getSize();
+    const mapCenterX = size[0] / 2;
+    const mapCenterY = size[1] / 2;
+
+    // 3. Calculate the offset (how far the crosshair is from the geometric center)
+    const offsetX = crosshairPixelX - mapCenterX;
+    const offsetY = crosshairPixelY - mapCenterY;
+
+    // 4. Calculate the new map center
+    // We want 'targetCoords' to be at [crosshairPixelX, crosshairPixelY].
+    // If we center the map on 'targetCoords', it will be at [mapCenterX, mapCenterY].
+    // So we need to shift the map center by the OPPOSITE of the offset.
+    const view = this.mapInstance.getView();
+    const resolution = view.getResolution();
+
+    const offsetMapUnitsX = offsetX * resolution;
+    const offsetMapUnitsY = -offsetY * resolution; // Y is inverted in pixel vs map coords
+
+    const targetX = targetCoords[0];
+    const targetY = targetCoords[1];
+
+    const newCenterX = targetX - offsetMapUnitsX;
+    const newCenterY = targetY - offsetMapUnitsY;
+
+    // Only animate if the difference is significant (avoid micro-jitters/loops)
+    const currentCenter = view.getCenter();
+    const dist = Math.sqrt(
+      Math.pow(currentCenter[0] - newCenterX, 2) +
+        Math.pow(currentCenter[1] - newCenterY, 2)
+    );
+
+    // 1 meter is approx 1 unit in Mercator near equator, varies by latitude.
+    // Resolution at zoom 18 is approx 0.6m/pixel.
+    // Let's use a small pixel threshold.
+    if (dist > resolution * 5) {
+      view.animate({
+        center: [newCenterX, newCenterY],
+        duration: 800,
+        easing: (t) => t * (2 - t), // Ease-out
+      });
+    }
+  }
+
   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 crosshairRect = this.crosshairElement.getBoundingClientRect();
+
+      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 center = toLonLat(coordinate);
+
+      const lat = parseFloat(center[1].toFixed(6));
+      const lon = parseFloat(center[0].toFixed(6));
+
+      this.mapUi.updateCreationCoordinates(lat, lon);
+
+      // Update URL without triggering a full refresh
+      // We use replaceWith to avoid cluttering history
+      this.router.replaceWith('place.new', { queryParams: { lat, lon } });
+    }
+
     const size = this.mapInstance.getSize();
     const extent = this.mapInstance.getView().calculateExtent(size);
     const [minLon, minLat] = toLonLat([extent[0], extent[1]]);
@@ -552,6 +724,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,
@@ -579,7 +756,7 @@ export default class MapComponent extends Component {
     if (this.args.isSidebarOpen) {
       // If it's a bookmark, we allow "switching" to it even if sidebar is open
       if (clickedBookmark) {
-        console.log(
+        console.debug(
           'Clicked bookmark while sidebar open (switching):',
           clickedBookmark
         );
@@ -596,11 +773,18 @@ export default class MapComponent extends Component {
 
     // Normal behavior (sidebar is closed)
     if (clickedBookmark) {
-      console.log('Clicked bookmark:', clickedBookmark);
+      console.debug('Clicked bookmark:', clickedBookmark);
       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;
 
@@ -630,21 +814,22 @@ 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 });
   };
 
   <template>
     <div
-      class="map-container"
+      class="map-container {{if @isSidebarOpen 'sidebar-open'}}"
       {{this.setupMap}}
+      {{this.updateInteractions}}
       {{this.updateBookmarks}}
       {{this.updateSelectedPin}}
       {{this.syncPulse}}
+      {{this.syncCreationMode}}
     ></div>
   </template>
 }

app/components/place-details.gjs

@@ -2,20 +2,15 @@ import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { humanizeOsmTag } from '../utils/format-text';
+import { getLocalizedName } from '../utils/osm';
 import Icon from '../components/icon';
+import PlaceEditForm from './place-edit-form';
 
 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 || {};
@@ -26,24 +21,12 @@ export default class PlaceDetails extends Component {
   }
 
   get name() {
-    return (
+    return this.place.title || getLocalizedName(this.tags) || 'Unnamed Place';
-      this.place.title ||
-      this.tags.name ||
-      this.tags['name:en'] ||
-      'Unnamed Place'
-    );
-  }
-
-  @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;
   }
 
@@ -53,28 +36,16 @@ export default class PlaceDetails extends Component {
   }
 
   @action
-  async saveChanges(event) {
+  async saveChanges(changes) {
-    event.preventDefault();
     if (this.args.onSave) {
       await this.args.onSave({
         ...this.place,
-        title: this.editTitle,
+        ...changes,
-        description: this.editDescription,
       });
     }
     this.isEditing = false;
   }
 
-  @action
-  updateTitle(e) {
-    this.editTitle = e.target.value;
-  }
-
-  @action
-  updateDescription(e) {
-    this.editDescription = e.target.value;
-  }
-
   get type() {
     const rawType =
       this.tags.amenity ||
@@ -154,7 +125,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() {
@@ -165,38 +136,19 @@ export default class PlaceDetails extends Component {
   }
 
   get gmapsUrl() {
+    const id = this.place.gmapsId || this.place.osmId;
+    if (!id) return null;
     return `https://www.google.com/maps/search/?api=1&query=${this.name}&query=${this.place.lat},${this.place.lon}`;
   }
 
   <template>
     <div class="place-details">
       {{#if this.isEditing}}
-        <form class="edit-form" {{on "submit" this.saveChanges}}>
+        <PlaceEditForm
-          <div class="form-group">
+          @place={{this.place}}
-            <label for="edit-title">Title</label>
+          @onSave={{this.saveChanges}}
-            <input
+          @onCancel={{this.cancelEditing}}
-              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">Save</button>
-            <button type="button" class="btn btn-outline" {{on "click" this.cancelEditing}}>Cancel</button>
-          </div>
-        </form>
       {{else}}
         <h3>{{this.name}}</h3>
         <p class="place-type">
@@ -305,7 +257,7 @@ export default class PlaceDetails extends Component {
 
         {{#if this.osmUrl}}
           <p class="content-with-icon">
-            <Icon @name="map" @title="OSM ID" />
+            <Icon @name="map" />
             <span>
               <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
                 OpenStreetMap
@@ -314,14 +266,20 @@ export default class PlaceDetails extends Component {
           </p>
         {{/if}}
 
+        {{#if this.gmapsUrl}}
           <p class="content-with-icon">
-          <Icon @name="map" @title="OSM ID" />
+            <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>
           </p>
+        {{/if}}
 
       </div>
     </div>

app/components/place-edit-form.gjs

@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PlaceEditForm extends Component {
+  @tracked title = '';
+  @tracked description = '';
+
+  constructor() {
+    super(...arguments);
+    this.title = this.args.place?.title || '';
+    this.description = this.args.place?.description || '';
+  }
+
+  get shouldAutofocus() {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth > 768;
+    }
+    return false;
+  }
+
+  @action
+  handleSubmit(event) {
+    event.preventDefault();
+    if (this.args.onSave) {
+      this.args.onSave({
+        title: this.title,
+        description: this.description,
+      });
+    }
+  }
+
+  @action
+  updateTitle(e) {
+    this.title = e.target.value;
+  }
+
+  @action
+  updateDescription(e) {
+    this.description = e.target.value;
+  }
+
+  <template>
+    <form class="edit-form" {{on "submit" this.handleSubmit}}>
+      <div class="form-group">
+        <label for="edit-title">Title</label>
+        <input
+          id="edit-title"
+          type="text"
+          value={{this.title}}
+          {{on "input" this.updateTitle}}
+          class="form-control"
+          placeholder="Name of the place"
+          autofocus={{this.shouldAutofocus}}
+        />
+      </div>
+      <div class="form-group">
+        <label for="edit-desc">Description</label>
+        <textarea
+          id="edit-desc"
+          value={{this.description}}
+          {{on "input" this.updateDescription}}
+          class="form-control"
+          rows="3"
+          placeholder="Add some details..."
+        ></textarea>
+      </div>
+      <div class="edit-actions">
+        <button type="submit" class="btn btn-blue">Save</button>
+        <button
+          type="button"
+          class="btn btn-outline"
+          {{on "click" @onCancel}}
+        >Cancel</button>
+      </div>
+    </form>
+  </template>
+}

app/components/places-sidebar.gjs

@@ -7,9 +7,28 @@ import or from 'ember-truth-helpers/helpers/or';
 import PlaceDetails from './place-details';
 import Icon from './icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
+import { getLocalizedName } from '../utils/osm';
 
 export default class PlacesSidebar extends Component {
   @service storage;
+  @service router;
+  @service mapUi;
+
+  @action
+  createNewPlace() {
+    const qp = this.router.currentRoute.queryParams;
+    const lat = qp.lat;
+    const lon = qp.lon;
+
+    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 },
+      });
+    }
+  }
 
   @action
   selectPlace(place) {
@@ -34,19 +53,14 @@ export default class PlacesSidebar extends Component {
       if (confirm(`Delete "${place.title}"?`)) {
         try {
           await this.storage.removePlace(place);
-          console.log('Place deleted:', place.title);
+          console.debug('Place deleted:', place.title);
 
           // 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,
@@ -59,7 +73,6 @@ export default class PlacesSidebar extends Component {
 
           // 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);
           }
 
@@ -75,8 +88,7 @@ export default class PlacesSidebar extends Component {
     } else {
       // It's a fresh POI -> Save it
       const placeData = {
-        title:
+        title: getLocalizedName(place.osmTags, 'Untitled Place'),
-          place.osmTags.name || place.osmTags['name:en'] || 'Untitled Place',
         lat: place.lat,
         lon: place.lon,
         tags: [],
@@ -88,7 +100,7 @@ export default class PlacesSidebar extends Component {
 
       try {
         const savedPlace = await this.storage.storePlace(placeData);
-        console.log('Place saved:', placeData.title);
+        console.debug('Place saved:', placeData.title);
 
         // Notify parent to refresh map bookmarks
         if (this.args.onBookmarkChange) {
@@ -115,7 +127,7 @@ export default class PlacesSidebar extends Component {
   async updateBookmark(updatedPlace) {
     try {
       const savedPlace = await this.storage.updatePlace(updatedPlace);
-      console.log('Place updated:', savedPlace.title);
+      console.debug('Place updated:', savedPlace.title);
 
       // Notify parent to refresh map/lists
       if (this.args.onBookmarkChange) {
@@ -174,13 +186,16 @@ export default class PlacesSidebar extends Component {
                         place.osmTags.name:en
                         "Unnamed Place"
                       }}</div>
-                    <div class="place-type">{{humanizeOsmTag (or
+                    <div class="place-type">{{humanizeOsmTag
+                        (or
                           place.osmTags.amenity
                           place.osmTags.shop
                           place.osmTags.tourism
                           place.osmTags.leisure
                           place.osmTags.historic
-                      )}}</div>
+                          "Point of Interest"
+                        )
+                      }}</div>
                   </button>
                 </li>
               {{/each}}
@@ -188,6 +203,15 @@ export default class PlacesSidebar extends Component {
           {{else}}
             <p class="empty-state">No places found nearby.</p>
           {{/if}}
+
+          <button
+            type="button"
+            class="btn btn-outline create-place"
+            {{on "click" this.createNewPlace}}
+          >
+            <Icon @name="plus" @size={{18}} @color="#007bff" />
+            Create new place
+          </button>
         {{/if}}
       </div>
     </div>

app/components/search-box.gjs

@@ -0,0 +1,193 @@
+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';
+
+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 query = '';
+  @tracked results = [];
+  @tracked isFocused = false;
+  @tracked isLoading = false;
+
+  get showPopover() {
+    return this.isFocused && this.results.length > 0;
+  }
+
+  @action
+  handleInput(event) {
+    this.query = event.target.value;
+    if (this.query.length < 2) {
+      this.results = [];
+      return;
+    }
+
+    this.searchTask.perform();
+  }
+
+  searchTask = task({ restartable: true }, async () => {
+    await timeout(300);
+
+    if (this.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);
+      }
+      const results = await this.photon.search(this.query, lat, lon);
+      this.results = 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 };
+
+    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) {
+    this.query = 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,
+        },
+      });
+    }
+  }
+
+  @action
+  clear() {
+    this.query = '';
+    this.results = [];
+    this.router.transitionTo('index'); // Or stay on current page?
+    // Usually clear just clears the input.
+  }
+
+  <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={{24}} @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={{16}} @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="map-pin" @size={{16}} @color="#666" />
+                  </div>
+                  <div class="result-info">
+                    <span class="result-title">{{result.title}}</span>
+                    {{#if result.description}}
+                      <span class="result-desc">{{result.description}}</span>
+                    {{/if}}
+                  </div>
+                </button>
+              </li>
+            {{/each}}
+          </ul>
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}

app/components/settings-pane.gjs

@@ -4,6 +4,7 @@ import { service } from '@ember/service';
 import { action } from '@ember/object';
 import Icon from '#components/icon';
 import eq from 'ember-truth-helpers/helpers/eq';
+import not from 'ember-truth-helpers/helpers/not';
 
 export default class SettingsPane extends Component {
   @service settings;
@@ -13,6 +14,11 @@ export default class SettingsPane extends Component {
     this.settings.updateOverpassApi(event.target.value);
   }
 
+  @action
+  toggleKinetic(event) {
+    this.settings.updateMapKinetic(event.target.value === 'true');
+  }
+
   <template>
     <div class="sidebar settings-pane">
       <div class="sidebar-header">
@@ -25,6 +31,27 @@ export default class SettingsPane extends Component {
       <div class="sidebar-content">
         <section class="settings-section">
           <h3>Settings</h3>
+          <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
@@ -35,7 +62,10 @@ export default class SettingsPane extends Component {
               {{#each this.settings.overpassApis as |api|}}
                 <option
                   value={{api.url}}
-                  selected={{if (eq api.url this.settings.overpassApi) "selected"}}
+                  selected={{if
+                    (eq api.url this.settings.overpassApi)
+                    "selected"
+                  }}
                 >
                   {{api.name}}
                 </option>
@@ -46,24 +76,45 @@ export default class SettingsPane extends Component {
         <section class="settings-section">
           <h3>About</h3>
           <p>
-            <strong>Marco</strong> (as in <a
+            <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
+              target="_blank"
-            that respects your privacy and choices.
+              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/"
+            Connect your own
-              target="_blank" rel="noopener">remote storage</a> to sync place bookmarks across
+            <a
-            apps and devices.
+              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">
+              <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>)
+              </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">
+              <a
+                href="https://openstreetmap.org/copyright"
+                target="_blank"
+                rel="noopener"
+              >
                 Map Data © OpenStreetMap
               </a>
             </li>

app/controllers/search.js

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

app/router.js

@@ -8,5 +8,6 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('place', { path: '/place/:place_id' });
+  this.route('place.new', { path: '/place/new' });
   this.route('search');
 });

app/routes/place.js

@@ -9,9 +9,13 @@ 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.log(`Fetching explicit OSM ${type}:`, osmId);
+      console.debug(`Fetching explicit OSM ${type}:`, osmId);
       return this.loadOsmPlace(osmId, type);
     }
 
@@ -20,7 +24,7 @@ export default class PlaceRoute extends Route {
     let bookmark = this.storage.findPlaceById(id);
 
     if (bookmark) {
-      console.log('Found in bookmarks:', bookmark.title);
+      console.debug('Found in bookmarks:', bookmark.title);
       return bookmark;
     }
 
@@ -31,7 +35,7 @@ export default class PlaceRoute extends Route {
   async waitForSync() {
     if (this.storage.initialSyncDone) return;
 
-    console.log('Waiting for initial storage sync...');
+    console.debug('Waiting for initial storage sync...');
     const timeout = 5000;
     const start = Date.now();
 
@@ -56,11 +60,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;

app/routes/place/new.js

@@ -0,0 +1,30 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class PlaceNewRoute extends Route {
+  @service mapUi;
+
+  queryParams = {
+    lat: { refreshModel: true },
+    lon: { refreshModel: true },
+  };
+
+  model(params) {
+    return {
+      lat: parseFloat(params.lat),
+      lon: parseFloat(params.lon),
+    };
+  }
+
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    if (model.lat && model.lon) {
+      this.mapUi.updateCreationCoordinates(model.lat, model.lon);
+    }
+    this.mapUi.startCreating();
+  }
+
+  deactivate() {
+    this.mapUi.stopCreating();
+  }
+}

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,20 +14,65 @@ export default class SearchRoute extends Route {
     lat: { refreshModel: true },
     lon: { refreshModel: true },
     q: { refreshModel: true },
+    selected: { refreshModel: true },
   };
 
   async model(params) {
-    // If no coordinates, we can't search
+    const lat = params.lat ? parseFloat(params.lat) : null;
-    if (!params.lat || !params.lon) {
+    const lon = params.lon ? parseFloat(params.lon) : null;
-      return [];
+    let pois = [];
+
+    // Case 1: Text Search (q parameter present)
+    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
 
-    const lat = parseFloat(params.lat);
+      // Fetch POIs from Overpass
-    const lon = parseFloat(params.lon);
+      pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
-    const searchRadius = params.q ? 30 : 50;
 
-    // Fetch POIs
+      // Get cached/saved places in search radius
-    let pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
+      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
@@ -37,6 +83,7 @@ export default class SearchRoute extends Route {
           };
         })
         .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
@@ -49,18 +96,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

@@ -4,6 +4,11 @@ import { tracked } from '@glimmer/tracking';
 export default class MapUiService extends Service {
   @tracked selectedPlace = null;
   @tracked isSearching = false;
+  @tracked isCreating = false;
+  @tracked creationCoordinates = null;
+  @tracked returnToSearch = false;
+  @tracked currentCenter = null;
+  @tracked searchBoxHasFocus = false;
 
   selectPlace(place) {
     this.selectedPlace = place;
@@ -15,9 +20,32 @@ export default class MapUiService extends Service {
 
   startSearch() {
     this.isSearching = true;
+    this.isCreating = false;
   }
 
   stopSearch() {
     this.isSearching = false;
   }
+
+  startCreating() {
+    this.isCreating = true;
+    this.isSearching = false;
+  }
+
+  stopCreating() {
+    this.isCreating = false;
+    this.creationCoordinates = null;
+  }
+
+  updateCreationCoordinates(lat, lon) {
+    this.creationCoordinates = { lat, lon };
+  }
+
+  setSearchBoxFocus(isFocused) {
+    this.searchBoxHasFocus = isFocused;
+  }
+
+  updateCenter(lat, lon) {
+    this.currentCenter = { lat, lon };
+  }
 }

app/services/osm.js

@@ -1,4 +1,5 @@
 import Service, { service } from '@ember/service';
+import { getLocalizedName } from '../utils/osm';
 
 export default class OsmService extends Service {
   @service settings;
@@ -12,7 +13,7 @@ export default class OsmService extends Service {
 
     // Return cached results if the query is identical to the last one
     if (this.lastQueryKey === queryKey && this.cachedResults) {
-      console.log('Returning cached Overpass results for:', queryKey);
+      console.debug('Returning cached Overpass results for:', queryKey);
       return this.cachedResults;
     }
 
@@ -52,7 +53,7 @@ out center;
       return results;
     } catch (e) {
       if (e.name === 'AbortError') {
-        console.log('Overpass request aborted');
+        console.debug('Overpass request aborted');
         return [];
       }
       throw e;
@@ -61,7 +62,7 @@ out center;
 
   normalizePoi(poi) {
     return {
-      title: poi.tags?.name || poi.tags?.['name:en'] || 'Untitled Place',
+      title: getLocalizedName(poi.tags),
       lat: poi.lat || poi.center?.lat,
       lon: poi.lon || poi.center?.lon,
       url: poi.tags?.website,
@@ -78,7 +79,7 @@ out center;
       const res = await fetch(url, options);
 
       if (!res.ok && retries > 0 && [502, 503, 504, 429].includes(res.status)) {
-        console.log(
+        console.warn(
           `Overpass request failed with ${res.status}. Retrying... (${retries} left)`
         );
         await new Promise((r) => setTimeout(r, 1000));
@@ -88,7 +89,7 @@ out center;
       return res;
     } catch (e) {
       if (retries > 0 && e.name !== 'AbortError') {
-        console.log(`Retrying Overpass request... (${retries} left)`);
+        console.debug(`Retrying Overpass request... (${retries} left)`);
         await new Promise((r) => setTimeout(r, 1000));
         return this.fetchWithRetry(url, options, retries - 1);
       }
@@ -123,4 +124,115 @@ 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;
+
+    const mainElement = elements.find(
+      (el) => String(el.id) === String(targetId) && el.type === targetType
+    );
+
+    if (!mainElement) return null;
+
+    let lat = mainElement.lat;
+    let lon = mainElement.lon;
+
+    // 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) {
+        // Simple average center
+        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;
+      }
+    } 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);
+        }
+      });
+
+      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) {
+            way.nodes.forEach((nodeId) => {
+              const node = nodeMap.get(nodeId);
+              if (node) allNodes.push(node);
+            });
+          }
+        }
+      });
+
+      if (allNodes.length > 0) {
+        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;
+      }
+    }
+
+    return {
+      title: getLocalizedName(mainElement.tags),
+      lat,
+      lon,
+      url: mainElement.tags?.website,
+      osmId: String(mainElement.id),
+      osmType: mainElement.type,
+      osmTags: mainElement.tags || {},
+      description: mainElement.tags?.description,
+    };
+  }
 }

app/services/photon.js

@@ -0,0 +1,108 @@
+import Service from '@ember/service';
+
+export default class PhotonService extends Service {
+  baseUrl = 'https://photon.komoot.io/api/';
+
+  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',
+    };
+
+    return {
+      title,
+      lat,
+      lon,
+      osmId: props.osm_id,
+      osmType: osmTypeMap[props.osm_type] || props.osm_type, // 'node', 'way', 'relation'
+      osmTags: props, // Keep all properties as tags for now
+      description: props.name ? description : addressParts.slice(1).join(', '),
+      source: 'photon',
+    };
+  }
+
+  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

@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 
 export default class SettingsService extends Service {
   @tracked overpassApi = 'https://overpass.bke.ro/api/interpreter';
+  @tracked mapKinetic = true;
 
   overpassApis = [
     { name: 'bke.ro', url: 'https://overpass.bke.ro/api/interpreter' },
@@ -19,14 +20,25 @@ 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;
     }
+
+    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));
   }
 }

app/services/storage.js

@@ -23,7 +23,6 @@ export default class StorageService extends Service {
 
   constructor() {
     super(...arguments);
-    console.log('ohai');
 
     this.rs = new RemoteStorage({
       modules: [Places],
@@ -45,13 +44,11 @@ export default class StorageService extends Service {
     });
 
     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 = [];
@@ -77,18 +74,7 @@ export default class StorageService extends Service {
   handlePlaceChange(event) {
     const { newValue, relativePath } = event;
 
-    // Remove old entry if exists
+    // Extract ID from path (structure: <2-char>/<2-char>/<id>)
-    // 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];
 
@@ -128,7 +114,7 @@ export default class StorageService extends Service {
 
     // Recalculate prefixes for the current view
     const required = getGeohashPrefixesInBbox(this.currentBbox);
-    console.log('Reloading view due to changes, prefixes:', required);
+    console.debug('Reloading view due to changes, prefixes:', required);
 
     // Force load these prefixes (bypassing the 'already loaded' check in loadPlacesInBounds)
     this.loadAllPlaces(required);
@@ -144,20 +130,15 @@ export default class StorageService extends Service {
     );
 
     if (missingPrefixes.length === 0) {
-      // console.log('All prefixes already loaded for this view');
       return;
     }
 
-    console.log('Loading new prefixes:', missingPrefixes);
+    console.debug('Loading new prefixes:', missingPrefixes);
 
     // 3. Load places for only the new prefixes
     await this.loadAllPlaces(missingPrefixes);
 
     // 4. Update our tracked list of loaded prefixes
-    // Using assignment to trigger reactivity if needed, though simple push/mutation might suffice
-    // depending on usage. Tracked arrays need reassignment or specific Ember array methods
-    // if we want to observe the array itself, but here we just check inclusion.
-    // Let's do a reassignment to be safe and clean.
     this.loadedPrefixes = [...this.loadedPrefixes, ...missingPrefixes];
     this.currentBbox = bbox;
   }
@@ -195,7 +176,7 @@ export default class StorageService extends Service {
       } else {
         if (!prefixes) this.placesInView = [];
       }
-      console.log('Loaded saved places:', this.placesInView.length);
+      console.debug('Loaded saved places:', this.placesInView.length);
     } catch (e) {
       console.error('Failed to load places:', e);
     }
@@ -216,29 +197,56 @@ export default class StorageService extends Service {
 
   async storePlace(placeData) {
     const savedPlace = await this.places.store(placeData);
-    // Only append if not already there (handlePlaceChange might also fire)
+
+    // Optimistic Update: Global List
     if (!this.savedPlaces.some((p) => p.id === savedPlace.id)) {
       this.savedPlaces = [...this.savedPlaces, savedPlace];
+    } else {
+      // Update if exists
+      this.savedPlaces = this.savedPlaces.map((p) =>
+        p.id === savedPlace.id ? savedPlace : p
+      );
     }
+
+    // Optimistic Update: Map View (same logic as Global List)
+    if (!this.placesInView.some((p) => p.id === savedPlace.id)) {
+      this.placesInView = [...this.placesInView, savedPlace];
+    } else {
+      this.placesInView = this.placesInView.map((p) =>
+        p.id === savedPlace.id ? savedPlace : p
+      );
+    }
+
     return savedPlace;
   }
 
   async updatePlace(placeData) {
     const savedPlace = await this.places.store(placeData);
 
-    // Update local list
+    // Optimistic Update: Global List
     const index = this.savedPlaces.findIndex((p) => p.id === savedPlace.id);
     if (index !== -1) {
       const newPlaces = [...this.savedPlaces];
       newPlaces[index] = savedPlace;
       this.savedPlaces = newPlaces;
     }
+
+    // Update Map View
+    this.placesInView = this.placesInView.map((p) =>
+      p.id === savedPlace.id ? savedPlace : p
+    );
+
     return savedPlace;
   }
 
   async removePlace(place) {
     await this.places.remove(place.id, place.geohash);
+
+    // Update both lists
     this.savedPlaces = this.savedPlaces.filter((p) => p.id !== place.id);
+    if (this.placesInView.length > 0) {
+      this.placesInView = this.placesInView.filter((p) => p.id !== place.id);
+    }
   }
 
   @action

app/styles/app.css

@@ -5,6 +5,11 @@ 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 {
@@ -69,21 +74,16 @@ body {
   pointer-events: auto; /* Re-enable clicks for buttons */
 }
 
-.icon-btn {
+.header-left {
-  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;
+.btn-press {
   transition: transform 0.1s;
 }
 
-.icon-btn:active {
+.btn-press:active {
   transform: scale(0.95);
 }
 
@@ -539,22 +539,40 @@ body {
   }
 }
 
-/* Locate Control */
+/* Zoom Control - Moved to bottom right above attribution */
+.ol-zoom {
+  top: auto !important;
+  left: auto !important;
+  bottom: 2.5em;
+  right: 0.5em;
+}
+
+.ol-touch .ol-zoom {
+  bottom: 3.5em;
+}
+
+/* Locate Control - Above Zoom */
 .ol-control.ol-locate {
-  inset: auto 0.5em 2.5em auto;
+  top: auto !important;
+  left: auto !important;
+  bottom: 6.5em;
+  right: 0.5em;
 }
 
 .ol-touch .ol-control.ol-locate {
-  inset: auto 0.5em 3.5em auto;
+  bottom: 8.5em;
 }
 
-/* Rotate Control */
+/* Rotate Control - Above Locate */
 .ol-rotate {
-  inset: auto 0.5em 5em auto;
+  top: auto !important;
+  left: auto !important;
+  bottom: 9em;
+  right: 0.5em;
 }
 
 .ol-touch .ol-rotate {
-  inset: auto 0.5em 6em auto;
+  bottom: 11.5em;
 }
 
 span.icon {
@@ -649,6 +667,63 @@ span.icon {
   }
 }
 
+/* Map Crosshair for "Create Place" mode */
+.map-crosshair {
+  position: absolute;
+  /* Default Center */
+  top: 50%;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+  color: #333;
+  pointer-events: none;
+  z-index: 2000;
+  display: none;
+  transition:
+    top 0.3s ease,
+    left 0.3s ease;
+}
+
+.map-crosshair.visible {
+  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 */
+.map-container.sidebar-open .map-crosshair {
+  left: calc(50% + 150px);
+}
+
+@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 */
+    top: 25%;
+  }
+}
+
+.helper-text {
+  background: #eef4fc;
+  color: #1a5c9b;
+  padding: 0.75rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+button.create-place {
+  width: 100%;
+  margin: 1.5rem auto;
+}
+
 @media (width <= 768px) {
   .sidebar {
     width: 100%;
@@ -667,3 +742,216 @@ span.icon {
     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 (max-width: 768px) {
+  .search-box {
+    max-width: calc(100vw - 80px); /* Smaller on mobile but wider than before */
+    margin-left: 0.5rem;
+  }
+}
+
+.search-form {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 24px; /* Pill shape */
+  box-shadow: 0 2px 5px rgba(0, 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 rgba(0, 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: rgba(0, 0, 0, 0.05);
+}
+
+/* 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;
+  border-left: 1px solid #ddd; /* Separator like Google Maps */
+  padding-left: 12px;
+  border-radius: 0; /* Reset for separator look */
+}
+
+.search-submit-btn:hover {
+  /* No background on hover if we use separator style, or maybe just change icon color */
+  color: #1a73e8; /* Blue on hover */
+}
+
+/* If we want the separator style, we need to adjust border-radius carefully or use a pseudo element */
+/* Let's stick to a simple button for now, maybe without the separator if it looks cleaner */
+.search-submit-btn {
+  border-left: none; /* Remove separator for cleaner look */
+  padding-left: 8px;
+  border-radius: 50%;
+}
+.search-submit-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+  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: rgba(0, 0, 0, 0.05);
+  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 rgba(0, 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: #f5f5f5;
+  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;
+}

app/templates/application.gjs

@@ -21,13 +21,14 @@ export default class ApplicationComponent extends Component {
     // This helps the map know if it should shift the center or adjust view.
     return (
       this.router.currentRouteName === 'place' ||
+      this.router.currentRouteName === 'place.new' ||
       this.router.currentRouteName === 'search'
     );
   }
 
   constructor() {
     super(...arguments);
-    console.log('Application component constructed');
+    console.debug('Application component constructed');
     // Access the service to ensure it is instantiated
     this.storage;
   }

app/templates/place.gjs

@@ -63,7 +63,7 @@ export default class PlaceTemplate extends Component {
 
   @action
   handleUpdate(newPlace) {
-    console.log('Updating local place state:', newPlace);
+    console.debug('Updating local place state:', newPlace);
     this.localPlace = newPlace;
     this.storage.notifyChange();
   }
@@ -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 we came from search results, go back in history
-      if (window.history.length > 1) {
+      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/place/new.gjs

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import PlaceEditForm from '#components/place-edit-form';
+import Icon from '#components/icon';
+
+export default class PlaceNewTemplate extends Component {
+  @service router;
+  @service storage;
+  @service mapUi;
+
+  get initialPlace() {
+    return {
+      title: '',
+      description: '',
+    };
+  }
+
+  @action
+  close() {
+    this.router.transitionTo('index');
+  }
+
+  @action
+  async savePlace(changes) {
+    try {
+      // Use coordinates from Map UI (which tracks the crosshair center)
+      // Fallback to URL params if map state isn't ready
+      const center = this.mapUi.creationCoordinates || {
+        lat: this.args.model.lat,
+        lon: this.args.model.lon,
+      };
+
+      const lat = parseFloat(center.lat.toFixed(6));
+      const lon = parseFloat(center.lon.toFixed(6));
+
+      const placeData = {
+        title: changes.title || 'Untitled Place',
+        description: changes.description,
+        lat: lat,
+        lon: lon,
+        tags: [],
+        osmTags: {},
+      };
+
+      const savedPlace = await this.storage.storePlace(placeData);
+      console.debug('Created private place:', savedPlace.title);
+
+      // Transition to the new place
+      this.router.replaceWith('place', savedPlace);
+    } catch (e) {
+      console.error('Failed to create place:', e);
+      alert('Failed to create place: ' + e.message);
+    }
+  }
+
+  <template>
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h2><Icon @name="plus-circle" @size={{20}} @color="#ea4335" />
+          New Place</h2>
+        <button type="button" class="close-btn" {{on "click" this.close}}><Icon
+            @name="x"
+            @size={{20}}
+            @color="#333"
+          /></button>
+      </div>
+
+      <div class="sidebar-content">
+        <p class="helper-text">
+          Drag the map to position the crosshair.
+        </p>
+
+        <PlaceEditForm
+          @place={{this.initialPlace}}
+          @onSave={{this.savePlace}}
+          @onCancel={{this.close}}
+        />
+      </div>
+    </div>
+  </template>
+}

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/osm.js

@@ -0,0 +1,32 @@
+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;
+}

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',
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.9.0",
+  "version": "1.11.4",
   "private": true,
   "description": "Unhosted maps app",
   "repository": {
@@ -34,6 +34,7 @@
     "lint:js:fix": "eslint . --fix",
     "start": "vite",
     "test": "vite build --mode development && testem ci --port 0",
+    "preversion": "pnpm test",
     "version": "pnpm build && git add release/"
   },
   "devDependencies": {
@@ -100,6 +101,7 @@
     "edition": "octane"
   },
   "dependencies": {
+    "ember-concurrency": "^5.2.0",
     "ember-lifeline": "^7.0.0"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      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))
@@ -1436,66 +1439,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==}
@@ -2519,6 +2535,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 +2688,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'}
@@ -8110,6 +8138,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 +8497,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

@@ -26,8 +26,8 @@
     <meta name="msapplication-TileColor" content="#F6E9A6">
     <meta name="msapplication-TileImage" content="/icons/icon-144.png">
 
-  <script type="module" crossorigin src="/assets/main-DwYp7tls.js"></script>
+  <script type="module" crossorigin src="/assets/main-ji2SNMnp.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-BZSIy5va.css">
+  <link rel="stylesheet" crossorigin href="/assets/main-G8wPYi_P.css">
 </head>
   <body>
  </body>

tests/acceptance/navigation-test.js

@@ -0,0 +1,114 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click, settled } 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;
+  }
+  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,147 @@
+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;
+      }
+      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('.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;
+      }
+      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('.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;
+      }
+      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');
+  });
+});

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

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render } from '@ember/test-helpers';
+import AppHeader from 'marco/components/app-header';
+
+module('Integration | Component | app-header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the search box', async function (assert) {
+    this.noop = () => {};
+    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');
+  });
+});

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

@@ -0,0 +1,37 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'marco/tests/helpers';
+import { render } from '@ember/test-helpers';
+import PlaceDetails from 'marco/components/place-details';
+
+module('Integration | Component | place-details', function (hooks) {
+  setupRenderingTest(hooks);
+
+  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();
+  });
+});

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

@@ -0,0 +1,131 @@
+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,"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']);
+  });
+});

tests/unit/services/osm-test.js

@@ -0,0 +1,113 @@
+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 calculates centroid for relations with member nodes', 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 },
+      { id: 2, type: 'node', lat: 30, lon: 30 },
+    ];
+
+    const result = service.normalizeOsmApiData(elements, 789, 'relation');
+
+    assert.strictEqual(result.title, 'Test Relation');
+    assert.strictEqual(result.lat, 20); // (10+30)/2
+    assert.strictEqual(result.lon, 20); // (10+30)/2
+    assert.strictEqual(result.osmId, '789');
+    assert.strictEqual(result.osmType, 'relation');
+  });
+
+  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');
+  });
+});

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
+  });
+});