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/widget/WidgetGrid.svelte

@@ -2,6 +2,7 @@
 	import { t } from 'svelte-i18n';
 	import WidgetRenderer from './WidgetRenderer.svelte';
 	import WidgetContainer from './WidgetContainer.svelte';
+	import type { CardSize } from '$lib/utils/constants.js';
 
 	interface AppData {
 		id: string;
@@ -25,23 +26,47 @@
 	interface Props {
 		widgets: WidgetData[];
 		allApps?: AppData[];
+		cardSize?: CardSize;
 	}
 
-	let { widgets, allApps = [] }: Props = $props();
+	let { widgets, allApps = [], cardSize = 'medium' }: Props = $props();
 
 	// Widgets that should span full width
-	const fullWidthTypes = new Set(['note', 'embed', 'status']);
+	const fullWidthTypes = new Set(['note', 'embed', 'status', 'system_stats', 'rss', 'calendar', 'markdown', 'camera']);
+
+	// Grid column classes based on card size
+	const gridClass = $derived.by(() => {
+		switch (cardSize) {
+			case 'compact':
+				return 'grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6';
+			case 'large':
+				return 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3';
+			default:
+				return 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4';
+		}
+	});
+
+	const fullWidthClass = $derived.by(() => {
+		switch (cardSize) {
+			case 'compact':
+				return 'col-span-2 sm:col-span-3 md:col-span-4 lg:col-span-6';
+			case 'large':
+				return 'col-span-1 sm:col-span-2 lg:col-span-3';
+			default:
+				return 'col-span-2 sm:col-span-3 lg:col-span-4';
+		}
+	});
 </script>
 
 {#if widgets.length === 0}
 	<p class="text-sm text-muted-foreground">{$t('widget.no_widgets')}</p>
 {:else}
-	<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+	<div class={gridClass}>
 		{#each widgets as widget (widget.id)}
 			{@const isFullWidth = fullWidthTypes.has(widget.type)}
-			<div class={isFullWidth ? 'col-span-2 sm:col-span-3 lg:col-span-4' : ''}>
+			<div class={isFullWidth ? fullWidthClass : ''}>
 				<WidgetContainer>
-					<WidgetRenderer {widget} {allApps} />
+					<WidgetRenderer {widget} {allApps} {cardSize} />
 				</WidgetContainer>
 			</div>
 		{/each}