start of routing

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

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

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>