feat: open deck note links in card modals

src/components/card-list/card-grid.tsx

@@ -8,7 +8,7 @@ import type { Metadata } from "@/store/slices/metadata.types";
 import { sideways } from "@/utils/card-utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type ListRange, Virtuoso, type VirtuosoHandle } from "react-virtuoso";
-import { useCardModalContext } from "../card-modal/card-modal-context";
+import { useCardModalContextChecked } from "../card-modal/card-modal-context";
 import { CardScan } from "../card-scan";
 import { Scroller } from "../ui/scroller";
 import { CardActions } from "./card-actions";
@@ -19,7 +19,7 @@ import type { CardListImplementationProps } from "./types";
 export function CardGrid(props: CardListImplementationProps) {
   const { data, metadata, search, ...rest } = props;
 
-  const modalContext = useCardModalContext();
+  const modalContext = useCardModalContextChecked();
 
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const activeGroup = useRef<string | undefined>(undefined);
@@ -188,7 +188,7 @@ function CardGroupItem(
 ) {
   const { card, onChangeCardQuantity, resolvedDeck, quantities } = props;
 
-  const modalContext = useCardModalContext();
+  const modalContext = useCardModalContextChecked();
 
   const openModal = useCallback(() => {
     modalContext.setOpen({ code: card.code });

src/components/card-list/card-list.tsx

@@ -9,7 +9,7 @@ import { range } from "@/utils/range";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { GroupedVirtuosoHandle, ListRange } from "react-virtuoso";
 import { GroupedVirtuoso, Virtuoso } from "react-virtuoso";
-import { useCardModalContext } from "../card-modal/card-modal-context";
+import { useCardModalContextChecked } from "../card-modal/card-modal-context";
 import { Scroller } from "../ui/scroller";
 import { CardListItemCompact, CardListItemFull } from "./card-list-items";
 import css from "./card-list.module.css";
@@ -33,7 +33,7 @@ export function CardList(props: CardListImplementationProps) {
     viewMode,
   } = props;
 
-  const modalContext = useCardModalContext();
+  const modalContext = useCardModalContextChecked();
 
   const showAltHead = viewMode === "card-text";
 

src/components/card-modal/card-modal-context.tsx

@@ -28,17 +28,21 @@ const CardModalContext = createContext<CardModalContext>({
   setOpen: () => {},
 });
 
-export function useCardModalContext() {
+export function useCardModalContextChecked() {
   const context = useContext(CardModalContext);
 
   if (!context) {
     throw new Error(
-      "useCardModalContext must be used within a CardModalProvider.",
+      "useCardModalContextChecked must be used within a CardModalProvider.",
     );
   }
   return context;
 }
 
+export function useCardModalContext() {
+  return useContext(CardModalContext);
+}
+
 type Props = {
   children: React.ReactNode;
 };

src/components/card/card-names.tsx

@@ -3,7 +3,7 @@ import type { Card } from "@/store/services/queries.types";
 import { parseCardTitle } from "@/utils/card-utils";
 import { cx } from "@/utils/cx";
 import { Link } from "wouter";
-import { useCardModalContext } from "../card-modal/card-modal-context";
+import { useCardModalContextChecked } from "../card-modal/card-modal-context";
 import { useDialogContext } from "../ui/dialog.hooks";
 import css from "./card.module.css";
 
@@ -15,7 +15,7 @@ type Props = {
 export function CardNames(props: Props) {
   const { card, titleLinks } = props;
 
-  const cardModalContext = useCardModalContext();
+  const cardModalContext = useCardModalContextChecked();
   const dialogContext = useDialogContext();
 
   const cardName = (

src/components/deck-description.tsx

@@ -12,6 +12,7 @@ import {
   useTransitionStyles,
 } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useCardModalContext } from "./card-modal/card-modal-context";
 import { CardTooltip } from "./card-tooltip";
 import css from "./deck-description.module.css";
 
@@ -22,6 +23,8 @@ type Props = {
 
 function DeckDescription(props: Props) {
   const { className, content } = props;
+
+  const cardModalContext = useCardModalContext();
   const containerRef = useRef<HTMLDivElement>(null);
   const [cardTooltip, setCardTooltip] = useState<string>("");
 
@@ -94,6 +97,34 @@ function DeckDescription(props: Props) {
     };
   }, [onMouseMove, onMouseLeave]);
 
+  const onLinkClick = useCallback(
+    (evt: React.MouseEvent) => {
+      if (evt.target instanceof HTMLElement) {
+        const anchor = evt.target.closest("a") as HTMLAnchorElement;
+        const href = anchor.getAttribute("href");
+
+        if (cardModalContext && href?.includes("/card/")) {
+          evt.preventDefault();
+          const code = anchor.href.split("/card/").at(-1);
+
+          if (code) {
+            cardModalContext.setOpen({ code });
+          } else {
+            redirectArkhamDBLinks(evt);
+          }
+        } else {
+          redirectArkhamDBLinks(evt);
+        }
+
+        if (anchor != null) {
+          if (anchor.href.startsWith("/card")) {
+          }
+        }
+      }
+    },
+    [cardModalContext],
+  );
+
   return (
     <>
       {/* biome-ignore lint/a11y/useKeyWithClickEvents:  not relevant. */}
@@ -104,7 +135,7 @@ function DeckDescription(props: Props) {
         dangerouslySetInnerHTML={{
           __html: parseMarkdown(content),
         }}
-        onClick={redirectArkhamDBLinks}
+        onClick={onLinkClick}
         ref={containerRef}
       />
 

src/components/deck-display/sidebar.tsx

@@ -37,7 +37,7 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useSearch } from "wouter";
-import { useCardModalContext } from "../card-modal/card-modal-context";
+import { useCardModalContextChecked } from "../card-modal/card-modal-context";
 import { DeckInvestigatorModal } from "../deck-investigator/deck-investigator-modal";
 import { CopyToClipboard } from "../ui/copy-to-clipboard";
 import { useDialogContextChecked } from "../ui/dialog.hooks";
@@ -64,7 +64,7 @@ export function Sidebar(props: Props) {
   const { className, origin, deck } = props;
 
   const dialogContext = useDialogContextChecked();
-  const cardModalContext = useCardModalContext();
+  const cardModalContext = useCardModalContextChecked();
 
   const connections = useStore(selectConnections);
 

src/components/list-card/list-card-inner.tsx

@@ -15,7 +15,7 @@ import { FileWarningIcon, MessageCircleIcon, StarIcon } from "lucide-react";
 import { useCallback } from "react";
 import { CardHealth } from "../card-health";
 import { CardIcon } from "../card-icon";
-import { useCardModalContext } from "../card-modal/card-modal-context";
+import { useCardModalContextChecked } from "../card-modal/card-modal-context";
 import { CardThumbnail } from "../card-thumbnail";
 import { CardDetails } from "../card/card-details";
 import { CardIcons } from "../card/card-icons";
@@ -88,7 +88,7 @@ export function ListCardInner(props: Props) {
     size,
   } = props;
 
-  const modalContext = useCardModalContext();
+  const modalContext = useCardModalContextChecked();
 
   const ignoredCount = isIgnored ?? 0;
 

src/pages/choose-investigator/signature-link.tsx

@@ -1,4 +1,4 @@
-import { useCardModalContext } from "@/components/card-modal/card-modal-context";
+import { useCardModalContextChecked } from "@/components/card-modal/card-modal-context";
 import { CardTooltip } from "@/components/card-tooltip";
 import { useRestingTooltip } from "@/components/ui/tooltip.hooks";
 import type { Card } from "@/store/services/queries.types";
@@ -22,7 +22,7 @@ export function SignatureLink(props: Props) {
     middleware: [shift({ padding: 5 })],
     placement: "right",
   });
-  const modalContext = useCardModalContext();
+  const modalContext = useCardModalContextChecked();
 
   const openModal = useCallback(() => {
     if (modalContext) {

src/pages/deck-edit/editor/investigator-listcard.tsx

@@ -1,4 +1,4 @@
-import { useCardModalContext } from "@/components/card-modal/card-modal-context";
+import { useCardModalContextChecked } from "@/components/card-modal/card-modal-context";
 import { DeckInvestigator } from "@/components/deck-investigator/deck-investigator";
 import { DeckInvestigatorModal } from "@/components/deck-investigator/deck-investigator-modal";
 import { ListCard } from "@/components/list-card/list-card";
@@ -21,7 +21,7 @@ export function InvestigatorListcard(props: Props) {
 }
 
 function InvestigatorListcardInner({ deck }: Props) {
-  const cardModalContext = useCardModalContext();
+  const cardModalContext = useCardModalContextChecked();
   const modalContext = useDialogContextChecked();
 
   useEffect(() => {

src/store/services/data/cards.json

@@ -646,6 +646,7 @@
     "faction_code": "guardian",
     "flavor": "They called Sister Sofia the \"hand of God\" for a very good reason.",
     "illustrator": "Gabby Portal",
+    "myriad": true,
     "name": "Quick Shot",
     "pack_code": "tdcp",
     "position": 31,

src/styles/main.css

@@ -696,10 +696,13 @@ svg {
 }
 
 .longform a {
-  color: currentColor;
   text-decoration-color: currentColor;
 }
 
+.longform :where(h1, h2, h3, h4, h5, h6) a {
+  color: currentColor;
+}
+
 .longform .icon-rogue {
   color: var(--rogue);
 }