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:
1 parent
7c9602c5cd
commit
f18735cf3e
1 file changed
+30
-5
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user