Aside state persisted in query params

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,11 +14,25 @@ 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 />

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>

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

@@ -42,7 +42,7 @@ export function ClassDetailsAside() {
       { classId: selectedClassId ?? "" },
       {
         enabled: !!selectedClassId,
-        suspense: !!selectedClassId,
+        suspense: true,
         meta: { suppressToast: true },
       },
     );

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,31 @@ 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) {
+      setSelectedTermId((prev) => {
+        if (prev === linkedClass.termId) return prev;
+        setQueryTerm(linkedClass.termId);
+        return linkedClass.termId;
+      });
+    }
+  }, [linkedClass?.termId, setQueryTerm]);
 
   const canCreateTerm = usePermission({ permission: { terms: ["create"] } });
 
@@ -139,22 +156,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,

src/components/coverage/list/coverage-aside.tsx

@@ -18,13 +18,16 @@ import { WithPermission } from "@/components/utils/with-permission";
 import { CoverageRequestCategory, CoverageStatus } from "@/models/api/coverage";
 import { useAuth } from "@/providers/client-auth-provider";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useCoveragePage } from "./coverage-page-context";
+import {
+  useCoveragePage,
+  type CoverageListItem,
+} from "./coverage-page-context";
 import { FillCoverageButton } from "@/components/coverage/primitives/fill-coverage-button";
 import { WithdrawCoverageButton } from "@/components/coverage/primitives/withdraw-coverage-button";
-import { useEffect } from "react";
 import { Separator } from "@/components/ui/separator";
 import { UserList } from "@/components/users/user-list";
 import { Button } from "@/components/ui/button";
+import { clientApi } from "@/trpc/client";
 
 const dateFormatter = new Intl.DateTimeFormat("en-US", {
   month: "long",
@@ -39,12 +42,19 @@ const timeFormatter = new Intl.DateTimeFormat("en-US", {
 });
 
 export function CoverageAside() {
-  const { selectedItem, closeAside, goToNext, goToPrev } = useCoveragePage();
+  const { selectedCoverageId, goToNext, goToPrev, hasNext, hasPrev } =
+    useCoveragePage();
   const { user } = useAuth();
 
-  useEffect(() => {
-    if (!selectedItem) closeAside();
-  }, [selectedItem, closeAside]);
+  const { data } = clientApi.coverage.byId.useQuery(
+    { coverageRequestId: selectedCoverageId ?? "" },
+    {
+      enabled: !!selectedCoverageId,
+      suspense: true,
+      meta: { suppressToast: true },
+    },
+  );
+  const selectedItem = data as CoverageListItem | undefined;
 
   if (!selectedItem) return null;
 
@@ -208,10 +218,10 @@ export function CoverageAside() {
 
           <AsideFooter>
             <div className="flex gap-2">
-              <Button variant="ghost" onClick={() => goToPrev()}>
+              <Button variant="ghost" disabled={!hasPrev} onClick={() => goToPrev()}>
                 <ChevronLeft></ChevronLeft>
               </Button>
-              <Button variant="ghost" onClick={() => goToNext()}>
+              <Button variant="ghost" disabled={!hasNext} onClick={() => goToNext()}>
                 <ChevronRight></ChevronRight>
               </Button>
             </div>

src/components/coverage/list/coverage-page-context.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { usePageAside } from "@/components/page-layout";
 import {
   createContext,
   useCallback,
   useContext,
+  useMemo,
   useState,
   type PropsWithChildren,
 } from "react";
@@ -18,13 +18,15 @@ export type CoverageListItem =
   | ListCoverageRequestWithReason;
 
 type CoveragePageContextValue = {
-  selectedItem: CoverageListItem | null;
+  selectedCoverageId: string | null;
   sortedItems: CoverageListItem[];
   openAsideFor: (item: CoverageListItem) => void;
   closeAside: () => void;
   setSortedItems: (items: CoverageListItem[]) => void;
   goToNext: () => void;
   goToPrev: () => void;
+  hasNext: boolean;
+  hasPrev: boolean;
 };
 
 const CoveragePageContext = createContext<CoveragePageContextValue | null>(
@@ -39,67 +41,71 @@ export function useCoveragePage() {
   return ctx;
 }
 
-export function CoveragePageProvider({ children }: PropsWithChildren) {
-  const { setOpen } = usePageAside();
-  const [selectedCoverageRequest, setSelectedCoverageRequest] =
-    useState<CoverageListItem | null>(null);
+type CoveragePageProviderProps = PropsWithChildren<{
+  coverageId: string | null;
+  setCoverageId: (id: string | null) => Promise<URLSearchParams>;
+}>;
+
+export function CoveragePageProvider({
+  coverageId,
+  setCoverageId,
+  children,
+}: CoveragePageProviderProps) {
   const [coverageRequests, setCoverageRequests] = useState<CoverageListItem[]>(
     [],
   );
 
   const openAsideFor = useCallback(
     (item: CoverageListItem) => {
-      setSelectedCoverageRequest(item);
-      setOpen(true);
+      setCoverageId(item.id);
     },
-    [setOpen],
+    [setCoverageId],
   );
 
   const closeAside = useCallback(() => {
-    setSelectedCoverageRequest(null);
-    setOpen(false);
-  }, [setOpen]);
+    setCoverageId(null);
+  }, [setCoverageId]);
 
   const goToNext = useCallback(() => {
-    setSelectedCoverageRequest((current) => {
-      if (!current) return current;
-      const currentIndex = coverageRequests.findIndex(
-        (item) => item.id === current.id,
-      );
-      if (currentIndex < coverageRequests.length - 1) {
-        const next = coverageRequests[currentIndex + 1]!;
-        setOpen(true);
-        return next;
-      }
-      return current;
-    });
-  }, [coverageRequests, setOpen]);
+    if (!coverageId) return;
+    const currentIndex = coverageRequests.findIndex(
+      (item) => item.id === coverageId,
+    );
+    if (currentIndex >= 0 && currentIndex < coverageRequests.length - 1) {
+      setCoverageId(coverageRequests[currentIndex + 1]!.id);
+    }
+  }, [coverageRequests, coverageId, setCoverageId]);
 
   const goToPrev = useCallback(() => {
-    setSelectedCoverageRequest((current) => {
-      if (!current) return current;
-      const currentIndex = coverageRequests.findIndex(
-        (item) => item.id === current.id,
-      );
-      if (currentIndex > 0) {
-        const prev = coverageRequests[currentIndex - 1]!;
-        setOpen(true);
-        return prev;
-      }
-      return current;
-    });
-  }, [coverageRequests, setOpen]);
+    if (!coverageId) return;
+    const currentIndex = coverageRequests.findIndex(
+      (item) => item.id === coverageId,
+    );
+    if (currentIndex > 0) {
+      setCoverageId(coverageRequests[currentIndex - 1]!.id);
+    }
+  }, [coverageRequests, coverageId, setCoverageId]);
+
+  const currentIndex = useMemo(() => {
+    if (!coverageId) return -1;
+    return coverageRequests.findIndex((item) => item.id === coverageId);
+  }, [coverageRequests, coverageId]);
+
+  const hasNext = currentIndex >= 0 && currentIndex < coverageRequests.length - 1;
+  const hasPrev = currentIndex > 0;
 
   return (
     <CoveragePageContext.Provider
       value={{
-        selectedItem: selectedCoverageRequest,
+        selectedCoverageId: coverageId,
         sortedItems: coverageRequests,
         openAsideFor,
         closeAside,
         setSortedItems: setCoverageRequests,
         goToNext,
         goToPrev,
+        hasNext,
+        hasPrev,
       }}
     >
       {children}

src/components/coverage/primitives/fill-coverage-button.tsx

@@ -17,7 +17,7 @@ export function FillCoverageButton({
   const { mutate: fillCoverageRequest, isPending } =
     clientApi.coverage.fillCoverageRequest.useMutation({
       onSuccess: () => {
-        void apiUtils.coverage.list.invalidate();
+        void apiUtils.coverage.invalidate();
       },
     });
 

src/components/coverage/primitives/withdraw-coverage-button.tsx

@@ -18,7 +18,7 @@ export function WithdrawCoverageButton({
   const { mutate: cancelCoverageRequest, isPending } =
     clientApi.coverage.cancelCoverageRequest.useMutation({
       onSuccess: () => {
-        void apiUtils.coverage.list.invalidate();
+        void apiUtils.coverage.invalidate();
       },
     });