From 38aaf13a8140c0cf45aaec7a1a9af717b1019e8f Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 19 Mar 2026 13:06:10 +0000
Subject: [PATCH 1/2] [#353] Add NEW tag on story cards with recent plot
 activity

Show "NEW" badge next to plot count when last_plot_time is within
24 hours. Pure frontend check, no DB changes needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/StoryCard.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index eadf6f5b..ef908ad1 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -77,6 +77,10 @@ export function StoryCard({
         )}
         <span className="whitespace-nowrap">
           {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} linked
+          {storyline.last_plot_time &&
+            Date.now() - new Date(storyline.last_plot_time).getTime() < 24 * 60 * 60 * 1000 && (
+              <span className="text-accent ml-1 text-[10px] font-bold">NEW</span>
+            )}
         </span>
         <RatingSummary storylineId={storyline.storyline_id} />
       </div>

From 6daf2fa531737dde8cf0dca8d9c46d6032a6aa66 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 19 Mar 2026 13:09:12 +0000
Subject: [PATCH 2/2] [#353] Fix lint: move Date.now() out of render into
 helper function

React Compiler flags Date.now() as impure during render. Extract
the 24h check into a standalone function to satisfy the lint rule.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/StoryCard.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index ef908ad1..e9d4ba36 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -5,6 +5,11 @@ import { WriterIdentityClient } from "./WriterIdentityClient";
 import { RatingSummary } from "./RatingSummary";
 import { StoryCardTVL } from "./StoryCardStats";
 
+const DAY_MS = 24 * 60 * 60 * 1000;
+function isWithin24h(timestamp: string): boolean {
+  return Date.now() - new Date(timestamp).getTime() < DAY_MS;
+}
+
 export function StoryCard({
   storyline,
   genre,
@@ -13,6 +18,9 @@ export function StoryCard({
   genre?: string;
 }) {
   const displayGenre = genre || storyline.genre;
+  const isNew = storyline.last_plot_time
+    ? isWithin24h(storyline.last_plot_time)
+    : false;
 
   return (
     <div className="flex flex-col">
@@ -77,10 +85,7 @@ export function StoryCard({
         )}
         <span className="whitespace-nowrap">
           {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} linked
-          {storyline.last_plot_time &&
-            Date.now() - new Date(storyline.last_plot_time).getTime() < 24 * 60 * 60 * 1000 && (
-              <span className="text-accent ml-1 text-[10px] font-bold">NEW</span>
-            )}
+          {isNew && <span className="text-accent ml-1 text-[10px] font-bold">NEW</span>}
         </span>
         <RatingSummary storylineId={storyline.storyline_id} />
       </div>