tabs synched with sidebar

Author: b-rodrigues

src/comments-ui.js

@@ -18,6 +18,7 @@ import { getEditorContent, editor, editorViewCtx } from "./editor.js";
 import { escapeHtml } from "./utils.js";
 import { getProfile } from "./profile-service.js";
 import { showRightSidebar } from "./components/sidebar-controller.js";
+import { onDocumentChange } from "./document-manager.js";
 
 // ============================================================================
 // State
@@ -408,7 +409,11 @@ export function initCommentsPanel() {
     }
 
     // Listen for document changes to refresh comments
-    window.addEventListener("document-changed", refreshComments);
+    onDocumentChange((event, doc) => {
+        if (event === "activeChange" && doc) {
+            refreshComments();
+        }
+    });
 
     // Listen for sidebar tab changes
     window.addEventListener("sidebar-tab-changed", (e) => {

src/components/sidebar-controller.js

@@ -1,8 +1,20 @@
 // src/components/sidebar-controller.js
 // Controls right sidebar visibility and tab switching
 
+import { getActiveDocumentId, onDocumentChange } from "../document-manager.js";
+
 let rightSidebar = null;
 
+// Store sidebar state per document
+// Map<documentId, { visible: boolean, activeTab: string }>
+const documentSidebarStates = new Map();
+
+// Default state
+const DEFAULT_STATE = {
+    visible: false,
+    activeTab: 'timeline'
+};
+
 /**
  * Initialize the sidebar controller
  */
@@ -16,6 +28,16 @@ export function initSidebarController() {
 
     // Initialize tab switching
     initSidebarTabs();
+
+    // Listen for active document changes to restore state
+    onDocumentChange((event, doc) => {
+        if (event === "activeChange" && doc) {
+            restoreSidebarState(doc.id);
+        } else if (event === "close" && doc) {
+            // Clean up state when document is closed
+            documentSidebarStates.delete(doc.id);
+        }
+    });
 }
 
 /**
@@ -33,10 +55,55 @@ function initSidebarTabs() {
 }
 
 /**
- * Switch the active sidebar tab
- * @param {string} tabId - The tab ID to switch to
+ * Save current state for active document
  */
-export function switchSidebarTab(tabId) {
+function saveCurrentState() {
+    const docId = getActiveDocumentId();
+    if (!docId || !rightSidebar) return;
+
+    const visible = !rightSidebar.classList.contains('hidden');
+    const activeTabEl = document.querySelector('.sidebar-tab.active');
+    const activeTab = activeTabEl ? activeTabEl.dataset.tab : 'timeline';
+
+    documentSidebarStates.set(docId, { visible, activeTab });
+}
+
+/**
+ * Restore state for a document
+ * @param {string} docId - Document ID
+ */
+function restoreSidebarState(docId) {
+    if (!rightSidebar) return;
+
+    const state = documentSidebarStates.get(docId) || DEFAULT_STATE;
+
+    // Restore visibility
+    if (state.visible) {
+        rightSidebar.classList.remove('hidden');
+    } else {
+        rightSidebar.classList.add('hidden');
+    }
+
+    // Restore active tab (even if hidden, so it's ready when opened)
+    // Avoid calling switchSidebarTab if it triggers events or complex logic we don't want during restore?
+    // switchSidebarTab updates the UI classes and display, which is what we want.
+    // It also saves the state again, which is redundant but harmless.
+    // To avoid recursion or side effects, we can manually update UI if needed, 
+    // but using the function ensures consistency.
+    // However, switchSidebarTab calls saveCurrentState (if we add it there). 
+    // Let's make sure switchSidebarTab doesn't rely on existing DOM state that might be stale.
+    // Actually, switchSidebarTab takes an argument and sets the state.
+
+    // We should just update the UI specific to the tab without "saving" first.
+    updateSidebarTabUI(state.activeTab);
+}
+
+
+/**
+ * Update the UI for a specific tab without changing business logic state
+ * @param {string} tabId 
+ */
+function updateSidebarTabUI(tabId) {
     // Update tab buttons
     document.querySelectorAll('.sidebar-tab').forEach(t => {
         t.classList.toggle('active', t.dataset.tab === tabId);
@@ -55,6 +122,15 @@ export function switchSidebarTab(tabId) {
     }));
 }
 
+/**
+ * Switch the active sidebar tab
+ * @param {string} tabId - The tab ID to switch to
+ */
+export function switchSidebarTab(tabId) {
+    updateSidebarTabUI(tabId);
+    saveCurrentState();
+}
+
 /**
  * Show the right sidebar, optionally switching to a specific tab
  * @param {string} [tab] - Optional tab to show: 'timeline' or 'comments'
@@ -69,7 +145,9 @@ export function showRightSidebar(tab = null) {
 
         // Switch to requested tab if specified
         if (tab) {
-            switchSidebarTab(tab);
+            switchSidebarTab(tab); // This saves state
+        } else {
+            saveCurrentState(); // Save visibility change
         }
     }
 }
@@ -84,6 +162,7 @@ export function hideRightSidebar() {
 
     if (rightSidebar) {
         rightSidebar.classList.add('hidden');
+        saveCurrentState();
     }
 }