fix: wrap operation card with div instead of anchor

This resolves a violation of HTML spec: an anchor element cannot contain interactive content (button, anchor, etc.)

https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2

Author: guansss

src/components/OperationCard.tsx

@@ -4,7 +4,6 @@ import { Tooltip2 } from '@blueprintjs/popover2'
 import clsx from 'clsx'
 import { copyShortCode, handleDownloadJSON } from 'services/operation'
 
-import { ReLink } from 'components/ReLink'
 import { RelativeTime } from 'components/RelativeTime'
 import { AddToOperationSetButton } from 'components/operation-set/AddToOperationSet'
 import { OperationRating } from 'components/viewer/OperationRating'
@@ -13,6 +12,7 @@ import { OpDifficulty, Operation } from 'models/operation'
 import { useLevels } from '../apis/level'
 import { createCustomLevel, findLevelByStageName } from '../models/level'
 import { Paragraphs } from './Paragraphs'
+import { ReLinkDiv } from './ReLinkDiv'
 import { EDifficulty } from './entity/EDifficulty'
 import { EDifficultyLevel, NeoELevel } from './entity/ELevel'
 
@@ -21,9 +21,9 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
 
   return (
     <Card interactive={true} elevation={Elevation.TWO} className="relative">
-      <ReLink
+      <ReLinkDiv
         search={{ op: operation.id }}
-        className="no-underline h-full flex flex-col gap-2"
+        className="h-full flex flex-col gap-2"
       >
         <div className="flex">
           <Tooltip2
@@ -120,7 +120,7 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
       elevation={Elevation.TWO}
       className="relative mb-4 sm:mb-2 last:mb-0"
     >
-      <ReLink search={{ op: operation.id }} className="block no-underline">
+      <ReLinkDiv search={{ op: operation.id }}>
         <div className="flex flex-wrap mb-4 sm:mb-2">
           {/* title */}
           <div className="flex flex-col gap-3">
@@ -192,7 +192,7 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
             <OperatorTags operation={operation} />
           </div>
         </div>
-      </ReLink>
+      </ReLinkDiv>
 
       <CardActions
         className="absolute top-4 xl:top-12 right-[18px]"

src/components/OperationSetCard.tsx

@@ -22,7 +22,7 @@ export const NeoOperationSetCard = ({
     >
       <ReLink
         search={{ opset: operationSet.id }}
-        className="block no-underline"
+        className="block no-underline hover:no-underline hover:text-inherit"
       >
         {/* title */}
         <div className="flex gap-1">
@@ -91,7 +91,7 @@ export const OperationSetCard = ({
     >
       <ReLink
         search={{ opset: operationSet.id }}
-        className="block no-underline"
+        className="block no-underline hover:no-underline hover:text-inherit"
       >
         <div className="flex flex-wrap mb-4 sm:mb-2">
           {/* title */}

src/components/ReLinkDiv.tsx

@@ -0,0 +1,69 @@
+import { isString } from '@sentry/utils'
+
+import { noop } from 'lodash-es'
+import { AnchorHTMLAttributes, HtmlHTMLAttributes } from 'react'
+import {
+  RelativeRoutingType,
+  To,
+  useLinkClickHandler,
+  useSearchParams,
+} from 'react-router-dom'
+
+interface ReLinkProps extends HtmlHTMLAttributes<HTMLDivElement> {
+  search?: Record<string, string | number | boolean | undefined>
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target']
+
+  to?: To
+  replace?: boolean
+  state?: any
+  preventScrollReset?: boolean
+  relative?: RelativeRoutingType
+}
+
+// div 版的 ReLink
+export function ReLinkDiv({
+  className,
+  search,
+  to,
+  replace = false,
+  state,
+  target,
+  onClick,
+  ...props
+}: ReLinkProps) {
+  const [searchParams] = useSearchParams()
+
+  if (search) {
+    for (const [key, value] of Object.entries(search)) {
+      if (value === undefined) {
+        searchParams.delete(key)
+      } else {
+        searchParams.set(key, String(value))
+      }
+    }
+  }
+
+  to = isString(to) ? to : { ...to, search: searchParams.toString() }
+
+  const handleClick = useLinkClickHandler<HTMLDivElement>(to, {
+    replace,
+    state,
+    target,
+  })
+
+  return (
+    <div
+      role="link"
+      tabIndex={0}
+      className={className}
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) {
+          handleClick(event)
+        }
+      }}
+      onKeyUp={noop}
+      {...props}
+    />
+  )
+}