fix: enhance account switching logic and clear stores on account change

app/[locale]/page.tsx

@@ -70,9 +70,12 @@ export default function Home() {
   const [isLoadingConversation, setIsLoadingConversation] = useState(false);
   const [previewAttachment, setPreviewAttachment] = useState<{ blobId: string; name: string; type?: string } | null>(null);
   const markAsReadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost } = useAuthStore();
+  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost, activeAccountId } = useAuthStore();
   const { identities } = useIdentityStore();
 
+  // Track account switches to force data reload
+  const lastLoadedAccountRef = useRef<string | null>(null);
+
   // Mobile/tablet responsive hooks
   const { isMobile, isTablet } = useDeviceDetection();
   const { activeView, sidebarOpen, setSidebarOpen, setActiveView, tabletListVisible, setTabletListVisible, sidebarWidth, emailListWidth, setSidebarWidth, setEmailListWidth, persistColumnWidths, sidebarCollapsed, resetSidebarWidth, resetEmailListWidth } = useUIStore();
@@ -289,9 +292,19 @@ export default function Home() {
     }
   }, [initialCheckDone, isAuthenticated, authLoading, router]);
 
-  // Load mailboxes and emails when authenticated (only if not already loaded)
+  // Load mailboxes and emails when authenticated
+  // Re-fetches on initial load (mailboxes empty) or when account switches
   useEffect(() => {
-    if (isAuthenticated && client && mailboxes.length === 0) {
+    const accountChanged = lastLoadedAccountRef.current !== null && lastLoadedAccountRef.current !== activeAccountId;
+    if (isAuthenticated && client && (mailboxes.length === 0 || accountChanged)) {
+      lastLoadedAccountRef.current = activeAccountId;
+
+      // Clear stale selected email from the previous account so the viewer
+      // doesn't flash old content while fresh data loads.
+      if (accountChanged) {
+        selectEmail(null);
+      }
+
       const loadData = async () => {
         try {
           // First fetch mailboxes and quota (inbox will be auto-selected in fetchMailboxes)
@@ -337,15 +350,18 @@ export default function Home() {
         }
       };
       loadData();
+    } else if (isAuthenticated && client && lastLoadedAccountRef.current === null) {
+      // First render with existing data (e.g. restored from snapshot) — just record the account
+      lastLoadedAccountRef.current = activeAccountId;
     }
 
-    // Cleanup push notifications on unmount
+    // Cleanup push notifications on unmount or client change
     return () => {
       if (client) {
         client.closePushNotifications();
       }
     };
-  }, [isAuthenticated, client, mailboxes.length, fetchMailboxes, fetchEmails, fetchQuota, fetchTagCounts, handleStateChange, setPushConnected]);
+  }, [isAuthenticated, client, mailboxes.length, activeAccountId, fetchMailboxes, fetchEmails, fetchQuota, fetchTagCounts, handleStateChange, setPushConnected, selectEmail]);
 
   // Auto-fetch full email content when an email is auto-selected (e.g. after delete/archive)
   useEffect(() => {