feat: show session timeout modal and redirect on 401 responses

src/components/auth/SessionTimeoutModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Dialog,
@@ -10,23 +10,51 @@ import {
 import { Button } from '@/components/ui/button';
 import { tokenManager } from '@/lib/api';
 
+const AUTO_REDIRECT_SECONDS = 5;
+
 export default function SessionTimeoutModal() {
   const [open, setOpen] = useState(false);
+  const [secondsLeft, setSecondsLeft] = useState(AUTO_REDIRECT_SECONDS);
   const navigate = useNavigate();
+  const timerRef = useRef<ReturnType<typeof setInterval>>();
 
-  const handleOpenChange = useCallback((isOpen: boolean) => {
-    if (!isOpen) {
-      tokenManager.clearToken();
-      navigate('/login', { replace: true });
-    }
+  const redirectToLogin = useCallback(() => {
+    tokenManager.clearToken();
+    navigate('/login', { replace: true });
   }, [navigate]);
 
   useEffect(() => {
-    const onSessionExpired = () => setOpen(true);
+    const onSessionExpired = () => {
+      setOpen(true);
+      setSecondsLeft(AUTO_REDIRECT_SECONDS);
+    };
     window.addEventListener('session:expired', onSessionExpired);
     return () => window.removeEventListener('session:expired', onSessionExpired);
   }, []);
 
+  useEffect(() => {
+    if (open) {
+      timerRef.current = setInterval(() => {
+        setSecondsLeft((prev) => {
+          if (prev <= 1) {
+            clearInterval(timerRef.current);
+            redirectToLogin();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    }
+    return () => clearInterval(timerRef.current);
+  }, [open, redirectToLogin]);
+
+  const handleOpenChange = useCallback((isOpen: boolean) => {
+    if (!isOpen) {
+      clearInterval(timerRef.current);
+      redirectToLogin();
+    }
+  }, [redirectToLogin]);
+
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent
@@ -39,8 +67,11 @@ export default function SessionTimeoutModal() {
             Your session has timed out. Please sign in again to continue.
           </DialogDescription>
         </DialogHeader>
-        <div className="flex justify-end">
-          <Button onClick={() => { tokenManager.clearToken(); navigate('/login', { replace: true }); }}>
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-muted-foreground">
+            Redirecting in {secondsLeft}s...
+          </p>
+          <Button onClick={redirectToLogin}>
             Sign In
           </Button>
         </div>