feat: simplify ownership and test filters

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

@@ -5,11 +5,7 @@ import {
   TankType,
   TIER_ROMAN_NUMERALS,
 } from "@blitzkit/core";
-import {
+import { LockClosedIcon, LockOpen2Icon } from "@radix-ui/react-icons";
-  ComponentBooleanIcon,
-  LockClosedIcon,
-  LockOpen2Icon,
-} from "@radix-ui/react-icons";
 import {
   Box,
   Flex,
@@ -71,7 +67,9 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
             <img
               style={{ width: "1em", height: "1em" }}
               src={asset(
-                `icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`
+                `icons/shells/${shellTypeIcons[shells[index]]}${
+                  premium ? "_premium" : ""
+                }.webp`
               )}
             />
           )}
@@ -107,7 +105,9 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
                 >
                   <img
                     src={asset(
-                      `icons/shells/${shellTypeIcons[shellType]}${premium ? "_premium" : ""}.webp`
+                      `icons/shells/${shellTypeIcons[shellType]}${
+                        premium ? "_premium" : ""
+                      }.webp`
                     )}
                     style={{ width: "1em", height: "1em" }}
                   />
@@ -135,29 +135,13 @@ function OwnershipFilter(props: FlexProps) {
       <IconButton
         size={size}
         disabled={!wargaming}
-        variant={tankFilters.ownership === "all" ? "solid" : "soft"}
+        variant={tankFilters.showOwned ? "solid" : "soft"}
         radius="none"
-        color={tankFilters.ownership === "all" ? undefined : "gray"}
+        color={tankFilters.showOwned ? undefined : "gray"}
         highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
-            draft.ownership = "all";
+            draft.showOwned = !draft.showOwned;
-          });
-        }}
-      >
-        <ComponentBooleanIcon />
-      </IconButton>
-
-      <IconButton
-        size={size}
-        disabled={!wargaming}
-        variant={tankFilters.ownership === "owned" ? "solid" : "soft"}
-        radius="none"
-        color={tankFilters.ownership === "owned" ? undefined : "gray"}
-        highContrast
-        onClick={() => {
-          TankFilters.mutate((draft) => {
-            draft.ownership = "owned";
           });
         }}
       >
@@ -167,13 +151,13 @@ function OwnershipFilter(props: FlexProps) {
       <IconButton
         size={size}
         disabled={!wargaming}
-        variant={tankFilters.ownership === "unowned" ? "solid" : "soft"}
+        variant={tankFilters.showUnowned ? "solid" : "soft"}
         radius="none"
-        color={tankFilters.ownership === "unowned" ? undefined : "gray"}
+        color={tankFilters.showUnowned ? undefined : "gray"}
         highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
-            draft.ownership = "unowned";
+            draft.showUnowned = !draft.showUnowned;
           });
         }}
       >
@@ -579,27 +563,13 @@ export function FilterControl() {
         >
           <IconButton
             size={size}
-            variant={tankFilters.testing === "include" ? "solid" : "soft"}
+            variant={tankFilters.showNonTesting ? "solid" : "soft"}
             radius="none"
-            color={tankFilters.testing === "include" ? undefined : "gray"}
+            color={tankFilters.showNonTesting ? undefined : "gray"}
             highContrast
             onClick={() => {
               TankFilters.mutate((draft) => {
-                draft.testing = "include";
+                draft.showNonTesting = !draft.showNonTesting;
-              });
-            }}
-          >
-            <ComponentBooleanIcon />
-          </IconButton>
-          <IconButton
-            size={size}
-            variant={tankFilters.testing === "exclude" ? "solid" : "soft"}
-            radius="none"
-            color={tankFilters.testing === "exclude" ? undefined : "gray"}
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                draft.testing = "exclude";
               });
             }}
           >
@@ -607,15 +577,16 @@ export function FilterControl() {
               style={{ width: "1em", height: "1em", color: "currentColor" }}
             />
           </IconButton>
+
           <IconButton
             size={size}
-            variant={tankFilters.testing === "only" ? "solid" : "soft"}
+            variant={tankFilters.showTesting ? "solid" : "soft"}
             radius="none"
-            color={tankFilters.testing === "only" ? undefined : "gray"}
+            color={tankFilters.showTesting ? undefined : "gray"}
             highContrast
             onClick={() => {
               TankFilters.mutate((draft) => {
-                draft.testing = "only";
+                draft.showTesting = !draft.showTesting;
               });
             }}
           >

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

@@ -487,7 +487,7 @@ export const TankSearch = memo<TankSearchProps>(
           )}
         </Flex>
 
-        {tankFilters.testing === "only" && (
+        {tankFilters.showTesting && !tankFilters.showNonTesting && (
           <Flex justify="center" mt="4">
             <Callout.Root color="amber">
               <Callout.Icon>

packages/website/src/core/blitzkit/filterTank.ts

@@ -10,16 +10,14 @@ export async function filterTank(
   owned: number[] = []
 ) {
   return (
-    (filters.ownership === "all" ||
+    ((filters.showOwned && owned.includes(tank.id)) ||
-      (filters.ownership === "owned" && owned.includes(tank.id)) ||
+      (filters.showUnowned && !owned.includes(tank.id))) &&
-      (filters.ownership === "unowned" && !owned.includes(tank.id))) &&
     (filters.tiers.length === 0 || filters.tiers.includes(tank.tier)) &&
     (filters.nations.length === 0 || filters.nations.includes(tank.nation)) &&
     (filters.classes.length === 0 || filters.classes.includes(tank.class)) &&
     (filters.types.length === 0 || filters.types.includes(tank.type)) &&
-    (filters.testing === "include" ||
+    ((filters.showTesting && tank.testing) ||
-      (filters.testing === "only" && tank.testing) ||
+      (filters.showNonTesting && !tank.testing)) &&
-      (filters.testing === "exclude" && !tank.testing)) &&
     (filters.gunType.length === 0 ||
       (filters.gunType.includes("regular") &&
         tank.turrets.some((turret) =>

packages/website/src/pages/[...locale]/playlist/_index.tsx

@@ -17,9 +17,7 @@ export function Page({
 }: Props & MaybeSkeletonComponentProps) {
   const generated = Playlist.use((state) => state.list !== undefined);
 
-  if (App.state.logins.wargaming && TankFilters.state.ownership !== "owned") {
+  if (App.state.logins.wargaming) TankFilters.state.showUnowned = false;
-    TankFilters.state.ownership = "owned";
-  }
 
   return (
     <LocaleProvider locale={locale}>

packages/website/src/stores/tankFilters.ts

@@ -17,12 +17,15 @@ export interface TankFilters {
   nations: string[];
   classes: TankClass[];
   types: TankType[];
-  testing: "include" | "exclude" | "only";
   search: string | null;
   searching: boolean;
   gunType: CaseType<GunDefinition>[];
   shells: [ShellType | null, ShellType | null, ShellType | null];
-  ownership: "all" | "owned" | "unowned";
+
+  showTesting: boolean;
+  showNonTesting: boolean;
+  showOwned: boolean;
+  showUnowned: boolean;
 }
 
 export const TankFilters = new Varuna<TankFilters>({
@@ -30,10 +33,13 @@ export const TankFilters = new Varuna<TankFilters>({
   nations: [],
   classes: [],
   types: [],
-  testing: "include",
   search: null,
   searching: false,
   gunType: [],
   shells: [null, null, null],
-  ownership: "all",
+
+  showTesting: true,
+  showNonTesting: true,
+  showOwned: true,
+  showUnowned: true,
 });