fix: handle deleted tanks

packages/website/src/components/TankCard/index.tsx

@@ -1,4 +1,9 @@
-import { asset, TankType, type TankDefinition } from '@blitzkit/core';
+import {
+  asset,
+  fetchTankDefinitions,
+  TankType,
+  type TankDefinition,
+} from '@blitzkit/core';
 import { Flex, Text, type TextProps } from '@radix-ui/themes';
 import { uniq } from 'lodash-es';
 import { forwardRef, type ReactNode } from 'react';
@@ -16,6 +21,8 @@ type TankCardProps = TextProps & {
   noLink?: boolean;
 };
 
+const tankDefinitions = await fetchTankDefinitions();
+
 export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
   (
     {
@@ -49,10 +56,9 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
         onClick={() => {
           onSelect?.(tank);
           mutateTankopediaPersistent((draft) => {
-            draft.recentlyViewed = uniq([
+            draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
-              tank.id,
+              .filter((id) => id in tankDefinitions.tanks)
-              ...draft.recentlyViewed,
+              .slice(0, MAX_RECENTLY_VIEWED);
-            ]).slice(0, MAX_RECENTLY_VIEWED);
           });
         }}
         className="tank-search-card"

packages/website/src/components/TankSearch/components/RecentlyViewed.tsx

@@ -16,7 +16,9 @@ export function RecentlyViewed() {
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
   const filters = useStore($tankFilters);
   // non-reactive because it is a little weird that it updates instantly even before the page loads
-  const recentlyViewed = tankopediaPersistentStore.getState().recentlyViewed;
+  const recentlyViewed = tankopediaPersistentStore
+    .getState()
+    .recentlyViewed.filter((id) => id in tankDefinitions.tanks);
   const sort = useStore($tankopediaSort);
   const hasFilters = useMemo(
     () =>

packages/website/src/components/TankSearch/index.tsx

@@ -456,7 +456,9 @@ export const TankSearch = memo<TankSearchProps>(
                     draft.recentlyViewed = uniq([
                       ...tanksFiltered.map(({ id }) => id),
                       ...draft.recentlyViewed,
-                    ]).slice(0, MAX_RECENTLY_VIEWED);
+                    ])
+                      .filter((id) => id in tankDefinitions.tanks)
+                      .slice(0, MAX_RECENTLY_VIEWED);
                   });
                 }}
               >

packages/website/src/components/Tankopedia/CalloutsSection.tsx

@@ -1,4 +1,4 @@
-import { assertSecret } from '@blitzkit/core';
+import { assertSecret, fetchTankDefinitions } from '@blitzkit/core';
 import { MinusCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex } from '@radix-ui/themes';
 import { uniq } from 'lodash-es';
@@ -9,6 +9,8 @@ import { AesonPlug } from '../AesonPlug';
 import { ExperimentIcon } from '../ExperimentIcon';
 import { MAX_RECENTLY_VIEWED } from '../TankSearch/constants';
 
+const tankDefinitions = await fetchTankDefinitions();
+
 export function CalloutsSection() {
   const tank = Duel.use((state) => state.protagonist.tank);
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
@@ -17,10 +19,9 @@ export function CalloutsSection() {
 
   useEffect(() => {
     mutateTankopediaPersistent((draft) => {
-      draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed]).slice(
+      draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
-        0,
+        .filter((id) => id in tankDefinitions.tanks)
-        MAX_RECENTLY_VIEWED,
+        .slice(0, MAX_RECENTLY_VIEWED);
-      );
     });
   }, [tank]);