perf(studio): load import organization tools on demand

src/app/admin/studio/studio-layout-client.tsx

@@ -7,7 +7,6 @@ import {
 	ClipboardCheck,
 	Copy,
 	Dumbbell,
-	FolderTree,
 	Image as ImageIcon,
 	type LucideIcon,
 	Puzzle,
@@ -19,7 +18,7 @@ import {
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { CatalogManagerDialog } from "@/app/admin/catalog/catalog-manager-dialog-wrapper";
-import { OrganizeImportsDialog } from "@/components/admin/studio/organize-imports-dialog";
+import { OrganizeImportsLauncher } from "@/components/admin/studio/organize-imports-launcher";
 import Link from "@/components/link";
 import {
 	Popover,
@@ -115,7 +114,6 @@ export function StudioLayoutClient({
 	children: React.ReactNode;
 }) {
 	const pathname = usePathname() ?? "";
-	const [organizeOpen, setOrganizeOpen] = useState(false);
 	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
@@ -153,14 +151,7 @@ export function StudioLayoutClient({
 								canEdit
 								triggerLabel="Catalog manager"
 							/>
-							<button
-								type="button"
-								onClick={() => setOrganizeOpen(true)}
-								className="flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10"
-							>
-								<FolderTree size={16} />
-								Organize imports
-							</button>
+							<OrganizeImportsLauncher />
 						</>
 					)}
 					<StudioMenu
@@ -176,12 +167,6 @@ export function StudioLayoutClient({
 				</div>
 			</nav>
 			<div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
-			{canEditCatalog && (
-				<OrganizeImportsDialog
-					open={organizeOpen}
-					onOpenChange={setOrganizeOpen}
-				/>
-			)}
 		</div>
 	);
 }