feat(dashboard): sync Learning Space tabs with URL params and add Suspense boundaries

dashboard/app/auth/layout.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Suspense } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import {
@@ -40,7 +41,7 @@ export default function AuthPage({ children }: { children: React.ReactNode }) {
           </div>
         </div>
         <div className="flex flex-1 items-center justify-center">
-          <div className="w-full max-w-xs">{children}</div>
+          <div className="w-full max-w-xs"><Suspense>{children}</Suspense></div>
         </div>
       </div>
       <div className="bg-muted relative hidden lg:block">

dashboard/app/new/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { NewProjectPageClient } from "./new-project-page-client";
 import { getOrganizationDataWithPlan } from "@/lib/supabase";
@@ -24,10 +25,12 @@ export default async function NewProjectPage({ params }: PageProps) {
   const { currentOrganization, allOrganizations } = orgData;
 
   return (
-    <NewProjectPageClient
-      orgId={actualId}
-      currentOrganization={currentOrganization}
-      allOrganizations={allOrganizations}
-    />
+    <Suspense>
+      <NewProjectPageClient
+        orgId={actualId}
+        currentOrganization={currentOrganization}
+        allOrganizations={allOrganizations}
+      />
+    </Suspense>
   );
 }

dashboard/app/new/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useFormStatus } from "react-dom";
 import { useSearchParams } from "next/navigation";
 
@@ -45,6 +45,14 @@ function SubmitButton({
 }
 
 export default function NewOrganizationPage() {
+  return (
+    <Suspense>
+      <NewOrganizationContent />
+    </Suspense>
+  );
+}
+
+function NewOrganizationContent() {
   const searchParams = useSearchParams();
   const error = searchParams.get("error");
   const { initialize } = useTopNavStore();

dashboard/app/project/[id]/disk/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { DiskPageClient } from "./disk-page-client";
 import {
@@ -39,16 +40,18 @@ export default async function DiskPage({ params }: PageProps) {
   const { currentOrganization, allOrganizations, projects = [] } = orgData;
 
   return (
-    <DiskPageClient
-      project={{
-        id: project.project_id,
-        name: project.name,
-        organization_id: project.organization_id,
-        created_at: project.created_at,
-      }}
-      currentOrganization={currentOrganization}
-      allOrganizations={allOrganizations}
-      projects={projects}
-    />
+    <Suspense>
+      <DiskPageClient
+        project={{
+          id: project.project_id,
+          name: project.name,
+          organization_id: project.organization_id,
+          created_at: project.created_at,
+        }}
+        currentOrganization={currentOrganization}
+        allOrganizations={allOrganizations}
+        projects={projects}
+      />
+    </Suspense>
   );
 }

dashboard/app/project/[id]/learning-spaces/[spaceId]/learning-space-detail-client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import Link from "next/link";
 import { encodeId } from "@/lib/id-codec";
 import { useTopNavStore } from "@/stores/top-nav";
@@ -77,6 +77,8 @@ export function LearningSpaceDetailClient({
   spaceId,
 }: LearningSpaceDetailClientProps) {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
   const { initialize, setHasSidebar } = useTopNavStore();
 
   useEffect(() => {
@@ -96,7 +98,22 @@ export function LearningSpaceDetailClient({
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const [activeTab, setActiveTab] = useState("skills");
+  const validTabs = ["metadata", "skills", "sessions"];
+  const tabParam = searchParams.get("tab");
+  const activeTab = validTabs.includes(tabParam ?? "") ? tabParam! : "skills";
+  const setActiveTab = useCallback(
+    (tab: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (tab === "skills") {
+        params.delete("tab");
+      } else {
+        params.set("tab", tab);
+      }
+      const qs = params.toString();
+      router.replace(`${pathname}${qs ? `?${qs}` : ""}`, { scroll: false });
+    },
+    [searchParams, pathname, router],
+  );
 
   // Metadata editor
   const [metaValue, setMetaValue] = useState("{}");

dashboard/app/project/[id]/learning-spaces/[spaceId]/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { LearningSpaceDetailClient } from "./learning-space-detail-client";
 import {
@@ -24,14 +25,16 @@ export default async function LearningSpaceDetailPage({ params }: PageProps) {
   }
 
   return (
-    <LearningSpaceDetailClient
-      project={{
-        id: project.project_id,
-        name: project.name,
-        organization_id: project.organization_id,
-        created_at: project.created_at,
-      }}
-      spaceId={actualSpaceId}
-    />
+    <Suspense>
+      <LearningSpaceDetailClient
+        project={{
+          id: project.project_id,
+          name: project.name,
+          organization_id: project.organization_id,
+          created_at: project.created_at,
+        }}
+        spaceId={actualSpaceId}
+      />
+    </Suspense>
   );
 }

dashboard/app/project/[id]/learning-spaces/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { LearningSpacesPageClient } from "./learning-spaces-page-client";
 import {
@@ -35,16 +36,18 @@ export default async function LearningSpacesPage({ params }: PageProps) {
   const { currentOrganization, allOrganizations, projects = [] } = orgData;
 
   return (
-    <LearningSpacesPageClient
-      project={{
-        id: project.project_id,
-        name: project.name,
-        organization_id: project.organization_id,
-        created_at: project.created_at,
-      }}
-      currentOrganization={currentOrganization}
-      allOrganizations={allOrganizations}
-      projects={projects}
-    />
+    <Suspense>
+      <LearningSpacesPageClient
+        project={{
+          id: project.project_id,
+          name: project.name,
+          organization_id: project.organization_id,
+          created_at: project.created_at,
+        }}
+        currentOrganization={currentOrganization}
+        allOrganizations={allOrganizations}
+        projects={projects}
+      />
+    </Suspense>
   );
 }

dashboard/app/project/[id]/session/[sessionId]/task/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { TaskPageClient } from "./task-page-client";
 import {
@@ -25,14 +26,16 @@ export default async function TaskPage({ params }: PageProps) {
   }
 
   return (
-    <TaskPageClient
-      project={{
-        id: project.project_id,
-        name: project.name,
-        organization_id: project.organization_id,
-        created_at: project.created_at,
-      }}
-      sessionId={actualSessionId}
-    />
+    <Suspense>
+      <TaskPageClient
+        project={{
+          id: project.project_id,
+          name: project.name,
+          organization_id: project.organization_id,
+          created_at: project.created_at,
+        }}
+        sessionId={actualSessionId}
+      />
+    </Suspense>
   );
 }

dashboard/app/project/[id]/session/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { SessionPageClient } from "./session-page-client";
 import {
@@ -39,16 +40,18 @@ export default async function SessionPage({ params }: PageProps) {
   const { currentOrganization, allOrganizations, projects = [] } = orgData;
 
   return (
-    <SessionPageClient
-      project={{
-        id: project.project_id,
-        name: project.name,
-        organization_id: project.organization_id,
-        created_at: project.created_at,
-      }}
-      currentOrganization={currentOrganization}
-      allOrganizations={allOrganizations}
-      projects={projects}
-    />
+    <Suspense>
+      <SessionPageClient
+        project={{
+          id: project.project_id,
+          name: project.name,
+          organization_id: project.organization_id,
+          created_at: project.created_at,
+        }}
+        currentOrganization={currentOrganization}
+        allOrganizations={allOrganizations}
+        projects={projects}
+      />
+    </Suspense>
   );
 }