Fix sidebar switching logic with separate effects

Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>

app/components/AuthenticatedLayout.tsx

@@ -25,6 +25,7 @@ import {
   settingsPath,
   matchDocumentHistory,
   matchDocumentSlug as slug,
+  documentPath,
 } from "~/utils/routeHelpers";
 import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
@@ -46,14 +47,80 @@ type Props = {
   children?: React.ReactNode;
 };
 
+type ActiveSidebar = "history" | "comments" | null;
+
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
-  const { ui, auth } = useStores();
+  const { ui, auth, documents } = useStores();
   const location = useLocation();
   const layoutRef = React.useRef<HTMLDivElement>(null);
   const can = usePolicy(ui.activeDocumentId);
   const canCollection = usePolicy(ui.activeCollectionId);
   const team = useCurrentTeam();
   const [spendPostLoginPath] = usePostLoginPath();
+  const [activeSidebar, setActiveSidebar] = React.useState<ActiveSidebar>(null);
+
+  // Track when comments are explicitly toggled
+  const prevCommentsExpanded = React.useRef(ui.commentsExpanded);
+  
+  // Sync activeSidebar with history route
+  React.useEffect(() => {
+    const isHistoryRoute = !!matchPath(location.pathname, {
+      path: matchDocumentHistory,
+    });
+    
+    if (isHistoryRoute && can.listRevisions) {
+      setActiveSidebar("history");
+      // Close comments when navigating to history
+      if (ui.commentsExpanded) {
+        ui.set({ commentsExpanded: false });
+      }
+    } else if (activeSidebar === "history") {
+      // Clear history sidebar when navigating away from history route
+      setActiveSidebar(null);
+    }
+  }, [location.pathname, can.listRevisions, ui, activeSidebar]);
+
+  // Handle comments toggle
+  React.useEffect(() => {
+    const commentsToggled = prevCommentsExpanded.current !== ui.commentsExpanded;
+    prevCommentsExpanded.current = ui.commentsExpanded;
+    
+    if (!commentsToggled) {
+      return;
+    }
+
+    const canShowComments =
+      can.comment &&
+      ui.activeDocumentId &&
+      team.getPreference(TeamPreference.Commenting);
+
+    if (ui.commentsExpanded && canShowComments) {
+      // If comments are being opened, close history by navigating away
+      const isHistoryRoute = !!matchPath(location.pathname, {
+        path: matchDocumentHistory,
+      });
+      
+      if (isHistoryRoute && ui.activeDocumentId) {
+        const document = documents.get(ui.activeDocumentId);
+        if (document) {
+          history.push(documentPath(document));
+        }
+      }
+      
+      setActiveSidebar("comments");
+    } else if (activeSidebar === "comments") {
+      // Comments are being closed
+      setActiveSidebar(null);
+    }
+  }, [
+    ui.commentsExpanded,
+    can.comment,
+    ui.activeDocumentId,
+    team,
+    location.pathname,
+    documents,
+    activeSidebar,
+  ]);
 
   const goToSearch = (ev: KeyboardEvent) => {
     if (!ev.metaKey && !ev.ctrlKey) {
@@ -92,16 +159,8 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     </Fade>
   );
 
-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showComments =
-    !showHistory &&
-    can.comment &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded &&
-    !!team.getPreference(TeamPreference.Commenting);
+  const showHistory = activeSidebar === "history";
+  const showComments = activeSidebar === "comments";
 
   const sidebarRight = (
     <AnimatePresence