Initial commit

lib/components/ui/empty-state/empty-state.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { Component } from 'svelte';
+	import { cn } from '$lib/utils.js';
+
+	interface Props {
+		icon?: Component;
+		title: string;
+		description?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { icon: Icon, title, description, class: className, children }: Props = $props();
+</script>
+
+<div class={cn("flex flex-col items-center justify-center py-12 px-4 text-center", className)}>
+	{#if Icon}
+		<div class="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
+			<Icon class="w-6 h-6 text-muted-foreground" />
+		</div>
+	{/if}
+	<h3 class="text-lg font-medium text-foreground mb-1">{title}</h3>
+	{#if description}
+		<p class="text-sm text-muted-foreground max-w-sm mb-4">{description}</p>
+	{/if}
+	{#if children}
+		<div class="mt-2">
+			{@render children()}
+		</div>
+	{/if}
+</div>

lib/components/ui/empty-state/index.ts

@@ -0,0 +1,4 @@
+import EmptyState from './empty-state.svelte';
+import NoEnvironment from './no-environment.svelte';
+
+export { EmptyState, NoEnvironment };

lib/components/ui/empty-state/no-environment.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { EmptyState } from '$lib/components/ui/empty-state';
+	import { Server, Settings } from 'lucide-svelte';
+	import { goto } from '$app/navigation';
+	import { environments } from '$lib/stores/environment';
+
+	const hasEnvironments = $derived($environments.length > 0);
+</script>
+
+{#if hasEnvironments}
+	<EmptyState
+		icon={Server}
+		title="No environment selected"
+		description="Select a Docker environment from the dropdown to get started"
+	/>
+{:else}
+	<EmptyState
+		icon={Server}
+		title="No environment configured"
+		description="Add a Docker environment in Settings to get started"
+	>
+		<Button variant="secondary" onclick={() => goto('/settings?tab=environments')}>
+			<Settings class="w-4 h-4 mr-2" />
+			Go to Settings
+		</Button>
+	</EmptyState>
+{/if}