panel body
+ , + ); + return { onToggleCollapse }; +} + +describe("SidePanel · a mouse on a wide window", () => { + it("pins from the tab, as before", () => { + stubMedia({ coarse: false, narrow: false, wide: true }); + const { onToggleCollapse } = mount(); + fireEvent.click(screen.getByRole("button", { name: "sidebar.pin" })); + expect(onToggleCollapse).toHaveBeenCalledOnce(); + expect(screen.queryByRole("dialog")).toBeNull(); + }); +}); + +describe("SidePanel · on touch", () => { + it("opens a drawer from the tab instead of pinning, and Esc closes it", () => { + stubMedia({ coarse: true, narrow: false, wide: false }); + const { onToggleCollapse } = mount(); + expect(screen.queryByText("panel body")).toBeNull(); + fireEvent.click(screen.getByRole("button", { name: "sidebar.openPanel:Filters" })); + const dialog = screen.getByRole("dialog"); + expect(dialog.textContent).toContain("panel body"); + expect(onToggleCollapse).not.toHaveBeenCalled(); + // Below 1024 a pinned panel would leave the content no room: no pin in the drawer. + expect(screen.queryByRole("button", { name: "sidebar.pin" })).toBeNull(); + fireEvent.keyDown(window, { key: "Escape" }); + expect(screen.queryByRole("dialog")).toBeNull(); + }); + + it("never peeks on the emulated hover a tap fires", () => { + stubMedia({ coarse: true, narrow: false, wide: false }); + mount(); + fireEvent.mouseEnter(screen.getByRole("button", { name: "sidebar.openPanel:Filters" })); + expect(screen.queryByText("panel body")).toBeNull(); + }); + + it("offers the pin in the drawer's header at 1024 and up, and pinning closes the drawer", () => { + stubMedia({ coarse: true, narrow: false, wide: true }); + const { onToggleCollapse } = mount(); + fireEvent.click(screen.getByRole("button", { name: "sidebar.openPanel:Filters" })); + fireEvent.click(screen.getByRole("button", { name: "sidebar.pin" })); + expect(onToggleCollapse).toHaveBeenCalledOnce(); + expect(screen.queryByRole("dialog")).toBeNull(); + }); + + it("leaves a pin saved on a desktop alone below 1024: a tab, not a pinned card", () => { + stubMedia({ coarse: true, narrow: false, wide: false }); + mount(false); + expect(screen.queryByText("panel body")).toBeNull(); + expect(screen.getByRole("button", { name: "sidebar.openPanel:Filters" })).toBeTruthy(); + }); + + it("closes for good when the tablet turns to a width where the panel is a card again", () => { + stubMedia({ coarse: false, narrow: true, wide: false }); + mount(); + fireEvent.click(screen.getByRole("button", { name: "sidebar.openPanel:Filters" })); + expect(screen.getByRole("dialog")).toBeTruthy(); + turn({ coarse: false, narrow: false, wide: true }); + expect(screen.queryByRole("dialog")).toBeNull(); + turn({ coarse: false, narrow: true, wide: false }); + expect(screen.queryByRole("dialog")).toBeNull(); + }); +}); + +describe("SidePanel · a narrow window with a mouse", () => { + it("is a drawer too (split screen, a small window)", () => { + stubMedia({ coarse: false, narrow: true, wide: false }); + mount(); + fireEvent.click(screen.getByRole("button", { name: "sidebar.openPanel:Filters" })); + expect(screen.getByRole("dialog").textContent).toContain("panel body"); + }); +}); diff --git a/frontend/src/components/ui/SidePanel.tsx b/frontend/src/components/ui/SidePanel.tsx index e0ef7ad9..1648588c 100644 --- a/frontend/src/components/ui/SidePanel.tsx +++ b/frontend/src/components/ui/SidePanel.tsx @@ -1,10 +1,12 @@ -import { type ReactNode } from "react"; +import { useState, type ReactNode } from "react"; import { useTranslation } from "react-i18next"; import { Check, Pencil, Pin, PinOff, RotateCcw } from "lucide-react"; import { useScrollFade } from "../../lib/useScrollFade"; import { useHoverFocusWithin } from "../../lib/useHoverFocusWithin"; +import { useMediaQuery } from "../../lib/useMediaQuery"; import { IconButton } from "./IconButton"; import { Pressable } from "./Pressable"; +import Modal from "./Modal"; import { SURFACE } from "./surfaces"; // The shared floating side panel — one shell for the Feed / Plex / Playlists rails so they read as @@ -12,6 +14,18 @@ import { SURFACE } from "./surfaces"; // against the rail's right edge (this panel is the flex sibling right after it) and expands into a // rounded glass card on hover/focus WITHOUT pushing content; pinned it stays expanded in-flow. // `collapsed` (persisted per-account) therefore means "unpinned". +// +// On touch, and in a window below 768 (C2), there is no hover to peek with and no room to pin: the tab +// (shown at every width) opens the panel as a DRAWER over the content, with a scrim — ui/Modal's +// start-edge drawer, so Esc, Back, a tap outside, the focus trap and the scroll lock are the dialog's +// own. Pinning stays a button in the panel's header, offered only ≥ 1024 where a pinned panel leaves +// the content room; a pin saved on a desktop is left alone below that, not honoured. + +// Where the panel is a drawer rather than a peeking card: a coarse pointer, or a window too narrow to +// lay a panel beside the content. And where a pinned panel still leaves the content room (≥ 1024). +const DRAWER_QUERY = "(pointer: coarse), (max-width: 767.98px)"; +const PIN_ROOM_QUERY = "(min-width: 1024px)"; + export default function SidePanel({ title, icon, @@ -52,8 +66,64 @@ export default function SidePanel({ const { t } = useTranslation(); const fade = useScrollFade(); const peek = useHoverFocusWithin(); - const pinned = !collapsed; - const expanded = pinned || peek.active; + const drawerMode = useMediaQuery(DRAWER_QUERY, false); + const pinRoom = useMediaQuery(PIN_ROOM_QUERY, true); + const canPin = !drawerMode || pinRoom; + const pinned = !collapsed && canPin; + // A drawer never peeks: a tap would fire the emulated hover and open the card under the finger. + const expanded = pinned || (!drawerMode && peek.active); + const [drawerOpen, setDrawerOpen] = useState(false); + // Turning the tablet to a width where the panel is a card again, or pinning it, ends the drawer — + // adjusted during render, so it cannot come back open on the next turn. + if (drawerOpen && (!drawerMode || pinned)) setDrawerOpen(false); + + const titleNode = onTitleClick ? ( +