ui: queue: add option to export/import

src/lib/components/player/Queue.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
-	import { GripVertical, LocateFixed, Play, X } from "@lucide/svelte";
+	import {
+		Download,
+		GripVertical,
+		LocateFixed,
+		Play,
+		Upload,
+		X,
+	} from "@lucide/svelte";
 	import { tick } from "svelte";
+	import { z } from "zod";
 	import * as AlertDialog from "$lib/components/ui/alert-dialog";
 	import { Button } from "$lib/components/ui/button";
 	import VirtualList from "$lib/components/ui/VirtualList.svelte";
+	import { trackSchema } from "$lib/player/persist";
 	import { player } from "$lib/player/store.svelte";
 	import type { Track } from "$lib/player/types";
 	import { songTypeNumberLabel } from "$lib/utils/amq";
@@ -59,6 +68,54 @@
 			player.move(fromIndex, toIndex);
 		}
 	}
+
+	function exportQueue() {
+		const dataStr = JSON.stringify(player.queue, null, 2);
+		const dataUri =
+			"data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
+		const exportFileDefaultName = "amq-queue.json";
+
+		const linkElement = document.createElement("a");
+		linkElement.setAttribute("href", dataUri);
+		linkElement.setAttribute("download", exportFileDefaultName);
+		linkElement.click();
+	}
+
+	let fileInput: HTMLInputElement;
+
+	function importQueue(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (!input.files?.length) return;
+
+		const file = input.files[0];
+		const reader = new FileReader();
+
+		reader.onload = (event) => {
+			try {
+				const content = event.target?.result as string;
+				const parsed = JSON.parse(content);
+				const result = z.array(trackSchema).safeParse(parsed);
+
+				if (result.success) {
+					player.clearQueue();
+					player.isShuffled = false;
+					player.repeatMode = "off";
+					player.addAll(result.data);
+				} else {
+					console.error("Invalid queue format", result.error);
+					alert("Failed to import: Invalid queue format.");
+				}
+			} catch (err) {
+				console.error("Error reading file", err);
+				alert("Failed to read file.");
+			}
+
+			// Reset input so the same file can be selected again
+			input.value = "";
+		};
+
+		reader.readAsText(file);
+	}
 </script>
 
 <div
@@ -84,29 +141,65 @@
 				</Button>
 			{/if}
 		</div>
-		<AlertDialog.Root>
-			<AlertDialog.Trigger>
-				{#snippet child({ props })}
-					<Button variant="ghost" size="sm" class="h-6 w-6 p-0" {...props}>
-						<X class="h-3 w-3" aria-label="Clear" />
-					</Button>
-				{/snippet}
-			</AlertDialog.Trigger>
-			<AlertDialog.Content>
-				<AlertDialog.Header>
-					<AlertDialog.Title>Clear queue?</AlertDialog.Title>
-					<AlertDialog.Description>
-						This will remove all {player.displayQueue.length} songs from the queue.
-					</AlertDialog.Description>
-				</AlertDialog.Header>
-				<AlertDialog.Footer>
-					<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-					<AlertDialog.Action onclick={() => player.clearQueue()}
-						>Clear</AlertDialog.Action
-					>
-				</AlertDialog.Footer>
-			</AlertDialog.Content>
-		</AlertDialog.Root>
+		<div class="flex items-center gap-1 text-muted-foreground pl-2">
+			<input
+				type="file"
+				accept=".json"
+				bind:this={fileInput}
+				onchange={importQueue}
+				class="hidden"
+			/>
+			<Button
+				variant="ghost"
+				size="sm"
+				class="h-6 w-6 p-0"
+				aria-label="Import Queue"
+				onclick={() => fileInput?.click()}
+				title="Import Queue"
+			>
+				<Upload class="h-3 w-3" />
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				class="h-6 w-6 p-0"
+				aria-label="Export Queue"
+				onclick={exportQueue}
+				disabled={player.queue.length === 0}
+				title="Export Queue"
+			>
+				<Download class="h-3 w-3" />
+			</Button>
+			<AlertDialog.Root>
+				<AlertDialog.Trigger>
+					{#snippet child({ props })}
+						<Button
+							variant="ghost"
+							size="sm"
+							class="h-6 w-6 p-0"
+							{...props}
+							title="Clear Queue"
+						>
+							<X class="h-3 w-3" aria-label="Clear" />
+						</Button>
+					{/snippet}
+				</AlertDialog.Trigger>
+				<AlertDialog.Content>
+					<AlertDialog.Header>
+						<AlertDialog.Title>Clear queue?</AlertDialog.Title>
+						<AlertDialog.Description>
+							This will remove all {player.displayQueue.length} songs from the queue.
+						</AlertDialog.Description>
+					</AlertDialog.Header>
+					<AlertDialog.Footer>
+						<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+						<AlertDialog.Action onclick={() => player.clearQueue()}
+							>Clear</AlertDialog.Action
+						>
+					</AlertDialog.Footer>
+				</AlertDialog.Content>
+			</AlertDialog.Root>
+		</div>
 	</div>
 
 	<VirtualList