Fix: New navigation sidebar UI issues

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.tsx

@@ -16,6 +16,7 @@ import {
 } from '~/common/project';
 import { models, services } from '~/insomnia-data';
 import { useStorageRulesLoaderFetcher } from '~/routes/organization.$organizationId.storage-rules';
+import { useDocBodyKeyboardShortcuts } from '~/ui/components/keydown-binder';
 import { ProjectModal } from '~/ui/components/modals/project-modal';
 import { ScratchPadTutorialPanel } from '~/ui/components/panes/scratchpad-tutorial-pane';
 import { ProjectNavigationSidebar } from '~/ui/components/sidebar/project-navigation-sidebar/project-navigation-sidebar';
@@ -142,6 +143,11 @@ const Component = ({ loaderData }: Route.ComponentProps) => {
 
   const [isNewProjectModalOpen, setIsNewProjectModalOpen] = useState(false);
 
+  const toggleSidebar = () => {
+    const isCollapsed = sidebarPanelRef.current?.isCollapsed();
+    uiEventBus.emit(TOGGLE_PROJECT_SIDEBAR, !isCollapsed);
+  };
+
   useEffect(() => {
     if (isSidebarCollapsed) {
       sidebarPanelRef.current?.collapse();
@@ -151,15 +157,28 @@ const Component = ({ loaderData }: Route.ComponentProps) => {
   }, [isSidebarCollapsed]);
 
   useEffect(() => {
-    return uiEventBus.on(TOGGLE_PROJECT_SIDEBAR, (collapsed: boolean) => {
+    // Listen to both UI event bus and main process ipc message to toggle sidebar.
+    // UI event bus is emitted from route organization.tsx in toggle sidebar button.
+    // Main process ipc message is emitted from electron menu when user click the toggle sidebar menu item.
+    const unsubscribeUIEventBus = uiEventBus.on(TOGGLE_PROJECT_SIDEBAR, (collapsed: boolean) => {
       if (collapsed) {
         sidebarPanelRef.current?.collapse();
       } else {
         sidebarPanelRef.current?.expand();
       }
     });
+    const removeListener = window.main.on('toggle-sidebar', toggleSidebar);
+
+    return () => {
+      unsubscribeUIEventBus();
+      removeListener();
+    };
   }, []);
 
+  useDocBodyKeyboardShortcuts({
+    sidebar_toggle: toggleSidebar,
+  });
+
   const { features } = useOrganizationPermissions();
 
   const isScratchPad = models.project.isScratchpadProject(activeProject);

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.tsx

@@ -28,7 +28,7 @@ import { type ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle }
 import { href, redirect, Route as RouteComponent, Routes, useFetchers, useParams, useSearchParams } from 'react-router';
 import * as reactUse from 'react-use';
 
-import { DEFAULT_SIDEBAR_SIZE, getProductName, SORT_ORDERS, type SortOrder, sortOrderName } from '~/common/constants';
+import { getProductName, SORT_ORDERS, type SortOrder, sortOrderName } from '~/common/constants';
 import { generateId } from '~/common/misc';
 import type { PlatformKeyCombinations } from '~/common/settings';
 import type {
@@ -356,26 +356,7 @@ const Debug = () => {
 
   const sidebarPanelRef = useRef<ImperativePanelGroupHandle>(null);
 
-  function toggleSidebar() {
-    const layout = sidebarPanelRef.current?.getLayout();
-
-    if (!layout) {
-      return;
-    }
-
-    layout[0] = layout && layout[0] > 0 ? 0 : DEFAULT_SIDEBAR_SIZE;
-
-    sidebarPanelRef.current?.setLayout(layout);
-  }
-
-  useEffect(() => {
-    const unsubscribe = window.main.on('toggle-sidebar', toggleSidebar);
-
-    return unsubscribe;
-  }, []);
-
   useDocBodyKeyboardShortcuts({
-    sidebar_toggle: toggleSidebar,
     request_togglePin: async () => {
       if (requestId) {
         const meta = models.grpcRequest.isGrpcRequestId(requestId)

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.environment.tsx

@@ -17,7 +17,6 @@ import {
 } from 'react-aria-components';
 import { type ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
-import { DEFAULT_SIDEBAR_SIZE } from '~/common/constants';
 import { debounce } from '~/common/misc';
 import type { Environment, EnvironmentKvPairData } from '~/insomnia-data';
 import { EnvironmentKvPairDataType, EnvironmentType, models, services } from '~/insomnia-data';
@@ -37,7 +36,6 @@ import {
 } from '~/ui/components/editors/environment-editor';
 import { EnvironmentKVEditor } from '~/ui/components/editors/environment-key-value-editor/key-value-editor';
 import { Icon } from '~/ui/components/icon';
-import { useDocBodyKeyboardShortcuts } from '~/ui/components/keydown-binder';
 import { showModal } from '~/ui/components/modals';
 import { AlertModal } from '~/ui/components/modals/alert-modal';
 import { InputVaultKeyModal } from '~/ui/components/modals/input-vault-key-modal';
@@ -269,32 +267,10 @@ const Component = ({ loaderData, params }: Route.ComponentProps) => {
 
   const sidebarPanelRef = useRef<ImperativePanelGroupHandle>(null);
 
-  function toggleSidebar() {
-    const layout = sidebarPanelRef.current?.getLayout();
-
-    if (!layout) {
-      return;
-    }
-
-    layout[0] = layout && layout[0] > 0 ? 0 : DEFAULT_SIDEBAR_SIZE;
-
-    sidebarPanelRef.current?.setLayout(layout);
-  }
-
   const handleInputVaultKeyModalClose = () => {
     setShowModal(false);
   };
 
-  useEffect(() => {
-    const unsubscribe = window.main.on('toggle-sidebar', toggleSidebar);
-
-    return unsubscribe;
-  }, []);
-
-  useDocBodyKeyboardShortcuts({
-    sidebar_toggle: toggleSidebar,
-  });
-
   return (
     <div className="flex h-full flex-col">
       <OrganizationTabList />

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.mock-server.tsx

@@ -22,7 +22,6 @@ import {
 } from '~/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId';
 import { useMockRouteDeleteActionFetcher } from '~/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.mock-server.mock-route.$mockRouteId.delete';
 import { Icon } from '~/ui/components/icon';
-import { useDocBodyKeyboardShortcuts } from '~/ui/components/keydown-binder';
 import { showModal } from '~/ui/components/modals';
 import { AskModal } from '~/ui/components/modals/ask-modal';
 import { MockRouteModal } from '~/ui/components/modals/mock-route-modal';
@@ -169,28 +168,6 @@ const Component = () => {
 
   const sidebarPanelRef = useRef<ImperativePanelGroupHandle>(null);
 
-  function toggleSidebar() {
-    const layout = sidebarPanelRef.current?.getLayout();
-
-    if (!layout) {
-      return;
-    }
-
-    layout[0] = layout && layout[0] > 0 ? 0 : DEFAULT_SIDEBAR_SIZE;
-
-    sidebarPanelRef.current?.setLayout(layout);
-  }
-
-  useEffect(() => {
-    const unsubscribe = window.main.on('toggle-sidebar', toggleSidebar);
-
-    return unsubscribe;
-  }, []);
-
-  useDocBodyKeyboardShortcuts({
-    sidebar_toggle: toggleSidebar,
-  });
-
   const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
     settings.forceVerticalLayout ? 'vertical' : 'horizontal',
   );

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.spec.tsx

@@ -323,26 +323,7 @@ const Component = ({ params }: Route.ComponentProps) => {
 
   const sidebarPanelRef = useRef<ImperativePanelGroupHandle>(null);
 
-  function toggleSidebar() {
-    const layout = sidebarPanelRef.current?.getLayout();
-
-    if (!layout) {
-      return;
-    }
-
-    layout[0] = layout && layout[0] > 0 ? 0 : DEFAULT_SIDEBAR_SIZE;
-
-    sidebarPanelRef.current?.setLayout(layout);
-  }
-
-  useEffect(() => {
-    const unsubscribe = window.main.on('toggle-sidebar', toggleSidebar);
-
-    return unsubscribe;
-  }, []);
-
   useDocBodyKeyboardShortcuts({
-    sidebar_toggle: toggleSidebar,
     environment_showEditor: () => setEnvironmentModalOpen(true),
     environment_showSwitchMenu: () => setIsEnvironmentPickerOpen(true),
     showCookiesEditor: () => setIsCookieModalOpen(true),

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.test.tsx

@@ -1,5 +1,5 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
-import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Suspense, useLayoutEffect, useRef, useState } from 'react';
 import {
   Button,
   DropIndicator,
@@ -114,26 +114,7 @@ const Component = () => {
     );
   };
 
-  function toggleSidebar() {
-    const layout = sidebarPanelRef.current?.getLayout();
-
-    if (!layout) {
-      return;
-    }
-
-    layout[0] = layout && layout[0] > 0 ? 0 : DEFAULT_SIDEBAR_SIZE;
-
-    sidebarPanelRef.current?.setLayout(layout);
-  }
-
-  useEffect(() => {
-    const unsubscribe = window.main.on('toggle-sidebar', toggleSidebar);
-
-    return unsubscribe;
-  }, []);
-
   useDocBodyKeyboardShortcuts({
-    sidebar_toggle: toggleSidebar,
     environment_showEditor: () => setEnvironmentModalOpen(true),
     environment_showSwitchMenu: () => setIsEnvironmentPickerOpen(true),
     showCookiesEditor: () => setIsCookieModalOpen(true),

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.move.tsx

@@ -1,9 +1,9 @@
-import { href, redirect } from 'react-router';
+import { href } from 'react-router';
 
 import { importResourcesToNewWorkspace } from '~/common/import';
 import { getInsomniaV5DataExport, importInsomniaV5Data } from '~/common/insomnia-v5';
 import type { Project } from '~/insomnia-data';
-import { models, services } from '~/insomnia-data';
+import { services } from '~/insomnia-data';
 import { syncNewWorkspaceIfNeeded } from '~/routes/import.resources';
 import { invariant } from '~/utils/invariant';
 import { createFetcherSubmitHook } from '~/utils/router';
@@ -51,14 +51,12 @@ export async function clientAction({ request }: Route.ClientActionArgs) {
       },
       syncNewWorkspaceIfNeeded,
     });
-
-    return redirect(
-      `${href('/organization/:organizationId/project/:projectId/workspace/:workspaceId', {
-        organizationId: newOrgId,
-        projectId: newProjectId,
-        workspaceId: newWorkspace._id,
-      })}/${models.workspace.scopeToActivity(newWorkspace.scope)}`,
-    );
+    return {
+      organizationId: newOrgId,
+      projectId: newProjectId,
+      workspaceId: newWorkspace._id,
+      workspaceScope: newWorkspace.scope,
+    };
   } catch (error) {
     return {
       error: 'Failed to duplicate workspace: ' + (error instanceof Error ? error.message : String(error)),

packages/insomnia/src/routes/organization.tsx

@@ -212,6 +212,13 @@ const Component = ({ loaderData }: Route.ComponentProps) => {
 
   const [isMinimal, setIsMinimal] = reactUse.useLocalStorage('isMinimal', false);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = reactUse.useLocalStorage('project-navigation-collapsed', false);
+
+  useEffect(() => {
+    return window.main.on('toggle-sidebar', () => {
+      setIsSidebarCollapsed(collapsed => !collapsed);
+    });
+  }, [setIsSidebarCollapsed]);
+
   return (
     <InsomniaEventStreamProvider>
       <InsomniaTabProvider>