remove svelte-i18n dependency, replace with minimalistic implementation

2025-09-04 01:22:32 +00:00 · 2025-06-08 13:49:39 +02:00
parent a9ea0e223d
commit 228ad1044e
59 changed files with 121 additions and 746 deletions
--- a/website/src/lib/components/AlgoliaDocSearch.svelte
+++ b/website/src/lib/components/AlgoliaDocSearch.svelte
@@ -2,7 +2,7 @@
    import docsearch from '@docsearch/js';
    import '@docsearch/css';
    import { onMount } from 'svelte';
-    import { _, locale, waitLocale } from 'svelte-i18n';
+    import { _, locale, isLoadingLocale } from '$lib/i18n';

    let mounted = false;

@@ -13,7 +13,7 @@
            indexName: 'gpx',
            container: '#docsearch',
            searchParameters: {
-                facetFilters: ['lang:' + ($locale ?? 'en')],
+                facetFilters: ['lang:' + $locale],
            },
            placeholder: $_('docs.search.search'),
            disableUserPersonalization: true,
@@ -48,8 +48,8 @@
        mounted = true;
    });

-    $: if (mounted && $locale) {
-        waitLocale().then(initDocsearch);
+    $: if (mounted && $locale && !$isLoadingLocale) {
+        initDocsearch();
    }
 </script>

--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -20,7 +20,7 @@
        Construction,
    } from 'lucide-svelte';
    import { getSlopeColor, getSurfaceColor, getHighwayColor } from '$lib/assets/colors';
-    import { _ } from 'svelte-i18n';
+    import { _, df } from '$lib/i18n';
    import {
        getCadenceWithUnits,
        getConvertedDistance,
@@ -39,7 +39,6 @@
    import type { GPXStatistics } from 'gpx';
    import { settings } from '$lib/db';
    import { mode } from 'mode-watcher';
-    import { df } from '$lib/utils';

    export let gpxStatistics: Writable<GPXStatistics>;
    export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
@@ -177,7 +176,7 @@
                        }

                        if (point.time) {
-                            labels.push(`    ${$_('quantities.time')}: ${df.format(point.time)}`);
+                            labels.push(`    ${$_('quantities.time')}: ${$df.format(point.time)}`);
                        }

                        return labels;
--- a/website/src/lib/components/Export.svelte
+++ b/website/src/lib/components/Export.svelte
@@ -22,7 +22,7 @@
        Thermometer,
        SquareActivity,
    } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { selection } from './file-list/Selection';
    import { get } from 'svelte/store';
    import { GPXStatistics } from 'gpx';
--- a/website/src/lib/components/Footer.svelte
+++ b/website/src/lib/components/Footer.svelte
@@ -3,7 +3,7 @@
    import LanguageSelect from '$lib/components/LanguageSelect.svelte';
    import Logo from '$lib/components/Logo.svelte';
    import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { getURLForLanguage } from '$lib/utils';
 </script>

--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -5,7 +5,7 @@

    import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';

-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import type { GPXStatistics } from 'gpx';
    import type { Writable } from 'svelte/store';
    import { settings } from '$lib/db';
--- a/website/src/lib/components/Help.svelte
+++ b/website/src/lib/components/Help.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
    import { CircleHelp } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';

    export let link: string | undefined = undefined;
 </script>
--- a/website/src/lib/components/LanguageSelect.svelte
+++ b/website/src/lib/components/LanguageSelect.svelte
@@ -4,7 +4,7 @@
    import { languages } from '$lib/languages';
    import { getURLForLanguage } from '$lib/utils';
    import { Languages } from 'lucide-svelte';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';

    let selected = {
        value: '',
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -10,7 +10,7 @@
    import { Button } from '$lib/components/ui/button';
    import { map } from '$lib/stores';
    import { settings } from '$lib/db';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
    import { page } from '$app/stores';

--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -74,7 +74,7 @@
    import { allowedPastes, ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
    import Export from '$lib/components/Export.svelte';
    import { mode, setMode, systemPrefersMode } from 'mode-watcher';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { languages } from '$lib/languages';
    import { getURLForLanguage } from '$lib/utils';

@@ -450,7 +450,7 @@
                            {$_('menu.language')}
                        </Menubar.SubTrigger>
                        <Menubar.SubContent>
-                            <Menubar.RadioGroup bind:value={$locale}>
+                            <Menubar.RadioGroup value={$locale}>
                                {#each Object.entries(languages) as [lang, label]}
                                    <a href={getURLForLanguage(lang, '/app')}>
                                        <Menubar.RadioItem value={lang}>{label}</Menubar.RadioItem>
--- a/website/src/lib/components/ModeSwitch.svelte
+++ b/website/src/lib/components/ModeSwitch.svelte
@@ -2,7 +2,7 @@
    import { Button } from '$lib/components/ui/button';
    import { Moon, Sun } from 'lucide-svelte';
    import { mode, setMode, systemPrefersMode } from 'mode-watcher';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';

    export let size = '20';

--- a/website/src/lib/components/Nav.svelte
+++ b/website/src/lib/components/Nav.svelte
@@ -4,7 +4,7 @@
    import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
    import { BookOpenText, Home, Map } from 'lucide-svelte';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { getURLForLanguage } from '$lib/utils';
 </script>

--- a/website/src/lib/components/Shortcut.svelte
+++ b/website/src/lib/components/Shortcut.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
    import { isMac, isSafari } from '$lib/utils';
    import { onMount } from 'svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';

    export let key: string | undefined = undefined;
    export let shift: boolean = false;
--- a/website/src/lib/components/WithUnits.svelte
+++ b/website/src/lib/components/WithUnits.svelte
@@ -11,7 +11,7 @@
        secondsToHHMMSS,
    } from '$lib/units';

-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';

    export let value: number;
    export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
--- a/website/src/lib/components/docs/DocsContainer.svelte
+++ b/website/src/lib/components/docs/DocsContainer.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { _ } from 'svelte-i18n';
-
    export let module;
 </script>

--- a/website/src/lib/components/embedding/EmbeddingPlayground.svelte
+++ b/website/src/lib/components/embedding/EmbeddingPlayground.svelte
@@ -15,7 +15,7 @@
        Milestone,
        Video,
    } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import {
        allowedEmbeddingBasemaps,
        getCleanedEmbeddingOptions,
--- a/website/src/lib/components/embedding/OpenIn.svelte
+++ b/website/src/lib/components/embedding/OpenIn.svelte
@@ -2,7 +2,7 @@
    import { Button } from '$lib/components/ui/button';
    import Logo from '$lib/components/Logo.svelte';
    import { getURLForLanguage } from '$lib/utils';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';

    export let files: string[];
    export let ids: string[];
--- a/website/src/lib/components/file-list/FileList.svelte
+++ b/website/src/lib/components/file-list/FileList.svelte
@@ -8,7 +8,7 @@
    import { copied, pasteSelection, selectAll, selection } from './Selection';
    import { ClipboardPaste, FileStack, Plus } from 'lucide-svelte';
    import Shortcut from '$lib/components/Shortcut.svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { createFile } from '$lib/stores';

    export let orientation: 'vertical' | 'horizontal';
--- a/website/src/lib/components/file-list/FileListNode.svelte
+++ b/website/src/lib/components/file-list/FileListNode.svelte
@@ -21,7 +21,7 @@
        type ListItem,
        type ListTrackItem,
    } from './FileList';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { selection } from './Selection';

    export let node:
--- a/website/src/lib/components/file-list/FileListNodeContent.svelte
+++ b/website/src/lib/components/file-list/FileListNodeContent.svelte
@@ -23,7 +23,7 @@
    } from './FileList';
    import { selection } from './Selection';
    import { isMac } from '$lib/utils';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';

    export let node:
        | Map<string, Readable<GPXFileWithStatistics | undefined>>
--- a/website/src/lib/components/file-list/FileListNodeLabel.svelte
+++ b/website/src/lib/components/file-list/FileListNodeLabel.svelte
@@ -50,7 +50,7 @@
        map,
    } from '$lib/stores';
    import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import MetadataDialog from './MetadataDialog.svelte';
    import StyleDialog from './StyleDialog.svelte';
    import { waypointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
--- a/website/src/lib/components/file-list/MetadataDialog.svelte
+++ b/website/src/lib/components/file-list/MetadataDialog.svelte
@@ -8,7 +8,7 @@
    import { Save } from 'lucide-svelte';
    import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
    import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { editMetadata } from '$lib/stores';

    export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
--- a/website/src/lib/components/file-list/StyleDialog.svelte
+++ b/website/src/lib/components/file-list/StyleDialog.svelte
@@ -9,7 +9,7 @@
    import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
    import { selection } from './Selection';
    import { editStyle, gpxLayers } from '$lib/stores';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';

    export let item: ListItem;
    export let open = false;
--- a/website/src/lib/components/gpx-layer/CopyCoordinates.svelte
+++ b/website/src/lib/components/gpx-layer/CopyCoordinates.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
    import { Button } from '$lib/components/ui/button';
    import { ClipboardCopy } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import type { Coordinates } from 'gpx';

    export let coordinates: Coordinates;
--- a/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
@@ -5,8 +5,7 @@
    import * as Card from '$lib/components/ui/card';
    import WithUnits from '$lib/components/WithUnits.svelte';
    import { Compass, Mountain, Timer } from 'lucide-svelte';
-    import { df } from '$lib/utils';
-    import { _ } from 'svelte-i18n';
+    import { _, df } from '$lib/i18n';

    export let trackpoint: PopupItem<TrackPoint>;
 </script>
@@ -31,7 +30,7 @@
        {#if trackpoint.item.time}
            <div class="flex flex-row items-center gap-1">
                <Timer size="14" />
-                {df.format(trackpoint.item.time)}
+                {$df.format(trackpoint.item.time)}
            </div>
        {/if}
        <CopyCoordinates
--- a/website/src/lib/components/gpx-layer/WaypointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
@@ -8,7 +8,7 @@
    import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
    import { Tool, currentTool } from '$lib/stores';
    import { getSymbolKey, symbols } from '$lib/assets/symbols';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import sanitizeHtml from 'sanitize-html';
    import type { Waypoint } from 'gpx';
    import type { PopupItem } from '$lib/components/MapPopup';
--- a/website/src/lib/components/layer-control/CustomLayers.svelte
+++ b/website/src/lib/components/layer-control/CustomLayers.svelte
@@ -17,7 +17,7 @@
        Map,
        Layers2,
    } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { settings } from '$lib/db';
    import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
    import { map } from '$lib/stores';
--- a/website/src/lib/components/layer-control/LayerControlSettings.svelte
+++ b/website/src/lib/components/layer-control/LayerControlSettings.svelte
@@ -19,7 +19,7 @@
    import { getLayers, isSelected, toggle } from '$lib/components/layer-control/utils';
    import { settings } from '$lib/db';

-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { writable } from 'svelte/store';
    import { map } from '$lib/stores';
    import CustomLayers from './CustomLayers.svelte';
--- a/website/src/lib/components/layer-control/LayerTreeNode.svelte
+++ b/website/src/lib/components/layer-control/LayerTreeNode.svelte
@@ -6,7 +6,7 @@
    import { type LayerTreeType } from '$lib/assets/layers';
    import { anySelectedLayer } from './utils';

-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { settings } from '$lib/db';
    import { beforeUpdate } from 'svelte';

--- a/website/src/lib/components/layer-control/OverpassPopup.svelte
+++ b/website/src/lib/components/layer-control/OverpassPopup.svelte
@@ -3,7 +3,7 @@
    import { Button } from '$lib/components/ui/button';
    import { selection } from '$lib/components/file-list/Selection';
    import { PencilLine, MapPin } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { dbUtils } from '$lib/db';
    import type { PopupItem } from '$lib/components/MapPopup';
    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
--- a/website/src/lib/components/street-view-control/StreetViewControl.svelte
+++ b/website/src/lib/components/street-view-control/StreetViewControl.svelte
@@ -7,7 +7,7 @@
    import { GoogleRedirect } from './Google';
    import { map, streetViewEnabled } from '$lib/stores';
    import { settings } from '$lib/db';
-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import { writable } from 'svelte/store';

    const { streetViewSource } = settings;
--- a/website/src/lib/components/toolbar/Toolbar.svelte
+++ b/website/src/lib/components/toolbar/Toolbar.svelte
@@ -13,7 +13,7 @@
        MountainSnow,
    } from 'lucide-svelte';

-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';
    import ToolbarItemMenu from './ToolbarItemMenu.svelte';
 </script>

--- a/website/src/lib/components/toolbar/tools/Clean.svelte
+++ b/website/src/lib/components/toolbar/tools/Clean.svelte
@@ -11,7 +11,7 @@
    import * as RadioGroup from '$lib/components/ui/radio-group';
    import { Button } from '$lib/components/ui/button';
    import Help from '$lib/components/Help.svelte';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { onDestroy, onMount } from 'svelte';
    import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
    import { Trash2 } from 'lucide-svelte';
--- a/website/src/lib/components/toolbar/tools/Elevation.svelte
+++ b/website/src/lib/components/toolbar/tools/Elevation.svelte
@@ -5,7 +5,7 @@
    import { MountainSnow } from 'lucide-svelte';
    import { dbUtils } from '$lib/db';
    import { map } from '$lib/stores';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { getURLForLanguage } from '$lib/utils';

    $: validSelection = $selection.size > 0;
--- a/website/src/lib/components/toolbar/tools/Extract.svelte
+++ b/website/src/lib/components/toolbar/tools/Extract.svelte
@@ -11,7 +11,7 @@
    } from '$lib/components/file-list/FileList';
    import Help from '$lib/components/Help.svelte';
    import { dbUtils, getFile } from '$lib/db';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { getURLForLanguage } from '$lib/utils';

    $: validSelection =
--- a/website/src/lib/components/toolbar/tools/Merge.svelte
+++ b/website/src/lib/components/toolbar/tools/Merge.svelte
@@ -13,7 +13,7 @@
    import { Label } from '$lib/components/ui/label/index.js';
    import { Checkbox } from '$lib/components/ui/checkbox';
    import * as RadioGroup from '$lib/components/ui/radio-group';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { dbUtils, getFile } from '$lib/db';
    import { Group } from 'lucide-svelte';
    import { getURLForLanguage } from '$lib/utils';
--- a/website/src/lib/components/toolbar/tools/Reduce.svelte
+++ b/website/src/lib/components/toolbar/tools/Reduce.svelte
@@ -10,7 +10,7 @@
    } from '$lib/components/file-list/FileList';
    import Help from '$lib/components/Help.svelte';
    import { Filter } from 'lucide-svelte';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import WithUnits from '$lib/components/WithUnits.svelte';
    import { dbUtils, fileObservers } from '$lib/db';
    import { map } from '$lib/stores';
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -16,7 +16,7 @@
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import { CalendarClock, CirclePlay, CircleStop, CircleX, Timer, Zap } from 'lucide-svelte';
    import { tick } from 'svelte';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { get } from 'svelte/store';
    import { selection } from '$lib/components/file-list/Selection';
    import {
--- a/website/src/lib/components/toolbar/tools/Waypoint.svelte
+++ b/website/src/lib/components/toolbar/tools/Waypoint.svelte
@@ -12,7 +12,7 @@
    import * as Select from '$lib/components/ui/select';
    import { selection } from '$lib/components/file-list/Selection';
    import { Waypoint } from 'gpx';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { ListWaypointItem } from '$lib/components/file-list/FileList';
    import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db';
    import { get } from 'svelte/store';
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -26,7 +26,7 @@
    import { dbUtils, getFile, getFileIds, settings } from '$lib/db';
    import { brouterProfiles, routingProfileSelectItem } from './Routing';

-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { RoutingControls } from './RoutingControls';
    import mapboxgl from 'mapbox-gl';
    import { fileObservers } from '$lib/db';
--- a/website/src/lib/components/toolbar/tools/routing/Routing.ts
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.ts
@@ -2,7 +2,7 @@ import type { Coordinates } from 'gpx';
 import { TrackPoint, distance } from 'gpx';
 import { derived, get, writable } from 'svelte/store';
 import { settings } from '$lib/db';
-import { _, isLoading, locale } from 'svelte-i18n';
+import { _, locale, isLoadingLocale } from '$lib/i18n';
 import { getElevation } from '$lib/utils';

 const { routing, routingProfile, privateRoads } = settings;
@@ -22,7 +22,7 @@ export const routingProfileSelectItem = writable({
    label: '',
 });

-derived([routingProfile, locale, isLoading], ([profile, l, i]) => [profile, l, i]).subscribe(
+derived([routingProfile, locale, isLoadingLocale], ([profile, l, i]) => [profile, l, i]).subscribe(
    ([profile, l, i]) => {
        if (
            !i &&
--- a/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
@@ -5,7 +5,7 @@
    import { canChangeStart } from './RoutingControls';
    import { CirclePlay, Trash2 } from 'lucide-svelte';

-    import { _ } from 'svelte-i18n';
+    import { _ } from '$lib/i18n';

    export let element: HTMLElement;
 </script>
--- a/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
+++ b/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
@@ -3,7 +3,7 @@ import { get, writable, type Readable } from 'svelte/store';
 import mapboxgl from 'mapbox-gl';
 import { route } from './Routing';
 import { toast } from 'svelte-sonner';
-import { _ } from 'svelte-i18n';
+import { _ } from '$lib/i18n';
 import { dbUtils, settings, type GPXFileWithStatistics } from '$lib/db';
 import { getOrderedSelection, selection } from '$lib/components/file-list/Selection';
 import {
--- a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
+++ b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
@@ -17,7 +17,7 @@
    import { Separator } from '$lib/components/ui/separator';
    import { gpxStatistics, map, slicedGPXStatistics, splitAs } from '$lib/stores';
    import { get } from 'svelte/store';
-    import { _, locale } from 'svelte-i18n';
+    import { _, locale } from '$lib/i18n';
    import { onDestroy, tick } from 'svelte';
    import { Crop } from 'lucide-svelte';
    import { dbUtils } from '$lib/db';
--- a/website/src/lib/components/toolbar/tools/scissors/SplitControls.ts
+++ b/website/src/lib/components/toolbar/tools/scissors/SplitControls.ts
@@ -8,7 +8,7 @@ import {
 } from '$lib/components/file-list/Selection';
 import { ListTrackSegmentItem } from '$lib/components/file-list/FileList';
 import { currentTool, gpxStatistics, Tool } from '$lib/stores';
-import { _ } from 'svelte-i18n';
+import { _ } from '$lib/i18n';
 import { Scissors } from 'lucide-static';

 export class SplitControls {
--- a/website/src/lib/i18n.ts
+++ b/website/src/lib/i18n.ts
@@ -0,0 +1,56 @@
+import { derived, writable, get } from 'svelte/store';
+
+export const locale = writable('');
+
+type Dictionary = {
+    [key: string]: string | Dictionary;
+};
+export const dictionary = writable<Dictionary>({});
+
+export const isLoadingInitialLocale = writable<boolean>(true);
+export const isLoadingLocale = writable<boolean>(true);
+
+locale.subscribe((lang) => {
+    if (lang !== '') {
+        if (!get(isLoadingLocale)) {
+            isLoadingLocale.set(true);
+        }
+        import(`../locales/${lang}.json`).then((module) => {
+            dictionary.set(module.default);
+            if (get(isLoadingInitialLocale)) {
+                isLoadingInitialLocale.set(false);
+            }
+            if (get(isLoadingLocale)) {
+                isLoadingLocale.set(false);
+            }
+        });
+    }
+});
+
+export const _ = derived(dictionary, ($dictionary) => {
+    return (key: string) => {
+        const keys = key.split('.');
+        let value: string | Dictionary = $dictionary;
+
+        for (const k of keys) {
+            if (value && typeof value === 'object' && k in value) {
+                value = value[k];
+            } else {
+                return key;
+            }
+        }
+
+        return typeof value === 'string' ? value : key;
+    };
+});
+
+function getDateFormatter(locale: string) {
+    return new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeStyle: 'medium',
+    });
+}
+
+export const df = derived(locale, ($locale) => {
+    return getDateFormatter($locale === '' ? 'en-US' : $locale);
+});
--- a/website/src/lib/stores.ts
+++ b/website/src/lib/stores.ts
@@ -3,7 +3,7 @@ import { writable, get, type Writable, derived } from 'svelte/store';
 import mapboxgl from 'mapbox-gl';
 import { GPXFile, buildGPX, parseGPX, GPXStatistics, type Coordinates } from 'gpx';
 import { tick } from 'svelte';
-import { _ } from 'svelte-i18n';
+import { _ } from '$lib/i18n';
 import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
 import { dbUtils, fileObservers, getFile, getStatistics, settings } from './db';
 import {
--- a/website/src/lib/units.ts
+++ b/website/src/lib/units.ts
@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 import { settings } from '$lib/db';
-import { _ } from 'svelte-i18n';
+import { _ } from '$lib/i18n';

 const { distanceUnits, velocityUnits, temperatureUnits } = settings;

--- a/website/src/lib/utils.ts
+++ b/website/src/lib/utils.ts
@@ -6,13 +6,11 @@ import { get } from 'svelte/store';
 import { map } from './stores';
 import { base } from '$app/paths';
 import { languages } from '$lib/languages';
-import { locale } from 'svelte-i18n';
 import { TrackPoint, Waypoint, type Coordinates, crossarcDistance, distance } from 'gpx';
 import mapboxgl from 'mapbox-gl';
 import tilebelt from '@mapbox/tilebelt';
 import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
 import PNGReader from 'png.js';
-import type { DateFormatter } from '@internationalized/date';

 export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
@@ -219,7 +217,7 @@ export function isSafari() {
    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }

-export function getURLForLanguage(lang: string | null | undefined, path: string): string {
+export function getURLForLanguage(lang: string, path: string): string {
    let newPath = path.replace(base, '');

    let languageInPath = newPath.split('/')[1];
@@ -227,13 +225,6 @@ export function getURLForLanguage(lang: string | null | undefined, path: string)
        languageInPath = 'en';
    }

-    if (lang === null || lang === undefined) {
-        lang = get(locale);
-        if (lang === null || lang === undefined) {
-            lang = 'en';
-        }
-    }
-
    if (newPath === '/' && lang !== 'en') {
        newPath = '';
    }
@@ -254,15 +245,3 @@ export function getURLForLanguage(lang: string | null | undefined, path: string)
        }
    }
 }
-
-function getDateFormatter(locale: string) {
-    return new Intl.DateTimeFormat(locale, {
-        dateStyle: 'medium',
-        timeStyle: 'medium',
-    });
-}
-
-export let df: DateFormatter = getDateFormatter('en');
-locale.subscribe((l) => {
-    df = getDateFormatter(l ?? 'en');
-});