perf: lazy-load settings page content to reduce first-load JS (#952)

.agents/architecture.md

@@ -541,6 +541,8 @@ src/
 │   ├── route-error.tsx          # Reusable error boundary UI (Sentry capture + retry button)
 │   ├── workspace-home.tsx       # Workspace home: page list or empty state with create CTA
 │   ├── workspace-home-client.tsx # Client wrapper: lazy-loads WorkspaceHome via next/dynamic
+│   ├── settings-page-client.tsx  # Client wrapper: lazy-loads SettingsPageContent via next/dynamic
+│   ├── settings-page-content.tsx # Settings page layout: form + change password + danger zone
 │   ├── workspace-settings-form.tsx # Edit workspace name/slug, lazy-loads delete workspace section
 │   ├── delete-workspace-section.tsx # Workspace deletion danger zone with AlertDialog confirmation
 │   ├── danger-zone-settings.tsx # Client wrapper: lazy-loads DeleteAccountSection via next/dynamic

src/app/(app)/[workspaceSlug]/settings/page.tsx

@@ -1,11 +1,7 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
-import { WorkspaceSettingsForm } from "@/components/workspace-settings-form";
-import { ChangePasswordSection } from "@/components/change-password-section";
-import { DangerZoneSettings } from "@/components/danger-zone-settings";
-import { Separator } from "@/components/ui/separator";
+import { SettingsPageClient } from "@/components/settings-page-client";
 
 export async function generateMetadata({
   params,
@@ -56,34 +52,10 @@ export default async function WorkspaceSettingsPage({
   const userEmail = user.email ?? "";
 
   return (
-    <div className="mx-auto max-w-xl p-6">
-      <div className="flex items-center gap-4">
-        <h1 className="text-2xl font-semibold">Workspace settings</h1>
-        <Link
-          href={`/${workspaceSlug}/settings/members`}
-          className="text-sm text-accent underline-offset-4 hover:underline"
-        >
-          Members
-        </Link>
-      </div>
-      <p className="mt-1 text-sm text-muted-foreground">
-        Manage your workspace name, URL, and other settings.
-      </p>
-      <div className="mt-6">
-        <WorkspaceSettingsForm workspace={workspace} userId={user.id} />
-      </div>
-      {workspace.is_personal && (
-        <>
-          <Separator className="mt-8 bg-overlay-border" />
-          <div className="mt-8">
-            <ChangePasswordSection />
-          </div>
-          <Separator className="mt-8 bg-overlay-border" />
-          <div className="mt-8">
-            <DangerZoneSettings userEmail={userEmail} />
-          </div>
-        </>
-      )}
-    </div>
+    <SettingsPageClient
+      workspace={workspace}
+      userId={user.id}
+      userEmail={userEmail}
+    />
   );
 }

src/components/settings-page-client.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { Workspace } from "@/lib/types";
+
+const SettingsPageContent = dynamic(
+  () =>
+    import("@/components/settings-page-content").then(
+      (mod) => mod.SettingsPageContent,
+    ),
+);
+
+interface SettingsPageClientProps {
+  workspace: Workspace;
+  userId: string;
+  userEmail: string;
+}
+
+export function SettingsPageClient(props: SettingsPageClientProps) {
+  return <SettingsPageContent {...props} />;
+}

src/components/settings-page-content.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import { WorkspaceSettingsForm } from "@/components/workspace-settings-form";
+import { Separator } from "@/components/ui/separator";
+import type { Workspace } from "@/lib/types";
+
+const ChangePasswordSection = dynamic(
+  () =>
+    import("@/components/change-password-section").then(
+      (mod) => mod.ChangePasswordSection,
+    ),
+);
+
+const DangerZoneSettings = dynamic(
+  () =>
+    import("@/components/danger-zone-settings").then(
+      (mod) => mod.DangerZoneSettings,
+    ),
+);
+
+interface SettingsPageContentProps {
+  workspace: Workspace;
+  userId: string;
+  userEmail: string;
+}
+
+export function SettingsPageContent({
+  workspace,
+  userId,
+  userEmail,
+}: SettingsPageContentProps) {
+  return (
+    <div className="mx-auto max-w-xl p-6">
+      <div className="flex items-center gap-4">
+        <h1 className="text-2xl font-semibold">Workspace settings</h1>
+        <Link
+          href={`/${workspace.slug}/settings/members`}
+          className="text-sm text-accent underline-offset-4 hover:underline"
+        >
+          Members
+        </Link>
+      </div>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Manage your workspace name, URL, and other settings.
+      </p>
+      <div className="mt-6">
+        <WorkspaceSettingsForm workspace={workspace} userId={userId} />
+      </div>
+      {workspace.is_personal && (
+        <>
+          <Separator className="mt-8 bg-overlay-border" />
+          <div className="mt-8">
+            <ChangePasswordSection />
+          </div>
+          <Separator className="mt-8 bg-overlay-border" />
+          <div className="mt-8">
+            <DangerZoneSettings userEmail={userEmail} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}