diff --git a/ui/src/components/SidebarProjects.test.tsx b/ui/src/components/SidebarProjects.test.tsx index e9e46126fab..2abac528a97 100644 --- a/ui/src/components/SidebarProjects.test.tsx +++ b/ui/src/components/SidebarProjects.test.tsx @@ -19,6 +19,8 @@ const mockAuthApi = vi.hoisted(() => ({ const mockOpenNewProject = vi.hoisted(() => vi.fn()); const mockSetSidebarOpen = vi.hoisted(() => vi.fn()); const mockPersistOrder = vi.hoisted(() => vi.fn()); +const mockSidebarState = vi.hoisted(() => ({ isMobile: false })); +const mockPointerState = vi.hoisted(() => ({ fine: true })); vi.mock("@/lib/router", () => ({ Link: ({ children, to, ...props }: { children: ReactNode; to: string }) => ( @@ -63,7 +65,7 @@ vi.mock("../context/DialogContext", () => ({ vi.mock("../context/SidebarContext", () => ({ useSidebar: () => ({ - isMobile: false, + isMobile: mockSidebarState.isMobile, setSidebarOpen: mockSetSidebarOpen, }), })); @@ -192,6 +194,23 @@ describe("SidebarProjects", () => { defaultOptions: { queries: { retry: false }, mutations: { retry: false } }, }); localStorage.clear(); + mockSidebarState.isMobile = false; + mockPointerState.fine = true; + Object.defineProperty(window, "matchMedia", { + writable: true, + value: vi.fn().mockImplementation((query: string) => ({ + matches: query.includes("(hover: hover)") && query.includes("(pointer: fine)") + ? mockPointerState.fine + : false, + media: query, + onchange: null, + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + addListener: vi.fn(), + removeListener: vi.fn(), + dispatchEvent: vi.fn(), + })), + }); mockProjectsApi.list.mockResolvedValue([ makeProject({ id: "project-a", @@ -254,6 +273,25 @@ describe("SidebarProjects", () => { expect(projectLinkLabels(container)).toEqual(["Bravo", "Alpha", "Charlie"]); expect(container.querySelector('[data-testid="project-slot-project-b"]')).toBeTruthy(); + expect(container.querySelector('[aria-roledescription="sortable"]')).toBeTruthy(); + }); + + it("uses plain project rows for top mode on mobile", async () => { + mockSidebarState.isMobile = true; + + await renderSidebarProjects(); + + expect(projectLinkLabels(container)).toEqual(["Bravo", "Alpha", "Charlie"]); + expect(container.querySelector('[aria-roledescription="sortable"]')).toBeNull(); + }); + + it("uses plain project rows for top mode on coarse pointer screens", async () => { + mockPointerState.fine = false; + + await renderSidebarProjects(); + + expect(projectLinkLabels(container)).toEqual(["Bravo", "Alpha", "Charlie"]); + expect(container.querySelector('[aria-roledescription="sortable"]')).toBeNull(); }); it("uses the heading for section menu and the plus button for project creation", async () => { diff --git a/ui/src/components/SidebarProjects.tsx b/ui/src/components/SidebarProjects.tsx index bef7424203b..5ea79471529 100644 --- a/ui/src/components/SidebarProjects.tsx +++ b/ui/src/components/SidebarProjects.tsx @@ -41,6 +41,7 @@ const PROJECT_SORT_CHOICES: SidebarSectionRadioChoice[] = [ { value: "alphabetical", label: "Alphabetical" }, { value: "recent", label: "Recent" }, ]; +const REORDER_POINTER_MEDIA = "(hover: hover) and (pointer: fine)"; type ProjectItemProps = { activeProjectRef: string | null; @@ -74,6 +75,26 @@ function sortProjects(projects: Project[], sortMode: ProjectSidebarSortMode): Pr return sorted; } +function hasFineReorderPointer() { + if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true; + return window.matchMedia(REORDER_POINTER_MEDIA).matches; +} + +function useFineReorderPointer() { + const [matches, setMatches] = useState(hasFineReorderPointer); + + useEffect(() => { + if (typeof window === "undefined" || typeof window.matchMedia !== "function") return; + const query = window.matchMedia(REORDER_POINTER_MEDIA); + const onChange = (event: MediaQueryListEvent) => setMatches(event.matches); + setMatches(query.matches); + query.addEventListener("change", onChange); + return () => query.removeEventListener("change", onChange); + }, []); + + return matches; +} + function ProjectItem({ activeProjectRef, companyId, @@ -167,6 +188,7 @@ export function SidebarProjects() { const { selectedCompany, selectedCompanyId } = useCompany(); const { openNewProject } = useDialogActions(); const { isMobile, setSidebarOpen } = useSidebar(); + const fineReorderPointer = useFineReorderPointer(); const location = useLocation(); const { data: projects } = useQuery({ @@ -209,6 +231,7 @@ export function SidebarProjects() { [orderedProjects, sortMode], ); const isTopMode = sortMode === "top"; + const canReorderProjects = isTopMode && !isMobile && fineReorderPointer; const projectMatch = location.pathname.match(/^\/(?:[^/]+\/)?projects\/([^/]+)/); const activeProjectRef = projectMatch?.[1] ?? null; @@ -310,7 +333,7 @@ export function SidebarProjects() { onRadioValueChange: persistSortMode, }} > - {isTopMode ? ( + {canReorderProjects ? (