From 6db8696a366957fb8f2beea0a3d18353deaab449 Mon Sep 17 00:00:00 2001
From: vcoppe <vcoppe@hexaly.com>
Date: Fri, 24 Oct 2025 20:07:15 +0200
Subject: [PATCH] small fixes for tools

---
 .../components/toolbar/tools/Elevation.svelte |   2 +-
 .../lib/components/toolbar/tools/Time.svelte  |  50 ++-
 .../toolbar/tools/reduce/Reduce.svelte        |   8 +-
 .../reduce/{reduce.ts => reduce.svelte.ts}    |  26 +-
 .../toolbar/tools/routing/Routing.svelte      |   4 +-
 .../ui/date-picker/DatePicker.svelte          |   4 +-
 .../ui/time-picker/TimeComponentInput.svelte  |  38 ++-
 .../ui/time-picker/TimePicker.svelte          | 305 +++++++++---------
 8 files changed, 241 insertions(+), 196 deletions(-)
 rename website/src/lib/components/toolbar/tools/reduce/{reduce.ts => reduce.svelte.ts} (90%)

diff --git a/website/src/lib/components/toolbar/tools/Elevation.svelte b/website/src/lib/components/toolbar/tools/Elevation.svelte
index 4b99e372..17ee458b 100644
--- a/website/src/lib/components/toolbar/tools/Elevation.svelte
+++ b/website/src/lib/components/toolbar/tools/Elevation.svelte
@@ -20,7 +20,7 @@
         variant="outline"
         class="whitespace-normal h-fit"
         disabled={!validSelection}
-        onclick={async () => {
+        onclick={() => {
             if ($map) {
                 fileActions.addElevationToSelection($map);
             }
diff --git a/website/src/lib/components/toolbar/tools/Time.svelte b/website/src/lib/components/toolbar/tools/Time.svelte
index fc2ba089..dcbe72b1 100644
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -13,7 +13,7 @@
     } from '$lib/units';
     import { CalendarDate, type DateValue } from '@internationalized/date';
     import { CalendarClock, CirclePlay, CircleStop, CircleX, Timer, Zap } from '@lucide/svelte';
-    import { tick } from 'svelte';
+    import { untrack } from 'svelte';
     import { i18n } from '$lib/i18n.svelte';
     import {
         ListFileItem,
@@ -87,7 +87,7 @@
 
     $effect(() => {
         if ($gpxStatistics && $velocityUnits && $distanceUnits) {
-            setGPXData();
+            untrack(() => setGPXData());
         }
     });
 
@@ -204,7 +204,9 @@
                             min={0.01}
                             disabled={!canUpdate}
                             bind:value={speed}
-                            onchange={updateDataFromSpeed}
+                            onchange={() => {
+                                untrack(() => updateDataFromSpeed());
+                            }}
                             class="text-sm"
                         />
                         <span class="text-sm shrink-0">
@@ -221,7 +223,9 @@
                             bind:value={speed}
                             showHours={false}
                             disabled={!canUpdate}
-                            onChange={updateDataFromSpeed}
+                            onChange={() => {
+                                untrack(() => updateDataFromSpeed());
+                            }}
                         />
                         <span class="text-sm shrink-0">
                             {#if $distanceUnits === 'imperial'}
@@ -243,7 +247,9 @@
                 <TimePicker
                     bind:value={movingTime}
                     disabled={!canUpdate}
-                    onChange={updateDataFromTotalTime}
+                    onChange={() => {
+                        untrack(() => updateDataFromTotalTime());
+                    }}
                 />
             </div>
         </div>
@@ -258,18 +264,19 @@
                 locale={i18n.lang}
                 placeholder={i18n._('toolbar.time.pick_date')}
                 class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateEnd();
+                onchange={() => {
+                    untrack(() => updateEnd());
                 }}
             />
-            <input
+            <Input
                 type="time"
                 step={1}
                 disabled={!canUpdate}
                 bind:value={startTime}
                 class="w-fit"
-                onchange={updateEnd}
+                onchange={() => {
+                    untrack(() => updateEnd());
+                }}
             />
         </div>
         <Label class="flex flex-row">
@@ -283,18 +290,19 @@
                 locale={i18n.lang}
                 placeholder={i18n._('toolbar.time.pick_date')}
                 class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateStart();
+                onchange={() => {
+                    untrack(() => updateStart());
                 }}
             />
-            <input
+            <Input
                 type="time"
                 step={1}
                 disabled={!canUpdate}
                 bind:value={endTime}
                 class="w-fit"
-                onchange={updateStart}
+                onchange={() => {
+                    untrack(() => updateStart());
+                }}
             />
         </div>
         {#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
@@ -400,15 +408,3 @@
         {/if}
     </Help>
 </div>
-
-<style lang="postcss">
-    @reference "../../../../app.css";
-
-    div :global(input[type='time']) {
-        /*
-        Style copy-pasted from shadcn-svelte Input.
-        Needed to use native time input to avoid a bug with 2-level bind:value.
-        */
-        @apply flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
-    }
-</style>
diff --git a/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte b/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
index 8e9f32a1..3fe51339 100644
--- a/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
+++ b/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
@@ -2,7 +2,7 @@
     import { Label } from '$lib/components/ui/label/index.js';
     import { Button } from '$lib/components/ui/button';
     import { Slider } from '$lib/components/ui/slider';
-    import { ListItem, ListRootItem } from '$lib/components/file-list/file-list';
+    import { ListRootItem } from '$lib/components/file-list/file-list';
     import Help from '$lib/components/Help.svelte';
     import { Funnel } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
@@ -10,13 +10,11 @@
     import { onDestroy } from 'svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
-    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './reduce';
+    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './reduce.svelte';
 
     let props: { class?: string } = $props();
 
     let sliderValue = $state([50]);
-    let maxPoints = $state(0);
-    let currentPoints = $state(0);
     const maxTolerance = 10000;
 
     let validSelection = $derived(
@@ -46,7 +44,7 @@
     </Label>
     <Label class="flex flex-row justify-between">
         <span>{i18n._('toolbar.reduce.number_of_points')}</span>
-        <span class="font-normal">{currentPoints}/{maxPoints}</span>
+        <span class="font-normal">{reducedLayers.currentPoints}/{reducedLayers.maxPoints}</span>
     </Label>
     <Button variant="outline" disabled={!validSelection} onclick={() => reducedLayers.reduce()}>
         <Funnel size="16" class="mr-1" />
diff --git a/website/src/lib/components/toolbar/tools/reduce/reduce.ts b/website/src/lib/components/toolbar/tools/reduce/reduce.svelte.ts
similarity index 90%
rename from website/src/lib/components/toolbar/tools/reduce/reduce.ts
rename to website/src/lib/components/toolbar/tools/reduce/reduce.svelte.ts
index 3f9e4a35..805b2bca 100644
--- a/website/src/lib/components/toolbar/tools/reduce/reduce.ts
+++ b/website/src/lib/components/toolbar/tools/reduce/reduce.svelte.ts
@@ -5,7 +5,7 @@ import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/fi
 import { selection } from '$lib/logic/selection';
 import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
 import type { GeoJSONSource } from 'mapbox-gl';
-import { get, writable } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
 
 export const minTolerance = 0.1;
 
@@ -53,14 +53,16 @@ export const tolerance = writable<number>(0);
 export class ReducedGPXLayerCollection {
     private _layers: Map<string, ReducedGPXLayer> = new Map();
     private _simplified: Map<string, [ListItem, number, SimplifiedTrackPoint[]]>;
-    private _fileStateCollectionOberver: GPXFileStateCollectionObserver;
+    private _currentPoints = $state(0);
+    private _maxPoints = $state(0);
+    private _fileStateCollectionObserver: GPXFileStateCollectionObserver;
     private _updateSimplified = this.updateSimplified.bind(this);
     private _unsubscribes: (() => void)[] = [];
 
     constructor() {
         this._layers = new Map();
         this._simplified = new Map();
-        this._fileStateCollectionOberver = new GPXFileStateCollectionObserver(
+        this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
             (newFiles) => {
                 newFiles.forEach((fileState, fileId) => {
                     this._layers.set(
@@ -96,8 +98,8 @@ export class ReducedGPXLayerCollection {
     }
 
     update() {
-        let maxPoints = 0;
-        let currentPoints = 0;
+        this._currentPoints = 0;
+        this._maxPoints = 0;
 
         let data: GeoJSON.FeatureCollection = {
             type: 'FeatureCollection',
@@ -109,12 +111,12 @@ export class ReducedGPXLayerCollection {
                 return;
             }
 
-            maxPoints += maxPts;
+            this._maxPoints += maxPts;
 
             let current = points.filter(
                 (point) => point.distance === undefined || point.distance >= get(tolerance)
             );
-            currentPoints += current.length;
+            this._currentPoints += current.length;
 
             data.features.push({
                 type: 'Feature',
@@ -173,8 +175,16 @@ export class ReducedGPXLayerCollection {
         fileActions.reduce(itemsAndPoints);
     }
 
+    get currentPoints() {
+        return this._currentPoints;
+    }
+
+    get maxPoints() {
+        return this._maxPoints;
+    }
+
     destroy() {
-        this._fileStateCollectionOberver.destroy();
+        this._fileStateCollectionObserver.destroy();
         this._unsubscribes.forEach((unsubscribe) => unsubscribe());
 
         const map_ = get(map);
diff --git a/website/src/lib/components/toolbar/tools/routing/Routing.svelte b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
index f972c0e9..0f99139b 100644
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -15,7 +15,7 @@
         Route,
         TriangleAlert,
         ArrowRightLeft,
-        Home,
+        House,
         RouteOff,
         Repeat,
         SquareArrowUpLeft,
@@ -231,7 +231,7 @@
                     }
                 }}
             >
-                <Home size="12" />{i18n._('toolbar.routing.route_back_to_start.button')}
+                <House size="12" />{i18n._('toolbar.routing.route_back_to_start.button')}
             </ButtonWithTooltip>
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.round_trip.tooltip')}
diff --git a/website/src/lib/components/ui/date-picker/DatePicker.svelte b/website/src/lib/components/ui/date-picker/DatePicker.svelte
index d1504d47..773535cc 100644
--- a/website/src/lib/components/ui/date-picker/DatePicker.svelte
+++ b/website/src/lib/components/ui/date-picker/DatePicker.svelte
@@ -12,12 +12,14 @@
         disabled = false,
         locale,
         class: className = '',
+        onchange = () => {},
     }: {
         value?: DateValue;
         placeholder?: string;
         disabled?: boolean;
         locale: string;
         class?: string;
+        onchange?: (date: DateValue | undefined) => void;
     } = $props();
 
     const df = new DateFormatter(locale, {
@@ -43,6 +45,6 @@
         {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
     </Popover.Trigger>
     <Popover.Content bind:ref={contentRef} class="w-auto p-0">
-        <Calendar type="single" captionLayout="dropdown" bind:value />
+        <Calendar type="single" captionLayout="dropdown" bind:value onValueChange={onchange} />
     </Popover.Content>
 </Popover.Root>
diff --git a/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte b/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
index fa415999..7da363e2 100644
--- a/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
+++ b/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
@@ -1,26 +1,45 @@
 <script lang="ts">
     import { Input } from '$lib/components/ui/input';
 
-    export let value: string | number;
+    let {
+        id,
+        value = $bindable(),
+        disabled,
+        oninput = () => {},
+        onchange = () => {},
+        onkeypress = () => {},
+        onfocusin = () => {},
+        class: className,
+    }: {
+        id: string;
+        value: string | number;
+        disabled?: boolean;
+        oninput?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+        onkeypress?: (e: KeyboardEvent) => void;
+        onfocusin?: (e: FocusEvent) => void;
+        class?: string;
+    } = $props();
 </script>
 
 <div>
     <Input
+        {id}
         type="text"
         step={1}
         bind:value
-        on:input
-        on:change
-        on:keypress
-        on:focusin={() => {
+        {disabled}
+        {oninput}
+        {onchange}
+        {onkeypress}
+        onfocusin={(e) => {
             let input = document.activeElement;
             if (input instanceof HTMLInputElement) {
                 input.select();
             }
+            onfocusin(e);
         }}
-        on:focusin
-        class="w-[22px] {$$props.class ?? ''}"
-        {...$$restProps}
+        class="w-[22px] {className ?? ''}"
     />
 </div>
 
@@ -29,8 +48,11 @@
 
     div :global(input) {
         @apply px-0.5;
+        @apply py-0;
+        @apply bg-transparent;
         @apply text-right;
         @apply border-none;
+        @apply shadow-none;
         @apply focus:ring-0;
         @apply focus:ring-offset-0;
         @apply focus:outline-none;
diff --git a/website/src/lib/components/ui/time-picker/TimePicker.svelte b/website/src/lib/components/ui/time-picker/TimePicker.svelte
index 9de2368c..3b6c7a62 100644
--- a/website/src/lib/components/ui/time-picker/TimePicker.svelte
+++ b/website/src/lib/components/ui/time-picker/TimePicker.svelte
@@ -1,160 +1,177 @@
 <script lang="ts">
-	import TimeComponentInput from './TimeComponentInput.svelte';
+    import { untrack } from 'svelte';
+    import TimeComponentInput from './TimeComponentInput.svelte';
 
-	export let showHours = true;
-	export let value: number | undefined = undefined;
-	export let disabled: boolean = false;
-	export let onChange = () => {};
+    let {
+        showHours = true,
+        value = $bindable(),
+        disabled = false,
+        onChange = () => {},
+    }: {
+        showHours?: boolean;
+        value?: number;
+        disabled?: boolean;
+        onChange?: () => void;
+    } = $props();
 
-	let hours: string | number = '--';
-	let minutes: string | number = '--';
-	let seconds: string | number = '--';
+    let hours: string | number = $state('--');
+    let minutes: string | number = $state('--');
+    let seconds: string | number = $state('--');
 
-	function maybeParseInt(value: string | number): number {
-		if (value === '--' || value === '') {
-			return 0;
-		}
-		return typeof value === 'string' ? parseInt(value) : value;
-	}
+    function maybeParseInt(value: string | number): number {
+        if (value === '--' || value === '') {
+            return 0;
+        }
+        return typeof value === 'string' ? parseInt(value) : value;
+    }
 
-	function computeValue() {
-		return Math.max(
-			maybeParseInt(hours) * 3600 + maybeParseInt(minutes) * 60 + maybeParseInt(seconds),
-			1
-		);
-	}
+    function computeValue(): number {
+        return Math.max(
+            maybeParseInt(hours) * 3600 + maybeParseInt(minutes) * 60 + maybeParseInt(seconds),
+            1
+        );
+    }
 
-	function updateValue() {
-		value = computeValue();
-	}
+    $effect(() => {
+        const val = computeValue();
+        untrack(() => {
+            value = val;
+        });
+    });
 
-	$: hours, minutes, seconds, updateValue();
+    $effect(() => {
+        if (value === undefined) {
+            untrack(() => {
+                hours = '--';
+                minutes = '--';
+                seconds = '--';
+            });
+        } else {
+            untrack(() => {
+                if (value != computeValue()) {
+                    let rounded = Math.max(Math.round(value), 1);
+                    if (showHours) {
+                        hours = Math.floor(rounded / 3600);
+                        minutes = Math.floor((rounded % 3600) / 60)
+                            .toString()
+                            .padStart(2, '0');
+                    } else {
+                        minutes = Math.floor(rounded / 60).toString();
+                    }
+                    seconds = (rounded % 60).toString().padStart(2, '0');
+                }
+            });
+        }
+    });
 
-	$: if (value === undefined) {
-		hours = '--';
-		minutes = '--';
-		seconds = '--';
-	} else if (value !== computeValue()) {
-		let rounded = Math.max(Math.round(value), 1);
-		if (showHours) {
-			hours = Math.floor(rounded / 3600);
-			minutes = Math.floor((rounded % 3600) / 60)
-				.toString()
-				.padStart(2, '0');
-		} else {
-			minutes = Math.floor(rounded / 60).toString();
-		}
-		seconds = (rounded % 60).toString().padStart(2, '0');
-	}
-
-	let container: HTMLDivElement;
-	let countKeyPress = 0;
-	function onKeyPress(e) {
-		if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key)) {
-			countKeyPress++;
-			if (countKeyPress === 2) {
-				if (e.target.id === 'hours') {
-					container.querySelector('#minutes')?.focus();
-				} else if (e.target.id === 'minutes') {
-					container.querySelector('#seconds')?.focus();
-				}
-			}
-		}
-	}
+    let container: HTMLDivElement;
+    let countKeyPress = 0;
+    function onKeyPress(e) {
+        if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key)) {
+            countKeyPress++;
+            if (countKeyPress === 2) {
+                if (e.target.id === 'hours') {
+                    container.querySelector('#minutes')?.focus();
+                } else if (e.target.id === 'minutes') {
+                    container.querySelector('#seconds')?.focus();
+                }
+            }
+        }
+    }
 </script>
 
 <div
-	bind:this={container}
-	class="flex flex-row items-center w-full min-w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
-		? 'opacity-50 cursor-not-allowed'
-		: ''}"
+    bind:this={container}
+    class="h-9 flex flex-row items-center w-full min-w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
+        ? 'opacity-50 cursor-not-allowed'
+        : ''}"
 >
-	{#if showHours}
-		<TimeComponentInput
-			id="hours"
-			bind:value={hours}
-			{disabled}
-			class="w-[30px]"
-			on:input={() => {
-				if (typeof hours === 'string') {
-					hours = parseInt(hours);
-				}
-				if (hours >= 0) {
-				} else if (hours < 0) {
-					hours = 0;
-				} else {
-					hours = 0;
-				}
-				onChange();
-			}}
-			on:keypress={onKeyPress}
-			on:focusin={() => {
-				countKeyPress = 0;
-			}}
-		/>
-		<span class="text-sm">:</span>
-	{/if}
-	<TimeComponentInput
-		id="minutes"
-		bind:value={minutes}
-		{disabled}
-		on:input={() => {
-			if (typeof minutes === 'string') {
-				minutes = parseInt(minutes);
-			}
-			if (minutes >= 0 && (minutes <= 59 || !showHours)) {
-			} else if (minutes < 0) {
-				minutes = 0;
-			} else if (showHours && minutes > 59) {
-				minutes = 59;
-			} else {
-				minutes = 0;
-			}
-			minutes = minutes.toString().padStart(showHours ? 2 : 1, '0');
-			onChange();
-		}}
-		on:keypress={onKeyPress}
-		on:focusin={() => {
-			countKeyPress = 0;
-		}}
-	/>
-	<span class="text-sm">:</span>
-	<TimeComponentInput
-		id="seconds"
-		bind:value={seconds}
-		{disabled}
-		on:input={() => {
-			if (typeof seconds === 'string') {
-				seconds = parseInt(seconds);
-			}
-			if (seconds >= 0 && seconds <= 59) {
-			} else if (seconds < 0) {
-				seconds = 0;
-			} else if (seconds > 59) {
-				seconds = 59;
-			} else {
-				seconds = 0;
-			}
-			seconds = seconds.toString().padStart(2, '0');
-			onChange();
-		}}
-		on:keypress={onKeyPress}
-		on:focusin={() => {
-			countKeyPress = 0;
-		}}
-	/>
+    {#if showHours}
+        <TimeComponentInput
+            id="hours"
+            bind:value={hours}
+            {disabled}
+            class="w-[30px]"
+            oninput={() => {
+                if (typeof hours === 'string') {
+                    hours = parseInt(hours);
+                }
+                if (hours >= 0) {
+                } else if (hours < 0) {
+                    hours = 0;
+                } else {
+                    hours = 0;
+                }
+                onChange();
+            }}
+            onkeypress={onKeyPress}
+            onfocusin={() => {
+                countKeyPress = 0;
+            }}
+        />
+        <span class="text-sm">:</span>
+    {/if}
+    <TimeComponentInput
+        id="minutes"
+        bind:value={minutes}
+        {disabled}
+        oninput={() => {
+            if (typeof minutes === 'string') {
+                minutes = parseInt(minutes);
+            }
+            if (minutes >= 0 && (minutes <= 59 || !showHours)) {
+            } else if (minutes < 0) {
+                minutes = 0;
+            } else if (showHours && minutes > 59) {
+                minutes = 59;
+            } else {
+                minutes = 0;
+            }
+            minutes = minutes.toString().padStart(showHours ? 2 : 1, '0');
+            onChange();
+        }}
+        onkeypress={onKeyPress}
+        onfocusin={() => {
+            countKeyPress = 0;
+        }}
+    />
+    <span class="text-sm">:</span>
+    <TimeComponentInput
+        id="seconds"
+        bind:value={seconds}
+        {disabled}
+        oninput={() => {
+            if (typeof seconds === 'string') {
+                seconds = parseInt(seconds);
+            }
+            if (seconds >= 0 && seconds <= 59) {
+            } else if (seconds < 0) {
+                seconds = 0;
+            } else if (seconds > 59) {
+                seconds = 59;
+            } else {
+                seconds = 0;
+            }
+            seconds = seconds.toString().padStart(2, '0');
+            onChange();
+        }}
+        onkeypress={onKeyPress}
+        onfocusin={() => {
+            countKeyPress = 0;
+        }}
+    />
 </div>
 
 <style>
-	div :global(input::-webkit-outer-spin-button) {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-	div :global(input::-webkit-inner-spin-button) {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-	div :global(input[type='number']) {
-		-moz-appearance: textfield;
-	}
+    div :global(input::-webkit-outer-spin-button) {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    div :global(input::-webkit-inner-spin-button) {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    div :global(input[type='number']) {
+        -moz-appearance: textfield;
+    }
 </style>