mirror of
https://github.com/Dvorinka/Dash.git
synced 2026-10-29 00:01:24 +00:00
feat: phase 3 renderers & ergonomics — index/console, ⌘K palette, icon suggest
- Index renderer (editorial): serif masthead + section heads, numbered full-width rows, live stat strip (time/services/up/down/widgets) - Console renderer (terminal): $ dash status banner, bordered stat panels, ## section heads, › prompt rows, [ up ]/[ down ] tags - Renderer contract gains index prop for row/section numbering - Settings: 2x2 renderer radio grid with per-renderer descriptions - ⌘K/Ctrl+K// palette: actions + service endpoints, arrow-key nav, zero-dep implementation on the existing Dialog primitive - Icon picker: dashboard-icons slug suggestion chip + live preview - Fonts: Instrument Serif, JetBrains Mono (fontsource) - Fix: global :focus-visible rule was unlayered and silently overrode all focus-visible: utilities since phase 1 — moved into @layer base Verified: typecheck/lint/build clean, dnd + collapse + popover in both new renderers, palette filter + execute, icon suggest resolves real CDN assets, 360px + light theme, docker image 43.9 MB serving board + widget types. 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
8afc7df53b
commit
55fb57456e
16 files changed
+803
-51
No files matched your search
@@ -0,0 +1,224 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { ChevronDown, GripVertical, Pencil, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useItemDnd, useSectionDnd } from "@/board/dnd";
|
||||
import { useBoard } from "@/board/store";
|
||||
import { IconImg, ItemAnchor, hostOf } from "@/board/primitives";
|
||||
import { WidgetContent } from "@/widgets";
|
||||
import type {
|
||||
BoardViewProps,
|
||||
ItemViewProps,
|
||||
RendererViews,
|
||||
SectionViewProps,
|
||||
} from "@/renderers/types";
|
||||
|
||||
// Index — editorial/list renderer. Serif masthead + section heads, numbered
|
||||
// full-width rows, stat strip. Ported from mockups/e-editorial.html.
|
||||
|
||||
function BoardView({ children }: BoardViewProps) {
|
||||
const board = useBoard();
|
||||
const [now, setNow] = useState(() => new Date());
|
||||
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setNow(new Date()), 1000);
|
||||
return () => clearInterval(t);
|
||||
}, []);
|
||||
|
||||
const services = board.sections.flatMap((s) => s.items).filter((i) => i.kind !== "widget");
|
||||
const widgets = board.sections.flatMap((s) => s.items).filter((i) => i.kind === "widget");
|
||||
const up = services.filter((i) => board.statuses[i.id]?.status === "up").length;
|
||||
const down = services.filter((i) => board.statuses[i.id]?.status === "down").length;
|
||||
|
||||
const time = new Intl.DateTimeFormat(undefined, {
|
||||
hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
|
||||
}).format(now);
|
||||
const date = new Intl.DateTimeFormat(undefined, {
|
||||
weekday: "long", day: "numeric", month: "long", year: "numeric",
|
||||
}).format(now);
|
||||
|
||||
const cells: [string, string, string][] = [
|
||||
["Local time", time, date.split(",")[0] ?? ""],
|
||||
["Services", String(services.length), `${board.sections.length} sections`],
|
||||
["Up", String(up), "responding"],
|
||||
["Down", String(down), down === 0 ? "all green" : "offline"],
|
||||
["Widgets", String(widgets.length), "registered"],
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<header className="mb-7 flex items-end justify-between gap-6 border-b border-border-strong pb-5">
|
||||
<h1 className="font-serif text-[52px] leading-none tracking-tight max-[620px]:text-[38px]">
|
||||
Dash.
|
||||
</h1>
|
||||
<span className="pb-1 text-right font-mono text-[11px] uppercase tracking-[0.08em] text-text-faint">
|
||||
{date}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div className="mb-10 grid grid-cols-2 gap-px overflow-hidden rounded-[10px] border border-border bg-border min-[760px]:grid-cols-5">
|
||||
{cells.map(([k, v, s]) => (
|
||||
<div key={k} className="bg-surface px-4 py-3.5">
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.1em] text-text-faint">{k}</div>
|
||||
<div className="mt-1 font-mono text-[24px] font-medium leading-none tracking-tight tabular-nums">{v}</div>
|
||||
<div className="mt-1.5 truncate text-[10.5px] text-text-faint">{s}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-9">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionView({ section, index, 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 mb-0.5 flex cursor-pointer select-none items-baseline gap-3.5 border-b border-border-strong pb-2.5">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Drag section"
|
||||
className="cursor-grab self-center 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-baseline gap-3.5 text-left"
|
||||
>
|
||||
<span className="font-serif text-[30px] leading-none text-text-faint tabular-nums">
|
||||
{String(index + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<h2 className="truncate font-serif text-[30px] leading-none tracking-tight">
|
||||
{section.name}
|
||||
</h2>
|
||||
<span className="font-mono text-[11px] text-text-faint">
|
||||
{section.items.length} {section.items.length === 1 ? "entry" : "entries"}
|
||||
</span>
|
||||
<ChevronDown
|
||||
size={14}
|
||||
className={cn("ml-auto self-center text-text-faint transition-transform duration-200", section.collapsed && "-rotate-90")}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Delete section"
|
||||
onClick={onDelete}
|
||||
className="self-center 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, index, sectionId, status, onEdit }: ItemViewProps) {
|
||||
const dnd = useItemDnd(sectionId, item.id);
|
||||
const host = item.urls[0] ? hostOf(item.urls[0].url) : "";
|
||||
const state = status?.status;
|
||||
return (
|
||||
<ItemAnchor item={item} onEdit={onEdit}>
|
||||
{(open) => (
|
||||
<div
|
||||
ref={dnd.ref}
|
||||
style={dnd.style}
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
onClick={open}
|
||||
className={cn(
|
||||
"group/row relative grid cursor-grab grid-cols-[26px_30px_minmax(0,1fr)_64px] items-center gap-3.5",
|
||||
"border-b border-border px-1.5 py-[11px] transition-colors hover:bg-surface-hover",
|
||||
"min-[760px]:grid-cols-[30px_34px_minmax(0,1.4fr)_minmax(0,1fr)_auto_70px_22px]",
|
||||
dnd.isDragging && "opacity-35",
|
||||
)}
|
||||
>
|
||||
<span className="font-mono text-[11px] text-text-faint tabular-nums">
|
||||
{String(index + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<IconImg item={item} size={30} />
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-[14px] font-medium tracking-tight">{item.name}</span>
|
||||
{host ? <span className="block truncate font-mono text-[10.5px] text-text-faint min-[760px]:hidden">{host}</span> : null}
|
||||
</span>
|
||||
<span className="hidden min-w-0 truncate font-mono text-[11px] text-text-faint min-[760px]:block">{host}</span>
|
||||
<span className="hidden justify-end gap-1.5 min-[760px]:flex">
|
||||
{item.urls.slice(0, 2).map((u) => u.label ? (
|
||||
<span key={u.id} className="rounded border border-border px-[5px] py-0.5 font-mono text-[9px] uppercase tracking-[0.08em] text-text-faint">
|
||||
{u.label}
|
||||
</span>
|
||||
) : null)}
|
||||
</span>
|
||||
{item.urls.length > 0 ? (
|
||||
<span className="flex items-center gap-1.5 justify-self-end font-mono text-[10.5px] tracking-[0.05em] text-text-dim transition-opacity group-hover/row:opacity-0">
|
||||
<span className={cn("size-[5px] rounded-full", state === "up" ? "bg-up" : state === "down" ? "bg-down" : "bg-text-faint/40")} />
|
||||
{state ?? "…"}
|
||||
</span>
|
||||
) : <span />}
|
||||
<span className="hidden justify-self-end text-text-faint opacity-0 transition-all group-hover/row:opacity-100 min-[760px]:block">→</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Edit ${item.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded bg-popover p-1 text-text-faint opacity-0 transition-opacity hover:text-text group-hover/row:opacity-100"
|
||||
>
|
||||
<Pencil size={11} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</ItemAnchor>
|
||||
);
|
||||
}
|
||||
|
||||
function WidgetView({ item, index, sectionId, onEdit }: ItemViewProps) {
|
||||
const dnd = useItemDnd(sectionId, item.id);
|
||||
return (
|
||||
<div
|
||||
ref={dnd.ref}
|
||||
style={dnd.style}
|
||||
{...dnd.attributes}
|
||||
{...dnd.listeners}
|
||||
className={cn(
|
||||
"group/row relative grid cursor-grab grid-cols-[26px_30px_minmax(0,1fr)] items-center gap-3.5",
|
||||
"border-b border-border px-1.5 py-[11px] transition-colors hover:bg-surface-hover",
|
||||
"min-[760px]:grid-cols-[30px_34px_minmax(0,0.8fr)_minmax(0,1.2fr)]",
|
||||
dnd.isDragging && "opacity-35",
|
||||
)}
|
||||
>
|
||||
<span className="font-mono text-[11px] text-text-faint tabular-nums">
|
||||
{String(index + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<IconImg item={item} size={30} />
|
||||
<span className="min-w-0 truncate text-[14px] font-medium tracking-tight">{item.name}</span>
|
||||
<div className="min-w-0 max-[759px]:col-start-3">
|
||||
<WidgetContent item={item} />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Edit ${item.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
className="absolute right-2.5 top-2 rounded bg-popover p-1 text-text-faint opacity-0 transition-opacity hover:text-text group-hover/row:opacity-100"
|
||||
>
|
||||
<Pencil size={11} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const editorial: RendererViews = {
|
||||
BoardView,
|
||||
SectionView,
|
||||
ItemView,
|
||||
WidgetView,
|
||||
itemsGridClass: "flex flex-col",
|
||||
};
|
||||
Reference in new issue
Block a user