feat: phase 1 MVP — sections, services, drag-drop, renderers

Backend: migration 0002 (sections/items/urls/settings), CRUD + fractional reorder, icon upload, settings, export/import, cached status pings. Handler tests cover reorder, URL scheme validation, settings round-trip. Frontend: shared board store over the generated client, dnd-kit layer (same-section, cross-section, section reorder persisted), URL chooser popover, add/edit service dialog, settings dialog, Bento + Cards renderers behind the shared seam, dark/light theme. Generated with [Devin](https://devin.ai) Authored By: TDvorak <[email protected]> Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-10-29 08:04:58 +00:00 · 2026-09-17 20:29:22 +02:00
1 parent b60821350a
commit 6004105038
@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from "react";
+import { Plus, Trash2, Upload, X } from "lucide-react";
+import { useBoard } from "@/board/store";
+import type { Item, UrlInput } from "@/types";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+// One dialog for both add and edit: item present = edit, absent = add.
+export function ServiceDialog({
+	open,
+	onOpenChange,
+	item,
+}: {
+	open: boolean;
+	onOpenChange: (o: boolean) => void;
+	item?: Item | undefined;
+}) {
+	const board = useBoard();
+	const editing = Boolean(item);
+
+	const [name, setName] = useState("");
+	const [icon, setIcon] = useState("");
+	const [urls, setUrls] = useState<UrlInput[]>([{ url: "", label: "local" }]);
+	const [sectionId, setSectionId] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [err, setErr] = useState("");
+	const fileRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		if (!open) return;
+		setErr("");
+		setName(item?.name ?? "");
+		setIcon(item?.icon ?? "");
+		setUrls(
+			item && item.urls.length > 0
+				? item.urls.map((u) => ({ url: u.url, label: u.label }))
+				: [{ url: "", label: "local" }],
+		);
+		setSectionId(item?.sectionId ?? board.sections[0]?.id ?? "");
+	}, [open, item, board.sections]);
+
+	const setUrl = (i: number, patch: Partial<UrlInput>) =>
+		setUrls((us) => us.map((u, j) => (j === i ? { ...u, ...patch } : u)));
+
+	async function submit() {
+		const cleanUrls = urls.filter((u) => u.url.trim() !== "");
+		if (!name.trim()) return setErr("Name is required"), undefined;
+		if (cleanUrls.some((u) => !/^https?:\/\/.+/.test(u.url))) {
+			return setErr("URLs must start with http:// or https://"), undefined;
+		}
+		setBusy(true);
+		try {
+			const file = fileRef.current?.files?.[0];
+			if (editing && item) {
+				await board.patchItem(item.id, { name: name.trim(), icon, urls: cleanUrls });
+				if (file) await board.uploadIcon(item.id, file);
+			} else {
+				let sid = sectionId;
+				if (!sid) {
+					// First service on an empty board — create the home section.
+					const sec = await board.addSection("Services");
+					if (!sec) throw new Error("could not create section");
+					sid = sec.id;
+				}
+				const created = await board.addItem({
+					sectionId: sid,
+					name: name.trim(),
+					icon,
+					urls: cleanUrls,
+				});
+				if (created && file) await board.uploadIcon(created.id, file);
+			}
+			onOpenChange(false);
+		} catch (e) {
+			setErr(e instanceof Error ? e.message : "save failed");
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	async function remove() {
+		if (!item) return;
+		setBusy(true);
+		await board.deleteItem(item.id);
+		setBusy(false);
+		onOpenChange(false);
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>{editing ? "Edit service" : "Add service"}</DialogTitle>
+					<DialogDescription>
+						{editing ? "Update name, icon, or launch URLs." : "Name it, give it an icon, add one or more URLs."}
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<div className="grid grid-cols-[1fr_150px] gap-3">
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="svc-name">Name</Label>
+							<Input id="svc-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Pi-hole" autoFocus />
+						</div>
+						{!editing && board.sections.length > 0 && (
+							<div className="flex flex-col gap-1.5">
+								<Label>Section</Label>
+								<Select value={sectionId} onValueChange={setSectionId}>
+									<SelectTrigger><SelectValue /></SelectTrigger>
+									<SelectContent>
+										{board.sections.map((s) => (
+											<SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</div>
+						)}
+					</div>
+
+					<div className="flex flex-col gap-1.5">
+						<Label>URLs</Label>
+						{urls.map((u, i) => (
+							<div key={i} className="flex gap-2">
+								<Input
+									value={u.url}
+									onChange={(e) => setUrl(i, { url: e.target.value })}
+									placeholder="https://…"
+									className="font-mono text-[12px]"
+								/>
+								<Input
+									value={u.label ?? ""}
+									onChange={(e) => setUrl(i, { label: e.target.value })}
+									placeholder="label"
+									className="w-[110px] shrink-0"
+									list="url-labels"
+								/>
+								<Button
+									type="button" variant="ghost" size="icon"
+									aria-label="Remove URL"
+									disabled={urls.length <= 1}
+									onClick={() => setUrls((us) => us.filter((_, j) => j !== i))}
+								>
+									<X size={13} />
+								</Button>
+							</div>
+						))}
+						<datalist id="url-labels">
+							<option value="local" /><option value="external" />
+						</datalist>
+						<Button
+							type="button" variant="outline" size="sm"
+							className="mt-1 w-fit"
+							onClick={() => setUrls((us) => [...us, { url: "", label: "" }])}
+						>
+							<Plus size={12} /> Add URL
+						</Button>
+					</div>
+
+					<div className="flex flex-col gap-1.5">
+						<Label htmlFor="svc-icon">Icon URL</Label>
+						<div className="flex gap-2">
+							<Input id="svc-icon" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder="https://…/icon.png" className="font-mono text-[12px]" />
+							<Button type="button" variant="outline" size="icon" aria-label="Upload icon file" onClick={() => fileRef.current?.click()}>
+								<Upload size={13} />
+							</Button>
+							<input
+								ref={fileRef} type="file" accept="image/*" className="hidden"
+								onChange={() => setErr("")}
+							/>
+						</div>
+						<p className="text-[11px] text-text-faint">URL or uploaded file; blank shows a letter tile.</p>
+					</div>
+
+					{err ? <p className="text-[12px] text-destructive">{err}</p> : null}
+				</div>
+
+				<DialogFooter className="items-center">
+					{editing ? (
+						<Button type="button" variant="destructive" size="sm" className="mr-auto" onClick={() => void remove()} disabled={busy}>
+							<Trash2 size={12} /> Delete
+						</Button>
+					) : null}
+					<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
+						Cancel
+					</Button>
+					<Button type="button" onClick={() => void submit()} disabled={busy}>
+						{busy ? "Saving…" : editing ? "Save" : "Add service"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
@@ -0,0 +1,95 @@
+import { useRef, useState } from "react";
+import { Download, Upload } from "lucide-react";
+import { useBoard } from "@/board/store";
+import { rendererLabels, rendererList } from "@/renderers";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
+	const board = useBoard();
+	const fileRef = useRef<HTMLInputElement>(null);
+	const [msg, setMsg] = useState("");
+
+	async function exportJson() {
+		const res = await fetch("/api/export");
+		if (!res.ok) return;
+		const blob = await res.blob();
+		const a = document.createElement("a");
+		a.href = URL.createObjectURL(blob);
+		a.download = "dash-export.json";
+		a.click();
+		URL.revokeObjectURL(a.href);
+	}
+
+	async function importJson(file: File) {
+		setMsg("");
+		const res = await fetch("/api/import", { method: "POST", body: file });
+		if (res.ok) {
+			location.reload(); // import replaces state; a reload re-syncs everything
+		} else {
+			setMsg("Import failed — not a Dash export?");
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-sm">
+				<DialogHeader>
+					<DialogTitle>Settings</DialogTitle>
+					<DialogDescription>Board layout, theme, and backup.</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-1.5">
+						<Label>Renderer</Label>
+						<Select value={board.renderer} onValueChange={(v) => {
+							if (v === "bento" || v === "cards") void board.setSetting("renderer", v);
+						}}>
+							<SelectTrigger><SelectValue /></SelectTrigger>
+							<SelectContent>
+								{rendererList.map((r) => (
+									<SelectItem key={r} value={r}>{rendererLabels[r]}</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div className="flex flex-col gap-1.5">
+						<Label>Theme</Label>
+						<Select value={board.theme} onValueChange={(v) => {
+							if (v === "dark" || v === "light") void board.setSetting("theme", v);
+						}}>
+							<SelectTrigger><SelectValue /></SelectTrigger>
+							<SelectContent>
+								<SelectItem value="dark">Dark</SelectItem>
+								<SelectItem value="light">Light</SelectItem>
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div className="flex gap-2 pt-1">
+						<Button type="button" variant="outline" size="sm" onClick={() => void exportJson()}>
+							<Download size={12} /> Export JSON
+						</Button>
+						<Button type="button" variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
+							<Upload size={12} /> Import
+						</Button>
+						<input
+							ref={fileRef} type="file" accept="application/json" className="hidden"
+							onChange={(e) => {
+								const f = e.target.files?.[0];
+								if (f) void importJson(f);
+								e.target.value = "";
+							}}
+						/>
+					</div>
+					{msg ? <p className="text-[12px] text-destructive">{msg}</p> : null}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-[13px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0 active:scale-[0.97]",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				outline: "border border-border bg-surface text-text-dim hover:border-border-strong hover:text-text",
+				ghost: "text-text-dim hover:bg-surface-hover hover:text-text",
+				destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20",
+			},
+			size: {
+				default: "h-[34px] px-3.5",
+				sm: "h-8 px-3 text-xs",
+				icon: "size-[34px]",
+			},
+		},
+		defaultVariants: { variant: "default", size: "default" },
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
+	const Comp = asChild ? Slot : "button";
+	return <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };
@@ -0,0 +1,60 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+
+function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
+	return (
+		<DialogPrimitive.Portal>
+			<DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-black/60 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+			<DialogPrimitive.Content
+				className={cn(
+					"fixed left-1/2 top-1/2 z-50 w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2",
+					"rounded-xl border border-border-strong bg-popover p-5 text-text shadow-2xl",
+					"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-md p-1 text-text-faint transition-colors hover:bg-surface-hover hover:text-text focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+					<X size={14} />
+					<span className="sr-only">Close</span>
+				</DialogPrimitive.Close>
+			</DialogPrimitive.Content>
+		</DialogPrimitive.Portal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div className={cn("mb-4 flex flex-col gap-1", className)} {...props} />;
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			className={cn("text-[15px] font-semibold tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			className={cn("text-[13px] text-text-dim", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div className={cn("mt-5 flex justify-end gap-2", className)} {...props} />;
+}
+
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter };
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return (
+		<input
+			type={type}
+			className={cn(
+				"flex h-9 w-full rounded-md border border-border bg-surface px-3 text-[13px] text-text",
+				"placeholder:text-text-faint focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+				"disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };
@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			className={cn("text-[12px] font-medium text-text-dim select-none", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };
@@ -0,0 +1,33 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+function PopoverContent({
+	className,
+	align = "start",
+	sideOffset = 6,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"z-30 min-w-[235px] rounded-[10px] border border-border-strong bg-popover p-[5px] text-text",
+					"shadow-[0_8px_30px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.2)]",
+					"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.98]",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+export { Popover, PopoverAnchor, PopoverTrigger, PopoverContent };
@@ -0,0 +1,69 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+const SelectValue = SelectPrimitive.Value;
+
+function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+	return (
+		<SelectPrimitive.Trigger
+			className={cn(
+				"flex h-9 w-full items-center justify-between rounded-md border border-border bg-surface px-3",
+				"text-[13px] text-text focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+				"[&>span]:truncate",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDown size={13} className="text-text-faint" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+function SelectContent({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				position="popper"
+				sideOffset={6}
+				className={cn(
+					"z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[10px]",
+					"border border-border-strong bg-popover p-[5px] text-text shadow-xl",
+					"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.98]",
+					className,
+				)}
+				{...props}
+			>
+				<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			className={cn(
+				"relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-3 text-[13px]",
+				"outline-none data-[highlighted]:bg-surface-hover",
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute left-2 flex items-center">
+				<SelectPrimitive.ItemIndicator>
+					<Check size={13} />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
+}
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem };