feat: add real-time countdown timer for bounty deadlines

frontend/src/components/bounty/BountyCard.tsx

@@ -5,6 +5,7 @@ import { GitPullRequest, Clock } from 'lucide-react';
 import type { Bounty } from '../../types/bounty';
 import { cardHover } from '../../lib/animations';
 import { timeLeft, 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} size="sm" icon={false} />
           )}
         </div>
       </div>

frontend/src/components/bounty/BountyDetail.tsx

@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 import { ArrowLeft, Clock, GitPullRequest, ExternalLink, Loader2, Check, Copy } from 'lucide-react';
 import type { Bounty } from '../../types/bounty';
 import { timeLeft, timeAgo, formatCurrency, LANG_COLORS } from '../../lib/utils';
+import { CountdownTimer } from './CountdownTimer';
 import { useAuth } from '../../hooks/useAuth';
 import { SubmissionForm } from './SubmissionForm';
 import { fadeIn } from '../../lib/animations';
@@ -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} size="md" />
               </div>
             )}
             <div className="flex items-center justify-between text-sm">

frontend/src/components/bounty/CountdownTimer.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { Clock } from 'lucide-react';
+
+interface CountdownTimerProps {
+  deadline: string;
+  className?: string;
+  icon?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+interface TimeLeft {
+  total: number;
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  expired: boolean;
+  warning: boolean;
+  urgent: boolean;
+}
+
+function calculateTimeLeft(deadline: string): TimeLeft {
+  const total = new Date(deadline).getTime() - Date.now();
+  if (total <= 0) {
+    return { total: 0, days: 0, hours: 0, minutes: 0, seconds: 0, expired: true, warning: false, urgent: false };
+  }
+
+  const seconds = Math.floor((total / 1000) % 60);
+  const minutes = Math.floor((total / 1000 / 60) % 60);
+  const hours = Math.floor((total / 1000 / 60 / 60) % 24);
+  const days = Math.floor(total / 1000 / 60 / 60 / 24);
+
+  return {
+    total,
+    days,
+    hours,
+    minutes,
+    seconds,
+    expired: false,
+    warning: total < 24 * 60 * 60 * 1000 && total > 60 * 60 * 1000,
+    urgent: total <= 60 * 60 * 1000,
+  };
+}
+
+export function CountdownTimer({ deadline, className = '', icon = true, size = 'md' }: CountdownTimerProps) {
+  const [time, setTime] = useState<TimeLeft>(calculateTimeLeft(deadline));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(calculateTimeLeft(deadline));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [deadline]);
+
+  if (time.expired) {
+    const sizeClasses = { sm: 'text-xs', md: 'text-sm', lg: 'text-lg' }[size];
+    return (
+      <span className={`inline-flex items-center gap-1 font-mono text-text-muted ${sizeClasses} ${className}`}>
+        {icon && <Clock className="w-3.5 h-3.5" />}
+        Expired
+      </span>
+    );
+  }
+
+  const colorClass = time.urgent ? 'text-status-error' : time.warning ? 'text-status-warning' : 'text-text-secondary';
+  const digitClass = time.urgent ? 'text-status-error' : time.warning ? 'text-status-warning' : 'text-text-primary';
+  const sizeClasses = { sm: 'text-xs gap-0.5', md: 'text-sm gap-1', lg: 'text-base gap-1.5' }[size];
+  const digitSizeClass = { sm: 'text-xs', md: 'text-sm', lg: 'text-lg' }[size];
+
+  const parts: string[] = [];
+  if (time.days > 0) parts.push(`${time.days}d`);
+  parts.push(`${String(time.hours).padStart(2, '0')}h`);
+  parts.push(`${String(time.minutes).padStart(2, '0')}m`);
+  if (size !== 'sm' || time.urgent) {
+    parts.push(`${String(time.seconds).padStart(2, '0')}s`);
+  }
+
+  return (
+    <span className={`inline-flex items-center ${sizeClasses} font-mono ${colorClass} ${className}`}>
+      {icon && <Clock className={`w-3.5 h-3.5 ${time.urgent ? 'animate-pulse' : ''}`} />}
+      <span className={digitSizeClass}>{parts.join(' ')}</span>
+    </span>
+  );
+}