From b252fa113d3131743536b77dc7b31aa30debe25b Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 29 May 2026 13:08:16 +0800
Subject: [PATCH] feat: make entire recommended card clickable to jump to post
 bubble

Wrap the card in a stretched link overlay so clicking anywhere (not
just the title) navigates to /resource/:id and scrolls to the matching
bubble. Keep the download button above the overlay so it stays
clickable.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/RecommendedCard.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/RecommendedCard.tsx b/src/components/RecommendedCard.tsx
index cc08720..fb84c6f 100644
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -97,7 +97,7 @@ export function RecommendedCard({
     <m.article
       whileHover={{ y: -4 }}
       transition={CARD_HOVER_SPRING}
-      className={`${CARD_BASE_CLASS} ${
+      className={`relative ${CARD_BASE_CLASS} ${
         layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
       } ${
         useFigmaDesign
@@ -107,8 +107,10 @@ export function RecommendedCard({
     >
       <Link
         to={`/resource/${r.id}`}
-        className="relative block aspect-[208/108] overflow-hidden bg-[#111116]"
-      >
+        aria-label={displayTitle}
+        className="absolute inset-0 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
+      />
+      <div className="relative block aspect-[208/108] overflow-hidden bg-[#111116]">
         {cover ? (
           <img
             src={cover}
@@ -125,7 +127,7 @@ export function RecommendedCard({
             {r.badgeLabel}
           </span>
         ) : null}
-      </Link>
+      </div>
       <div
         className={
           useFigmaDesign
@@ -134,12 +136,9 @@ export function RecommendedCard({
         }
       >
         <div className="flex flex-col gap-1.5">
-          <Link
-            to={`/resource/${r.id}`}
-            className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug"
-          >
+          <h3 className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug">
             {displayTitle}
-          </Link>
+          </h3>
           {useFigmaDesign ? (
             <div className="truncate text-[12px] font-normal leading-[17.376px] text-[#A8A9AE]">
               {displayCategoryName}
@@ -173,8 +172,8 @@ export function RecommendedCard({
               type="button"
               className={
                 useFigmaDesign
-                  ? "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-ark-gold outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
-                  : "shrink-0 rounded-lg p-1 text-ark-gold outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
+                  ? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-ark-gold outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
+                  : "relative z-20 shrink-0 rounded-lg p-1 text-ark-gold outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
               }
               title={isDownloading ? t("downloading") : t("download")}
               aria-label={isDownloading ? t("downloading") : t("download")}