Implement tasks 25, 26 + completion visibility setting
Task 25: Multiple dashboards — dashboards table + migration, /d/[slug] route, root redirect, dashboard tabs in nav with create/rename/delete/ set-default. Task 26: Editable dashboard — react-grid-layout drag/resize editor, widget picker modal with per-widget configurator auto-generated from default config, save/reset server actions with Zod validation. Completion visibility: server-side per-user setting (hours) replaces localStorage timer; queries filter completed items by updatedAt cutoff; Settings page dropdown persists preference via server action. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ginnoir
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
2ad9521ef9
commit
d5a8bf9d95
+35
-21
@@ -1,32 +1,46 @@
|
||||
import Link from "next/link";
|
||||
import { Settings } from "lucide-react";
|
||||
import { getRegistry } from "@/modules/_core/registry";
|
||||
import type { DashboardMeta } from "@/app/d/actions";
|
||||
import { DashboardSwitcher } from "./dashboard-switcher";
|
||||
import { DashboardTab } from "./dashboard-tab";
|
||||
|
||||
export function AppNav() {
|
||||
export function AppNav({ dashboards = [] }: { dashboards?: DashboardMeta[] }) {
|
||||
const { modules } = getRegistry();
|
||||
const navItems = modules.flatMap((m) => (m.nav ? [m.nav] : []));
|
||||
|
||||
return (
|
||||
<nav className="border-b px-4 py-3 flex items-center gap-6">
|
||||
<Link href="/" className="font-semibold text-sm">
|
||||
famapp
|
||||
</Link>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
<header className="border-b">
|
||||
<nav className="px-4 py-3 flex items-center gap-6">
|
||||
<Link href="/" className="font-semibold text-sm shrink-0">
|
||||
famapp
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/settings"
|
||||
className="ml-auto text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<Settings className="size-4" />
|
||||
</Link>
|
||||
</nav>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/settings"
|
||||
className="ml-auto text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<Settings className="size-4" />
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{dashboards.length > 0 && (
|
||||
<div className="flex items-center gap-1 border-t px-4 overflow-x-auto">
|
||||
{dashboards.map((d) => (
|
||||
<DashboardTab key={d.id} slug={d.slug} name={d.name} />
|
||||
))}
|
||||
<DashboardSwitcher dashboards={dashboards} />
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,25 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { DELAY_OPTIONS, useCompletionDelay } from "@/hooks/use-completion-delay";
|
||||
import { useTransition } from "react";
|
||||
import { setCompletionVisibilityHours } from "@/app/settings/actions";
|
||||
|
||||
export function CompletionDelaySetting() {
|
||||
const { delay, setDelay } = useCompletionDelay();
|
||||
const OPTIONS = [
|
||||
{ label: "1 hour", value: 1 },
|
||||
{ label: "4 hours", value: 4 },
|
||||
{ label: "8 hours", value: 8 },
|
||||
{ label: "24 hours (default)", value: 24 },
|
||||
{ label: "48 hours", value: 48 },
|
||||
{ label: "7 days", value: 168 },
|
||||
{ label: "Never hide", value: 8760 },
|
||||
];
|
||||
|
||||
export function CompletionDelaySetting({ initialHours }: { initialHours: number }) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
const hours = Number(e.target.value);
|
||||
startTransition(() => setCompletionVisibilityHours(hours));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Completion delay</p>
|
||||
<p className="text-sm font-medium">Show completed items for</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
How long a checked-off item stays visible before disappearing from list cards and the
|
||||
dashboard.
|
||||
How long checked-off items remain visible on list cards and the dashboard.
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={delay}
|
||||
onChange={(e) => setDelay(Number(e.target.value))}
|
||||
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
defaultValue={initialHours}
|
||||
onChange={handleChange}
|
||||
disabled={isPending}
|
||||
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
|
||||
>
|
||||
{DELAY_OPTIONS.map((opt) => (
|
||||
{OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
"use client";
|
||||
|
||||
import "react-grid-layout/css/styles.css";
|
||||
import "react-resizable/css/styles.css";
|
||||
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { GridLayout } from "react-grid-layout";
|
||||
import type { Layout } from "react-grid-layout";
|
||||
import { GripVertical, Settings2, Trash2, RotateCcw, Plus } from "lucide-react";
|
||||
import type { DashboardLayout, WidgetPlacement } from "@/lib/dashboard";
|
||||
import type { SerializedWidgetMeta } from "@/modules/_core/registry";
|
||||
import { saveDashboardLayout, resetDashboardLayout } from "@/app/d/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { WidgetPicker } from "./widget-picker";
|
||||
|
||||
function placementKey(placement: WidgetPlacement, index: number) {
|
||||
return `${placement.widgetId}::${index}`;
|
||||
}
|
||||
|
||||
export function DashboardEditor({
|
||||
dashboard,
|
||||
layout: initialLayout,
|
||||
widgetMetas,
|
||||
}: {
|
||||
dashboard: { id: string; name: string; slug: string };
|
||||
layout: DashboardLayout;
|
||||
widgetMetas: SerializedWidgetMeta[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [placements, setPlacements] = useState<WidgetPlacement[]>(initialLayout.widgets);
|
||||
const [isDirty, setIsDirty] = useState(false);
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [configuringIndex, setConfiguringIndex] = useState<number | null>(null);
|
||||
const [containerWidth, setContainerWidth] = useState(1200);
|
||||
|
||||
useEffect(() => {
|
||||
function measure() {
|
||||
const el = document.getElementById("dashboard-editor-grid");
|
||||
if (el) setContainerWidth(el.offsetWidth);
|
||||
}
|
||||
measure();
|
||||
window.addEventListener("resize", measure);
|
||||
return () => window.removeEventListener("resize", measure);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") handleCancel();
|
||||
}
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dashboard.slug]);
|
||||
|
||||
function handleCancel() {
|
||||
router.push(`/d/${dashboard.slug}`);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
startTransition(async () => {
|
||||
await saveDashboardLayout(dashboard.id, { version: 1, widgets: placements });
|
||||
router.push(`/d/${dashboard.slug}`);
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
startTransition(async () => {
|
||||
await resetDashboardLayout(dashboard.id);
|
||||
router.push(`/d/${dashboard.slug}`);
|
||||
});
|
||||
}
|
||||
|
||||
function handleLayoutChange(items: Layout) {
|
||||
setPlacements((current) =>
|
||||
current.map((p, i) => {
|
||||
const key = placementKey(p, i);
|
||||
const item = items.find((it) => it.i === key);
|
||||
if (!item) return p;
|
||||
return { ...p, x: item.x, y: item.y, w: item.w, h: item.h };
|
||||
}),
|
||||
);
|
||||
setIsDirty(true);
|
||||
}
|
||||
|
||||
function removeWidget(index: number) {
|
||||
setPlacements((current) => current.filter((_, i) => i !== index));
|
||||
setIsDirty(true);
|
||||
}
|
||||
|
||||
function addWidget(widgetId: string, config: unknown) {
|
||||
const meta = widgetMetas.find((m) => m.id === widgetId);
|
||||
if (!meta) return;
|
||||
const maxY = placements.reduce((m, p) => Math.max(m, p.y + p.h), 0);
|
||||
setPlacements((current) => [
|
||||
...current,
|
||||
{ widgetId, config, x: 0, y: maxY, w: meta.defaultSize.w, h: meta.defaultSize.h },
|
||||
]);
|
||||
setIsDirty(true);
|
||||
setPickerOpen(false);
|
||||
}
|
||||
|
||||
function updateConfig(index: number, config: unknown) {
|
||||
setPlacements((current) =>
|
||||
current.map((p, i) => (i === index ? { ...p, config } : p)),
|
||||
);
|
||||
setIsDirty(true);
|
||||
setConfiguringIndex(null);
|
||||
}
|
||||
|
||||
const gridItems: Layout = placements.map((p, i) => ({
|
||||
i: placementKey(p, i),
|
||||
x: p.x, y: p.y, w: p.w, h: p.h,
|
||||
minW: widgetMetas.find((m) => m.id === p.widgetId)?.minSize?.w ?? 2,
|
||||
minH: widgetMetas.find((m) => m.id === p.widgetId)?.minSize?.h ?? 1,
|
||||
maxW: widgetMetas.find((m) => m.id === p.widgetId)?.maxSize?.w ?? 12,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6">
|
||||
<div className="mb-6 flex items-center justify-between gap-4 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">{dashboard.name}</h1>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button variant="outline" size="sm" onClick={handleReset} disabled={isPending}>
|
||||
<RotateCcw className="size-4 mr-1" />
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setPickerOpen(true)} disabled={isPending}>
|
||||
<Plus className="size-4 mr-1" />
|
||||
Add widget
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleCancel} disabled={isPending}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave} disabled={!isDirty || isPending}>
|
||||
{isPending ? "Saving…" : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
Drag to reorder · resize from the bottom-right corner · ESC to cancel
|
||||
</p>
|
||||
|
||||
<div id="dashboard-editor-grid">
|
||||
<GridLayout
|
||||
layout={gridItems}
|
||||
width={containerWidth}
|
||||
gridConfig={{ cols: 12, rowHeight: 60, margin: [16, 16] as [number, number], containerPadding: [0, 0] as [number, number] }}
|
||||
dragConfig={{ handle: ".drag-handle" }}
|
||||
onLayoutChange={handleLayoutChange}
|
||||
>
|
||||
{placements.map((placement, i) => {
|
||||
const meta = widgetMetas.find((m) => m.id === placement.widgetId);
|
||||
return (
|
||||
<div
|
||||
key={placementKey(placement, i)}
|
||||
className="rounded-lg border bg-card text-card-foreground flex flex-col overflow-hidden"
|
||||
>
|
||||
<div className="drag-handle flex items-center gap-2 px-3 py-2 bg-muted/40 cursor-grab active:cursor-grabbing select-none border-b">
|
||||
<GripVertical className="size-4 text-muted-foreground shrink-0" />
|
||||
<span className="text-sm font-medium truncate flex-1">
|
||||
{meta?.title ?? placement.widgetId}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfiguringIndex(i)}
|
||||
className="text-muted-foreground hover:text-foreground transition-colors p-0.5"
|
||||
aria-label="Configure widget"
|
||||
>
|
||||
<Settings2 className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeWidget(i)}
|
||||
className="text-muted-foreground hover:text-destructive transition-colors p-0.5"
|
||||
aria-label="Remove widget"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-center p-4">
|
||||
<p className="text-xs text-muted-foreground">{meta?.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</GridLayout>
|
||||
</div>
|
||||
|
||||
{placements.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-24 gap-4 text-center">
|
||||
<p className="text-muted-foreground">No widgets yet.</p>
|
||||
<Button onClick={() => setPickerOpen(true)}>
|
||||
<Plus className="size-4 mr-1" />
|
||||
Add widget
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pickerOpen && (
|
||||
<WidgetPicker
|
||||
onClose={() => setPickerOpen(false)}
|
||||
widgetMetas={widgetMetas}
|
||||
onAdd={addWidget}
|
||||
/>
|
||||
)}
|
||||
|
||||
{configuringIndex !== null && (
|
||||
<WidgetPicker
|
||||
onClose={() => setConfiguringIndex(null)}
|
||||
widgetMetas={widgetMetas}
|
||||
onAdd={(_, config) => updateConfig(configuringIndex, config)}
|
||||
initialWidgetId={placements[configuringIndex]?.widgetId}
|
||||
initialConfig={placements[configuringIndex]?.config}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
import { MoreHorizontal, Plus, Star, Trash2, PenLine } from "lucide-react";
|
||||
import {
|
||||
createDashboard,
|
||||
deleteDashboard,
|
||||
renameDashboard,
|
||||
setDefaultDashboard,
|
||||
} from "@/app/d/actions";
|
||||
import type { DashboardMeta } from "@/app/d/actions";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
export function DashboardSwitcher({ dashboards }: { dashboards: DashboardMeta[] }) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [, startTransition] = useTransition();
|
||||
const [creatingNew, setCreatingNew] = useState(false);
|
||||
const [newName, setNewName] = useState("");
|
||||
|
||||
function activeSlug() {
|
||||
const m = pathname.match(/^\/d\/([^/]+)/);
|
||||
return m?.[1] ?? null;
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
if (!newName.trim()) return;
|
||||
startTransition(async () => {
|
||||
const created = await createDashboard(newName.trim());
|
||||
setCreatingNew(false);
|
||||
setNewName("");
|
||||
router.push(`/d/${created.slug}`);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Active tab highlights — overlay on top of the server-rendered links */}
|
||||
{dashboards.map((d) => {
|
||||
const isActive = activeSlug() === d.slug;
|
||||
return (
|
||||
<span
|
||||
key={d.id}
|
||||
aria-hidden
|
||||
className={`absolute pointer-events-none border-b-2 transition-colors ${
|
||||
isActive ? "border-primary" : "border-transparent"
|
||||
}`}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{creatingNew ? (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleCreate();
|
||||
}}
|
||||
className="flex items-center gap-1 ml-1"
|
||||
>
|
||||
<input
|
||||
autoFocus
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder="Dashboard name"
|
||||
className="h-7 rounded border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
onKeyDown={(e) => e.key === "Escape" && setCreatingNew(false)}
|
||||
/>
|
||||
<button type="submit" className="text-xs text-muted-foreground hover:text-foreground px-1">
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreatingNew(false)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground px-1"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreatingNew(true)}
|
||||
className="shrink-0 flex items-center gap-1 px-2 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label="New dashboard"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{dashboards.map((d) => {
|
||||
const isActive = activeSlug() === d.slug;
|
||||
if (!isActive) return null;
|
||||
return (
|
||||
<DashboardKebab
|
||||
key={d.id}
|
||||
dashboard={d}
|
||||
canDelete={dashboards.length > 1}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DashboardKebab({
|
||||
dashboard,
|
||||
canDelete,
|
||||
}: {
|
||||
dashboard: DashboardMeta;
|
||||
canDelete: boolean;
|
||||
}) {
|
||||
const [, startTransition] = useTransition();
|
||||
const [renaming, setRenaming] = useState(false);
|
||||
const [newName, setNewName] = useState(dashboard.name);
|
||||
|
||||
function handleRename() {
|
||||
if (!newName.trim() || newName === dashboard.name) {
|
||||
setRenaming(false);
|
||||
return;
|
||||
}
|
||||
startTransition(async () => {
|
||||
await renameDashboard(dashboard.id, newName.trim());
|
||||
setRenaming(false);
|
||||
});
|
||||
}
|
||||
|
||||
if (renaming) {
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleRename();
|
||||
}}
|
||||
className="flex items-center gap-1 ml-1"
|
||||
>
|
||||
<input
|
||||
autoFocus
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="h-7 rounded border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
onKeyDown={(e) => e.key === "Escape" && setRenaming(false)}
|
||||
/>
|
||||
<button type="submit" className="text-xs text-muted-foreground hover:text-foreground px-1">
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setRenaming(false)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground px-1"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className="shrink-0 flex items-center px-1 py-2 text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label="Dashboard options"
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onSelect={() => setRenaming(true)}>
|
||||
<PenLine className="size-4 mr-2" />
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
{!dashboard.isDefault && (
|
||||
<DropdownMenuItem
|
||||
onSelect={() =>
|
||||
startTransition(() => setDefaultDashboard(dashboard.id))
|
||||
}
|
||||
>
|
||||
<Star className="size-4 mr-2" />
|
||||
Set as default
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{canDelete && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onSelect={() => startTransition(() => deleteDashboard(dashboard.id))}
|
||||
>
|
||||
<Trash2 className="size-4 mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export function DashboardTab({ slug, name }: { slug: string; name: string }) {
|
||||
const pathname = usePathname();
|
||||
const isActive = pathname === `/d/${slug}` || pathname.startsWith(`/d/${slug}/`);
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/d/${slug}`}
|
||||
className={`shrink-0 px-3 py-2 text-sm transition-colors border-b-2 ${
|
||||
isActive
|
||||
? "border-primary text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
|
||||
export function EditDashboardButton() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push(`${pathname}?edit=1`)}
|
||||
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
>
|
||||
Edit dashboard
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Link, Check, Copy } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { createShareLink } from "@/modules/_core/share";
|
||||
|
||||
export function ShareButton({
|
||||
entityType,
|
||||
entityId,
|
||||
canWrite = false,
|
||||
}: {
|
||||
entityType: string;
|
||||
entityId: string;
|
||||
canWrite?: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [shareUrl, setShareUrl] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function share() {
|
||||
startTransition(async () => {
|
||||
const result = await createShareLink(entityType, entityId, {
|
||||
capabilities: { read: true, write: canWrite },
|
||||
});
|
||||
setShareUrl(result.url);
|
||||
setOpen(true);
|
||||
});
|
||||
}
|
||||
|
||||
function copyUrl() {
|
||||
if (!shareUrl) return;
|
||||
navigator.clipboard.writeText(shareUrl).then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" onClick={share} disabled={isPending}>
|
||||
<Link />
|
||||
Share
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share link created</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Anyone with this link can {canWrite ? "view and edit" : "view"} this{" "}
|
||||
{entityType.split(".")[1]}.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Input readOnly value={shareUrl ?? ""} className="font-mono text-xs" />
|
||||
<Button variant="outline" size="icon" onClick={copyUrl} aria-label="Copy link">
|
||||
{copied ? <Check className="text-green-600" /> : <Copy />}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
||||
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
||||
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
||||
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
align = "start",
|
||||
alignOffset = 0,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Popup.Props &
|
||||
Pick<
|
||||
MenuPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<MenuPrimitive.Portal>
|
||||
<MenuPrimitive.Positioner
|
||||
className="isolate z-50 outline-none"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<MenuPrimitive.Popup
|
||||
data-slot="dropdown-menu-content"
|
||||
className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</MenuPrimitive.Positioner>
|
||||
</MenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
||||
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.GroupLabel.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.GroupLabel
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: MenuPrimitive.Item.Props & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
||||
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: MenuPrimitive.SubmenuTrigger.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.SubmenuTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</MenuPrimitive.SubmenuTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
align = "start",
|
||||
alignOffset = -3,
|
||||
side = "right",
|
||||
sideOffset = 0,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
||||
return (
|
||||
<DropdownMenuContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.CheckboxItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
||||
return (
|
||||
<MenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.RadioItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Separator.Props) {
|
||||
return (
|
||||
<MenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { X, ChevronLeft } from "lucide-react";
|
||||
import type { SerializedWidgetMeta } from "@/modules/_core/registry";
|
||||
import { resolveWidgetConfigOptions } from "@/app/d/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type Step = "pick" | "configure";
|
||||
|
||||
export function WidgetPicker({
|
||||
onClose,
|
||||
widgetMetas,
|
||||
onAdd,
|
||||
initialWidgetId,
|
||||
initialConfig,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
widgetMetas: SerializedWidgetMeta[];
|
||||
onAdd: (widgetId: string, config: unknown) => void;
|
||||
initialWidgetId?: string;
|
||||
initialConfig?: unknown;
|
||||
}) {
|
||||
const [step, setStep] = useState<Step>(initialWidgetId ? "configure" : "pick");
|
||||
const [selectedId, setSelectedId] = useState<string | null>(initialWidgetId ?? null);
|
||||
const [options, setOptions] = useState<unknown>(null);
|
||||
const [config, setConfig] = useState<unknown>(initialConfig ?? null);
|
||||
const [, startTransition] = useTransition();
|
||||
|
||||
function selectWidget(id: string) {
|
||||
const meta = widgetMetas.find((m) => m.id === id);
|
||||
if (!meta) return;
|
||||
setSelectedId(id);
|
||||
setConfig(meta.defaultConfig);
|
||||
setOptions(null);
|
||||
setStep("configure");
|
||||
startTransition(async () => {
|
||||
const opts = await resolveWidgetConfigOptions(id);
|
||||
setOptions(opts);
|
||||
});
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
if (!selectedId) return;
|
||||
onAdd(selectedId, config);
|
||||
}
|
||||
|
||||
const grouped = widgetMetas.reduce<Record<string, SerializedWidgetMeta[]>>((acc, m) => {
|
||||
const cat = m.category ?? "Other";
|
||||
(acc[cat] ??= []).push(m);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const selected = widgetMetas.find((m) => m.id === selectedId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
|
||||
onClick={(e) => e.target === e.currentTarget && onClose()}
|
||||
>
|
||||
<div className="relative bg-background rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[80vh] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b">
|
||||
{step === "configure" && !initialWidgetId && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep("pick")}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
)}
|
||||
<h2 className="font-semibold flex-1 text-sm">
|
||||
{step === "pick" ? "Add widget" : selected ? `Configure: ${selected.title}` : "Configure"}
|
||||
</h2>
|
||||
<button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{step === "pick" && (
|
||||
<div className="space-y-4">
|
||||
{Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)).map(([cat, items]) => (
|
||||
<div key={cat}>
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground mb-2">{cat}</p>
|
||||
<div className="space-y-1">
|
||||
{items.map((meta) => (
|
||||
<button
|
||||
key={meta.id}
|
||||
type="button"
|
||||
onClick={() => selectWidget(meta.id)}
|
||||
className="w-full text-left rounded-md px-3 py-2 hover:bg-accent transition-colors"
|
||||
>
|
||||
<p className="text-sm font-medium">{meta.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{meta.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === "configure" && selected && (
|
||||
<WidgetConfigurator
|
||||
meta={selected}
|
||||
config={config}
|
||||
options={options}
|
||||
onChange={setConfig}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{step === "configure" && (
|
||||
<div className="flex justify-end gap-2 px-4 py-3 border-t">
|
||||
<Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
|
||||
<Button size="sm" onClick={handleAdd}>
|
||||
{initialWidgetId ? "Apply" : "Add widget"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Configurator ──────────────────────────────────────────────────────────────
|
||||
|
||||
type FieldOption = { id: string; name: string };
|
||||
|
||||
function WidgetConfigurator({
|
||||
meta,
|
||||
config,
|
||||
options,
|
||||
onChange,
|
||||
}: {
|
||||
meta: SerializedWidgetMeta;
|
||||
config: unknown;
|
||||
options: unknown;
|
||||
onChange: (c: unknown) => void;
|
||||
}) {
|
||||
const cfg = (config ?? meta.defaultConfig) as Record<string, unknown>;
|
||||
const opts = options as Record<string, FieldOption[]> | null | undefined;
|
||||
|
||||
function set(key: string, value: unknown) {
|
||||
onChange({ ...cfg, [key]: value });
|
||||
}
|
||||
|
||||
const entries = Object.entries(cfg);
|
||||
if (entries.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground">No options available.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{entries.map(([key, value]) => {
|
||||
// "all" | string[] — multi-select with All toggle
|
||||
if (value === "all" || (Array.isArray(value) && (key.endsWith("Ids") || key.endsWith("ids")))) {
|
||||
const optKey = key.replace(/Ids?$/i, "s");
|
||||
const items: FieldOption[] = (opts?.[optKey] as FieldOption[] | undefined) ?? [];
|
||||
const isAll = value === "all";
|
||||
const selected = isAll ? [] : (value as string[]);
|
||||
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAll}
|
||||
onChange={(e) => set(key, e.target.checked ? "all" : [])}
|
||||
className="accent-primary"
|
||||
/>
|
||||
All
|
||||
</label>
|
||||
{!isAll && (
|
||||
<div className="space-y-1 max-h-40 overflow-y-auto border rounded p-2">
|
||||
{items.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">None available</p>
|
||||
)}
|
||||
{items.map((item) => (
|
||||
<label key={item.id} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.includes(item.id)}
|
||||
onChange={(e) => {
|
||||
const next = e.target.checked
|
||||
? [...selected, item.id]
|
||||
: selected.filter((id) => id !== item.id);
|
||||
set(key, next);
|
||||
}}
|
||||
className="accent-primary"
|
||||
/>
|
||||
{item.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// boolean
|
||||
if (typeof value === "boolean") {
|
||||
return (
|
||||
<label key={key} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value}
|
||||
onChange={(e) => set(key, e.target.checked)}
|
||||
className="accent-primary"
|
||||
/>
|
||||
<span className="capitalize">{key.replace(/([A-Z])/g, " $1").toLowerCase()}</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
// number
|
||||
if (typeof value === "number") {
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => set(key, Number(e.target.value))}
|
||||
className="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// string (enum / plain)
|
||||
if (typeof value === "string") {
|
||||
// Detect enum-like: same key appears in options as an array of strings
|
||||
const enumOpts = opts?.[key] as string[] | undefined;
|
||||
if (Array.isArray(enumOpts)) {
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => set(key, e.target.value)}
|
||||
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{enumOpts.map((opt) => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Hardcoded enum fallback for known fields
|
||||
const knownEnums: Record<string, string[]> = {
|
||||
filter: ["pinned", "all"],
|
||||
};
|
||||
const known = knownEnums[key];
|
||||
if (known) {
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => set(key, e.target.value)}
|
||||
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{known.map((opt) => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user