fix: hidden settings menu affects settings layout (#7769)

This PR fixes #6746

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx

@@ -1,6 +1,6 @@
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { CommandMenuEffect } from '@/app/effect-components/CommandMenuEffect';
-import { GotoHotkeys } from '@/app/effect-components/GotoHotkeysEffect';
+import { GotoHotkeysEffectsProvider } from '@/app/effect-components/GotoHotkeysEffectsProvider';
 import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect';
 import { AuthProvider } from '@/auth/components/AuthProvider';
 import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarEffect';
@@ -45,7 +45,7 @@ export const AppRouterProviders = () => {
                             <StrictMode>
                               <PromiseRejectionEffect />
                               <CommandMenuEffect />
-                              <GotoHotkeys />
+                              <GotoHotkeysEffectsProvider />
                               <PageTitle title={pageTitle} />
                               <Outlet />
                             </StrictMode>

packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx

@@ -6,7 +6,7 @@ export const GoToHotkeyItemEffect = (props: {
 }) => {
   const { hotkey, pathToNavigateTo } = props;
 
-  useGoToHotkeys(hotkey, pathToNavigateTo);
+  useGoToHotkeys({ key: hotkey, location: pathToNavigateTo });
 
   return <></>;
 };

packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx

@@ -1,19 +0,0 @@
-import { GoToHotkeyItemEffect } from '@/app/effect-components/GoToHotkeyItemEffect';
-import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
-import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
-
-export const GotoHotkeys = () => {
-  const { nonSystemActiveObjectMetadataItems } =
-    useNonSystemActiveObjectMetadataItems();
-
-  // Hardcoded since settings is static
-  useGoToHotkeys('s', '/settings/profile');
-
-  return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => (
-    <GoToHotkeyItemEffect
-      key={`go-to-hokey-item-${objectMetadataItem.id}`}
-      hotkey={objectMetadataItem.namePlural[0]}
-      pathToNavigateTo={`/objects/${objectMetadataItem.namePlural}`}
-    />
-  ));
-};

packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx

@@ -0,0 +1,37 @@
+import { GoToHotkeyItemEffect } from '@/app/effect-components/GoToHotkeyItemEffect';
+import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
+import { useLocation } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
+
+export const GotoHotkeysEffectsProvider = () => {
+  const { nonSystemActiveObjectMetadataItems } =
+    useNonSystemActiveObjectMetadataItems();
+
+  const location = useLocation();
+
+  useGoToHotkeys({
+    key: 's',
+    location: '/settings/profile',
+    preNavigateFunction: useRecoilCallback(
+      ({ set }) =>
+        () => {
+          set(isNavigationDrawerExpandedState, true);
+          set(navigationDrawerExpandedMemorizedState, true);
+          set(navigationMemorizedUrlState, location.pathname + location.search);
+        },
+      [location.pathname, location.search],
+    ),
+  });
+
+  return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => (
+    <GoToHotkeyItemEffect
+      key={`go-to-hokey-item-${objectMetadataItem.id}`}
+      hotkey={objectMetadataItem.namePlural[0]}
+      pathToNavigateTo={`/objects/${objectMetadataItem.namePlural}`}
+    />
+  ));
+};

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
@@ -9,13 +8,11 @@ import {
   NavigationDrawerProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 
 import { AdvancedSettingsToggle } from '@/ui/navigation/link/components/AdvancedSettingsToggle';
-import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { MainNavigationDrawerItems } from './MainNavigationDrawerItems';
 
 export type AppNavigationDrawerProps = {
@@ -25,11 +22,8 @@ export type AppNavigationDrawerProps = {
 export const AppNavigationDrawer = ({
   className,
 }: AppNavigationDrawerProps) => {
-  const isMobile = useIsMobile();
   const isSettingsDrawer = useIsSettingsDrawer();
-  const setIsNavigationDrawerExpanded = useSetRecoilState(
+
-    isNavigationDrawerExpandedState,
-  );
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const drawerProps: NavigationDrawerProps = isSettingsDrawer
@@ -48,10 +42,6 @@ export const AppNavigationDrawer = ({
         footer: <SupportDropdown />,
       };
 
-  useEffect(() => {
-    setIsNavigationDrawerExpanded(!isMobile);
-  }, [isMobile, setIsNavigationDrawerExpanded]);
-
   return (
     <NavigationDrawer
       className={className}

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/__tests__/useGoToHotkeys.test.tsx

@@ -1,6 +1,6 @@
+import { fireEvent, renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import { fireEvent, renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -23,7 +23,7 @@ const renderHookConfig = {
 describe('useGoToHotkeys', () => {
   it('should navigate on hotkey trigger', () => {
     const { result } = renderHook(() => {
-      useGoToHotkeys('a', '/three');
+      useGoToHotkeys({ key: 'a', location: '/three' });
 
       const setHotkeyScope = useSetHotkeyScope();
 

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts

@@ -5,13 +5,24 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope';
 
 import { useSequenceHotkeys } from './useSequenceScopedHotkeys';
 
-export const useGoToHotkeys = (key: Keys, location: string) => {
+type GoToHotkeysProps = {
+  key: Keys;
+  location: string;
+  preNavigateFunction?: () => void;
+};
+
+export const useGoToHotkeys = ({
+  key,
+  location,
+  preNavigateFunction,
+}: GoToHotkeysProps) => {
   const navigate = useNavigate();
 
   useSequenceHotkeys(
     'g',
     key,
     () => {
+      preNavigateFunction?.();
       navigate(location);
     },
     AppHotkeyScope.Goto,