small fixes for tools

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);
             }

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 () => {
+                onchange={() => {
-                    await tick();
+                    untrack(() => updateEnd());
-                    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 () => {
+                onchange={() => {
-                    await tick();
+                    untrack(() => updateStart());
-                    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>

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" />

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;
+        this._currentPoints = 0;
-        let 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);

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')}

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>

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
+        {disabled}
-        on:change
+        {oninput}
-        on:keypress
+        {onchange}
-        on:focusin={() => {
+        {onkeypress}
+        onfocusin={(e) => {
             let input = document.activeElement;
             if (input instanceof HTMLInputElement) {
                 input.select();
             }
+            onfocusin(e);
         }}
-        on:focusin
+        class="w-[22px] {className ?? ''}"
-        class="w-[22px] {$$props.class ?? ''}"
-        {...$$restProps}
     />
 </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;

website/src/lib/components/ui/time-picker/TimePicker.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
+    import { untrack } from 'svelte';
     import TimeComponentInput from './TimeComponentInput.svelte';
 
-	export let showHours = true;
+    let {
-	export let value: number | undefined = undefined;
+        showHours = true,
-	export let disabled: boolean = false;
+        value = $bindable(),
-	export let onChange = () => {};
+        disabled = false,
+        onChange = () => {},
+    }: {
+        showHours?: boolean;
+        value?: number;
+        disabled?: boolean;
+        onChange?: () => void;
+    } = $props();
 
-	let hours: string | number = '--';
+    let hours: string | number = $state('--');
-	let minutes: string | number = '--';
+    let minutes: string | number = $state('--');
-	let seconds: string | number = '--';
+    let seconds: string | number = $state('--');
 
     function maybeParseInt(value: string | number): number {
         if (value === '--' || value === '') {
@@ -17,24 +25,30 @@
         return typeof value === 'string' ? parseInt(value) : value;
     }
 
-	function computeValue() {
+    function computeValue(): number {
         return Math.max(
             maybeParseInt(hours) * 3600 + maybeParseInt(minutes) * 60 + maybeParseInt(seconds),
             1
         );
     }
 
-	function updateValue() {
+    $effect(() => {
-		value = computeValue();
+        const val = computeValue();
-	}
+        untrack(() => {
+            value = val;
+        });
+    });
 
-	$: hours, minutes, seconds, updateValue();
+    $effect(() => {
-
+        if (value === undefined) {
-	$: if (value === undefined) {
+            untrack(() => {
                 hours = '--';
                 minutes = '--';
                 seconds = '--';
-	} else if (value !== computeValue()) {
+            });
+        } else {
+            untrack(() => {
+                if (value != computeValue()) {
                     let rounded = Math.max(Math.round(value), 1);
                     if (showHours) {
                         hours = Math.floor(rounded / 3600);
@@ -46,6 +60,9 @@
                     }
                     seconds = (rounded % 60).toString().padStart(2, '0');
                 }
+            });
+        }
+    });
 
     let container: HTMLDivElement;
     let countKeyPress = 0;
@@ -65,7 +82,7 @@
 
 <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
+    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'
         : ''}"
 >
@@ -75,7 +92,7 @@
             bind:value={hours}
             {disabled}
             class="w-[30px]"
-			on:input={() => {
+            oninput={() => {
                 if (typeof hours === 'string') {
                     hours = parseInt(hours);
                 }
@@ -87,8 +104,8 @@
                 }
                 onChange();
             }}
-			on:keypress={onKeyPress}
+            onkeypress={onKeyPress}
-			on:focusin={() => {
+            onfocusin={() => {
                 countKeyPress = 0;
             }}
         />
@@ -98,7 +115,7 @@
         id="minutes"
         bind:value={minutes}
         {disabled}
-		on:input={() => {
+        oninput={() => {
             if (typeof minutes === 'string') {
                 minutes = parseInt(minutes);
             }
@@ -113,8 +130,8 @@
             minutes = minutes.toString().padStart(showHours ? 2 : 1, '0');
             onChange();
         }}
-		on:keypress={onKeyPress}
+        onkeypress={onKeyPress}
-		on:focusin={() => {
+        onfocusin={() => {
             countKeyPress = 0;
         }}
     />
@@ -123,7 +140,7 @@
         id="seconds"
         bind:value={seconds}
         {disabled}
-		on:input={() => {
+        oninput={() => {
             if (typeof seconds === 'string') {
                 seconds = parseInt(seconds);
             }
@@ -138,8 +155,8 @@
             seconds = seconds.toString().padStart(2, '0');
             onChange();
         }}
-		on:keypress={onKeyPress}
+        onkeypress={onKeyPress}
-		on:focusin={() => {
+        onfocusin={() => {
             countKeyPress = 0;
         }}
     />