From 158bfe9f93184a313eb55fa25f342e1153ecbf63 Mon Sep 17 00:00:00 2001
From: Sarah Hoffmann <lonvia@denofr.de>
Date: Thu, 21 Aug 2025 01:58:47 +0200
Subject: [PATCH] Svelte5: runes, events and @render context (#289)

* switch components to svelte runes and new event handling

* switch pages to svelte runes

* switch Header and UrlSubmitForm to using @render

* convert PageLink to unslotted component

* make ReverseLink slotless component

* make DetailsLink a slotless component

* replace DetailsInfoRow with direct HTML
---
 src/components/DetailsInfoRow.svelte       |  15 --
 src/components/DetailsInfoRowList.svelte   |   2 +-
 src/components/DetailsLink.svelte          |  34 ++--
 src/components/DetailsOneRow.svelte        |  29 ++--
 src/components/DetailsPostcodeHint.svelte  |  23 +--
 src/components/Error.svelte                |   4 +-
 src/components/Header.svelte               |  46 +++---
 src/components/LastUpdated.svelte          |   7 +-
 src/components/Map.svelte                  |  13 +-
 src/components/MapIcon.svelte              |   8 +-
 src/components/MapPosition.svelte          |  23 ++-
 src/components/PageLink.svelte             |  26 +--
 src/components/ResultsList.svelte          |  20 ++-
 src/components/ReverseLink.svelte          |  39 ++---
 src/components/SearchSection.svelte        | 176 ++++++++++-----------
 src/components/SearchSectionDetails.svelte |   6 +-
 src/components/SearchSectionReverse.svelte |  22 +--
 src/components/UrlSubmitForm.svelte        |   8 +-
 src/pages/DeletablePage.svelte             |   4 +-
 src/pages/DetailsPage.svelte               |  77 +++++----
 src/pages/PolygonsPage.svelte              |   2 +-
 src/pages/ReversePage.svelte               |  16 +-
 src/pages/SearchPage.svelte                |  16 +-
 src/pages/StatusPage.svelte                |   6 +-
 test/search.js                             |   2 +-
 25 files changed, 312 insertions(+), 312 deletions(-)
 delete mode 100644 src/components/DetailsInfoRow.svelte

diff --git a/src/components/DetailsInfoRow.svelte b/src/components/DetailsInfoRow.svelte
deleted file mode 100644
index 433edd2..0000000
--- a/src/components/DetailsInfoRow.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-    export let title;
-</script>
-
-<style>
-  td {
-    padding: 2px 8px;
-    font-size: 0.9em;
-  }
-</style>
-
-<tr>
-  <td>{title}</td>
-  <td><slot></slot></td>
-</tr>
diff --git a/src/components/DetailsInfoRowList.svelte b/src/components/DetailsInfoRowList.svelte
index 637159b..67bcb3f 100644
--- a/src/components/DetailsInfoRowList.svelte
+++ b/src/components/DetailsInfoRowList.svelte
@@ -1,5 +1,5 @@
 <script>
-    export let items;
+    let { items } = $props();
 </script>
 
 <style>
diff --git a/src/components/DetailsLink.svelte b/src/components/DetailsLink.svelte
index f32c373..a4aba39 100644
--- a/src/components/DetailsLink.svelte
+++ b/src/components/DetailsLink.svelte
@@ -2,11 +2,7 @@
   import { refresh_page } from '../lib/stores.js';
   import { SvelteURLSearchParams } from 'svelte/reactivity';
 
-  export let extra_classes = '';
-  export let feature = null;
-
-  let url_params = new SvelteURLSearchParams();
-  let href = 'details.html';
+  let { text = 'details', extra_classes = '', feature = null } = $props();
 
   function formatShortOSMType(sType) {
     if (sType === 'node') return 'N';
@@ -15,12 +11,8 @@
     return '';
   }
 
-  function handleClick() {
-    refresh_page('details', url_params);
-  }
-
-  $: {
-    let new_params = new SvelteURLSearchParams();
+  const url_params = $derived.by(() => {
+    const new_params = new SvelteURLSearchParams();
 
     if (feature !== null) {
       if (feature.osm_type) {
@@ -41,15 +33,19 @@
         new_params.set('place_id', feature.place_id);
       }
     }
-    url_params = new_params;
-  }
+    return new_params;
+  });
+
+  const href = $derived.by(() => {
+    const param_str = url_params.toString();
+    return 'details.html' + (param_str ? '?' : '') + param_str;
+  });
 
-  $: {
-    let param_str = url_params.toString();
-    href = 'details.html' + (param_str ? '?' : '') + param_str;
+  function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    refresh_page('details', url_params);
   }
 </script>
 
-<a on:click|preventDefault|stopPropagation={handleClick} href={href} class={extra_classes}>
-  <slot></slot>
-</a>
+<a onclick={handleClick} href={href} class={extra_classes}>{text}</a>
diff --git a/src/components/DetailsOneRow.svelte b/src/components/DetailsOneRow.svelte
index d7c00af..ce7f145 100644
--- a/src/components/DetailsOneRow.svelte
+++ b/src/components/DetailsOneRow.svelte
@@ -5,13 +5,15 @@
     formatPlaceType, osmLink, formatAdminLevel, formatDistance
   } from '../lib/helpers.js';
 
-  export let addressLine;
-  export let bDistanceInMeters;
-  export let bMarkUnusedLines = false;
-  export let sCountryCode;
+  let {
+    addressLine,
+    bDistanceInMeters,
+    bMarkUnusedLines = false,
+    sCountryCode
+  } = $props();
 
-  $: bAddressLineUsed = addressLine.isaddress;
-  $: reverse_only = Nominatim_Config.Reverse_Only;
+  const bAddressLineUsed = $derived(addressLine.isaddress);
+  const reverse_only = $derived(Nominatim_Config.Reverse_Only);
 </script>
 
 <tr class:notused={bMarkUnusedLines && !bAddressLineUsed}>
@@ -31,18 +33,15 @@
   <td>{@html formatDistance(addressLine.distance, bDistanceInMeters)}</td>
   <td>
     {#if addressLine.osm_id}
-      <DetailsLink feature={addressLine}>
-        details
-      </DetailsLink>
+      <DetailsLink feature={addressLine} />
     {:else if !reverse_only && addressLine.type.match(/^country/)}
-      <PageLink page='search' params_hash={{ country: addressLine.localname }}>
-        search by name
-      </PageLink>
+      <PageLink page='search'
+                text='search by name'
+                params_hash={{ country: addressLine.localname }} />
     {:else if !reverse_only && addressLine.type === 'postcode'}
       <PageLink page='search'
-                params_hash={{ postalcode: addressLine.localname, country: sCountryCode }}>
-        search by name
-      </PageLink>
+                text='search by name'
+                params_hash={{ postalcode: addressLine.localname, country: sCountryCode }} />
     {/if}
   </td>
 </tr>
diff --git a/src/components/DetailsPostcodeHint.svelte b/src/components/DetailsPostcodeHint.svelte
index da78b83..c1b6d7e 100644
--- a/src/components/DetailsPostcodeHint.svelte
+++ b/src/components/DetailsPostcodeHint.svelte
@@ -1,9 +1,7 @@
 <script>
-  export let postcode;
-  export let lat;
-  export let lon;
+  let { postcode, lat, lon } = $props();
 
-  let overpass_query = `
+  const overpass_query = $derived(`
     // Based on the map bounds, you can zoom out and rerun the query
 
     [timeout:30]; // in seconds
@@ -25,32 +23,35 @@
     out body;
     >;
     out skel qt;
-  `.replace(/^ {4}/gm, '');
+  `.replace(/^ {4}/gm, ''));
 
   // https://wiki.openstreetmap.org/wiki/Overpass_turbo/Development#URL_Parameters
   // Q: the query
   // C: map position
   // R: run the query
-  let url = 'https://overpass-turbo.eu/'
+  const url = $derived('https://overpass-turbo.eu/'
     + '?Q=' + encodeURIComponent(overpass_query)
     + '&C=' + encodeURIComponent([lat, lon, 15].join(';'))
-    + '&R';
+    + '&R');
 
-  function openHint() {
+  function openHint(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
     document.getElementById('postcode-hint').style.display = 'block';
   }
-  function closeHint() {
+  function closeHint(ev) {
+    ev.stopPropagation();
     document.getElementById('postcode-hint').style.display = 'none';
   }
 </script>
 
-(<a href="#openHint" on:click|preventDefault|stopPropagation={openHint}>how?</a>)
+(<a href="#openHint" onclick={openHint}>how?</a>)
 
 <div id="postcode-hint" class="my-2 p-2">
   <button type="button"
           class="btn-close float-end m-1"
           aria-label="Close"
-          on:click|stopPropagation={closeHint}
+          onclick={closeHint}
   ></button>
   <p>
     Nightly calculated from nearby places having this postcode.
diff --git a/src/components/Error.svelte b/src/components/Error.svelte
index fad20eb..bfc17a2 100644
--- a/src/components/Error.svelte
+++ b/src/components/Error.svelte
@@ -1,7 +1,7 @@
 <script>
   import { error_store } from '../lib/stores.js';
 
-  let error_message;
+  let error_message = $state();
 
   error_store.subscribe(text => { error_message = text; });
 
@@ -17,6 +17,6 @@
     <button type="button"
             class="btn-close float-end"
             aria-label="dismiss"
-            on:click={dismiss_message}></button>
+            onclick={dismiss_message}></button>
   </div>
 {/if}
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 7e14211..fc359cd 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -6,12 +6,14 @@
 
   import { map_store, page } from '../lib/stores.js';
 
-  $: view = $page.tab;
-  $: page_title = Nominatim_Config.Page_Title;
-  $: reverse_only = Nominatim_Config.Reverse_Only;
+  let { subheader } = $props();
 
-  let map_lat;
-  let map_lon;
+  const page_title = Nominatim_Config.Page_Title;
+  const reverse_only = Nominatim_Config.Reverse_Only;
+
+  let view = $state();
+  let map_lat = $state();
+  let map_lon = $state();
 
   map_store.subscribe(map => {
     if (!map) return;
@@ -21,6 +23,8 @@
       map_lon = map.getCenter().lng.toFixed(5);
     });
   });
+
+  page.subscribe(pg => { view = pg.tab; });
 </script>
 
 <style>
@@ -64,15 +68,17 @@
 
 </style>
 
+{#snippet mainPageLink()}
+  <img alt="logo" id="theme-logo" src="theme/logo.png" />
+  <h1>{page_title}</h1>
+{/snippet}
+
 <header class="container-fluid">
   <nav class="navbar navbar-expand-sm navbar-light">
     <div class="container-fluid">
       <!-- Brand -->
       <div class="navbar-brand">
-        <PageLink page={reverse_only ? 'reverse' : 'search'}>
-          <img alt="logo" id="theme-logo" src="theme/logo.png" />
-          <h1>{page_title}</h1>
-        </PageLink>
+        <PageLink text_snippet={mainPageLink} page={reverse_only ? 'reverse' : 'search'} />
       </div>
       <!-- Toggler (hamburger button) -->
       <button class="navbar-toggler"
@@ -90,23 +96,20 @@
           {#if !reverse_only}
             <li class="nav-item">
               <PageLink page="search"
-                        extra_classes="nav-link {view === 'search' ? 'active' : ''}">
-                Search
-              </PageLink>
+                        text="Search"
+                        extra_classes="nav-link {view === 'search' ? 'active' : ''}" />
             </li>
           {/if}
           <li class="nav-item">
             <ReverseLink lat={map_lat}
                          lon={map_lon}
-                         extra_classes="nav-link {view === 'reverse' ? 'active' : ''}">
-              Reverse
-            </ReverseLink>
+                         text="Reverse"
+                         extra_classes="nav-link {view === 'reverse' ? 'active' : ''}" />
           </li>
           <li class="nav-item">
             <PageLink page="details"
-                      extra_classes="nav-link {view === 'details' ? 'active' : ''}">
-              Search By ID
-            </PageLink>
+                      text="Search By ID"
+                      extra_classes="nav-link {view === 'details' ? 'active' : ''}" />
           </li>
         </ul>
       </div>
@@ -137,9 +140,8 @@
         </li>
         <li class="nav-item">
           <PageLink page="about"
-                    extra_classes="nav-link {view === 'about' ? 'active' : ''}">
-            About & Help
-          </PageLink>
+                    text="Abount & Help"
+                    extra_classes="nav-link {view === 'about' ? 'active' : ''}" />
         </li>
       </ul>
     </div>
@@ -149,7 +151,7 @@
   <h2>{view}</h2>
 </section>
 <section class="search-section">
-  <slot/>
+  {@render subheader?.()}
 </section>
 <Error/>
 <LastUpdated/>
diff --git a/src/components/LastUpdated.svelte b/src/components/LastUpdated.svelte
index b87ca64..2180a70 100644
--- a/src/components/LastUpdated.svelte
+++ b/src/components/LastUpdated.svelte
@@ -4,8 +4,9 @@
   import { last_api_request_url_store } from '../lib/stores.js';
   import { fetch_from_api } from '../lib/api_utils.js';
 
-  let last_updated_date;
-  let last_api_request_url;
+  let last_updated_date = $state();
+  let last_api_request_url = $state();
+
   let fetch_running = false; // prevent multiple parallel fetch runs
 
   last_api_request_url_store.subscribe(url => {
@@ -69,7 +70,7 @@
           {timeago.format(new Date(last_updated_date))}
         </abbr>
       {/if}
-      (<PageLink page="status">Details</PageLink>)
+      (<PageLink page="status" text="Details" />)
     </div>
   </div>
 </div>
diff --git a/src/components/Map.svelte b/src/components/Map.svelte
index bc2489f..106acc1 100644
--- a/src/components/Map.svelte
+++ b/src/components/Map.svelte
@@ -9,9 +9,11 @@
   import { map_store } from '../lib/stores.js';
   import MapPosition from '../components/MapPosition.svelte';
 
-  export let display_minimap = false;
-  export let current_result = null;
-  export let position_marker = null;
+  let {
+    display_minimap = false,
+    current_result = null,
+    position_marker = null
+  } = $props();
 
   let dataLayers = [];
 
@@ -177,9 +179,10 @@
     }
   }
 
-  $: setMapData(current_result);
+  $effect(() => { setMapData(current_result); });
 
   function show_map_position_click(e) {
+    e.stopPropagation();
     e.target.style.display = 'none';
     document.getElementById('map-position').style.display = 'block';
   }
@@ -188,7 +191,7 @@
 <MapPosition />
 <div id="map" use:mapAction></div>
 <button id="show-map-position" class="leaflet-bar btn btn-sm btn-outline-secondary"
-      on:click|stopPropagation={show_map_position_click}
+      onclick={show_map_position_click}
 >show map bounds</button>
 
 <style>
diff --git a/src/components/MapIcon.svelte b/src/components/MapIcon.svelte
index 3892c32..90c6b5e 100644
--- a/src/components/MapIcon.svelte
+++ b/src/components/MapIcon.svelte
@@ -1,10 +1,10 @@
 <script>
 
-  export let aPlace;
+  let { aPlace } = $props();
 
-  $: sIcon = getIcon(aPlace.category, aPlace.type);
-  $: title = 'icon for ' + aPlace.category + ' ' + aPlace.type;
-  $: url = Nominatim_Config.Images_Base_Url + sIcon + '.p.20.png';
+  const sIcon = $derived(getIcon(aPlace.category, aPlace.type));
+  const title = $derived('icon for ' + aPlace.category + ' ' + aPlace.type);
+  const url = $derived(Nominatim_Config.Images_Base_Url + sIcon + '.p.20.png');
 
   function getIcon(category, type) {
     // equivalent to PHP Nominatim::ClassTypes::getIcon
diff --git a/src/components/MapPosition.svelte b/src/components/MapPosition.svelte
index 074774d..b8fe8dd 100644
--- a/src/components/MapPosition.svelte
+++ b/src/components/MapPosition.svelte
@@ -1,14 +1,13 @@
 <script>
 
   import { map_store } from '../lib/stores.js';
-  let last_click_latlng;
 
-  let map_center;
-  let map_zoom;
-  let map_viewbox;
-  let view_on_osm_link;
-  let last_click;
-  let mouse_position;
+  let map_center = $state();
+  let map_zoom = $state();
+  let map_viewbox = $state();
+  let view_on_osm_link = $state();
+  let last_click = $state();
+  let mouse_position = $state();
 
   function map_link_to_osm(map) {
     var zoom = map.getZoom();
@@ -46,9 +45,6 @@
     if (mouse_lat_lng) {
       mouse_position = [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(',');
     }
-    if (last_click_latlng) {
-      last_click = [last_click_latlng.lat.toFixed(5), last_click_latlng.lng.toFixed(5)].join(',');
-    }
   }
 
 
@@ -65,7 +61,10 @@
     });
 
     map.on('click', function (e) {
-      last_click_latlng = e.latlng;
+      const last_click_latlng = e.latlng;
+      if (last_click_latlng) {
+        last_click = [last_click_latlng.lat.toFixed(5), last_click_latlng.lng.toFixed(5)].join(',');
+      }
       display_map_position(map);
     });
 
@@ -94,7 +93,7 @@
     <br>
     mouse position: {mouse_position}
   </div>
-  <div id="map-position-close"><a href="#hide" on:click={handleHideClick}>hide</a></div>
+  <div id="map-position-close"><a href="#hide" onclick={handleHideClick}>hide</a></div>
 </div>
 
 
diff --git a/src/components/PageLink.svelte b/src/components/PageLink.svelte
index 0e2920a..b86261d 100644
--- a/src/components/PageLink.svelte
+++ b/src/components/PageLink.svelte
@@ -1,21 +1,25 @@
 <script>
   import { refresh_page } from '../lib/stores.js';
 
-  export let page;
-  export let params_hash = {};
-  export let extra_classes = '';
-  let href = page + '.html';
+  let {
+    page,
+    text,
+    text_snippet,
+    params_hash = {},
+    extra_classes = '' } = $props();
 
-  function handleClick() {
+  function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
     refresh_page(page, new URLSearchParams(params_hash));
   }
 
-  $: {
-    let param_str = new URLSearchParams(params_hash).toString();
-    href = page + '.html' + (param_str ? '?' : '') + param_str;
-  }
+  const href = $derived.by(() => {
+    const param_str = new URLSearchParams(params_hash).toString();
+    return page + '.html' + (param_str ? '?' : '') + param_str;
+  });
 </script>
 
-<a on:click|preventDefault|stopPropagation={handleClick} href={href} class={extra_classes}>
-  <slot></slot>
+<a onclick={handleClick} href={href} class={extra_classes}>
+  {#if text_snippet}{@render text_snippet()}{:else}{text}{/if}
 </a>
diff --git a/src/components/ResultsList.svelte b/src/components/ResultsList.svelte
index f936893..29b4ea6 100644
--- a/src/components/ResultsList.svelte
+++ b/src/components/ResultsList.svelte
@@ -7,12 +7,11 @@
   import Welcome from './Welcome.svelte';
   import MapIcon from './MapIcon.svelte';
 
-  export let reverse_search = false;
-  export let current_result = null;
+  let { reverse_search = false, current_result = $bindable() } = $props();
 
-  let aSearchResults;
-  let iHighlightNum;
-  let sMoreURL;
+  let aSearchResults = $state();
+  let iHighlightNum = $state();
+  let sMoreURL = $state();
 
   results_store.subscribe(data => {
     if (!data) { return; }
@@ -41,6 +40,7 @@
   });
 
   function handleClick(e) {
+    e.stopPropagation();
     let result_el = e.target;
     if (!result_el.className.match('result')) {
       result_el = result_el.parentElement;
@@ -57,13 +57,13 @@
   <div id="searchresults" role="list">
 
     {#each aSearchResults as aResult, iResNum}
-      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <div class="result"
            class:highlight={iResNum === iHighlightNum}
            role="listitem"
            data-position="{iResNum}"
-           on:click|stopPropagation={handleClick}
-           on:keypress|stopPropagation={handleClick}>
+           onclick={handleClick}
+           onkeypress={handleClick}>
         <div style="float:right">
           <MapIcon aPlace={aResult} />
         </div>
@@ -71,9 +71,7 @@
         <span class="type">{formatLabel(aResult)}</span>
         <p class="coords">{aResult.lat},{aResult.lon}</p>
 
-        <DetailsLink extra_classes="btn btn-outline-secondary btn-sm" feature={aResult}>
-          details
-        </DetailsLink>
+        <DetailsLink extra_classes="btn btn-outline-secondary btn-sm" feature={aResult} />
       </div>
     {/each}
 
diff --git a/src/components/ReverseLink.svelte b/src/components/ReverseLink.svelte
index f7ea18c..b514123 100644
--- a/src/components/ReverseLink.svelte
+++ b/src/components/ReverseLink.svelte
@@ -2,15 +2,15 @@
 import { refresh_page } from '../lib/stores.js';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
 
-export let lat = null;
-export let lon = null;
-export let zoom = null;
-export let extra_classes = '';
-
-let params = new SvelteURLSearchParams();
-let href = 'reverse.html';
-
-$: {
+let {
+  lat = null,
+  lon = null,
+  zoom = null,
+  text,
+  extra_classes = ''
+} = $props();
+
+const params = $derived.by(() => {
   let new_params = new SvelteURLSearchParams();
 
   if (lat && lon) {
@@ -22,17 +22,20 @@ $: {
     }
   }
 
-  params = new_params;
-}
+  return new_params;
+});
 
-$: {
+const href = $derived.by(() => {
   let param_str = params.toString();
-  href = 'reverse.html' + (param_str ? '?' : '') + param_str;
+  return 'reverse.html' + (param_str ? '?' : '') + param_str;
+});
+
+function onClick(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  refresh_page('reverse', params);
 }
+
 </script>
 
-<a on:click|preventDefault|stopPropagation={() => refresh_page('reverse', params)}
-    href={href}
-    class={extra_classes}>
-  <slot></slot>
-</a>
+<a onclick={onClick} href={href} class={extra_classes}>{text}</a>
diff --git a/src/components/SearchSection.svelte b/src/components/SearchSection.svelte
index c1d3c18..209f2c5 100644
--- a/src/components/SearchSection.svelte
+++ b/src/components/SearchSection.svelte
@@ -4,9 +4,10 @@
   import { map_store } from '../lib/stores.js';
   import { get } from 'svelte/store';
 
-  export let bStructuredSearch = false;
-  export let api_request_params = {};
-  let sViewBox;
+  let { bStructuredSearch = false, api_request_params = {} } = $props();
+
+  let sViewBox = $state();
+
   // lat,lon are later set in update_reverse_link()
   let lat; // eslint-disable-line no-unused-vars
   let lon; // eslint-disable-line no-unused-vars
@@ -78,6 +79,75 @@
   }
 </script>
 
+{#snippet submitButton()}
+<div class="col-auto">
+  <button type="submit" class="btn btn-primary btn-sm">Search</button>
+  <input type="hidden"
+         name="viewbox" value="{sViewBox || ''}" />
+  <input type="hidden"
+         name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
+  <input type="hidden"
+         name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
+  <input type="hidden"
+         name="accept-language" value="{api_request_params['accept-language'] || ''}" />
+  <input type="hidden"
+         name="countrycodes" value="{api_request_params.countrycodes || ''}"
+                             pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
+  <input type="hidden"
+         name="limit" value="{api_request_params.limit || ''}" />
+  <input type="hidden"
+         name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+  <input type="hidden"
+         name="layer" value="{api_request_params.layer || ''}" />
+</div>
+{/snippet}
+
+{#snippet simpleSearchForm()}
+<div class="col-auto">
+  <input id="q"
+         name="q"
+         type="text"
+         class="form-control form-control-sm"
+         placeholder="Search"
+         value="{api_request_params.q || ''}" />
+</div>
+{@render submitButton()}
+{/snippet}
+
+{#snippet structuredSearchForm()}
+<div class="col-auto">
+  <input name="street" type="text" class="form-control form-control-sm me-1"
+         placeholder="House number/Street"
+         value="{api_request_params.street || ''}" />
+</div>
+<div class="col-auto">
+  <input name="city" type="text" class="form-control form-control-sm me-1"
+         placeholder="City"
+         value="{api_request_params.city || ''}" />
+</div>
+<div class="col-auto">
+  <input id="county" name="county" type="text" class="form-control form-control-sm me-1"
+         placeholder="County"
+         value="{api_request_params.county || ''}" />
+</div>
+<div class="col-auto">
+  <input name="state" type="text" class="form-control form-control-sm me-1"
+         placeholder="State"
+         value="{api_request_params.state || ''}" />
+</div>
+<div class="col-auto">
+  <input name="country" type="text" class="form-control form-control-sm me-1"
+         placeholder="Country"
+         value="{api_request_params.country || ''}" />
+</div>
+<div class="col-auto">
+  <input name="postalcode" type="text" class="form-control form-control-sm me-1"
+         placeholder="Postal Code"
+         value="{api_request_params.postalcode || ''}" />
+</div>
+{@render submitButton()}
+{/snippet}
+
 <ul class="nav nav-tabs">
   <li class="nav-item">
     <a class="nav-link" class:active={!bStructuredSearch} data-bs-toggle="tab" href="#simple">
@@ -93,90 +163,10 @@
 
 <div class="tab-content py-2">
   <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
-    <UrlSubmitForm page="search">
-      <div class="col-auto">
-        <input id="q"
-               name="q"
-               type="text"
-               class="form-control form-control-sm"
-               placeholder="Search"
-               value="{api_request_params.q || ''}" />
-      </div>
-      <div class="col-auto">
-        <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
-        <input type="hidden"
-               name="viewbox" value="{sViewBox || ''}" />
-        <input type="hidden"
-               name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
-        <input type="hidden"
-               name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-        <input type="hidden"
-               name="accept-language"value="{api_request_params['accept-language'] || ''}" />
-        <input type="hidden"
-               name="countrycodes" value="{api_request_params.countrycodes || ''}"
-                                   pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
-        <input type="hidden"
-               name="limit" value="{api_request_params.limit || ''}" />
-        <input type="hidden"
-               name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
-        <input type="hidden"
-               name="layer" value="{api_request_params.layer || ''}" />
-      </div>
-    </UrlSubmitForm>
+    <UrlSubmitForm page="search" content={simpleSearchForm} />
   </div>
   <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
-    <UrlSubmitForm page="search">
-      <div class="col-auto">
-        <input name="street" type="text" class="form-control form-control-sm me-1"
-               placeholder="House number/Street"
-               value="{api_request_params.street || ''}" />
-      </div>
-      <div class="col-auto">
-        <input name="city" type="text" class="form-control form-control-sm me-1"
-               placeholder="City"
-               value="{api_request_params.city || ''}" />
-      </div>
-      <div class="col-auto">
-        <input id="county" name="county" type="text" class="form-control form-control-sm me-1"
-               placeholder="County"
-               value="{api_request_params.county || ''}" />
-      </div>
-      <div class="col-auto">
-        <input name="state" type="text" class="form-control form-control-sm me-1"
-               placeholder="State"
-               value="{api_request_params.state || ''}" />
-      </div>
-      <div class="col-auto">
-        <input name="country" type="text" class="form-control form-control-sm me-1"
-               placeholder="Country"
-               value="{api_request_params.country || ''}" />
-      </div>
-      <div class="col-auto">
-        <input name="postalcode" type="text" class="form-control form-control-sm me-1"
-               placeholder="Postal Code"
-               value="{api_request_params.postalcode || ''}" />
-      </div>
-      <div class="col-auto">
-        <button type="submit" class="btn btn-primary btn-sm">Search</button>
-        <input type="hidden"
-               name="viewbox" value="{sViewBox || ''}" />
-        <input type="hidden"
-               name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
-        <input type="hidden"
-               name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-        <input type="hidden"
-               name="accept-language" value="{api_request_params['accept-language'] || ''}" />
-        <input type="hidden"
-               name="countrycodes" value="{api_request_params.countrycodes || ''}"
-                                   pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
-        <input type="hidden"
-               name="limit" value="{api_request_params.limit || ''}" />
-        <input type="hidden"
-               name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
-        <input type="hidden"
-               name="layer" value="{api_request_params.layer || ''}" />
-      </div>
-    </UrlSubmitForm>
+    <UrlSubmitForm page="search" content={structuredSearchForm} />
   </div>
 </div> <!-- /tab-content -->
 
@@ -188,7 +178,7 @@
       <div class="form-check form-check-inline">
         <label class="form-check-label" for="use_viewbox">apply viewbox</label>
         <input type="checkbox" class="form-check-input api-param-setting"
-               id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
+               id="use_viewbox" checked={api_request_params.viewbox} onchange={reset_viewbox}>
       </div>
     </li>
 
@@ -196,7 +186,7 @@
       <div class="form-check form-check-inline">
         <label class="form-check-label" for="option_bounded">bounded to viewbox</label>
         <input type="checkbox" class="form-check-input api-param-setting"
-               id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
+               id="option_bounded" checked={!!api_request_params.bounded} onchange={set_bounded}>
       </div>
     </li>
 
@@ -207,7 +197,7 @@
                class="form-check-input api-param-setting"
                id="option_dedupe"
                checked={api_request_params.dedupe === 0 ? 0 : 1}
-               on:change={set_dedupe}>
+               onchange={set_dedupe}>
       </div>
     </li>
 
@@ -217,7 +207,7 @@
              class="form-control form-control-sm d-inline w-auto api-param-setting"
              data-api-param="limit" id="option_limit" min="1" max="50"
              value="{api_request_params.limit || ''}"
-             on:change={set_api_param}>
+             onchange={set_api_param}>
     </li>
 
     <li>
@@ -227,7 +217,7 @@
              data-api-param="polygon_threshold" id="option_polygon_threshold"
              min="0.0" max="1.0" step="0.001"
              value="{api_request_params.polygon_threshold || ''}"
-             on:change={set_api_param}>
+             onchange={set_api_param}>
     </li>
 
     <li>
@@ -236,7 +226,7 @@
              class="form-control form-control-sm d-inline w-auto api-param-setting"
              data-api-param="accept-language" id="accept_lang" size="15"
              value="{api_request_params['accept-language'] || ''}"
-             on:change={set_api_param}>
+             onchange={set_api_param}>
     </li>
 
     <li>
@@ -246,13 +236,13 @@
              data-api-param="countrycodes" id="option_ccode" size="15"
              value="{api_request_params.countrycodes || ''}"
              pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$"
-             on:change={set_api_param}>
+             onchange={set_api_param}>
     </li>
     <li>
       <label for="option_layer">Layer</label>
       <input id="option_layer" name="layer" placeholder="e.g. address,poi,railway,natural,manmade"
         value="{api_request_params.layer || ''}"
-        data-api-param="layer" on:change={set_api_param}
+        data-api-param="layer" onchange={set_api_param}
         class="form-control form-control-sm d-inline w-auto api-param-setting">
     </li>
   </ul>
diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte
index aaf6f9f..11f6c12 100644
--- a/src/components/SearchSectionDetails.svelte
+++ b/src/components/SearchSectionDetails.svelte
@@ -2,9 +2,11 @@
   import { refresh_page } from '../lib/stores.js';
   import { SvelteURLSearchParams } from 'svelte/reactivity';
 
-  export let api_request_params = {};
+  let { api_request_params = {} } = $props();
 
   function handleFormSubmit(event) {
+    event.preventDefault();
+
     let form_el = event.target;
     let val = form_el.querySelector('input[type=edit]').value.trim();
     let type_and_id_match = val.match(/^\s*([NWR])(-?\d+)\s*$/i)
@@ -25,7 +27,7 @@
   }
 </script>
 
-<form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
+<form onsubmit={handleFormSubmit} class="form-inline" action="details.html">
   <div class="row g-1">
     <div class="col-auto">
       <!-- eslint-disable-next-line max-len -->
diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index 34282ae..2bf0542 100644
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -6,10 +6,7 @@
   import { zoomLevels } from '../lib/helpers.js';
   import { map_store, refresh_page } from '../lib/stores.js';
 
-  export let lat = '';
-  export let lon = '';
-  export let zoom = '';
-  export let api_request_params = {};
+  let { lat = '', lon = '', zoom = '', api_request_params = {} } = $props();
 
   function gotoCoordinates(newlat, newlon, newzoom) {
     if (newlat === null || newlon === null) return;
@@ -43,10 +40,16 @@
     document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
   }
 
+  function onSwitchCoords(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    gotoCoordinates(lon, lat);
+  }
+
   onDestroy(unsubscribe);
 </script>
 
-<UrlSubmitForm page="reverse">
+{#snippet content()}
   <div class="col-auto">
     <label for="reverse-lat">lat</label>
   </div>
@@ -58,11 +61,11 @@
            placeholder="latitude"
            pattern="^-?\d+(\.\d+)?$"
            bind:value={lat}
-           on:change={maybeSplitLatitude} />
+           onchange={maybeSplitLatitude} />
   </div>
   <div class="col-auto">
     <button id="switch-coords"
-       on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
+       onclick={onSwitchCoords}
        class="btn btn-outline-secondary btn-sm"
        title="switch lat and lon">&lt;&gt;</button>
   </div>
@@ -94,7 +97,8 @@
   <div class="col-auto">
     <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
   </div>
-</UrlSubmitForm>
+{/snippet}
+<UrlSubmitForm page="reverse" {content} />
 
 <!-- Additional options -->
 <details id="searchAdvancedOptions" class="mt-2">
@@ -104,7 +108,7 @@
       <label for="option_layer">Layer</label>
       <input id="option_layer" name="layer" placeholder="e.g. address,poi,railway,natural,manmade"
         value="{api_request_params.layer || ''}"
-        data-api-param="layer" on:change={set_api_param}
+        data-api-param="layer" onchange={set_api_param}
         class="form-control form-control-sm d-inline w-auto api-param-setting">
     </li>
   </ul>
diff --git a/src/components/UrlSubmitForm.svelte b/src/components/UrlSubmitForm.svelte
index 7b46f74..d85ca32 100644
--- a/src/components/UrlSubmitForm.svelte
+++ b/src/components/UrlSubmitForm.svelte
@@ -2,7 +2,7 @@
   import { refresh_page } from '../lib/stores.js';
   import { SvelteURLSearchParams } from 'svelte/reactivity';
 
-  export let page;
+  let { page, content } = $props();
 
   function serialize_form(form) {
     var params = new SvelteURLSearchParams();
@@ -34,6 +34,8 @@
   }
 
   function handle_submit(event) {
+    event.preventDefault();
+
     let form = event.target;
 
     let allow_submit = true;
@@ -49,12 +51,12 @@
   }
 </script>
 
-<form on:submit|preventDefault={handle_submit}
+<form onsubmit={handle_submit}
       class="form-inline"
       role="search"
       accept-charset="UTF-8"
       action="">
   <div class="row g-2">
-    <slot></slot>
+    {@render content?.()}
   </div>
 </form>
diff --git a/src/pages/DeletablePage.svelte b/src/pages/DeletablePage.svelte
index 20b960b..836ce4e 100644
--- a/src/pages/DeletablePage.svelte
+++ b/src/pages/DeletablePage.svelte
@@ -6,7 +6,7 @@
   import Header from '../components/Header.svelte';
   import DetailsLink from '../components/DetailsLink.svelte';
 
-  let aPolygons = [];
+  let aPolygons = $state([]);
 
   function loaddata() {
     fetch_from_api('deletable', { format: 'json' }, function (data) {
@@ -42,7 +42,7 @@
         <tbody>
           {#each aPolygons as polygon}
           <tr>
-            <td><DetailsLink feature={polygon}>{polygon.place_id}</DetailsLink></td>
+            <td><DetailsLink feature={polygon} text={polygon.place_id} /></td>
             <td>{polygon.country_code}</td>
             <td>{polygon.name}</td>
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
diff --git a/src/pages/DetailsPage.svelte b/src/pages/DetailsPage.svelte
index 55f5cb9..7411c35 100644
--- a/src/pages/DetailsPage.svelte
+++ b/src/pages/DetailsPage.svelte
@@ -12,14 +12,13 @@
   import DetailsOneRow from '../components/DetailsOneRow.svelte';
   import DetailsLink from '../components/DetailsLink.svelte';
   import DetailsPostcodeHint from '../components/DetailsPostcodeHint.svelte';
-  import InfoRow from '../components/DetailsInfoRow.svelte';
   import InfoRowList from '../components/DetailsInfoRowList.svelte';
   import Map from '../components/Map.svelte';
 
-  let aPlace;
-  let base_url;
-  let api_request_params;
-  let api_request_finished = false;
+  let aPlace = $state();
+  let base_url = $state();
+  let api_request_params = $state();
+  let api_request_finished = $state(false);
 
   function loaddata(search_params) {
     api_request_params = {
@@ -68,19 +67,20 @@
     return aLine ? aLine.localname : null;
   }
 
-  $: {
-    let pageinfo = $page;
+  page.subscribe((pageinfo) => {
     if (pageinfo.tab === 'details') {
       loaddata(pageinfo.params);
       base_url = window.location.search;
     }
-  }
-  $: reverse_only = Nominatim_Config.Reverse_Only;
+  });
+
+  const reverse_only = Nominatim_Config.Reverse_Only;
 </script>
 
-<Header>
+{#snippet subheader()}
   <SearchSectionDetails api_request_params={api_request_params}/>
-</Header>
+{/snippet}
+<Header {subheader} />
 
 <div class="container">
   {#if aPlace}
@@ -88,7 +88,7 @@
       <div class="col-sm-10">
         <h1>
           {aPlace.localname || `${formatOSMType(aPlace.osm_type)} ${aPlace.osm_id}` }
-          <small><DetailsLink feature={aPlace}>link to this page</DetailsLink></small>
+          <small><DetailsLink feature={aPlace} text="link to this page" /></small>
         </h1>
       </div>
       <div class="col-sm-2 text-end">
@@ -99,55 +99,61 @@
       <div class="col-md-6">
         <table id="locationdetails" class="table table-striped table-responsive">
           <tbody>
-            <InfoRow title="Name">
+            <tr class="info-row"><td>Name</td><td>
             {#if aPlace.names && typeof (aPlace.names) === 'object'
               && Object.keys(aPlace.names).length}
               <InfoRowList items={aPlace.names} />
             {:else}
               <span class="noname fw-bold">No Name</span>
             {/if}
-            </InfoRow>
-            <InfoRow title="Type">{aPlace.category}:{aPlace.type}</InfoRow>
-            <InfoRow title="Last Updated">{aPlace.indexed_date}</InfoRow>
+            </td></tr>
+            <tr class="info-row"><td>Type</td><td>{aPlace.category}:{aPlace.type}</td></tr>
+            <tr class="info-row"><td>Last Updated</td><td>{aPlace.indexed_date}</td></tr>
             {#if (isAdminBoundary(aPlace)) }
-              <InfoRow title="Admin Level">{aPlace.admin_level}</InfoRow>
+              <tr class="info-row"><td>Admin Level</td><td>{aPlace.admin_level}</td></tr>
             {/if}
-            <InfoRow title="Search Rank">{aPlace.rank_search}</InfoRow>
-            <InfoRow title="Address Rank">
+            <tr class="info-row"><td>Search Rank</td><td>{aPlace.rank_search}</td></tr>
+            <tr class="info-row"><td>Address Rank</td><td>
               {aPlace.rank_address} ({formatAddressRank(aPlace.rank_address)})
-            </InfoRow>
+            </td></tr>
             {#if aPlace.calculated_importance}
-              <InfoRow title="Importance">
+              <tr class="info-row"><td>Importance</td><td>
                   {aPlace.calculated_importance}
                   {#if !aPlace.importance} (estimated){/if}
-              </InfoRow>
+              </td></tr>
             {/if}
-            <InfoRow title="Coverage">{coverageType(aPlace)}</InfoRow>
-            <InfoRow title="Centre Point (lat,lon)">
+            <tr class="info-row"><td>Coverage</td><td>{coverageType(aPlace)}</td></tr>
+            <tr class="info-row"><td>Centre Point (lat,lon)</td><td>
                 {aPlace.centroid.coordinates[1]},{aPlace.centroid.coordinates[0]}
-            </InfoRow>
+            </td></tr>
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            <InfoRow title="OSM">{@html osmLink(aPlace)}</InfoRow>
-            <InfoRow title="Place Id">
+            <tr class="info-row"><td>OSM</td><td>{@html osmLink(aPlace)}</td></tr>
+            <tr class="info-row"><td>Place Id</td><td>
                {aPlace.place_id}
                (<a href="https://nominatim.org/release-docs/develop/api/Output/#place_id-is-not-a-persistent-id">
                  on this server
                </a>)
-            </InfoRow>
+            </td></tr>
             {#if aPlace.calculated_wikipedia}
+              <tr class="info-row"><td>Wikipedia Calculated</td><td>
               <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-              <InfoRow title="Wikipedia Calculated">{@html wikipediaLink(aPlace)}</InfoRow>
+                {@html wikipediaLink(aPlace)}
+              </td></tr>
             {/if}
-            <InfoRow title="Computed Postcode">
+            <tr class="info-row"><td>Computed Postcode</td><td>
               {#if aPlace.calculated_postcode}
                 {aPlace.calculated_postcode}
                 <DetailsPostcodeHint postcode={aPlace.calculated_postcode}
                                      lat={aPlace.centroid.coordinates[1]}
                                      lon={aPlace.centroid.coordinates[0]} />
               {/if}
-            </InfoRow>
-            <InfoRow title="Address Tags"><InfoRowList items={aPlace.addresstags} /></InfoRow>
-            <InfoRow title="Extra Tags"><InfoRowList items={aPlace.extratags} /></InfoRow>
+            </td></tr>
+            <tr class="info-row"><td>Address Tags</td><td>
+              <InfoRowList items={aPlace.addresstags} />
+            </td></tr>
+            <tr class="info-row"><td>Extra Tags</td><td>
+              <InfoRowList items={aPlace.extratags} />
+            </td></tr>
           </tbody>
         </table>
       </div>
@@ -299,6 +305,11 @@
     color: var(--bs-danger);
   }
 
+  tr.info-row td {
+    padding: 2px 8px;
+    font-size: 0.9em;
+  }
+
   #map-wrapper {
     position: relative;
     width:100%;
diff --git a/src/pages/PolygonsPage.svelte b/src/pages/PolygonsPage.svelte
index 79efe72..34e6ee6 100644
--- a/src/pages/PolygonsPage.svelte
+++ b/src/pages/PolygonsPage.svelte
@@ -5,7 +5,7 @@
 
   import Header from '../components/Header.svelte';
 
-  let aPolygons = [];
+  let aPolygons = $state([]);
 
   function loaddata() {
     fetch_from_api('polygons', { format: 'json' }, function (data) {
diff --git a/src/pages/ReversePage.svelte b/src/pages/ReversePage.svelte
index fe65b64..dcbf5b3 100644
--- a/src/pages/ReversePage.svelte
+++ b/src/pages/ReversePage.svelte
@@ -7,9 +7,9 @@
   import ResultsList from '../components/ResultsList.svelte';
   import Map from '../components/Map.svelte';
 
-  let api_request_params;
-  let current_result;
-  let position_marker; // what the user searched for
+  let api_request_params = $state();
+  let current_result = $state();
+  let position_marker = $state(); // what the user searched for
 
   function loaddata(search_params) {
     update_html_title();
@@ -45,20 +45,20 @@
     }
   }
 
-  $: {
-    let pageinfo = $page;
+  page.subscribe((pageinfo) => {
     if (pageinfo.tab === 'reverse') {
       loaddata(pageinfo.params);
     }
-  }
+  });
 </script>
 
-<Header>
+{#snippet subheader()}
   <SearchSectionReverse lat={api_request_params.lat}
                         lon={api_request_params.lon}
                         zoom={api_request_params.zoom}
                         api_request_params={api_request_params} />
-</Header>
+{/snippet}
+<Header {subheader} />
 
 <div id="content">
   <div class="sidebar">
diff --git a/src/pages/SearchPage.svelte b/src/pages/SearchPage.svelte
index fd4e7c5..6e2d606 100644
--- a/src/pages/SearchPage.svelte
+++ b/src/pages/SearchPage.svelte
@@ -7,9 +7,9 @@
   import ResultsList from '../components/ResultsList.svelte';
   import Map from '../components/Map.svelte';
 
-  let api_request_params;
-  let bStructuredSearch;
-  let current_result;
+  let api_request_params = $state();
+  let bStructuredSearch = $state();
+  let current_result = $state();
 
   function loaddata(search_params) {
     update_html_title();
@@ -69,17 +69,17 @@
     }
   }
 
-  $: {
-    let pageinfo = $page;
+  page.subscribe((pageinfo) => {
     if (pageinfo.tab === 'search') {
       loaddata(pageinfo.params);
     }
-  }
+  });
 </script>
 
-<Header>
+{#snippet subheader()}
   <SearchSection api_request_params={api_request_params} bStructuredSearch={bStructuredSearch} />
-</Header>
+{/snippet}
+<Header {subheader} />
 
 <div id="content">
   <div class="sidebar">
diff --git a/src/pages/StatusPage.svelte b/src/pages/StatusPage.svelte
index 662e52e..35d825e 100644
--- a/src/pages/StatusPage.svelte
+++ b/src/pages/StatusPage.svelte
@@ -4,10 +4,10 @@
 
   import Header from '../components/Header.svelte';
 
-  let aStatusData = {};
-  let configuration = Nominatim_Config;
+  let aStatusData = $state({});
+  const configuration = Nominatim_Config;
 
-  let endpoint_url = (typeof configuration.Nominatim_API_Endpoint === 'function') ?
+  const endpoint_url = (typeof configuration.Nominatim_API_Endpoint === 'function') ?
                       configuration.Nominatim_API_Endpoint() :
                       configuration.Nominatim_API_Endpoint;
 
diff --git a/test/search.js b/test/search.js
index 0aa816f..2a383d7 100644
--- a/test/search.js
+++ b/test/search.js
@@ -58,7 +58,7 @@ describe('Search Page', function () {
       assert.deepStrictEqual(map_center_coords.length, 2);
       assert.ok(map_zoom);
       assert.deepStrictEqual(map_viewbox.length, 4);
-      assert.deepStrictEqual(last_click, undefined);
+      assert.deepStrictEqual(last_click, '65.62128,104.41406');
 
       await page.click('#map-position-close a');
       assert.strictEqual(await map_pos_handle.evaluate(node => node.style.display), 'none');
-- 
2.39.5