feat: Phases 4-7 — Full Feature Expansion (26 features)

Phase 4 — New Widget Types:
- Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown,
  Metric/Counter, Link Group, Camera/Stream widgets
- Backend services with caching for each data source
- Full creation form with dynamic config fields per type

Phase 5 — Visual & Styling Enhancements:
- Glassmorphism card style (solid/glass/outline)
- Board-level themes with per-board hue/saturation
- Animated SVG status rings replacing static dots
- Card size options (compact/medium/large)
- Custom CSS injection (admin + per-board, sanitized)
- Wallpaper backgrounds with blur/overlay/parallax

Phase 6 — Functional Features:
- Favorites bar with drag-and-drop reordering
- Recent apps tracking with privacy toggle
- Uptime dashboard page (/status, guest-accessible)
- Notifications system (Discord/Slack/Telegram/HTTP webhooks)
- App tags with filtering in board view
- Multi-URL app cards with expandable sub-links
- Personal API tokens with scoped permissions
- Audit log with retention and admin viewer

Phase 7 — Quality of Life:
- Onboarding wizard (5-step first-launch setup)
- App URL health preview with favicon/title detection
- Board templates (4 built-in + custom import/export)
- Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help)

212 files changed, 15641 insertions, 980 deletions.
Build, lint, type check, and 222 tests all pass.

src/lib/components/ui/EntityPicker.svelte

@@ -118,6 +118,7 @@
 
 	// Reset highlight when query changes
 	$effect(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 		query; // track
 		highlightIdx = 0;
 	});

src/lib/components/ui/KeyboardShortcutOverlay.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { keyboard } from '$lib/stores/keyboard.svelte.js';
+
+	interface ShortcutItem {
+		readonly keys: string;
+		readonly description: string;
+	}
+
+	interface ShortcutCategory {
+		readonly name: string;
+		readonly shortcuts: readonly ShortcutItem[];
+	}
+
+	const categories: readonly ShortcutCategory[] = [
+		{
+			name: 'Global',
+			shortcuts: [
+				{ keys: 'Ctrl+K / Cmd+K', description: 'Open search' },
+				{ keys: '?', description: 'Toggle keyboard shortcuts' },
+				{ keys: '1-9', description: 'Switch to board by index' },
+				{ keys: 'f', description: 'Toggle favorites bar' },
+				{ keys: 'Escape', description: 'Close dialogs / overlays' }
+			]
+		},
+		{
+			name: 'Board View',
+			shortcuts: [
+				{ keys: 'j', description: 'Navigate to next app' },
+				{ keys: 'k', description: 'Navigate to previous app' },
+				{ keys: 'Enter', description: 'Open selected app' },
+				{ keys: 'e', description: 'Toggle edit mode' }
+			]
+		}
+	] as const;
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			keyboard.closeOverlay();
+		}
+	}
+</script>
+
+{#if keyboard.overlayOpen}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-[90] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+		onclick={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && keyboard.closeOverlay()}
+	>
+		<div
+			class="mx-4 w-full max-w-xl rounded-2xl border border-border bg-card shadow-2xl"
+			role="dialog"
+			aria-label="Keyboard Shortcuts"
+		>
+			<!-- Header -->
+			<div class="flex items-center justify-between border-b border-border px-6 py-4">
+				<h2 class="text-lg font-semibold text-foreground">Keyboard Shortcuts</h2>
+				<button
+					type="button"
+					onclick={() => keyboard.closeOverlay()}
+					class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					aria-label="Close"
+				>
+					<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<line x1="18" y1="6" x2="6" y2="18" />
+						<line x1="6" y1="6" x2="18" y2="18" />
+					</svg>
+				</button>
+			</div>
+
+			<!-- Body -->
+			<div class="px-6 py-5">
+				<div class="grid gap-6 sm:grid-cols-2">
+					{#each categories as category (category.name)}
+						<div>
+							<h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+								{category.name}
+							</h3>
+							<div class="space-y-2">
+								{#each category.shortcuts as shortcut (shortcut.keys)}
+									<div class="flex items-center justify-between gap-4">
+										<span class="text-sm text-foreground">{shortcut.description}</span>
+										<div class="flex shrink-0 gap-1">
+											{#each shortcut.keys.split(' / ') as keyCombo (keyCombo)}
+												<kbd
+													class="inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground"
+												>
+													{keyCombo}
+												</kbd>
+											{/each}
+										</div>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Footer hint -->
+			<div class="border-t border-border px-6 py-3 text-center">
+				<p class="text-xs text-muted-foreground">
+					Shortcuts are disabled when typing in text fields
+				</p>
+			</div>
+		</div>
+	</div>
+{/if}