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/section/DraggableSection.svelte

@@ -28,6 +28,7 @@
 		icon: string | null;
 		order: number;
 		isExpandedByDefault: boolean;
+		cardSize?: string | null;
 		widgets: WidgetData[];
 	}
 
@@ -40,6 +41,7 @@
 		onDeleteSection: (sectionId: string) => void;
 		onAddWidget: (sectionId: string, widgetData: string) => void;
 		onDeleteWidget: (widgetId: string) => void;
+		onUpdateSection?: (sectionId: string, data: Record<string, unknown>) => void;
 	}
 
 	let {
@@ -50,9 +52,18 @@
 		onToggleAddWidget,
 		onDeleteSection,
 		onAddWidget,
-		onDeleteWidget
+		onDeleteWidget,
+		onUpdateSection
 	}: Props = $props();
 
+	const cardSizeOptions = ['compact', 'medium', 'large'] as const;
+
+	function handleCardSizeChange(event: Event) {
+		const select = event.target as HTMLSelectElement;
+		const value = select.value || null;
+		onUpdateSection?.(section.id, { cardSize: value });
+	}
+
 	let widgets = $state<WidgetData[]>([...section.widgets]);
 	let dirty = $state(false);
 
@@ -128,6 +139,17 @@
 			{/if}
 		</div>
 		<div class="flex items-center gap-2">
+			<!-- Card size selector -->
+			<select
+				onchange={handleCardSizeChange}
+				class="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground transition-colors focus:border-primary focus:outline-none"
+				title={$t('board.card_size') ?? 'Card size'}
+			>
+				<option value="" selected={!section.cardSize}>{$t('section.inherit_size') ?? 'Inherit'}</option>
+				{#each cardSizeOptions as size (size)}
+					<option value={size} selected={section.cardSize === size}>{size}</option>
+				{/each}
+			</select>
 			<button
 				type="button"
 				onclick={() => onToggleAddWidget(section.id)}

src/lib/components/section/Section.svelte

@@ -20,12 +20,15 @@
 		} | null;
 	}
 
+	import type { CardSize } from '$lib/utils/constants.js';
+
 	interface SectionData {
 		id: string;
 		title: string;
 		icon: string | null;
 		order: number;
 		isExpandedByDefault: boolean;
+		cardSize?: string | null;
 		widgets: WidgetData[];
 	}
 
@@ -42,9 +45,15 @@
 	interface Props {
 		section: SectionData;
 		allApps?: AppData[];
+		boardCardSize?: CardSize;
 	}
 
-	let { section, allApps = [] }: Props = $props();
+	let { section, allApps = [], boardCardSize = 'medium' }: Props = $props();
+
+	// Section-level cardSize overrides board-level
+	const effectiveCardSize = $derived<CardSize>(
+		(section.cardSize as CardSize) ?? boardCardSize
+	);
 
 	let expanded = $state(section.isExpandedByDefault);
 </script>
@@ -59,7 +68,7 @@
 
 	<SectionCollapsible {expanded}>
 		<div class="px-4 pb-4">
-			<WidgetGrid widgets={section.widgets} {allApps} />
+			<WidgetGrid widgets={section.widgets} {allApps} cardSize={effectiveCardSize} />
 		</div>
 	</SectionCollapsible>
 </div>