refactor: separate layout store

src/components/Config.jsx

@@ -42,7 +42,7 @@ export default function Config({ children }) {
         })
       }
 
-      /** @type {{ state: import('@hooks/useMemory').UseStorage}} */
+      /** @type {{ state: import('@hooks/useStorage').UseStorage}} */
       const localState = JSON.parse(
         localStorage.getItem('local-state') || '{ "state": {} }',
       )

src/components/layout/FloatingBtn.jsx

@@ -26,7 +26,8 @@ import { DomEvent } from 'leaflet'
 
 import { FAB_BUTTONS } from '@services/queries/config'
 import useLocation from '@hooks/useLocation'
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import { useScanStore } from './dialogs/scanner/store'
 

src/components/layout/dialogs/BadgeSelection.jsx

@@ -7,7 +7,7 @@ import { apolloClient, apolloCache } from '@services/apollo'
 
 import Query from '@services/Query'
 import { ENUM_BADGES } from '@assets/constants'
-import { useLayoutStore } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import Header from '../general/Header'
 import Footer from '../general/Footer'

src/components/layout/dialogs/DialogWrapper.jsx

@@ -1,7 +1,8 @@
 // @ts-check
 import * as React from 'react'
 import Dialog from '@mui/material/Dialog'
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 /**
  *

src/components/layout/dialogs/DonorPage.jsx

@@ -5,7 +5,8 @@ import { useQuery } from '@apollo/client'
 import Dialog from '@mui/material/Dialog'
 
 import { CUSTOM_COMPONENT } from '@services/queries/config'
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import DialogWrapper from '../custom/DialogWrapper'
 import CustomTile from '../custom/CustomTile'

src/components/layout/dialogs/Feedback.jsx

@@ -7,7 +7,8 @@ import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
 import { useTranslation } from 'react-i18next'
 
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import Header from '../general/Header'
 import Footer from '../general/Footer'

src/components/layout/dialogs/Help.jsx

@@ -1,7 +1,7 @@
 // @ts-check
 import * as React from 'react'
 
-import { useLayoutStore } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import Help from './tutorial/Advanced'
 import { DialogWrapper } from './DialogWrapper'

src/components/layout/dialogs/Motd.jsx

@@ -6,7 +6,7 @@ import Dialog from '@mui/material/Dialog'
 import Box from '@mui/material/Box'
 import { useQuery } from '@apollo/client'
 
-import { useLayoutStore } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import { CUSTOM_COMPONENT, MOTD_CHECK } from '@services/queries/config'
 import Utility from '@services/Utility'

src/components/layout/dialogs/NestSubmission.jsx

@@ -6,7 +6,8 @@ import { useMutation } from '@apollo/client'
 import { useTranslation } from 'react-i18next'
 
 import Query from '@services/Query'
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import Header from '../general/Header'
 import Footer from '../general/Footer'

src/components/layout/dialogs/ResetFilters.jsx

@@ -5,7 +5,7 @@ import Button from '@mui/material/Button'
 import { Navigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
-import { useLayoutStore } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import Header from '../general/Header'
 import Footer from '../general/Footer'

src/components/layout/dialogs/Search.jsx

@@ -25,7 +25,8 @@ import { useTranslation } from 'react-i18next'
 import { useLazyQuery, useQuery } from '@apollo/client'
 
 import NameTT from '@components/popups/common/NameTT'
-import { useMemory, useLayoutStore } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import Utility from '@services/Utility'
 import Query from '@services/Query'

src/components/layout/dialogs/UserOptions.jsx

@@ -10,7 +10,8 @@ import {
 import { useTranslation, Trans } from 'react-i18next'
 
 import Utility from '@services/Utility'
-import { useLayoutStore, useMemory, toggleDialog } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { toggleDialog, useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import { getPermission } from '@services/desktopNotification'
 

src/components/layout/dialogs/filters/Advanced.jsx

@@ -5,7 +5,8 @@ import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { useTranslation } from 'react-i18next'
 
 import Utility from '@services/Utility'
-import { useMemory, useLayoutStore } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useDeepStore, useStorage } from '@hooks/useStorage'
 import Header from '@components/layout/general/Header'
 import Footer from '@components/layout/general/Footer'

src/components/layout/dialogs/filters/FilterMenu.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import Menu from '@components/layout/general/Menu'
 
-import { toggleDialog, useLayoutStore } from '@hooks/useMemory'
+import { toggleDialog, useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import { StandardItem } from '@components/layout/drawer/SelectorItem'
 

src/components/layout/dialogs/filters/MenuTile.jsx

@@ -6,7 +6,7 @@ import FormatSize from '@mui/icons-material/FormatSize'
 import Settings from '@mui/icons-material/Settings'
 import { Grid, IconButton, Typography } from '@mui/material'
 import Utility from '@services/Utility'
-import { useLayoutStore } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 export default function MenuTile({ data, rowIndex, columnIndex, style }) {
   const [name, setName] = useState(true)

src/components/layout/dialogs/filters/SlotSelection.jsx

@@ -7,7 +7,8 @@ import DialogContent from '@mui/material/DialogContent'
 import IconButton from '@mui/material/IconButton'
 import Divider from '@mui/material/Divider'
 
-import { basicEqualFn, useLayoutStore, useMemory } from '@hooks/useMemory'
+import { basicEqualFn, useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage, useDeepStore } from '@hooks/useStorage'
 import { Img } from '@components/layout/general/Img'
 import { DualBoolToggle } from '@components/layout/drawer/BoolToggle'

src/components/layout/dialogs/profile/GymBadges.jsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next'
 import { useQuery } from '@apollo/client'
 import { useMap } from 'react-leaflet'
 
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import Query from '@services/Query'
 
 import { VirtualGrid } from '@components/layout/general/VirtualGrid'

src/components/layout/dialogs/profile/index.jsx

@@ -2,7 +2,8 @@ import * as React from 'react'
 import { DialogContent, AppBar, Tabs, Tab, Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import Utility from '@services/Utility'
 
 import Header from '../../general/Header'

src/components/layout/dialogs/tutorial/Sidebar.jsx

@@ -19,7 +19,8 @@ import {
 
 import { useTranslation } from 'react-i18next'
 
-import { useMemory, toggleDialog } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { toggleDialog } from '@hooks/useLayoutStore'
 import Utility from '@services/Utility'
 
 import data from './data'

src/components/layout/dialogs/tutorial/Welcome.jsx

@@ -5,7 +5,8 @@ import { DialogContent, Grid, Typography, Fab } from '@mui/material'
 
 import { useTranslation } from 'react-i18next'
 
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import LocaleSelection from '@components/layout/general/LocaleSelection'
 
 export default function TutWelcome() {

src/components/layout/dialogs/webhooks/Manage.jsx

@@ -10,7 +10,8 @@ import Collapse from '@mui/material/Collapse'
 import Box from '@mui/material/Box'
 import { useTranslation } from 'react-i18next'
 
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import Poracle from '@services/Poracle'
 import Utility from '@services/Utility'
 import Footer from '@components/layout/general/Footer'

src/components/layout/drawer/Actions.jsx

@@ -18,7 +18,8 @@ import FeedbackIcon from '@mui/icons-material/Feedback'
 import HeartIcon from '@mui/icons-material/Favorite'
 import { downloadJson } from '@services/functions/downloadJson'
 
-import { useMemory, useLayoutStore } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import { I } from '../general/I'
 

src/components/layout/drawer/Drawer.jsx

@@ -8,7 +8,8 @@ import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import ListItemIcon from '@mui/material/ListItemIcon'
 
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import Actions from './Actions'
 import { DrawerSectionMemo } from './Section'

src/components/layout/drawer/Section.jsx

@@ -16,7 +16,8 @@ import {
 
 import { useTranslation } from 'react-i18next'
 
-import { useMemory, toggleDialog, useLayoutStore } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { toggleDialog, useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import Utility from '@services/Utility'
 

src/components/layout/drawer/SelectorItem.jsx

@@ -8,7 +8,8 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
 import { useTranslateById } from '@hooks/useTranslateById'
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage, useDeepStore } from '@hooks/useStorage'
 import { Img } from '../general/Img'
 import { ColoredTile } from '../general/ColoredTile'

src/components/layout/drawer/SelectorList.jsx

@@ -13,7 +13,8 @@ import Box from '@mui/material/Box'
 import { useTranslation } from 'react-i18next'
 
 import { useTranslateById } from '@hooks/useTranslateById'
-import { useLayoutStore, useMemory } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 
 import { BoolToggle } from './BoolToggle'

src/components/layout/drawer/Settings.jsx

@@ -23,7 +23,8 @@ import LogoDevIcon from '@mui/icons-material/LogoDev'
 
 import { useTranslation } from 'react-i18next'
 
-import { useMemory, toggleDialog } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { toggleDialog } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import Utility from '@services/Utility'
 import {

src/components/layout/general/Menu.jsx

@@ -7,7 +7,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Collapse from '@mui/material/Collapse'
 import IconButton from '@mui/material/IconButton'
 import Utility from '@services/Utility'
-import { useMemory, useLayoutStore } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import useFilter from '@hooks/useFilter'
 import Header from '@components/layout/general/Header'

src/components/popups/Gym.jsx

@@ -15,7 +15,8 @@ import {
 import { useTranslation } from 'react-i18next'
 
 import { useSyncData } from '@components/layout/dialogs/webhooks/hooks'
-import { useMemory, useLayoutStore } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import useWebhook from '@hooks/useWebhook'
 import Utility from '@services/Utility'

src/components/popups/Nest.jsx

@@ -13,7 +13,8 @@ import {
 
 import { useTranslation } from 'react-i18next'
 
-import { useMemory, useLayoutStore } from '@hooks/useMemory'
+import { useMemory } from '@hooks/useMemory'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import Utility from '@services/Utility'
 import ErrorBoundary from '@components/ErrorBoundary'

src/hooks/useLayoutStore.js

@@ -0,0 +1,99 @@
+import { create } from 'zustand'
+
+import Utility from '@services/Utility'
+import { useStorage } from './useStorage'
+
+/**
+ * @typedef {{
+ *  nestSubmissions: string | number,
+ *  help: {
+ *   open: boolean,
+ *   category: string,
+ *  },
+ *  motd: boolean,
+ *  donorPage: boolean,
+ *  search: boolean,
+ *  userProfile: boolean,
+ *  resetFilters: boolean,
+ *  feedback: boolean,
+ *  drawer: boolean,
+ *  advancedFilter: {
+ *    open: boolean,
+ *    category: import('@rm/types').AdvCategories,
+ *    id: string,
+ *    selectedIds: string[],
+ *  },
+ *  dialog: {
+ *    open: boolean,
+ *    category: string,
+ *    type: string,
+ *  },
+ *  gymBadge: {
+ *   open: boolean,
+ *   gymId: string,
+ *   badge: number,
+ *  },
+ *  slotSelection: string,
+ * }} UseLayoutStore
+ *
+ * @type {import("zustand").UseBoundStore<import("zustand").StoreApi<UseLayoutStore>>}
+ */
+export const useLayoutStore = create(() => ({
+  nestSubmissions: '0',
+  help: { open: false, category: '' },
+  motd: false,
+  donorPage: false,
+  search: false,
+  userProfile: false,
+  resetFilters: false,
+  feedback: false,
+  drawer: false,
+  slotSelection: '',
+  advancedFilter: {
+    open: false,
+    category: 'pokemon',
+    id: '',
+    selectedIds: [],
+  },
+  dialog: {
+    open: false,
+    category: '',
+    type: '',
+  },
+  gymBadge: {
+    open: false,
+    gymId: '',
+    badge: 0,
+  },
+}))
+
+export const toggleDialog = (open, category, type, filter) => (event) => {
+  Utility.analytics(
+    'Menu Toggle',
+    `Open: ${open}`,
+    `Category: ${category} Menu: ${type}`,
+  )
+  if (
+    event.type === 'keydown' &&
+    (event.key === 'Tab' || event.key === 'Shift')
+  ) {
+    return
+  }
+  useLayoutStore.setState({ dialog: { open, category, type } })
+  if (filter && type === 'filters') {
+    useStorage.setState((prev) => ({
+      filters: {
+        ...prev.filters,
+        [category]: { ...prev.filters[category], filter },
+      },
+    }))
+  }
+  if (filter && type === 'options') {
+    useStorage.setState((prev) => ({
+      userSettings: {
+        ...prev.userSettings,
+        [category]: filter,
+      },
+    }))
+  }
+}