Collapsible menu (#5846)

A mini PR to discuss with @Bonapara tomorrow

Separating remote objects from others and making the menu collapsible
(style to be changed)
<img width="225" alt="Screenshot 2024-06-12 at 23 25 59"
src="https://github.com/twentyhq/twenty/assets/6399865/b4b69d36-6770-43a2-a5e8-bfcdf0a629ea">

Biggest issue is we don't use local storage today so the collapsed state
gets lost.
I see we have localStorageEffect with recoil. Maybe store it there?
Seems easy but don't want to introduce a bad pattern.


Todo:
- style update
- collapsible favorites
- persistent storage

packages/twenty-front/src/utils/recoil-effects.ts

@@ -5,17 +5,17 @@ import { cookieStorage } from '~/utils/cookie-storage';
 import { isDefined } from './isDefined';
 
 export const localStorageEffect =
-  <T>(key: string): AtomEffect<T> =>
-  ({ setSelf, onSet }) => {
-    const savedValue = localStorage.getItem(key);
+  <T>(key?: string): AtomEffect<T> =>
+  ({ setSelf, onSet, node }) => {
+    const savedValue = localStorage.getItem(key ?? node.key);
     if (savedValue != null) {
       setSelf(JSON.parse(savedValue));
     }
 
     onSet((newValue, _, isReset) => {
       isReset
-        ? localStorage.removeItem(key)
-        : localStorage.setItem(key, JSON.stringify(newValue));
+        ? localStorage.removeItem(key ?? node.key)
+        : localStorage.setItem(key ?? node.key, JSON.stringify(newValue));
     });
   };