Initial commit

routes/volumes/VolumeBrowserModal.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { HardDrive, Lock, Container } from 'lucide-svelte';
+	import { Badge } from '$lib/components/ui/badge';
+	import FileBrowserPanel from '../containers/FileBrowserPanel.svelte';
+
+	interface VolumeUsageInfo {
+		containerId: string;
+		containerName: string;
+		state: string;
+	}
+
+	interface Props {
+		open: boolean;
+		volumeName: string;
+		envId?: number | null;
+		onclose: () => void;
+	}
+
+	let { open = $bindable(), volumeName, envId, onclose }: Props = $props();
+
+	// Track volume usage from FileBrowserPanel
+	let volumeUsage = $state<VolumeUsageInfo[]>([]);
+	let isInUse = $state(false);
+
+	function handleUsageChange(usage: VolumeUsageInfo[], inUse: boolean) {
+		volumeUsage = usage;
+		isInUse = inUse;
+	}
+
+	async function releaseHelperContainer() {
+		try {
+			const params = new URLSearchParams();
+			if (envId) params.set('env', String(envId));
+			await fetch(`/api/volumes/${encodeURIComponent(volumeName)}/browse/release?${params}`, {
+				method: 'POST'
+			});
+		} catch {
+			// Silently ignore - cleanup is best-effort
+		}
+	}
+
+	function handleOpenChange(isOpen: boolean) {
+		if (!isOpen) {
+			// Release the helper container when modal closes
+			releaseHelperContainer();
+			onclose();
+		}
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="max-w-4xl h-[80vh] flex flex-col">
+		<Dialog.Header>
+			<Dialog.Title class="flex items-center gap-2">
+				<HardDrive class="w-5 h-5" />
+				<span>Browse volume - {volumeName}</span>
+				{#if isInUse}
+					<Badge variant="secondary" class="flex items-center gap-1 ml-2">
+						<Lock class="w-3 h-3" />
+						<span>Read-only</span>
+					</Badge>
+				{/if}
+			</Dialog.Title>
+			<Dialog.Description>
+				{#if isInUse}
+					<span class="flex items-center gap-1.5 flex-wrap">
+						<Lock class="w-3.5 h-3.5 text-muted-foreground inline" />
+						<span>Volume is in use by:</span>
+						{#each volumeUsage as container, i}
+							<span class="inline-flex items-center gap-1 text-foreground font-medium">
+								<Container class="w-3 h-3" />
+								{container.containerName}
+								<span class="text-muted-foreground">({container.state})</span>{#if i < volumeUsage.length - 1}<span>,</span>{/if}
+							</span>
+						{/each}
+						<span class="text-muted-foreground">- editing disabled</span>
+					</span>
+				{:else}
+					Browse, edit, and manage files in the volume.
+				{/if}
+			</Dialog.Description>
+		</Dialog.Header>
+		<div class="flex-1 overflow-hidden border rounded-lg">
+			<FileBrowserPanel
+				{volumeName}
+				envId={envId ?? undefined}
+				canEdit={true}
+				onUsageChange={handleUsageChange}
+			/>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>