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/modules/ui/utilities/state/component-state/utils/createComponentState.ts

@@ -1,16 +1,19 @@
-import { atomFamily } from 'recoil';
+import { AtomEffect, atomFamily } from 'recoil';
 
 import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
 
 export const createComponentState = <ValueType>({
   key,
   defaultValue,
+  effects,
 }: {
   key: string;
   defaultValue: ValueType;
+  effects?: AtomEffect<ValueType>[];
 }) => {
   return atomFamily<ValueType, ComponentStateKey>({
     key,
     default: defaultValue,
+    effects: effects,
   });
 };