Add full-text search

Add a search box with a quick results popover, as well full results in
the sidebar on pressing enter.

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;
@@ -31,6 +32,8 @@ export default class AppHeaderComponent extends Component {
         >
           <Icon @name="menu" @size={{24}} @color="#333" />
         </button>
+
+        <SearchBox />
       </div>
 
       <div class="header-right">

app/components/map.gjs

@@ -110,6 +110,10 @@ export default class MapComponent extends Component {
       }),
     });
 
+    // Initialize the UI service with the map center
+    const initialCenter = toLonLat(view.getCenter());
+    this.mapUi.updateCenter(initialCenter[1], initialCenter[0]);
+
     apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty');
 
     this.searchOverlayElement = document.createElement('div');
@@ -645,12 +649,18 @@ export default class MapComponent extends Component {
   handleMapMove = async () => {
     if (!this.mapInstance) return;
 
+    const view = this.mapInstance.getView();
+    const center = toLonLat(view.getCenter());
+    this.mapUi.updateCenter(center[1], center[0]);
+
     // If in creation mode, update the coordinates in the service AND the URL
     if (this.mapUi.isCreating) {
       // Calculate coordinates under the crosshair element
       // We need the pixel position of the crosshair relative to the map viewport
       // The crosshair is positioned via CSS, so we can use getBoundingClientRect
-      const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect();
+      const mapRect = this.mapInstance
+        .getTargetElement()
+        .getBoundingClientRect();
       const crosshairRect = this.crosshairElement.getBoundingClientRect();
 
       const centerX =
@@ -786,10 +796,9 @@ export default class MapComponent extends Component {
     const queryParams = {
       lat: lat.toFixed(6),
       lon: lon.toFixed(6),
+      q: null, // Clear q to force spatial search
+      selected: selectedFeatureName || null,
     };
-    if (selectedFeatureName) {
-      queryParams.q = selectedFeatureName;
-    }
 
     this.router.transitionTo('search', { queryParams });
   };

app/components/places-sidebar.gjs

@@ -23,8 +23,10 @@ export default class PlacesSidebar extends Component {
     if (lat && lon) {
       this.router.transitionTo('place.new', { queryParams: { lat, lon } });
     } else {
-       // Fallback (shouldn't happen in search context)
+      // Fallback (shouldn't happen in search context)
-       this.router.transitionTo('place.new', { queryParams: { lat: 0, lon: 0 } });
+      this.router.transitionTo('place.new', {
+        queryParams: { lat: 0, lon: 0 },
+      });
     }
   }
 
@@ -152,7 +154,7 @@ export default class PlacesSidebar extends Component {
             {{on "click" this.clearSelection}}
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
-        <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
+          <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
         {{/if}}
         <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
             @name="x"
@@ -184,14 +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
-                        place.osmTags.amenity
+                        (or
-                        place.osmTags.shop
+                          place.osmTags.amenity
-                        place.osmTags.tourism
+                          place.osmTags.shop
-                        place.osmTags.leisure
+                          place.osmTags.tourism
-                        place.osmTags.historic
+                          place.osmTags.leisure
-                        "Point of Interest"
+                          place.osmTags.historic
-                      )}}</div>
+                          "Point of Interest"
+                        )
+                      }}</div>
                   </button>
                 </li>
               {{/each}}

app/components/search-box.gjs

@@ -0,0 +1,178 @@
+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 { debounce } from '@ember/runloop';
+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;
+    }
+
+    debounce(this, this.performSearch, 300);
+  }
+
+  async performSearch() {
+    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;
+    if (this.query.length >= 2 && this.results.length === 0) {
+      this.performSearch();
+    }
+  }
+
+  @action
+  handleBlur() {
+    // Delay hiding so clicks on results can register
+    setTimeout(() => {
+      this.isFocused = false;
+    }, 200);
+  }
+
+  @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}}>
+        <div class="search-icon">
+          <Icon @name="search" @size={{18}} @color="#666" />
+        </div>
+        <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"
+        />
+        {{#if this.query}}
+          <button
+            type="button"
+            class="search-clear-btn"
+            {{on "click" this.clear}}
+            aria-label="Clear"
+          >
+            <Icon @name="x" @size={{16}} @color="#999" />
+          </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

@@ -62,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>
@@ -73,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>
-            href="https://en.wikipedia.org/wiki/Marco_Polo"
+            (as in
-            target="_blank" rel="noopener">Marco Polo</a>) is an unhosted maps application
+            <a
-            that respects your privacy and choices.
+              href="https://en.wikipedia.org/wiki/Marco_Polo"
+              target="_blank"
+              rel="noopener"
+            >Marco Polo</a>) is an unhosted maps application that respects your
+            privacy and choices.
           </p>
           <p>
-            Connect your own <a href="https://remotestorage.io/"
+            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/routes/search.js

@@ -5,6 +5,7 @@ import { getDistance } from '../utils/geo';
 
 export default class SearchRoute extends Route {
   @service osm;
+  @service photon;
   @service mapUi;
   @service storage;
   @service router;
@@ -13,50 +14,76 @@ 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;
+      });
 
-    // Get cached/saved places in search radius
+      // Merge local matches
-    const localMatches = this.storage.savedPlaces.filter((p) => {
+      localMatches.forEach((local) => {
-      const dist = getDistance(lat, lon, p.lat, p.lon);
+        const exists = pois.find(
-      return dist <= searchRadius;
+          (poi) =>
-    });
+            (local.osmId && poi.osmId === local.osmId) ||
+            (poi.id && poi.id === local.id)
+        );
 
-    // Add local matches to the list if they aren't already there
+        if (!exists) {
-    // We use osmId to deduplicate if possible
+          pois.push(local);
-    localMatches.forEach((local) => {
+        }
-      const exists = pois.find(
+      });
-        (poi) =>
-          (local.osmId && poi.osmId === local.osmId) ||
-          (poi.id && poi.id === local.id)
-      );
 
-      if (!exists) {
+      // Sort by distance from click
-        pois.push(local);
+      pois = pois
-      }
+        .map((p) => {
-    });
+          return {
-
+            ...p,
-    // Sort by distance from click
+            _distance: getDistance(lat, lon, p.lat, p.lon),
-    pois = pois
+          };
-      .map((p) => {
+        })
-        return {
+        .sort((a, b) => a._distance - b._distance);
-          ...p,
+    }
-          _distance: getDistance(lat, lon, p.lat, p.lon),
-        };
-      })
-      .sort((a, b) => a._distance - b._distance);
 
     // Check if any of these are already bookmarked
     // We resolve them to the bookmark version if they exist
@@ -69,18 +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

@@ -7,6 +7,7 @@ export default class MapUiService extends Service {
   @tracked isCreating = false;
   @tracked creationCoordinates = null;
   @tracked returnToSearch = false;
+  @tracked currentCenter = null;
 
   selectPlace(place) {
     this.selectedPlace = place;
@@ -38,4 +39,8 @@ export default class MapUiService extends Service {
   updateCreationCoordinates(lat, lon) {
     this.creationCoordinates = { lat, lon };
   }
+
+  updateCenter(lat, lon) {
+    this.currentCenter = { lat, lon };
+  }
 }

app/services/photon.js

@@ -12,8 +12,8 @@ export default class PhotonService extends Service {
     });
 
     if (lat && lon) {
-      params.append('lat', String(lat));
+      params.append('lat', parseFloat(lat).toFixed(4));
-      params.append('lon', String(lon));
+      params.append('lon', parseFloat(lon).toFixed(4));
     }
 
     const url = `${this.baseUrl}?${params.toString()}`;
@@ -61,12 +61,18 @@ export default class PhotonService extends Service {
     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: props.osm_type, // 'N', 'W', 'R'
+      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',

app/styles/app.css

@@ -74,6 +74,11 @@ body {
   pointer-events: auto; /* Re-enable clicks for buttons */
 }
 
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
 .btn-press {
   transition: transform 0.1s;
 }
@@ -750,3 +755,158 @@ button.create-place {
     padding-bottom: env(safe-area-inset-bottom, 20px);
   }
 }
+
+/* Search Box Component */
+.search-box {
+  position: relative;
+  width: 100%;
+  max-width: 320px;
+  margin-left: 1rem;
+  z-index: 3002; /* Higher than menu button to be safe */
+}
+
+@media (max-width: 768px) {
+  .search-box {
+    max-width: 200px; /* Smaller on mobile */
+    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.75rem;
+  height: 40px;
+  transition: box-shadow 0.2s;
+}
+
+.search-form:focus-within {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.search-icon {
+  display: flex;
+  align-items: center;
+  color: #666;
+  margin-right: 0.5rem;
+}
+
+.search-input {
+  border: none;
+  background: transparent;
+  flex: 1;
+  height: 100%;
+  font-size: 1rem;
+  color: #333;
+  outline: none;
+  width: 100%;
+  padding: 0;
+  /* 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;
+}
+
+.search-clear-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: #999;
+  border-radius: 50%;
+}
+
+.search-clear-btn:hover {
+  background: #f0f0f0;
+  color: #666;
+}
+
+/* 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;
+}

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').exists('Menu button is present');
+  });
+});

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,128 @@
+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);
+
+    await render(<template><SearchBox /></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 };
+    }
+    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);
+
+    await render(<template><SearchBox /></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 };
+    }
+    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);
+
+    await render(<template><SearchBox /></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/photon-test.js

@@ -9,6 +9,34 @@ module('Unit | Service | photon', function (hooks) {
     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');
 
@@ -43,6 +71,7 @@ module('Unit | Service | photon', function (hooks) {
       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;
     }
@@ -87,4 +116,22 @@ module('Unit | Service | photon', function (hooks) {
     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
+  });
 });