From 67dd2e94dda06eb590e20d5e8b4306e011f7166f Mon Sep 17 00:00:00 2001
From: CHY9213 <chy9213@users.noreply.github.com>
Date: Wed, 27 May 2026 19:40:48 +0800
Subject: [PATCH] feat: add real-time CountdownTimer component with urgency
 colors

---
 frontend/src/components/bounty/BountyCard.tsx |  10 +-
 .../src/components/bounty/BountyDetail.tsx    |   9 +-
 .../src/components/bounty/CountdownTimer.tsx  | 119 ++++++++++++++++++
 3 files changed, 127 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/bounty/CountdownTimer.tsx

diff --git a/frontend/src/components/bounty/BountyCard.tsx b/frontend/src/components/bounty/BountyCard.tsx
index aa974a474..072b5e99a 100644
--- a/frontend/src/components/bounty/BountyCard.tsx
+++ b/frontend/src/components/bounty/BountyCard.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { GitPullRequest, Clock } from 'lucide-react';
+import { GitPullRequest } from 'lucide-react';
 import type { Bounty } from '../../types/bounty';
 import { cardHover } from '../../lib/animations';
-import { timeLeft, formatCurrency, LANG_COLORS } from '../../lib/utils';
+import { formatCurrency, LANG_COLORS } from '../../lib/utils';
+import { CountdownTimer } from './CountdownTimer';
 
 function TierBadge({ tier }: { tier: string }) {
   const styles: Record<string, string> = {
@@ -111,10 +112,7 @@ export function BountyCard({ bounty }: BountyCardProps) {
             {bounty.submission_count} PRs
           </span>
           {bounty.deadline && (
-            <span className="inline-flex items-center gap-1">
-              <Clock className="w-3.5 h-3.5" />
-              {timeLeft(bounty.deadline)}
-            </span>
+            <CountdownTimer deadline={bounty.deadline} variant="minimal" showIcon />
           )}
         </div>
       </div>
diff --git a/frontend/src/components/bounty/BountyDetail.tsx b/frontend/src/components/bounty/BountyDetail.tsx
index 65653fa8f..2c855ed96 100644
--- a/frontend/src/components/bounty/BountyDetail.tsx
+++ b/frontend/src/components/bounty/BountyDetail.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { ArrowLeft, Clock, GitPullRequest, ExternalLink, Loader2, Check, Copy } from 'lucide-react';
+import { ArrowLeft, GitPullRequest, ExternalLink, Loader2, Check, Copy } from 'lucide-react';
 import type { Bounty } from '../../types/bounty';
-import { timeLeft, timeAgo, formatCurrency, LANG_COLORS } from '../../lib/utils';
+import { timeAgo, formatCurrency, LANG_COLORS } from '../../lib/utils';
 import { useAuth } from '../../hooks/useAuth';
 import { SubmissionForm } from './SubmissionForm';
+import { CountdownTimer } from './CountdownTimer';
 import { fadeIn } from '../../lib/animations';
 
 interface BountyDetailProps {
@@ -138,9 +139,7 @@ export function BountyDetail({ bounty }: BountyDetailProps) {
             {bounty.deadline && (
               <div className="flex items-center justify-between text-sm">
                 <span className="text-text-muted">Deadline</span>
-                <span className="font-mono text-status-warning inline-flex items-center gap-1">
-                  <Clock className="w-3.5 h-3.5" /> {timeLeft(bounty.deadline)}
-                </span>
+                <CountdownTimer deadline={bounty.deadline} variant="full" showIcon />
               </div>
             )}
             <div className="flex items-center justify-between text-sm">
diff --git a/frontend/src/components/bounty/CountdownTimer.tsx b/frontend/src/components/bounty/CountdownTimer.tsx
new file mode 100644
index 000000000..6a3623c72
--- /dev/null
+++ b/frontend/src/components/bounty/CountdownTimer.tsx
@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import { Clock, AlertTriangle, Timer, Ban } from 'lucide-react';
+
+interface CountdownTimerProps {
+  deadline: string;
+  /** @default 'minimal' */
+  variant?: 'minimal' | 'full';
+  /** @default false */
+  showIcon?: boolean;
+}
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+function calcTimeLeft(deadline: string): TimeLeft | null {
+  const diff = new Date(deadline).getTime() - Date.now();
+  if (diff <= 0) return null;
+  return {
+    days: Math.floor(diff / 86_400_000),
+    hours: Math.floor((diff % 86_400_000) / 3_600_000),
+    minutes: Math.floor((diff % 3_600_000) / 60_000),
+    seconds: Math.floor((diff % 60_000) / 1_000),
+  };
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+export function CountdownTimer({ deadline, variant = 'minimal', showIcon = true }: CountdownTimerProps) {
+  const [timeLeft, setTimeLeft] = useState<TimeLeft | null>(() => calcTimeLeft(deadline));
+
+  useEffect(() => {
+    setTimeLeft(calcTimeLeft(deadline));
+    const interval = setInterval(() => {
+      setTimeLeft(calcTimeLeft(deadline));
+    }, 1_000);
+    return () => clearInterval(interval);
+  }, [deadline]);
+
+  // If deadline is set but we can't parse it, show nothing
+  if (!deadline) return null;
+
+  // Expired
+  if (timeLeft === null) {
+    const expired = new Date(deadline).getTime() < Date.now();
+    if (expired) {
+      return (
+        <span className="inline-flex items-center gap-1 text-xs font-mono text-status-error">
+          {showIcon && <Ban className="w-3 h-3" />}
+          Expired
+        </span>
+      );
+    }
+    return (
+      <span className="inline-flex items-center gap-1 text-xs font-mono text-text-muted">
+        {showIcon && <Clock className="w-3 h-3" />}
+        No deadline
+      </span>
+    );
+  }
+
+  const totalHours = timeLeft.days * 24 + timeLeft.hours;
+  const isUrgent = totalHours < 1;
+  const isWarning = totalHours < 24 && !isUrgent;
+
+  const colorClass = isUrgent
+    ? 'text-status-error'
+    : isWarning
+      ? 'text-status-warning'
+      : 'text-text-muted';
+
+  const bgClass = isUrgent
+    ? 'bg-status-error/10'
+    : isWarning
+      ? 'bg-status-warning/10'
+      : 'bg-transparent';
+
+  if (variant === 'full') {
+    return (
+      <div className={`inline-flex items-center gap-3 px-3 py-2 rounded-lg ${bgClass} ${colorClass} font-mono`}>
+        {showIcon && (isUrgent ? <AlertTriangle className="w-4 h-4" /> : <Timer className="w-4 h-4" />)}
+        <div className="flex items-center gap-1.5 text-sm font-semibold">
+          {timeLeft.days > 0 && (
+            <>
+              <span>{timeLeft.days}</span>
+              <span className="text-[10px] uppercase tracking-wider opacity-60">d</span>
+            </>
+          )}
+          <span>{pad(timeLeft.hours)}</span>
+          <span className="text-[10px] opacity-60">h</span>
+          <span>{pad(timeLeft.minutes)}</span>
+          <span className="text-[10px] opacity-60">m</span>
+          <span className="text-[11px]">{pad(timeLeft.seconds)}</span>
+          <span className="text-[10px] opacity-60">s</span>
+        </div>
+        {isUrgent && <span className="text-[10px] font-bold uppercase tracking-wider">Urgent!</span>}
+      </div>
+    );
+  }
+
+  // Minimal variant
+  const label = timeLeft.days > 0
+    ? `${timeLeft.days}d ${timeLeft.hours}h left`
+    : isUrgent
+      ? `${timeLeft.minutes}m ${timeLeft.seconds}s left`
+      : `${timeLeft.hours}h ${timeLeft.minutes}m left`;
+
+  return (
+    <span className={`inline-flex items-center gap-1 text-xs font-mono ${colorClass}`}>
+      {showIcon && (isUrgent ? <AlertTriangle className="w-3 h-3" /> : <Clock className="w-3.5 h-3.5" />)}
+      {label}
+    </span>
+  );
+}