Store compact view status (#3850)

* Store compact view status

* Rename to isCompact

* Fixes

---------

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

packages/twenty-front/src/modules/views/components/ViewBar.tsx

@@ -32,6 +32,9 @@ export type ViewBarProps = {
   onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
   onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
   onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
+  onViewCompactModeChange?: (
+    isCompactModeActive: boolean,
+  ) => void | Promise<void>;
 };
 
 export const ViewBar = ({
@@ -43,6 +46,7 @@ export const ViewBar = ({
   onViewFiltersChange,
   onViewSortsChange,
   onViewTypeChange,
+  onViewCompactModeChange,
 }: ViewBarProps) => {
   const { openDropdown: openOptionsDropdownButton } = useDropdown(
     optionsDropdownScopeId,
@@ -62,6 +66,7 @@ export const ViewBar = ({
       onViewFiltersChange={onViewFiltersChange}
       onViewSortsChange={onViewSortsChange}
       onViewTypeChange={onViewTypeChange}
+      onViewCompactModeChange={onViewCompactModeChange}
     >
       <ViewBarEffect />
       <ViewBarFilterEffect

packages/twenty-front/src/modules/views/hooks/internal/useViewScopedStates.ts

@@ -41,6 +41,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
     onViewFiltersChangeState,
     onViewSortsChangeState,
     onViewTypeChangeState,
+    onViewCompactModeChangeState,
     savedViewFieldsByKeySelector,
     savedViewFieldsState,
     savedViewFiltersByKeySelector,
@@ -74,6 +75,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
     onViewFiltersChangeState,
     onViewSortsChangeState,
     onViewTypeChangeState,
+    onViewCompactModeChangeState,
     savedViewFieldsByKeySelector,
     savedViewFieldsState,
     savedViewFiltersByKeySelector,

packages/twenty-front/src/modules/views/hooks/internal/useViews.ts

@@ -54,6 +54,7 @@ export const useViews = (scopeId: string) => {
         input: {
           id: view.id,
           name: view.name,
+          isCompact: view.isCompact,
         },
       },
       refetchQueries: [findManyQuery],

packages/twenty-front/src/modules/views/hooks/useViewBar.ts

@@ -236,7 +236,7 @@ export const useViewBar = (props?: UseViewProps) => {
       (viewId: string) => {
         setCurrentViewId?.(viewId);
 
-        const { currentView, onViewTypeChange } =
+        const { currentView, onViewTypeChange, onViewCompactModeChange } =
           getViewScopedStateValuesFromSnapshot({
             snapshot,
             viewScopeId: scopeId,
@@ -248,6 +248,7 @@ export const useViewBar = (props?: UseViewProps) => {
         }
 
         onViewTypeChange?.(currentView.type);
+        onViewCompactModeChange?.(currentView.isCompact);
         loadViewFields(currentView.viewFields, viewId);
         loadViewFilters(currentView.viewFilters, viewId);
         loadViewSorts(currentView.viewSorts, viewId);

packages/twenty-front/src/modules/views/scopes/ViewScope.tsx

@@ -16,6 +16,9 @@ type ViewScopeProps = {
   onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
   onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
   onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
+  onViewCompactModeChange?: (
+    isCompactModeActive: boolean,
+  ) => void | Promise<void>;
 };
 
 export const ViewScope = ({
@@ -25,6 +28,7 @@ export const ViewScope = ({
   onViewFiltersChange,
   onViewFieldsChange,
   onViewTypeChange,
+  onViewCompactModeChange,
 }: ViewScopeProps) => {
   return (
     <ViewScopeInternalContext.Provider
@@ -38,6 +42,7 @@ export const ViewScope = ({
         onViewFiltersChange={onViewFiltersChange}
         onViewFieldsChange={onViewFieldsChange}
         onViewTypeChange={onViewTypeChange}
+        onViewCompactModeChange={onViewCompactModeChange}
       />
       {children}
     </ViewScopeInternalContext.Provider>

packages/twenty-front/src/modules/views/scopes/init-effect/ViewScopeInitEffect.tsx

@@ -13,6 +13,9 @@ type ViewScopeInitEffectProps = {
   onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
   onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
   onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
+  onViewCompactModeChange?: (
+    isCompactModeActive: boolean,
+  ) => void | Promise<void>;
 };
 
 export const ViewScopeInitEffect = ({
@@ -20,29 +23,37 @@ export const ViewScopeInitEffect = ({
   onViewFiltersChange,
   onViewFieldsChange,
   onViewTypeChange,
+  onViewCompactModeChange,
 }: ViewScopeInitEffectProps) => {
   const {
     onViewFieldsChangeState,
     onViewFiltersChangeState,
     onViewSortsChangeState,
     onViewTypeChangeState,
+    onViewCompactModeChangeState,
   } = useViewScopedStates();
 
   const setOnViewSortsChange = useSetRecoilState(onViewSortsChangeState);
   const setOnViewFiltersChange = useSetRecoilState(onViewFiltersChangeState);
   const setOnViewFieldsChange = useSetRecoilState(onViewFieldsChangeState);
   const setOnViewTypeChange = useSetRecoilState(onViewTypeChangeState);
+  const setOnViewCompactModeChange = useSetRecoilState(
+    onViewCompactModeChangeState,
+  );
 
   useEffect(() => {
     setOnViewSortsChange(() => onViewSortsChange);
     setOnViewFiltersChange(() => onViewFiltersChange);
     setOnViewFieldsChange(() => onViewFieldsChange);
     setOnViewTypeChange(() => onViewTypeChange);
+    setOnViewCompactModeChange(() => onViewCompactModeChange);
   }, [
+    onViewCompactModeChange,
     onViewFieldsChange,
     onViewFiltersChange,
     onViewSortsChange,
     onViewTypeChange,
+    setOnViewCompactModeChange,
     setOnViewFieldsChange,
     setOnViewFiltersChange,
     setOnViewSortsChange,

packages/twenty-front/src/modules/views/states/onViewCompactModeChangeScopeState.ts

@@ -0,0 +1,8 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const onViewCompactModeChangeScopeState = createStateScopeMap<
+  ((isCompactModeActive: boolean) => void | Promise<void>) | undefined
+>({
+  key: 'onViewCompactModeChangeScopeState',
+  defaultValue: undefined,
+});

packages/twenty-front/src/modules/views/types/GraphQLView.ts

@@ -8,6 +8,7 @@ export type GraphQLView = {
   name: string;
   type: ViewType;
   objectMetadataId: string;
+  isCompact: boolean;
   viewFields: ViewField[];
   viewFilters: ViewFilter[];
   viewSorts: ViewSort[];

packages/twenty-front/src/modules/views/utils/getViewScopedStateValuesFromSnapshot.ts

@@ -42,6 +42,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
     onViewFiltersChangeState,
     onViewSortsChangeState,
     onViewTypeChangeState,
+    onViewCompactModeChangeState,
     savedViewFieldsByKeySelector,
     savedViewFieldsState,
     savedViewFiltersByKeySelector,
@@ -87,6 +88,10 @@ export const getViewScopedStateValuesFromSnapshot = ({
     onViewFiltersChange: getSnapshotValue(snapshot, onViewFiltersChangeState),
     onViewSortsChange: getSnapshotValue(snapshot, onViewSortsChangeState),
     onViewTypeChange: getSnapshotValue(snapshot, onViewTypeChangeState),
+    onViewCompactModeChange: getSnapshotValue(
+      snapshot,
+      onViewCompactModeChangeState,
+    ),
     savedViewFieldsByKey: getSnapshotValue(
       snapshot,
       savedViewFieldsByKeySelector,

packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts

@@ -3,6 +3,7 @@ import { getScopedSelectorDeprecated } from '@/ui/utilities/recoil-scope/utils/g
 import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
 import { isPersistingViewScopedState } from '@/views/states/isPersistingViewScopedState';
+import { onViewCompactModeChangeScopeState } from '@/views/states/onViewCompactModeChangeScopeState';
 import { onViewTypeChangeScopedState } from '@/views/states/onViewTypeChangeScopedState';
 import { currentViewScopedSelector } from '@/views/states/selectors/currentViewScopedSelector';
 
@@ -170,6 +171,11 @@ export const getViewScopedStates = ({
     viewScopeId,
   );
 
+  const onViewCompactModeChangeState = getScopedStateDeprecated(
+    onViewCompactModeChangeScopeState,
+    viewScopeId,
+  );
+
   const currentViewIdState = getScopedStateDeprecated(
     currentViewIdScopedState,
     viewScopeId,
@@ -214,5 +220,6 @@ export const getViewScopedStates = ({
     onViewFiltersChangeState,
     onViewFieldsChangeState,
     onViewTypeChangeState,
+    onViewCompactModeChangeState,
   };
 };