Make Studio catalog rail collapsible

The catalog tree was decorative and always consumed sidebar width.
Add a toolbar toggle so admins can hide or show the catalog rail.
This commit is contained in:
openhands committed 2026-08-18 19:13:34 +02:00
1 parent 7c9602c5cd
commit f18735cf3e
1 file changed
+30 -5
+30 -5
View File
@@ -11,6 +11,8 @@ import {
List,
Loader2,
Package,
PanelLeftClose,
PanelLeftOpen,
Pencil,
RefreshCw,
Search,
@@ -74,6 +76,7 @@ export function StudioClient({
// Catalog tree
const [tree] = useState<TreeNode[]>(initialTree);
const [selectedPage, setSelectedPage] = useState<number | null>(null);
const [railOpen, setRailOpen] = useState(true);
// Search & list
const [searchTerm, setSearchTerm] = useState("");
@@ -651,6 +654,26 @@ export function StudioClient({
{/* ── Filters + actions ─────────────────────────────── */}
<div className="flex shrink-0 flex-wrap items-center gap-2 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-2">
<button
type="button"
onClick={() => setRailOpen((v) => !v)}
aria-label={railOpen ? "Hide catalog tree" : "Show catalog tree"}
title={railOpen ? "Hide catalog tree" : "Show catalog tree"}
className={cn(
"flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium transition-colors",
railOpen
? "border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
: "border-[var(--admin-accent)]/40 bg-[var(--admin-accent)]/10 text-[var(--admin-accent)]",
)}
>
{railOpen ? (
<PanelLeftClose size={13} />
) : (
<PanelLeftOpen size={13} />
)}
Catalog
</button>
<Select value={activeSource} onValueChange={changeSource}>
<SelectTrigger className="h-8 w-44 text-xs">
<SelectValue placeholder="Furni source" />
@@ -811,11 +834,13 @@ export function StudioClient({
{/* ── Body: rail + grid + drawer ────────────────────── */}
<div className="relative flex min-h-0 flex-1">
<CatalogRail
tree={tree}
selectedId={selectedPage}
onSelect={setSelectedPage}
/>
{railOpen ? (
<CatalogRail
tree={tree}
selectedId={selectedPage}
onSelect={setSelectedPage}
/>
) : null}
<main className="flex min-h-0 flex-1 flex-col">
<div className="min-h-0 flex-1 overflow-y-auto p-3">