feat(search): text-search results panel with category-aware filters

Submitting free text in the top search bar (Enter / search icon) opens a
viewport-scoped results panel — reusing the category results list, map
markers, filter bar and the "search this area" / auto-refresh mechanism.
Backed by a new Overpass name-search route so results carry openingHoursInfo
and osmTags (filterable, "open now"), unlike the thin geocoder path it
replaces. The filter bar infers the dominant category of the results and shows
that category's facets (e.g. "McDonald's" → restaurants → food filters).
Precise location matches (address/street/region) and transit stops still
navigate straight to the place; named-POI queries open the list. The category
chip bar hides while the text panel is open.

Author: Medformatik

apps/web/src/components/map/SearchInAreaChip.tsx

@@ -26,6 +26,9 @@ export function SearchInAreaChip() {
     setSearchBbox: setCategorySearchBbox,
     setMapMoved: setCategoryMapMoved,
   } = useCategorySearchStore();
+  const mode = useCategorySearchStore((s) => s.mode);
+  const anchor = useCategorySearchStore((s) => s.anchor);
+  const isViewportText = mode === "text" && anchor === null;
   const { selectedPlace } = usePlaceStore();
   const activeSource = useDataSourceStore((s) => s.activeSource);
   const dsMapMoved = useDataSourceStore((s) => s.mapMoved);
@@ -40,10 +43,12 @@ export function SearchInAreaChip() {
     return sourcesData.sources.find((s) => s.id === activeSource)?.minZoom ?? 0;
   }, [activeSource, sourcesData]);
 
-  const floatingCardOpen = activeCategory !== null && selectedPlace !== null;
+  const floatingCardOpen = (activeCategory !== null || isViewportText) && selectedPlace !== null;
 
-  // Show when either a category or data source is active and map has moved
-  const showForCategory = activeCategory !== null && categoryMoved && !autoRefresh;
+  // Show when a category search, a viewport text search, or a data source is
+  // active and the map has moved.
+  const showForCategory =
+    (activeCategory !== null || isViewportText) && categoryMoved && !autoRefresh;
   const showForDataSource = activeSource !== null && dsMapMoved && viewportZoom >= activeMinZoom;
 
   if (!showForCategory && !showForDataSource) return null;

apps/web/src/components/panels/category/CategoryResultsContent.tsx

@@ -206,8 +206,12 @@ export function CategoryResultsContent() {
     setHoveredCategoryPlaceId,
   } = useCategorySearchStore();
   const anchor = useCategorySearchStore((s) => s.anchor);
+  const mode = useCategorySearchStore((s) => s.mode);
   const autoRefresh = useCategorySearchStore((s) => s.autoRefresh);
   const setAutoRefresh = useCategorySearchStore((s) => s.setAutoRefresh);
+  // Viewport text search (top search bar, no anchor) behaves like a category:
+  // panning offers "search this area" + the auto-refresh toggle.
+  const isViewportText = mode === "text" && anchor === null;
   const { setSelectedPlace } = usePlaceStore();
   const { flyTo, mapRef, mapReady } = useMap();
 
@@ -251,7 +255,7 @@ export function CategoryResultsContent() {
   // manual "Search this area" chip.
   useEffect(() => {
     const map = mapRef.current;
-    if (!map || !mapReady || !activeCategory) return;
+    if (!map || !mapReady || (!activeCategory && !isViewportText)) return;
 
     const onMoveEnd = (e: maplibregl.MapLibreEvent) => {
       // Ignore app-driven camera moves (flyTo on result select, fitBounds on
@@ -274,7 +278,7 @@ export function CategoryResultsContent() {
     return () => {
       map.off("moveend", onMoveEnd);
     };
-  }, [mapRef, mapReady, activeCategory, autoRefresh, setSearchBbox, setMapMoved]);
+  }, [mapRef, mapReady, activeCategory, isViewportText, autoRefresh, setSearchBbox, setMapMoved]);
 
   const handleSelectPlace = (place: CategoryPlace) => {
     flyTo(place.coordinates, 17);
@@ -292,7 +296,7 @@ export function CategoryResultsContent() {
 
   return (
     <Box sx={{ flex: 1, overflowY: "auto", pt: { xs: 2, sm: "72px" } }}>
-      {(anchor || activeCategory) && (
+      {(anchor || activeCategory || isViewportText) && (
         <Box
           sx={{
             px: 2,
@@ -304,7 +308,7 @@ export function CategoryResultsContent() {
           }}
         >
           {anchor && <ExploreTravelTimeControl />}
-          {activeCategory && (
+          {(activeCategory || isViewportText) && (
             <FormControlLabel
               control={
                 <Switch

apps/web/src/components/search/CategoryChips.tsx

@@ -35,6 +35,7 @@ function SvgIcon({ path, size = 16 }: { path: string; size?: number }) {
 
 export function CategoryChips() {
   const { activeCategory, setActiveCategory, clearCategory } = useCategorySearchStore();
+  const textSearchActive = useCategorySearchStore((s) => s.mode === "text");
   const { setQuery } = useSearchStore();
   const { isOpen: directionsOpen } = useDirectionsStore();
   const zoom = useMapStore((s) => s.zoom);
@@ -105,7 +106,7 @@ export function CategoryChips() {
     return () => el.removeEventListener("scroll", updateScrollState);
   }, [updateScrollState]);
 
-  const hidden = directionsOpen || activeCategory || activeSource;
+  const hidden = directionsOpen || activeCategory || activeSource || textSearchActive;
   const zoomedOut = zoom < 9;
 
   if (hidden) return null;

apps/web/src/components/search/CategoryFilterBar.tsx

@@ -22,7 +22,7 @@ import {
   useCategoryFacetStore,
   useCategorySearchStore,
   useDataSourceStore,
-  useFilteredCategoryResults,
+  useExploreResults,
   useOpeningHoursStore,
 } from "@openmapx/core";
 import { useTranslations } from "next-intl";
@@ -131,11 +131,15 @@ export function CategoryFilterBar() {
   const facetSelections = useCategoryFacetStore((s) => s.selections);
   const toggleFacet = useCategoryFacetStore((s) => s.toggleFacet);
   const activeSource = useDataSourceStore((s) => s.activeSource);
-  const { rawResults } = useFilteredCategoryResults();
+  const { rawResults, dominantCategory } = useExploreResults();
+  // In text mode there is no active category chip — reuse the facets of the
+  // category that the results predominantly belong to (e.g. "McDonald's" →
+  // restaurants), so a text search shows the same filters as that category.
+  const effectiveCategory = activeCategory ?? dominantCategory;
 
   const panelFacets = useMemo(
-    () => facetsForCategory(activeCategory).filter((f) => f.placement === "panel"),
-    [activeCategory],
+    () => facetsForCategory(effectiveCategory).filter((f) => f.placement === "panel"),
+    [effectiveCategory],
   );
   const cuisineOpts = useMemo(() => getCuisineOptions(rawResults ?? []), [rawResults]);
   const activePanelCount = panelFacets.filter(
@@ -196,7 +200,7 @@ export function CategoryFilterBar() {
     );
   }
 
-  if (!activeCategory || !HOURS_FILTER_CATEGORY_IDS.has(activeCategory)) return null;
+  if (!effectiveCategory || !HOURS_FILTER_CATEGORY_IDS.has(effectiveCategory)) return null;
 
   const isFiltered = openingHoursFilter !== "any";
   const label = chipLabel(openingHoursFilter, openAtDay, openAtHour, t);

apps/web/src/components/search/SearchBar.tsx

@@ -64,7 +64,11 @@ import { useLocale, useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AccountAvatarButton } from "@/components/auth/AccountAvatarButton";
 import { SEARCH_INPUT_ID } from "@/components/command-palette/constants";
-import { launchExploreFromPlace, launchExploreTextSearch } from "@/lib/launchExplore";
+import {
+  launchExploreFromPlace,
+  launchExploreTextSearch,
+  launchTextSearch,
+} from "@/lib/launchExplore";
 import { useMap } from "@/lib/MapContext";
 import { TEAL } from "@/lib/theme";
 import { AutocompleteDropdown } from "./AutocompleteDropdown";
@@ -568,8 +572,12 @@ export function SearchBar() {
       handleSelect(syntheticResult);
       return;
     }
+    // A precise location match (address/street/region) or a transit stop
+    // navigates straight to that place, like Google. A named-POI query (or no
+    // geocode match) opens the viewport-scoped text results panel instead.
     const first = geocodeData?.[0];
-    if (first) {
+    const isTransit = Boolean(first?.rawCategory && isTransitRawCategory(first.rawCategory));
+    if (first && (first.type !== "poi" || isTransit)) {
       flyTo(first.coordinates, 15);
       const firstPlace = createPlace({
         ...idsFromPrimaryOrCoords(first.id, first.coordinates),
@@ -579,7 +587,7 @@ export function SearchBar() {
         category: first.type,
         rawCategory: first.rawCategory,
       });
-      if (first.rawCategory && isTransitRawCategory(first.rawCategory)) {
+      if (isTransit) {
         void tryOpenTransitStop(first.coordinates, first.label).then((found) => {
           if (!found) {
             setSelectedPlace(firstPlace);
@@ -590,6 +598,10 @@ export function SearchBar() {
         setSelectedPlace(firstPlace);
         useSidebarStore.getState().openSidebar(PANEL.PLACE);
       }
+      return;
+    }
+    if (q.trim().length > 0) {
+      launchTextSearch(mapRef.current, q);
     }
   };
 

apps/web/src/lib/launchExplore.ts

@@ -79,3 +79,30 @@ export function launchExploreTextSearch(
   useSearchStore.getState().setQuery(trimmed);
   useSidebarStore.getState().openSidebar(PANEL.CATEGORY);
 }
+
+/**
+ * Launch a free-text POI search over the current map viewport (not anchored to
+ * a place): snapshot the current bounds as the search bbox and run text mode.
+ * Used when the user submits the top search bar. Panning the map then offers
+ * "search this area" (see CategoryResultsContent).
+ */
+export function launchTextSearch(map: maplibregl.Map | null, query: string): void {
+  const trimmed = query.trim();
+  if (trimmed.length === 0 || !map) return;
+  const store = useCategorySearchStore.getState();
+  const b = map.getBounds();
+
+  useDataSourceStore.getState().setActiveSource(null);
+  store.setAnchor(null);
+  store.setSearchBbox({
+    west: b.getWest(),
+    south: b.getSouth(),
+    east: b.getEast(),
+    north: b.getNorth(),
+  });
+  store.setMapMoved(false);
+  store.setExploreText(trimmed);
+  store.closeExploreBox();
+  useSearchStore.getState().setQuery(trimmed);
+  useSidebarStore.getState().openSidebar(PANEL.CATEGORY);
+}

integrations/poi-overpass/index.ts

@@ -3,6 +3,7 @@ import {
   CATEGORY_FILTERS,
   searchByCategory,
   searchByOsmTags,
+  searchByText,
   setOverpassUrl,
 } from "@openmapx/core";
 import type { IntegrationContext } from "@openmapx/integration-framework";
@@ -31,6 +32,9 @@ const overpassProvider: PoiSearchProvider = {
     if (!filters || filters.length === 0) return [];
     return searchByCategory(filters, bbox);
   },
+  async searchText(query: string, bbox: BoundingBox): Promise<PoiSearchResult[]> {
+    return searchByText(query, bbox);
+  },
 };
 
 export function setup(ctx: IntegrationContext): void {

integrations/poi-search/index.ts

@@ -56,6 +56,55 @@ export function setup(ctx: IntegrationContext): void {
     }
   });
 
+  ctx.registerRoute("GET", "/text", async (req, reply) => {
+    const { q, south, west, north, east, lang } = req.query;
+
+    if (!q || q.trim().length < 2) {
+      reply.send({ results: [], partial: false });
+      return;
+    }
+
+    const bbox = {
+      south: Number.parseFloat(south),
+      west: Number.parseFloat(west),
+      north: Number.parseFloat(north),
+      east: Number.parseFloat(east),
+    };
+    for (const [key, val] of Object.entries(bbox)) {
+      if (!Number.isFinite(val)) {
+        reply.status(400).send({ error: `Invalid bbox parameter: ${key}` });
+        return;
+      }
+    }
+
+    const bboxRounded = {
+      east: round(bbox.east, 2),
+      north: round(bbox.north, 2),
+      south: round(bbox.south, 2),
+      west: round(bbox.west, 2),
+    };
+    const cacheKey = `text:${q.trim().toLowerCase()}:${bboxRounded.south},${bboxRounded.west},${bboxRounded.north},${bboxRounded.east}`;
+
+    try {
+      const result = await ctx.cache.withCache(cacheKey, 300, () =>
+        orchestrator.searchText(q, bbox, { lang }),
+      );
+      reply.header("Cache-Control", "public, max-age=300");
+      reply.send(result);
+    } catch (err) {
+      if (err instanceof OverpassTimeoutError) {
+        reply.status(422).send({ error: "area_too_large" });
+        return;
+      }
+      const e = err as { statusCode?: number; message: string };
+      if (e.statusCode === 400) {
+        reply.status(400).send({ error: e.message });
+        return;
+      }
+      throw err;
+    }
+  });
+
   ctx.registerRoute("GET", "/preset-suggest", async (req, reply) => {
     const { q, lang, limit } = req.query as { q?: string; lang?: string; limit?: string };
 

integrations/poi-search/orchestrator.ts

@@ -89,5 +89,41 @@ export function createPoiSearchOrchestrator(ctx: IntegrationContext) {
     }
   }
 
-  return { search, getProviders };
+  async function searchText(
+    query: unknown,
+    bbox: BoundingBox,
+    options?: { lang?: string },
+  ): Promise<{ results: PoiSearchResult[]; partial: boolean }> {
+    if (typeof query !== "string" || query.trim().length === 0) {
+      throw Object.assign(new Error("Missing or empty query"), { statusCode: 400 });
+    }
+    const provider = getProviders().find((p) => typeof p.searchText === "function");
+    if (!provider?.searchText) {
+      throw Object.assign(new Error("No text-search provider available"), { statusCode: 400 });
+    }
+
+    let currentBbox = bbox;
+    for (let attempt = 0; ; attempt++) {
+      try {
+        const results = await provider.searchText(query, currentBbox, { lang: options?.lang });
+        for (const r of results) {
+          if (r.openingHours && !r.openingHoursInfo) {
+            r.openingHoursInfo = buildOpeningHoursInfo(r.openingHours, {
+              lat: r.coordinates[1],
+              lon: r.coordinates[0],
+            });
+          }
+        }
+        return { results, partial: attempt > 0 };
+      } catch (err) {
+        if (err instanceof OverpassTimeoutError && attempt < MAX_SHRINK_RETRIES) {
+          currentBbox = shrinkBbox(currentBbox, SHRINK_FACTOR);
+          continue;
+        }
+        throw err;
+      }
+    }
+  }
+
+  return { search, searchText, getProviders };
 }

packages/core/src/api/endpoints.ts

@@ -12,6 +12,7 @@ export const API_ENDPOINTS = {
   traffic: "/api/traffic",
   streetViewImages: "/api/integrations/street-view-mapillary/streetview/images",
   categorySearch: "/api/integrations/poi-search/search",
+  textSearch: "/api/integrations/poi-search/text",
   presetSuggest: "/api/integrations/poi-search/preset-suggest",
   chipTranslations: "/api/integrations/poi-search/chip-translations",
   fuelPricesDetail: "/api/fuel-prices/detail",