fix: prevent users from loading too many s2 cells

packages/locales/lib/human/en.json

@@ -620,6 +620,7 @@
   "rocket_pokemon": "Rocket Pokémon",
   "decoy": "Decoy",
   "s2_cell_limit_0": "You attempted to generate more than 20,000 cells ({{variable_0}})",
+  "s2_cell_zoom_limit": "Some cells are too small to be displayed at this zoom level",
   "show_all_pvp_ranks": "Show All PVP Ranks",
   "enable_pokemon_popup_coords": "Show Pokémon Coords",
   "enable_gym_popup_coords": "Show Gym Coords",
@@ -785,4 +786,4 @@
   "locale_instructions_8": "Wait for the pull request to be reviewed and merged",
   "enter_translation": "Enter Translation",
   "individual_filters": "Partially Filtered"
-}
+}

src/features/drawer/pokemon/ModeSelector.jsx

@@ -11,7 +11,7 @@ import { FCSelectListItem } from '@components/inputs/FCSelect'
 export function PokemonModeSelector() {
   const filterMode = useStorage((s) => s.getPokemonFilterMode())
   const { t } = useTranslation()
-  const ui = useMemory((s) => s.ui.pokemon)
+  const isLegacyEnabled = useMemory((s) => !!s.ui.pokemon?.legacy)
   const selectRef = React.useRef(/** @type {HTMLDivElement | null} */ (null))
 
   return (
@@ -35,7 +35,7 @@ export function PokemonModeSelector() {
         }
       }}
     >
-      {['basic', 'intermediate', ...(ui.legacy ? ['expert'] : [])].map(
+      {['basic', 'intermediate', ...(isLegacyEnabled ? ['expert'] : [])].map(
         (tier) => (
           <MenuItem
             key={tier}

src/features/s2cell/GenerateCells.jsx

@@ -23,13 +23,15 @@ export function GenerateCells() {
       : s.userSettings.s2cells.lightMapBorder,
   )
   /** @type {number[]} */
-  const filter = useStorage((s) => s.filters.s2cells.cells)
+  const filter = useStorage((s) => s.filters?.s2cells?.cells)
   const location = useStorage((s) => s.location)
   const zoom = useStorage((s) => s.zoom)
 
   const cells = React.useMemo(() => {
     const bounds = getQueryArgs()
-    return filter.flatMap((level) => {
+    return filter?.flatMap((level) => {
+      if (level > zoom) return []
+
       const regionCoverer = new S2RegionCoverer()
       const region = S2LatLngRect.fromLatLng(
         S2LatLng.fromDegrees(bounds.minLat, bounds.minLon),
@@ -55,7 +57,7 @@ export function GenerateCells() {
     })
   }, [filter, location, zoom, color])
 
-  return (
+  return filter ? (
     <>
       {cells
         .filter((_, i) => i < 20_000)
@@ -73,6 +75,11 @@ export function GenerateCells() {
           },
         ]}
       />
+      <Notification
+        open={filter.some((x) => x > zoom)}
+        severity="warning"
+        title="s2_cell_zoom_limit"
+      />
     </>
-  )
+  ) : null
 }