Implement <ScrollRestoration /> (#5086)

### Description

Implement <ScrollRestoration />

### Refs


[https://github.com/twentyhq/twenty/issues/4357](https://github.com/twentyhq/twenty/issues/4183)

### Demo


https://github.com/twentyhq/twenty/assets/140154534/321242e1-4751-4204-8c86-e9b921c1733e

Fixes #4357

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx

@@ -16,6 +16,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { useScrollRestoration } from '~/hooks/useScrollRestoration';
 
 export type RecordBoardProps = {
   recordBoardId: string;
@@ -42,6 +43,11 @@ const StyledBoardHeader = styled.div`
   z-index: 1;
 `;
 
+const RecordBoardScrollRestoreEffect = () => {
+  useScrollRestoration();
+  return null;
+};
+
 export const RecordBoard = ({ recordBoardId }: RecordBoardProps) => {
   const { updateOneRecord, selectFieldMetadataItem } =
     useContext(RecordBoardContext);
@@ -152,6 +158,7 @@ export const RecordBoard = ({ recordBoardId }: RecordBoardProps) => {
               ))}
             </DragDropContext>
           </StyledContainer>
+          <RecordBoardScrollRestoreEffect />
         </ScrollWrapper>
         <DragSelect
           dragSelectable={boardRef}

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx

@@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
+import { useScrollRestoration } from '~/hooks/useScrollRestoration';
 
 type RecordTableBodyEffectProps = {
   objectNameSingular: string;
@@ -31,6 +32,11 @@ export const RecordTableBodyEffect = ({
     isFetchingMoreRecordsFamilyState(queryStateIdentifier),
   );
 
+  const rowHeight = 32;
+  const viewportHeight = records.length * rowHeight;
+
+  useScrollRestoration(viewportHeight);
+
   useEffect(() => {
     if (!loading) {
       setRecordTableData(records, totalCount);

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -2,8 +2,9 @@ import { createContext, RefObject, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import { useRecoilCallback } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
+import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
 import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
 import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
 
@@ -48,7 +49,9 @@ export const ScrollWrapper = ({
     [],
   );
 
-  const [initialize] = useOverlayScrollbars({
+  const setOverlayScrollbars = useSetRecoilState(overlayScrollbarsState);
+
+  const [initialize, instance] = useOverlayScrollbars({
     options: {
       scrollbars: { autoHide: 'scroll' },
       overflow: {
@@ -67,6 +70,10 @@ export const ScrollWrapper = ({
     }
   }, [initialize, scrollableRef]);
 
+  useEffect(() => {
+    setOverlayScrollbars(instance());
+  }, [instance, setOverlayScrollbars]);
+
   return (
     <ScrollWrapperContext.Provider value={scrollableRef}>
       <StyledScrollWrapper ref={scrollableRef} className={className}>

packages/twenty-front/src/modules/ui/utilities/scroll/states/overlayScrollbarsState.ts

@@ -0,0 +1,7 @@
+import { OverlayScrollbars } from 'overlayscrollbars';
+import { createState } from 'twenty-ui';
+
+export const overlayScrollbarsState = createState<OverlayScrollbars | null>({
+  key: 'scroll/overlayScrollbarsState',
+  defaultValue: null,
+});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollPositionState.ts

@@ -0,0 +1,6 @@
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
+
+export const scrollPositionState = createFamilyState({
+  key: 'scroll/scrollPositionState',
+  defaultValue: 0,
+});