feat(frontend): Add address map view with Leaflet

Show geocoded addresses on an interactive map. Each address row gets a
"Show map" toggle that opens a native <dialog> modal sized to 90vw x
90vh for proper focus management, ESC handling, and viewport use.

- AddressMap component lazy-loads Leaflet so the bundle stays light for
  users who never open the map.
- Bundle Leaflet CSS and marker icons from npm rather than the unpkg
  CDN, fixing air-gapped deployments and avoiding outbound IP leaks.
- Refetch the friend or collective a few times after an address save so
  asynchronously resolved coordinates appear without a manual reload.
- New EN/DE i18n strings under subresources.address.*.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: enko

apps/frontend/package.json

@@ -25,6 +25,7 @@
     "i18next": "25.7.4",
     "i18next-browser-languagedetector": "8.2.0",
     "isomorphic-dompurify": "2.35.0",
+    "leaflet": "1.9.4",
     "svelte-easy-crop": "5.0.0",
     "svelte-heros-v2": "3.0.1",
     "svelte-i18next": "2.2.2"
@@ -37,6 +38,7 @@
     "@tailwindcss/postcss": "4.1.18",
     "@testing-library/svelte": "5.3.0",
     "@types/d3": "7.4.3",
+    "@types/leaflet": "1.9.21",
     "autoprefixer": "10.4.23",
     "jsdom": "27.3.0",
     "postcss": "8.5.6",

apps/frontend/src/lib/components/collectives/collective-detail.svelte

@@ -349,6 +349,13 @@ async function handleSave() {
         const created = await addAddress(collective.id, data);
         addresses = [...addresses, created];
       }
+      // Geocoding runs asynchronously on the backend; refetch a few times to
+      // pick up coordinates once they land.
+      for (const delay of [800, 2000, 4500]) {
+        setTimeout(() => {
+          loadSubresources().catch(() => undefined);
+        }, delay);
+      }
     } else if (editingType === 'url' && urlFormRef?.isValid()) {
       const data = urlFormRef.getData();
       if (editingId) {

apps/frontend/src/lib/components/friends/sections/address-section.svelte

@@ -30,6 +30,24 @@ let deleteConfirmName = $state('');
 
 let showModal = $derived(isAdding || editingId !== null);
 
+/**
+ * Poll for geocoding completion. Backend geocodes addresses asynchronously
+ * after the write commits, so the response we just stored may still have
+ * null coordinates. Refetch a few times to pick up coordinates once they
+ * land — fast for PostGIS (DACH) hits, up to a couple seconds for the
+ * Nominatim fallback.
+ */
+function scheduleGeocodeRefresh() {
+  const delaysMs = [800, 2000, 4500];
+  for (const delay of delaysMs) {
+    setTimeout(() => {
+      friends.loadFriend(friendId).catch(() => {
+        // Refetch is best-effort; ignore transient failures.
+      });
+    }, delay);
+  }
+}
+
 function openAdd() {
   editingId = null;
   editingData = null;
@@ -69,6 +87,10 @@ async function handleSave() {
       await friends.addAddress(friendId, data);
     }
     closeModal();
+    // Geocoding runs asynchronously on the backend after the write commits.
+    // Refetch the friend after a short delay so newly resolved coordinates
+    // (and the resulting "Show map" button) appear without a manual reload.
+    scheduleGeocodeRefresh();
   } catch (err) {
     editError = err instanceof Error ? err.message : $i18n.t('subresources.common.failedToSave');
     isEditLoading = false;

apps/frontend/src/lib/components/friends/subresources/address-map-modal.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+import XMark from 'svelte-heros-v2/XMark.svelte';
+import { createI18n } from '$lib/i18n/index.js';
+import AddressMap from './address-map.svelte';
+
+const i18n = createI18n();
+
+interface Props {
+  open: boolean;
+  latitude: number;
+  longitude: number;
+  addressLabel: string;
+  onClose: () => void;
+}
+
+let { open, latitude, longitude, addressLabel, onClose }: Props = $props();
+
+let dialogEl: HTMLDialogElement;
+
+// Drive the native <dialog> element from the `open` prop. Using showModal()
+// gives us a real focus trap, ESC-to-close, and inert background for free.
+$effect(() => {
+  if (!dialogEl) return;
+  if (open && !dialogEl.open) {
+    dialogEl.showModal();
+  } else if (!open && dialogEl.open) {
+    dialogEl.close();
+  }
+});
+
+function handleCancel(e: Event) {
+  // Native ESC fires the cancel event — translate to onClose so parent state stays in sync.
+  e.preventDefault();
+  onClose();
+}
+
+function handleBackdropClick(e: MouseEvent) {
+  // <dialog> click target is itself when the user clicks outside the inner panel.
+  if (e.target === dialogEl) {
+    onClose();
+  }
+}
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  oncancel={handleCancel}
+  onclick={handleBackdropClick}
+  aria-labelledby="address-map-modal-title"
+  class="p-0 rounded-xl shadow-2xl backdrop:bg-black/50 bg-white"
+>
+  <div class="flex items-center justify-between p-4 border-b border-gray-200 shrink-0">
+    <h2 id="address-map-modal-title" class="text-lg font-heading text-gray-900 truncate pr-2">
+      {addressLabel || $i18n.t('subresources.address.address')}
+    </h2>
+    <button
+      type="button"
+      onclick={onClose}
+      class="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 shrink-0"
+      aria-label={$i18n.t('subresources.common.close')}
+    >
+      <XMark class="w-5 h-5" strokeWidth="2" />
+    </button>
+  </div>
+
+  <div class="p-4 flex-1 min-h-0">
+    {#if open}
+      <AddressMap {latitude} {longitude} {addressLabel} heightClass="h-full" />
+    {/if}
+  </div>
+</dialog>
+
+<style>
+/* `display: flex` would override the UA's `display: none` on a closed
+   <dialog>, so flex layout must only apply when the dialog is open.
+   Tailwind preflight also zeros dialog margins, which breaks the UA's
+   default centering for showModal() — restore it explicitly. */
+dialog[open] {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  width: 90vw;
+  height: 90vh;
+  max-width: none;
+  max-height: none;
+}
+</style>

apps/frontend/src/lib/components/friends/subresources/address-map.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+import type L from 'leaflet';
+import { onDestroy, onMount } from 'svelte';
+
+interface Props {
+  latitude: number;
+  longitude: number;
+  addressLabel?: string;
+  /** Tailwind height utility (e.g. "h-48", "h-96"). Defaults to a compact 12rem. */
+  heightClass?: string;
+}
+
+let { latitude, longitude, addressLabel = '', heightClass = 'h-48' }: Props = $props();
+
+// Resolved once at module load — these are static asset URLs and don't depend
+// on the live latitude/longitude props.
+const markerIconUrl = new URL('leaflet/dist/images/marker-icon.png', import.meta.url).href;
+const markerIcon2xUrl = new URL('leaflet/dist/images/marker-icon-2x.png', import.meta.url).href;
+const markerShadowUrl = new URL('leaflet/dist/images/marker-shadow.png', import.meta.url).href;
+
+let mapContainer: HTMLDivElement;
+let map: L.Map | null = null;
+let marker: L.Marker | null = null;
+
+onMount(async () => {
+  // Dynamically import Leaflet and its CSS to keep the initial bundle small.
+  const [leafletModule] = await Promise.all([
+    import('leaflet'),
+    import('leaflet/dist/leaflet.css'),
+  ]);
+
+  const defaultIcon = leafletModule.icon({
+    iconUrl: markerIconUrl,
+    iconRetinaUrl: markerIcon2xUrl,
+    shadowUrl: markerShadowUrl,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41],
+  });
+
+  map = leafletModule.map(mapContainer).setView([latitude, longitude], 16);
+
+  leafletModule
+    .tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      maxZoom: 19,
+    })
+    .addTo(map);
+
+  marker = leafletModule.marker([latitude, longitude], { icon: defaultIcon }).addTo(map);
+
+  if (addressLabel) {
+    marker.bindPopup(addressLabel);
+  }
+});
+
+// Reactively update the view when coordinates or label change after mount.
+$effect(() => {
+  if (!map || !marker) return;
+  map.setView([latitude, longitude]);
+  marker.setLatLng([latitude, longitude]);
+  if (addressLabel) {
+    marker.bindPopup(addressLabel);
+  } else {
+    marker.unbindPopup();
+  }
+});
+
+onDestroy(() => {
+  if (map) {
+    map.remove();
+    map = null;
+    marker = null;
+  }
+});
+</script>
+
+<div bind:this={mapContainer} class="w-full {heightClass} rounded-lg overflow-hidden border border-gray-200"></div>

apps/frontend/src/lib/components/friends/subresources/address-row.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+import MapPin from 'svelte-heros-v2/MapPin.svelte';
+import { createI18n } from '$lib/i18n/index.js';
 import type { Address, AddressType } from '$shared';
+import AddressMapModal from './address-map-modal.svelte';
 import SubresourceRow from './subresource-row.svelte';
 
 interface Props {
@@ -11,6 +14,11 @@ interface Props {
 
 let { address, onEdit, onDelete, isDeleting = false }: Props = $props();
 
+const i18n = createI18n();
+let showMap = $state(false);
+
+const hasCoordinates = $derived(address.latitude != null && address.longitude != null);
+
 function formatAddressType(type: AddressType): string {
   const typeLabels: Record<AddressType, string> = {
     home: 'Home',
@@ -31,6 +39,10 @@ function formatAddress(addr: Address): string[] {
   return lines;
 }
 
+function formatAddressLabel(addr: Address): string {
+  return formatAddress(addr).join(', ');
+}
+
 const addressLines = $derived(formatAddress(address));
 </script>
 
@@ -52,5 +64,25 @@ const addressLines = $derived(formatAddress(address));
         {/if}
       </div>
     </div>
+    {#if hasCoordinates}
+      <button
+        type="button"
+        class="mt-3 inline-flex items-center gap-1.5 text-xs font-medium text-forest border border-forest/30 hover:bg-forest hover:text-white hover:border-forest px-2.5 py-1 rounded-full transition-colors"
+        onclick={() => (showMap = true)}
+        aria-haspopup="dialog"
+      >
+        <MapPin class="w-3.5 h-3.5" strokeWidth="2" />
+        {$i18n.t('subresources.address.showMap')}
+      </button>
+    {/if}
+    {#if address.latitude != null && address.longitude != null}
+      <AddressMapModal
+        open={showMap}
+        latitude={address.latitude}
+        longitude={address.longitude}
+        addressLabel={formatAddressLabel(address)}
+        onClose={() => (showMap = false)}
+      />
+    {/if}
   </div>
 </SubresourceRow>

apps/frontend/src/lib/i18n/locales/de.json

@@ -1219,6 +1219,8 @@
       "address": "Adresse",
       "thisAddress": "diese Adresse",
       "primaryAddress": "Primäre Adresse",
+      "showMap": "Karte anzeigen",
+      "hideMap": "Karte ausblenden",
       "types": {
         "home": "Privat",
         "work": "Arbeit",

apps/frontend/src/lib/i18n/locales/en.json

@@ -1219,6 +1219,8 @@
       "address": "Address",
       "thisAddress": "this address",
       "primaryAddress": "Primary address",
+      "showMap": "Show map",
+      "hideMap": "Hide map",
       "types": {
         "home": "Home",
         "work": "Work",