fix: restore drawer sublist scroll positions

Author: Mygod

src/components/virtual/VirtualGrid.jsx

@@ -41,7 +41,9 @@ const List = React.forwardRef(({ context, ...props }, ref) => (
  *  Header?: React.ComponentType<U>,
  *  Footer?: React.ComponentType<U>,
  *  useWindowScroll?: boolean,
- *  scrollerRef?: import('react-virtuoso').VirtuosoGridProps<T, U & SomeGridProps>['scrollerRef']
+ *  scrollerRef?: import('react-virtuoso').VirtuosoGridProps<T, U & SomeGridProps>['scrollerRef'],
+ *  restoreStateFrom?: import('react-virtuoso').VirtuosoGridProps<T, U & SomeGridProps>['restoreStateFrom'],
+ *  stateChanged?: import('react-virtuoso').VirtuosoGridProps<T, U & SomeGridProps>['stateChanged'],
  * }} props
  */
 export function VirtualGrid({
@@ -57,6 +59,8 @@ export function VirtualGrid({
   Footer,
   useWindowScroll,
   scrollerRef,
+  restoreStateFrom,
+  stateChanged,
 }) {
   const fullContext = React.useMemo(
     () => ({ ...context, xs, sm, md, lg, xl }),
@@ -77,6 +81,8 @@ export function VirtualGrid({
       itemContent={children}
       useWindowScroll={useWindowScroll}
       scrollerRef={scrollerRef}
+      restoreStateFrom={restoreStateFrom}
+      stateChanged={stateChanged}
     />
   )
 }

src/features/drawer/areas/AreaTable.jsx

@@ -18,6 +18,8 @@ import { useMemory } from '@store/useMemory'
 import { useStorage } from '@store/useStorage'
 import { useMapStore } from '@store/useMapStore'
 
+import { useDrawerScrollMemory } from '../hooks/useScrollMemory'
+
 /** @typedef {{ id: string, name: string, lat: number, lon: number }} JumpResult */
 
 import { AreaParent } from './Parent'
@@ -32,6 +34,7 @@ export function ScanAreasTable() {
   const trimmedSearch = React.useMemo(() => rawSearch.trim(), [rawSearch])
   const { misc, general } = useMemory.getState().config
   const jumpZoom = general?.scanAreasZoom || general?.startZoom || 12
+  const tableScrollMemory = useDrawerScrollMemory('scanAreas:table')
   /** @type {[JumpResult[], React.Dispatch<React.SetStateAction<JumpResult[]>>]} */
   const [jumpResults, setJumpResults] = React.useState([])
   const [jumpLoading, setJumpLoading] = React.useState(false)
@@ -161,6 +164,7 @@ export function ScanAreasTable() {
   return (
     <TableContainer
       component={Paper}
+      ref={tableScrollMemory.ref}
       sx={{
         minHeight: 50,
         maxHeight: misc.scanAreaMenuHeight || 400,

src/features/drawer/components/SelectorList.jsx

@@ -27,6 +27,12 @@ import { BoolToggle } from '@components/inputs/BoolToggle'
 import { GenericSearchMemo } from '@components/inputs/GenericSearch'
 import { StandardItem } from '@components/virtual/StandardItem'
 
+import {
+  getDrawerGridState,
+  setDrawerGridState,
+  useDrawerScrollMemory,
+} from '../hooks/useScrollMemory'
+
 /**
  * @template {keyof import('@rm/types').Available} T
  * @typedef {{
@@ -36,14 +42,27 @@ import { StandardItem } from '@components/virtual/StandardItem'
  *  children?: React.ReactNode,
  *  label?: string
  *  height?: React.CSSProperties['height'],
+ *  scrollKey?: string,
+ *  visible?: boolean,
  * }} SelectorListProps
  * @param {SelectorListProps<keyof import('@rm/types').Available>} props
  * @returns
  */
-function SelectorList({ category, subCategory, label, height = 400 }) {
+function SelectorList({
+  category,
+  subCategory,
+  label,
+  height = 400,
+  scrollKey,
+  visible = true,
+}) {
   const searchKey = `${category}${
     subCategory ? capitalize(subCategory) : ''
   }QuickSelect`
+  const listScrollKey =
+    scrollKey ||
+    `selector:${category}:${subCategory || 'default'}:${label || 'default'}`
+  const drawer = useLayoutStore((s) => s.drawer)
   const { available } = useGetAvailable(category)
   const { t: tId } = useTranslateById({
     quest: subCategory === 'pokemon',
@@ -114,6 +133,32 @@ function SelectorList({ category, subCategory, label, height = 400 }) {
       .map((item) => item.id)
   }, [translated, search])
 
+  const restoreStateFrom = React.useMemo(
+    () => getDrawerGridState(listScrollKey),
+    [listScrollKey],
+  )
+  const shouldPersistGridState = drawer && visible
+  const scrollMemory = useDrawerScrollMemory(
+    listScrollKey,
+    shouldPersistGridState,
+  )
+
+  const handleStateChanged = React.useCallback(
+    (state) => {
+      if (
+        !shouldPersistGridState ||
+        !state.viewport.height ||
+        !state.viewport.width ||
+        !state.item.height ||
+        !state.item.width
+      ) {
+        return
+      }
+      setDrawerGridState(listScrollKey, state)
+    },
+    [listScrollKey, shouldPersistGridState],
+  )
+
   /** @param {'enable' | 'disable' | 'advanced'} action */
   const setAll = (action) => {
     const keys = new Set(items.map((item) => item))
@@ -194,7 +239,13 @@ function SelectorList({ category, subCategory, label, height = 400 }) {
             : height
         }
       >
-        <VirtualGrid data={items} xs={4}>
+        <VirtualGrid
+          data={items}
+          xs={4}
+          scrollerRef={scrollMemory.ref}
+          restoreStateFrom={restoreStateFrom}
+          stateChanged={handleStateChanged}
+        >
           {(_, key) => <StandardItem id={key} category={category} />}
         </VirtualGrid>
       </Box>
@@ -208,13 +259,16 @@ export const SelectorListMemo = React.memo(
     prev.category === next.category &&
     prev.subCategory === next.subCategory &&
     prev.label === next.label &&
-    prev.height === next.height,
+    prev.height === next.height &&
+    prev.scrollKey === next.scrollKey &&
+    prev.visible === next.visible,
 )
 
 /** @param {{ children: React.ReactElement[], tabKey: string }} props */
 export function MultiSelectorList({ children, tabKey }) {
   const { t } = useTranslation()
   const [openTab, setOpenTab] = useDeepStore(`tabs.${tabKey}`, 0)
+  const visibleChildren = children.filter(Boolean)
 
   /** @type {import('@mui/material').TabsProps['onChange']} */
   const handleTabChange = React.useCallback(
@@ -226,14 +280,14 @@ export function MultiSelectorList({ children, tabKey }) {
     <Box pt={2}>
       <AppBar position="static">
         <Tabs value={openTab} onChange={handleTabChange}>
-          {children.map((child) => (
+          {visibleChildren.map((child) => (
             <Tab key={child.key} label={t(child.key)} />
           ))}
         </Tabs>
       </AppBar>
-      {children.filter(Boolean).map((child, index) => (
+      {visibleChildren.map((child, index) => (
         <TabPanel value={openTab} index={index} key={child.key}>
-          {child}
+          {React.cloneElement(child, { visible: openTab === index })}
         </TabPanel>
       ))}
     </Box>

src/features/drawer/hooks/useScrollMemory.js

@@ -0,0 +1,90 @@
+// @ts-check
+import * as React from 'react'
+
+/** @type {Map<string, import('react-virtuoso').GridStateSnapshot>} */
+const gridStateMemory = new Map()
+
+/** @type {Map<string, number>} */
+const scrollTopMemory = new Map()
+
+/**
+ * @param {string} key
+ * @returns {import('react-virtuoso').GridStateSnapshot | null}
+ */
+export function getDrawerGridState(key) {
+  return gridStateMemory.get(key) || null
+}
+
+/**
+ * @param {string} key
+ * @param {import('react-virtuoso').GridStateSnapshot} state
+ */
+export function setDrawerGridState(key, state) {
+  gridStateMemory.set(key, state)
+}
+
+/**
+ * @template {HTMLElement} T
+ * @param {string} key
+ * @param {boolean} [restore]
+ */
+export function useDrawerScrollMemory(key, restore = true) {
+  const nodeRef = React.useRef(/** @type {T | null} */ (null))
+  const rafRef = React.useRef(0)
+
+  const handleScroll = React.useCallback(() => {
+    if (nodeRef.current) {
+      scrollTopMemory.set(key, nodeRef.current.scrollTop)
+    }
+  }, [key])
+
+  const restoreScrollTop = React.useCallback(
+    /** @param {T | null} node */
+    (node) => {
+      if (!node || !restore) return
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current)
+      }
+      rafRef.current = window.requestAnimationFrame(() => {
+        if (nodeRef.current === node) {
+          node.scrollTop = scrollTopMemory.get(key) || 0
+        }
+      })
+    },
+    [key, restore],
+  )
+
+  const ref = React.useCallback(
+    /** @type {React.RefCallback<T>} */ (
+      (node) => {
+        if (nodeRef.current) {
+          nodeRef.current.removeEventListener('scroll', handleScroll)
+        }
+        nodeRef.current = node
+        if (node) {
+          node.addEventListener('scroll', handleScroll, { passive: true })
+          restoreScrollTop(node)
+        }
+      }
+    ),
+    [handleScroll, restoreScrollTop],
+  )
+
+  React.useLayoutEffect(() => {
+    restoreScrollTop(nodeRef.current)
+  }, [restoreScrollTop])
+
+  React.useEffect(
+    () => () => {
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current)
+      }
+      if (nodeRef.current) {
+        nodeRef.current.removeEventListener('scroll', handleScroll)
+      }
+    },
+    [handleScroll],
+  )
+
+  return { ref }
+}