diff --git a/app/src/components/__tests__/mobileDraftSwitcher.test.tsx b/app/src/components/__tests__/mobileDraftSwitcher.test.tsx new file mode 100644 index 00000000..49eff478 --- /dev/null +++ b/app/src/components/__tests__/mobileDraftSwitcher.test.tsx @@ -0,0 +1,59 @@ +import { cleanup, fireEvent, render, screen } from "@testing-library/react"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { MobileDraftSwitcher } from "@/components/sidebar/MobileDraftSwitcher"; +import { TooltipProvider } from "@/components/ui/tooltip"; + +afterEach(() => { + cleanup(); + vi.unstubAllGlobals(); +}); + +const guides = [ + { localDraftId: "a", title: "Intro to Limits" }, + { localDraftId: "b", title: "" }, +]; + +const renderSwitcher = (onSelectGuide = vi.fn()) => + render( + + {}} + onDeleteGuide={() => {}} + /> + + ); + +describe("MobileDraftSwitcher", () => { + it("shows the active draft position and a fallback title", () => { + renderSwitcher(); + + const trigger = screen.getByRole("button", { + name: "Drafts: guide 2 of 2, Guide 2", + }); + expect(trigger.textContent).toContain("2 / 2"); + }); + + it("selects a draft from the sheet and closes it", () => { + vi.stubGlobal( + "ResizeObserver", + class { + observe() {} + unobserve() {} + disconnect() {} + } + ); + const onSelectGuide = vi.fn(); + renderSwitcher(onSelectGuide); + + fireEvent.click(screen.getByRole("button", { name: /^Drafts:/ })); + expect(screen.getByRole("dialog")).toBeDefined(); + + fireEvent.click(screen.getByRole("button", { name: /Intro to Limits/ })); + + expect(onSelectGuide).toHaveBeenCalledWith("a"); + expect(screen.queryByRole("dialog")).toBeNull(); + }); +}); diff --git a/app/src/components/__tests__/rejectionFeedback.test.tsx b/app/src/components/__tests__/rejectionFeedback.test.tsx new file mode 100644 index 00000000..8bd95003 --- /dev/null +++ b/app/src/components/__tests__/rejectionFeedback.test.tsx @@ -0,0 +1,95 @@ +// @vitest-environment jsdom +import { + cleanup, + fireEvent, + render, + screen, + within, +} from "@testing-library/react"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { RejectionFeedback } from "@/components/review/RejectionFeedback"; + +vi.mock("@tanstack/react-router", () => ({ + Link: ({ children }: { children: React.ReactNode }) => {children}, +})); + +vi.mock("@/lib/api/guideRevisions", () => ({ + getRevision: vi.fn(() => Promise.resolve({ revised_from_case_id: "case-1" })), +})); + +vi.mock("@/lib/api/reviews", () => ({ + getReviewCase: vi.fn(() => + Promise.resolve({ + decisions: [ + { + id: "d1", + decision: "reject", + notes: "Needs a worked example.", + reasons: ["clarity_issue"], + created_at: "2026-10-01T00:00:00Z", + member_username: "reviewer", + }, + ], + }) + ), +})); + +afterEach(() => { + cleanup(); + vi.unstubAllGlobals(); +}); + +const stubScreen = (isDesktop: boolean) => { + vi.stubGlobal( + "ResizeObserver", + class { + observe() {} + unobserve() {} + disconnect() {} + } + ); + vi.stubGlobal("matchMedia", (query: string) => ({ + matches: isDesktop, + media: query, + addEventListener: () => {}, + removeEventListener: () => {}, + })); +}; + +describe("RejectionFeedback", () => { + it("opens the panel feedback in a sheet on mobile", async () => { + stubScreen(false); + render(); + + const dialog = await screen.findByRole("dialog"); + expect(within(dialog).getByText("View the closed case")).toBeDefined(); + expect(within(dialog).getByText("Needs a worked example.")).toBeDefined(); + + fireEvent.click(within(dialog).getByRole("button", { name: "Close" })); + expect(screen.queryByRole("dialog")).toBeNull(); + + fireEvent.click( + screen.getByRole("button", { name: "Show panel feedback" }) + ); + expect(screen.getByRole("dialog")).toBeDefined(); + }); + + it("reopens the side column instead of a sheet on desktop", async () => { + stubScreen(true); + render(); + + fireEvent.click( + await screen.findByRole("button", { name: "Hide panel feedback" }) + ); + expect(screen.queryByRole("dialog")).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Show panel feedback" }) + ); + + expect(screen.queryByRole("dialog")).toBeNull(); + // the column is back, so the reopen button hides again + expect( + screen.getByLabelText("Show panel feedback").getAttribute("aria-hidden") + ).toBe("true"); + }); +}); diff --git a/app/src/components/contribute/StepperActionHeader.tsx b/app/src/components/contribute/StepperActionHeader.tsx index c072f9f1..a10f17d3 100644 --- a/app/src/components/contribute/StepperActionHeader.tsx +++ b/app/src/components/contribute/StepperActionHeader.tsx @@ -265,7 +265,7 @@ export const StepperActionHeader = ({ onClick={toggleGuidelineModal} > - + View Guidelines diff --git a/app/src/components/contribute/steps/guide/GuideInfo.tsx b/app/src/components/contribute/steps/guide/GuideInfo.tsx index b49994f5..159c90df 100644 --- a/app/src/components/contribute/steps/guide/GuideInfo.tsx +++ b/app/src/components/contribute/steps/guide/GuideInfo.tsx @@ -8,6 +8,7 @@ import { Content } from "@/components/contribute/steps/Content"; import { CustomTabs } from "@/components/Tabs"; import { GuideDetails } from "@/components/contribute/steps/guide/GuideDetails"; import { EditorSidebar } from "@/components/sidebar/EditorSidebar"; +import { MobileDraftSwitcher } from "@/components/sidebar/MobileDraftSwitcher"; type SubjectOption = { id: string; @@ -137,7 +138,15 @@ export const GuideInfo = ({ onDeleteGuide={onDeleteGuide} /> -
+
+ +
diff --git a/app/src/components/review/RejectionFeedback.tsx b/app/src/components/review/RejectionFeedback.tsx index be65bec5..05eb5a8d 100644 --- a/app/src/components/review/RejectionFeedback.tsx +++ b/app/src/components/review/RejectionFeedback.tsx @@ -1,19 +1,76 @@ import { useEffect, useState } from "react"; import { Link } from "@tanstack/react-router"; -import { PanelRightClose, PanelRightOpen } from "lucide-react"; +import { MessageSquareWarning, PanelRightClose } from "lucide-react"; import type { PanelDecision } from "@/components/review/DecisionList"; import { DecisionList } from "@/components/review/DecisionList"; import { Button } from "@/components/ui/button"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, +} from "@/components/ui/sheet"; import { getRevision } from "@/lib/api/guideRevisions"; import { getReviewCase } from "@/lib/api/reviews"; import { cn } from "@/lib/utils"; +import { useMediaQuery } from "@/lib/useMediaQuery"; + +type MobileProps = { + caseId: string; + decisions: Array; + open: boolean; + onOpenChange: (open: boolean) => void; +}; + +const CaseLink = ({ caseId }: { caseId: string }) => ( + + View the closed case + +); + +/** + * mobile replacement for the feedback column + * panel feedback slides in from the right as Sheet + */ +const MobileRejectionFeedback = ({ + caseId, + decisions, + open, + onOpenChange, +}: MobileProps) => ( + + + + + Panel Feedback + + + Reviewer decisions from the case that sent this draft back. + + + +
+ + +
+ + +); export const RejectionFeedback = ({ draftId }: { draftId: string }) => { const [caseId, setCaseId] = useState(null); const [decisions, setDecisions] = useState>([]); + const [open, setOpen] = useState(true); + const isDesktop = useMediaQuery("(min-width: 60rem)"); + useEffect(() => { const controller = new AbortController(); const opts = { signal: controller.signal }; @@ -35,12 +92,18 @@ export const RejectionFeedback = ({ draftId }: { draftId: string }) => { return ( <> + + -
- -
+ + + + )} ); }; diff --git a/app/src/components/sidebar/EditorSidebar.tsx b/app/src/components/sidebar/EditorSidebar.tsx index eb7a688c..65523fe5 100644 --- a/app/src/components/sidebar/EditorSidebar.tsx +++ b/app/src/components/sidebar/EditorSidebar.tsx @@ -27,7 +27,7 @@ import { } from "@/components/ui/tooltip"; import { SelectDraftModal } from "@/components/modals/SelectDraftModal"; -type GuideOption = Pick & { +export type GuideOption = Pick & { localDraftId: string; }; @@ -50,17 +50,11 @@ export const EditorSidebar = ({ onDeleteGuide, }: Props) => { const [collapsed, setCollapsed] = useState(false); - const [selectDraftModalOpen, setSelectDraftModalOpen] = useState(false); - const [selectedDrafts, setSelectedDrafts] = useState>([]); - - const handleSelectExistingDrafts = (draftIds: Array) => { - setSelectedDrafts(draftIds); - }; return ( + ); +}; + +type DraftActionsProps = { + guideCount: number; + activeGuideId: string; + onAddGuide: () => void; + onDeleteGuide: (localDraftId: string) => void; +}; + +/** + * add (existing / blank) and remove draft buttons + * shared by the desktop sidebar and the mobile drafts sheet + */ +export const DraftActions = ({ + guideCount, + activeGuideId, + onAddGuide, + onDeleteGuide, +}: DraftActionsProps) => { + const [selectDraftModalOpen, setSelectDraftModalOpen] = useState(false); + const [selectedDrafts, setSelectedDrafts] = useState>([]); + + const handleSelectExistingDrafts = (draftIds: Array) => { + setSelectedDrafts(draftIds); + }; + + return ( + <> +
+ + + + + + + - const displayTitle = guide.title.trim() || `Guide ${index + 1}`; + +

Add Draft

+ + - return ( -
  • - + - {!collapsed && ( - {displayTitle} - )} - + + + + + - -
    • - ); - })} - + + + + + + +

    Remove Draft

    +     +     +
    {selectDraftModalOpen && ( )} - + + ); +}; + +type DraftListProps = { + guides: Array; + activeGuideId: string; + collapsed?: boolean; + onSelectGuide: (localDraftId: string) => void; +}; + +export const DraftList = ({ + guides, + activeGuideId, + collapsed = false, + onSelectGuide, +}: DraftListProps) => { + return ( +
      + {guides.map((guide, index) => { + const active = guide.localDraftId === activeGuideId; + + const displayTitle = guide.title.trim() || `Guide ${index + 1}`; + + return ( +
    • + + + +
      • + ); + })} +
    ); }; diff --git a/app/src/components/sidebar/MobileDraftSwitcher.tsx b/app/src/components/sidebar/MobileDraftSwitcher.tsx new file mode 100644 index 00000000..e1d73460 --- /dev/null +++ b/app/src/components/sidebar/MobileDraftSwitcher.tsx @@ -0,0 +1,104 @@ +import { useState } from "react"; +import { PanelLeftOpen } from "lucide-react"; + +import type { GuideOption } from "@/components/sidebar/EditorSidebar"; + +import { Separator } from "@/components/ui/separator"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet"; +import { DraftActions, DraftList } from "@/components/sidebar/EditorSidebar"; + +type Props = { + guides: Array; + activeGuideId: string; + + onSelectGuide: (localDraftId: string) => void; + onAddGuide: () => void; + onDeleteGuide: (localDraftId: string) => void; +}; + +/** + * mobile replacement for EditorSidebar - a bar showing the active draft + * that opens the draft list in a sheet sliding in from the left + */ +export const MobileDraftSwitcher = ({ + guides, + activeGuideId, + onSelectGuide, + onAddGuide, + onDeleteGuide, +}: Props) => { + const [open, setOpen] = useState(false); + + const activeIndex = guides.findIndex( + (guide) => guide.localDraftId === activeGuideId + ); + const activeTitle = + guides[activeIndex]?.title.trim() || `Guide ${activeIndex + 1}`; + + const selectGuide = (localDraftId: string) => { + onSelectGuide(localDraftId); + setOpen(false); + }; + + const addGuide = () => { + onAddGuide(); + setOpen(false); + }; + + return ( + + + + + + + + + Drafts + + + Switch between, add or remove guide drafts. + + + +
    + +
    + + + +
    + +
    +     +     + ); +}; diff --git a/app/src/components/ui/sheet.tsx b/app/src/components/ui/sheet.tsx index 46757797..f27490b3 100644 --- a/app/src/components/ui/sheet.tsx +++ b/app/src/components/ui/sheet.tsx @@ -36,7 +36,7 @@ function SheetOverlay({ + useSyncExternalStore( + (onChange) => { + const mql = window.matchMedia(query); + mql.addEventListener("change", onChange); + return () => mql.removeEventListener("change", onChange); + }, + () => window.matchMedia(query).matches, + () => false + ); diff --git a/app/src/styles.css b/app/src/styles.css index 107ee0db..6573976b 100644 --- a/app/src/styles.css +++ b/app/src/styles.css @@ -586,3 +586,8 @@ math-field::part(virtual-keyboard-toggle) { display: none !important; } + +/* Stop scroll on `Sheet` elements for mobile users */ +html body[data-scroll-locked] { + margin-right: 0 !important; +}