update shadcn components

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

@@ -26,31 +26,31 @@
             ''}"
     >
         <ToolbarItem itemTool={Tool.ROUTING} label={i18n._('toolbar.routing.tooltip')}>
-            <Pencil size="18" />
+            <Pencil size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.WAYPOINT} label={i18n._('toolbar.waypoint.tooltip')}>
-            <MapPin size="18" />
+            <MapPin size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.SCISSORS} label={i18n._('toolbar.scissors.tooltip')}>
-            <Scissors size="18" />
+            <Scissors size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.TIME} label={i18n._('toolbar.time.tooltip')}>
-            <CalendarClock size="18" />
+            <CalendarClock size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.MERGE} label={i18n._('toolbar.merge.tooltip')}>
-            <Group size="18" />
+            <Group size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.EXTRACT} label={i18n._('toolbar.extract.tooltip')}>
-            <Ungroup size="18" />
+            <Ungroup size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.ELEVATION} label={i18n._('toolbar.elevation.button')}>
-            <MountainSnow size="18" />
+            <MountainSnow size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.REDUCE} label={i18n._('toolbar.reduce.tooltip')}>
-            <Funnel size="18" />
+            <Funnel size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.CLEAN} label={i18n._('toolbar.clean.tooltip')}>
-            <SquareDashedMousePointer size="18" />
+            <SquareDashedMousePointer size="18" class="size-4.5" />
         </ToolbarItem>
     </div>
     <ToolbarItemMenu class={props.class ?? ''} />

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

@@ -24,13 +24,13 @@
 </script>
 
 <Tooltip.Provider>
-    <Tooltip.Root delayDuration={300}>
+    <Tooltip.Root>
         <Tooltip.Trigger>
             {#snippet child({ props })}
                 <Button
                     {...props}
                     variant="ghost"
-                    class="h-[26px] px-1 py-1.5 {$currentTool === itemTool ? 'bg-accent' : ''}"
+                    class="size-[24px] {$currentTool === itemTool ? 'bg-accent' : ''}"
                     onclick={toggleTool}
                     aria-label={label}
                 >

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

@@ -40,8 +40,8 @@
 {#if $currentTool !== null}
     <div class="translate-x-1 h-full animate-in animate-out {className}">
         <div class="rounded-md shadow-md pointer-events-auto">
-            <Card.Root class="rounded-md border-none">
-                <Card.Content class="p-2.5">
+            <Card.Root class="rounded-md border-none py-2.5">
+                <Card.Content class="px-2.5">
                     {#if $currentTool === Tool.ROUTING}
                         <Routing {popup} {popupElement} bind:minimized={$minimizeRoutingMenu} />
                     {:else if $currentTool === Tool.SCISSORS}

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

@@ -95,22 +95,14 @@
         {:else if mergeType === MergeType.TRACES && !canMergeTraces}
             {i18n._('toolbar.merge.help_cannot_merge_traces')}
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
-            <Shortcut
-                ctrl={true}
-                click={true}
-                class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
-            />
+            <Shortcut ctrl={true} click={true} class="border" />
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
         {:else if mergeType === MergeType.CONTENTS && canMergeContents}
             {i18n._('toolbar.merge.help_merge_contents')}
         {:else if mergeType === MergeType.CONTENTS && !canMergeContents}
             {i18n._('toolbar.merge.help_cannot_merge_contents')}
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
-            <Shortcut
-                ctrl={true}
-                click={true}
-                class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
-            />
+            <Shortcut ctrl={true} click={true} class="border" />
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
         {/if}
     </Help>

website/src/lib/components/toolbar/tools/routing/Routing.svelte

@@ -110,7 +110,9 @@
 
     onDestroy(() => {
         if ($map) {
-            fileStateCollectionObserver.destroy();
+            if (fileStateCollectionObserver) {
+                fileStateCollectionObserver.destroy();
+            }
 
             mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
             $map.off('click', createFileWithPoint);
@@ -120,14 +122,14 @@
 
 {#if minimizable && minimized}
     <div class="-m-1.5 -mb-2">
-        <Button variant="ghost" class="px-1 h-[26px]" onclick={() => (minimized = false)}>
-            <SquareArrowOutDownRight size="18" />
+        <Button variant="ghost" size="icon-sm" class="size-6" onclick={() => (minimized = false)}>
+            <SquareArrowOutDownRight size="18" class="size-4.5" />
         </Button>
     </div>
 {:else}
     <div class="flex flex-col gap-3 w-full max-w-80 animate-in animate-out {className ?? ''}">
         <div class="flex flex-col gap-3">
-            <Label class="flex flex-row justify-between items-center gap-2">
+            <Label class="justify-between">
                 <span class="flex flex-row items-center gap-1">
                     {#if $routing}
                         <Route size="16" />
@@ -137,13 +139,15 @@
                     {i18n._('toolbar.routing.use_routing')}
                 </span>
                 <Tooltip label={i18n._('toolbar.routing.use_routing_tooltip')}>
-                    <Switch class="scale-90" bind:checked={$routing} />
-                    <Shortcut slot="extra" key="F5" />
+                    <Switch bind:checked={$routing} />
+                    {#snippet extra()}
+                        <Shortcut key="F5" />
+                    {/snippet}
                 </Tooltip>
             </Label>
             {#if $routing}
                 <div class="flex flex-col gap-3" in:slide>
-                    <Label class="flex flex-row justify-between items-center gap-2">
+                    <Label class="justify-between">
                         <span class="shrink-0 flex flex-row items-center gap-1">
                             {#if $routingProfile.includes('bike') || $routingProfile.includes('motorcycle')}
                                 <Bike size="16" />
@@ -171,12 +175,12 @@
                             </Select.Content>
                         </Select.Root>
                     </Label>
-                    <Label class="flex flex-row justify-between items-center gap-2">
+                    <Label class="justify-between">
                         <span class="flex flex-row gap-1">
                             <TriangleAlert size="16" />
                             {i18n._('toolbar.routing.allow_private')}
                         </span>
-                        <Switch class="scale-90" bind:checked={$privateRoads} />
+                        <Switch bind:checked={$privateRoads} />
                     </Label>
                 </div>
             {/if}
@@ -185,7 +189,7 @@
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.reverse.tooltip')}
                 variant="outline"
-                class="flex flex-row gap-1 text-xs px-2"
+                class="gap-1 text-xs"
                 disabled={!validSelection}
                 onclick={fileActions.reverseSelection}
             >
@@ -194,7 +198,7 @@
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.route_back_to_start.tooltip')}
                 variant="outline"
-                class="flex flex-row gap-1 text-xs px-2"
+                class="gap-1 text-xs"
                 disabled={!validSelection}
                 onclick={() => {
                     const selected = selection.getOrderedSelection();
@@ -230,7 +234,7 @@
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.round_trip.tooltip')}
                 variant="outline"
-                class="flex flex-row gap-1 text-xs px-2"
+                class="gap-1 text-xs"
                 disabled={!validSelection}
                 onclick={fileActions.createRoundTripForSelection}
             >
@@ -247,7 +251,8 @@
             </Help>
             <Button
                 variant="ghost"
-                class="px-1 h-6"
+                size="icon-sm"
+                class="size-6"
                 onclick={() => {
                     if (minimizable) {
                         minimized = true;