perf(studio): load import organization tools on demand

src/components/admin/studio/organize-imports-launcher.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { FolderTree } from "lucide-react";
+import { lazy, Suspense, useState } from "react";
+import { StudioPanelLoading } from "./studio-panel-loading";
+
+const OrganizeImportsDialog = lazy(() =>
+	import("./organize-imports-dialog").then((module) => ({
+		default: module.OrganizeImportsDialog,
+	})),
+);
+
+export function OrganizeImportsLauncher() {
+	const [open, setOpen] = useState(false);
+	const [requested, setRequested] = useState(false);
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => {
+					setRequested(true);
+					setOpen(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>
+			{requested && (
+				<Suspense
+					fallback={
+						open ? <StudioPanelLoading onClose={() => setOpen(false)} /> : null
+					}
+				>
+					<OrganizeImportsDialog open={open} onOpenChange={setOpen} />
+				</Suspense>
+			)}
+		</>
+	);
+}