fix: address all code review findings

- Extract shared permission logic into boardPermissions.ts utility
- Fix DnD drag revert: add dirty flag to prevent  overwrite
- Wrap OAuth group sync in Prisma transaction (N+1 fix)
- Add empty widgetIds validation in widget reorder API
- Add invalidateAll() after guest toggle PATCH
- Replace console.error with user-visible error banners
- Extract WidgetCreationForm component (DraggableSection was 448 lines)
- Remove unused boardId prop from DraggableSection
- Always include OAuth state parameter + validate in callback
- Clean up copyLink timer on component destroy
- Add type-specific widget config validation in addWidget action

src/lib/components/board/BoardAccessControl.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { TargetType, PermissionLevel } from '$lib/utils/constants.js';
-
-	interface PermissionRecord {
-		id: string;
-		entityType: string;
-		entityId: string;
-		targetType: string;
-		targetId: string;
-		level: string;
-		createdAt: string;
-	}
-
-	interface SelectOption {
-		id: string;
-		name: string;
-	}
+	import {
+		loadBoardPermissions,
+		grantBoardPermission,
+		revokeBoardPermission,
+		getTargetName as resolveTargetName,
+		type PermissionRecord,
+		type SelectOption
+	} from '$lib/utils/boardPermissions.js';
 
 	interface Props {
 		boardId: string;
@@ -50,15 +43,9 @@
 		loading = true;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`);
-			const json = await res.json();
-			if (json.success) {
-				permissions = json.data;
-			} else {
-				errorMessage = json.error ?? 'Failed to load permissions';
-			}
-		} catch {
-			errorMessage = 'Network error';
+			permissions = await loadBoardPermissions(boardId);
+		} catch (err) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
 		} finally {
 			loading = false;
 		}
@@ -68,53 +55,27 @@
 		if (!selectedTargetId) return;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: selectedTargetType,
-					targetId: selectedTargetId,
-					level: selectedLevel
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
-				selectedTargetId = '';
-				searchQuery = '';
-				await loadPermissions();
-			} else {
-				errorMessage = json.error ?? 'Failed to grant permission';
-			}
-		} catch {
-			errorMessage = 'Network error';
+			await grantBoardPermission(boardId, selectedTargetType, selectedTargetId, selectedLevel);
+			selectedTargetId = '';
+			searchQuery = '';
+			await loadPermissions();
+		} catch (err) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
 		}
 	}
 
 	async function handleRevoke(perm: PermissionRecord) {
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
-				method: 'DELETE',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: perm.targetType,
-					targetId: perm.targetId
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
-				await loadPermissions();
-			} else {
-				errorMessage = json.error ?? 'Failed to revoke permission';
-			}
-		} catch {
-			errorMessage = 'Network error';
+			await revokeBoardPermission(boardId, perm.targetType, perm.targetId);
+			await loadPermissions();
+		} catch (err) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
 		}
 	}
 
 	function getTargetName(targetType: string, targetId: string): string {
-		const list = targetType === TargetType.USER ? users : groups;
-		return list.find((item) => item.id === targetId)?.name ?? targetId;
+		return resolveTargetName(targetType, targetId, users, groups);
 	}
 
 	function getLevelLabel(level: string): string {

src/lib/components/board/BoardShareDialog.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { TargetType, PermissionLevel } from '$lib/utils/constants.js';
-
-	interface PermissionRecord {
-		id: string;
-		entityType: string;
-		entityId: string;
-		targetType: string;
-		targetId: string;
-		level: string;
-		createdAt: string;
-	}
-
-	interface SelectOption {
-		id: string;
-		name: string;
-	}
+	import {
+		loadBoardPermissions,
+		grantBoardPermission,
+		revokeBoardPermission,
+		getTargetName as resolveTargetName,
+		type PermissionRecord,
+		type SelectOption
+	} from '$lib/utils/boardPermissions.js';
 
 	interface Props {
 		boardId: string;
@@ -41,6 +34,7 @@
 	let loading = $state(true);
 	let errorMessage = $state('');
 	let copySuccess = $state(false);
+	let copyTimerId = $state<ReturnType<typeof setTimeout> | null>(null);
 
 	let selectedTargetType = $state<string>(TargetType.USER);
 	let selectedTargetId = $state('');
@@ -63,15 +57,9 @@
 		loading = true;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`);
-			const json = await res.json();
-			if (json.success) {
-				permissions = json.data;
-			} else {
-				errorMessage = json.error ?? 'Failed to load permissions';
-			}
-		} catch {
-			errorMessage = 'Network error';
+			permissions = await loadBoardPermissions(boardId);
+		} catch (err) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
 		} finally {
 			loading = false;
 		}
@@ -81,53 +69,27 @@
 		if (!selectedTargetId) return;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: selectedTargetType,
-					targetId: selectedTargetId,
-					level: selectedLevel
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
-				selectedTargetId = '';
-				searchQuery = '';
-				await loadPermissions();
-			} else {
-				errorMessage = json.error ?? 'Failed to grant permission';
-			}
-		} catch {
-			errorMessage = 'Network error';
+			await grantBoardPermission(boardId, selectedTargetType, selectedTargetId, selectedLevel);
+			selectedTargetId = '';
+			searchQuery = '';
+			await loadPermissions();
+		} catch (err) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
 		}
 	}
 
 	async function handleRevoke(perm: PermissionRecord) {
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
-				method: 'DELETE',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: perm.targetType,
-					targetId: perm.targetId
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
-				await loadPermissions();
-			} else {
-				errorMessage = json.error ?? 'Failed to revoke permission';
-			}
-		} catch {
-			errorMessage = 'Network error';
+			await revokeBoardPermission(boardId, perm.targetType, perm.targetId);
+			await loadPermissions();
+		} catch (err) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
 		}
 	}
 
 	function getTargetName(targetType: string, targetId: string): string {
-		const list = targetType === TargetType.USER ? users : groups;
-		return list.find((item) => item.id === targetId)?.name ?? targetId;
+		return resolveTargetName(targetType, targetId, users, groups);
 	}
 
 	function getLevelLabel(level: string): string {
@@ -148,8 +110,12 @@
 			const url = `${window.location.origin}/boards/${boardId}`;
 			await navigator.clipboard.writeText(url);
 			copySuccess = true;
-			setTimeout(() => {
+			if (copyTimerId !== null) {
+				clearTimeout(copyTimerId);
+			}
+			copyTimerId = setTimeout(() => {
 				copySuccess = false;
+				copyTimerId = null;
 			}, 2000);
 		} catch {
 			// Fallback: ignore if clipboard API not available
@@ -168,9 +134,14 @@
 		}
 	}
 
-	// Load permissions on mount
+	// Load permissions on mount; clean up copy timer on destroy
 	$effect(() => {
 		loadPermissions();
+		return () => {
+			if (copyTimerId !== null) {
+				clearTimeout(copyTimerId);
+			}
+		};
 	});
 </script>
 

src/lib/components/board/DraggableBoard.svelte

@@ -53,19 +53,25 @@
 	}: Props = $props();
 
 	let sections = $state<SectionData[]>([...initialSections]);
+	let dirty = $state(false);
+	let errorMessage = $state('');
 
-	// Keep local state in sync when parent data changes
+	// Keep local state in sync when parent data changes (skip during drag)
 	$effect(() => {
-		sections = [...initialSections];
+		if (!dirty) {
+			sections = [...initialSections];
+		}
 	});
 
 	const flipDurationMs = 200;
 
 	function handleConsider(e: CustomEvent<{ items: SectionData[] }>) {
+		dirty = true;
 		sections = e.detail.items;
 	}
 
 	async function handleFinalize(e: CustomEvent<{ items: SectionData[] }>) {
+		dirty = true;
 		sections = e.detail.items;
 		const sectionIds = sections.map((s) => s.id);
 
@@ -76,12 +82,15 @@
 				body: JSON.stringify({ sectionIds })
 			});
 		} catch (err) {
-			console.error('Failed to persist section reorder:', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to persist section reorder';
+		} finally {
+			dirty = false;
 		}
 	}
 
 	async function handleWidgetsUpdate(sectionId: string, widgets: WidgetData[]) {
 		// Update local state
+		dirty = true;
 		sections = sections.map((s) => (s.id === sectionId ? { ...s, widgets } : s));
 
 		const widgetIds = widgets.map((w) => w.id);
@@ -93,11 +102,17 @@
 				body: JSON.stringify({ widgetIds })
 			});
 		} catch (err) {
-			console.error('Failed to persist widget reorder:', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to persist widget reorder';
+		} finally {
+			dirty = false;
 		}
 	}
 </script>
 
+{#if errorMessage}
+	<p class="mb-2 text-sm text-destructive">{errorMessage}</p>
+{/if}
+
 {#if sections.length === 0}
 	<div class="rounded-xl border border-border bg-card/50 p-8 text-center">
 		<p class="text-muted-foreground">{$t('board.no_sections')}</p>
@@ -113,7 +128,6 @@
 			<div>
 				<DraggableSection
 					{section}
-					{boardId}
 					{apps}
 					onWidgetsUpdate={handleWidgetsUpdate}
 					{addWidgetSectionId}

src/lib/components/section/DraggableSection.svelte

@@ -2,6 +2,7 @@
 	import { t } from 'svelte-i18n';
 	import { dndzone } from 'svelte-dnd-action';
 	import DraggableWidget from '$lib/components/widget/DraggableWidget.svelte';
+	import WidgetCreationForm from '$lib/components/widget/WidgetCreationForm.svelte';
 
 	interface WidgetData {
 		id: string;
@@ -32,7 +33,6 @@
 
 	interface Props {
 		section: SectionData;
-		boardId: string;
 		apps: Array<{ id: string; name: string }>;
 		onWidgetsUpdate: (sectionId: string, widgets: WidgetData[]) => void;
 		addWidgetSectionId: string | null;
@@ -44,7 +44,6 @@
 
 	let {
 		section,
-		boardId: _boardId = '',
 		apps,
 		onWidgetsUpdate,
 		addWidgetSectionId,
@@ -54,108 +53,28 @@
 		onDeleteWidget
 	}: Props = $props();
 
-	// boardId reserved for future per-section API calls
-	void _boardId;
-
 	let widgets = $state<WidgetData[]>([...section.widgets]);
+	let dirty = $state(false);
 
-	// Keep local state in sync when parent data changes
+	// Keep local state in sync when parent data changes (skip during drag)
 	$effect(() => {
-		widgets = [...section.widgets];
+		if (!dirty) {
+			widgets = [...section.widgets];
+		}
 	});
 
 	const flipDurationMs = 200;
 
 	function handleConsider(e: CustomEvent<{ items: WidgetData[] }>) {
+		dirty = true;
 		widgets = e.detail.items;
 	}
 
 	function handleFinalize(e: CustomEvent<{ items: WidgetData[] }>) {
+		dirty = true;
 		widgets = e.detail.items;
 		onWidgetsUpdate(section.id, widgets);
-	}
-
-	// Widget form state
-	let selectedWidgetType = $state('app');
-	let selectedAppId = $state('');
-
-	// Bookmark fields
-	let bookmarkUrl = $state('');
-	let bookmarkLabel = $state('');
-	let bookmarkIcon = $state('');
-	let bookmarkDescription = $state('');
-
-	// Note fields
-	let noteContent = $state('');
-	let noteFormat = $state<'markdown' | 'text'>('markdown');
-
-	// Embed fields
-	let embedUrl = $state('');
-	let embedHeight = $state(300);
-
-	// Status fields
-	let statusLabel = $state('');
-	let statusAppIds = $state<string[]>([]);
-
-	function resetForm() {
-		selectedWidgetType = 'app';
-		selectedAppId = '';
-		bookmarkUrl = '';
-		bookmarkLabel = '';
-		bookmarkIcon = '';
-		bookmarkDescription = '';
-		noteContent = '';
-		noteFormat = 'markdown';
-		embedUrl = '';
-		embedHeight = 300;
-		statusLabel = '';
-		statusAppIds = [];
-	}
-
-	function handleSubmitWidget() {
-		let widgetData: Record<string, unknown> = { type: selectedWidgetType };
-
-		switch (selectedWidgetType) {
-			case 'app':
-				if (!selectedAppId) return;
-				widgetData.appId = selectedAppId;
-				break;
-			case 'bookmark':
-				if (!bookmarkUrl || !bookmarkLabel) return;
-				widgetData.url = bookmarkUrl;
-				widgetData.label = bookmarkLabel;
-				if (bookmarkIcon) widgetData.icon = bookmarkIcon;
-				if (bookmarkDescription) widgetData.description = bookmarkDescription;
-				break;
-			case 'note':
-				if (!noteContent) return;
-				widgetData.content = noteContent;
-				widgetData.format = noteFormat;
-				break;
-			case 'embed':
-				if (!embedUrl) return;
-				widgetData.url = embedUrl;
-				widgetData.height = embedHeight;
-				break;
-			case 'status':
-				if (statusAppIds.length === 0) return;
-				widgetData.appIds = statusAppIds;
-				if (statusLabel) widgetData.label = statusLabel;
-				break;
-			default:
-				return;
-		}
-
-		onAddWidget(section.id, JSON.stringify(widgetData));
-		resetForm();
-	}
-
-	function toggleStatusApp(appId: string) {
-		if (statusAppIds.includes(appId)) {
-			statusAppIds = statusAppIds.filter((id) => id !== appId);
-		} else {
-			statusAppIds = [...statusAppIds, appId];
-		}
+		dirty = false;
 	}
 
 	function getWidgetLabel(widget: WidgetData): string {
@@ -227,181 +146,11 @@
 	</div>
 
 	{#if addWidgetSectionId === section.id}
-		<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
-			<!-- Widget Type Selector -->
-			<div class="mb-3">
-				<label for="widget-type-{section.id}" class="mb-1 block text-sm font-medium text-foreground">
-					Widget Type
-				</label>
-				<select
-					id="widget-type-{section.id}"
-					bind:value={selectedWidgetType}
-					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-				>
-					<option value="app">App</option>
-					<option value="bookmark">Bookmark</option>
-					<option value="note">Note</option>
-					<option value="embed">Embed</option>
-					<option value="status">Status</option>
-				</select>
-			</div>
-
-			<!-- Type-specific config forms -->
-			{#if selectedWidgetType === 'app'}
-				<div>
-					<label for="widget-app-{section.id}" class="mb-1 block text-sm font-medium text-foreground">
-						{$t('widget.select_app')}
-					</label>
-					<select
-						id="widget-app-{section.id}"
-						bind:value={selectedAppId}
-						class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-					>
-						<option value="">{$t('widget.choose_app')}</option>
-						{#each apps as app (app.id)}
-							<option value={app.id}>{app.name}</option>
-						{/each}
-					</select>
-				</div>
-			{:else if selectedWidgetType === 'bookmark'}
-				<div class="grid gap-3 sm:grid-cols-2">
-					<div>
-						<label for="bm-url-{section.id}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
-						<input
-							id="bm-url-{section.id}"
-							type="url"
-							bind:value={bookmarkUrl}
-							placeholder="https://example.com"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
-						/>
-					</div>
-					<div>
-						<label for="bm-label-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
-						<input
-							id="bm-label-{section.id}"
-							type="text"
-							bind:value={bookmarkLabel}
-							placeholder="My Bookmark"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
-						/>
-					</div>
-					<div>
-						<label for="bm-icon-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
-						<input
-							id="bm-icon-{section.id}"
-							type="text"
-							bind:value={bookmarkIcon}
-							placeholder="e.g. an emoji or icon name"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-					<div>
-						<label for="bm-desc-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
-						<input
-							id="bm-desc-{section.id}"
-							type="text"
-							bind:value={bookmarkDescription}
-							placeholder="A short description"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-				</div>
-			{:else if selectedWidgetType === 'note'}
-				<div class="space-y-3">
-					<div>
-						<label for="note-format-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Format</label>
-						<select
-							id="note-format-{section.id}"
-							bind:value={noteFormat}
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						>
-							<option value="markdown">Markdown</option>
-							<option value="text">Plain Text</option>
-						</select>
-					</div>
-					<div>
-						<label for="note-content-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
-						<textarea
-							id="note-content-{section.id}"
-							bind:value={noteContent}
-							rows="4"
-							placeholder="Write your note here..."
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
-						></textarea>
-					</div>
-				</div>
-			{:else if selectedWidgetType === 'embed'}
-				<div class="grid gap-3 sm:grid-cols-2">
-					<div class="sm:col-span-2">
-						<label for="embed-url-{section.id}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
-						<input
-							id="embed-url-{section.id}"
-							type="url"
-							bind:value={embedUrl}
-							placeholder="https://example.com/embed"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
-						/>
-					</div>
-					<div>
-						<label for="embed-height-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
-						<input
-							id="embed-height-{section.id}"
-							type="number"
-							bind:value={embedHeight}
-							min="100"
-							max="2000"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-				</div>
-			{:else if selectedWidgetType === 'status'}
-				<div class="space-y-3">
-					<div>
-						<label for="status-label-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
-						<input
-							id="status-label-{section.id}"
-							type="text"
-							bind:value={statusLabel}
-							placeholder="e.g. Production Services"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-					<div>
-						<span class="mb-1 block text-sm font-medium text-foreground">Select Apps</span>
-						<div class="max-h-40 space-y-1 overflow-y-auto rounded-lg border border-input bg-background p-2">
-							{#each apps as app (app.id)}
-								<label class="flex items-center gap-2 rounded px-2 py-1 text-sm text-foreground hover:bg-accent">
-									<input
-										type="checkbox"
-										checked={statusAppIds.includes(app.id)}
-										onchange={() => toggleStatusApp(app.id)}
-										class="h-4 w-4 rounded border-input accent-primary"
-									/>
-									{app.name}
-								</label>
-							{/each}
-						</div>
-						{#if statusAppIds.length > 0}
-							<p class="mt-1 text-xs text-muted-foreground">{statusAppIds.length} app(s) selected</p>
-						{/if}
-					</div>
-				</div>
-			{/if}
-
-			<div class="mt-3">
-				<button
-					type="button"
-					onclick={handleSubmitWidget}
-					class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-				>
-					{$t('common.add')}
-				</button>
-			</div>
-		</div>
+		<WidgetCreationForm
+			sectionId={section.id}
+			{apps}
+			onSubmit={onAddWidget}
+		/>
 	{/if}
 
 	<!-- Widgets drop zone -->

src/lib/components/widget/WidgetCreationForm.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import { t } from 'svelte-i18n';
+
+	interface Props {
+		sectionId: string;
+		apps: Array<{ id: string; name: string }>;
+		onSubmit: (sectionId: string, widgetData: string) => void;
+	}
+
+	let { sectionId, apps, onSubmit }: Props = $props();
+
+	// Widget form state
+	let selectedWidgetType = $state('app');
+	let selectedAppId = $state('');
+
+	// Bookmark fields
+	let bookmarkUrl = $state('');
+	let bookmarkLabel = $state('');
+	let bookmarkIcon = $state('');
+	let bookmarkDescription = $state('');
+
+	// Note fields
+	let noteContent = $state('');
+	let noteFormat = $state<'markdown' | 'text'>('markdown');
+
+	// Embed fields
+	let embedUrl = $state('');
+	let embedHeight = $state(300);
+
+	// Status fields
+	let statusLabel = $state('');
+	let statusAppIds = $state<string[]>([]);
+
+	function resetForm() {
+		selectedWidgetType = 'app';
+		selectedAppId = '';
+		bookmarkUrl = '';
+		bookmarkLabel = '';
+		bookmarkIcon = '';
+		bookmarkDescription = '';
+		noteContent = '';
+		noteFormat = 'markdown';
+		embedUrl = '';
+		embedHeight = 300;
+		statusLabel = '';
+		statusAppIds = [];
+	}
+
+	function handleSubmitWidget() {
+		let widgetData: Record<string, unknown> = { type: selectedWidgetType };
+
+		switch (selectedWidgetType) {
+			case 'app':
+				if (!selectedAppId) return;
+				widgetData.appId = selectedAppId;
+				break;
+			case 'bookmark':
+				if (!bookmarkUrl || !bookmarkLabel) return;
+				widgetData.url = bookmarkUrl;
+				widgetData.label = bookmarkLabel;
+				if (bookmarkIcon) widgetData.icon = bookmarkIcon;
+				if (bookmarkDescription) widgetData.description = bookmarkDescription;
+				break;
+			case 'note':
+				if (!noteContent) return;
+				widgetData.content = noteContent;
+				widgetData.format = noteFormat;
+				break;
+			case 'embed':
+				if (!embedUrl) return;
+				widgetData.url = embedUrl;
+				widgetData.height = embedHeight;
+				break;
+			case 'status':
+				if (statusAppIds.length === 0) return;
+				widgetData.appIds = statusAppIds;
+				if (statusLabel) widgetData.label = statusLabel;
+				break;
+			default:
+				return;
+		}
+
+		onSubmit(sectionId, JSON.stringify(widgetData));
+		resetForm();
+	}
+
+	function toggleStatusApp(appId: string) {
+		if (statusAppIds.includes(appId)) {
+			statusAppIds = statusAppIds.filter((id) => id !== appId);
+		} else {
+			statusAppIds = [...statusAppIds, appId];
+		}
+	}
+</script>
+
+<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
+	<!-- Widget Type Selector -->
+	<div class="mb-3">
+		<label for="widget-type-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
+			Widget Type
+		</label>
+		<select
+			id="widget-type-{sectionId}"
+			bind:value={selectedWidgetType}
+			class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+		>
+			<option value="app">App</option>
+			<option value="bookmark">Bookmark</option>
+			<option value="note">Note</option>
+			<option value="embed">Embed</option>
+			<option value="status">Status</option>
+		</select>
+	</div>
+
+	<!-- Type-specific config forms -->
+	{#if selectedWidgetType === 'app'}
+		<div>
+			<label for="widget-app-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
+				{$t('widget.select_app')}
+			</label>
+			<select
+				id="widget-app-{sectionId}"
+				bind:value={selectedAppId}
+				class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+			>
+				<option value="">{$t('widget.choose_app')}</option>
+				{#each apps as app (app.id)}
+					<option value={app.id}>{app.name}</option>
+				{/each}
+			</select>
+		</div>
+	{:else if selectedWidgetType === 'bookmark'}
+		<div class="grid gap-3 sm:grid-cols-2">
+			<div>
+				<label for="bm-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
+				<input
+					id="bm-url-{sectionId}"
+					type="url"
+					bind:value={bookmarkUrl}
+					placeholder="https://example.com"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				/>
+			</div>
+			<div>
+				<label for="bm-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
+				<input
+					id="bm-label-{sectionId}"
+					type="text"
+					bind:value={bookmarkLabel}
+					placeholder="My Bookmark"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				/>
+			</div>
+			<div>
+				<label for="bm-icon-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
+				<input
+					id="bm-icon-{sectionId}"
+					type="text"
+					bind:value={bookmarkIcon}
+					placeholder="e.g. an emoji or icon name"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+			<div>
+				<label for="bm-desc-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
+				<input
+					id="bm-desc-{sectionId}"
+					type="text"
+					bind:value={bookmarkDescription}
+					placeholder="A short description"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+		</div>
+	{:else if selectedWidgetType === 'note'}
+		<div class="space-y-3">
+			<div>
+				<label for="note-format-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Format</label>
+				<select
+					id="note-format-{sectionId}"
+					bind:value={noteFormat}
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				>
+					<option value="markdown">Markdown</option>
+					<option value="text">Plain Text</option>
+				</select>
+			</div>
+			<div>
+				<label for="note-content-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
+				<textarea
+					id="note-content-{sectionId}"
+					bind:value={noteContent}
+					rows="4"
+					placeholder="Write your note here..."
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				></textarea>
+			</div>
+		</div>
+	{:else if selectedWidgetType === 'embed'}
+		<div class="grid gap-3 sm:grid-cols-2">
+			<div class="sm:col-span-2">
+				<label for="embed-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
+				<input
+					id="embed-url-{sectionId}"
+					type="url"
+					bind:value={embedUrl}
+					placeholder="https://example.com/embed"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				/>
+			</div>
+			<div>
+				<label for="embed-height-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
+				<input
+					id="embed-height-{sectionId}"
+					type="number"
+					bind:value={embedHeight}
+					min="100"
+					max="2000"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+		</div>
+	{:else if selectedWidgetType === 'status'}
+		<div class="space-y-3">
+			<div>
+				<label for="status-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
+				<input
+					id="status-label-{sectionId}"
+					type="text"
+					bind:value={statusLabel}
+					placeholder="e.g. Production Services"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+			<div>
+				<span class="mb-1 block text-sm font-medium text-foreground">Select Apps</span>
+				<div class="max-h-40 space-y-1 overflow-y-auto rounded-lg border border-input bg-background p-2">
+					{#each apps as app (app.id)}
+						<label class="flex items-center gap-2 rounded px-2 py-1 text-sm text-foreground hover:bg-accent">
+							<input
+								type="checkbox"
+								checked={statusAppIds.includes(app.id)}
+								onchange={() => toggleStatusApp(app.id)}
+								class="h-4 w-4 rounded border-input accent-primary"
+							/>
+							{app.name}
+						</label>
+					{/each}
+				</div>
+				{#if statusAppIds.length > 0}
+					<p class="mt-1 text-xs text-muted-foreground">{statusAppIds.length} app(s) selected</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="mt-3">
+		<button
+			type="button"
+			onclick={handleSubmitWidget}
+			class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+		>
+			{$t('common.add')}
+		</button>
+	</div>
+</div>