compile tank search page

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

@@ -1,7 +1,7 @@
 import { isEqual } from "lodash-es";
 import { useMemo } from "react";
 import { api } from "../../api/dynamic";
-import { useLocale } from "../../hooks/useLocale";
+import { useStrings } from "../../hooks/useStrings";
 import { TankFilters } from "../../stores/tankFilters";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankSort } from "../../stores/tankopediaSort";
@@ -29,7 +29,8 @@ export function RecentlyViewedTanks() {
       }),
     [filters],
   );
-  const { strings } = useLocale();
+
+  const strings = useStrings();
   const by = TankSort.use((state) => state.by);
 
   if (recentlyViewed.length === 0 || by !== "meta.none" || hasFilters) {

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

@@ -1,11 +1,13 @@
-import { alias, TankType, type TankDefinition } from "@blitzkit/core";
+import { alias } from "@blitzkit/core";
+import { TankType, type TankDefinition } from "@blitzkit/protos";
 import { uniq } from "lodash-es";
 import { type ReactNode } from "react";
 import { api } from "../../api/dynamic";
 import { useLocale } from "../../hooks/useLocale";
+import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
-import { classIcons } from "../ClassIcon";
+import { ClassIcon } from "../ClassIcon";
 import { Flex } from "../Flex";
 import { LinkI18nWrapper } from "../LinkI18nWrapper";
 import { TankCardSkeleton } from "../TankCardSkeleton";
@@ -28,7 +30,8 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
     return <TankCardSkeleton />;
   }
 
-  const { unwrap, locale } = useLocale();
+  const unwrap = useUnwrapper();
+  const locale = useLocale();
 
   const provideLink = !props.noLink && props.onTankSelect === undefined;
   const name = unwrap(props.tank.name!);
@@ -41,8 +44,6 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
         : "gray";
   const lowContrast = props.tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
 
-  const Icon = classIcons[props.tank.class];
-
   const content = (
     <Flex
       className={styles.wrapper}
@@ -75,7 +76,7 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
       </Flex>
 
       <Text className={styles.name} color={color} lowContrast={lowContrast}>
-        <Icon className={styles.icon} />
+        <ClassIcon class={props.tank.class} className={styles.icon} />
         <span className={styles.text}>{name}</span>
       </Text>
 

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

@@ -1,5 +1,5 @@
 import { CaretDownIcon } from "@radix-ui/react-icons";
-import { useLocale } from "../../../hooks/useLocale";
+import { useStrings } from "../../../hooks/useStrings";
 import type {
   TankopediaSortBy,
   TankopediaSortDirection,
@@ -17,7 +17,7 @@ interface ItemProps {
 }
 
 function Item({ by }: ItemProps) {
-  const { strings } = useLocale();
+  const strings = useStrings();
   const _by = TankSort.use((state) => state.by);
 
   return (
@@ -36,7 +36,7 @@ function Item({ by }: ItemProps) {
 
 export function Sort() {
   const direction = TankSort.use((state) => state.direction);
-  const { strings } = useLocale();
+  const strings = useStrings();
 
   return (
     <DropdownMenu.Root>

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

@@ -1,12 +1,12 @@
-import type { TankDefinition } from "@blitzkit/core";
+import type { TankDefinition } from "@blitzkit/protos";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import {
-    type KeyboardEventHandler,
-    useCallback,
-    useEffect,
-    useRef,
+  type KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
 } from "react";
-import { useLocale } from "../../hooks/useLocale";
+import { useStrings } from "../../hooks/useStrings";
 import { TankFilters } from "../../stores/tankFilters";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Flex } from "../Flex";
@@ -23,7 +23,7 @@ export function TankSearchBar({
   skeleton,
   onSelect,
 }: SearchBarProps) {
-  const { strings } = useLocale();
+  const strings = useStrings();
 
   const search = TankFilters.use((state) => state.search);