Improved file naming & structure for UI components (#17405)

* refactor: Component iles naming & structure * chore: update webui build output * refactor: Dialog titles + components namig * chore: update webui build output * refactor: Imports * chore: update webui build output
2025-11-20 14:07:31 +01:00
parent 92c0b387a9
commit 4c91f2633f
33 changed files with 964 additions and 849 deletions
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		description: string;
+		confirmText?: string;
+		cancelText?: string;
+		variant?: 'default' | 'destructive';
+		icon?: Component;
+		onConfirm: () => void;
+		onCancel: () => void;
+		onKeydown?: (event: KeyboardEvent) => void;
+	}
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		confirmText = 'Confirm',
+		cancelText = 'Cancel',
+		variant = 'default',
+		icon,
+		onConfirm,
+		onCancel,
+		onKeydown
+	}: Props = $props();
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			onConfirm();
+		}
+		onKeydown?.(event);
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			onCancel();
+		}
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content onkeydown={handleKeydown}>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				{#if icon}
+					{@const IconComponent = icon}
+					<IconComponent class="h-5 w-5 {variant === 'destructive' ? 'text-destructive' : ''}" />
+				{/if}
+				{title}
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				{description}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={onCancel}>{cancelText}</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={onConfirm}
+				class={variant === 'destructive' ? 'bg-destructive text-white hover:bg-destructive/80' : ''}
+			>
+				{confirmText}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>