wip: snapshot das alterações não commitadas (2026-10-20)

Origem: D:/Documents/Github/Downloader
Arquivos omitidos (segredos, bancos de dados, logs, >50 MB): 0

web/src/components/feature/SessionTimer.tsx

@@ -12,7 +12,9 @@ export function SessionTimer({ expiresAt, className }: SessionTimerProps) {
     const [isCritical, setIsCritical] = useState(false);
 
     useEffect(() => {
-        if (!expiresAt) return;
+        if (!expiresAt) {
+            return;
+        }
 
         const tick = () => {
             const now = Date.now();
@@ -29,20 +31,47 @@ export function SessionTimer({ expiresAt, className }: SessionTimerProps) {
             const seconds = Math.floor((diff % 60000) / 1000);
 
             setTimeLeft(`${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`);
-            setIsCritical(minutes < 5); // Critical if less than 5 minutes
+            setIsCritical(minutes < 5);
         };
 
-        tick(); // Initial call
+        tick();
         const interval = setInterval(tick, 1000);
         return () => clearInterval(interval);
     }, [expiresAt]);
 
-    if (!expiresAt) return null;
+    if (!expiresAt) {
+        return null;
+    }
 
     return (
-        <div className={cn("flex items-center gap-2 text-sm font-medium", isCritical ? "text-destructive" : "text-muted-foreground", className)}>
-            <Clock className="w-4 h-4" />
-            <span>Session: {timeLeft}</span>
+        <div
+            className={cn(
+                "inline-flex items-center justify-between gap-4 rounded-[1.5rem] border px-4 py-3 shadow-[0_20px_60px_-40px_rgba(15,23,42,0.95)] backdrop-blur-xl",
+                isCritical
+                    ? "border-destructive/30 bg-destructive/10"
+                    : "border-primary/20 bg-primary/10",
+                className
+            )}
+        >
+            <div className="flex items-center gap-3">
+                <div
+                    className={cn(
+                        "flex h-10 w-10 items-center justify-center rounded-[1rem] border",
+                        isCritical
+                            ? "border-destructive/30 bg-destructive/10 text-destructive"
+                            : "border-primary/20 bg-primary/10 text-primary"
+                    )}
+                >
+                    <Clock className="h-4 w-4" />
+                </div>
+                <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
+                        Session window
+                    </p>
+                    <p className="mt-1 text-sm font-semibold text-foreground">Expires in {timeLeft}</p>
+                </div>
+            </div>
+            <span className="text-xs font-medium text-muted-foreground">Auto cleanup</span>
         </div>
     );
 }