Aside state persisted in query params

.env.example

@@ -10,7 +10,7 @@
 # should be updated accordingly.
 
 # General
-BASE_URL=http://localhost:3000
+NEURON_BASE_URL=http://localhost:3000
 
 # Drizzle
 DATABASE_PASSWORD="password" # Generate from ./gen-pass.sh

.env.test

@@ -3,7 +3,7 @@
 
 # General
 NODE_ENV=test
-BASE_URL="http://localhost:3000"
+NEURON_BASE_URL=http://localhost:3000
 
 # Test Database (same host, different database name)
 DATABASE_PASSWORD="0d9aQECGfwiKdFDL"

src/app/(authorized)/classes/page.tsx

@@ -1,10 +1,20 @@
+"use client";
+
 import { ClassListView } from "@/components/classes/list/class-list-view";
 import { PageLayout } from "@/components/page-layout";
+import { parseAsString, useQueryState } from "nuqs";
 
 export default function ClassesPage() {
+  const [classId, setClassId] = useQueryState("classId", parseAsString);
+
   return (
-    <PageLayout>
-      <ClassListView />
+    <PageLayout
+      open={!!classId}
+      onOpenChange={(open) => {
+        if (!open) setClassId(null);
+      }}
+    >
+      <ClassListView classId={classId} setClassId={setClassId} />
     </PageLayout>
   );
 }

src/app/(authorized)/coverage/page.tsx

@@ -14,15 +14,27 @@ import { Suspense } from "react";
 import { CoveragePageProvider } from "@/components/coverage/list/coverage-page-context";
 import { CoverageAside } from "@/components/coverage/list/coverage-aside";
 import { SkeletonAside } from "@/components/ui/skeleton";
+import { parseAsString, useQueryState } from "nuqs";
 
 export default function CoveragePage() {
+  const [coverageId, setCoverageId] = useQueryState(
+    "coverageId",
+    parseAsString,
+  );
+
   return (
-    <PageLayout>
-      <CoveragePageProvider>
+    <PageLayout
+      open={!!coverageId}
+      onOpenChange={(open) => {
+        if (!open) setCoverageId(null);
+      }}
+    >
+      <CoveragePageProvider
+        coverageId={coverageId}
+        setCoverageId={setCoverageId}
+      >
         <PageLayoutAside>
-          <Suspense fallback={<SkeletonAside />}>
-            <CoverageAside />
-          </Suspense>
+          <CoverageAside />
         </PageLayoutAside>
 
         <PageLayoutHeader hideShadow border="always">

src/app/(authorized)/schedule/page.tsx

@@ -12,7 +12,7 @@ import {
 import { SchedulePageControls } from "@/components/schedule/schedule-page-controls";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { cn } from "@/lib/utils";
-import { parseAsStringEnum, useQueryState } from "nuqs";
+import { parseAsString, parseAsStringEnum, useQueryState } from "nuqs";
 import { Activity, Suspense } from "react";
 import { SchedulePageProvider } from "../../../components/schedule/schedule-page-context";
 import { ShiftDetailsAside } from "../../../components/schedule/shift-details-aside";
@@ -29,11 +29,17 @@ export default function SchedulePage() {
       .withDefault("list")
       .withOptions({ clearOnDefault: false }),
   );
+  const [shiftId, setShiftId] = useQueryState("shiftId", parseAsString);
 
   return (
-    <PageLayout>
+    <PageLayout
+      open={!!shiftId}
+      onOpenChange={(open) => {
+        if (!open) setShiftId(null);
+      }}
+    >
       <FullCalendarProvider>
-        <SchedulePageProvider>
+        <SchedulePageProvider shiftId={shiftId} setShiftId={setShiftId}>
           <PageLayoutHeader hideShadow border="always">
             <PageLayoutHeaderContent className="items-center">
               <PageLayoutHeaderTitle>Schedule</PageLayoutHeaderTitle>
@@ -58,9 +64,7 @@ export default function SchedulePage() {
           </PageLayoutHeader>
 
           <PageLayoutAside>
-            <Suspense fallback={<SkeletonAside />}>
-              <ShiftDetailsAside />
-            </Suspense>
+            <ShiftDetailsAside />
           </PageLayoutAside>
 
           <PageLayoutContent className="flex-1">

src/app/(authorized)/schedule/schedule-calendar-view.tsx

@@ -35,6 +35,7 @@ export function ScheduleCalendarView() {
 
   return (
     <FullCalendar
+      initialDate={selectedDate}
       eventClick={handleEventClick}
       events={scheduleShifts.map((shift) => ({
         id: shift.id,

src/components/classes/list/class-details-aside.tsx

@@ -33,6 +33,7 @@ import { DeleteClassButton } from "../primitives/delete-class-button";
 import { PublishClassButton } from "../primitives/publish-class-button";
 import { StarClassButton } from "../primitives/star-class-button";
 import { UserList } from "@/components/users/user-list";
+import { SkeletonAside } from "@/components/ui/skeleton";
 
 export function ClassDetailsAside() {
   const { selectedClassId, closeAside } = useClassesPage();
@@ -42,18 +43,10 @@ export function ClassDetailsAside() {
       { classId: selectedClassId ?? "" },
       {
         enabled: !!selectedClassId,
-        suspense: !!selectedClassId,
         meta: { suppressToast: true },
       },
     );
 
-  // Close aside if no shiftId is selected
-  useEffect(() => {
-    if (!selectedClassId) {
-      closeAside();
-    }
-  }, [selectedClassId, closeAside]);
-
   const scheduleViews = useMemo(() => {
     return (classData?.schedules ?? []).map((s) => ({
       id: s.id,
@@ -75,7 +68,7 @@ export function ClassDetailsAside() {
   }, [classData?.schedules]);
 
   if (isLoadingClassData || !classData) {
-    return <></>;
+    return <SkeletonAside />;
   }
 
   return (

src/components/classes/list/class-list-view.tsx

@@ -26,7 +26,6 @@ import {
   PageLayoutHeader,
   PageLayoutHeaderContent,
   PageLayoutHeaderTitle,
-  usePageAside,
 } from "@/components/page-layout";
 import { ClassList } from "./content/class-list";
 import { ClassListSkeleton } from "./class-list-skeleton";
@@ -57,10 +56,13 @@ export function useClassesPage() {
   return ctx;
 }
 
-export function ClassListView() {
-  const { setOpen } = usePageAside();
+type ClassListViewProps = {
+  classId: string | null;
+  setClassId: (id: string | null) => Promise<URLSearchParams>;
+};
+
+export function ClassListView({ classId, setClassId }: ClassListViewProps) {
   const contentScrollRef = useRef<HTMLDivElement>(null);
-  const [selectedClassId, setSelectedClassId] = useState<string | null>(null);
   const [selectedTermId, setSelectedTermId] = useState<string | null>(null);
   const [queryTerm, setQueryTerm] = useQueryState(
     "term",
@@ -69,16 +71,28 @@ export function ClassListView() {
 
   const openAsideFor = useCallback(
     (id: string) => {
-      setSelectedClassId(id);
-      setOpen(true);
+      setClassId(id);
     },
-    [setOpen, setSelectedClassId],
+    [setClassId],
   );
 
   const closeAside = useCallback(() => {
-    setSelectedClassId(null);
-    setOpen(false);
-  }, [setOpen, setSelectedClassId]);
+    setClassId(null);
+  }, [setClassId]);
+
+  // When a classId is present (e.g. from URL), fetch the class and navigate
+  // to its term so the list shows the correct term's classes.
+  const { data: linkedClass } = clientApi.class.byId.useQuery(
+    { classId: classId ?? "" },
+    { enabled: !!classId },
+  );
+
+  useEffect(() => {
+    if (linkedClass?.termId && linkedClass.termId !== selectedTermId) {
+      setSelectedTermId(linkedClass.termId);
+      void setQueryTerm(linkedClass.termId);
+    }
+  }, [linkedClass?.termId, selectedTermId, setQueryTerm]);
 
   const canCreateTerm = usePermission({ permission: { terms: ["create"] } });
 
@@ -139,22 +153,22 @@ export function ClassListView() {
 
   const contextValue = useMemo(
     () => ({
-      selectedClassId,
+      selectedClassId: classId,
       selectedTermId,
       queryTerm,
       hasTerms,
-      setSelectedClassId,
+      setSelectedClassId: setClassId,
       setSelectedTermId: handleSelectTerm,
       openAsideFor,
       closeAside,
       contentScrollRef,
     }),
     [
-      selectedClassId,
+      classId,
       selectedTermId,
       queryTerm,
       hasTerms,
-      setSelectedClassId,
+      setClassId,
       handleSelectTerm,
       openAsideFor,
       closeAside,