Navigation fix for course viewer

Author: Rajat

apps/web/app/(with-contexts)/course/[slug]/[id]/__tests__/layout-with-sidebar.test.tsx

@@ -1,9 +1,10 @@
 let mockPathname = "/course/test-course/course-1";
+let mockSearchParams = new URLSearchParams();
 
 jest.mock("next/navigation", () => ({
     usePathname: () => mockPathname,
     useRouter: () => ({ push: jest.fn() }),
-    useSearchParams: () => new URLSearchParams(),
+    useSearchParams: () => mockSearchParams,
 }));
 
 jest.mock("next/link", () => {
@@ -141,6 +142,8 @@ describe("generateSideBarItems", () => {
     const originalRelativeDripUnitInMillis = constants.relativeDripUnitInMillis;
 
     beforeEach(() => {
+        mockPathname = "/course/test-course/course-1";
+        mockSearchParams = new URLSearchParams();
         Date.now = jest.fn(() =>
             new Date("2026-03-22T00:00:00.000Z").getTime(),
         );
@@ -839,6 +842,7 @@ describe("generateSideBarItems", () => {
 describe("Course viewer layout", () => {
     beforeEach(() => {
         mockPathname = "/course/test-course/course-1";
+        mockSearchParams = new URLSearchParams();
     });
 
     it("renders the preview badge in the viewer header when preview mode is active", () => {
@@ -1004,4 +1008,90 @@ describe("Course viewer layout", () => {
             "/course/test-course/course-1/lesson-1?discussion=open",
         );
     });
+
+    it("preserves preview session params when opening the discussion panel", () => {
+        mockPathname = "/course/test-course/course-1/lesson-1";
+        mockSearchParams = new URLSearchParams(
+            "preview=true&returnTo=%2Fdashboard%2Fproduct%2Fcourse-1",
+        );
+        const course = {
+            title: "Course",
+            description: "",
+            featuredImage: undefined,
+            updatedAt: new Date().toISOString(),
+            creatorId: "creator-1",
+            slug: "test-course",
+            cost: 0,
+            courseId: "course-1",
+            tags: [],
+            paymentPlans: [],
+            defaultPaymentPlan: "",
+            firstLesson: "lesson-1",
+            isPreview: true,
+            groups: [],
+            discussions: true,
+        } as unknown as CourseFrontend;
+
+        render(
+            <ProductPage product={course}>
+                <div>Lesson body</div>
+            </ProductPage>,
+        );
+
+        expect(screen.getByLabelText("Discussions")).toHaveAttribute(
+            "href",
+            "/course/test-course/course-1/lesson-1?preview=true&returnTo=%2Fdashboard%2Fproduct%2Fcourse-1&discussion=open",
+        );
+    });
+
+    it("preserves the open discussion panel while navigating lesson links", () => {
+        mockPathname = "/course/test-course/course-1/lesson-1";
+        mockSearchParams = new URLSearchParams("discussion=open");
+        const course = {
+            title: "Course",
+            description: "",
+            featuredImage: undefined,
+            updatedAt: new Date().toISOString(),
+            creatorId: "creator-1",
+            slug: "test-course",
+            cost: 0,
+            courseId: "course-1",
+            tags: [],
+            paymentPlans: [],
+            defaultPaymentPlan: "",
+            firstLesson: "lesson-1",
+            isPreview: false,
+            groups: [
+                {
+                    id: "group-1",
+                    name: "Section",
+                    lessons: [
+                        {
+                            lessonId: "lesson-1",
+                            title: "Lesson 1",
+                            requiresEnrollment: false,
+                        },
+                        {
+                            lessonId: "lesson-2",
+                            title: "Lesson 2",
+                            requiresEnrollment: false,
+                        },
+                    ],
+                },
+            ],
+            discussions: true,
+        } as unknown as CourseFrontend;
+
+        const { container } = render(
+            <ProductPage product={course}>
+                <div>Lesson body</div>
+            </ProductPage>,
+        );
+
+        expect(
+            container.querySelector(
+                'a[href="/course/test-course/course-1/lesson-2?discussion=open"]',
+            ),
+        ).toBeInTheDocument();
+    });
 });

apps/web/app/(with-contexts)/course/[slug]/[id]/layout-with-sidebar.tsx

@@ -67,6 +67,7 @@ import {
     appendCourseViewerSessionParamsToHref,
     getCourseViewerSessionParams,
     getCourseViewerReturnPath,
+    setHrefQueryParam,
 } from "@/lib/course-viewer-session-params";
 import { Badge } from "@/components/ui/badge";
 import ProductDiscussionPanel from "@/components/public/product-discussions/panel";
@@ -128,9 +129,11 @@ export default function ProductPage({
     const isActualLessonPage =
         isLessonPage && pathSegments[3] !== "discussions";
     const showDiscussionsAction = product.discussions && isActualLessonPage;
-    const discussionsHref = isDiscussionOpen
-        ? pathname
-        : `${pathname}?discussion=open`;
+    const discussionsHref = getDiscussionHref({
+        pathname,
+        searchParams,
+        isDiscussionOpen,
+    });
 
     if (!profile) {
         return null;
@@ -264,6 +267,23 @@ export default function ProductPage({
     );
 }
 
+function getDiscussionHref({
+    pathname,
+    searchParams,
+    isDiscussionOpen,
+}: {
+    pathname: string;
+    searchParams: ReturnType<typeof useSearchParams>;
+    isDiscussionOpen: boolean;
+}) {
+    const currentSearch = searchParams?.toString() || "";
+    return setHrefQueryParam(
+        currentSearch ? `${pathname}?${currentSearch}` : pathname,
+        "discussion",
+        isDiscussionOpen ? null : "open",
+    );
+}
+
 export function AppSidebar({
     course,
     profile,

apps/web/components/public/product-discussions/__tests__/panel.test.tsx

@@ -11,6 +11,7 @@ const mockToast = jest.fn();
 const mockExec = jest.fn();
 const payloads: Record<string, any>[] = [];
 const scrollIntoView = jest.fn();
+let mockSearchParams = new URLSearchParams();
 
 jest.mock("@components/contexts", () => {
     const React = jest.requireActual("react");
@@ -41,6 +42,10 @@ jest.mock("next/link", () => {
     return MockNextLink;
 });
 
+jest.mock("next/navigation", () => ({
+    useSearchParams: () => mockSearchParams,
+}));
+
 jest.mock("@courselit/components-library", () => ({
     useToast: () => ({
         toast: mockToast,
@@ -69,12 +74,6 @@ jest.mock("@courselit/page-primitives", () => ({
     ),
 }));
 
-jest.mock("@components/ui/avatar", () => ({
-    Avatar: ({ children }: any) => <div>{children}</div>,
-    AvatarFallback: ({ children }: any) => <span>{children}</span>,
-    AvatarImage: ({ alt }: any) => <span>{alt}</span>,
-}));
-
 jest.mock("@courselit/page-blocks", () => ({
     TextRenderer: ({ json }: { json: any }) => (
         <div>{json?.content?.[0]?.content?.[0]?.text}</div>
@@ -132,7 +131,6 @@ jest.mock("lucide-react", () => ({
     Flag: () => null,
     ThumbsUp: () => null,
     MessageSquare: () => null,
-    MoreVertical: () => null,
     Trash2: () => null,
     X: () => null,
 }));
@@ -212,6 +210,7 @@ describe("ProductDiscussionPanel", () => {
     beforeEach(() => {
         jest.clearAllMocks();
         payloads.length = 0;
+        mockSearchParams = new URLSearchParams();
         window.location.hash = "";
         mockExec.mockImplementation(() => {
             const payload = payloads[payloads.length - 1];
@@ -247,6 +246,25 @@ describe("ProductDiscussionPanel", () => {
         });
     });
 
+    it("preserves preview session params in the view all discussions link", async () => {
+        mockSearchParams = new URLSearchParams(
+            "preview=true&returnTo=%2Fdashboard%2Fproduct%2Fcourse-1&discussion=open",
+        );
+
+        renderPanel();
+
+        await waitFor(() => {
+            expect(screen.getByText("Root comment")).toBeInTheDocument();
+        });
+
+        expect(
+            screen.getByText("View all discussions").closest("a"),
+        ).toHaveAttribute(
+            "href",
+            "/course/course-slug/course-1/discussions?preview=true&discussion=open&returnTo=%2Fdashboard%2Fproduct%2Fcourse-1",
+        );
+    });
+
     it("loads the hash target, highlights it, and scrolls it into view", async () => {
         window.location.hash = "#discussion-reply-reply-1";
 
@@ -271,6 +289,38 @@ describe("ProductDiscussionPanel", () => {
         });
     });
 
+    it("reloads, scrolls, and highlights when a notification hash arrives after mount", async () => {
+        renderPanel();
+
+        await waitFor(() => {
+            expect(screen.getByText("Root comment")).toBeInTheDocument();
+        });
+        expect(payloads[0].variables.targetContentId).toBeUndefined();
+
+        scrollIntoView.mockClear();
+        window.location.hash = "#discussion-reply-reply-1";
+        window.dispatchEvent(new HashChangeEvent("hashchange"));
+
+        await waitFor(() => {
+            expect(payloads[payloads.length - 1].variables).toEqual(
+                expect.objectContaining({
+                    targetContentType: "REPLY",
+                    targetContentId: "reply-1",
+                }),
+            );
+        });
+
+        await waitFor(() => {
+            expect(
+                document.getElementById("discussion-reply-reply-1"),
+            ).toHaveClass("bg-yellow-100");
+        });
+        expect(scrollIntoView).toHaveBeenCalledWith({
+            block: "center",
+            behavior: "smooth",
+        });
+    });
+
     it("stores parentReplyId when replying to an existing reply", async () => {
         renderPanel();
 
@@ -280,10 +330,22 @@ describe("ProductDiscussionPanel", () => {
 
         const replyButtons = screen.getAllByText("Reply");
         fireEvent.click(replyButtons[1]);
+        await waitFor(() => {
+            expect(screen.getByLabelText("Add a reply...")).toHaveFocus();
+        });
+        expect(scrollIntoView).toHaveBeenCalledWith({
+            block: "center",
+            behavior: "smooth",
+        });
+
         fireEvent.change(screen.getByLabelText("Add a reply..."), {
             target: { value: "Replying to a reply" },
         });
-        fireEvent.click(screen.getByText("Post Reply"));
+        const postReplyButton = screen.getByText("Post Reply");
+        await waitFor(() => {
+            expect(postReplyButton).not.toBeDisabled();
+        });
+        fireEvent.click(postReplyButton);
 
         await waitFor(() => {
             expect(screen.getByText("Replying to a reply")).toBeInTheDocument();