feat: add folder expansion state management and settings navigation

2026-03-28 22:32:01 +01:00
parent c7c22bd210
commit 1ba8e2fd47
3 changed files with 191 additions and 17 deletions
@@ -428,9 +428,16 @@ export function Sidebar({
  onUnreadFilterClick,
  className,
 }: SidebarProps) {
+  const router = useRouter();
  const { sidebarCollapsed: isCollapsed, toggleSidebarCollapsed } = useUIStore();
  const { primaryIdentity: _primaryIdentity } = useAuthStore();
  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [foldersExpanded, setFoldersExpanded] = useState(() => {
+    try {
+      const stored = localStorage.getItem('sidebarFoldersExpanded');
+      return stored !== null ? JSON.parse(stored) : true;
+    } catch { return true; }
+  });
  const [tagsExpanded, setTagsExpanded] = useState(() => {
    try {
      const stored = localStorage.getItem('sidebarTagsExpanded');
@@ -554,24 +561,103 @@ export function Sidebar({
      {/* Mailbox List */}
      <div className="flex-1 overflow-y-auto" data-tour="sidebar">
        <div className="py-1">
-          {mailboxes.length === 0 ? (
-            <div className="px-4 py-2 text-sm text-muted-foreground">
-              {!isCollapsed && t("loading_mailboxes")}
-            </div>
-          ) : (
+          {/* Folders Section Header */}
+          <div
+            style={{ paddingBlock: 'var(--density-sidebar-py)' }}
+            className={cn(
+              "group w-full flex items-center max-lg:min-h-[44px] text-sm transition-all duration-200 font-medium",
+              isCollapsed ? "justify-center px-1" : "px-2",
+              "text-foreground hover:bg-muted"
+            )}
+          >
+            {!isCollapsed && (
+              <button
+                onClick={() => {
+                  setFoldersExpanded((prev: boolean) => {
+                    const next = !prev;
+                    try { localStorage.setItem('sidebarFoldersExpanded', JSON.stringify(next)); } catch { /* */ }
+                    return next;
+                  });
+                }}
+                className={cn(
+                  "p-0.5 rounded mr-1 transition-all duration-200",
+                  "hover:bg-muted active:bg-accent"
+                )}
+                title={foldersExpanded ? t('collapse_tooltip') : t('expand_tooltip')}
+              >
+                {foldersExpanded ? (
+                  <ChevronDown className="w-3 h-3 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="w-3 h-3 text-muted-foreground" />
+                )}
+              </button>
+            )}
+
+            <button
+              onClick={() => {
+                if (isCollapsed) return;
+                setFoldersExpanded((prev: boolean) => {
+                  const next = !prev;
+                  try { localStorage.setItem('sidebarFoldersExpanded', JSON.stringify(next)); } catch { /* */ }
+                  return next;
+                });
+              }}
+              className={cn(
+                "flex items-center px-1 rounded",
+                "transition-colors duration-150",
+                isCollapsed ? "justify-center" : "flex-1 text-left"
+              )}
+              style={{ paddingBlock: 'var(--density-sidebar-py)', ...(isCollapsed ? {} : { paddingLeft: '4px' }) }}
+              title={isCollapsed ? t("folders") : undefined}
+            >
+              <Folder className={cn(
+                "w-4 h-4 flex-shrink-0 transition-colors",
+                !isCollapsed && "mr-2",
+                foldersExpanded && "text-primary"
+              )} />
+              {!isCollapsed && (
+                <span className="flex-1 truncate">{t("folders")}</span>
+              )}
+            </button>
+
+            {!isCollapsed && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  try { localStorage.setItem('settings-active-tab', 'folders'); } catch { /* */ }
+                  router.push('/settings');
+                }}
+                className="p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-150 hover:bg-muted active:bg-accent ml-auto mr-1"
+                title={t('settings')}
+              >
+                <Settings className="w-3 h-3 text-muted-foreground" />
+              </button>
+            )}
+          </div>
+
+          {/* Folder Items */}
+          {((foldersExpanded && !isCollapsed) || isCollapsed) && (
            <>
-              {mailboxTree.map((node) => (
-                <MailboxTreeItem
-                  key={node.id}
-                  node={node}
-                  selectedMailbox={selectedKeyword ? "" : selectedMailbox}
-                  expandedFolders={expandedFolders}
-                  onMailboxSelect={onMailboxSelect}
-                  onToggleExpand={handleToggleExpand}
-                  isCollapsed={isCollapsed}
-                  onUnreadFilterClick={onUnreadFilterClick}
-                />
-              ))}
+              {mailboxes.length === 0 ? (
+                <div className="px-4 py-2 text-sm text-muted-foreground">
+                  {!isCollapsed && t("loading_mailboxes")}
+                </div>
+              ) : (
+                <>
+                  {mailboxTree.map((node) => (
+                    <MailboxTreeItem
+                      key={node.id}
+                      node={node}
+                      selectedMailbox={selectedKeyword ? "" : selectedMailbox}
+                      expandedFolders={expandedFolders}
+                      onMailboxSelect={onMailboxSelect}
+                      onToggleExpand={handleToggleExpand}
+                      isCollapsed={isCollapsed}
+                      onUnreadFilterClick={onUnreadFilterClick}
+                    />
+                  ))}
+                </>
+              )}
            </>
          )}
        </div>
@@ -636,6 +722,20 @@ export function Sidebar({
                  <span className="flex-1 truncate">{t("tags")}</span>
                )}
              </button>
+
+              {!isCollapsed && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    try { localStorage.setItem('settings-active-tab', 'keywords'); } catch { /* */ }
+                    router.push('/settings');
+                  }}
+                  className="p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-150 hover:bg-muted active:bg-accent ml-auto mr-1"
+                  title={t('settings')}
+                >
+                  <Settings className="w-3 h-3 text-muted-foreground" />
+                </button>
+              )}
            </div>

            {((tagsExpanded && !isCollapsed) || isCollapsed) && (
@@ -3907,6 +3907,10 @@ export class JMAPClient implements IJMAPClient {
  private pollingStates: { [key: string]: string } = {};
  private sseAbortController: AbortController | null = null;
  private sseReconnectTimeout: NodeJS.Timeout | null = null;
+  private ssePingTimer: NodeJS.Timeout | null = null;
+  private lastSSEActivity: number = 0;
+  private visibilityHandler: (() => void) | null = null;
+  private onlineHandler: (() => void) | null = null;

  private static readonly STATE_TYPE_MAP: Record<string, string> = {
    'Mailbox/get': 'Mailbox',
@@ -3918,6 +3922,7 @@ export class JMAPClient implements IJMAPClient {

  private static readonly POLLING_INTERVAL = 3_000;
  private static readonly SSE_RECONNECT_DELAY = 3_000;
+  private static readonly SSE_PING_TIMEOUT = 90_000; // 3x the 30s ping interval

  setupPushNotifications(): boolean {
    const eventSourceUrl = this.getEventSourceUrl();
@@ -3926,6 +3931,7 @@ export class JMAPClient implements IJMAPClient {
    } else {
      this.startPollingFallback();
    }
+    this.setupBrowserEventListeners();
    return true;
  }

@@ -3966,11 +3972,16 @@ export class JMAPClient implements IJMAPClient {
    const decoder = new TextDecoder();
    let buffer = '';

+    this.lastSSEActivity = Date.now();
+    this.startSSEPingMonitor();
+
    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

+        this.lastSSEActivity = Date.now();
+
        buffer += decoder.decode(value, { stream: true });
        const parts = buffer.split('\n\n');
        buffer = parts.pop() || '';
@@ -3983,6 +3994,8 @@ export class JMAPClient implements IJMAPClient {
      if (error instanceof DOMException && error.name === 'AbortError') return;
    }

+    this.stopSSEPingMonitor();
+
    // Stream ended — reconnect unless we were intentionally closed
    if (this.sseAbortController && !this.sseAbortController.signal.aborted) {
      this.scheduleSSEReconnect();
@@ -4155,10 +4168,70 @@ export class JMAPClient implements IJMAPClient {
      this.eventSource.close();
      this.eventSource = null;
    }
+    this.stopSSEPingMonitor();
+    this.cleanupBrowserEventListeners();
    this.stateChangeCallback = null;
    this.pollingStates = {};
  }

+  private startSSEPingMonitor(): void {
+    this.stopSSEPingMonitor();
+    this.ssePingTimer = setInterval(() => {
+      if (Date.now() - this.lastSSEActivity > JMAPClient.SSE_PING_TIMEOUT) {
+        // SSE connection is stale — abort and reconnect
+        this.stopSSEPingMonitor();
+        if (this.sseAbortController) {
+          this.sseAbortController.abort();
+          this.sseAbortController = null;
+        }
+        this.scheduleSSEReconnect();
+      }
+    }, 30_000);
+  }
+
+  private stopSSEPingMonitor(): void {
+    if (this.ssePingTimer) {
+      clearInterval(this.ssePingTimer);
+      this.ssePingTimer = null;
+    }
+  }
+
+  private setupBrowserEventListeners(): void {
+    if (typeof document !== 'undefined') {
+      this.visibilityHandler = () => {
+        if (!document.hidden) {
+          // Tab became visible — immediately check for state changes
+          this.checkForStateChanges();
+        }
+      };
+      document.addEventListener('visibilitychange', this.visibilityHandler);
+    }
+
+    if (typeof window !== 'undefined') {
+      this.onlineHandler = () => {
+        // Network reconnected — reconnect SSE or force a poll
+        const eventSourceUrl = this.getEventSourceUrl();
+        if (eventSourceUrl && !this.sseAbortController) {
+          this.connectSSE(eventSourceUrl);
+        } else {
+          this.checkForStateChanges();
+        }
+      };
+      window.addEventListener('online', this.onlineHandler);
+    }
+  }
+
+  private cleanupBrowserEventListeners(): void {
+    if (this.visibilityHandler && typeof document !== 'undefined') {
+      document.removeEventListener('visibilitychange', this.visibilityHandler);
+      this.visibilityHandler = null;
+    }
+    if (this.onlineHandler && typeof window !== 'undefined') {
+      window.removeEventListener('online', this.onlineHandler);
+      this.onlineHandler = null;
+    }
+  }
+
  onConnectionChange(callback: (connected: boolean) => void): void {
    this.connectionChangeCallback = callback;
  }
@@ -115,6 +115,7 @@
    "demo_reset": "Reset",
    "demo_tour": "Tour",
    "tags": "Tags",
+    "folders": "Folders",
    "mail": "Mail",
    "nav_label": "Navigation",
    "add_app": "Apps"