From 4900256423c33177c155ab5b8d033be1d12e82bf Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 2 Jun 2026 00:41:06 +0800
Subject: [PATCH] feat: add favorites to latest rows

---
 src/components/LatestUpdateRow.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/LatestUpdateRow.tsx b/src/components/LatestUpdateRow.tsx
index cc90c3d..e78caa9 100644
--- a/src/components/LatestUpdateRow.tsx
+++ b/src/components/LatestUpdateRow.tsx
@@ -5,9 +5,10 @@ import { useI18n } from "../i18n";
 import { useLocalizedPath } from "../useLocalizedPath";
 import { resourceTypeLabel } from "../resourceTypeLabels";
 import { formatDateYmd } from "../utils/format";
+import { FavoriteButton } from "../favorites/FavoriteButton";
 
 const LATEST_CARD_CLASS =
-  "flex min-h-[106px] items-start gap-4 overflow-hidden rounded-xl border border-ark-line bg-ark-panel p-4 outline-none transition hover:border-ark-gold/45 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:min-h-[138px] md:p-5";
+  "relative flex min-h-[106px] items-start gap-4 overflow-hidden rounded-xl border border-ark-line bg-ark-panel p-4 outline-none transition hover:border-ark-gold/45 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:min-h-[138px] md:p-5";
 
 export function LatestUpdateRow({
   r,
@@ -21,15 +22,20 @@ export function LatestUpdateRow({
   const dateStr = formatDateYmd(r.updatedAt);
 
   return (
-    <Link to={lp(`/resource/${r.id}`)} className={LATEST_CARD_CLASS}>
-      <div className="flex shrink-0 items-center justify-center pt-0.5">
+    <article className={LATEST_CARD_CLASS}>
+      <Link
+        to={lp(`/resource/${r.id}`)}
+        aria-label={r.title}
+        className="absolute inset-0 z-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80"
+      />
+      <div className="relative z-10 flex shrink-0 items-center justify-center pt-0.5">
         <CategoryIcon
           iconKey={iconKey}
           categorySlug={r.categorySlug}
           className="h-10 w-10 text-ark-gold"
         />
       </div>
-      <div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
+      <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 self-stretch py-0.5 flex-col pr-11">
         <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
           {r.title}
         </div>
@@ -43,7 +49,12 @@ export function LatestUpdateRow({
           </span>
         </div>
       </div>
-    </Link>
+      <FavoriteButton
+        resourceId={r.id}
+        size="sm"
+        className="absolute right-3 top-3 z-20"
+      />
+    </article>
   );
 }