refactor: persist tab state

src/components/layout/drawer/Extras.jsx

@@ -170,7 +170,7 @@ const RaidQuickSelect = () => {
   )
   return (
     <CollapsibleItem open={enabled}>
-      <MultiSelectorList>
+      <MultiSelectorList tabKey="raids">
         <SelectorListMemo
           key="eggs"
           category="gyms"
@@ -208,7 +208,7 @@ const BaseQuestSet = () => {
           items={QUEST_SETS}
         />
       </ListItem>
-      <MultiSelectorList>
+      <MultiSelectorList tabKey="quests">
         <SelectorListMemo
           key="items"
           category="pokestops"
@@ -250,7 +250,7 @@ const BaseInvasion = () => {
         </ListItem>
       )}
       {hasConfirmed ? (
-        <MultiSelectorList>
+        <MultiSelectorList tabKey="invasions">
           <SelectorListMemo
             key="invasions"
             category="pokestops"

src/components/layout/drawer/Pokemon.jsx

@@ -35,7 +35,7 @@ function PokemonDrawer() {
   const filterMode = useStorage((s) => s.getPokemonFilterMode())
   const [ivOr, setIvOr] = useDeepStore('filters.pokemon.ivOr')
   const { t } = useTranslation()
-  const [openTab, setOpenTab] = React.useState(0)
+  const [openTab, setOpenTab] = useDeepStore(`tabs.pokemon`, 0)
   const ui = useMemory((s) => s.ui.pokemon)
   const selectRef = React.useRef(/** @type {HTMLDivElement | null} */ (null))
 

src/components/layout/drawer/SelectorList.jsx

@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next'
 import { useTranslateById } from '@hooks/useTranslateById'
 import { useMemory } from '@hooks/useMemory'
 import { useLayoutStore } from '@hooks/useLayoutStore'
-import { useStorage } from '@hooks/useStorage'
+import { useDeepStore, useStorage } from '@hooks/useStorage'
 
 import { BoolToggle } from './BoolToggle'
 import { GenericSearchMemo } from './ItemSearch'
@@ -202,10 +202,10 @@ export const SelectorListMemo = React.memo(
     prev.height === next.height,
 )
 
-/** @param {{ children: React.ReactElement[] }} props */
-export function MultiSelectorList({ children }) {
+/** @param {{ children: React.ReactElement[], tabKey: string }} props */
+export function MultiSelectorList({ children, tabKey }) {
   const { t } = useTranslation()
-  const [openTab, setOpenTab] = React.useState(0)
+  const [openTab, setOpenTab] = useDeepStore(`tabs.${tabKey}`, 0)
 
   const handleTabChange = (_e, newValue) => setOpenTab(newValue)
 

src/hooks/useStorage.js

@@ -19,6 +19,7 @@ import { persist, createJSONStorage } from 'zustand/middleware'
  *    tileServers: string
  *   },
  *   searches: Record<string, string>,
+ *   tabs: Record<string, number>,
  *   menus: Record<string, boolean>,
  *   holidayEffects: Record<string, boolean>,
  *   motdIndex: number
@@ -111,6 +112,7 @@ export const useStorage = create(
       holidayEffects: {},
       settings: {},
       searches: {},
+      tabs: {},
       userSettings: {},
       icons: {},
       audio: {},