feat(map): POI overlay + right-click destination + a11y fixes

- T-09: /api/pois route handler wrapping Geoapify adapter, usePois SWR hook,
  PoiLayer with turf-based polygon clipping, CategoryToggles in header.
- UX: right-click drops destination (was: any click); plain click dismisses.
- A11y: enlarged origin pin hit area with cursor-grab/grabbing.
- DestinationCard reused by right-click and POI marker click (one affordance).
- PRD FR-11/FR-12 updated to reflect right-click semantics.

Author: TomerBenda

apps/web/src/app/api/pois/route.ts

@@ -0,0 +1,112 @@
+/**
+ * GET /api/pois?bbox=w,s,e,n&cats=park,cafe&limit=100
+ *
+ * Server-side proxy for the Geoapify Places API. Hides the API key from
+ * the browser, validates inputs with Zod, and adds short-lived caching.
+ *
+ * The route returns POIs in the bbox; client filters to inside the
+ * isochrone polygon (see usePois + PoiLayer).
+ *
+ * Error contract:
+ *   200 OK                    — { pois, metadata }
+ *   400 invalid_request       — params failed Zod validation
+ *   401 missing_api_key       — GEOAPIFY_API_KEY missing
+ *   502 upstream_failed       — Geoapify returned a non-2xx
+ *   500 internal_error        — anything else
+ */
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import {
+  GeoapifyPoiProvider,
+  PoiCategorySchema,
+  PoiQuerySchema,
+} from '@ilsochrone/providers';
+
+export const runtime = 'nodejs';
+export const revalidate = 120;
+
+const QuerySchema = z.object({
+  bbox: z
+    .string()
+    .transform((s) => s.split(',').map(Number))
+    .refine(
+      (a): a is [number, number, number, number] =>
+        a.length === 4 && a.every((n) => Number.isFinite(n)),
+      { message: 'bbox must be 4 comma-separated numbers: w,s,e,n' },
+    ),
+  cats: z
+    .string()
+    .transform((s) => s.split(',').filter(Boolean))
+    .pipe(z.array(PoiCategorySchema).min(1)),
+  limit: z.coerce.number().int().min(1).max(500).default(100),
+});
+
+let provider: GeoapifyPoiProvider | null = null;
+function getProvider(): GeoapifyPoiProvider {
+  if (provider) return provider;
+  const apiKey = process.env.GEOAPIFY_API_KEY;
+  if (!apiKey) throw new MissingApiKeyError();
+  provider = new GeoapifyPoiProvider({ apiKey });
+  return provider;
+}
+
+class MissingApiKeyError extends Error {
+  constructor() {
+    super('GEOAPIFY_API_KEY is not set on the server.');
+    this.name = 'MissingApiKeyError';
+  }
+}
+
+const isDev = process.env.NODE_ENV !== 'production';
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const parsed = QuerySchema.safeParse({
+    bbox: url.searchParams.get('bbox'),
+    cats: url.searchParams.get('cats'),
+    limit: url.searchParams.get('limit') ?? undefined,
+  });
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: 'invalid_request', issues: parsed.error.issues },
+      { status: 400 },
+    );
+  }
+
+  const query = PoiQuerySchema.parse({
+    bbox: parsed.data.bbox,
+    categories: parsed.data.cats,
+    limit: parsed.data.limit,
+  });
+
+  try {
+    const result = await getProvider().searchInBbox(query);
+    return NextResponse.json(result, {
+      headers: {
+        'Cache-Control': 's-maxage=120, stale-while-revalidate=600',
+      },
+    });
+  } catch (err) {
+    console.error('[/api/pois] failed', summarize(err));
+    if (err instanceof MissingApiKeyError) {
+      return NextResponse.json(withDebug({ error: 'missing_api_key' }, err), {
+        status: 401,
+      });
+    }
+    return NextResponse.json(withDebug({ error: 'upstream_failed' }, err), {
+      status: 502,
+    });
+  }
+}
+
+function withDebug<T extends Record<string, unknown>>(payload: T, err: unknown): T & {
+  debug?: { name: string; message: string };
+} {
+  if (!isDev || !(err instanceof Error)) return payload;
+  return { ...payload, debug: { name: err.name, message: err.message } };
+}
+
+function summarize(err: unknown): Record<string, unknown> {
+  if (err instanceof Error) return { name: err.name, message: err.message };
+  return { value: err };
+}

apps/web/src/app/page.tsx

@@ -12,12 +12,20 @@
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
-import { StadiaTileProvider, type TimeBandMin } from '@ilsochrone/providers';
+import {
+  StadiaTileProvider,
+  type Poi,
+  type PoiCategory,
+  type TimeBandMin,
+} from '@ilsochrone/providers';
 import { TimeSelector } from '@/components/controls/TimeSelector';
 import { ModeSelector } from '@/components/controls/ModeSelector';
+import { CategoryToggles } from '@/components/controls/CategoryToggles';
 import { DestinationCard } from '@/components/destination/DestinationCard';
 import { tryGeolocate } from '@/lib/geolocation';
 import { useIsochrone } from '@/lib/hooks/useIsochrone';
+import { usePois } from '@/lib/hooks/usePois';
+import { bboxOf } from '@/lib/polygon';
 import { PUBLIC_CONFIG } from '@/lib/config';
 import {
   DEFAULT_CATEGORIES,
@@ -26,11 +34,15 @@ import {
   type AppUrlState,
 } from '@/lib/url-state';
 
-// Client-only import: MapLibre touches `window` at module load.
+// Client-only imports: MapLibre touches `window` at module load.
 const IlsochroneMap = dynamic(
   () => import('@/components/map/IlsochroneMap.client').then((m) => m.IlsochroneMap),
   { ssr: false, loading: () => <div className="h-full w-full bg-muted" aria-hidden /> },
 );
+const PoiLayer = dynamic(
+  () => import('@/components/map/PoiLayer').then((m) => m.PoiLayer),
+  { ssr: false },
+);
 
 export default function HomePage() {
   const tileProvider = useMemo(
@@ -59,6 +71,7 @@ export default function HomePage() {
 
   const [state, setState] = useState<AppUrlState>(initialState);
   const [destination, setDestination] = useState<{ lng: number; lat: number } | null>(null);
+  const [selectedPoi, setSelectedPoi] = useState<Poi | null>(null);
 
   // On mount: if no `lng`/`lat` in URL, ask for geolocation and use it.
   const askedGeoRef = useRef(false);
@@ -97,11 +110,30 @@ export default function HomePage() {
     setState((s) => ({ ...s, mode }));
   }, []);
 
-  const onMapClick = useCallback((lngLat: { lng: number; lat: number }) => {
+  const onPickDestination = useCallback((lngLat: { lng: number; lat: number }) => {
     setDestination(lngLat);
+    setSelectedPoi(null);
+  }, []);
+
+  const onMapBackgroundClick = useCallback(() => {
+    // Plain click dismisses any open destination card. No pin is dropped.
+    setDestination(null);
+    setSelectedPoi(null);
+  }, []);
+
+  const onDismissDestination = useCallback(() => {
+    setDestination(null);
+    setSelectedPoi(null);
   }, []);
 
-  const onDismissDestination = useCallback(() => setDestination(null), []);
+  const onCategoriesChange = useCallback((categories: PoiCategory[]) => {
+    setState((s) => ({ ...s, categories }));
+  }, []);
+
+  const onPoiSelect = useCallback((poi: Poi) => {
+    setSelectedPoi(poi);
+    setDestination(null);
+  }, []);
 
   const { data, error, isLoading } = useIsochrone({
     lng: state.origin.lng,
@@ -110,6 +142,42 @@ export default function HomePage() {
     mode: state.mode,
   });
 
+  // POIs are scoped to the polygon's bbox; we filter to inside the polygon
+  // client-side in PoiLayer. Skip fetch entirely if no polygon or no categories.
+  const polygonBbox = useMemo(
+    () => (data?.polygon ? bboxOf(data.polygon) : null),
+    [data?.polygon],
+  );
+  const { data: poiData } = usePois({
+    bbox: polygonBbox,
+    categories: state.categories,
+  });
+  const pois = poiData?.pois ?? [];
+
+  // Determine which destination (if any) gets the popup. POI selection wins
+  // over a right-click drop point.
+  const activeDestination = useMemo(() => {
+    if (selectedPoi) {
+      return {
+        lng: selectedPoi.lngLat[0],
+        lat: selectedPoi.lngLat[1],
+        title: selectedPoi.name,
+        subtitle: selectedPoi.category,
+        sourceUrl: selectedPoi.sourceUrl,
+      };
+    }
+    if (destination) {
+      return {
+        lng: destination.lng,
+        lat: destination.lat,
+        title: 'Drop point',
+        subtitle: `${destination.lat.toFixed(5)}, ${destination.lng.toFixed(5)}`,
+        sourceUrl: undefined,
+      };
+    }
+    return null;
+  }, [selectedPoi, destination]);
+
   return (
     <main className="relative h-screen w-screen overflow-hidden">
       <div className="absolute inset-0">
@@ -130,17 +198,22 @@ export default function HomePage() {
           origin={state.origin}
           onOriginDragEnd={onOriginDragEnd}
           polygon={data?.polygon}
-          onMapClick={onMapClick}
+          onPickDestination={onPickDestination}
+          onMapBackgroundClick={onMapBackgroundClick}
           destination={
-            destination
+            activeDestination
               ? {
-                  lng: destination.lng,
-                  lat: destination.lat,
+                  lng: activeDestination.lng,
+                  lat: activeDestination.lat,
                   popup: (
                     <DestinationCard
-                      title="Drop point"
-                      subtitle={`${destination.lat.toFixed(5)}, ${destination.lng.toFixed(5)}`}
-                      destination={destination}
+                      title={activeDestination.title}
+                      subtitle={activeDestination.subtitle}
+                      destination={{
+                        lng: activeDestination.lng,
+                        lat: activeDestination.lat,
+                        name: selectedPoi?.name,
+                      }}
                       origin={state.origin}
                       mode={state.mode}
                       onClose={onDismissDestination}
@@ -149,17 +222,33 @@ export default function HomePage() {
                 }
               : undefined
           }
+          poiMarkers={
+            <PoiLayer
+              pois={pois}
+              polygon={data?.polygon}
+              onSelect={onPoiSelect}
+              selectedId={selectedPoi?.id}
+            />
+          }
         />
       </div>
 
       <header className="pointer-events-none absolute left-0 right-0 top-0 flex flex-wrap items-start justify-between gap-3 p-4">
         <div className="pointer-events-auto rounded-lg bg-background/95 px-4 py-2 shadow-md ring-1 ring-border backdrop-blur">
           <h1 className="text-base font-semibold">Ilsochrone</h1>
-          <p className="text-xs text-muted-foreground">Where can you get in {state.minutes} min?</p>
+          <p className="text-xs text-muted-foreground">
+            Where can you get in {state.minutes} min?
+          </p>
+          <p className="mt-0.5 text-[10px] text-muted-foreground/70">
+            Drag the pin to move origin · right-click the map to drop a destination
+          </p>
         </div>
-        <div className="pointer-events-auto flex flex-wrap gap-2">
-          <ModeSelector value={state.mode} onChange={onModeChange} />
-          <TimeSelector value={state.minutes} onChange={onMinutesChange} />
+        <div className="pointer-events-auto flex flex-col items-end gap-2">
+          <div className="flex flex-wrap gap-2">
+            <ModeSelector value={state.mode} onChange={onModeChange} />
+            <TimeSelector value={state.minutes} onChange={onMinutesChange} />
+          </div>
+          <CategoryToggles value={state.categories} onChange={onCategoriesChange} />
         </div>
       </header>
 

apps/web/src/components/controls/CategoryToggles.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import type { PoiCategory } from '@ilsochrone/providers';
+import { cn } from '@/lib/utils';
+import {
+  Trees,
+  Coffee,
+  Utensils,
+  Landmark,
+  Eye,
+  Waves,
+  type LucideIcon,
+} from 'lucide-react';
+
+interface Props {
+  value: PoiCategory[];
+  onChange: (next: PoiCategory[]) => void;
+  className?: string;
+}
+
+const CATEGORIES: { id: PoiCategory; label: string; Icon: LucideIcon }[] = [
+  { id: 'park', label: 'Parks', Icon: Trees },
+  { id: 'cafe', label: 'Cafés', Icon: Coffee },
+  { id: 'restaurant', label: 'Restaurants', Icon: Utensils },
+  { id: 'museum', label: 'Museums', Icon: Landmark },
+  { id: 'viewpoint', label: 'Viewpoints', Icon: Eye },
+  { id: 'beach', label: 'Beaches', Icon: Waves },
+];
+
+export function CategoryToggles({ value, onChange, className }: Props) {
+  const enabled = new Set(value);
+  const toggle = (id: PoiCategory) => {
+    const next = new Set(enabled);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    onChange(CATEGORIES.filter((c) => next.has(c.id)).map((c) => c.id));
+  };
+
+  return (
+    <div
+      role="group"
+      aria-label="POI categories"
+      className={cn(
+        'flex flex-wrap gap-1 rounded-md border border-border bg-background p-1 shadow-sm',
+        className,
+      )}
+    >
+      {CATEGORIES.map(({ id, label, Icon }) => {
+        const on = enabled.has(id);
+        return (
+          <button
+            key={id}
+            type="button"
+            role="switch"
+            aria-checked={on}
+            onClick={() => toggle(id)}
+            title={label}
+            className={cn(
+              'flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium transition-colors',
+              on
+                ? 'bg-blue-600 text-white'
+                : 'text-foreground hover:bg-accent hover:text-accent-foreground',
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" aria-hidden />
+            <span>{label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}