lucide icons

website/src/lib/components/Menu.svelte

@@ -2,7 +2,18 @@
 	import * as Menubar from '$lib/components/ui/menubar/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import Logo from './Logo.svelte';
-	import { HeartHandshake } from 'lucide-svelte';
+	import {
+		Plus,
+		Upload,
+		Copy,
+		Download,
+		Undo2,
+		Redo2,
+		Trash2,
+		HeartHandshake
+	} from 'lucide-svelte';
+	import Fa from 'svelte-fa';
+	import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
 
 	let distanceUnits = 'metric';
 	let velocityUnits = 'speed';
@@ -20,17 +31,29 @@
 				<Menubar.Trigger>File</Menubar.Trigger>
 				<Menubar.Content>
 					<Menubar.Item>
-						New GPX file <Menubar.Shortcut>⌘N</Menubar.Shortcut>
+						<Plus size="16" class="mr-1" /> New <Menubar.Shortcut>⌘N</Menubar.Shortcut>
 					</Menubar.Item>
 					<Menubar.Item>
-						Load GPX file(s)... <Menubar.Shortcut>⌘O</Menubar.Shortcut>
+						<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut
+							>⌘O</Menubar.Shortcut
+						>
+					</Menubar.Item>
+					<Menubar.Item>
+						<Fa icon={faGoogleDrive} class="h-4 w-4 mr-1" />
+						Load from Google Drive...</Menubar.Item
+					>
+					<Menubar.Separator />
+					<Menubar.Item>
+						<Copy size="16" class="mr-1" /> Duplicate <Menubar.Shortcut>⌘D</Menubar.Shortcut>
 					</Menubar.Item>
 					<Menubar.Separator />
 					<Menubar.Item>
-						Export... <Menubar.Shortcut>⌘S</Menubar.Shortcut>
+						<Download size="16" class="mr-1" /> Export... <Menubar.Shortcut>⌘S</Menubar.Shortcut>
 					</Menubar.Item>
 					<Menubar.Item>
-						Export all... <Menubar.Shortcut>⇧⌘S</Menubar.Shortcut>
+						<Download size="16" class="mr-1" /> Export all... <Menubar.Shortcut
+							>⇧⌘S</Menubar.Shortcut
+						>
 					</Menubar.Item>
 				</Menubar.Content>
 			</Menubar.Menu>
@@ -38,14 +61,20 @@
 				<Menubar.Trigger>Edit</Menubar.Trigger>
 				<Menubar.Content>
 					<Menubar.Item>
-						Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
+						<Undo2 size="16" class="mr-1" /> Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
 					</Menubar.Item>
 					<Menubar.Item>
-						Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
+						<Redo2 size="16" class="mr-1" /> Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
 					</Menubar.Item>
 					<Menubar.Separator />
-					<Menubar.Item>Delete <Menubar.Shortcut>⌘D</Menubar.Shortcut></Menubar.Item>
-					<Menubar.Item>Delete all<Menubar.Shortcut>⇧⌘D</Menubar.Shortcut></Menubar.Item>
+					<Menubar.Item
+						><Trash2 size="16" class="mr-1" /> Delete <Menubar.Shortcut>⌘K</Menubar.Shortcut
+						></Menubar.Item
+					>
+					<Menubar.Item class="text-destructive data-[highlighted]:text-destructive"
+						><Trash2 size="16" class="mr-1" /> Delete all<Menubar.Shortcut>⇧⌘K</Menubar.Shortcut
+						></Menubar.Item
+					>
 				</Menubar.Content>
 			</Menubar.Menu>
 			<Menubar.Menu>
@@ -97,7 +126,7 @@
 				href="https://ko-fi.com/gpxstudio"
 				target="_blank"
 				class="cursor-default h-fit rounded-sm"
-				>Donate <HeartHandshake size="18" class="ml-1" /></Button
+				>Donate <HeartHandshake size="16" class="ml-1" /></Button
 			>
 		</div>
 	</div>

website/src/lib/components/Toolbar.svelte

@@ -1,76 +1,60 @@
 <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';
+		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>
-			<Fa slot="icon" icon={faPencil} />
+			<Pencil slot="icon" size="18" />
 			<span slot="tooltip">Edit the track points</span>
 		</ToolbarItem>
 		<ToolbarItem>
-			<Fa slot="icon" icon={faStopwatch} />
+			<CalendarClock slot="icon" size="18" />
 			<span slot="tooltip">Change time and speed data</span>
 		</ToolbarItem>
 		<ToolbarItem>
-			<Fa slot="icon" icon={faExchange} />
+			<ArrowRightLeft slot="icon" size="18" />
 			<span slot="tooltip">Reverse the order of the track points</span>
 		</ToolbarItem>
 		<ToolbarItem>
-			<Fa slot="icon" icon={faPlusCircle} />
+			<Group slot="icon" size="18" />
 			<span slot="tooltip">Merge with another file</span>
 		</ToolbarItem>
 		<ToolbarItem>
-			<Fa slot="icon" icon={faListUl} />
+			<Ungroup slot="icon" size="18" />
 			<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} />
+			<MapPin slot="icon" size="18" />
 			<span slot="tooltip">Create a new point of interest</span>
 		</ToolbarItem>
 		<ToolbarItem>
-			<Fa slot="icon" icon={faCompressAlt} />
+			<Shrink slot="icon" size="18" />
 			<span slot="tooltip">Reduce the number of track points</span>
 		</ToolbarItem>
 		<ToolbarItem>
-			<Fa slot="icon" icon={faVectorSquare} />
+			<SquareDashedMousePointer slot="icon" size="18" />
 			<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} />
+			<Palette slot="icon" size="18" />
 			<span slot="tooltip">Change the styling of the trace</span>
 		</ToolbarItem>
 		<ToolbarItem>
-			<Fa slot="icon" icon={faFolderTree} />
+			<FolderTree slot="icon" size="18" />
 			<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>

website/src/lib/components/layer-control/LayerControl.svelte

@@ -8,8 +8,7 @@
 	import { Separator } from '$lib/components/ui/separator';
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
-	import Fa from 'svelte-fa';
-	import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
+	import { Layers } from 'lucide-svelte';
 
 	import {
 		basemaps,
@@ -31,7 +30,7 @@
 	<div
 		class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
 	>
-		<Fa icon={faLayerGroup} size="1.4x" />
+		<Layers size="20" />
 	</div>
 	<div
 		class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr]"

website/src/lib/components/layer-control/LayerControlSettings.svelte

@@ -7,8 +7,7 @@
 	import * as Sheet from '$lib/components/ui/sheet';
 	import * as Accordion from '$lib/components/ui/accordion';
 
-	import Fa from 'svelte-fa';
-	import { faGear } from '@fortawesome/free-solid-svg-icons';
+	import { Settings } from 'lucide-svelte';
 
 	import {
 		basemaps,
@@ -22,8 +21,8 @@
 
 <Sheet.Root>
 	<Sheet.Trigger class="w-full">
-		<Button variant="secondary" class="w-full px-1 py-1.5">
-			<Fa icon={faGear} class="mr-2" />
+		<Button variant="ghost" class="w-full px-1 py-1.5">
+			<Settings size="18" class="mr-2" />
 			Manage layers
 		</Button>
 	</Sheet.Trigger>
@@ -31,13 +30,14 @@
 		<Sheet.Header class="h-full">
 			<Sheet.Title>Layer settings</Sheet.Title>
 			<Sheet.Description>
-				Select the map layers you want to show in the interface and adjust their settings.
+				Select the map layers you want to show in the interface, add custom ones, and adjust their
+				settings.
 			</Sheet.Description>
 			<Accordion.Root class="flex flex-col overflow-hidden">
 				<Accordion.Item value="item-1" class="flex flex-col overflow-hidden">
 					<Accordion.Trigger>Layer selection</Accordion.Trigger>
-					<Accordion.Content class="grow flex flex-col">
-						<ScrollArea class="pr-4">
+					<Accordion.Content class="grow flex flex-col border rounded">
+						<ScrollArea class="py-2 pr-2">
 							<LayerTree
 								layerTree={basemapTree}
 								label="Basemaps"
@@ -48,8 +48,8 @@
 								}}
 							/>
 						</ScrollArea>
-						<Separator class="my-2" />
-						<ScrollArea class="pr-4">
+						<Separator />
+						<ScrollArea class="py-2 pr-2">
 							<LayerTree
 								layerTree={overlayTree}
 								label="Overlays"
@@ -63,17 +63,17 @@
 					</Accordion.Content>
 				</Accordion.Item>
 				<Accordion.Item value="item-2">
-					<Accordion.Trigger>Custom layer</Accordion.Trigger>
+					<Accordion.Trigger>Custom layers</Accordion.Trigger>
 					<Accordion.Content>
-						<ScrollArea>TODO custom layer form</ScrollArea>
+						<ScrollArea>TODO custom layer list + new custom layer form</ScrollArea>
 					</Accordion.Content>
 				</Accordion.Item>
 				<Accordion.Item value="item-3">
-					<Accordion.Trigger>Heatmap settings</Accordion.Trigger>
+					<Accordion.Trigger>Heatmap</Accordion.Trigger>
 					<Accordion.Content></Accordion.Content>
 				</Accordion.Item>
 				<Accordion.Item value="item-4">
-					<Accordion.Trigger>POIs settings</Accordion.Trigger>
+					<Accordion.Trigger>Points of interest</Accordion.Trigger>
 					<Accordion.Content></Accordion.Content>
 				</Accordion.Item>
 			</Accordion.Root>

website/src/lib/components/layer-control/LayerTree.svelte

@@ -5,8 +5,7 @@
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import { Button } from '$lib/components/ui/button';
 
-	import Fa from 'svelte-fa';
-	import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+	import { ChevronDown, ChevronUp } from 'lucide-svelte';
 
 	export let layerTree: LayerTreeType;
 	export let label: string;
@@ -27,9 +26,9 @@
 			>
 				<span class="mr-2">{label}</span>
 				{#if open}
-					<Fa icon={faChevronDown} size="xs" />
+					<ChevronDown size="16" />
 				{:else}
-					<Fa icon={faChevronLeft} size="xs" />
+					<ChevronUp size="16" />
 				{/if}
 			</Button></Collapsible.Trigger
 		>

website/src/lib/components/layer-control/LayerTreeNode.svelte

@@ -4,8 +4,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Collapsible from '$lib/components/ui/collapsible';
 
-	import Fa from 'svelte-fa';
-	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+	import { ChevronDown, ChevronUp } from 'lucide-svelte';
 
 	import { type LayerTreeType } from '$lib/assets/layers';
 
@@ -71,9 +70,9 @@
 					>
 						<span class="mr-2">{id}</span>
 						{#if open[id]}
-							<Fa icon={faChevronUp} size="xs" />
+							<ChevronUp size="16" />
 						{:else}
-							<Fa icon={faChevronDown} size="xs" />
+							<ChevronDown size="16" />
 						{/if}
 					</Button></Collapsible.Trigger
 				>

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

@@ -14,7 +14,7 @@
 </script>
 
 <AccordionPrimitive.Content
-	class={cn('overflow-hidden text-sm transition-all pb-4', className)}
+	class={cn('overflow-hidden text-sm transition-all mb-4', className)}
 	{transition}
 	{transitionConfig}
 	{...$$restProps}