feat: deleting vehicles

src/lib/components/lnv/VehicleSelector.svelte

@@ -17,6 +17,7 @@
 	} from "$lib/vehicles/vehicles.svelte";
 	import AddVehicleDrawer from "./AddVehicleDrawer.svelte";
 	import { m } from "$lang/messages";
+	import { updateStore } from "$lib/services/stores.svelte";
 
 	let open = $state(false);
 
@@ -56,18 +57,26 @@
 		</Drawer.Header>
 		<div class="p-4 pt-0 flex flex-col gap-2">
 			{#each vehicles.current as vehicle (vehicle.name)}
-				<Button
+				<div class="flex items-center gap-2">
-					variant={selectedVehicle() === vehicle.data ? "default" : "secondary"}
+					<Button
-					class="w-full p-5"
+						variant={selectedVehicle() === vehicle.data ? "default" : "secondary"}
-					onclick={() => {
+						class="w-[calc(100%-48px-8px)] p-5"
-						selectVehicle(vehicle.data);
+						onclick={() => {
-						open = false;
+							selectVehicle(vehicle.data);
-					}}
+							open = false;
-				>
+						}}
-					{@const Icon = getVehicleIcon(vehicle.data.type)}
+					>
-					<Icon />
+						{@const Icon = getVehicleIcon(vehicle.data.type)}
-					{vehicle.data.name}
+						<Icon />
-				</Button>
+						{vehicle.data.name}
+					</Button>
+					<Button variant="destructive" class="w-[48px]" onclick={() => {
+						if(!confirm("Are you sure you want to delete this vehicle? This action cannot be undone.")) return;
+						updateStore({ type: "vehicle", name: vehicle.name }, null);
+					}}>
+						X
+					</Button>
+				</div>
 			{/each}
 
 			<AddVehicleDrawer>