From a8b6922455b348434fcffa8529955880e33cf029 Mon Sep 17 00:00:00 2001
From: Sarah Hoffmann <lonvia@denofr.de>
Date: Tue, 26 Aug 2025 15:37:02 +0200
Subject: [PATCH] Convert page stores into global applicaton state (#292)

* move page state related properties from store to state

Also goes back to using classic URLStateParam as we don't want
the param state to be reactive.

* convert results_store into simple locale state
---
 src/App.svelte                             |  31 ++----
 src/components/DetailsLink.svelte          |  21 ++--
 src/components/Error.svelte                |  16 +--
 src/components/Header.svelte               |   6 +-
 src/components/LastUpdated.svelte          |  32 +++---
 src/components/PageLink.svelte             |   4 +-
 src/components/ResultsList.svelte          |  39 ++++---
 src/components/ReverseLink.svelte          |  13 +--
 src/components/SearchSectionDetails.svelte |  13 +--
 src/components/SearchSectionReverse.svelte |   6 +-
 src/components/UrlSubmitForm.svelte        |   4 +-
 src/lib/api_utils.js                       |  62 +----------
 src/lib/stores.js                          |  74 -------------
 src/pages/DeletablePage.svelte             |   5 +-
 src/pages/DetailsPage.svelte               |  20 ++--
 src/pages/PolygonsPage.svelte              |   5 +-
 src/pages/ReversePage.svelte               |  29 ++---
 src/pages/SearchPage.svelte                |  23 ++--
 src/pages/StatusPage.svelte                |   5 +-
 src/state/AppState.svelte.js               | 121 +++++++++++++++++++++
 20 files changed, 249 insertions(+), 280 deletions(-)
 delete mode 100644 src/lib/stores.js
 create mode 100644 src/state/AppState.svelte.js

diff --git a/src/App.svelte b/src/App.svelte
index fa9ce32..f2729d5 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,8 +2,7 @@
   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap/dist/js/bootstrap.bundle.js';
 
-  import { onMount } from 'svelte';
-  import { page, refresh_page } from './lib/stores.js';
+  import { appState } from './state/AppState.svelte.js';
 
   import Footer from './components/Footer.svelte';
   import SearchPage from './pages/SearchPage.svelte';
@@ -13,36 +12,24 @@
   import DeletablePage from './pages/DeletablePage.svelte';
   import StatusPage from './pages/StatusPage.svelte';
   import AboutPage from './pages/AboutPage.svelte';
-
-  let view = $state();
-
-  onMount(() => {
-    page.subscribe((pageinfo) => {
-      if (pageinfo.tab !== view) {
-        view = pageinfo.tab;
-      }
-    })
-  });
-
-  refresh_page();
 </script>
 
 <!-- deal with back-button and other user action -->
-<svelte:window on:popstate={() => refresh_page()} />
+<svelte:window on:popstate={() => appState.refreshPage()} />
 
-{#if view === 'search'}
+{#if appState.page.tab === 'search'}
 <SearchPage />
-{:else if view === 'reverse'}
+{:else if appState.page.tab === 'reverse'}
 <ReversePage />
-{:else if view === 'details'}
+{:else if appState.page.tab === 'details'}
 <DetailsPage />
-{:else if view === 'deletable'}
+{:else if appState.page.tab === 'deletable'}
 <DeletablePage />
-{:else if view === 'polygons'}
+{:else if appState.page.tab === 'polygons'}
 <PolygonsPage />
-{:else if view === 'status'}
+{:else if appState.page.tab === 'status'}
 <StatusPage />
-{:else if view === 'about'}
+{:else if appState.page.tab === 'about'}
 <AboutPage />
 {/if}
 <Footer/>
diff --git a/src/components/DetailsLink.svelte b/src/components/DetailsLink.svelte
index a4aba39..4af98d5 100644
--- a/src/components/DetailsLink.svelte
+++ b/src/components/DetailsLink.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { refresh_page } from '../lib/stores.js';
-  import { SvelteURLSearchParams } from 'svelte/reactivity';
+  import { appState } from '../state/AppState.svelte.js';
 
   let { text = 'details', extra_classes = '', feature = null } = $props();
 
@@ -12,28 +11,28 @@
   }
 
   const url_params = $derived.by(() => {
-    const new_params = new SvelteURLSearchParams();
+    const new_params = {};
 
     if (feature !== null) {
       if (feature.osm_type) {
         if (feature.osm_type.length === 1) {
-          new_params.set('osmtype', feature.osm_type);
+          new_params.osmtype = feature.osm_type;
         } else {
-          new_params.set('osmtype', formatShortOSMType(feature.osm_type));
+          new_params.osmtype = formatShortOSMType(feature.osm_type);
         }
 
-        new_params.set('osmid', feature.osm_id);
+        new_params.osmid = feature.osm_id;
 
         if (feature.class) {
-          new_params.set('class', feature.class);
+          new_params.class = feature.class;
         } else if (feature.category) {
-          new_params.set('class', feature.category);
+          new_params.class = feature.category;
         }
       } else if (feature.place_id) {
-        new_params.set('place_id', feature.place_id);
+        new_params.place_id = feature.place_id;
       }
     }
-    return new_params;
+    return new URLSearchParams(new_params);
   });
 
   const href = $derived.by(() => {
@@ -44,7 +43,7 @@
   function handleClick(e) {
     e.preventDefault();
     e.stopPropagation();
-    refresh_page('details', url_params);
+    appState.refreshPage('details', url_params);
   }
 </script>
 
diff --git a/src/components/Error.svelte b/src/components/Error.svelte
index bfc17a2..f58cf70 100644
--- a/src/components/Error.svelte
+++ b/src/components/Error.svelte
@@ -1,22 +1,14 @@
 <script>
-  import { error_store } from '../lib/stores.js';
-
-  let error_message = $state();
-
-  error_store.subscribe(text => { error_message = text; });
-
-  function dismiss_message() {
-    error_store.set(null);
-  }
+  import { appState } from '../state/AppState.svelte.js';
 </script>
 
-{#if error_message}
+{#if appState.errorMessage}
   <div id="error" class="container-fluid alert-danger py-3 px-4">
-    {error_message}
+    {appState.errorMessage}
 
     <button type="button"
             class="btn-close float-end"
             aria-label="dismiss"
-            onclick={dismiss_message}></button>
+            onclick={() => appState.errorMessage = null}></button>
   </div>
 {/if}
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 6f92ced..b9eedd4 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -4,7 +4,7 @@
   import LastUpdated from './LastUpdated.svelte';
   import Error from './Error.svelte';
   import { onMount } from 'svelte';
-  import { page } from '../lib/stores.js';
+  import { appState } from '../state/AppState.svelte.js';
   import { mapState } from '../state/MapState.svelte.js';
   import { initColorToggler } from '../color-mode-toggler.js';
 
@@ -13,9 +13,7 @@
   const page_title = Nominatim_Config.Page_Title;
   const reverse_only = Nominatim_Config.Reverse_Only;
 
-  let view = $state();
-
-  page.subscribe(pg => { view = pg.tab; });
+  let view = $derived(appState.page.tab);
 
   onMount(initColorToggler);
 </script>
diff --git a/src/components/LastUpdated.svelte b/src/components/LastUpdated.svelte
index 2180a70..d95ecce 100644
--- a/src/components/LastUpdated.svelte
+++ b/src/components/LastUpdated.svelte
@@ -1,30 +1,24 @@
 <script>
+  import { onMount } from 'svelte';
   import PageLink from './PageLink.svelte';
   import * as timeago from 'timeago.js';
-  import { last_api_request_url_store } from '../lib/stores.js';
-  import { fetch_from_api } from '../lib/api_utils.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   let last_updated_date = $state();
-  let last_api_request_url = $state();
 
-  let fetch_running = false; // prevent multiple parallel fetch runs
+  let last_api_request_url = $derived.by(() => {
+    const url = appState.lastApiRequestURL;
 
-  last_api_request_url_store.subscribe(url => {
-    last_api_request_url = url;
-
-    if (last_api_request_url) {
-      last_api_request_url = new URL(last_api_request_url, window.location.origin);
-      last_api_request_url.searchParams.delete('polygon_geojson');
-      last_api_request_url = last_api_request_url.toString();
+    if (url) {
+      const urlobj = new URL(url, window.location.origin);
+      urlobj.searchParams.delete('polygon_geojson');
+      return urlobj.toString();
     }
+  });
 
-    if (fetch_running || last_updated_date) return;
-
-    fetch_running = true;
-
-    fetch_from_api('status', { format: 'json' }, function (data) {
+  onMount(() => {
+    appState.fetchFromApi('status', { format: 'json' }, function (data) {
       last_updated_date = data.data_updated;
-      fetch_running = false;
     });
   });
 </script>
@@ -48,7 +42,9 @@
 </style>
 
 <div id="last-updated" class="container-fluid py-2 px-4 mb-3">
-  <div id="loading" class="py-2 px-4">
+  <div id="loading"
+       class="py-2 px-4"
+       style:display={appState.requestProgress === 'start' ? 'block' : 'none'}>
     <div class="spinner-border spinner-border-sm text-primary me-1" role="status"></div>
     Loading data from API ...
   </div>
diff --git a/src/components/PageLink.svelte b/src/components/PageLink.svelte
index b86261d..980c8b0 100644
--- a/src/components/PageLink.svelte
+++ b/src/components/PageLink.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { refresh_page } from '../lib/stores.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   let {
     page,
@@ -11,7 +11,7 @@
   function handleClick(e) {
     e.preventDefault();
     e.stopPropagation();
-    refresh_page(page, new URLSearchParams(params_hash));
+    appState.refreshPage(page, new URLSearchParams(params_hash));
   }
 
   const href = $derived.by(() => {
diff --git a/src/components/ResultsList.svelte b/src/components/ResultsList.svelte
index 29b4ea6..a4d47e3 100644
--- a/src/components/ResultsList.svelte
+++ b/src/components/ResultsList.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { results_store } from '../lib/stores.js';
   import { formatLabel } from '../lib/helpers.js';
   import { SvelteURLSearchParams } from 'svelte/reactivity';
 
@@ -7,27 +6,18 @@
   import Welcome from './Welcome.svelte';
   import MapIcon from './MapIcon.svelte';
 
-  let { reverse_search = false, current_result = $bindable() } = $props();
+  let { results, reverse_search = false, current_result = $bindable() } = $props();
 
-  let aSearchResults = $state();
   let iHighlightNum = $state();
-  let sMoreURL = $state();
 
-  results_store.subscribe(data => {
-    if (!data) { return; }
-    aSearchResults = data;
-    iHighlightNum = 0;
-    current_result = aSearchResults[0];
-
-
-    let search_params = new SvelteURLSearchParams(window.location.search);
-
-    let aResults = data;
+  let sMoreURL = $derived.by(() => {
+    const search_params = new URLSearchParams(window.location.search);
+    const aResults = results;
     // lonvia wrote: https://github.com/osm-search/nominatim-ui/issues/24
     // I would suggest to remove the guessing and always show the link. Nominatim only returns
     // one or two results when it believes the result to be a good enough match.
     // if (aResults.length >= 10) {
-    var aExcludePlaceIds = [];
+    let aExcludePlaceIds = [];
     if (search_params.has('exclude_place_ids')) {
       aExcludePlaceIds = search_params.get('exclude_place_ids').split(',');
     }
@@ -36,7 +26,7 @@
     }
     var parsed_url = new SvelteURLSearchParams(window.location.search);
     parsed_url.set('exclude_place_ids', aExcludePlaceIds.join(','));
-    sMoreURL = '?' + parsed_url.toString();
+    return '?' + parsed_url.toString();
   });
 
   function handleClick(e) {
@@ -47,16 +37,25 @@
     }
     let pos = Number(result_el.dataset.position);
 
-    current_result = aSearchResults[pos];
     iHighlightNum = pos;
   }
 
+  $effect(() => {
+    if (results) {
+      iHighlightNum = 0;
+    }
+  });
+
+  $effect(() => {
+    current_result = (results && results.length > iHighlightNum) ? results[iHighlightNum] : null;
+  });
+
 </script>
 
-{#if aSearchResults && aSearchResults.length > 0}
+{#if results && results.length > 0}
   <div id="searchresults" role="list">
 
-    {#each aSearchResults as aResult, iResNum}
+    {#each results as aResult, iResNum}
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <div class="result"
            class:highlight={iResNum === iHighlightNum}
@@ -83,7 +82,7 @@
       </div>
     {/if}
   </div>
-{:else if aSearchResults}
+{:else if results}
   {#if reverse_search}
     <div id="intro" class="sidebar">Search for coordinates or click anywhere on the map.</div>
   {:else}
diff --git a/src/components/ReverseLink.svelte b/src/components/ReverseLink.svelte
index b514123..27d89fe 100644
--- a/src/components/ReverseLink.svelte
+++ b/src/components/ReverseLink.svelte
@@ -1,6 +1,5 @@
 <script>
-import { refresh_page } from '../lib/stores.js';
-import { SvelteURLSearchParams } from 'svelte/reactivity';
+import { appState } from '../state/AppState.svelte.js';
 
 let {
   lat = null,
@@ -11,18 +10,18 @@ let {
 } = $props();
 
 const params = $derived.by(() => {
-  let new_params = new SvelteURLSearchParams();
+  const new_params = {};
 
   if (lat && lon) {
-    new_params.set('lat', lat);
-    new_params.set('lon', lon);
+    new_params.lat = lat;
+    new_params.lon = lon;
 
     if (zoom) {
       new_params.set('zoom', zoom);
     }
   }
 
-  return new_params;
+  return new URLSearchParams(new_params);
 });
 
 const href = $derived.by(() => {
@@ -33,7 +32,7 @@ const href = $derived.by(() => {
 function onClick(e) {
   e.preventDefault();
   e.stopPropagation();
-  refresh_page('reverse', params);
+  appState.refreshPage('reverse', params);
 }
 
 </script>
diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte
index 11f6c12..f620dda 100644
--- a/src/components/SearchSectionDetails.svelte
+++ b/src/components/SearchSectionDetails.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { refresh_page } from '../lib/stores.js';
-  import { SvelteURLSearchParams } from 'svelte/reactivity';
+  import { appState } from '../state/AppState.svelte.js';
 
   let { api_request_params = {} } = $props();
 
@@ -12,18 +11,18 @@
     let type_and_id_match = val.match(/^\s*([NWR])(-?\d+)\s*$/i)
                             || val.match(/\/(relation|way|node)\/(-?\d+)\s*$/);
 
-    var params = new SvelteURLSearchParams();
+    const params = {};
     if (type_and_id_match) {
-      params.set('osmtype', type_and_id_match[1].charAt(0).toUpperCase());
-      params.set('osmid', type_and_id_match[2]);
+      params.osmtype = type_and_id_match[1].charAt(0).toUpperCase();
+      params.osmid = type_and_id_match[2];
     } else if (val.match(/^\d+$/)) {
-      params.set('place_id', val);
+      params.place_id = val;
     } else {
       alert('invalid input');
       return;
     }
 
-    refresh_page('details', params);
+    appState.refreshPage('details', new URLSearchParams(params));
   }
 </script>
 
diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index cf91a1e..e99d031 100644
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -2,15 +2,15 @@
   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
 
   import { zoomLevels } from '../lib/helpers.js';
-  import { refresh_page } from '../lib/stores.js';
   import { mapState } from '../state/MapState.svelte.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   let { lat = '', lon = '', zoom = '', api_request_params = {} } = $props();
 
   $effect(() => {
     const newCenter = mapState.lastClick;
     if (newCenter) {
-      refresh_page('reverse', new URLSearchParams({
+      appState.refreshPage('reverse', new URLSearchParams({
         'lat': newCenter.lat,
         'lon': newCenter.lng,
         'zoom': zoom
@@ -34,7 +34,7 @@
   function onSwitchCoords(e) {
     e.preventDefault();
     e.stopPropagation();
-    refresh_page('reverse', new URLSearchParams({
+    appState.refreshPage('reverse', new URLSearchParams({
         lat: lon || '',
         lon: lat || '',
         zoom: zoom
diff --git a/src/components/UrlSubmitForm.svelte b/src/components/UrlSubmitForm.svelte
index d85ca32..9114042 100644
--- a/src/components/UrlSubmitForm.svelte
+++ b/src/components/UrlSubmitForm.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { refresh_page } from '../lib/stores.js';
+  import { appState } from '../state/AppState.svelte.js';
   import { SvelteURLSearchParams } from 'svelte/reactivity';
 
   let { page, content } = $props();
@@ -47,7 +47,7 @@
       }
     });
 
-    if (allow_submit) refresh_page(page, serialize_form(form));
+    if (allow_submit) appState.refreshPage(page, serialize_form(form));
   }
 </script>
 
diff --git a/src/lib/api_utils.js b/src/lib/api_utils.js
index 7341267..8edc762 100644
--- a/src/lib/api_utils.js
+++ b/src/lib/api_utils.js
@@ -1,63 +1,3 @@
-import { last_api_request_url_store, error_store } from './stores.js';
-
-function api_request_progress(status) {
-  var loading_el = document.getElementById('loading');
-  if (!loading_el) return; // might not be on page yet
-
-  loading_el.style.display = (status === 'start') ? 'block' : null;
-}
-
-export async function fetch_from_api(endpoint_name, params, callback) {
-  var api_url = generate_nominatim_api_url(endpoint_name, params);
-
-  const mock_api_error = (new URLSearchParams(window.location.search)).get('mock_api_error');
-
-  api_request_progress('start');
-  if (endpoint_name !== 'status') last_api_request_url_store.set(null);
-
-  try {
-    await fetch(api_url, { headers: Nominatim_Config.Nominatim_API_Endpoint_Headers || {} })
-      .then(async (response) => {
-        if ((!((response.status >= 200 && response.status < 300) || response.status === 404))
-            || mock_api_error === 'fetch'
-        ) {
-          error_store.set(`Error fetching data from ${api_url} (${response.statusText})`);
-          return undefined;
-        }
-
-        // Parse JSON here instead of returning a promise so we can catch possible
-        // errors.
-        var data;
-        try {
-          if (mock_api_error === 'parse') {
-            data = JSON.parse('{');
-          } else {
-            data = await response.json();
-          }
-        } catch (err) {
-          // e.g. 'JSON.parse: unexpected non-whitespace character after JSON data at line 1'
-          error_store.set(`Error parsing JSON data from ${api_url} (${err})`);
-          return undefined;
-        }
-        return data;
-      })
-      .then((data) => {
-        if (data) {
-          if (data.error) {
-            error_store.set(data.error.message);
-          }
-          callback(data);
-        }
-        api_request_progress('finish');
-      });
-  } catch (error) {
-    error_store.set(`Error fetching data from ${api_url} (${error})`);
-    api_request_progress('finish');
-  }
-
-  if (endpoint_name !== 'status') last_api_request_url_store.set(api_url);
-}
-
 var fetch_content_cache = {};
 export async function fetch_content_into_element(url, dom_element) {
   if (!window.location.protocol.match(/^http/)) {
@@ -95,7 +35,7 @@ function generate_nominatim_endpoint_url(endpoint_name) {
   return conf_endpoint + endpoint_name;
 }
 
-function generate_nominatim_api_url(endpoint_name, params) {
+export function generate_nominatim_api_url(endpoint_name, params) {
   // default value for /search
   if (params.dedupe === 1) delete params.dedupe;
 
diff --git a/src/lib/stores.js b/src/lib/stores.js
deleted file mode 100644
index 80f001d..0000000
--- a/src/lib/stores.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { writable } from 'svelte/store';
-import { untrack } from 'svelte';
-import { identifyLinkInQuery } from './helpers.js';
-
-export const results_store = writable();
-export const last_api_request_url_store = writable();
-export const error_store = writable();
-export const page = writable();
-
-
-/**
- * Update the global page state.
- *
- * When called without a parameter, then the current window.location is
- * parsed and the page state is set accordingly. Otherwise the page state
- * is set from the parameters. 'pagename' is the overall subpage (without
- * .html extension). 'params' must be an URLSearchParams object and contain
- * the requested query parameters. It may also be omitted completely for a
- * link without query parameters.
- */
-const default_pagename = Nominatim_Config.Reverse_Only ? 'reverse' : 'search';
-const pagenames = [
-  default_pagename,
-  'reverse',
-  'details',
-  'deletable',
-  'polygons',
-  'status',
-  'about'
-];
-
-export function refresh_page(pagename, params) {
-  if (typeof pagename === 'undefined') {
-    pagename = window.location.pathname.replace('.html', '').replace(/^.*\//, '');
-
-    if (!pagenames.includes(pagename)) pagename = default_pagename;
-
-    params = new URLSearchParams(window.location.search);
-  } else {
-    if (!pagenames.includes(pagename)) pagename = default_pagename;
-
-    if (typeof params === 'undefined') {
-      params = new URLSearchParams();
-    }
-
-    let param_str = params.toString();
-    if (param_str) {
-      param_str = '?' + param_str;
-    }
-    let new_url = pagename + '.html' + param_str;
-
-    if (window.location.protocol.match(/^http/)) {
-      window.history.pushState([], '', new_url);
-    } else {
-      window.location.href = new_url;
-    }
-  }
-
-  if (pagename === 'search' && params.has('q')) {
-    const arrTypeAndId = identifyLinkInQuery(params.get('q'));
-    if (arrTypeAndId instanceof Array) {
-      pagename = 'details';
-      params = new URLSearchParams();
-      params.set('osmtype', arrTypeAndId[0]);
-      params.set('osmid', arrTypeAndId[1]);
-    }
-  }
-
-  untrack(() => {
-    page.set({ tab: pagename, params: params });
-    last_api_request_url_store.set(null);
-    error_store.set(null);
-  });
-}
diff --git a/src/pages/DeletablePage.svelte b/src/pages/DeletablePage.svelte
index 836ce4e..7184433 100644
--- a/src/pages/DeletablePage.svelte
+++ b/src/pages/DeletablePage.svelte
@@ -1,7 +1,8 @@
 <script>
   import { onMount } from 'svelte';
-  import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
+  import { update_html_title } from '../lib/api_utils.js';
   import { osmLink } from '../lib/helpers.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   import Header from '../components/Header.svelte';
   import DetailsLink from '../components/DetailsLink.svelte';
@@ -9,7 +10,7 @@
   let aPolygons = $state([]);
 
   function loaddata() {
-    fetch_from_api('deletable', { format: 'json' }, function (data) {
+    appState.fetchFromApi('deletable', { format: 'json' }, function (data) {
       aPolygons = data;
     });
     update_html_title('Deletable objects');
diff --git a/src/pages/DetailsPage.svelte b/src/pages/DetailsPage.svelte
index 7411c35..2e51d3f 100644
--- a/src/pages/DetailsPage.svelte
+++ b/src/pages/DetailsPage.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
-  import { page } from '../lib/stores.js';
+  import { untrack } from 'svelte';
+  import { update_html_title } from '../lib/api_utils.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   import {
     osmLink, wikipediaLink, coverageType, isAdminBoundary,
@@ -17,7 +18,7 @@
 
   let aPlace = $state();
   let base_url = $state();
-  let api_request_params = $state();
+  let api_request_params = $state.raw();
   let api_request_finished = $state(false);
 
   function loaddata(search_params) {
@@ -43,7 +44,7 @@
         update_html_title('Details for ' + api_request_params.osmtype + api_request_params.osmid);
       }
 
-      fetch_from_api('details', api_request_params, function (data) {
+      appState.fetchFromApi('details', api_request_params, function (data) {
         window.scrollTo(0, 0);
         api_request_finished = true;
         aPlace = (data && !data.error) ? data : undefined;
@@ -67,10 +68,13 @@
     return aLine ? aLine.localname : null;
   }
 
-  page.subscribe((pageinfo) => {
-    if (pageinfo.tab === 'details') {
-      loaddata(pageinfo.params);
-      base_url = window.location.search;
+  $effect(() => {
+    if (appState.page.tab === 'details') {
+      const params = appState.page.params;
+      untrack(() => {
+        loaddata(params);
+        base_url = window.location.search;
+      });
     }
   });
 
diff --git a/src/pages/PolygonsPage.svelte b/src/pages/PolygonsPage.svelte
index 34e6ee6..5c6115f 100644
--- a/src/pages/PolygonsPage.svelte
+++ b/src/pages/PolygonsPage.svelte
@@ -1,14 +1,15 @@
 <script>
   import { onMount } from 'svelte';
-  import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
+  import { update_html_title } from '../lib/api_utils.js';
   import { formatOSMType, osmLink } from '../lib/helpers.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   import Header from '../components/Header.svelte';
 
   let aPolygons = $state([]);
 
   function loaddata() {
-    fetch_from_api('polygons', { format: 'json' }, function (data) {
+    appState.fetchFromApi('polygons', { format: 'json' }, function (data) {
       aPolygons = data;
     });
     update_html_title('Broken polygons');
diff --git a/src/pages/ReversePage.svelte b/src/pages/ReversePage.svelte
index 667ce07..fad3a21 100644
--- a/src/pages/ReversePage.svelte
+++ b/src/pages/ReversePage.svelte
@@ -1,12 +1,14 @@
 <script>
-  import { page, results_store } from '../lib/stores.js';
-  import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
+  import { untrack } from 'svelte';
+  import { update_html_title } from '../lib/api_utils.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   import Header from '../components/Header.svelte';
   import SearchSectionReverse from '../components/SearchSectionReverse.svelte';
   import ResultsList from '../components/ResultsList.svelte';
   import Map from '../components/Map.svelte';
 
+  let results = $state.raw();
   let api_request_params = $state.raw();
   let current_result = $state();
   let position_marker = $state(); // what the user searched for
@@ -27,11 +29,11 @@
     if (api_request_params.lat && api_request_params.lon) {
       position_marker = [api_request_params.lat, api_request_params.lon];
 
-      fetch_from_api('reverse', api_request_params, function (data) {
+      appState.fetchFromApi('reverse', api_request_params, function (data) {
         if (data && !data.error) {
-          results_store.set([data]);
+          results = [data];
         } else {
-          results_store.set([]);
+          results = [];
         }
 
         update_html_title('Reverse result for '
@@ -41,28 +43,29 @@
         document.querySelector('input[name=lat]').focus();
       });
     } else {
-      results_store.set(undefined);
+      results = undefined;
     }
   }
 
-  page.subscribe((pageinfo) => {
-    if (pageinfo.tab === 'reverse') {
-      loaddata(pageinfo.params);
+  $effect(() => {
+    if (appState.page.tab === 'reverse') {
+      const params = appState.page.params;
+      untrack(() => loaddata(params));
     }
   });
 </script>
 
 {#snippet subheader()}
-  <SearchSectionReverse lat={api_request_params.lat}
-                        lon={api_request_params.lon}
-                        zoom={api_request_params.zoom}
+  <SearchSectionReverse lat={api_request_params?.lat}
+                        lon={api_request_params?.lon}
+                        zoom={api_request_params?.zoom}
                         api_request_params={api_request_params} />
 {/snippet}
 <Header {subheader} />
 
 <div id="content">
   <div class="sidebar">
-    <ResultsList bind:current_result reverse_search={true} />
+    <ResultsList {results} bind:current_result reverse_search={true} />
   </div>
   <div id="map-wrapper">
     <Map {current_result} {position_marker} display_minimap={true} />
diff --git a/src/pages/SearchPage.svelte b/src/pages/SearchPage.svelte
index 6e2d606..808f022 100644
--- a/src/pages/SearchPage.svelte
+++ b/src/pages/SearchPage.svelte
@@ -1,13 +1,15 @@
 <script>
-  import { page, results_store } from '../lib/stores.js';
-  import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
+  import { untrack } from 'svelte';
+  import { update_html_title } from '../lib/api_utils.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   import Header from '../components/Header.svelte';
   import SearchSection from '../components/SearchSection.svelte';
   import ResultsList from '../components/ResultsList.svelte';
   import Map from '../components/Map.svelte';
 
-  let api_request_params = $state();
+  let results = $state();
+  let api_request_params = $state.raw();
   let bStructuredSearch = $state();
   let current_result = $state();
 
@@ -43,8 +45,8 @@
                                 || api_request_params.postalcode);
 
     if (api_request_params.q || anyStructuredFieldsSet) {
-      fetch_from_api('search', api_request_params, function (data) {
-        results_store.set(data);
+      appState.fetchFromApi('search', api_request_params, function (data) {
+        results = data;
 
         if (anyStructuredFieldsSet) {
           update_html_title('Result for ' + [
@@ -65,13 +67,14 @@
         }
       });
     } else {
-      results_store.set(undefined);
+      results = undefined;
     }
   }
 
-  page.subscribe((pageinfo) => {
-    if (pageinfo.tab === 'search') {
-      loaddata(pageinfo.params);
+  $effect(() => {
+    if (appState.page.tab === 'search') {
+      const params = appState.page.params;
+      untrack(() => loaddata(params));
     }
   });
 </script>
@@ -83,7 +86,7 @@
 
 <div id="content">
   <div class="sidebar">
-    <ResultsList bind:current_result reverse_search={false} />
+    <ResultsList {results} bind:current_result reverse_search={false} />
   </div>
   <div id="map-wrapper">
     <Map {current_result} display_minimap={true} />
diff --git a/src/pages/StatusPage.svelte b/src/pages/StatusPage.svelte
index 35d825e..c5d2d65 100644
--- a/src/pages/StatusPage.svelte
+++ b/src/pages/StatusPage.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
-  import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
+  import { update_html_title } from '../lib/api_utils.js';
+  import { appState } from '../state/AppState.svelte.js';
 
   import Header from '../components/Header.svelte';
 
@@ -12,7 +13,7 @@
                       configuration.Nominatim_API_Endpoint;
 
   function loaddata() {
-    fetch_from_api('status', { format: 'json' }, function (data) {
+    appState.fetchFromApi('status', { format: 'json' }, function (data) {
       aStatusData = data;
     });
     update_html_title('Server status');
diff --git a/src/state/AppState.svelte.js b/src/state/AppState.svelte.js
new file mode 100644
index 0000000..78ed23a
--- /dev/null
+++ b/src/state/AppState.svelte.js
@@ -0,0 +1,121 @@
+import { untrack } from 'svelte';
+import { generate_nominatim_api_url } from '../lib/api_utils.js';
+import { identifyLinkInQuery } from '../lib/helpers.js';
+
+const default_pagename = Nominatim_Config.Reverse_Only ? 'reverse' : 'search';
+const pagenames = [
+  default_pagename,
+  'reverse',
+  'details',
+  'deletable',
+  'polygons',
+  'status',
+  'about'
+];
+
+class AppState {
+  page = $state();
+
+  lastApiRequestURL = $state(null);
+  errorMessage = $state(null);
+  requestProgress = $state('finish');
+
+  constructor() {
+    this.refreshPage();
+  }
+
+  refreshPage(pagename, params) {
+    if (typeof pagename === 'undefined') {
+      pagename = window.location.pathname.replace('.html', '').replace(/^.*\//, '');
+
+      if (!pagenames.includes(pagename)) pagename = default_pagename;
+
+      params = new URLSearchParams(window.location.search);
+    } else {
+      if (!pagenames.includes(pagename)) pagename = default_pagename;
+
+      if (typeof params === 'undefined') {
+        params = new URLSearchParams();
+      }
+
+      let param_str = params.toString();
+      if (param_str) {
+        param_str = '?' + param_str;
+      }
+      let new_url = pagename + '.html' + param_str;
+
+      if (window.location.protocol.match(/^http/)) {
+        window.history.pushState([], '', new_url);
+      } else {
+        window.location.href = new_url;
+      }
+    }
+
+    if (pagename === 'search' && params.has('q')) {
+      const arrTypeAndId = identifyLinkInQuery(params.get('q'));
+      if (arrTypeAndId instanceof Array) {
+        pagename = 'details';
+        params = new URLSearchParams({osmtype: arrTypeAndId[0], osmid: arrTypeAndId[1]});
+      }
+    }
+
+    untrack(() => {
+      this.page = { tab: pagename, params: params };
+      this.lastApiRequestURL = null;
+      this.errorMessage = null;
+    });
+  }
+
+  async fetchFromApi(endpoint_name, params, callback) {
+    const api_url = generate_nominatim_api_url(endpoint_name, params);
+
+    const mock_api_error = (new URLSearchParams(window.location.search)).get('mock_api_error');
+
+    this.requestProgress = 'start';
+    if (endpoint_name !== 'status') this.lastApiRequestURL = null;
+
+    try {
+      await fetch(api_url, { headers: Nominatim_Config.Nominatim_API_Endpoint_Headers || {} })
+        .then(async (response) => {
+          if ((!((response.status >= 200 && response.status < 300) || response.status === 404))
+              || mock_api_error === 'fetch'
+          ) {
+            this.errorMessage = `Error fetching data from ${api_url} (${response.statusText})`;
+            return undefined;
+          }
+
+          // Parse JSON here instead of returning a promise so we can catch possible
+          // errors.
+          var data;
+          try {
+            if (mock_api_error === 'parse') {
+              data = JSON.parse('{');
+            } else {
+              data = await response.json();
+            }
+          } catch (err) {
+            // e.g. 'JSON.parse: unexpected non-whitespace character after JSON data at line 1'
+            this.errorMessage = `Error parsing JSON data from ${api_url} (${err})`;
+            return undefined;
+          }
+          return data;
+        })
+        .then((data) => {
+          if (data) {
+            if (data.error) {
+              this.errorMessage = data.error.message;
+            }
+            callback(data);
+          }
+          this.requestProgress = 'finish';
+        });
+    } catch (error) {
+      this.errorMessage = `Error fetching data from ${api_url} (${error})`;
+      this.requestProgress = 'finish';
+    }
+
+    if (endpoint_name !== 'status') this.lastApiRequestURL = api_url;
+  }
+}
+
+export const appState = new AppState();
-- 
2.39.5