web-app-launcher/src/lib/components/widget/WidgetEditOverlay.svelte

<script lang="ts">
	import { t } from 'svelte-i18n';
	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
	import type { Snippet } from 'svelte';

	interface Props {
		widgetId: string;
		colSpan?: number;
		maxCols?: number;
		onEdit: (widgetId: string) => void;
		onDelete: (widgetId: string) => void;
		onResize?: (widgetId: string, delta: number) => void;
		children: Snippet;
	}

	let { widgetId, colSpan = 1, maxCols = 4, onEdit, onDelete, onResize, children }: Props = $props();

	let showDeleteConfirm = $state(false);
	let hovered = $state(false);
	let showSizePicker = $state(false);
	let previewSpan = $state<number | null>(null);

	function handleDelete() {
		onDelete(widgetId);
		showDeleteConfirm = false;
	}

	function handleSpanSelect(span: number) {
		if (!onResize) return;
		const delta = span - colSpan;
		if (delta !== 0) onResize(widgetId, delta);
		showSizePicker = false;
	}
</script>

<div
	class="group relative"
	role="group"
	onmouseenter={() => { hovered = true; }}
	onmouseleave={() => { hovered = false; showSizePicker = false; previewSpan = null; }}
>
	{@render children()}

	<!-- Overlay controls -->
	{#if hovered}
		<div class="absolute inset-0 z-10 rounded-xl bg-black/5 transition-opacity">
			<!-- Top-left: drag handle -->
			<div class="absolute left-1.5 top-1.5">
				<div class="cursor-grab rounded-md bg-card/90 p-1 text-muted-foreground shadow-sm backdrop-blur-sm" title="Drag to reorder">
					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<circle cx="9" cy="5" r="1" /><circle cx="15" cy="5" r="1" />
						<circle cx="9" cy="12" r="1" /><circle cx="15" cy="12" r="1" />
						<circle cx="9" cy="19" r="1" /><circle cx="15" cy="19" r="1" />
					</svg>
				</div>
			</div>

			<!-- Top-right: resize + edit + delete -->
			<div class="absolute right-1.5 top-1.5 flex items-center gap-1">
				<!-- Resize button -->
				{#if onResize}
					<button
						type="button"
						onclick={() => { showSizePicker = !showSizePicker; previewSpan = null; }}
						class="rounded-md bg-card/90 p-1.5 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors
							{showSizePicker ? 'bg-primary text-primary-foreground' : 'hover:bg-accent hover:text-foreground'}"
						title={$t('widget.resize') ?? 'Resize'}
					>
						<!-- Columns icon -->
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<rect x="3" y="3" width="18" height="18" rx="2" />
							<path d="M9 3v18" /><path d="M15 3v18" />
						</svg>
					</button>
				{/if}

				<!-- Edit button -->
				<button
					type="button"
					onclick={() => onEdit(widgetId)}
					class="rounded-md bg-card/90 p-1.5 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-primary hover:text-primary-foreground"
					title={$t('common.edit') ?? 'Edit'}
				>
					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
						<path d="m15 5 4 4" />
					</svg>
				</button>

				<!-- Delete button -->
				<button
					type="button"
					onclick={() => { showDeleteConfirm = true; }}
					class="rounded-md bg-card/90 p-1.5 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-destructive hover:text-destructive-foreground"
					title={$t('common.delete') ?? 'Delete'}
				>
					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
						<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
					</svg>
				</button>
			</div>

			<!-- Size picker popover -->
			{#if showSizePicker && onResize}
				<div class="absolute right-1.5 top-10 z-20 rounded-lg border border-border bg-card p-2 shadow-xl backdrop-blur-sm">
					<div class="mb-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
						{$t('widget.width') ?? 'Width'}
					</div>
					<div class="flex flex-col gap-1">
						{#each Array.from({ length: maxCols }, (_, i) => i + 1) as span}
							{@const isActive = span === colSpan}
							{@const isPreview = span === previewSpan}
							<button
								type="button"
								onclick={() => handleSpanSelect(span)}
								onmouseenter={() => { previewSpan = span; }}
								onmouseleave={() => { previewSpan = null; }}
								class="flex items-center gap-2 rounded-md px-2 py-1 text-left transition-colors
									{isActive
										? 'bg-primary/15 text-primary ring-1 ring-primary/30'
										: isPreview
											? 'bg-accent text-foreground'
											: 'text-foreground hover:bg-accent'}"
							>
								<!-- Visual block representation -->
								<div class="flex gap-px">
									{#each Array(maxCols) as _, ci}
										<div
											class="h-2.5 w-3 rounded-[2px] transition-colors
												{ci < span
													? isActive ? 'bg-primary' : 'bg-foreground/50'
													: 'bg-border'}"
										></div>
									{/each}
								</div>
								<span class="text-xs tabular-nums">
									{span === maxCols ? ($t('widget.full_width') ?? 'Full') : `${span}/${maxCols}`}
								</span>
							</button>
						{/each}
					</div>
				</div>
			{/if}
		</div>
	{/if}
</div>

{#if showDeleteConfirm}
	<ConfirmDialog
		title={$t('widget.delete_title') ?? 'Delete Widget'}
		message={$t('widget.delete_confirm') ?? 'Are you sure you want to delete this widget? This action will take effect when you save.'}
		onConfirm={handleDelete}
		onCancel={() => { showDeleteConfirm = false; }}
	/>
{/if}