setting, session and profile

frontend/src/components/MailboxView.jsx

@@ -38,6 +38,7 @@ import MailRow from "./MailRow";
 import MailboxEmptyState from "./MailboxEmptyState";
 import MailboxSelectionBar from "./MailboxSelectionBar";
 import StickyNotesPanel from "./StickyNotesPanel";
+import WorkspaceAccountMenu from "./WorkspaceAccountMenu";
 import { useShellMode } from "../shellMode";
 import { shellTitle } from "./MobileChrome";
 import {
@@ -117,6 +118,8 @@ export default function MailboxView({
   initialThreadId = null,
   onLogout,
   onOpenSettings,
+  onOpenProfile,
+  onAccountUpdate,
   onCompose,
   onStats,
 }) {
@@ -149,8 +152,10 @@ export default function MailboxView({
     dateTo: "",
   });
 
-  const load = useCallback(async () => {
-    setStatus({ loading: true, error: "" });
+  const load = useCallback(async ({ silent = false } = {}) => {
+    if (!silent) {
+      setStatus({ loading: true, error: "" });
+    }
     try {
       const result = await listThreads(
         {
@@ -171,15 +176,44 @@ export default function MailboxView({
       setTotal(page.total);
       setStatus({ loading: false, error: "" });
     } catch (error) {
-      setStatus({ loading: false, error: error.message });
+      if (!silent) {
+        setStatus({ loading: false, error: error.message });
+      }
     }
   }, [cursor, filters, mailbox, pageSize, token]);
 
+  const canAutoRefresh = !cursor
+    && !filters.query.trim()
+    && filters.read === "all"
+    && !filters.sender.trim()
+    && !filters.dateFrom
+    && !filters.dateTo;
+
   useEffect(() => {
-    const timeout = window.setTimeout(load, filters.query ? 250 : 0);
+    const timeout = window.setTimeout(() => load(), filters.query ? 250 : 0);
     return () => window.clearTimeout(timeout);
   }, [load, refreshKey]);
 
+  useEffect(() => {
+    if (!canAutoRefresh) return undefined;
+    const intervalId = window.setInterval(() => {
+      if (document.visibilityState === "visible") {
+        load({ silent: true });
+      }
+    }, 30000);
+    return () => window.clearInterval(intervalId);
+  }, [canAutoRefresh, load]);
+
+  useEffect(() => {
+    function handleVisibilityChange() {
+      if (document.visibilityState === "visible" && canAutoRefresh) {
+        load({ silent: true });
+      }
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [canAutoRefresh, load]);
+
   useEffect(() => {
     if (!initialThreadId) return undefined;
     let cancelled = false;
@@ -638,7 +672,6 @@ export default function MailboxView({
     setPageMenuOpen(false);
   }
 
-  const initials = `${account?.first_name?.[0] || ""}${account?.last_name?.[0] || ""}`.toUpperCase();
   const rangeStart = emails.length ? cursorHistory.length * pageSize + 1 : 0;
   const rangeEnd = emails.length ? rangeStart + emails.length - 1 : 0;
   const rangeLabel = emails.length === 0
@@ -697,14 +730,12 @@ export default function MailboxView({
           <button type="button" className="workspace-icon" aria-label="Theme"><Sun size={16} /></button>
           <button type="button" className="workspace-icon" aria-label="Help"><CircleHelp size={16} /></button>
           <button type="button" className="workspace-icon" aria-label="Settings" onClick={onOpenSettings}><Settings size={16} /></button>
-          <button type="button" className="workspace-account" onClick={onLogout} title="Log out">
-            <span>{initials || "AG"}</span>
-            <div>
-              <strong>{account?.first_name} {account?.last_name}</strong>
-              <small>{account?.email}</small>
-            </div>
-            <ChevronDown size={14} />
-          </button>
+          <WorkspaceAccountMenu
+            account={account}
+            onOpenProfile={onOpenProfile}
+            onOpenSettings={onOpenSettings}
+            onLogout={onLogout}
+          />
         </div>
       </header>