starting to fix time tool

website/src/lib/components/toolbar/ToolbarItemMenu.svelte

@@ -4,7 +4,7 @@
     import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
     import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
     import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
-    // import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
     import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
     import Extract from '$lib/components/toolbar/tools/Extract.svelte';
@@ -48,8 +48,8 @@
                         <Scissors />
                     {:else if $currentTool === Tool.WAYPOINT}
                         <Waypoint />
-                        <!-- {:else if $currentTool === Tool.TIME}
-                        <Time /> -->
+                    {:else if $currentTool === Tool.TIME}
+                        <Time />
                     {:else if $currentTool === Tool.MERGE}
                         <Merge />
                     {:else if $currentTool === Tool.ELEVATION}

website/src/lib/components/toolbar/tools/Time.svelte

@@ -5,7 +5,6 @@
     import { Button } from '$lib/components/ui/button';
     import { Checkbox } from '$lib/components/ui/checkbox';
     import TimePicker from '$lib/components/ui/time-picker/TimePicker.svelte';
-    import { gpxStatistics } from '$lib/stores';
     import {
         distancePerHourToSecondsPerDistance,
         getConvertedVelocity,
@@ -26,20 +25,20 @@
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
     import { settings } from '$lib/logic/settings';
-    import { fileActions } from '$lib/logic/file-actions';
     import { fileActionManager } from '$lib/logic/file-action-manager';
+    import { gpxStatistics } from '$lib/logic/statistics';
 
     let props: {
         class?: string;
     } = $props();
 
-    let startDate: DateValue | undefined = undefined;
-    let startTime: string | undefined = undefined;
-    let endDate: DateValue | undefined = undefined;
-    let endTime: string | undefined = undefined;
-    let movingTime: number | undefined = undefined;
-    let speed: number | undefined = undefined;
-    let artificial = false;
+    let startDate: DateValue | undefined = $state(undefined);
+    let startTime: string | undefined = $state(undefined);
+    let endDate: DateValue | undefined = $state(undefined);
+    let endTime: string | undefined = $state(undefined);
+    let movingTime: number | undefined = $state(undefined);
+    let speed: number | undefined = $state(undefined);
+    let artificial = $state(false);
 
     function toCalendarDate(date: Date): CalendarDate {
         return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
@@ -53,7 +52,7 @@
 
     function setSpeed(value: number) {
         let speedValue = getConvertedVelocity(value);
-        if (velocityUnits.value === 'speed') {
+        if ($velocityUnits === 'speed') {
             speedValue = parseFloat(speedValue.toFixed(2));
         }
         speed = speedValue;
@@ -86,9 +85,11 @@
         }
     }
 
-    // $: if ($gpxStatistics && $velocityUnits && $distanceUnits) {
-    //     setGPXData();
-    // }
+    $effect(() => {
+        if ($gpxStatistics && $velocityUnits && $distanceUnits) {
+            setGPXData();
+        }
+    });
 
     function getDate(date: DateValue, time: string): Date {
         if (date === undefined) {
@@ -139,12 +140,12 @@
         }
 
         let speedValue = speed;
-        if (velocityUnits.value === 'pace') {
+        if ($velocityUnits === 'pace') {
             speedValue = distancePerHourToSecondsPerDistance(speed);
         }
-        if (distanceUnits.value === 'imperial') {
+        if ($distanceUnits === 'imperial') {
             speedValue = milesToKilometers(speedValue);
-        } else if (distanceUnits.value === 'nautical') {
+        } else if ($distanceUnits === 'nautical') {
             speedValue = nauticalMilesToKilometers(speedValue);
         }
         return speedValue;
@@ -178,8 +179,7 @@
     }
 
     let canUpdate = $derived(
-        selection.value.size === 1 &&
-            selection.value.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
+        $selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
     );
 </script>
 
@@ -189,14 +189,14 @@
             <div class="flex flex-col gap-2 grow">
                 <Label for="speed" class="flex flex-row">
                     <Zap size="16" class="mr-1" />
-                    {#if velocityUnits.value === 'speed'}
+                    {#if $velocityUnits === 'speed'}
                         {i18n._('quantities.speed')}
                     {:else}
                         {i18n._('quantities.pace')}
                     {/if}
                 </Label>
                 <div class="flex flex-row gap-1 items-center">
-                    {#if velocityUnits.value === 'speed'}
+                    {#if $velocityUnits === 'speed'}
                         <Input
                             id="speed"
                             type="number"
@@ -205,13 +205,14 @@
                             disabled={!canUpdate}
                             bind:value={speed}
                             onchange={updateDataFromSpeed}
+                            class="text-sm"
                         />
                         <span class="text-sm shrink-0">
-                            {#if distanceUnits.value === 'imperial'}
+                            {#if $distanceUnits === 'imperial'}
                                 {i18n._('units.miles_per_hour')}
-                            {:else if distanceUnits.value === 'metric'}
+                            {:else if $distanceUnits === 'metric'}
                                 {i18n._('units.kilometers_per_hour')}
-                            {:else if distanceUnits.value === 'nautical'}
+                            {:else if $distanceUnits === 'nautical'}
                                 {i18n._('units.knots')}
                             {/if}
                         </span>
@@ -223,11 +224,11 @@
                             onChange={updateDataFromSpeed}
                         />
                         <span class="text-sm shrink-0">
-                            {#if distanceUnits.value === 'imperial'}
+                            {#if $distanceUnits === 'imperial'}
                                 {i18n._('units.minutes_per_mile')}
-                            {:else if distanceUnits.value === 'metric'}
+                            {:else if $distanceUnits === 'metric'}
                                 {i18n._('units.minutes_per_kilometer')}
-                            {:else if distanceUnits.value === 'nautical'}
+                            {:else if $distanceUnits === 'nautical'}
                                 {i18n._('units.minutes_per_nautical_mile')}
                             {/if}
                         </span>
@@ -332,7 +333,7 @@
                     ratio = $gpxStatistics.global.speed.moving / effectiveSpeed;
                 }
 
-                let item = selection.value.getSelected()[0];
+                let item = $selection.getSelected()[0];
                 let fileId = item.getFileId();
                 fileActionManager.applyToFile(fileId, (file) => {
                     if (item instanceof ListFileItem) {

website/src/lib/components/ui/date-picker/DatePicker.svelte

@@ -1,39 +1,48 @@
 <script lang="ts">
-    import { CalendarIcon } from '@lucide/svelte';
+    import CalendarIcon from '@lucide/svelte/icons/calendar';
     import { DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
     import { cn } from '$lib/utils.js';
-    import { Button } from '$lib/components/ui/button/index.js';
+    import { buttonVariants } from '$lib/components/ui/button/index.js';
     import { Calendar } from '$lib/components/ui/calendar/index.js';
     import * as Popover from '$lib/components/ui/popover/index.js';
 
-    export let value: DateValue | undefined = undefined;
-    export let placeholder: string = 'Pick a date';
-    export let locale = 'en';
-    export let disabled: boolean = false;
-    export let onValueChange: any;
+    let {
+        value = $bindable<DateValue | undefined>(),
+        placeholder = 'Pick a date',
+        disabled = false,
+        locale,
+        class: className = '',
+    }: {
+        value?: DateValue;
+        placeholder?: string;
+        disabled?: boolean;
+        locale: string;
+        class?: string;
+    } = $props();
 
     const df = new DateFormatter(locale, {
         dateStyle: 'long',
     });
+
+    let contentRef = $state<HTMLElement | null>(null);
 </script>
 
 <Popover.Root>
-    <Popover.Trigger asChild let:builder>
-        <Button
-            variant="outline"
+    <Popover.Trigger
         class={cn(
-                'w-[280px] justify-start text-left font-normal',
+            buttonVariants({
+                variant: 'outline',
+                class: 'justify-start text-left font-normal',
+            }),
             !value && 'text-muted-foreground',
-                $$props.class
+            className
         )}
         {disabled}
-            builders={[builder]}
     >
-            <CalendarIcon class="mr-2 h-4 w-4" />
+        <CalendarIcon />
         {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
-        </Button>
     </Popover.Trigger>
-    <Popover.Content class="w-auto p-0">
-        <Calendar bind:value initialFocus {locale} {onValueChange} />
+    <Popover.Content bind:ref={contentRef} class="w-auto p-0">
+        <Calendar type="single" captionLayout="dropdown" bind:value />
     </Popover.Content>
 </Popover.Root>