feat: phase 2 widgets — registry, fetchers, clock, config dialog

Backend: internal/widget registry (type metadata + Fetcher), Pi-hole
v5 / AdGuard / Immich fetchers, /api/widgets/types + /api/widgets/:id/data
with 30s TTL cache (failures cached too), kind+config on item create/patch.
Config secrets are never logged or echoed in errors.

Frontend: WidgetContent host maps config.type to a component, polls
/data every 30s for server-backed types; clock renders client-side.
Generic WidgetDialog builds its form from the registry's field list.
Widget tiles are sortable items in both renderers.

Generated with [Devin](https://devin.ai)

Authored By: TDvorak <[email protected]>
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/frontend/src/App.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
-import { Moon, Plus, Settings, Sun } from "lucide-react";
+import { LayoutGrid, Moon, Plus, Settings, Sun } from "lucide-react";
 import { BoardProvider, useBoard } from "@/board/store";
 import { Board } from "@/board/Board";
 import { ServiceDialog } from "@/components/ServiceDialog";
+import { WidgetDialog } from "@/components/WidgetDialog";
 import { SettingsDialog } from "@/components/SettingsDialog";
 import { Button } from "@/components/ui/button";
 import type { Item } from "@/types";
@@ -19,8 +20,15 @@ function Shell() {
 	const board = useBoard();
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [svcOpen, setSvcOpen] = useState(false);
+	const [wdgOpen, setWdgOpen] = useState(false);
 	const [editing, setEditing] = useState<Item | undefined>();
 
+	function openEditor(it: Item) {
+		setEditing(it);
+		if (it.kind === "widget") setWdgOpen(true);
+		else setSvcOpen(true);
+	}
+
 	return (
 		<div className="font-sans">
 			<header className="sticky top-0 z-10 flex items-center gap-3.5 border-b border-border bg-bg/80 px-7 py-3.5 backdrop-blur-md">
@@ -46,6 +54,13 @@ function Shell() {
 					>
 						{board.theme === "dark" ? <Moon size={15} strokeWidth={1.8} /> : <Sun size={15} strokeWidth={1.8} />}
 					</Button>
+					<Button
+						variant="outline" aria-label="Add widget"
+						onClick={() => { setEditing(undefined); setWdgOpen(true); }}
+					>
+						<LayoutGrid size={13} strokeWidth={2} />
+						Widget
+					</Button>
 					<Button onClick={() => { setEditing(undefined); setSvcOpen(true); }}>
 						<Plus size={13} strokeWidth={2.2} />
 						Add service
@@ -53,9 +68,10 @@ function Shell() {
 				</div>
 			</header>
 
-			<Board onEditItem={(it) => { setEditing(it); setSvcOpen(true); }} />
+			<Board onEditItem={openEditor} />
 
-			<ServiceDialog open={svcOpen} onOpenChange={setSvcOpen} item={editing} />
+			<ServiceDialog open={svcOpen} onOpenChange={setSvcOpen} item={editing?.kind === "service" ? editing : undefined} />
+			<WidgetDialog open={wdgOpen} onOpenChange={setWdgOpen} item={editing?.kind === "widget" ? editing : undefined} />
 			<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
 		</div>
 	);