fix: distinguish normal/unset form when they both spawn

Author: Mygod

src/components/Menu.jsx

@@ -14,6 +14,7 @@ import { useLayoutStore } from '@store/useLayoutStore'
 import { useFilter } from '@hooks/useFilter'
 import { Footer } from '@components/dialogs/Footer'
 import { applyToAll } from '@utils/applyToAll'
+import { getAmbiguousForms } from '@utils/getAmbiguousForms'
 import { useGetAvailable } from '@hooks/useGetAvailable'
 import { applyToAllWebhooks, useWebhookStore } from '@store/useWebhookStore'
 import { useAnalytics } from '@hooks/useAnalytics'
@@ -156,11 +157,26 @@ export function Menu({
 }
 
 function Results({ category, webhookCategory, categories, children }) {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const filteredArr = useFilter(category, webhookCategory, categories)
+  const available = useMemory((s) => s.available[category])
+
+  // available keeps the labels stable while the anomaly lasts, filteredArr
+  // covers the menu options that render more than what's currently available
+  const ambiguousForms = React.useMemo(
+    () => getAmbiguousForms([...(available || []), ...filteredArr]),
+    [available, filteredArr, i18n.language],
+  )
+
+  // not via VirtualGrid's context: that one gets spread onto the Grid2 items
+  const itemContent = React.useCallback(
+    (index, key) => children(index, key, ambiguousForms),
+    [children, ambiguousForms],
+  )
+
   return filteredArr.length ? (
     <VirtualGrid data={filteredArr} xs={4} md={2}>
-      {children}
+      {itemContent}
     </VirtualGrid>
   ) : (
     <Box className="flex-center" flex="1 1 auto" whiteSpace="pre-line">

src/components/filters/Advanced.jsx

@@ -26,7 +26,7 @@ import { GenderListItem } from './Gender'
 import { QuestConditionSelector } from './QuestConditions'
 
 export function AdvancedFilter() {
-  const { category, id, selectedIds, open } = useLayoutStore(
+  const { category, id, selectedIds, open, showDefaultForms } = useLayoutStore(
     (s) => s.advancedFilter,
   )
   const { t } = useTranslation()
@@ -134,7 +134,7 @@ export function AdvancedFilter() {
             : t('set_size')
         } - ${tId(id, {
           omitFormSuffix: true,
-          showDefaultForms: id.startsWith('a'),
+          showDefaultForms: id.startsWith('a') || showDefaultForms,
         })}`}
         action={() => toggleClose(false)}
       />

src/components/filters/FilterMenu.jsx

@@ -38,7 +38,14 @@ export function FilterMenu() {
         names={[category]}
       />
       <Menu category={category} extraButtons={EXTRA_BUTTONS}>
-        {(_, key) => <StandardItem id={key} category={category} caption />}
+        {(_, key, ambiguousForms) => (
+          <StandardItem
+            id={key}
+            category={category}
+            ambiguousForms={ambiguousForms}
+            caption
+          />
+        )}
       </Menu>
     </DialogWrapper>
   )

src/components/virtual/SelectorItem.jsx

@@ -6,6 +6,7 @@ import Tooltip from '@mui/material/Tooltip'
 import Box from '@mui/material/Box'
 
 import { useTranslateById } from '@hooks/useTranslateById'
+import { hasAmbiguousForm } from '@utils/getAmbiguousForms'
 import { useMemory } from '@store/useMemory'
 import { ColoredTile } from '@components/virtual/ColoredTile'
 import { ToggleTypography } from '@components/ToggleTypography'
@@ -19,6 +20,7 @@ import { useTranslation } from 'react-i18next'
  *  id: string,
  *  category: T,
  *  caption?: boolean
+ *  ambiguousForms?: Set<string>
  * }} BaseProps
  */
 
@@ -31,6 +33,7 @@ import { useTranslation } from 'react-i18next'
  *  hasAll?: boolean
  *  easyMode?: boolean
  *  caption?: boolean
+ *  ambiguousForms?: Set<string>
  * }} FullProps
  */
 
@@ -43,13 +46,15 @@ export function SelectorItem({
   onClick,
   hasAll,
   easyMode,
+  ambiguousForms,
 }) {
   const { t } = useTranslateById({
     alt: true,
     newLine: true,
     quest: category === 'pokestops',
     omitFormSuffix: true,
-    showDefaultForms: id.startsWith('a'),
+    showDefaultForms:
+      id.startsWith('a') || hasAmbiguousForm(ambiguousForms, id),
   })
   const title = t(id)
   const url = useMemory((s) => s.Icons.getIconById(id))

src/components/virtual/StandardItem.jsx

@@ -4,11 +4,12 @@ import * as React from 'react'
 import { useLayoutStore } from '@store/useLayoutStore'
 import { useDeepStore, useStorage } from '@store/useStorage'
 import { checkIfHasAll } from '@utils/hasAll'
+import { hasAmbiguousForm } from '@utils/getAmbiguousForms'
 
 import { SelectorItem } from './SelectorItem'
 
 /** @param {import('./SelectorItem').BaseProps<keyof import('@rm/types').Available>} props */
-export function StandardItem({ id, category, ...props }) {
+export function StandardItem({ id, category, ambiguousForms, ...props }) {
   const [filter, setFilter] = useDeepStore(`filters.${category}.filter.${id}`)
   const hasAll = checkIfHasAll(category, id)
   const easyMode = useStorage((s) => !!s.filters?.[category]?.easyMode)
@@ -21,6 +22,7 @@ export function StandardItem({ id, category, ...props }) {
       setFilter={setFilter}
       hasAll={hasAll}
       easyMode={easyMode}
+      ambiguousForms={ambiguousForms}
       onClick={() =>
         useLayoutStore.setState(
           id.startsWith('t')
@@ -31,6 +33,7 @@ export function StandardItem({ id, category, ...props }) {
                   id,
                   category,
                   selectedIds: [],
+                  showDefaultForms: hasAmbiguousForm(ambiguousForms, id),
                 },
               },
         )

src/features/drawer/components/SelectorList.jsx

@@ -21,6 +21,7 @@ import { useMemory } from '@store/useMemory'
 import { useLayoutStore } from '@store/useLayoutStore'
 import { useDeepStore, useStorage } from '@store/useStorage'
 import { useGetAvailable } from '@hooks/useGetAvailable'
+import { getAmbiguousForms, hasAmbiguousForm } from '@utils/getAmbiguousForms'
 import { VirtualGrid } from '@components/virtual/VirtualGrid'
 import { TabPanel } from '@components/TabPanel'
 import { BoolToggle } from '@components/inputs/BoolToggle'
@@ -81,53 +82,66 @@ function SelectorList({
   const search = useStorage((s) => s.searches[searchKey] || '')
   const disableGutters = !['pokemon', 'tappables'].includes(category)
 
-  const translated = React.useMemo(
-    () =>
-      (onlyShowAvailable ? available : Object.keys(allFilters))
-        .filter((key) => {
-          if (key === 'global') return false
-          switch (subCategory) {
-            case 'raids':
-              return key.startsWith('e')
-            case 'lures':
-              return key.startsWith('l')
-            case 'invasions':
-              return key.startsWith('i')
-            case 'quests':
-              return (
-                key.startsWith('q') ||
-                key.startsWith('m') ||
-                key.startsWith('x') ||
-                key.startsWith('c') ||
-                key.startsWith('d') ||
-                key.startsWith('p') ||
-                key.startsWith('u')
-              )
-            case 'showcase':
-              return (
-                key.startsWith('f') ||
-                key.startsWith('h') ||
-                key.startsWith('y') ||
-                key.startsWith('b')
-              )
-            case 'rocketPokemon':
-              return key.startsWith('a')
-            case 'pokemon':
-              return Number.isInteger(Number(key.charAt(0)))
+  const { translated, ambiguousForms } = React.useMemo(() => {
+    const ids = (
+      onlyShowAvailable ? available : Object.keys(allFilters)
+    ).filter((key) => {
+      if (key === 'global') return false
+      switch (subCategory) {
+        case 'raids':
+          return key.startsWith('e')
+        case 'lures':
+          return key.startsWith('l')
+        case 'invasions':
+          return key.startsWith('i')
+        case 'quests':
+          return (
+            key.startsWith('q') ||
+            key.startsWith('m') ||
+            key.startsWith('x') ||
+            key.startsWith('c') ||
+            key.startsWith('d') ||
+            key.startsWith('p') ||
+            key.startsWith('u')
+          )
+        case 'showcase':
+          return (
+            key.startsWith('f') ||
+            key.startsWith('h') ||
+            key.startsWith('y') ||
+            key.startsWith('b')
+          )
+        case 'rocketPokemon':
+          return key.startsWith('a')
+        case 'pokemon':
+          return Number.isInteger(Number(key.charAt(0)))
+        default:
+          switch (category) {
+            case 'gyms':
+              return key.startsWith('t')
+            case 'tappables':
+              return key.startsWith('q') && key !== 'q0'
             default:
-              switch (category) {
-                case 'gyms':
-                  return key.startsWith('t')
-                case 'tappables':
-                  return key.startsWith('q') && key !== 'q0'
-                default:
-                  return Number.isInteger(Number(key.charAt(0)))
-              }
+              return Number.isInteger(Number(key.charAt(0)))
           }
-        })
-        .map((id) => ({ id, name: tId(id).toLowerCase() })),
-    [onlyShowAvailable ? available : allFilters, tId, category, subCategory],
-  )
+      }
+    })
+    // two identical looking entries (e.g. Litleo Unset + Normal) must show
+    // their form to be told apart, but only for as long as both are around
+    const ambiguous = getAmbiguousForms(ids)
+    return {
+      ambiguousForms: ambiguous,
+      translated: ids.map((id) => ({
+        id,
+        name: tId(id, {
+          quest: subCategory === 'pokemon',
+          omitFormSuffix: true,
+          showDefaultForms:
+            subCategory === 'rocketPokemon' || hasAmbiguousForm(ambiguous, id),
+        }).toLowerCase(),
+      })),
+    }
+  }, [onlyShowAvailable ? available : allFilters, tId, category, subCategory])
 
   const items = React.useMemo(() => {
     const lowerCase = search.toLowerCase()
@@ -249,7 +263,13 @@ function SelectorList({
           restoreStateFrom={restoreStateFrom}
           stateChanged={handleStateChanged}
         >
-          {(_, key) => <StandardItem id={key} category={category} />}
+          {(_, key) => (
+            <StandardItem
+              id={key}
+              category={category}
+              ambiguousForms={ambiguousForms}
+            />
+          )}
         </VirtualGrid>
       </Box>
     </List>

src/features/webhooks/Manage.jsx

@@ -149,7 +149,14 @@ export function Manage() {
         webhookCategory={category}
         extraButtons={buttons}
       >
-        {(_, key) => <WebhookItem id={key} category={category} caption />}
+        {(_, key, ambiguousForms) => (
+          <WebhookItem
+            id={key}
+            category={category}
+            ambiguousForms={ambiguousForms}
+            caption
+          />
+        )}
       </Menu>
     </>
   ) : (

src/hooks/useGetAvailable.js

@@ -24,18 +24,22 @@ export function useGetAvailable(category) {
   )
 
   useEffect(() => {
-    if (data?.[`available${capitalized}`]) {
-      useMemory.setState((prev) => ({
-        available: {
-          ...prev.available,
-          [category]: data[`available${capitalized}`].some(
-            (key, i) => key !== prev.available[category][i],
-          )
-            ? data[`available${capitalized}`]
-            : prev.available[category],
-          // if it's the same, don't cause re-renders
-        },
-      }))
+    const next = data?.[`available${capitalized}`]
+    if (next) {
+      useMemory.setState((prev) => {
+        const previous = prev.available[category] || []
+        return {
+          available: {
+            ...prev.available,
+            // if it's the same, don't cause re-renders
+            [category]:
+              next.length !== previous.length ||
+              next.some((key, i) => key !== previous[i])
+                ? next
+                : previous,
+          },
+        }
+      })
     }
   }, [data])
 

src/store/useLayoutStore.js

@@ -28,6 +28,7 @@ import { useStorage } from './useStorage'
  *    category: import('@rm/types').AdvCategories | '',
  *    id: string,
  *    selectedIds: string[],
+ *    showDefaultForms?: boolean,
  *  },
  *  dialog: {
  *    open: boolean,
@@ -64,6 +65,7 @@ export const useLayoutStore = create(() => ({
     category: '',
     id: '',
     selectedIds: [],
+    showDefaultForms: false,
   },
   dialog: {
     open: false,

src/utils/getAmbiguousForms.js

@@ -0,0 +1,53 @@
+// @ts-check
+import { getFormDisplay } from './getFormDisplay'
+
+const WILD_KEY = /^(\d+)-(\d+)$/
+
+/**
+ * Finds the Pokemon that would render multiple visually identical entries in a
+ * list, since default form labels are hidden: e.g. when the scanner reports
+ * both `667-0` (Unset) and `667-3036` (Normal), both collapse to "Litleo".
+ *
+ * Two of them spawning at once is an anomaly, so this is evaluated against the
+ * exact list being rendered - once only one is left, the labels collapse again.
+ *
+ * @param {string[]} ids the filter keys that are about to be rendered
+ * @returns {Set<string>} the Pokemon ids whose form labels must stay visible
+ */
+export function getAmbiguousForms(ids) {
+  /** @type {Map<string, Set<string>>} */
+  const labels = new Map()
+  /** @type {Set<string>} */
+  const ambiguous = new Set()
+  // availability lists are not necessarily unique: Nest.getAvailable() maps
+  // both a form 0 row and an explicit default form row to the same key, and a
+  // key repeated for one form is not two entries to tell apart
+  new Set(ids).forEach((id) => {
+    const match = WILD_KEY.exec(id)
+    if (!match) return
+    const [, pokemonId, form] = match
+    const label = getFormDisplay(pokemonId, form, undefined, {
+      appendFormSuffix: false,
+    })
+    const seen = labels.get(pokemonId)
+    if (!seen) {
+      labels.set(pokemonId, new Set([label]))
+    } else if (seen.has(label)) {
+      ambiguous.add(pokemonId)
+    } else {
+      seen.add(label)
+    }
+  })
+  return ambiguous
+}
+
+/**
+ * @param {Set<string> | undefined} ambiguous result of {@link getAmbiguousForms}
+ * @param {string} id
+ * @returns {boolean}
+ */
+export function hasAmbiguousForm(ambiguous, id) {
+  if (!ambiguous?.size) return false
+  const match = WILD_KEY.exec(id)
+  return !!match && ambiguous.has(match[1])
+}