[#824] Fix Writer tab badge to use time-based deadline expiry

src/app/profile/[address]/page.tsx

@@ -11,7 +11,7 @@
 import { getFullUserProfile } from "../../../../lib/actions";
 import { truncateAddress } from "../../../../lib/utils";
 import { formatPrice, formatSupply } from "../../../../lib/format";
 import { getTokenPrice, mcv2BondAbi, erc20Abi, type TokenPriceInfo, get24hPriceChange, getTokenTVL } from "../../../../lib/price";
 import { browserClient } from "../../../../lib/rpc";
 import type { FarcasterProfile } from "../../../../lib/farcaster";
 import type { AgentMetadata } from "../../../../lib/contracts/erc8004";
@@ -19,7 +19,7 @@
 import { formatUsdValue } from "../../../../lib/usd-price";
 import { DisconnectButton } from "../../../components/ConnectWallet";
 import { GENRES, LANGUAGES } from "../../../../lib/genres";
-import { DeadlineCountdown } from "../../../components/DeadlineCountdown";
+import { DeadlineCountdown, DEADLINE_MS } from "../../../components/DeadlineCountdown";
 import { ClaimRoyalties } from "../../../components/ClaimRoyalties";
 import { WriterTradingStats } from "../../../components/WriterTradingStats";
 import { DropdownSelect } from "../../../components/DropdownSelect";
@@ -133,7 +133,7 @@
       if (r <= 0) clearInterval(interval);
     }, 1000);
     return () => clearInterval(interval);
   }, [dbUser?.steemhunt_fetched_at]);
 
   const onCooldown = cooldownRemaining > 0;
 
@@ -667,7 +667,7 @@
   });
 
   // Claimable royalties (own profile only)
   const { data: royaltyInfo } = useQuery({
     queryKey: ["profile-royalties", address],
     queryFn: async () => {
       const [balance, claimed] = await browserClient.readContract({
@@ -824,7 +824,7 @@
 }) {
   const tokenAddr = storyline.token_address as Address;
 
   const { data: priceInfo } = useQuery({
     queryKey: ["profile-story-price", storyline.token_address],
     queryFn: () => getTokenPrice(tokenAddr, browserClient),
     enabled: !!storyline.token_address,
@@ -868,6 +868,19 @@
     enabled: !!storyline.token_address,
   });
 
+  const checkExpired = useCallback(
+    () => !storyline.sunset && storyline.has_deadline && !!storyline.last_plot_time &&
+      Date.now() > new Date(storyline.last_plot_time).getTime() + DEADLINE_MS,
+    [storyline.sunset, storyline.has_deadline, storyline.last_plot_time],
+  );
+  const [isExpired, setIsExpired] = useState(checkExpired);
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- initial sync needed for SSR hydration safety
+    setIsExpired(checkExpired());
+    const interval = setInterval(() => setIsExpired(checkExpired()), 1_000);
+    return () => clearInterval(interval);
+  }, [checkExpired]);
+
   return (
     <>
     <div className="border-border rounded border divide-y divide-border text-xs">
@@ -952,6 +965,8 @@
           )}
           {storyline.sunset ? (
             <span className="border-border text-muted rounded border px-1.5 py-0.5 text-[10px]">complete</span>
+          ) : isExpired ? (
+            <span className="border border-red-700/30 text-red-700 rounded px-1.5 py-0.5 text-[10px]">expired</span>
           ) : (
             <span className="border border-green-700/30 text-green-700 rounded px-1.5 py-0.5 text-[10px]">active</span>
           )}
@@ -1094,7 +1109,7 @@
 
 const DONATION_PAGE_SIZE = 10;
 
 function ProfileDonationHistory({ storylineId }: { storylineId: number }) {
   const { data: plotUsd } = usePlotUsdPrice();
   const {
     data,
@@ -1376,7 +1391,7 @@
   const {
     data: donationPages,
     isLoading: donGivenLoading,
     isFetchingNextPage: donFetchingNext,
     fetchNextPage: donFetchNext,
     hasNextPage: donHasNext,
   } = useInfiniteQuery({