{art.kind === "back" ? (
) : isLoading ? (
diff --git a/client/src/components/card/HoverCardPreview.tsx b/client/src/components/card/HoverCardPreview.tsx
index 5dbcdb59b7..64d062c1a2 100644
--- a/client/src/components/card/HoverCardPreview.tsx
+++ b/client/src/components/card/HoverCardPreview.tsx
@@ -3,12 +3,20 @@ import { useEffect, useState } from "react";
import { useShiftHeld } from "../../hooks/useShiftHeld.ts";
import { usePreferencesStore } from "../../stores/preferencesStore.ts";
import { useUiStore } from "../../stores/uiStore.ts";
-import { CardPreview, type CardHoverInfo } from "./CardPreview.tsx";
+import {
+ CardPreview,
+ type CardHoverInfo,
+ type CardPreviewDockPosition,
+} from "./CardPreview.tsx";
interface HoverCardPreviewProps {
card: CardHoverInfo | null;
onDismiss?: () => void;
mobileLayout?: "modal" | "compact";
+ /** Keep this surface's desktop preview at the side, independent of the
+ * global game-board hover preference. */
+ forceDockSide?: boolean;
+ dockPosition?: CardPreviewDockPosition;
}
/**
@@ -19,6 +27,8 @@ export function HoverCardPreview({
card,
onDismiss,
mobileLayout,
+ forceDockSide = false,
+ dockPosition,
}: HoverCardPreviewProps) {
const cardPreviewMode = usePreferencesStore((s) => s.cardPreviewMode);
const cardPreviewHoverDelayMs = usePreferencesStore((s) => s.cardPreviewHoverDelayMs);
@@ -50,12 +60,35 @@ export function HoverCardPreview({
const previewCard = cardPreviewMode === "shift" && !shiftHeld ? null : visibleCard;
+ useEffect(() => {
+ if (visibleCard == null || onDismiss == null || typeof window === "undefined") {
+ return undefined;
+ }
+
+ // Grid/list rows can be replaced while the pointer is over them, so React
+ // never receives their pointerleave. Clear the deck-builder-owned state on
+ // the next mouse move outside every registered hover source.
+ const handlePointerMove = (event: PointerEvent) => {
+ if (event.pointerType !== "mouse") return;
+ if (
+ event.target instanceof Element
+ && event.target.closest("[data-card-preview]") != null
+ ) return;
+ if (document.querySelector("[data-deck-card-hover]:hover") == null) {
+ onDismiss();
+ }
+ };
+ window.addEventListener("pointermove", handlePointerMove);
+ return () => window.removeEventListener("pointermove", handlePointerMove);
+ }, [onDismiss, visibleCard]);
+
return (
diff --git a/client/src/components/card/__tests__/CardPreview.test.tsx b/client/src/components/card/__tests__/CardPreview.test.tsx
index ae5f5d43f6..37cd53f019 100644
--- a/client/src/components/card/__tests__/CardPreview.test.tsx
+++ b/client/src/components/card/__tests__/CardPreview.test.tsx
@@ -111,7 +111,7 @@ describe("CardPreview chosen attributes", () => {
expect(preview).not.toBeNull();
expect(preview?.style.bottom).toBe("0px");
expect(preview?.style.transformOrigin).toBe("50% 100%");
- expect(screen.getByAltText("Pithing Needle")).toHaveClass(
+ expect(screen.getByAltText("Pithing Needle").parentElement!).toHaveClass(
"w-[clamp(190px,18vw,300px)]",
);
source.remove();
@@ -148,7 +148,7 @@ describe("CardPreview chosen attributes", () => {
expect(preview).not.toBeNull();
expect(preview?.style.bottom).toBe("0px");
expect(preview).toHaveClass("pointer-events-none");
- expect(screen.getByAltText("Pithing Needle")).toHaveClass(
+ expect(screen.getByAltText("Pithing Needle").parentElement!).toHaveClass(
"w-[clamp(190px,18vw,300px)]",
);
source.remove();
diff --git a/client/src/components/card/__tests__/HoverCardPreview.test.tsx b/client/src/components/card/__tests__/HoverCardPreview.test.tsx
index dd22a0608a..c3b89e87b2 100644
--- a/client/src/components/card/__tests__/HoverCardPreview.test.tsx
+++ b/client/src/components/card/__tests__/HoverCardPreview.test.tsx
@@ -6,8 +6,21 @@ import { useUiStore } from "../../../stores/uiStore.ts";
import { HoverCardPreview } from "../HoverCardPreview.tsx";
vi.mock("../CardPreview.tsx", () => ({
- CardPreview: ({ cardName, dockSide }: { cardName: string | null; dockSide?: boolean }) => (
-
+ CardPreview: ({
+ cardName,
+ dockSide,
+ dockPosition,
+ }: {
+ cardName: string | null;
+ dockSide?: boolean;
+ dockPosition?: string;
+ }) => (
+
{cardName}
),
@@ -38,6 +51,33 @@ describe("HoverCardPreview", () => {
expect(screen.getByTestId("preview")).toHaveAttribute("data-dock-side", "true");
});
+ it("can keep a workspace preview docked without changing the game-board preference", () => {
+ render(
);
+
+ expect(screen.getByTestId("preview")).toHaveAttribute("data-dock-side", "true");
+ expect(screen.getByTestId("preview")).toHaveAttribute("data-dock-position", "middle-right");
+ });
+
+ it("dismisses a deck-owned preview when its hover source is removed", () => {
+ const onDismiss = vi.fn();
+ render(
);
+ const querySelector = vi.spyOn(document, "querySelector").mockReturnValue(null);
+
+ fireEvent.pointerMove(window, { pointerType: "mouse" });
+
+ expect(onDismiss).toHaveBeenCalledOnce();
+ querySelector.mockRestore();
+ });
+
+ it("keeps a deck preview open while the pointer is over its interactive panel", () => {
+ const onDismiss = vi.fn();
+ render(
);
+
+ fireEvent.pointerMove(screen.getByTestId("preview"), { pointerType: "mouse" });
+
+ expect(onDismiss).not.toHaveBeenCalled();
+ });
+
it("shows a hovered card only while Shift is held in shift mode", () => {
usePreferencesStore.setState({ cardPreviewMode: "shift" });
render(
);
diff --git a/client/src/components/deck-builder/hoverPreview.ts b/client/src/components/deck-builder/hoverPreview.ts
index fdc528500c..479ce2bc2e 100644
--- a/client/src/components/deck-builder/hoverPreview.ts
+++ b/client/src/components/deck-builder/hoverPreview.ts
@@ -28,6 +28,7 @@ export function mouseHoverPreview(
card: CardHoverInfo,
) {
return {
+ "data-deck-card-hover": "",
onPointerEnter: (e: PointerEvent) => {
if (e.pointerType === "mouse") onCardHover?.(card);
},
diff --git a/client/src/pages/DeckBuilderPage.tsx b/client/src/pages/DeckBuilderPage.tsx
index cf36058f8c..9c0ae0ebd2 100644
--- a/client/src/pages/DeckBuilderPage.tsx
+++ b/client/src/pages/DeckBuilderPage.tsx
@@ -135,6 +135,8 @@ export function DeckBuilderPage() {
card={hoveredCard}
onDismiss={useCallback(() => setHoveredCard(null), [])}
mobileLayout="compact"
+ forceDockSide
+ dockPosition="middle-right"
/>
);