feat(inline-edit): add WYSIWYG inline dashboard editing mode

Replace the disconnected board edit page with inline editing directly on the board view. Toggle with Ctrl+E or the Edit button. Features: - Edit mode store with changeset accumulation and batch save - Floating toolbar (save, discard, add section, board settings, exit) - Widget hover overlays with edit/delete/drag controls - Type-specific widget config panels for all 14 widget types - Section inline editing (title, icon picker, delete) - "+" buttons for adding widgets and sections inline - Section-level drag-and-drop reordering via svelte-dnd-action - Batch save API endpoint (single Prisma transaction) - Board properties side panel with live theme/wallpaper preview - Modal widget type picker with search filtering - Icon picker component with visual grid and search - Confirmation dialog modal for all destructive actions - HTML format support for Note widget (in addition to markdown/text) - Full i18n support (en + ru) for all new UI strings - Legacy edit page banner linking to new inline mode
2026-04-03 00:01:29 +03:00
parent d8f89c65dc
commit a6b09aae9c
35 changed files with 3148 additions and 51 deletions
@@ -0,0 +1,85 @@
+<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;
+		onEdit: (widgetId: string) => void;
+		onDelete: (widgetId: string) => void;
+		children: Snippet;
+	}
+
+	let { widgetId, onEdit, onDelete, children }: Props = $props();
+
+	let showDeleteConfirm = $state(false);
+	let hovered = $state(false);
+
+	function handleDelete() {
+		onDelete(widgetId);
+		showDeleteConfirm = false;
+	}
+</script>
+
+<div
+	class="group relative"
+	role="group"
+	onmouseenter={() => { hovered = true; }}
+	onmouseleave={() => { hovered = false; }}
+>
+	{@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: edit + delete -->
+			<div class="absolute right-1.5 top-1.5 flex items-center gap-1">
+				<!-- 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>
+		</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}