Add compact view to calendar (#14527)

<img width="1263" height="785" alt="Screenshot 2025-09-16 at 11 44 44"
src="https://github.com/user-attachments/assets/dc61e69f-b887-4a4d-9f9c-e50ffa076082"
/>
<img width="1263" height="785" alt="Screenshot 2025-09-16 at 11 43 45"
src="https://github.com/user-attachments/assets/2dd917b3-6e6d-40f2-bb10-6c82de83c15d"
/>
This commit is contained in:
Weiko
2025-09-16 12:47:55 +02:00
committed by GitHub
parent b8ae7ddad9
commit e505e9cf9f
13 changed files with 94 additions and 137 deletions
@@ -1,6 +1,5 @@
import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId';
import { useObjectOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsDropdown';
import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
import { useSetViewTypeFromLayoutOptionsMenu } from '@/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { recordIndexCalendarLayoutState } from '@/object-record/record-index/states/recordIndexCalendarLayoutState';
@@ -16,12 +15,15 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { useUpdateCurrentView } from '@/views/hooks/useUpdateCurrentView';
import { type GraphQLView } from '@/views/types/GraphQLView';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType';
import { useGetAvailableFieldsForCalendar } from '@/views/view-picker/hooks/useGetAvailableFieldsForCalendar';
import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
import { useLingui } from '@lingui/react/macro';
import { useCallback } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import {
@@ -40,22 +42,24 @@ import { FeatureFlagKey, ViewCalendarLayout } from '~/generated/graphql';
export const ObjectOptionsDropdownLayoutContent = () => {
const { t } = useLingui();
const { objectMetadataItem, resetContent, onContentChange, dropdownId } =
useObjectOptionsDropdown();
const { currentView } = useGetCurrentViewOnly();
const { updateCurrentView } = useUpdateCurrentView();
const {
recordIndexId,
objectMetadataItem,
resetContent,
onContentChange,
dropdownId,
} = useObjectOptionsDropdown();
const isCompactModeActive = currentView?.isCompact ?? false;
const { isCompactModeActive, setAndPersistIsCompactModeActive } =
useObjectOptionsForBoard({
objectNameSingular: objectMetadataItem.nameSingular,
recordBoardId: recordIndexId,
viewBarId: recordIndexId,
});
const setAndPersistIsCompactModeActive = useCallback(
(isCompactModeActive: boolean, view: GraphQLView | undefined) => {
if (!view) return;
updateCurrentView({
isCompact: isCompactModeActive,
});
},
[updateCurrentView],
);
const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
const recordIndexCalendarLayout = useRecoilValue(
@@ -116,10 +120,11 @@ export const ObjectOptionsDropdownLayoutContent = () => {
...(isDefaultView ? [] : [ViewType.Kanban]),
...(!isDefaultView && hasCalendarViewEnabled ? [ViewType.Calendar] : []),
ViewOpenRecordInType.SIDE_PANEL,
...(currentView?.type === ViewType.Kanban ? ['Group', 'Compact view'] : []),
...(currentView?.type === ViewType.Kanban ? ['Group'] : []),
...(currentView?.type === ViewType.Calendar
? ['CalendarView', 'CalendarDateField']
: []),
...(currentView?.type !== ViewType.Table ? ['Compact view'] : []),
];
const selectedItemId = useRecoilComponentValue(
@@ -273,53 +278,52 @@ export const ObjectOptionsDropdownLayoutContent = () => {
/>
</SelectableListItem>
{currentView?.type === ViewType.Kanban && (
<>
<SelectableListItem
itemId="Group"
onEnter={() => {
<SelectableListItem
itemId="Group"
onEnter={() => {
isDefined(recordGroupFieldMetadata)
? onContentChange('recordGroups')
: onContentChange('recordGroupFields');
}}
>
<MenuItem
focused={selectedItemId === 'Group'}
onClick={() =>
isDefined(recordGroupFieldMetadata)
? onContentChange('recordGroups')
: onContentChange('recordGroupFields');
}}
>
<MenuItem
focused={selectedItemId === 'Group'}
onClick={() =>
isDefined(recordGroupFieldMetadata)
? onContentChange('recordGroups')
: onContentChange('recordGroupFields')
}
LeftIcon={IconLayoutList}
text={t`Group`}
contextualText={recordGroupFieldMetadata?.label}
hasSubMenu
/>
</SelectableListItem>
<SelectableListItem
itemId="Compact view"
onEnter={() => {
: onContentChange('recordGroupFields')
}
LeftIcon={IconLayoutList}
text={t`Group`}
contextualText={recordGroupFieldMetadata?.label}
hasSubMenu
/>
</SelectableListItem>
)}
{currentView?.type !== ViewType.Table && (
<SelectableListItem
itemId="Compact view"
onEnter={() => {
setAndPersistIsCompactModeActive(
!isCompactModeActive,
currentView,
);
}}
>
<MenuItemToggle
focused={selectedItemId === 'Compact view'}
LeftIcon={IconBaselineDensitySmall}
onToggleChange={() =>
setAndPersistIsCompactModeActive(
!isCompactModeActive,
currentView,
);
}}
>
<MenuItemToggle
focused={selectedItemId === 'Compact view'}
LeftIcon={IconBaselineDensitySmall}
onToggleChange={() =>
setAndPersistIsCompactModeActive(
!isCompactModeActive,
currentView,
)
}
toggled={isCompactModeActive}
text={t`Compact view`}
toggleSize="small"
/>
</SelectableListItem>
</>
)
}
toggled={isCompactModeActive}
text={t`Compact view`}
toggleSize="small"
/>
</SelectableListItem>
)}
</DropdownMenuItemsContainer>
</SelectableList>
@@ -4,7 +4,6 @@ import { useRecoilState } from 'recoil';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
import { useReorderVisibleRecordFields } from '@/object-record/record-field/hooks/useReorderVisibleRecordFields';
import { useUpdateRecordField } from '@/object-record/record-field/hooks/useUpdateRecordField';
import { useUpsertRecordField } from '@/object-record/record-field/hooks/useUpsertRecordField';
@@ -13,11 +12,8 @@ import { type RecordField } from '@/object-record/record-field/types/RecordField
import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields';
import { useUpdateCurrentView } from '@/views/hooks/useUpdateCurrentView';
import { type GraphQLView } from '@/views/types/GraphQLView';
import { mapRecordFieldToViewField } from '@/views/utils/mapRecordFieldToViewField';
import { produce } from 'immer';
import { findByProperty, isDefined } from 'twenty-shared/utils';
@@ -39,12 +35,6 @@ export const useObjectOptionsForBoard = ({
useRecoilState(recordIndexFieldDefinitionsState);
const { saveViewFields } = useSaveCurrentViewFields();
const { updateCurrentView } = useUpdateCurrentView();
const [isCompactModeActive, setIsCompactModeActive] = useRecoilComponentState(
isRecordBoardCompactModeActiveComponentState,
recordBoardId,
);
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
@@ -252,23 +242,10 @@ export const useObjectOptionsForBoard = ({
],
);
const setAndPersistIsCompactModeActive = useCallback(
(isCompactModeActive: boolean, view: GraphQLView | undefined) => {
if (!view) return;
setIsCompactModeActive(isCompactModeActive);
updateCurrentView({
isCompact: isCompactModeActive,
});
},
[setIsCompactModeActive, updateCurrentView],
);
return {
handleReorderBoardFields,
handleBoardFieldVisibilityChange,
visibleBoardFields,
hiddenBoardFields,
isCompactModeActive,
setAndPersistIsCompactModeActive,
};
};
@@ -5,7 +5,6 @@ import { RecordBoardCardContext } from '@/object-record/record-board/record-boar
import { isRecordBoardCardActiveComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardActiveComponentFamilyState';
import { isRecordBoardCardFocusedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardFocusedComponentFamilyState';
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
import { useRecordDragState } from '@/object-record/record-drag/shared/hooks/useRecordDragState';
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
@@ -26,8 +25,8 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import styled from '@emotion/styled';
import { useContext } from 'react';
import { InView, useInView } from 'react-intersection-observer';
@@ -82,9 +81,9 @@ export const RecordBoardCard = () => {
multiDragState.originalSelection.includes(recordId) &&
recordId !== multiDragState.primaryDraggedRecordId;
const isCompactModeActive = useRecoilComponentValue(
isRecordBoardCompactModeActiveComponentState,
);
const { currentView } = useGetCurrentViewOnly();
const isCompactModeActive = currentView?.isCompact ?? false;
const [isCardExpanded, setIsCardExpanded] = useRecoilComponentState(
recordBoardCardIsExpandedComponentState,
@@ -2,7 +2,6 @@ import { RecordBoardContext } from '@/object-record/record-board/contexts/Record
import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
import { RecordChip } from '@/object-record/components/RecordChip';
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
@@ -15,7 +14,7 @@ import { recordIndexOpenRecordInState } from '@/object-record/record-index/state
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import styled from '@emotion/styled';
import { useContext } from 'react';
@@ -50,9 +49,9 @@ export const RecordBoardCardHeader = () => {
const { activateBoardCard } = useActiveRecordBoardCard(recordBoardId);
const { unfocusBoardCard } = useFocusedRecordBoardCard(recordBoardId);
const isCompactModeActive = useRecoilComponentValue(
isRecordBoardCompactModeActiveComponentState,
);
const { currentView } = useGetCurrentViewOnly();
const isCompactModeActive = currentView?.isCompact ?? false;
const [isCardExpanded, setIsCardExpanded] = useRecoilComponentState(
recordBoardCardIsExpandedComponentState,
@@ -9,10 +9,10 @@ import { RecordBoardColumnFetchMoreLoader } from '@/object-record/record-board/r
import { RecordBoardColumnNewRecordButton } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
import { getNumberOfCardsPerColumnForSkeletonLoading } from '@/object-record/record-board/record-board-column/utils/getNumberOfCardsPerColumnForSkeletonLoading';
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
import { isRecordIndexBoardColumnLoadingFamilyState } from '@/object-record/states/isRecordBoardColumnLoadingFamilyState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
const StyledColumnCardsContainer = styled.div`
display: flex;
@@ -58,9 +58,9 @@ export const RecordBoardColumnCardsContainer = ({
const numberOfFields = visibleRecordFields.length;
const isCompactModeActive = useRecoilComponentValue(
isRecordBoardCompactModeActiveComponentState,
);
const { currentView } = useGetCurrentViewOnly();
const isCompactModeActive = currentView?.isCompact ?? false;
return (
<StyledColumnCardsContainer
@@ -1,9 +0,0 @@
import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const isRecordBoardCompactModeActiveComponentState =
createComponentState<boolean>({
key: 'isRecordBoardCompactModeActiveComponentState',
defaultValue: false,
componentInstanceContext: RecordBoardComponentInstanceContext,
});
@@ -38,6 +38,7 @@ const StyledDayHeader = styled.div<{ isToday: boolean }>`
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(1)};
font-size: ${({ theme }) => theme.font.size.sm};
margin-bottom: ${({ theme }) => theme.spacing(0.5)};
${({ isToday, theme }) =>
isToday &&
css`
@@ -51,6 +52,7 @@ const StyledDayHeader = styled.div<{ isToday: boolean }>`
const StyledCardsContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(0.5)};
`;
type RecordCalendarMonthBodyDayProps = {
@@ -5,14 +5,15 @@ import { RecordCalendarCardHeader } from '@/object-record/record-calendar/record
import { RecordCalendarCardComponentInstanceContext } from '@/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext';
import { RecordCard } from '@/object-record/record-card/components/RecordCard';
import { useOpenRecordFromIndexView } from '@/object-record/record-index/hooks/useOpenRecordFromIndexView';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import styled from '@emotion/styled';
import { AnimatedEaseInOut } from 'twenty-ui/utilities';
const StyledContainer = styled.div`
display: flex;
`;
const StyledRecordCard = styled(RecordCard)`
margin-bottom: ${({ theme }) => theme.spacing(1)};
width: calc(100% - 2px);
`;
@@ -23,6 +24,10 @@ type RecordCalendarCardProps = {
export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
const { openRecordFromIndexView } = useOpenRecordFromIndexView();
const { currentView } = useGetCurrentViewOnly();
const isCompactModeActive = currentView?.isCompact ?? false;
const handleCardClick = () => {
openRecordFromIndexView({ recordId });
};
@@ -36,10 +41,12 @@ export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
<StyledContainer>
<StyledRecordCard onClick={handleCardClick}>
<RecordCalendarCardHeader recordId={recordId} />
<RecordCalendarCardBody
recordId={recordId}
isRecordReadOnly={false}
/>
<AnimatedEaseInOut isOpen={!isCompactModeActive} initial={false}>
<RecordCalendarCardBody
recordId={recordId}
isRecordReadOnly={false}
/>
</AnimatedEaseInOut>
</StyledRecordCard>
<RecordCalendarCardCellHoveredPortal recordId={recordId} />
<RecordCalendarCardCellEditModePortal recordId={recordId} />
@@ -3,6 +3,7 @@ import { StopPropagationContainer } from '@/object-record/record-board/record-bo
import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext';
import { RecordCardHeaderContainer } from '@/object-record/record-card/components/RecordCardHeaderContainer';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
@@ -30,12 +31,16 @@ export const RecordCalendarCardHeader = ({
const { objectMetadataItem } = useRecordCalendarContextOrThrow();
const record = useRecoilValue(recordStoreFamilyState(recordId));
const { currentView } = useGetCurrentViewOnly();
const isCompactModeActive = currentView?.isCompact ?? false;
if (!isDefined(record)) {
return null;
}
return (
<RecordCardHeaderContainer isCompact={true}>
<RecordCardHeaderContainer isCompact={isCompactModeActive}>
<StyledRecordChipContainer>
<StopPropagationContainer>
<RecordChip
@@ -1,10 +1,7 @@
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
@@ -15,24 +12,11 @@ type RecordIndexBoardDataLoaderEffectProps = {
export const RecordIndexBoardDataLoaderEffect = ({
recordBoardId,
}: RecordIndexBoardDataLoaderEffectProps) => {
const recordIndexIsCompactModeActive = useRecoilValue(
recordIndexIsCompactModeActiveState,
);
const selectedRecordIds = useRecoilComponentValue(
recordBoardSelectedRecordIdsComponentSelector,
recordBoardId,
);
const setIsCompactModeActive = useSetRecoilComponentState(
isRecordBoardCompactModeActiveComponentState,
recordBoardId,
);
useEffect(() => {
setIsCompactModeActive(recordIndexIsCompactModeActive);
}, [recordIndexIsCompactModeActive, setIsCompactModeActive]);
const setContextStoreTargetedRecords = useSetRecoilComponentState(
contextStoreTargetedRecordsRuleComponentState,
);
@@ -7,7 +7,6 @@ import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldM
import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
import { recordIndexCalendarFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexCalendarFieldMetadataIdState';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
import { recordIndexKanbanAggregateOperationState } from '@/object-record/record-index/states/recordIndexKanbanAggregateOperationState';
import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState';
import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
@@ -29,9 +28,6 @@ export const useLoadRecordIndexStates = () => {
const setContextStoreTargetedRecordsRuleComponentState =
useSetRecoilComponentState(contextStoreTargetedRecordsRuleComponentState);
const setRecordIndexIsCompactModeActive = useSetRecoilState(
recordIndexIsCompactModeActiveState,
);
const setRecordIndexViewType = useSetRecoilState(recordIndexViewTypeState);
const setRecordIndexOpenRecordIn = useSetRecoilState(
recordIndexOpenRecordInState,
@@ -204,7 +200,6 @@ export const useLoadRecordIndexStates = () => {
: view.kanbanAggregateOperation,
fieldMetadataId: view.kanbanAggregateOperationFieldMetadataId,
});
setRecordIndexIsCompactModeActive(view.isCompact);
},
[
onViewFieldsChange,
@@ -215,7 +210,6 @@ export const useLoadRecordIndexStates = () => {
setRecordIndexViewKanbanFieldMetadataIdState,
setRecordIndexCalendarFieldMetadataIdState,
setRecordIndexViewKanbanAggregateOperationState,
setRecordIndexIsCompactModeActive,
],
);
@@ -1,5 +0,0 @@
import { createState } from 'twenty-ui/utilities';
export const recordIndexIsCompactModeActiveState = createState<boolean>({
key: 'recordIndexIsCompactModeActiveState',
defaultValue: false,
});
@@ -23,7 +23,7 @@ export const convertUpdateViewInputToCore = (
...(view.name && { name: view.name }),
...(view.icon && { icon: view.icon }),
...(view.position && { position: view.position }),
...(view.isCompact && { isCompact: view.isCompact }),
...(isDefined(view.isCompact) && { isCompact: view.isCompact }),
...(view.kanbanAggregateOperation && {
kanbanAggregateOperation: view.kanbanAggregateOperation,
}),