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/layout/Sidebar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { ui } from '$lib/stores/ui.svelte.js';
+	import { keyboard } from '$lib/stores/keyboard.svelte.js';
 	import { page } from '$app/stores';
 	import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte';
 
@@ -129,6 +130,28 @@
 				</svg>
 				{#if !collapsed}<span>{$t('nav.apps')}</span>{/if}
 			</a>
+
+			<a
+				href="/status"
+				class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/status')
+					? 'bg-sidebar-accent text-sidebar-accent-foreground'
+					: 'text-sidebar-foreground hover:bg-sidebar-accent/50'}"
+				title={collapsed ? 'Status Page' : undefined}
+			>
+				<svg
+					class="h-4 w-4 shrink-0"
+					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"
+				>
+					<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+				</svg>
+				{#if !collapsed}<span>Status</span>{/if}
+			</a>
 		</div>
 
 		<!-- Board List -->
@@ -207,9 +230,30 @@
 		{/if}
 	</nav>
 
-	<!-- Collapse Toggle (desktop only) -->
+	<!-- Keyboard Shortcuts Hint + Collapse Toggle -->
 	{#if !ui.isMobile}
-		<div class="border-t border-sidebar-border p-2">
+		<div class="border-t border-sidebar-border p-2 flex items-center {collapsed ? 'flex-col gap-1' : 'gap-1'}">
+			<button
+				type="button"
+				onclick={() => keyboard.toggleOverlay()}
+				class="flex items-center justify-center rounded-md p-2 text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+				title="Keyboard Shortcuts (?)"
+			>
+				<svg
+					class="h-4 w-4"
+					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"
+				>
+					<circle cx="12" cy="12" r="10" />
+					<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+					<line x1="12" y1="17" x2="12.01" y2="17" />
+				</svg>
+			</button>
 			<button
 				type="button"
 				onclick={() => ui.toggleSidebar()}