feat: transition to next safe zustand

src/app/tools/tankopedia/components/FilterControl.tsx

@@ -15,8 +15,9 @@ import { gameDefinitions } from '../../../../core/blitzkit/gameDefinitions';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import {
-  mutateTankFilters,
   useTankFilters,
+  useTankFiltersContext,
+  useTankFiltersMutation,
 } from '../../../../stores/tankFilters';
 
 interface FilterControlProps {
@@ -26,6 +27,8 @@ interface FilterControlProps {
 export function FilterControl({ compact }: FilterControlProps) {
   const awaitedGameDefinitions = use(gameDefinitions);
   const filters = useTankFilters();
+  const mutateTankFilters = useTankFiltersMutation();
+  const tankFiltersContext = useTankFiltersContext();
 
   return (
     <Flex height="fit-content" gap="2" align="start" justify="center">
@@ -321,9 +324,12 @@ export function FilterControl({ compact }: FilterControlProps) {
       <Box>
         <IconButton
           color="red"
-          onClick={() =>
-            useTankFilters.setState(useTankFilters.getInitialState(), true)
-          }
+          onClick={() => {
+            tankFiltersContext.setState(
+              tankFiltersContext.getInitialState(),
+              true,
+            );
+          }}
         >
           <ReloadIcon />
         </IconButton>

src/app/tools/tankopedia/components/TierFilter.tsx

@@ -4,8 +4,8 @@ import { memo } from 'react';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import {
-  mutateTankFilters,
   useTankFilters,
+  useTankFiltersMutation,
 } from '../../../../stores/tankFilters';
 import { useTankopediaSort } from '../../../../stores/tankopediaSort';
 
@@ -13,6 +13,7 @@ export const TierFilter = memo(() => {
   const tierFilter = useTankFilters((state) => state.tiers);
   const sort = useTankopediaSort();
   const search = useTankFilters((state) => state.search);
+  const mutateTankFilters = useTankFiltersMutation();
 
   if (sort.by !== 'meta.none' || search) return null;
 
@@ -25,7 +26,7 @@ export const TierFilter = memo(() => {
       >
         {times(10, (index) => {
           const tier = (10 - index) as Tier;
-          const selected = tierFilter === tier;
+          const selected = tierFilter.includes(tier);
 
           return (
             <IconButton
@@ -36,7 +37,11 @@ export const TierFilter = memo(() => {
               highContrast
               onClick={() =>
                 mutateTankFilters((draft) => {
-                  draft.tiers = tier;
+                  if (draft.tiers?.includes(tier)) {
+                    draft.tiers = draft.tiers?.filter((t) => t !== tier);
+                  } else {
+                    draft.tiers = [...(draft.tiers ?? []), tier];
+                  }
                 })
               }
             >