Add map markers for search results

And abort ongoing searches when there's a new query

app/components/app-header.gjs

@@ -6,10 +6,16 @@ import { on } from '@ember/modifier';
 import Icon from '#components/icon';
 import UserMenu from '#components/user-menu';
 import SearchBox from '#components/search-box';
+import CategoryChips from '#components/category-chips';
 
 export default class AppHeaderComponent extends Component {
   @service storage;
   @tracked isUserMenuOpen = false;
+  @tracked searchQuery = '';
+
+  get hasQuery() {
+    return !!this.searchQuery;
+  }
 
   @action
   toggleUserMenu() {
@@ -21,10 +27,30 @@ export default class AppHeaderComponent extends Component {
     this.isUserMenuOpen = false;
   }
 
+  @action
+  handleQueryChange(query) {
+    this.searchQuery = query;
+  }
+
+  @action
+  handleChipSelect(category) {
+    this.searchQuery = category.label;
+    // The existing logic in CategoryChips triggers the route transition.
+    // This update simply fills the search box.
+  }
+
   <template>
     <header class="app-header">
       <div class="header-left">
-        <SearchBox @onToggleMenu={{@onToggleMenu}} />
+        <SearchBox
+          @query={{this.searchQuery}}
+          @onToggleMenu={{@onToggleMenu}}
+          @onQueryChange={{this.handleQueryChange}}
+        />
+      </div>
+
+      <div class="header-center {{if this.hasQuery 'searching'}}">
+        <CategoryChips @onSelect={{this.handleChipSelect}} />
       </div>
 
       <div class="header-right">

app/components/category-chips.gjs

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

app/components/icon.gjs

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { getIcon } from '../utils/icons';
+import { getIcon, isIconFilled } from '../utils/icons';
 
 export default class IconComponent extends Component {
   get svg() {
@@ -25,10 +25,14 @@ export default class IconComponent extends Component {
     return this.args.title || '';
   }
 
+  get isFilled() {
+    return this.args.filled || isIconFilled(this.args.name);
+  }
+
   <template>
     {{#if this.svg}}
       <span
-        class="icon {{if @filled 'icon-filled'}}"
+        class="icon {{if this.isFilled 'icon-filled'}}"
         style={{this.style}}
         title={{this.title}}
       >

app/components/map.gjs

@@ -16,7 +16,7 @@ import Feature from 'ol/Feature.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import Point from 'ol/geom/Point.js';
 import Geolocation from 'ol/Geolocation.js';
-import { Style, Circle, Fill, Stroke } from 'ol/style.js';
+import { Style, Circle, Fill, Stroke, Icon } from 'ol/style.js';
 import { apply } from 'ol-mapbox-style';
 
 export default class MapComponent extends Component {
@@ -28,6 +28,7 @@ export default class MapComponent extends Component {
 
   mapInstance;
   bookmarkSource;
+  searchResultsSource;
   selectedShapeSource;
   searchOverlay;
   searchOverlayElement;
@@ -110,6 +111,47 @@ export default class MapComponent extends Component {
       zIndex: 10, // Ensure it sits above the map tiles
     });
 
+    // Create a vector source and layer for search results
+    this.searchResultsSource = new VectorSource();
+    let cachedSearchResultSvgUrl = null;
+
+      const searchResultStyle = (feature) => {
+      if (!cachedSearchResultSvgUrl) {
+        const markerColor =
+          getComputedStyle(document.documentElement)
+            .getPropertyValue('--marker-color-primary')
+            .trim() || '#ea4335';
+
+        const svg = `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 40" width="40" height="50">
+            <defs>
+              <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+                <feDropShadow dx="0" dy="2" stdDeviation="1.5" flood-color="black" flood-opacity="0.3"/>
+              </filter>
+            </defs>
+            <path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 12 24 12 24C12 24 22 17.5 22 12C22 6.5 17.5 2 12 2Z" fill="white" filter="url(#shadow)"/>
+            <circle cx="12" cy="12" r="8" fill="${markerColor}"/>
+          </svg>
+        `;
+        cachedSearchResultSvgUrl =
+          'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg.trim());
+      }
+
+      return new Style({
+        image: new Icon({
+          src: cachedSearchResultSvgUrl,
+          anchor: [0.5, 0.65],
+          scale: 1,
+        }),
+      });
+    };
+
+    const searchResultLayer = new VectorLayer({
+      source: this.searchResultsSource,
+      style: searchResultStyle,
+      zIndex: 11, // Above bookmarks (10)
+    });
+
     // Default view settings
     let center = [14.21683569, 27.060114248];
     let zoom = 2.661;
@@ -143,7 +185,7 @@ export default class MapComponent extends Component {
 
     this.mapInstance = new Map({
       target: element,
-      layers: [openfreemap, selectedShapeLayer, bookmarkLayer],
+      layers: [openfreemap, selectedShapeLayer, searchResultLayer, bookmarkLayer],
       view: view,
       controls: defaultControls({
         zoom: true,
@@ -178,7 +220,7 @@ export default class MapComponent extends Component {
     const pinIcon = document.createElement('div');
     pinIcon.className = 'selected-pin';
     // 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>`;
+    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: var(--marker-color-dark); stroke: none;"></circle></svg>`;
 
     const pinShadow = document.createElement('div');
     pinShadow.className = 'selected-pin-shadow';
@@ -464,6 +506,36 @@ export default class MapComponent extends Component {
     );
   });
 
+  updateSearchResults = modifier(() => {
+    if (!this.searchResultsSource) return;
+
+    this.searchResultsSource.clear();
+    const results = this.mapUi.searchResults;
+
+    if (!results || results.length === 0) return;
+
+    const features = [];
+    results.forEach((place) => {
+      // Don't render if it's already a bookmark to avoid clutter/overlap
+      // Although user might want to see it's a search result...
+      // Let's render it, but z-index handles overlap (bookmarks are higher)
+      if (place.lat && place.lon) {
+        const feature = new Feature({
+          geometry: new Point(fromLonLat([place.lon, place.lat])),
+          name: place.title,
+          id: place.id,
+          isSearchResult: true,
+          originalPlace: place,
+        });
+        features.push(feature);
+      }
+    });
+
+    if (features.length > 0) {
+      this.searchResultsSource.addFeatures(features);
+    }
+  });
+
   // Track the selected place from the UI Service (Router -> Map)
   updateSelectedPin = modifier(() => {
     const selected = this.mapUi.selectedPlace;
@@ -914,6 +986,7 @@ export default class MapComponent extends Component {
     const [maxLon, maxLat] = toLonLat([extent[2], extent[3]]);
 
     const bbox = { minLat, minLon, maxLat, maxLon };
+    this.mapUi.updateBounds(bbox);
     await this.storage.loadPlacesInBounds(bbox);
     this.loadBookmarks(this.storage.placesInView);
 
@@ -945,6 +1018,7 @@ export default class MapComponent extends Component {
       hitTolerance: 10,
     });
     let clickedBookmark = null;
+    let clickedSearchResult = null;
     let selectedFeatureName = null;
 
     if (features && features.length > 0) {
@@ -953,8 +1027,12 @@ export default class MapComponent extends Component {
         console.debug(f);
       }
       const bookmarkFeature = features.find((f) => f.get('isBookmark'));
+      const searchResultFeature = features.find((f) => f.get('isSearchResult'));
+
       if (bookmarkFeature) {
         clickedBookmark = bookmarkFeature.get('originalPlace');
+      } else if (searchResultFeature) {
+        clickedSearchResult = searchResultFeature.get('originalPlace');
       }
       // Also get visual props for standard map click logic later
       const props = features[0].getProperties();
@@ -965,14 +1043,15 @@ export default class MapComponent extends Component {
 
     // Special handling when sidebar is OPEN
     if (this.args.isSidebarOpen) {
-      // If it's a bookmark, we allow "switching" to it even if sidebar is open
-      if (clickedBookmark) {
+      // If it's a bookmark or search result, we allow "switching" to it even if sidebar is open
+      const targetPlace = clickedBookmark || clickedSearchResult;
+      if (targetPlace) {
         console.debug(
-          'Clicked bookmark while sidebar open (switching):',
-          clickedBookmark
+          'Clicked feature while sidebar open (switching):',
+          targetPlace
         );
         this.mapUi.preventNextZoom = true;
-        this.router.transitionTo('place', clickedBookmark);
+        this.router.transitionTo('place', targetPlace);
         return;
       }
 
@@ -991,6 +1070,13 @@ export default class MapComponent extends Component {
       return;
     }
 
+    if (clickedSearchResult) {
+      console.debug('Clicked search result:', clickedSearchResult);
+      this.mapUi.preventNextZoom = true;
+      this.router.transitionTo('place', clickedSearchResult);
+      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();
@@ -1040,6 +1126,7 @@ export default class MapComponent extends Component {
       {{this.setupMap}}
       {{this.updateInteractions}}
       {{this.updateBookmarks}}
+      {{this.updateSearchResults}}
       {{this.updateSelectedPin}}
       {{this.syncPulse}}
       {{this.syncCreationMode}}

app/components/place-details.gjs

@@ -318,7 +318,7 @@ export default class PlaceDetails extends Component {
 
         {{#if this.cuisine}}
           <p class="content-with-icon">
-            <Icon @name="fork-and-knife" @title="Cuisine" @filled={{true}} />
+            <Icon @name="fork-and-knife" @title="Cuisine" />
             <span>
               {{this.cuisine}}
             </span>
@@ -393,7 +393,7 @@ export default class PlaceDetails extends Component {
 
         {{#if this.wikipedia}}
           <p class="content-with-icon">
-            <Icon @name="wikipedia" @title="Wikipedia" @filled={{true}} />
+            <Icon @name="wikipedia" @title="Wikipedia" />
             <span>
               <a
                 href="https://wikipedia.org/wiki/{{this.wikipedia}}"

app/components/places-sidebar.gjs

@@ -146,7 +146,7 @@ export default class PlacesSidebar extends Component {
 
   get isNearbySearch() {
     const qp = this.router.currentRoute.queryParams;
-    return !qp.q && qp.lat && qp.lon;
+    return !qp.q && !qp.category && qp.lat && qp.lon;
   }
 
   <template>

app/components/search-box.gjs

@@ -7,6 +7,7 @@ import { fn } from '@ember/helper';
 import { task, timeout } from 'ember-concurrency';
 import Icon from '#components/icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
+import { POI_CATEGORIES } from '../utils/poi-categories';
 import eq from 'ember-truth-helpers/helpers/eq';
 
 export default class SearchBoxComponent extends Component {
@@ -15,30 +16,45 @@ export default class SearchBoxComponent extends Component {
   @service mapUi;
   @service map; // Assuming we might need map context, but mostly we use router
 
-  @tracked query = '';
+  @tracked _internalQuery = '';
   @tracked results = [];
   @tracked isFocused = false;
   @tracked isLoading = false;
 
+  get query() {
+    return this.args.query ?? this._internalQuery;
+  }
+
+  set query(value) {
+    this._internalQuery = value;
+  }
+
   get showPopover() {
     return this.isFocused && this.results.length > 0;
   }
 
   @action
   handleInput(event) {
-    this.query = event.target.value;
-    if (this.query.length < 2) {
+    const value = event.target.value;
+    this.query = value;
+    if (this.args.onQueryChange) {
+      this.args.onQueryChange(value);
+    }
+
+    if (value.length < 2) {
       this.results = [];
       return;
     }
 
-    this.searchTask.perform();
+    this.searchTask.perform(value);
   }
 
-  searchTask = task({ restartable: true }, async () => {
+  searchTask = task({ restartable: true }, async (term) => {
     await timeout(300);
 
-    if (this.query.length < 2) return;
+    const query = typeof term === 'string' ? term : this.query;
+
+    if (query.length < 2) return;
 
     this.isLoading = true;
     try {
@@ -47,8 +63,20 @@ export default class SearchBoxComponent extends Component {
       if (this.mapUi.currentCenter) {
         ({ lat, lon } = this.mapUi.currentCenter);
       }
-      const results = await this.photon.search(this.query, lat, lon);
-      this.results = results;
+
+      // Filter categories
+      const q = query.toLowerCase();
+      const categoryMatches = POI_CATEGORIES.filter((c) =>
+        c.label.toLowerCase().includes(q)
+      ).map((c) => ({
+        source: 'category',
+        title: c.label,
+        id: c.id,
+        icon: 'search',
+      }));
+
+      const results = await this.photon.search(query, lat, lon);
+      this.results = [...categoryMatches, ...results];
     } catch (e) {
       console.error('Search failed', e);
       this.results = [];
@@ -80,7 +108,7 @@ export default class SearchBoxComponent extends Component {
     event.preventDefault();
     if (!this.query) return;
 
-    let queryParams = { q: this.query, selected: null };
+    let queryParams = { q: this.query, selected: null, category: null };
 
     if (this.mapUi.currentCenter) {
       const { lat, lon } = this.mapUi.currentCenter;
@@ -94,7 +122,37 @@ export default class SearchBoxComponent extends Component {
 
   @action
   selectResult(place) {
+    if (place.source === 'category') {
+      this.query = place.title;
+      if (this.args.onQueryChange) {
+        this.args.onQueryChange(place.title);
+      }
+      this.results = [];
+
+      let lat = null,
+        lon = null;
+      if (this.mapUi.currentCenter) {
+        ({ lat, lon } = this.mapUi.currentCenter);
+        lat = lat?.toString();
+        lon = lon?.toString();
+      }
+
+      this.router.transitionTo('search', {
+        queryParams: {
+          q: place.title,
+          category: place.id,
+          selected: null,
+          lat: lat,
+          lon: lon,
+        },
+      });
+      return;
+    }
+
     this.query = place.title;
+    if (this.args.onQueryChange) {
+      this.args.onQueryChange(place.title);
+    }
     this.results = []; // Hide popover
 
     // If it has an OSM ID, go to place details
@@ -112,6 +170,7 @@ export default class SearchBoxComponent extends Component {
           lat: place.lat,
           lon: place.lon,
           selected: null,
+          category: null,
         },
       });
     }
@@ -121,8 +180,10 @@ export default class SearchBoxComponent extends Component {
   clear() {
     this.query = '';
     this.results = [];
-    this.router.transitionTo('index'); // Or stay on current page?
-    // Usually clear just clears the input.
+    if (this.args.onQueryChange) {
+      this.args.onQueryChange('');
+    }
+    this.router.transitionTo('index');
   }
 
   <template>
@@ -176,7 +237,11 @@ export default class SearchBoxComponent extends Component {
                   {{on "click" (fn this.selectResult result)}}
                 >
                   <div class="result-icon">
-                    <Icon @name="map-pin" @size={{16}} @color="#666" />
+                    <Icon
+                      @name={{if result.icon result.icon "map-pin"}}
+                      @size={{16}}
+                      @color="#666"
+                    />
                   </div>
                   <div class="result-info">
                     <span class="result-title">{{result.title}}</span>

app/controllers/search.js

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

app/routes/index.js

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

app/routes/search.js

@@ -15,6 +15,7 @@ export default class SearchRoute extends Route {
     lon: { refreshModel: true },
     q: { refreshModel: true },
     selected: { refreshModel: true },
+    category: { refreshModel: true },
   };
 
   async model(params) {
@@ -22,8 +23,37 @@ export default class SearchRoute extends Route {
     const lon = params.lon ? parseFloat(params.lon) : null;
     let pois = [];
 
+    // Case 0: Category Search (category parameter present)
+    if (params.category && lat && lon) {
+      // We need bounds. If we have active map state, use it.
+      let bounds = this.mapUi.currentBounds;
+
+      // If we don't have bounds (direct URL visit), estimate them from lat/lon/zoom(16)
+      // or just use a fixed box around the center.
+      if (!bounds) {
+        // Approximate 0.01 degrees ~ 1km at equator. A viewport is roughly 0.02x0.01 at zoom 16?
+        // Let's take a safe box of ~1km radius.
+        const delta = 0.01;
+        bounds = {
+          minLat: lat - delta,
+          maxLat: lat + delta,
+          minLon: lon - delta,
+          maxLon: lon + delta,
+        };
+      }
+
+      pois = await this.osm.getCategoryPois(bounds, params.category, lat, lon);
+
+      // Sort by distance from center
+      pois = pois
+        .map((p) => ({
+          ...p,
+          _distance: getDistance(lat, lon, p.lat, p.lon),
+        }))
+        .sort((a, b) => a._distance - b._distance);
+    }
     // Case 1: Text Search (q parameter present)
-    if (params.q) {
+    else if (params.q) {
       // Search with Photon (using lat/lon for bias if available)
       pois = await this.photon.search(params.q, lat, lon);
 
@@ -139,6 +169,7 @@ export default class SearchRoute extends Route {
     super.setupController(controller, model);
     // Ensure pulse is stopped if we reach here
     this.mapUi.stopSearch();
+    this.mapUi.setSearchResults(model);
   }
 
   @action

app/services/map-ui.js

@@ -8,9 +8,11 @@ export default class MapUiService extends Service {
   @tracked creationCoordinates = null;
   @tracked returnToSearch = false;
   @tracked currentCenter = null;
+  @tracked currentBounds = null;
   @tracked searchBoxHasFocus = false;
   @tracked selectionOptions = {};
   @tracked preventNextZoom = false;
+  @tracked searchResults = [];
 
   selectPlace(place, options = {}) {
     this.selectedPlace = place;
@@ -23,6 +25,14 @@ export default class MapUiService extends Service {
     this.preventNextZoom = false;
   }
 
+  setSearchResults(results) {
+    this.searchResults = results || [];
+  }
+
+  clearSearchResults() {
+    this.searchResults = [];
+  }
+
   startSearch() {
     this.isSearching = true;
     this.isCreating = false;
@@ -54,4 +64,8 @@ export default class MapUiService extends Service {
   updateCenter(lat, lon) {
     this.currentCenter = { lat, lon };
   }
+
+  updateBounds(bounds) {
+    this.currentBounds = bounds;
+  }
 }

app/services/osm.js

@@ -1,5 +1,6 @@
 import Service, { service } from '@ember/service';
 import { getLocalizedName, getPlaceType } from '../utils/osm';
+import { getCategoryById } from '../utils/poi-categories';
 
 export default class OsmService extends Service {
   @service settings;
@@ -76,6 +77,70 @@ out center;
     }
   }
 
+  async getCategoryPois(bounds, categoryId, lat, lon) {
+    const category = getCategoryById(categoryId);
+    if (!category || !bounds) return [];
+
+    const queryKey = lat && lon ? `cat:${categoryId}:${lat}:${lon}` : null;
+
+    if (queryKey && this.lastQueryKey === queryKey && this.cachedResults) {
+      console.debug('Returning cached category results for:', queryKey);
+      return this.cachedResults;
+    }
+
+    if (this.controller) {
+      this.controller.abort();
+    }
+    this.controller = new AbortController();
+    const signal = this.controller.signal;
+
+    const { minLat, minLon, maxLat, maxLon } = bounds;
+
+    // Build the query parts for each filter string and type
+    const queryParts = [];
+
+    // Default types if not specified (legacy fallback)
+    const types = category.types || ['node', 'way', 'relation'];
+
+    category.filter.forEach((filterString) => {
+      types.forEach((type) => {
+        // We ensure we only fetch named POIs to reduce noise
+        queryParts.push(`${type}${filterString}[~"^name"~"."];`);
+      });
+    });
+
+    const query = `
+[out:json][timeout:25][bbox:${minLat},${minLon},${maxLat},${maxLon}];
+(
+  ${queryParts.join('\n  ')}
+);
+out center;
+    `.trim();
+
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;
+
+    try {
+      const res = await this.fetchWithRetry(url, { signal });
+      if (!res.ok) throw new Error('Overpass request failed');
+      const data = await res.json();
+      const results = data.elements.map(this.normalizePoi);
+
+      if (queryKey) {
+        this.lastQueryKey = queryKey;
+        this.cachedResults = results;
+      }
+
+      return results;
+    } catch (e) {
+      if (e.name === 'AbortError') {
+        console.debug('Category search aborted');
+        return [];
+      }
+      console.error('Category search failed', e);
+      return [];
+    }
+  }
+
   normalizePoi(poi) {
     const tags = poi.tags || {};
     const type = getPlaceType(tags) || 'Point of Interest';

app/styles/app.css

@@ -6,6 +6,8 @@
   --sidebar-width: 350px;
   --link-color: #2a7fff;
   --link-color-visited: #6a4fbf;
+  --marker-color-primary: #ea4335;
+  --marker-color-dark: #b31412;
 }
 
 html,
@@ -70,27 +72,96 @@ body {
   right: 0;
   height: 60px;
   padding: 0.5rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   z-index: 3000; /* Above sidebar (2000) and map */
   pointer-events: none; /* Let clicks pass through to map where transparent */
+
+  /* Layout */
+  display: grid;
+
+  /* Desktop: 1fr auto 1fr ensures the center element is absolutely centered */
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-areas: 'search chips user';
+  align-items: center;
+  gap: 1rem;
 }
 
 @media (width <= 768px) {
   .app-header {
-    padding: 0 0.5rem;
+    padding: 0.5rem 0.5rem 0;
+    height: auto;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'search user'
+      'chips chips';
+    row-gap: 8px; /* Increased spacing */
   }
 }
 
 .header-left,
-.header-right {
-  pointer-events: auto; /* Re-enable clicks for buttons */
+.header-right,
+.header-center {
+  pointer-events: auto; /* Re-enable clicks */
 }
 
 .header-left {
   display: flex;
   align-items: center;
+  grid-area: search;
+
+  /* Ensure it sits at the start of its grid area */
+  justify-self: start;
+  width: 100%;
+}
+
+@media (width > 768px) {
+  .header-left {
+    min-width: 300px;
+    max-width: 400px;
+  }
+}
+
+@media (width > 768px) {
+  .header-left {
+    /* Desktop: Ensure minimum width for search box so it's not squeezed */
+    min-width: 300px;
+    max-width: 350px;
+  }
+}
+
+.header-right {
+  grid-area: user;
+  justify-self: end;
+}
+
+.header-center {
+  grid-area: chips;
+
+  /* Desktop: Center the chips block in the available space */
+  display: flex;
+  justify-content: center;
+  min-width: 0; /* Allow shrinking */
+}
+
+/* Adjust scroll container for desktop centering */
+@media (width > 768px) {
+  .header-center .category-chips-scroll {
+    width: auto;
+    max-width: 100%;
+  }
+}
+
+@media (width <= 768px) {
+  /* No need to reset min-width/max-width since they are only set in media query above */
+  .header-center {
+    width: 100%;
+    overflow: hidden;
+    justify-content: start;
+  }
+
+  /* Hide chips on mobile when searching to save space */
+  .header-center.searching {
+    display: none;
+  }
 }
 
 .btn-press {
@@ -803,15 +874,15 @@ span.icon {
 .selected-pin {
   width: 40px;
   height: 40px;
-  color: #ea4335; /* Google Red */
+  color: var(--marker-color-primary);
   filter: drop-shadow(0 4px 6px rgb(0 0 0 / 30%));
 }
 
 .selected-pin svg {
   width: 100%;
   height: 100%;
-  fill: #ea4335;
-  stroke: #b31412; /* Darker red stroke */
+  fill: var(--marker-color-primary);
+  stroke: var(--marker-color-dark);
   stroke-width: 1;
 }
 
@@ -1190,3 +1261,57 @@ button.create-place {
   background: #eee;
   margin: 0.5rem 0;
 }
+
+/* Category Chips */
+.category-chips-scroll {
+  width: 100%;
+  overflow-x: auto;
+
+  /* Add padding for shadows */
+  padding: 4px 0;
+  -webkit-overflow-scrolling: touch;
+
+  /* Hide scrollbar but keep functionality */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+
+  /* Remove top margin as spacing is handled by grid/layout */
+  margin-top: 0;
+}
+
+.category-chips-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.category-chips-container {
+  display: flex;
+  gap: 8px;
+
+  /* Padding on sides so first/last chip isn't flush with screen edge */
+  padding: 0 4px;
+  width: max-content; /* Ensure it scrolls */
+}
+
+.category-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 16px; /* Pill shape */
+  font-size: 0.9rem;
+  color: #333;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+  transition: background-color 0.2s;
+}
+
+.category-chip:hover {
+  background: var(--hover-bg);
+}
+
+.category-chip:active {
+  background: #eee;
+}

app/utils/icons.js

@@ -27,15 +27,21 @@ import target from 'feather-icons/dist/icons/target.svg?raw';
 import user from 'feather-icons/dist/icons/user.svg?raw';
 import x from 'feather-icons/dist/icons/x.svg?raw';
 import zap from 'feather-icons/dist/icons/zap.svg?raw';
-import wikipedia from '../icons/wikipedia.svg?raw';
+import camera from '@waysidemapping/pinhead/dist/icons/camera.svg?raw';
+import cupAndSaucer from '@waysidemapping/pinhead/dist/icons/cup_and_saucer.svg?raw';
 import forkAndKnife from '@waysidemapping/pinhead/dist/icons/fork_and_knife.svg?raw';
+import personSleepingInBed from '@waysidemapping/pinhead/dist/icons/person_sleeping_in_bed.svg?raw';
+import shoppingBasket from '@waysidemapping/pinhead/dist/icons/shopping_basket.svg?raw';
+import wikipedia from '../icons/wikipedia.svg?raw';
 
 const ICONS = {
   'arrow-left': arrowLeft,
   activity,
   bookmark,
+  camera,
   'check-square': checkSquare,
   clock,
+  'cup-and-saucer': cupAndSaucer,
   edit,
   facebook,
   gift,
@@ -52,11 +58,13 @@ const ICONS = {
   'map-pin': mapPin,
   menu,
   navigation,
+  'person-sleeping-in-bed': personSleepingInBed,
   phone,
   plus,
   server,
   search,
   settings,
+  'shopping-basket': shoppingBasket,
   target,
   user,
   wikipedia,
@@ -64,6 +72,19 @@ const ICONS = {
   zap,
 };
 
+const FILLED_ICONS = [
+  'fork-and-knife',
+  'wikipedia',
+  'cup-and-saucer',
+  'shopping-basket',
+  'camera',
+  'person-sleeping-in-bed',
+];
+
 export function getIcon(name) {
   return ICONS[name];
 }
+
+export function isIconFilled(name) {
+  return FILLED_ICONS.includes(name);
+}

app/utils/poi-categories.js

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

release/index.html

@@ -39,8 +39,8 @@
     <meta name="msapplication-TileColor" content="#F6E9A6">
     <meta name="msapplication-TileImage" content="/icons/icon-144.png">
 
-  <script type="module" crossorigin src="/assets/main-gEUnNw-L.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-BOfcjRke.css">
+  <script type="module" crossorigin src="/assets/main-C4F17h3W.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-CKp1bFPU.css">
 </head>
   <body>
  </body>

tests/acceptance/search-test.js

@@ -155,4 +155,67 @@ module('Acceptance | search', function (hooks) {
     assert.dom('.places-list li').exists({ count: 1 });
     assert.dom('.places-list li .place-name').hasText('My Secret Base');
   });
+
+  test('visiting /search with category parameter performs category search', async function (assert) {
+    // Mock Osm Service
+    class MockOsmService extends Service {
+      async getCategoryPois(bounds, categoryId) {
+        if (categoryId === 'coffee') {
+          return [
+            {
+              title: 'Latte Art Cafe',
+              lat: 52.52,
+              lon: 13.405,
+              osmId: '101',
+              osmType: 'N',
+              description: 'Best Coffee',
+            },
+          ];
+        }
+        return [];
+      }
+    }
+    this.owner.register('service:osm', MockOsmService);
+
+    // Mock Storage Service (empty)
+    class MockStorageService extends Service {
+      savedPlaces = [];
+      findPlaceById() {
+        return null;
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      rs = { on: () => {} };
+      placesInView = [];
+      loadPlacesInBounds() {
+        return Promise.resolve();
+      }
+    }
+    this.owner.register('service:storage', MockStorageService);
+
+    // Mock Map Service (needed for bounds)
+    class MockMapService extends Service {
+      getBounds() {
+        return {
+          minLat: 52.5,
+          minLon: 13.4,
+          maxLat: 52.6,
+          maxLon: 13.5,
+        };
+      }
+    }
+    this.owner.register('service:map', MockMapService);
+
+    await visit('/search?category=coffee&lat=52.52&lon=13.405');
+
+    assert.strictEqual(
+      currentURL(),
+      '/search?category=coffee&lat=52.52&lon=13.405'
+    );
+    assert.dom('.places-list li').exists({ count: 1 });
+    assert.dom('.places-list li .place-name').hasText('Latte Art Cafe');
+    // Ensure it shows "Results" not "Nearby"
+    assert.dom('.sidebar-header h2').includesText('Results');
+  });
 });

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

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

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

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

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

@@ -100,7 +100,7 @@ module('Integration | Component | search-box', function (hooks) {
       .dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
 
     assert.verifySteps([
-      'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"lat":"52.5200","lon":"13.4050"}}',
+      'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"category":null,"lat":"52.5200","lon":"13.4050"}}',
     ]);
   });
 
@@ -134,4 +134,96 @@ module('Integration | Component | search-box', function (hooks) {
 
     assert.verifySteps(['search: cafe, 52.52, 13.405']);
   });
+
+  test('it allows typing even when controlled by parent with a query argument', async function (assert) {
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    this.query = '';
+    this.updateQuery = (val) => {
+      this.set('query', val);
+    };
+    this.noop = () => {};
+
+    await render(
+      <template>
+        <SearchBox
+          @query={{this.query}}
+          @onQueryChange={{this.updateQuery}}
+          @onToggleMenu={{this.noop}}
+        />
+      </template>
+    );
+
+    // Initial state
+    assert.dom('.search-input').hasValue('');
+
+    // Simulate typing
+    await fillIn('.search-input', 't');
+    assert.dom('.search-input').hasValue('t', 'Input should show "t"');
+
+    await fillIn('.search-input', 'te');
+    assert.dom('.search-input').hasValue('te', 'Input should show "te"');
+
+    // Simulate external update (e.g. chip click)
+    this.set('query', 'restaurant');
+    // wait for re-render
+    await click('.search-input'); // just to trigger a change cycle or ensure stability
+    assert
+      .dom('.search-input')
+      .hasValue('restaurant', 'Input should update from external change');
+  });
+
+  test('it triggers category search with current location when clicking category result', async function (assert) {
+    // Mock MapUi Service
+    class MockMapUiService extends Service {
+      currentCenter = { lat: 51.5074, lon: -0.1278 };
+      setSearchBoxFocus() {}
+    }
+    this.owner.register('service:map-ui', MockMapUiService);
+
+    // Mock Photon Service
+    class MockPhotonService extends Service {
+      async search() {
+        return [];
+      }
+    }
+    this.owner.register('service:photon', MockPhotonService);
+
+    // Mock Router Service
+    class MockRouterService extends Service {
+      transitionTo(routeName, options) {
+        assert.step(`transitionTo: ${routeName} ${JSON.stringify(options)}`);
+      }
+    }
+    this.owner.register('service:router', MockRouterService);
+
+    this.noop = () => {};
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
+
+    // Type "Resta" to trigger "Restaurants" category match
+    await fillIn('.search-input', 'Resta');
+
+    // Wait for debounce (300ms) + execution
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    await delay(400);
+
+    // The first result should be the category match
+    assert.dom('.search-result-item').exists({ count: 1 });
+    assert.dom('.result-title').hasText('Restaurants');
+
+    // Click the result
+    await click('.search-result-item');
+
+    // Assert transition with lat/lon from map center
+    assert.verifySteps([
+      'transitionTo: search {"queryParams":{"q":"Restaurants","category":"restaurants","selected":null,"lat":"51.5074","lon":"-0.1278"}}',
+    ]);
+  });
 });

tests/unit/services/osm-test.js

@@ -251,4 +251,45 @@ module('Unit | Service | osm', function (hooks) {
       [30, 30],
     ]);
   });
+
+  test('getCategoryPois uses cache when lat/lon matches', async function (assert) {
+    let service = this.owner.lookup('service:osm');
+
+    // Mock settings
+    service.settings = { overpassApi: 'http://test-api' };
+
+    // Mock fetchWithRetry
+    let fetchCount = 0;
+    service.fetchWithRetry = async () => {
+      fetchCount++;
+      return {
+        ok: true,
+        json: async () => ({
+          elements: [{ id: 1, type: 'node', tags: { name: 'Test' } }],
+        }),
+      };
+    };
+
+    const bounds = { minLat: 0, minLon: 0, maxLat: 1, maxLon: 1 };
+
+    // First call - should fetch
+    await service.getCategoryPois(bounds, 'restaurants', 52.5, 13.4);
+    assert.strictEqual(fetchCount, 1, 'First call should trigger fetch');
+
+    // Second call with same lat/lon - should cache
+    await service.getCategoryPois(bounds, 'restaurants', 52.5, 13.4);
+    assert.strictEqual(
+      fetchCount,
+      1,
+      'Second call with same lat/lon should use cache'
+    );
+
+    // Third call with diff lat/lon - should fetch
+    await service.getCategoryPois(bounds, 'restaurants', 52.6, 13.5);
+    assert.strictEqual(
+      fetchCount,
+      2,
+      'Call with different lat/lon should trigger fetch'
+    );
+  });
 });