From f18735cf3e9731c12705b7f59232c655ea87cb36 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 18 Aug 2026 19:13:34 +0200
Subject: [PATCH] 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.
---
 src/components/admin/studio/studio-client.tsx | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/admin/studio/studio-client.tsx b/src/components/admin/studio/studio-client.tsx
index 5d9135a642..73d6c5ff2d 100644
--- a/src/components/admin/studio/studio-client.tsx
+++ b/src/components/admin/studio/studio-client.tsx
@@ -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">