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,
|
List,
|
||||||
Loader2,
|
Loader2,
|
||||||
Package,
|
Package,
|
||||||
|
PanelLeftClose,
|
||||||
|
PanelLeftOpen,
|
||||||
Pencil,
|
Pencil,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
Search,
|
Search,
|
||||||
@@ -74,6 +76,7 @@ export function StudioClient({
|
|||||||
// Catalog tree
|
// Catalog tree
|
||||||
const [tree] = useState<TreeNode[]>(initialTree);
|
const [tree] = useState<TreeNode[]>(initialTree);
|
||||||
const [selectedPage, setSelectedPage] = useState<number | null>(null);
|
const [selectedPage, setSelectedPage] = useState<number | null>(null);
|
||||||
|
const [railOpen, setRailOpen] = useState(true);
|
||||||
|
|
||||||
// Search & list
|
// Search & list
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
@@ -651,6 +654,26 @@ export function StudioClient({
|
|||||||
|
|
||||||
{/* ── Filters + actions ─────────────────────────────── */}
|
{/* ── 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">
|
<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}>
|
<Select value={activeSource} onValueChange={changeSource}>
|
||||||
<SelectTrigger className="h-8 w-44 text-xs">
|
<SelectTrigger className="h-8 w-44 text-xs">
|
||||||
<SelectValue placeholder="Furni source" />
|
<SelectValue placeholder="Furni source" />
|
||||||
@@ -811,11 +834,13 @@ export function StudioClient({
|
|||||||
|
|
||||||
{/* ── Body: rail + grid + drawer ────────────────────── */}
|
{/* ── Body: rail + grid + drawer ────────────────────── */}
|
||||||
<div className="relative flex min-h-0 flex-1">
|
<div className="relative flex min-h-0 flex-1">
|
||||||
<CatalogRail
|
{railOpen ? (
|
||||||
tree={tree}
|
<CatalogRail
|
||||||
selectedId={selectedPage}
|
tree={tree}
|
||||||
onSelect={setSelectedPage}
|
selectedId={selectedPage}
|
||||||
/>
|
onSelect={setSelectedPage}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
<main className="flex min-h-0 flex-1 flex-col">
|
<main className="flex min-h-0 flex-1 flex-col">
|
||||||
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
||||||
|
|||||||
Reference in new issue
Block a user