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/object-record/record-index/components/RecordIndexContainer.tsx

@@ -14,6 +14,7 @@ import { RecordIndexOptionsDropdown } from '@/object-record/record-index/options
 import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
 import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
+import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
 import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
@@ -62,6 +63,9 @@ export const RecordIndexContainer = ({
 
   const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState);
   const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState);
+  const setRecordIndexIsCompactModeActive = useSetRecoilState(
+    recordIndexIsCompactModeActiveState,
+  );
 
   const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
     recordTableId: recordIndexId,
@@ -118,6 +122,9 @@ export const RecordIndexContainer = ({
           onViewTypeChange={(viewType: ViewType) => {
             setRecordIndexViewType(viewType);
           }}
+          onViewCompactModeChange={(isCompactModeActive: boolean) => {
+            setRecordIndexIsCompactModeActive(isCompactModeActive);
+          }}
         />
         <RecordIndexViewBarEffect
           objectNamePlural={objectNamePlural}

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@@ -8,6 +8,7 @@ import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoar
 import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
 import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
+import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
 import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
 import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
 import { useViewBar } from '@/views/hooks/useViewBar';
@@ -26,8 +27,11 @@ export const useLoadRecordIndexBoard = ({
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
   });
-  const { setRecordIds: setRecordIdsInBoard, setFieldDefinitions } =
+  const {
-    useRecordBoard(recordBoardId);
+    setRecordIds: setRecordIdsInBoard,
+    setFieldDefinitions,
+    getIsCompactModeActiveState,
+  } = useRecordBoard(recordBoardId);
   const { setRecords: setRecordsInStore } = useSetRecordInStore();
 
   const recordIndexFieldDefinitions = useRecoilValue(
@@ -48,6 +52,10 @@ export const useLoadRecordIndexBoard = ({
     objectMetadataItem?.fields ?? [],
   );
 
+  const recordIndexIsCompactModeActive = useRecoilValue(
+    recordIndexIsCompactModeActiveState,
+  );
+
   const { records, loading, fetchMoreRecords, queryStateIdentifier } =
     useFindManyRecords({
       objectNameSingular,
@@ -59,6 +67,10 @@ export const useLoadRecordIndexBoard = ({
     viewBarId,
   });
 
+  const setIsCompactModeActive = useSetRecoilState(
+    getIsCompactModeActiveState(),
+  );
+
   useEffect(() => {
     setRecordIdsInBoard(records);
   }, [records, setRecordIdsInBoard]);
@@ -71,6 +83,10 @@ export const useLoadRecordIndexBoard = ({
     setEntityCountInCurrentView(records.length);
   }, [records.length, setEntityCountInCurrentView]);
 
+  useEffect(() => {
+    setIsCompactModeActive(recordIndexIsCompactModeActive);
+  }, [recordIndexIsCompactModeActive, setIsCompactModeActive]);
+
   return {
     records,
     loading,

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx

@@ -93,7 +93,7 @@ export const RecordIndexOptionsDropdownContent = ({
     handleReorderBoardFields,
     handleBoardFieldVisibilityChange,
     isCompactModeActive,
-    setIsCompactModeActive,
+    setAndPersistIsCompactModeActive,
   } = useRecordIndexOptionsForBoard({
     objectNameSingular,
     recordBoardId: recordIndexId,
@@ -184,7 +184,12 @@ export const RecordIndexOptionsDropdownContent = ({
           <DropdownMenuItemsContainer>
             <MenuItemToggle
               LeftIcon={IconBaselineDensitySmall}
-              onToggleChange={setIsCompactModeActive}
+              onToggleChange={() =>
+                setAndPersistIsCompactModeActive(
+                  !isCompactModeActive,
+                  currentView,
+                )
+              }
               toggled={isCompactModeActive}
               text="Compact view"
               toggleSize="small"

packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts

@@ -11,6 +11,8 @@ import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/s
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
+import { useViews } from '@/views/hooks/internal/useViews';
+import { GraphQLView } from '@/views/types/GraphQLView';
 
 type useRecordIndexOptionsForBoardParams = {
   objectNameSingular: string;
@@ -27,6 +29,7 @@ export const useRecordIndexOptionsForBoard = ({
     useRecoilState(recordIndexFieldDefinitionsState);
 
   const { persistViewFields } = useViewFields(viewBarId);
+  const { updateView } = useViews(viewBarId);
   const { getIsCompactModeActiveState } = useRecordBoard(recordBoardId);
 
   const [isCompactModeActive, setIsCompactModeActive] = useRecoilState(
@@ -164,12 +167,24 @@ export const useRecordIndexOptionsForBoard = ({
     ],
   );
 
+  const setAndPersistIsCompactModeActive = useCallback(
+    (isCompactModeActive: boolean, view: GraphQLView | undefined) => {
+      if (!view) return;
+      setIsCompactModeActive(isCompactModeActive);
+      updateView({
+        ...view,
+        isCompact: isCompactModeActive,
+      });
+    },
+    [setIsCompactModeActive, updateView],
+  );
+
   return {
     handleReorderBoardFields,
     handleBoardFieldVisibilityChange,
     visibleBoardFields,
     hiddenBoardFields,
     isCompactModeActive,
-    setIsCompactModeActive,
+    setAndPersistIsCompactModeActive,
   };
 };

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const recordIndexIsCompactModeActiveState = atom<boolean>({
+  key: 'recordIndexIsCompactModeActiveState',
+  default: false,
+});

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,
   };
 };

packages/twenty-server/src/workspace/workspace-sync-metadata/standard-objects/view.object-metadata.ts

@@ -41,6 +41,14 @@ export class ViewObjectMetadata extends BaseObjectMetadata {
   })
   type: string;
 
+  @FieldMetadata({
+    type: FieldMetadataType.BOOLEAN,
+    label: 'Compact View',
+    description: 'Describes if the view is in compact mode',
+    defaultValue: { value: false },
+  })
+  isCompact: boolean;
+
   @FieldMetadata({
     type: FieldMetadataType.RELATION,
     label: 'View Fields',