start of routing

website/src/lib/components/Toolbar.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-	import { reverseSelectedFiles } from '$lib/stores';
-	import ToolbarItem from './ToolbarItem.svelte';
-	import {
-		ArrowRightLeft,
-		Group,
-		CalendarClock,
-		Pencil,
-		SquareDashedMousePointer,
-		Ungroup,
-		MapPin,
-		Shrink,
-		Palette,
-		FolderTree
-	} from 'lucide-svelte';
-</script>
-
-<div class="absolute top-0 bottom-0 left-0 z-10 flex flex-col justify-center pointer-events-none">
-	<div class="flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md">
-		<ToolbarItem>
-			<Pencil slot="icon" size="18" />
-			<span slot="tooltip">Edit the track points</span>
-		</ToolbarItem>
-		<ToolbarItem>
-			<CalendarClock slot="icon" size="18" />
-			<span slot="tooltip">Change time and speed data</span>
-		</ToolbarItem>
-		<ToolbarItem on:click={reverseSelectedFiles}>
-			<ArrowRightLeft slot="icon" size="18" />
-			<span slot="tooltip">Reverse the file</span>
-		</ToolbarItem>
-		<ToolbarItem>
-			<Group slot="icon" size="18" />
-			<span slot="tooltip">Merge with another file</span>
-		</ToolbarItem>
-		<ToolbarItem>
-			<Ungroup slot="icon" size="18" />
-			<span slot="tooltip">Extract the tracks or track segments to new files</span>
-		</ToolbarItem>
-		<ToolbarItem>
-			<MapPin slot="icon" size="18" />
-			<span slot="tooltip">Create a new point of interest</span>
-		</ToolbarItem>
-		<ToolbarItem>
-			<Shrink slot="icon" size="18" />
-			<span slot="tooltip">Reduce the number of track points</span>
-		</ToolbarItem>
-		<ToolbarItem>
-			<SquareDashedMousePointer slot="icon" size="18" />
-			<span slot="tooltip"
-				>Clean track points and points of interest with a rectangle selection</span
-			>
-		</ToolbarItem>
-		<ToolbarItem>
-			<Palette slot="icon" size="18" />
-			<span slot="tooltip">Change the styling of the trace</span>
-		</ToolbarItem>
-		<ToolbarItem>
-			<FolderTree slot="icon" size="18" />
-			<span slot="tooltip">Manage the file structure</span>
-		</ToolbarItem>
-	</div>
-</div>

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import ToolbarItemMenu from './ToolbarItemMenu.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import * as Select from '$lib/components/ui/select';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import * as Alert from '$lib/components/ui/alert';
+
+	import { selectedFiles } from '$lib/stores';
+	import { CircleHelp } from 'lucide-svelte';
+
+	let routingProfile = {
+		value: 'bike',
+		label: 'bike'
+	};
+	let brouterProfiles = {
+		bike: 'Trekking-dry',
+		racingBike: 'fastbike',
+		mountainBike: 'MTB',
+		foot: 'Hiking-Alpine-SAC6',
+		motorcycle: 'Car-FastEco',
+		water: 'river',
+		railway: 'rail'
+	};
+	let routing = true;
+	let privateRoads = false;
+
+	$: if ($selectedFiles.size == 1) {
+		let file = $selectedFiles.values().next().value;
+		console.log(file);
+	}
+</script>
+
+<ToolbarItemMenu>
+	<Card.Root>
+		<Card.Header class="p-4">
+			<Card.Title>Routing</Card.Title>
+		</Card.Header>
+
+		<Card.Content class="p-4 pt-0 flex flex-col gap-4">
+			<div class="w-full flex flex-row justify-between items-center gap-2">
+				<Label>Activity</Label>
+				<Select.Root bind:selected={routingProfile}>
+					<Select.Trigger class="h-8 w-40">
+						<Select.Value />
+					</Select.Trigger>
+					<Select.Content>
+						{#each Object.keys(brouterProfiles) as profile}
+							<Select.Item value={profile}>{profile}</Select.Item>
+						{/each}
+						<!-- <Select.Item value="light">Light</Select.Item>
+					<Select.Item value="dark">Dark</Select.Item>
+					<Select.Item value="system">System</Select.Item> -->
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<div class="w-full flex flex-row justify-between items-center gap-2">
+				<Label for="routing">Routing (follow roads)</Label>
+				<Switch id="routing" class="scale-90" bind:checked={routing} />
+			</div>
+			<div class="w-full flex flex-row justify-between items-center gap-2">
+				<Label for="private">Allow private roads</Label>
+				<Switch id="private" class="scale-90" bind:checked={privateRoads} />
+			</div>
+			<Alert.Root class="max-w-64">
+				<CircleHelp size="16" />
+				<!-- <Alert.Title>Heads up!</Alert.Title> -->
+				<Alert.Description>
+					{#if $selectedFiles.size > 1}
+						<div>Select a single file to use the routing tool</div>
+					{:else if $selectedFiles.size == 0}
+						<div>Select a file to use the routing tool, or create a new file from the menu</div>
+					{:else}
+						<div>Click on the map to plot a route</div>
+					{/if}
+				</Alert.Description>
+			</Alert.Root>
+		</Card.Content>
+	</Card.Root>
+</ToolbarItemMenu>

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { reverseSelectedFiles } from '$lib/stores';
+	import Routing from './Routing.svelte';
+	import ToolbarItem from './ToolbarItem.svelte';
+	import {
+		ArrowRightLeft,
+		Group,
+		CalendarClock,
+		Pencil,
+		SquareDashedMousePointer,
+		Ungroup,
+		MapPin,
+		Shrink,
+		Palette,
+		FolderTree
+	} from 'lucide-svelte';
+
+	let currentTool: string | null = null;
+</script>
+
+<div class="absolute top-0 bottom-0 left-0 z-10 flex flex-col justify-center pointer-events-none">
+	<div class="flex flex-row w-screen items-center">
+		<div
+			class="h-fit flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md border"
+		>
+			<ToolbarItem
+				on:click={() => {
+					currentTool = currentTool === 'routing' ? null : 'routing';
+				}}
+			>
+				<Pencil slot="icon" size="18" />
+				<span slot="tooltip">Edit the track points</span>
+			</ToolbarItem>
+			<ToolbarItem>
+				<CalendarClock slot="icon" size="18" />
+				<span slot="tooltip">Change time and speed data</span>
+			</ToolbarItem>
+			<ToolbarItem on:click={reverseSelectedFiles}>
+				<ArrowRightLeft slot="icon" size="18" />
+				<span slot="tooltip">Reverse the file</span>
+			</ToolbarItem>
+			<ToolbarItem>
+				<Group slot="icon" size="18" />
+				<span slot="tooltip">Merge with another file</span>
+			</ToolbarItem>
+			<ToolbarItem>
+				<Ungroup slot="icon" size="18" />
+				<span slot="tooltip">Extract the tracks or track segments to new files</span>
+			</ToolbarItem>
+			<ToolbarItem>
+				<MapPin slot="icon" size="18" />
+				<span slot="tooltip">Create a new point of interest</span>
+			</ToolbarItem>
+			<ToolbarItem>
+				<Shrink slot="icon" size="18" />
+				<span slot="tooltip">Reduce the number of track points</span>
+			</ToolbarItem>
+			<ToolbarItem>
+				<SquareDashedMousePointer slot="icon" size="18" />
+				<span slot="tooltip"
+					>Clean track points and points of interest with a rectangle selection</span
+				>
+			</ToolbarItem>
+			<ToolbarItem>
+				<Palette slot="icon" size="18" />
+				<span slot="tooltip">Change the styling of the trace</span>
+			</ToolbarItem>
+			<ToolbarItem>
+				<FolderTree slot="icon" size="18" />
+				<span slot="tooltip">Manage the file structure</span>
+			</ToolbarItem>
+		</div>
+		{#if currentTool == 'routing'}
+			<Routing />
+		{/if}
+	</div>
+</div>

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

@@ -1,19 +1,11 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-
-	import { selectedFiles } from '$lib/stores';
 </script>
 
 <Tooltip.Root openDelay={300}>
 	<Tooltip.Trigger asChild let:builder>
-		<Button
-			builders={[builder]}
-			variant="ghost"
-			class="h-fit px-1 py-1.5"
-			disabled={$selectedFiles.size == 0}
-			on:click
-		>
+		<Button builders={[builder]} variant="ghost" class="h-fit px-1 py-1.5" on:click>
 			<slot name="icon" />
 		</Button>
 	</Tooltip.Trigger>

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { flyAndScale } from '$lib/utils';
+</script>
+
+<div in:flyAndScale={{ x: -2, y: 0, duration: 100 }} class="translate-x-1 h-full">
+	<div class="rounded-md shadow-md pointer-events-auto">
+		<slot />
+	</div>
+</div>

website/src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>

website/src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

website/src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type Variant, alertVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>

website/src/lib/components/ui/alert/index.ts

@@ -0,0 +1,33 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+
+export const alertVariants = tv({
+	base: "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+
+	variants: {
+		variant: {
+			default: "bg-background text-foreground",
+			destructive:
+				"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

website/src/lib/components/ui/select/index.ts

@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+};

website/src/lib/components/ui/select/select-content.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50,
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>

website/src/lib/components/ui/select/select-item.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot>
+		{label || value}
+	</slot>
+</SelectPrimitive.Item>

website/src/lib/components/ui/select/select-label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>

website/src/lib/components/ui/select/select-separator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />

website/src/lib/components/ui/select/select-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>

website/src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

website/src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SwitchPrimitive.Props;
+	type $$Events = SwitchPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>

website/src/routes/+page.svelte

@@ -5,7 +5,7 @@
 	import GPXData from '$lib/components/GPXData.svelte';
 	import Map from '$lib/components/Map.svelte';
 	import Menu from '$lib/components/Menu.svelte';
-	import Toolbar from '$lib/components/Toolbar.svelte';
+	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
 </script>
 
@@ -17,7 +17,7 @@
 		<LayerControl />
 		<Data />
 	</div>
-	<div class="h-60 flex flex-row overflow-hidden">
+	<div class="h-60 flex flex-row overflow-hidden border">
 		<FileList />
 		<GPXData />
 		<ElevationProfile />