From 588175d30c3a17bab4a84e6006f7c5f4453483d7 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Tue, 9 Apr 2024 18:46:01 +0200
Subject: [PATCH] toolbar

---
 website/package-lock.json                     | 44 +++++++++++
 website/package.json                          |  3 +
 website/src/lib/components/Menu.svelte        | 31 +++++---
 website/src/lib/components/Toolbar.svelte     | 76 +++++++++++++++++++
 website/src/lib/components/ToolbarItem.svelte | 15 ++++
 .../src/lib/components/ui/tooltip/index.ts    | 15 ++++
 .../ui/tooltip/tooltip-content.svelte         | 28 +++++++
 website/src/routes/+page.svelte               |  2 +
 8 files changed, 204 insertions(+), 10 deletions(-)
 create mode 100644 website/src/lib/components/Toolbar.svelte
 create mode 100644 website/src/lib/components/ToolbarItem.svelte
 create mode 100644 website/src/lib/components/ui/tooltip/index.ts
 create mode 100644 website/src/lib/components/ui/tooltip/tooltip-content.svelte

diff --git a/website/package-lock.json b/website/package-lock.json
index b602feef..9f551a1d 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -8,12 +8,15 @@
             "name": "website",
             "version": "0.0.1",
             "dependencies": {
+                "@fortawesome/free-brands-svg-icons": "^6.5.2",
+                "@fortawesome/free-solid-svg-icons": "^6.5.2",
                 "@maplibre/maplibre-gl-geocoder": "^1.5.0",
                 "bits-ui": "^0.21.2",
                 "clsx": "^2.1.0",
                 "gpx": "file:../gpx",
                 "lucide-svelte": "^0.365.0",
                 "maplibre-gl": "^4.1.2",
+                "svelte-fa": "^4.0.2",
                 "tailwind-merge": "^2.2.2",
                 "tailwind-variants": "^0.2.1"
             },
@@ -544,6 +547,39 @@
             "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
             "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
         },
+        "node_modules/@fortawesome/fontawesome-common-types": {
+            "version": "6.5.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+            "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+            "hasInstallScript": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-brands-svg-icons": {
+            "version": "6.5.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+            "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.5.2"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "6.5.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+            "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.5.2"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4352,6 +4388,14 @@
                 }
             }
         },
+        "node_modules/svelte-fa": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-4.0.2.tgz",
+            "integrity": "sha512-lza8Jfii6jcpMQB73mBStONxaLfZsUS+rKJ/hH6WxsHUd+g68+oHIL9yQTk4a0uY9HQk78T/CPvQnED0msqJfg==",
+            "peerDependencies": {
+                "svelte": "^4.0.0"
+            }
+        },
         "node_modules/svelte-hmr": {
             "version": "0.15.3",
             "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
diff --git a/website/package.json b/website/package.json
index b7ffe09f..e4229bb1 100644
--- a/website/package.json
+++ b/website/package.json
@@ -37,12 +37,15 @@
     },
     "type": "module",
     "dependencies": {
+        "@fortawesome/free-brands-svg-icons": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@maplibre/maplibre-gl-geocoder": "^1.5.0",
         "bits-ui": "^0.21.2",
         "clsx": "^2.1.0",
         "gpx": "file:../gpx",
         "lucide-svelte": "^0.365.0",
         "maplibre-gl": "^4.1.2",
+        "svelte-fa": "^4.0.2",
         "tailwind-merge": "^2.2.2",
         "tailwind-variants": "^0.2.1"
     }
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index 3c3f7c43..d59b4991 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -11,9 +11,9 @@
 </script>
 
 <div class="absolute top-2 left-0 right-0 z-10 flex flex-row justify-center pointer-events-none">
-	<div class="w-fit flex flex-row items-center px-1 bg-background rounded-md pointer-events-auto">
-		<Logo class="h-5 mt-1 mx-2" />
-		<Menubar.Root class="border-none">
+	<div class="w-fit flex flex-row items-center p-1 bg-background rounded-md pointer-events-auto">
+		<Logo class="h-5 mt-0.5 mx-2" />
+		<Menubar.Root class="border-none h-fit p-0">
 			<Menubar.Menu>
 				<Menubar.Trigger>File</Menubar.Trigger>
 				<Menubar.Content>
@@ -86,20 +86,31 @@
 				</Menubar.Content>
 			</Menubar.Menu>
 		</Menubar.Root>
-		<div class="py-1 h-10">
-			<Button
-				variant="ghost"
-				href="/about"
-				target="_blank"
-				class="cursor-default py-1.5 px-3 h-fit rounded-sm">About</Button
+		<div class="h-fit flex flex-row items-center">
+			<Button variant="ghost" href="/about" target="_blank" class="cursor-default h-fit rounded-sm"
+				>About</Button
 			>
 			<Button
 				variant="ghost"
 				href="https://ko-fi.com/gpxstudio"
 				target="_blank"
-				class="cursor-default py-1.5 px-3 h-fit rounded-sm"
+				class="cursor-default h-fit rounded-sm"
 				>Donate <HeartHandshake size="18" class="ml-1" /></Button
 			>
 		</div>
 	</div>
 </div>
+
+<style lang="postcss">
+	div :global(button) {
+		@apply hover:bg-accent;
+		@apply px-3;
+		@apply py-0.5;
+	}
+
+	div :global(a) {
+		@apply hover:bg-accent;
+		@apply px-3;
+		@apply py-0.5;
+	}
+</style>
diff --git a/website/src/lib/components/Toolbar.svelte b/website/src/lib/components/Toolbar.svelte
new file mode 100644
index 00000000..2f4092bd
--- /dev/null
+++ b/website/src/lib/components/Toolbar.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import ToolbarItem from './ToolbarItem.svelte';
+	import Fa from 'svelte-fa';
+	import {
+		faPencil,
+		faStopwatch,
+		faExchange,
+		faPlusCircle,
+		faListUl,
+		faCopy,
+		faMapMarkerAlt,
+		faCompressAlt,
+		faVectorSquare,
+		faEyeSlash,
+		faPalette,
+		faFolderTree,
+		faTrashAlt
+	} from '@fortawesome/free-solid-svg-icons';
+</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 space-y-1 bg-background rounded-md pointer-events-auto">
+		<ToolbarItem>
+			<Fa slot="icon" icon={faPencil} />
+			<span slot="tooltip">Edit the track points</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faStopwatch} />
+			<span slot="tooltip">Change time and speed data</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faExchange} />
+			<span slot="tooltip">Reverse the order of the track points</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faPlusCircle} />
+			<span slot="tooltip">Merge with another file</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faListUl} />
+			<span slot="tooltip">Extract the tracks or track segments to new files</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faCopy} />
+			<span slot="tooltip">Duplicate the file</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faMapMarkerAlt} />
+			<span slot="tooltip">Create a new point of interest</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faCompressAlt} />
+			<span slot="tooltip">Reduce the number of track points</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faVectorSquare} />
+			<span slot="tooltip">Clean track points and POIs with a rectangle selection</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faEyeSlash} />
+			<span slot="tooltip">Hide/unhide the trace</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faPalette} />
+			<span slot="tooltip">Change the styling of the trace</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faFolderTree} />
+			<span slot="tooltip">Manage the file structure</span>
+		</ToolbarItem>
+		<ToolbarItem>
+			<Fa slot="icon" icon={faTrashAlt} />
+			<span slot="tooltip">Delete the file</span>
+		</ToolbarItem>
+	</div>
+</div>
diff --git a/website/src/lib/components/ToolbarItem.svelte b/website/src/lib/components/ToolbarItem.svelte
new file mode 100644
index 00000000..084b1862
--- /dev/null
+++ b/website/src/lib/components/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">
+			<slot name="icon" />
+		</Button>
+	</Tooltip.Trigger>
+	<Tooltip.Content side="right">
+		<slot name="tooltip" />
+	</Tooltip.Content>
+</Tooltip.Root>
diff --git a/website/src/lib/components/ui/tooltip/index.ts b/website/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 00000000..7d0444da
--- /dev/null
+++ b/website/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};
diff --git a/website/src/lib/components/ui/tooltip/tooltip-content.svelte b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 00000000..3c00a4e9
--- /dev/null
+++ b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index c187dd5c..0205fa64 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import Map from '$lib/components/Map.svelte';
 	import Menu from '$lib/components/Menu.svelte';
+	import Toolbar from '$lib/components/Toolbar.svelte';
 </script>
 
 <div class="flex flex-col w-screen h-screen">
 	<div class="grow relative">
 		<Menu />
+		<Toolbar />
 		<Map class="h-full" />
 	</div>
 	<div class="h-1/3">Test</div>