From c2714c4d6b5903c8d223335ec1deaaa63526b1f8 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 23 Sep 2026 17:01:34 -0500
Subject: [PATCH] tank search filters

---
 packages/i18n/src/unwrapper.ts                |  6 +--
 .../{GunIcon => GunTypeIcon}/index.tsx        |  2 +-
 .../components/TankSearchFilters/index.tsx    | 42 ++++++++++++-------
 packages/website/src/hooks/useUnwrapper.ts    |  9 ++++
 4 files changed, 39 insertions(+), 20 deletions(-)
 rename packages/website/src/components/{GunIcon => GunTypeIcon}/index.tsx (92%)
 create mode 100644 packages/website/src/hooks/useUnwrapper.ts

diff --git a/packages/i18n/src/unwrapper.ts b/packages/i18n/src/unwrapper.ts
index ace1277cd..3f155b352 100644
--- a/packages/i18n/src/unwrapper.ts
+++ b/packages/i18n/src/unwrapper.ts
@@ -1,7 +1,7 @@
-import { I18nString } from "../../core/src";
-import locales from "../locales.json";
+import locales from "@blitzkit/i18n/locales.json";
+import { I18nString } from "@blitzkit/protos";
 
-export function unwrapper(locale = locales.default) {
+export function unwrapper(locale: string) {
   return function (i18nString: I18nString) {
     if (locale in i18nString.locales) {
       return i18nString.locales[locale];
diff --git a/packages/website/src/components/GunIcon/index.tsx b/packages/website/src/components/GunTypeIcon/index.tsx
similarity index 92%
rename from packages/website/src/components/GunIcon/index.tsx
rename to packages/website/src/components/GunTypeIcon/index.tsx
index 5290b0ff7..9cdcecd75 100644
--- a/packages/website/src/components/GunIcon/index.tsx
+++ b/packages/website/src/components/GunTypeIcon/index.tsx
@@ -18,7 +18,7 @@ interface Props extends ComponentProps<"svg"> {
   type: CaseType<GunDefinition>;
 }
 
-export function GunIcon({ type, ...props }: Props) {
+export function GunTypeIcon({ type, ...props }: Props) {
   const Icon = typeIcons[type];
   return <Icon {...props} />;
 }
diff --git a/packages/website/src/components/TankSearchFilters/index.tsx b/packages/website/src/components/TankSearchFilters/index.tsx
index 1f8e2797c..073639520 100644
--- a/packages/website/src/components/TankSearchFilters/index.tsx
+++ b/packages/website/src/components/TankSearchFilters/index.tsx
@@ -1,4 +1,9 @@
-import { alias, gunTypeOrder, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import {
+  alias,
+  gunTypeOrder,
+  TIER_ROMAN_NUMERALS,
+  treeTypeOrder,
+} from "@blitzkit/core";
 import { tankClassOrder } from "@blitzkit/core/src/config/tankClassOrder";
 import { literals } from "@blitzkit/i18n";
 import locales from "@blitzkit/i18n/locales.json";
@@ -12,14 +17,15 @@ import {
 import { times } from "lodash-es";
 import { Fragment } from "react";
 import { api } from "../../api/dynamic";
-import { useLocale } from "../../hooks/useLocale";
 import { useStrings } from "../../hooks/useStrings";
+import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { App } from "../../stores/app";
 import { TankFilters } from "../../stores/tankFilters";
 import { Button } from "../Button";
 import { ClassIcon } from "../ClassIcon";
 import { DropdownMenu } from "../DropdownMenu";
 import { Flex } from "../Flex";
+import { GunTypeIcon } from "../GunTypeIcon";
 import { IconButton } from "../IconButton";
 import { MissingShellIcon } from "../MissingShellIcon";
 import { ResearchedIcon } from "../ResearchedIcon";
@@ -437,11 +443,10 @@ function GunTypeFilter() {
         <Button size="minor" color="gray" variant="surface">
           <Flex>
             {gunTypes.map((gunType) => {
-              const Icon = GUN_TYPE_ICONS[gunType];
-
               return (
-                <Icon
+                <GunTypeIcon
                   key={gunType}
+                  type={gunType}
                   style={{
                     margin: gunType === "regular" ? "0 -0.125em" : undefined,
                     opacity: 1,
@@ -457,9 +462,8 @@ function GunTypeFilter() {
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
-        {GUN_TYPES.map((gunType) => {
+        {gunTypeOrder.map((gunType) => {
           const selected = rawGunTypes.includes(gunType);
-          const Icon = GUN_TYPE_ICONS[gunType];
 
           return (
             <DropdownMenu.CheckboxItem
@@ -477,7 +481,10 @@ function GunTypeFilter() {
               checked={selected}
               key={gunType}
             >
-              <Icon style={{ width: "1.25em", height: "1.25em" }} />
+              <GunTypeIcon
+                type={gunType}
+                style={{ width: "1.25em", height: "1.25em" }}
+              />
 
               {strings.common.gun_types[gunType]}
             </DropdownMenu.CheckboxItem>
@@ -505,9 +512,9 @@ function GunTypeFilter() {
 }
 
 function TypeFilter() {
-  const { strings } = useLocale();
+  const strings = useStrings();
   const rawTypes = TankFilters.use((state) => state.types);
-  const types = rawTypes.length === 0 ? TANK_TYPES : rawTypes;
+  const types = rawTypes.length === 0 ? treeTypeOrder : rawTypes;
 
   return (
     <DropdownMenu.Root modal={false}>
@@ -535,7 +542,7 @@ function TypeFilter() {
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
-        {TANK_TYPES.map((tankType) => {
+        {treeTypeOrder.map((tankType) => {
           const selected = rawTypes.includes(tankType);
 
           return (
@@ -607,7 +614,7 @@ function IndividualShellFilter({
   index: number;
   premium?: boolean;
 }) {
-  const { strings } = useLocale();
+  const strings = useStrings();
   const shells = TankFilters.use((state) => state.shells);
 
   return (
@@ -709,7 +716,7 @@ function IndividualShellFilter({
 
 function OwnershipFilter() {
   const wargaming = App.use((state) => state.logins.wargaming);
-  const { strings } = useLocale();
+  const strings = useStrings();
 
   return wargaming ? (
     <OwnershipFilterInternal />
@@ -816,7 +823,8 @@ function TestFilter() {
 }
 
 function ConsumablesFilter() {
-  const { unwrap, strings } = useLocale();
+  const strings = useStrings();
+  const unwrap = useUnwrapper();
   const rawConsumables = TankFilters.use((state) => state.consumables);
   const consumables =
     rawConsumables.length === 0 ? consumablesArray : rawConsumables;
@@ -910,7 +918,8 @@ function ConsumablesFilter() {
 }
 
 function ProvisionsFilter() {
-  const { unwrap, strings } = useLocale();
+  const strings = useStrings();
+  const unwrap = useUnwrapper();
   const rawProvisions = TankFilters.use((state) => state.provisions);
   const provisions =
     rawProvisions.length === 0 ? provisionsArray : rawProvisions;
@@ -1004,7 +1013,8 @@ function ProvisionsFilter() {
 }
 
 function GameModeAbilitiesFilter() {
-  const { unwrap, strings } = useLocale();
+  const strings = useStrings();
+  const unwrap = useUnwrapper();
   const rawAbilities = TankFilters.use((state) => state.abilities);
   const rawPowers = TankFilters.use((state) => state.powers);
 
diff --git a/packages/website/src/hooks/useUnwrapper.ts b/packages/website/src/hooks/useUnwrapper.ts
new file mode 100644
index 000000000..298138977
--- /dev/null
+++ b/packages/website/src/hooks/useUnwrapper.ts
@@ -0,0 +1,9 @@
+import { unwrapper } from "@blitzkit/i18n";
+import { useLocale } from "./useLocale";
+
+export function useUnwrapper() {
+  const locale = useLocale();
+  const unwrap = unwrapper(locale);
+
+  return unwrap;
+}