feat(containers): implement CRUD operations and UI for container management

frontend/src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch
+};

frontend/src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from "$lib/utils";
+
+	interface Props extends Omit<HTMLButtonAttributes, 'type' | 'onclick'> {
+		checked?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		onCheckedChange,
+		disabled = false,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	function handleChange() {
+		if (!disabled) {
+			checked = !checked;
+			if (onCheckedChange) {
+				onCheckedChange(checked);
+			}
+		}
+	}
+</script>
+
+<button
+	type="button"
+	role="switch"
+	aria-checked={checked}
+	data-state={checked ? "checked" : "unchecked"}
+	{disabled}
+	onclick={handleChange}
+	class={cn(
+		"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+		checked ? "bg-primary" : "bg-input",
+		className
+	)}
+	{...restProps}
+>
+	<span
+		data-state={checked ? "checked" : "unchecked"}
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+			checked ? "translate-x-5" : "translate-x-0"
+		)}
+	></span>
+</button>