fix calendar view when switched from other layout type bis (#15569)

packages/twenty-front/src/modules/object-record/record-calendar/components/RecordIndexCalendarDataLoaderEffect.tsx

@@ -1,9 +1,9 @@
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useRecordCalendarGroupByRecords } from '@/object-record/record-calendar/hooks/useRecordCalendarGroupByRecords';
 import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext';
+import { recordCalendarRecordIdsComponentState } from '@/object-record/record-calendar/states/recordCalendarRecordIdsComponentState';
 import { recordCalendarSelectedDateComponentState } from '@/object-record/record-calendar/states/recordCalendarSelectedDateComponentState';
 import { recordCalendarSelectedRecordIdsComponentSelector } from '@/object-record/record-calendar/states/selectors/recordCalendarSelectedRecordIdsComponentSelector';
-import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
@@ -26,22 +26,23 @@ export const RecordIndexCalendarDataLoaderEffect = () => {
 
   const { upsertRecordsInStore } = useUpsertRecordsInStore();
 
-  const setRecordIndexAllRecordIdsSelector = useSetRecoilComponentState(
-    recordIndexAllRecordIdsComponentSelector,
-  );
-
   const setContextStoreTargetedRecords = useSetRecoilComponentState(
     contextStoreTargetedRecordsRuleComponentState,
   );
 
+  const setRecordCalendarRecordIds = useSetRecoilComponentState(
+    recordCalendarRecordIdsComponentState,
+  );
+
   const { records } = useRecordCalendarGroupByRecords(
     recordCalendarSelectedDate,
   );
 
   useEffect(() => {
     upsertRecordsInStore(records);
-    setRecordIndexAllRecordIdsSelector(records.map((record) => record.id));
+    const recordIds = records.map((record) => record.id);
-  }, [records, setRecordIndexAllRecordIdsSelector, upsertRecordsInStore]);
+    setRecordCalendarRecordIds(recordIds);
+  }, [records, setRecordCalendarRecordIds, upsertRecordsInStore]);
 
   useEffect(() => {
     setContextStoreTargetedRecords({

packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx

@@ -8,7 +8,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
-  border: 0.5px solid ${({ theme }) => theme.border.color.light};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 4px;
   overflow: hidden;
 `;

packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx

@@ -25,7 +25,7 @@ const StyledContainer = styled.div<{
   color: ${({ theme }) => theme.font.color.primary};
 
   &:not(:last-child) {
-    border-right: 0.5px solid ${({ theme }) => theme.border.color.light};
+    border-right: 1px solid ${({ theme }) => theme.border.color.light};
   }
 
   ${({ isOtherMonth, theme }) =>

packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx

@@ -9,7 +9,7 @@ const StyledContainer = styled.div`
   flex: 1;
 
   &:not(:last-of-type) {
-    border-bottom: 0.5px solid ${({ theme }) => theme.border.color.light};
+    border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   }
 `;
 

packages/twenty-front/src/modules/object-record/record-calendar/states/recordCalendarRecordIdsComponentState.ts

@@ -0,0 +1,11 @@
+import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const recordCalendarRecordIdsComponentState = createComponentState<
+  string[]
+>({
+  key: 'recordCalendarRecordIdsComponentState',
+  defaultValue: [],
+  componentInstanceContext: RecordCalendarComponentInstanceContext,
+});
+

packages/twenty-front/src/modules/object-record/record-calendar/states/selectors/calendarDayRecordsComponentFamilySelector.ts

@@ -1,8 +1,8 @@
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { hasObjectMetadataItemPositionField } from '@/object-metadata/utils/hasObjectMetadataItemPositionField';
 import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext';
+import { recordCalendarRecordIdsComponentState } from '@/object-record/record-calendar/states/recordCalendarRecordIdsComponentState';
 import { recordIndexCalendarFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexCalendarFieldMetadataIdState';
-import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { createComponentFamilySelector } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelector';
 import { isSameDay, parse } from 'date-fns';
@@ -42,7 +42,7 @@ export const calendarDayRecordIdsComponentFamilySelector =
         }
 
         const allRecordIds = get(
-          recordIndexAllRecordIdsComponentSelector.selectorFamily({
+          recordCalendarRecordIdsComponentState.atomFamily({
             instanceId,
           }),
         );