feat(studio): surface the Visual Catalog Manager in the Studio nav
The catalog manager (with auto-category wizard) now lives inside the Studio navigation for teams that manage furniture inline. The button is gated on CATALOG_EDIT; only users with that permission see the launcher. - Split server/client Studio layout to derive permissions server-side - Add optional triggerLabel prop to CatalogManagerDialog for custom labels - Wire the Catalog manager button in the Studio nav right cluster - Keep existing /admin/catalog entry points unchanged
This commit is contained in:
openhands committed
1 parent
f832479e52
commit
f5c2c05f6e
3 files changed
+184
-151
No files matched your search
+13
-150
@@ -1,158 +1,21 @@
|
||||
"use client";
|
||||
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
||||
import { StudioLayoutClient } from "./studio-layout-client";
|
||||
|
||||
import {
|
||||
BadgeCheck,
|
||||
Cat,
|
||||
ChevronDown,
|
||||
ClipboardCheck,
|
||||
Copy,
|
||||
Dumbbell,
|
||||
Image as ImageIcon,
|
||||
type LucideIcon,
|
||||
Puzzle,
|
||||
RefreshCw,
|
||||
Shirt,
|
||||
Upload,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import Link from "@/components/link";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type StudioLink = { href: string; label: string; icon: LucideIcon };
|
||||
const assets: StudioLink[] = [
|
||||
{ href: "/admin/studio/furni", label: "Furniture", icon: Puzzle },
|
||||
{ href: "/admin/studio/badges", label: "Badges", icon: BadgeCheck },
|
||||
{ href: "/admin/studio/clothing", label: "Clothing", icon: Shirt },
|
||||
{ href: "/admin/studio/effects", label: "Effects", icon: Dumbbell },
|
||||
{ href: "/admin/studio/pets", label: "Pets", icon: Cat },
|
||||
];
|
||||
const imports: StudioLink[] = [
|
||||
{ href: "/admin/studio/upload", label: "Upload files", icon: Upload },
|
||||
{ href: "/admin/studio/clone", label: "Import from a source", icon: Copy },
|
||||
{ href: "/admin/studio/sync", label: "Sync & repository", icon: RefreshCw },
|
||||
];
|
||||
const maintenance: StudioLink[] = [
|
||||
{ href: "/admin/studio/audit", label: "Catalog audit", icon: ClipboardCheck },
|
||||
{
|
||||
href: "/admin/studio/repair-icons",
|
||||
label: "Repair icons",
|
||||
icon: ImageIcon,
|
||||
},
|
||||
{
|
||||
href: "/admin/studio/maintenance",
|
||||
label: "Catalog maintenance",
|
||||
icon: Wrench,
|
||||
},
|
||||
];
|
||||
const activePath = (path: string, href: string) =>
|
||||
path === href || path.startsWith(`${href}/`);
|
||||
|
||||
function StudioMenu({
|
||||
label,
|
||||
links,
|
||||
pathname,
|
||||
}: {
|
||||
label: string;
|
||||
links: StudioLink[];
|
||||
pathname: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const active = links.find((link) => activePath(pathname, link.href));
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger
|
||||
className={cn(
|
||||
"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium",
|
||||
active
|
||||
? "bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
<ChevronDown size={14} />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="end"
|
||||
className="w-64 border-[var(--admin-border)] bg-[var(--admin-surface)] p-1.5 text-[var(--admin-text)]"
|
||||
>
|
||||
{links.map(({ href, label: title, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
style={{
|
||||
color: activePath(pathname, href)
|
||||
? "var(--admin-text)"
|
||||
: "var(--admin-text-muted)",
|
||||
}}
|
||||
onClick={() => setOpen(false)}
|
||||
aria-current={activePath(pathname, href) ? "page" : undefined}
|
||||
className="flex min-h-11 items-center gap-3 rounded-md px-3 text-sm hover:bg-[var(--admin-accent)]/10 aria-[current=page]:bg-[var(--admin-accent)]/15"
|
||||
>
|
||||
<Icon size={16} />
|
||||
{title}
|
||||
</Link>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
export default function StudioLayout({
|
||||
export default async function StudioLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const pathname = usePathname() ?? "";
|
||||
const { session, permissions } = await getAdminContext();
|
||||
const canEditCatalog = canAccess(
|
||||
permissions,
|
||||
PERMS.CATALOG_EDIT,
|
||||
session.user.rank,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100dvh-7rem)] min-h-[600px] min-w-0 flex-col overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]">
|
||||
<nav
|
||||
aria-label="Catalog Studio"
|
||||
className="flex shrink-0 flex-wrap items-center justify-between gap-1 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] p-2"
|
||||
>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{assets.map(({ href, label, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
style={{
|
||||
color: activePath(pathname, href)
|
||||
? "var(--admin-accent-foreground)"
|
||||
: "var(--admin-text-muted)",
|
||||
}}
|
||||
aria-current={activePath(pathname, href) ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors",
|
||||
activePath(pathname, href)
|
||||
? "bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]"
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<Icon size={16} />
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<StudioMenu
|
||||
label="Import & sync"
|
||||
links={imports}
|
||||
pathname={pathname}
|
||||
/>
|
||||
<StudioMenu
|
||||
label="Maintenance"
|
||||
links={maintenance}
|
||||
pathname={pathname}
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
|
||||
</div>
|
||||
<StudioLayoutClient canEditCatalog={canEditCatalog}>
|
||||
{children}
|
||||
</StudioLayoutClient>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
BadgeCheck,
|
||||
Cat,
|
||||
ChevronDown,
|
||||
ClipboardCheck,
|
||||
Copy,
|
||||
Dumbbell,
|
||||
Image as ImageIcon,
|
||||
type LucideIcon,
|
||||
Puzzle,
|
||||
RefreshCw,
|
||||
Shirt,
|
||||
Upload,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { CatalogManagerDialog } from "@/app/admin/catalog/catalog-manager-dialog-wrapper";
|
||||
import Link from "@/components/link";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type StudioLink = { href: string; label: string; icon: LucideIcon };
|
||||
const assets: StudioLink[] = [
|
||||
{ href: "/admin/studio/furni", label: "Furniture", icon: Puzzle },
|
||||
{ href: "/admin/studio/badges", label: "Badges", icon: BadgeCheck },
|
||||
{ href: "/admin/studio/clothing", label: "Clothing", icon: Shirt },
|
||||
{ href: "/admin/studio/effects", label: "Effects", icon: Dumbbell },
|
||||
{ href: "/admin/studio/pets", label: "Pets", icon: Cat },
|
||||
];
|
||||
const imports: StudioLink[] = [
|
||||
{ href: "/admin/studio/upload", label: "Upload files", icon: Upload },
|
||||
{ href: "/admin/studio/clone", label: "Import from a source", icon: Copy },
|
||||
{ href: "/admin/studio/sync", label: "Sync & repository", icon: RefreshCw },
|
||||
];
|
||||
const maintenance: StudioLink[] = [
|
||||
{ href: "/admin/studio/audit", label: "Catalog audit", icon: ClipboardCheck },
|
||||
{
|
||||
href: "/admin/studio/repair-icons",
|
||||
label: "Repair icons",
|
||||
icon: ImageIcon,
|
||||
},
|
||||
{
|
||||
href: "/admin/studio/maintenance",
|
||||
label: "Catalog maintenance",
|
||||
icon: Wrench,
|
||||
},
|
||||
];
|
||||
const activePath = (path: string, href: string) =>
|
||||
path === href || path.startsWith(`${href}/`);
|
||||
|
||||
function StudioMenu({
|
||||
label,
|
||||
links,
|
||||
pathname,
|
||||
}: {
|
||||
label: string;
|
||||
links: StudioLink[];
|
||||
pathname: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const active = links.find((link) => activePath(pathname, link.href));
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger
|
||||
className={cn(
|
||||
"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium",
|
||||
active
|
||||
? "bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
<ChevronDown size={14} />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="end"
|
||||
className="w-64 border-[var(--admin-border)] bg-[var(--admin-surface)] p-1.5 text-[var(--admin-text)]"
|
||||
>
|
||||
{links.map(({ href, label: title, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
style={{
|
||||
color: activePath(pathname, href)
|
||||
? "var(--admin-text)"
|
||||
: "var(--admin-text-muted)",
|
||||
}}
|
||||
onClick={() => setOpen(false)}
|
||||
aria-current={activePath(pathname, href) ? "page" : undefined}
|
||||
className="flex min-h-11 items-center gap-3 rounded-md px-3 text-sm hover:bg-[var(--admin-accent)]/10 aria-[current=page]:bg-[var(--admin-accent)]/15"
|
||||
>
|
||||
<Icon size={16} />
|
||||
{title}
|
||||
</Link>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
export function StudioLayoutClient({
|
||||
canEditCatalog,
|
||||
children,
|
||||
}: {
|
||||
canEditCatalog: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const pathname = usePathname() ?? "";
|
||||
return (
|
||||
<div className="flex h-[calc(100dvh-7rem)] min-h-[600px] min-w-0 flex-col overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]">
|
||||
<nav
|
||||
aria-label="Catalog Studio"
|
||||
className="flex shrink-0 flex-wrap items-center justify-between gap-1 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] p-2"
|
||||
>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{assets.map(({ href, label, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
style={{
|
||||
color: activePath(pathname, href)
|
||||
? "var(--admin-accent-foreground)"
|
||||
: "var(--admin-text-muted)",
|
||||
}}
|
||||
aria-current={activePath(pathname, href) ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors",
|
||||
activePath(pathname, href)
|
||||
? "bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]"
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<Icon size={16} />
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{canEditCatalog && (
|
||||
<CatalogManagerDialog
|
||||
catalogType="normal"
|
||||
canEdit
|
||||
triggerLabel="Catalog manager"
|
||||
/>
|
||||
)}
|
||||
<StudioMenu
|
||||
label="Import & sync"
|
||||
links={imports}
|
||||
pathname={pathname}
|
||||
/>
|
||||
<StudioMenu
|
||||
label="Maintenance"
|
||||
links={maintenance}
|
||||
pathname={pathname}
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -74,11 +74,13 @@ export function CatalogManagerDialog({
|
||||
catalogType = "normal",
|
||||
canEdit = false,
|
||||
totals = null,
|
||||
triggerLabel,
|
||||
}: {
|
||||
initialRoots?: RootTab[];
|
||||
catalogType?: CatalogManagerMode;
|
||||
canEdit?: boolean;
|
||||
totals?: CatalogStatsTotals | null;
|
||||
triggerLabel?: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
@@ -115,7 +117,7 @@ export function CatalogManagerDialog({
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<LayoutGrid className="h-4 w-4" />
|
||||
{title}
|
||||
{triggerLabel ?? title}
|
||||
</Button>
|
||||
{mounted && open
|
||||
? createPortal(
|
||||
|
||||
Reference in new issue
Block a user