1146 sidebar state mismatch on layout switch

src/components/Menus/Sidebar/Sidebar.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { useMediaQuery } from "react-responsive";
 
 import FilePanel from "./FilePanel/FilePanel";
@@ -23,10 +23,12 @@ import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 import FileIcon from "../../../utils/FileIcon";
 import DownloadPanel from "./DownloadPanel/DownloadPanel";
 import InstructionsPanel from "./InstructionsPanel/InstructionsPanel";
+import { setSelectedSidebarTab } from "../../../redux/EditorSlice";
 import SidebarPanel from "./SidebarPanel";
 
 const Sidebar = ({ options = [], plugins = [] }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
 
   let menuOptions = [
     {
@@ -111,6 +113,9 @@ const Sidebar = ({ options = [], plugins = [] }) => {
   const instructionsEditable = useSelector(
     (state) => state.editor.instructionsEditable,
   );
+  const selectedSidebarTab = useSelector(
+    (state) => state.editor.selectedSidebarTab,
+  );
 
   const removeOption = (optionName, depArray = []) => {
     if ((!depArray || depArray.length === 0) && options.includes(optionName)) {
@@ -129,27 +134,51 @@ const Sidebar = ({ options = [], plugins = [] }) => {
 
   const autoOpenPlugin = plugins?.find((plugin) => plugin.autoOpen);
 
-  const [option, setOption] = useState(
-    autoOpenPlugin
+  // Use stored option if it exists and is valid, otherwise use default logic
+  const resolveSelectedOption = () => {
+    if (
+      selectedSidebarTab &&
+      menuOptions.find((opt) => opt.name === selectedSidebarTab)
+    ) {
+      return selectedSidebarTab;
+    }
+    // Calculate default
+    const defaultOption = autoOpenPlugin
       ? autoOpenPlugin.name
       : instructionsEditable || instructionsSteps
       ? "instructions"
-      : "file",
-  );
+      : "file";
+    dispatch(setSelectedSidebarTab(defaultOption));
+    return defaultOption;
+  };
+
+  // Store the initial selected tab to handle first render timing
+  const [initialSelectedTab] = useState(() => resolveSelectedOption());
+  const [isOpen, setIsOpen] = useState(true);
+
+  // Derive option from open state and selected tab
+  const option = isOpen ? selectedSidebarTab || initialSelectedTab : null;
 
   const hasInstructions = instructionsSteps && instructionsSteps.length > 0;
 
   useEffect(() => {
     if (!autoOpenPlugin && (instructionsEditable || hasInstructions)) {
-      setOption("instructions");
+      dispatch(setSelectedSidebarTab("instructions"));
+      setIsOpen(true);
     }
-  }, [autoOpenPlugin, instructionsEditable, hasInstructions]);
+  }, [autoOpenPlugin, instructionsEditable, hasInstructions, dispatch]);
 
   const toggleOption = (newOption) => {
     if (option !== newOption) {
-      setOption(newOption);
+      // Switch to different sidebar panel
+      dispatch(setSelectedSidebarTab(newOption));
+      setIsOpen(true);
     } else if (!isMobile) {
-      setOption(null);
+      // Desktop: clicking same option toggles sidebar open/closed
+      setIsOpen(!isOpen);
+    } else {
+      // Mobile: clicking same option does nothing (no toggle behavior)
+      return;
     }
   };