mirror of
https://github.com/Dvorinka/Dash.git
synced 2026-10-28 15:51:27 +00:00
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>
This commit is contained in:
Tomas Dvorak committed
1 parent
b60821350a
commit
6004105038
37 files changed
+4187
-66
No files matched your search
@@ -4,6 +4,14 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dash</title>
|
||||
<script>
|
||||
// Pre-paint theme: localStorage mirrors the server setting, applied
|
||||
// before first paint so there is no flash of the wrong theme.
|
||||
try {
|
||||
var t = localStorage.getItem("dash.theme");
|
||||
document.documentElement.dataset.theme = t === "light" ? "light" : "dark";
|
||||
} catch (e) {}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -11,13 +11,23 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@dash/api-client": "*",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@fontsource-variable/geist": "^5.2.5",
|
||||
"@fontsource-variable/geist-mono": "^5.2.5",
|
||||
"@radix-ui/react-dialog": "^1.1.23",
|
||||
"@radix-ui/react-label": "^2.1.15",
|
||||
"@radix-ui/react-popover": "^1.1.23",
|
||||
"@radix-ui/react-select": "^2.3.7",
|
||||
"@radix-ui/react-slot": "^1.3.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.545.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
|
||||
+42
-34
@@ -1,20 +1,25 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Moon, Plus, Sun } from "lucide-react";
|
||||
|
||||
type Theme = "dark" | "light";
|
||||
|
||||
function initialTheme(): Theme {
|
||||
const saved = localStorage.getItem("dash.theme");
|
||||
return saved === "light" ? "light" : "dark";
|
||||
}
|
||||
import { useState } from "react";
|
||||
import { Moon, Plus, Settings, Sun } from "lucide-react";
|
||||
import { BoardProvider, useBoard } from "@/board/store";
|
||||
import { Board } from "@/board/Board";
|
||||
import { ServiceDialog } from "@/components/ServiceDialog";
|
||||
import { SettingsDialog } from "@/components/SettingsDialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { Item } from "@/types";
|
||||
|
||||
export default function App() {
|
||||
const [theme, setTheme] = useState<Theme>(initialTheme);
|
||||
return (
|
||||
<BoardProvider>
|
||||
<Shell />
|
||||
</BoardProvider>
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.dataset.theme = theme;
|
||||
localStorage.setItem("dash.theme", theme);
|
||||
}, [theme]);
|
||||
function Shell() {
|
||||
const board = useBoard();
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [svcOpen, setSvcOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<Item | undefined>();
|
||||
|
||||
return (
|
||||
<div className="font-sans">
|
||||
@@ -28,27 +33,30 @@ export default function App() {
|
||||
</svg>
|
||||
Dash
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
aria-label="Toggle theme"
|
||||
className="ml-auto flex size-[34px] items-center justify-center rounded-lg border border-border bg-surface text-text-dim transition-colors hover:border-border-strong hover:text-text active:scale-95"
|
||||
>
|
||||
{theme === "dark" ? <Moon size={15} strokeWidth={1.8} /> : <Sun size={15} strokeWidth={1.8} />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-[34px] items-center gap-1.5 rounded-lg bg-text px-3.5 text-[13px] font-medium text-bg transition-transform active:scale-95"
|
||||
>
|
||||
<Plus size={13} strokeWidth={2.2} />
|
||||
Add service
|
||||
</button>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline" size="icon" aria-label="Settings"
|
||||
onClick={() => setSettingsOpen(true)}
|
||||
>
|
||||
<Settings size={15} strokeWidth={1.8} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline" size="icon" aria-label="Toggle theme"
|
||||
onClick={() => void board.setSetting("theme", board.theme === "dark" ? "light" : "dark")}
|
||||
>
|
||||
{board.theme === "dark" ? <Moon size={15} strokeWidth={1.8} /> : <Sun size={15} strokeWidth={1.8} />}
|
||||
</Button>
|
||||
<Button onClick={() => { setEditing(undefined); setSvcOpen(true); }}>
|
||||
<Plus size={13} strokeWidth={2.2} />
|
||||
Add service
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
<main className="mx-auto max-w-[1140px] px-7 pb-24 pt-9">
|
||||
<p className="text-center text-[13px] text-text-faint">
|
||||
No sections yet. Add a service to get started.
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<Board onEditItem={(it) => { setEditing(it); setSvcOpen(true); }} />
|
||||
|
||||
<ServiceDialog open={svcOpen} onOpenChange={setSvcOpen} item={editing} />
|
||||
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
import { createClient } from "@dash/api-client";
|
||||
|
||||
/** Same-origin typed client; vite proxies /api in dev. */
|
||||
export const api = createClient();
|
||||
@@ -0,0 +1,119 @@
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { useBoard } from "./store";
|
||||
import { BoardDnd, ItemSortZone, SectionSortList } from "./dnd";
|
||||
import { renderers } from "@/renderers";
|
||||
import type { Item } from "@/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
// Board is the renderer-agnostic glue: state + dnd + sort contexts wired once,
|
||||
// the active renderer supplies the chrome.
|
||||
export function Board({ onEditItem }: { onEditItem: (item: Item) => void }) {
|
||||
const board = useBoard();
|
||||
const views = renderers[board.renderer];
|
||||
const [addingSection, setAddingSection] = useState(false);
|
||||
const [sectionName, setSectionName] = useState("");
|
||||
|
||||
async function submitSection(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
const name = sectionName.trim();
|
||||
if (!name) return;
|
||||
await board.addSection(name);
|
||||
setSectionName("");
|
||||
setAddingSection(false);
|
||||
}
|
||||
|
||||
if (!board.loaded) {
|
||||
return <main className="mx-auto max-w-[1140px] px-7 pb-24 pt-9" />;
|
||||
}
|
||||
|
||||
if (board.sections.length === 0) {
|
||||
return (
|
||||
<main className="mx-auto flex max-w-[1140px] flex-col items-center gap-4 px-7 pb-24 pt-24">
|
||||
<p className="text-[13px] text-text-faint">No sections yet.</p>
|
||||
<AddSectionRow
|
||||
open={addingSection} setOpen={setAddingSection}
|
||||
name={sectionName} setName={setSectionName} onSubmit={submitSection}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-[1140px] px-7 pb-24 pt-9">
|
||||
<BoardDnd>
|
||||
<SectionSortList ids={board.sections.map((s) => s.id)}>
|
||||
<views.BoardView>
|
||||
{board.sections.map((sec) => (
|
||||
<views.SectionView
|
||||
key={sec.id}
|
||||
section={sec}
|
||||
onToggle={() => void board.patchSection(sec.id, { collapsed: !sec.collapsed })}
|
||||
onDelete={() => {
|
||||
if (window.confirm(`Delete section "${sec.name}" and its ${sec.items.length} items?`)) {
|
||||
void board.deleteSection(sec.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ItemSortZone section={sec} className={views.itemsGridClass}>
|
||||
{sec.items.map((it) =>
|
||||
it.kind === "widget" ? (
|
||||
<views.WidgetView key={it.id} item={it} sectionId={sec.id} onEdit={() => onEditItem(it)} />
|
||||
) : (
|
||||
<views.ItemView
|
||||
key={it.id}
|
||||
item={it}
|
||||
sectionId={sec.id}
|
||||
status={board.statuses[it.id]}
|
||||
onEdit={() => onEditItem(it)}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</ItemSortZone>
|
||||
</views.SectionView>
|
||||
))}
|
||||
</views.BoardView>
|
||||
</SectionSortList>
|
||||
</BoardDnd>
|
||||
|
||||
<div className="mt-8 flex justify-center">
|
||||
<AddSectionRow
|
||||
open={addingSection} setOpen={setAddingSection}
|
||||
name={sectionName} setName={setSectionName} onSubmit={submitSection}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// Inline add-section row — one field doesn't warrant a dialog.
|
||||
function AddSectionRow({
|
||||
open, setOpen, name, setName, onSubmit,
|
||||
}: {
|
||||
open: boolean; setOpen: (o: boolean) => void;
|
||||
name: string; setName: (n: string) => void;
|
||||
onSubmit: (e: FormEvent) => void;
|
||||
}) {
|
||||
if (!open) {
|
||||
return (
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
|
||||
<Plus size={12} /> Add section
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="flex gap-2">
|
||||
<Input
|
||||
autoFocus
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Section name"
|
||||
className="w-[200px]"
|
||||
onBlur={() => !name.trim() && setOpen(false)}
|
||||
onKeyDown={(e) => e.key === "Escape" && setOpen(false)}
|
||||
/>
|
||||
<Button type="submit" size="sm">Add</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import {
|
||||
useState,
|
||||
type CSSProperties,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import {
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
PointerSensor,
|
||||
pointerWithin,
|
||||
rectIntersection,
|
||||
useDroppable,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type CollisionDetection,
|
||||
type DraggableAttributes,
|
||||
type DraggableSyntheticListeners,
|
||||
type DragEndEvent,
|
||||
type DragOverEvent,
|
||||
type DragStartEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
SortableContext,
|
||||
arrayMove,
|
||||
rectSortingStrategy,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import type { Section } from "@/types";
|
||||
import { useBoard } from "./store";
|
||||
|
||||
// Shared drag-drop primitives. Renderers consume the hooks; they never
|
||||
// wire sensors, contexts, or persistence themselves.
|
||||
|
||||
interface DragData {
|
||||
type: "section" | "item" | "sectionBody";
|
||||
sectionId?: string;
|
||||
}
|
||||
|
||||
/** dnd-kit types data.current as any; our hooks below only ever attach DragData. */
|
||||
function dragData(d: { data: { current: unknown } }): DragData | undefined {
|
||||
// SAFETY: payloads are set exclusively by useItemDnd/useSectionDnd/ItemSortZone.
|
||||
return d.data.current as DragData | undefined;
|
||||
}
|
||||
|
||||
const collision: CollisionDetection = (args) => {
|
||||
const p = pointerWithin(args);
|
||||
return p.length > 0 ? p : rectIntersection(args);
|
||||
};
|
||||
|
||||
// Pointerup fires a click on whatever sits under the cursor, which would open
|
||||
// a tile's URL popover right after a drop. Stamp the last real drag and let
|
||||
// ItemAnchor swallow clicks that arrive immediately after it.
|
||||
let lastDropAt = 0;
|
||||
export function clickIsDragTail(): boolean {
|
||||
return performance.now() - lastDropAt < 200;
|
||||
}
|
||||
|
||||
/** Wraps the whole board: sensors, drag lifecycle, overlay, persistence. */
|
||||
export function BoardDnd({ children }: { children: ReactNode }) {
|
||||
const board = useBoard();
|
||||
const [activeLabel, setActiveLabel] = useState<string | null>(null);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
|
||||
);
|
||||
|
||||
function onDragStart(e: DragStartEvent) {
|
||||
const data = dragData(e.active);
|
||||
if (data?.type === "item") {
|
||||
const item = board.sections
|
||||
.flatMap((s) => s.items)
|
||||
.find((i) => i.id === e.active.id);
|
||||
setActiveLabel(item?.name ?? null);
|
||||
} else {
|
||||
const sec = board.sections.find((s) => s.id === e.active.id);
|
||||
setActiveLabel(sec?.name ?? null);
|
||||
}
|
||||
}
|
||||
|
||||
function onDragOver(e: DragOverEvent) {
|
||||
const active = dragData(e.active);
|
||||
const over = e.over ? dragData(e.over) : undefined;
|
||||
if (!active || active.type !== "item" || !over || !e.over) return;
|
||||
|
||||
const activeId = String(e.active.id);
|
||||
if (over.type === "item" && over.sectionId && over.sectionId !== active.sectionId) {
|
||||
const items = board.sections.find((s) => s.id === over.sectionId)?.items ?? [];
|
||||
const idx = items.findIndex((i) => i.id === String(e.over?.id));
|
||||
board.moveItemLocal(activeId, over.sectionId, idx < 0 ? items.length : idx);
|
||||
} else if (over.type === "sectionBody" && over.sectionId && over.sectionId !== active.sectionId) {
|
||||
const len = board.sections.find((s) => s.id === over.sectionId)?.items.length ?? 0;
|
||||
board.moveItemLocal(activeId, over.sectionId, len);
|
||||
} else if (over.type === "section" && over.sectionId !== active.sectionId) {
|
||||
const len = board.sections.find((s) => s.id === String(e.over?.id))?.items.length ?? 0;
|
||||
board.moveItemLocal(activeId, String(e.over?.id), len);
|
||||
}
|
||||
}
|
||||
|
||||
function onDragEnd(e: DragEndEvent) {
|
||||
setActiveLabel(null);
|
||||
lastDropAt = performance.now();
|
||||
const active = dragData(e.active);
|
||||
const overId = e.over ? String(e.over.id) : null;
|
||||
if (!active || !overId) return;
|
||||
|
||||
if (active.type === "section") {
|
||||
const over = e.over ? dragData(e.over) : undefined;
|
||||
// Dropping anywhere inside another section — its body or an item —
|
||||
// counts as reordering onto that section.
|
||||
const targetId =
|
||||
over?.type === "section" ? overId :
|
||||
over?.sectionId ?? null;
|
||||
if (!targetId) return;
|
||||
const ids = board.sections.map((s) => s.id);
|
||||
const from = ids.indexOf(String(e.active.id));
|
||||
const to = ids.indexOf(targetId);
|
||||
if (from < 0 || to < 0 || from === to) return;
|
||||
const next = arrayMove(board.sections, from, to);
|
||||
board.moveSectionLocal(String(e.active.id), to);
|
||||
const idx = next.findIndex((s) => s.id === e.active.id);
|
||||
void board.persistSectionMove(
|
||||
String(e.active.id),
|
||||
idx > 0 ? next[idx - 1]?.id : undefined,
|
||||
idx < next.length - 1 ? next[idx + 1]?.id : undefined,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (active.type === "item") {
|
||||
const id = String(e.active.id);
|
||||
const over = e.over ? dragData(e.over) : undefined;
|
||||
const sec = board.sections.find((s) => s.items.some((i) => i.id === id));
|
||||
if (!sec) return;
|
||||
|
||||
// onDragOver only mutates local state for cross-section moves; for a
|
||||
// same-section drop the order is still pre-drag, so apply it now.
|
||||
let items = sec.items;
|
||||
const from = items.findIndex((i) => i.id === id);
|
||||
if (over?.type === "item" && over.sectionId === sec.id) {
|
||||
const to = items.findIndex((i) => i.id === overId);
|
||||
if (to >= 0 && to !== from) {
|
||||
items = arrayMove(items, from, to);
|
||||
board.moveItemLocal(id, sec.id, to);
|
||||
}
|
||||
} else if (over?.type === "sectionBody" && over.sectionId === sec.id) {
|
||||
items = arrayMove(items, from, items.length - 1);
|
||||
board.moveItemLocal(id, sec.id, items.length - 1);
|
||||
}
|
||||
|
||||
const idx = items.findIndex((i) => i.id === id);
|
||||
void board.persistItemMove(
|
||||
id,
|
||||
sec.id,
|
||||
idx > 0 ? items[idx - 1]?.id : undefined,
|
||||
idx < items.length - 1 ? items[idx + 1]?.id : undefined,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function onDragCancel() {
|
||||
setActiveLabel(null);
|
||||
void board.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={collision}
|
||||
onDragStart={onDragStart}
|
||||
onDragOver={onDragOver}
|
||||
onDragEnd={onDragEnd}
|
||||
onDragCancel={onDragCancel}
|
||||
>
|
||||
{children}
|
||||
<DragOverlay dropAnimation={null}>
|
||||
{activeLabel ? (
|
||||
<div className="rounded-[10px] border border-border-strong bg-popover px-4 py-2.5 text-[13px] font-medium shadow-xl">
|
||||
{activeLabel}
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
/** Sortable context for the section list (vertical). Shared, not per-renderer. */
|
||||
export function SectionSortList({ ids, children }: { ids: string[]; children: ReactNode }) {
|
||||
return (
|
||||
<SortableContext items={ids} strategy={verticalListSortingStrategy}>
|
||||
{children}
|
||||
</SortableContext>
|
||||
);
|
||||
}
|
||||
|
||||
/** Sortable context + droppable body for one section's items.
|
||||
The div carries the renderer's grid classes so the drop zone has a real box. */
|
||||
export function ItemSortZone({ section, className, children }: { section: Section; className?: string; children: ReactNode }) {
|
||||
const { setNodeRef } = useDroppable({
|
||||
id: `body:${section.id}`,
|
||||
data: { type: "sectionBody", sectionId: section.id } satisfies DragData,
|
||||
});
|
||||
return (
|
||||
<SortableContext items={section.items.map((i) => i.id)} strategy={rectSortingStrategy}>
|
||||
<div ref={setNodeRef} className={className} style={{ minHeight: 8 }}>
|
||||
{children}
|
||||
</div>
|
||||
</SortableContext>
|
||||
);
|
||||
}
|
||||
|
||||
export interface SortableBind {
|
||||
ref: (el: HTMLElement | null) => void;
|
||||
style: CSSProperties;
|
||||
isDragging: boolean;
|
||||
attributes: DraggableAttributes;
|
||||
listeners: DraggableSyntheticListeners;
|
||||
}
|
||||
|
||||
/** Item-level sortable binding. ItemView applies ref/style and spreads
|
||||
attributes/listeners on the tile (whole-tile drag; clicks pass through
|
||||
because the pointer sensor requires 6px of movement). */
|
||||
export function useItemDnd(sectionId: string, itemId: string): SortableBind {
|
||||
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
|
||||
id: itemId,
|
||||
data: { type: "item", sectionId } satisfies DragData,
|
||||
});
|
||||
return {
|
||||
ref: setNodeRef,
|
||||
style: { transform: CSS.Transform.toString(transform), transition },
|
||||
isDragging,
|
||||
attributes,
|
||||
listeners,
|
||||
};
|
||||
}
|
||||
|
||||
/** Section-level sortable binding. Handle props go on the grip button. */
|
||||
export function useSectionDnd(sectionId: string): SortableBind {
|
||||
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
|
||||
id: sectionId,
|
||||
data: { type: "section", sectionId } satisfies DragData,
|
||||
});
|
||||
return {
|
||||
ref: setNodeRef,
|
||||
style: { transform: CSS.Transform.toString(transform), transition },
|
||||
isDragging,
|
||||
attributes,
|
||||
listeners,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import { useState, type ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Item, Status } from "@/types";
|
||||
import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
|
||||
import { clickIsDragTail } from "@/board/dnd";
|
||||
|
||||
/** host extracts the display host from a service URL. */
|
||||
export function hostOf(url: string): string {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
return u.host + (u.pathname !== "/" ? u.pathname.replace(/\/$/, "") : "");
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
/** IconImg renders the item icon or a letter tile fallback. */
|
||||
export function IconImg({ item, size = 40, className }: { item: Item; size?: number; className?: string }) {
|
||||
const [failed, setFailed] = useState(false);
|
||||
const letter = item.name.trim().charAt(0).toUpperCase() || "?";
|
||||
return (
|
||||
<div
|
||||
className={cn("relative flex shrink-0 items-center justify-center overflow-hidden bg-icon-bg text-text-dim font-semibold", className)}
|
||||
style={{ width: size, height: size, borderRadius: Math.round(size * 0.225), fontSize: size * 0.375 }}
|
||||
>
|
||||
{!item.icon || failed ? (
|
||||
letter
|
||||
) : (
|
||||
<img
|
||||
src={item.icon}
|
||||
alt=""
|
||||
className="absolute inset-0 h-full w-full bg-icon-bg object-contain p-[15%]"
|
||||
onError={() => setFailed(true)}
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** StatusChip — the only color on the board. Green up, amber down, faint when
|
||||
unknown (no URLs or status not yet probed). */
|
||||
export function StatusChip({ status, variant = "chip" }: { status?: Status | undefined; variant?: "chip" | "dot" }) {
|
||||
const state = status?.status;
|
||||
if (variant === "dot") {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 shrink-0 rounded-full",
|
||||
state === "up" ? "bg-up" : state === "down" ? "bg-down" : "bg-text-faint/40",
|
||||
)}
|
||||
title={state ?? "unknown"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto flex shrink-0 items-center gap-1.5 rounded-[5px] border border-border px-[7px] py-[3px]",
|
||||
"font-mono text-[9.5px] tracking-[0.06em] text-text-faint",
|
||||
)}
|
||||
>
|
||||
<span className={cn("size-[5px] rounded-full", state === "up" ? "bg-up" : state === "down" ? "bg-down" : "bg-text-faint/40")} />
|
||||
<span className="max-[620px]:hidden">{state ?? "…"}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** ItemAnchor gives a tile its launch behavior: one URL opens directly,
|
||||
multiple URLs open a label-tagged chooser popover, zero URLs open edit. */
|
||||
export function ItemAnchor({
|
||||
item,
|
||||
onEdit,
|
||||
children,
|
||||
}: {
|
||||
item: Item;
|
||||
onEdit: () => void;
|
||||
children: (open: () => void) => ReactNode;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const urls = item.urls;
|
||||
|
||||
const activate = () => {
|
||||
if (clickIsDragTail()) return;
|
||||
if (urls.length === 0) onEdit();
|
||||
else if (urls.length === 1 && urls[0]) window.open(urls[0].url, "_blank", "noopener");
|
||||
else setOpen(true);
|
||||
};
|
||||
|
||||
if (urls.length < 2) return <>{children(activate)}</>;
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverAnchor asChild>{children(activate)}</PopoverAnchor>
|
||||
<PopoverContent onOpenAutoFocus={(e) => e.preventDefault()}>
|
||||
{urls.map((u) => (
|
||||
<a
|
||||
key={u.id}
|
||||
href={u.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-[13px] text-text transition-colors hover:bg-surface-hover"
|
||||
>
|
||||
{u.label ? (
|
||||
<span className="shrink-0 rounded bg-icon-bg px-1.5 py-0.5 text-[9.5px] font-semibold uppercase tracking-[0.08em] text-text-dim">
|
||||
{u.label}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="ml-auto truncate font-mono text-[11.5px] text-text-faint">{hostOf(u.url)}</span>
|
||||
</a>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { api } from "@/api";
|
||||
import type {
|
||||
Item, ItemInput, ItemPatch, Prefs, RendererName, Section, StatusMap, Theme,
|
||||
} from "@/types";
|
||||
import { parsePrefs } from "@/types";
|
||||
|
||||
// Board store — single renderer-agnostic source of truth for the board tree,
|
||||
// reachability statuses, and persisted settings. Renderers consume via useBoard.
|
||||
|
||||
interface BoardState {
|
||||
sections: Section[];
|
||||
statuses: StatusMap;
|
||||
theme: Theme;
|
||||
renderer: RendererName;
|
||||
loaded: boolean;
|
||||
refresh(): Promise<void>;
|
||||
addSection(name: string): Promise<Section | null>;
|
||||
patchSection(id: string, patch: { name?: string; collapsed?: boolean }): Promise<void>;
|
||||
deleteSection(id: string): Promise<void>;
|
||||
addItem(input: ItemInput): Promise<Item | null>;
|
||||
patchItem(id: string, patch: ItemPatch): Promise<void>;
|
||||
deleteItem(id: string): Promise<void>;
|
||||
uploadIcon(id: string, file: File): Promise<void>;
|
||||
moveItemLocal(itemId: string, toSectionId: string, index: number): void;
|
||||
moveSectionLocal(id: string, index: number): void;
|
||||
persistItemMove(itemId: string, sectionId: string, beforeId?: string, afterId?: string): Promise<void>;
|
||||
persistSectionMove(id: string, beforeId?: string, afterId?: string): Promise<void>;
|
||||
setSetting(key: keyof Prefs, value: string): Promise<void>;
|
||||
}
|
||||
|
||||
const Ctx = createContext<BoardState | null>(null);
|
||||
|
||||
export function BoardProvider({ children }: { children: ReactNode }) {
|
||||
const [sections, setSections] = useState<Section[]>([]);
|
||||
const [statuses, setStatuses] = useState<StatusMap>({});
|
||||
const [prefs, setPrefs] = useState<Prefs>({ theme: "dark", renderer: "bento" });
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const { data } = await api.GET("/api/sections");
|
||||
if (data) setSections(data);
|
||||
}, []);
|
||||
|
||||
const refreshStatus = useCallback(async () => {
|
||||
const { data } = await api.GET("/api/status");
|
||||
if (data) setStatuses(data);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void (async () => {
|
||||
const [{ data: secs }, { data: cfg }] = await Promise.all([
|
||||
api.GET("/api/sections"),
|
||||
api.GET("/api/settings"),
|
||||
]);
|
||||
if (secs) setSections(secs);
|
||||
if (cfg) setPrefs(parsePrefs(cfg));
|
||||
setLoaded(true);
|
||||
void refreshStatus();
|
||||
})();
|
||||
const t = setInterval(() => void refreshStatus(), 60_000);
|
||||
return () => clearInterval(t);
|
||||
}, [refreshStatus]);
|
||||
|
||||
const { theme, renderer } = prefs;
|
||||
|
||||
// Apply theme: <html data-theme> drives all CSS vars. localStorage mirrors
|
||||
// the server setting so index.html can pre-paint without a flash.
|
||||
useEffect(() => {
|
||||
if (!loaded) return;
|
||||
document.documentElement.dataset.theme = theme;
|
||||
localStorage.setItem("dash.theme", theme);
|
||||
}, [theme, loaded]);
|
||||
|
||||
const addSection = useCallback(async (name: string) => {
|
||||
const { data } = await api.POST("/api/sections", { body: { name } });
|
||||
if (data) setSections((s) => [...s, data]);
|
||||
return data ?? null;
|
||||
}, []);
|
||||
|
||||
const patchSection = useCallback(async (id: string, patch: { name?: string; collapsed?: boolean }) => {
|
||||
setSections((ss) => ss.map((s) => (s.id === id ? { ...s, ...patch } : s)));
|
||||
const { error } = await api.PATCH("/api/sections/{id}", { params: { path: { id } }, body: patch });
|
||||
if (error) await refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const deleteSection = useCallback(async (id: string) => {
|
||||
setSections((ss) => ss.filter((s) => s.id !== id));
|
||||
const { error } = await api.DELETE("/api/sections/{id}", { params: { path: { id } } });
|
||||
if (error) await refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const addItem = useCallback(async (input: ItemInput) => {
|
||||
const { data } = await api.POST("/api/items", { body: input });
|
||||
if (data) {
|
||||
setSections((ss) => ss.map((s) => (s.id === data.sectionId ? { ...s, items: [...s.items, data] } : s)));
|
||||
void refreshStatus();
|
||||
}
|
||||
return data ?? null;
|
||||
}, [refreshStatus]);
|
||||
|
||||
const patchItem = useCallback(async (id: string, patch: ItemPatch) => {
|
||||
const { data } = await api.PATCH("/api/items/{id}", { params: { path: { id } }, body: patch });
|
||||
if (data) {
|
||||
setSections((ss) => ss.map((s) => ({
|
||||
...s,
|
||||
items: s.items.map((i) => (i.id === id ? data : i)),
|
||||
})));
|
||||
void refreshStatus();
|
||||
}
|
||||
}, [refreshStatus]);
|
||||
|
||||
const deleteItem = useCallback(async (id: string) => {
|
||||
setSections((ss) => ss.map((s) => ({ ...s, items: s.items.filter((i) => i.id !== id) })));
|
||||
const { error } = await api.DELETE("/api/items/{id}", { params: { path: { id } } });
|
||||
if (error) await refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const uploadIcon = useCallback(async (id: string, file: File) => {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
const res = await fetch(`/api/items/${id}/icon`, { method: "POST", body: form });
|
||||
if (res.ok) {
|
||||
// SAFETY: /api/items/:id/icon returns Item per openapi.yaml; fetch isn't typed by the client.
|
||||
const it = (await res.json()) as Item;
|
||||
setSections((ss) => ss.map((s) => ({
|
||||
...s,
|
||||
items: s.items.map((i) => (i.id === id ? it : i)),
|
||||
})));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Local moves run during drag (optimistic); persist* fire the API on drop.
|
||||
const moveItemLocal = useCallback((itemId: string, toSectionId: string, index: number) => {
|
||||
setSections((ss) => {
|
||||
const next = ss.map((s) => ({ ...s, items: [...s.items] }));
|
||||
let moved: Item | undefined;
|
||||
for (const s of next) {
|
||||
const i = s.items.findIndex((it) => it.id === itemId);
|
||||
if (i >= 0) {
|
||||
[moved] = s.items.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!moved) return ss;
|
||||
moved = { ...moved, sectionId: toSectionId };
|
||||
const target = next.find((s) => s.id === toSectionId);
|
||||
if (!target) return ss;
|
||||
target.items.splice(Math.min(index, target.items.length), 0, moved);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const moveSectionLocal = useCallback((id: string, index: number) => {
|
||||
setSections((ss) => {
|
||||
const next = [...ss];
|
||||
const from = next.findIndex((s) => s.id === id);
|
||||
if (from < 0) return ss;
|
||||
const [moved] = next.splice(from, 1);
|
||||
if (!moved) return ss;
|
||||
next.splice(Math.min(index, next.length), 0, moved);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const persistItemMove = useCallback(async (itemId: string, sectionId: string, beforeId?: string, afterId?: string) => {
|
||||
const { error } = await api.POST("/api/items/reorder", {
|
||||
body: {
|
||||
id: itemId, sectionId,
|
||||
...(beforeId ? { beforeId } : {}),
|
||||
...(afterId ? { afterId } : {}),
|
||||
},
|
||||
});
|
||||
if (error) await refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const persistSectionMove = useCallback(async (id: string, beforeId?: string, afterId?: string) => {
|
||||
const { error } = await api.POST("/api/sections/reorder", {
|
||||
body: {
|
||||
id,
|
||||
...(beforeId ? { beforeId } : {}),
|
||||
...(afterId ? { afterId } : {}),
|
||||
},
|
||||
});
|
||||
if (error) await refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const setSetting = useCallback(async (key: keyof Prefs, value: string) => {
|
||||
setPrefs((p) => ({ ...p, [key]: value }));
|
||||
const { data, error } = await api.PUT("/api/settings", {
|
||||
body: { [key]: value },
|
||||
});
|
||||
if (error) await refresh();
|
||||
else if (data) setPrefs(parsePrefs(data));
|
||||
}, [refresh]);
|
||||
|
||||
const value = useMemo<BoardState>(() => ({
|
||||
sections, statuses, theme, renderer, loaded,
|
||||
refresh, addSection, patchSection, deleteSection,
|
||||
addItem, patchItem, deleteItem, uploadIcon,
|
||||
moveItemLocal, moveSectionLocal, persistItemMove, persistSectionMove,
|
||||
setSetting,
|
||||
}), [
|
||||
sections, statuses, theme, renderer, loaded,
|
||||
refresh, addSection, patchSection, deleteSection,
|
||||
addItem, patchItem, deleteItem, uploadIcon,
|
||||
moveItemLocal, moveSectionLocal, persistItemMove, persistSectionMove,
|
||||
setSetting,
|
||||
]);
|
||||
|
||||
return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
|
||||
}
|
||||
|
||||
export function useBoard(): BoardState {
|
||||
const v = useContext(Ctx);
|
||||
if (!v) throw new Error("useBoard outside BoardProvider");
|
||||
return v;
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -1,9 +1,12 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
/* Design tokens — ported from mockups/d-bento-mono.html.
|
||||
Semantic vars flip on [data-theme]; Tailwind utilities map via @theme. */
|
||||
Semantic vars flip on [data-theme]; Tailwind utilities map via @theme.
|
||||
shadcn/ui names (background, popover, ...) alias the same tokens. */
|
||||
:root {
|
||||
--ease: cubic-bezier(0.2, 0, 0, 1);
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@@ -18,8 +21,24 @@
|
||||
--accent: #3b82f6;
|
||||
--up: #22c55e;
|
||||
--down: #f59e0b;
|
||||
--destructive: #ef4444;
|
||||
--icon-bg: #1c1c1e;
|
||||
--popover: #141414;
|
||||
|
||||
--background: var(--bg);
|
||||
--foreground: var(--text);
|
||||
--card: var(--surface);
|
||||
--card-foreground: var(--text);
|
||||
--popover-foreground: var(--text);
|
||||
--primary: var(--text);
|
||||
--primary-foreground: var(--bg);
|
||||
--secondary: var(--surface);
|
||||
--secondary-foreground: var(--text);
|
||||
--muted: var(--surface-hover);
|
||||
--muted-foreground: var(--text-dim);
|
||||
--accent-foreground: var(--text);
|
||||
--input: var(--border-strong);
|
||||
--ring: var(--accent);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
@@ -34,8 +53,24 @@
|
||||
--accent: #2563eb;
|
||||
--up: #16a34a;
|
||||
--down: #d97706;
|
||||
--destructive: #dc2626;
|
||||
--icon-bg: #f4f4f5;
|
||||
--popover: #ffffff;
|
||||
|
||||
--background: var(--bg);
|
||||
--foreground: var(--text);
|
||||
--card: var(--surface);
|
||||
--card-foreground: var(--text);
|
||||
--popover-foreground: var(--text);
|
||||
--primary: var(--text);
|
||||
--primary-foreground: var(--bg);
|
||||
--secondary: var(--surface);
|
||||
--secondary-foreground: var(--text);
|
||||
--muted: var(--surface-hover);
|
||||
--muted-foreground: var(--text-dim);
|
||||
--accent-foreground: var(--text);
|
||||
--input: var(--border-strong);
|
||||
--ring: var(--accent);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -50,8 +85,29 @@
|
||||
--color-accent: var(--accent);
|
||||
--color-up: var(--up);
|
||||
--color-down: var(--down);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-icon-bg: var(--icon-bg);
|
||||
--color-popover: var(--popover);
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
--font-sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "Geist Mono Variable", ui-monospace, monospace;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
import { ChevronDown, GripVertical, Pencil, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useItemDnd, useSectionDnd } from "@/board/dnd";
|
||||
import { IconImg, ItemAnchor, StatusChip, hostOf } from "@/board/primitives";
|
||||
import type {
|
||||
BoardViewProps,
|
||||
ItemViewProps,
|
||||
RendererViews,
|
||||
SectionViewProps,
|
||||
} from "@/renderers/types";
|
||||
|
||||
// Bento — default renderer. Mixed-size grid, hairline section headers,
|
||||
// status chips carry the only color. Ported from mockups/d-bento-mono.html.
|
||||
|
||||
function BoardView({ children }: BoardViewProps) {
|
||||
return <div className="flex flex-col gap-5">{children}</div>;
|
||||
}
|
||||
|
||||
function SectionView({ section, onToggle, onDelete, children }: SectionViewProps) {
|
||||
const dnd = useSectionDnd(section.id);
|
||||
return (
|
||||
<section
|
||||
ref={dnd.ref}
|
||||
style={dnd.style}
|
||||
className={cn(dnd.isDragging && "opacity-35")}
|
||||
>
|
||||
<div className="group/sec flex cursor-pointer select-none items-center gap-3 px-0.5 py-1">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Drag section"
|
||||
className="cursor-grab text-text-faint opacity-0 transition-opacity group-hover/sec:opacity-100 active:cursor-grabbing"
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
>
|
||||
<GripVertical size={13} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className="flex min-w-0 flex-1 items-center gap-3 text-left"
|
||||
>
|
||||
<h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-text-dim">
|
||||
{section.name}
|
||||
</h2>
|
||||
<span className="font-mono text-[11px] text-text-faint">
|
||||
{String(section.items.length).padStart(2, "0")}
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-border" />
|
||||
<ChevronDown
|
||||
size={13}
|
||||
className={cn("text-text-faint transition-transform duration-200", section.collapsed && "-rotate-90")}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Delete section"
|
||||
onClick={onDelete}
|
||||
className="text-text-faint opacity-0 transition-opacity hover:text-destructive group-hover/sec:opacity-100"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
{!section.collapsed && children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemView({ item, sectionId, status, onEdit }: ItemViewProps) {
|
||||
const dnd = useItemDnd(sectionId, item.id);
|
||||
const host = item.urls[0] ? hostOf(item.urls[0].url) : "";
|
||||
return (
|
||||
<ItemAnchor item={item} onEdit={onEdit}>
|
||||
{(open) => (
|
||||
<div
|
||||
ref={dnd.ref}
|
||||
style={dnd.style}
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
onClick={open}
|
||||
className={cn(
|
||||
"group/tile relative col-span-1 flex min-h-[70px] cursor-grab items-center gap-3",
|
||||
"rounded-[10px] border border-border bg-surface px-[15px] py-[13px]",
|
||||
"transition-colors hover:border-border-strong hover:bg-surface-hover active:scale-[0.98]",
|
||||
"min-[620px]:col-span-2",
|
||||
dnd.isDragging && "opacity-35",
|
||||
)}
|
||||
>
|
||||
<IconImg item={item} size={40} />
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-[13.5px] font-medium tracking-tight">{item.name}</div>
|
||||
{host ? <div className="truncate font-mono text-[10.5px] text-text-faint">{host}</div> : null}
|
||||
</div>
|
||||
{item.urls.length > 0 && <StatusChip status={status} />}
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Edit ${item.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
className="absolute right-2 top-2 rounded p-1 text-text-faint opacity-0 transition-opacity hover:text-text group-hover/tile:opacity-100"
|
||||
>
|
||||
<Pencil size={11} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</ItemAnchor>
|
||||
);
|
||||
}
|
||||
|
||||
// Widget tiles land in Phase 2; render a quiet placeholder tile meanwhile.
|
||||
function WidgetView({ item, sectionId }: ItemViewProps) {
|
||||
const dnd = useItemDnd(sectionId, item.id);
|
||||
return (
|
||||
<div
|
||||
ref={dnd.ref}
|
||||
style={dnd.style}
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
className={cn(
|
||||
"col-span-1 flex min-h-[70px] items-center rounded-[10px] border border-dashed border-border-strong px-[15px] py-[13px]",
|
||||
"min-[620px]:col-span-2",
|
||||
dnd.isDragging && "opacity-35",
|
||||
)}
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-text-faint">
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const bento: RendererViews = {
|
||||
BoardView,
|
||||
SectionView,
|
||||
ItemView,
|
||||
WidgetView,
|
||||
itemsGridClass: "grid grid-cols-2 min-[620px]:grid-cols-4 min-[900px]:grid-cols-6 gap-2.5",
|
||||
};
|
||||
@@ -0,0 +1,132 @@
|
||||
import { ChevronDown, GripVertical, Pencil, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useItemDnd, useSectionDnd } from "@/board/dnd";
|
||||
import { IconImg, ItemAnchor, StatusChip, hostOf } from "@/board/primitives";
|
||||
import type {
|
||||
BoardViewProps,
|
||||
ItemViewProps,
|
||||
RendererViews,
|
||||
SectionViewProps,
|
||||
} from "@/renderers/types";
|
||||
|
||||
// Cards — uniform compact grid. Second renderer; proves the seam while the
|
||||
// code is small. Ported from mockups/a-vercel-mono.html.
|
||||
|
||||
function BoardView({ children }: BoardViewProps) {
|
||||
return <div className="flex flex-col gap-10">{children}</div>;
|
||||
}
|
||||
|
||||
function SectionView({ section, onToggle, onDelete, children }: SectionViewProps) {
|
||||
const dnd = useSectionDnd(section.id);
|
||||
return (
|
||||
<section ref={dnd.ref} style={dnd.style} className={cn(dnd.isDragging && "opacity-40")}>
|
||||
<div className="group/sec mb-3.5 flex cursor-pointer select-none items-center gap-2.5 px-1 py-1.5 text-text-dim">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className="flex min-w-0 flex-1 items-center gap-2.5 text-left"
|
||||
>
|
||||
<h2 className="text-[11px] font-semibold uppercase tracking-[0.14em]">{section.name}</h2>
|
||||
<span className="text-[11px] tabular-nums text-text-faint">{section.items.length}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Drag section"
|
||||
className="cursor-grab text-text-faint opacity-0 transition-opacity group-hover/sec:opacity-100 active:cursor-grabbing"
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
>
|
||||
<GripVertical size={13} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Delete section"
|
||||
onClick={onDelete}
|
||||
className="text-text-faint opacity-0 transition-opacity hover:text-destructive group-hover/sec:opacity-100"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
<ChevronDown
|
||||
size={13}
|
||||
className={cn("text-text-faint transition-transform duration-200", section.collapsed && "-rotate-90")}
|
||||
/>
|
||||
</div>
|
||||
{!section.collapsed && children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemView({ item, sectionId, status, onEdit }: ItemViewProps) {
|
||||
const dnd = useItemDnd(sectionId, item.id);
|
||||
const host = item.urls[0] ? hostOf(item.urls[0].url) : "";
|
||||
return (
|
||||
<ItemAnchor item={item} onEdit={onEdit}>
|
||||
{(open) => (
|
||||
<div
|
||||
ref={dnd.ref}
|
||||
style={dnd.style}
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
onClick={open}
|
||||
className={cn(
|
||||
"group/card relative flex cursor-grab items-center gap-3",
|
||||
"rounded-[10px] border border-border bg-surface px-3.5 py-3",
|
||||
"transition-colors hover:border-border-strong hover:bg-surface-hover active:scale-[0.98]",
|
||||
dnd.isDragging && "opacity-40",
|
||||
)}
|
||||
>
|
||||
<IconImg item={item} size={36} />
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-[13.5px] font-medium tracking-tight">{item.name}</div>
|
||||
{host ? <div className="truncate text-[11.5px] text-text-faint">{host}</div> : null}
|
||||
</div>
|
||||
{item.urls.length > 1 && (
|
||||
<span className="shrink-0 rounded border border-border px-1 py-px text-[10px] tabular-nums text-text-faint">
|
||||
{item.urls.length}
|
||||
</span>
|
||||
)}
|
||||
{item.urls.length > 0 && <StatusChip status={status} variant="dot" />}
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Edit ${item.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
className="absolute -right-1 -top-1 rounded-full border border-border bg-popover p-1 text-text-faint opacity-0 transition-opacity hover:text-text group-hover/card:opacity-100"
|
||||
>
|
||||
<Pencil size={10} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</ItemAnchor>
|
||||
);
|
||||
}
|
||||
|
||||
function WidgetView({ item, sectionId }: ItemViewProps) {
|
||||
const dnd = useItemDnd(sectionId, item.id);
|
||||
return (
|
||||
<div
|
||||
ref={dnd.ref}
|
||||
style={dnd.style}
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
className={cn(
|
||||
"flex items-center rounded-[10px] border border-dashed border-border-strong bg-surface px-4 py-3",
|
||||
dnd.isDragging && "opacity-40",
|
||||
)}
|
||||
>
|
||||
<span className="text-[10.5px] font-semibold uppercase tracking-[0.12em] text-text-faint">
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const cards: RendererViews = {
|
||||
BoardView,
|
||||
SectionView,
|
||||
ItemView,
|
||||
WidgetView,
|
||||
itemsGridClass: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5",
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import { bento } from "./bento";
|
||||
import { cards } from "./cards";
|
||||
import type { RendererViews } from "./types";
|
||||
import type { RendererName } from "@/types";
|
||||
|
||||
// Renderer registry — settings.renderer picks the active one.
|
||||
export const rendererList = ["bento", "cards"] as const satisfies readonly RendererName[];
|
||||
export const renderers: Record<RendererName, RendererViews> = { bento, cards };
|
||||
|
||||
export const rendererLabels: Record<RendererName, string> = {
|
||||
bento: "Bento",
|
||||
cards: "Cards",
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { ComponentType, ReactNode } from "react";
|
||||
import type { Item, Section, Status } from "@/types";
|
||||
|
||||
// Renderer contract — same board state, shared dnd/popover/dialog primitives,
|
||||
// different structure per style. New renderers implement this shape only.
|
||||
// Dnd stays shared: views call useSectionDnd / useItemDnd hooks internally.
|
||||
|
||||
export interface SectionViewProps {
|
||||
section: Section;
|
||||
onToggle(): void;
|
||||
onDelete(): void;
|
||||
children: ReactNode; // rendered items grid (ItemSortZone output)
|
||||
}
|
||||
|
||||
export interface ItemViewProps {
|
||||
item: Item;
|
||||
sectionId: string;
|
||||
status?: Status | undefined;
|
||||
onEdit(): void;
|
||||
}
|
||||
|
||||
export interface BoardViewProps {
|
||||
children: ReactNode; // rendered sections
|
||||
}
|
||||
|
||||
export interface RendererViews {
|
||||
/** Arrangement wrapper around the section list. */
|
||||
BoardView: ComponentType<BoardViewProps>;
|
||||
/** Section chrome: label, count, collapse, drag grip. */
|
||||
SectionView: ComponentType<SectionViewProps>;
|
||||
/** Service tile anatomy: icon, name, host, status, launch anchor. */
|
||||
ItemView: ComponentType<ItemViewProps>;
|
||||
/** Widget tile anatomy (Phase 2 fills in). */
|
||||
WidgetView: ComponentType<ItemViewProps>;
|
||||
/** Tailwind classes for the items grid inside a section. */
|
||||
itemsGridClass: string;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { components, paths } from "@dash/api-client";
|
||||
|
||||
// Board entities — generated from openapi.yaml. Never hand-edit shapes here.
|
||||
export type Section = components["schemas"]["Section"];
|
||||
export type Item = components["schemas"]["Item"];
|
||||
export type BoardUrl = components["schemas"]["Url"];
|
||||
export type UrlInput = components["schemas"]["UrlInput"];
|
||||
export type ItemInput = components["schemas"]["ItemInput"];
|
||||
export type ItemPatch = components["schemas"]["ItemPatch"];
|
||||
export type Status = components["schemas"]["Status"];
|
||||
export type StatusMap = Record<string, Status>;
|
||||
export type ExportPayload = components["schemas"]["Export"];
|
||||
|
||||
export type Theme = "dark" | "light";
|
||||
export type RendererName = "bento" | "cards";
|
||||
|
||||
/** Wire shape of GET /api/settings — a free-form map we narrow at the boundary. */
|
||||
export type SettingsWire = NonNullable<
|
||||
paths["/api/settings"]["get"]["responses"]["200"]["content"]["application/json"]
|
||||
>;
|
||||
|
||||
export interface Prefs {
|
||||
theme: Theme;
|
||||
renderer: RendererName;
|
||||
}
|
||||
|
||||
/** Narrow the settings map to typed prefs; unknown/absent keys fall back. */
|
||||
export function parsePrefs(raw: SettingsWire): Prefs {
|
||||
return {
|
||||
theme: raw.theme === "light" ? "light" : "dark",
|
||||
renderer: raw.renderer === "cards" ? "cards" : "bento",
|
||||
};
|
||||
}
|
||||
Reference in new issue
Block a user