feat: Navigation state provider and hook

components/Common/ProgressionSidebar/index.tsx

@@ -1,9 +1,10 @@
 import { useTranslations } from 'next-intl';
 import type { ComponentProps, FC } from 'react';
+import { useRef } from 'react';
 
 import ProgressionSidebarGroup from '@/components/Common/ProgressionSidebar/ProgressionSidebarGroup';
 import WithRouterSelect from '@/components/withRouterSelect';
-import { useClientContext } from '@/hooks/react-server';
+import { useClientContext, useNavigationState } from '@/hooks';
 
 import styles from './index.module.css';
 
@@ -14,6 +15,9 @@ type ProgressionSidebarProps = {
 const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
   const t = useTranslations();
   const { pathname } = useClientContext();
+  const ref = useRef<HTMLElement>(null);
+
+  useNavigationState('progressionSidebar', ref);
 
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
@@ -26,7 +30,7 @@ const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
     .find(item => pathname === item.value);
 
   return (
-    <nav className={styles.wrapper}>
+    <nav className={styles.wrapper} ref={ref}>
       <WithRouterSelect
         label={t('components.common.sidebar.title')}
         values={selectItems}

components/withProgressionSidebar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 

hooks/react-client/index.ts

@@ -6,3 +6,4 @@ export { default as useClientContext } from './useClientContext';
 export { default as useKeyboardCommands } from './useKeyboardCommands';
 export { default as useClickOutside } from './useClickOutside';
 export { default as useBottomScrollListener } from './useBottomScrollListener';
+export { default as useNavigationState } from './useNavigationState';

hooks/react-client/useNavigationState.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import type { RefObject } from 'react';
+import { useContext, useEffect } from 'react';
+
+import { NavigationStateContext } from '@/providers/navigationStateProvider';
+import { debounce } from '@/util/debounce';
+
+const useNavigationState = <T extends HTMLElement>(
+  id: string,
+  ref: RefObject<T>,
+  debounceTime = 300
+) => {
+  const navigationState = useContext(NavigationStateContext);
+
+  const handleScroll = debounce(() => {
+    if (ref.current) {
+      navigationState[id] = {
+        x: ref.current.scrollLeft,
+        y: ref.current.scrollTop,
+      };
+    }
+  }, debounceTime);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (element) {
+      if (navigationState[id] && navigationState[id].y !== element.scrollTop) {
+        element.scroll({ top: navigationState[id].y, behavior: 'instant' });
+      }
+
+      element.addEventListener('scroll', handleScroll, { passive: true });
+
+      return () => element.removeEventListener('scroll', handleScroll);
+    }
+    // We need this effect to run only on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+export default useNavigationState;

layouts/Base.tsx

@@ -2,13 +2,16 @@
 
 import type { FC, PropsWithChildren } from 'react';
 
+import { NavigationStateProvider } from '@/providers/navigationStateProvider';
 import { NotificationProvider } from '@/providers/notificationProvider';
 
 import styles from './layouts.module.css';
 
 const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
   <NotificationProvider viewportClassName="absolute bottom-0 right-0 list-none">
-    <div className={styles.baseLayout}>{children}</div>
+    <NavigationStateProvider>
+      <div className={styles.baseLayout}>{children}</div>
+    </NavigationStateProvider>
   </NotificationProvider>
 );
 

providers/navigationStateProvider.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { createContext, useRef } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+type NavigationStateContextType = Record<string, { x: number; y: number }>;
+
+export const NavigationStateContext = createContext<NavigationStateContextType>(
+  {}
+);
+
+export const NavigationStateProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const navigationState = useRef<NavigationStateContextType>({});
+
+  return (
+    <NavigationStateContext.Provider value={navigationState.current}>
+      {children}
+    </NavigationStateContext.Provider>
+  );
+};