feat: combine tabs

packages/i18n/strings/en.json

@@ -762,6 +762,8 @@
         "sorting_by": "Sorting by {name}",
         "clear": "Clear",
         "tier": "Tier {tier}",
+        "passive": "{name} (Passive)",
+        "active": "{name} (Active)",
 
         "no_tanks_found": {
           "body": "No tanks found.",

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

@@ -26,7 +26,7 @@ import {
   type FlexProps,
 } from "@radix-ui/themes";
 import { times } from "lodash-es";
-import { Fragment, useState, type ComponentProps, type ReactNode } from "react";
+import { Fragment, type ComponentProps, type ReactNode } from "react";
 import { awaitableConsumableDefinitions } from "../../../core/awaitables/consumableDefinitions";
 import { awaitableGameDefinitions } from "../../../core/awaitables/gameDefinitions";
 import { awaitableProvisionDefinitions } from "../../../core/awaitables/provisionDefinitions";
@@ -160,13 +160,16 @@ export function FilterControl() {
       <ClassFilter />
       <TypeFilter />
       <NationsFilter />
+
       <OwnershipFilter />
       <TestFilter />
+
       <GunTypeFilter />
       <ShellFilter />
       <ConsumablesFilter />
       <ProvisionsFilter />
       <GameModeAbilitiesFilter />
+
       <ResetButton />
     </Flex>
   );
@@ -1028,66 +1031,78 @@ function ProvisionsFilter() {
 }
 
 function GameModeAbilitiesFilter() {
-  const { unwrap } = useLocale();
+  const { unwrap, strings } = useLocale();
   const rawAbilities = TankFilters.use((state) => state.abilities);
   const rawPowers = TankFilters.use((state) => state.powers);
-  const [activeTab, setActiveTab] = useState<"active" | "passive">("active");
 
-  const totalSelected = rawAbilities.length + rawPowers.length;
+  const abilities =
+    rawAbilities.length === 0 && rawPowers.length === 0
+      ? Array.from(allGameModeConsumables.values())
+      : rawAbilities;
+  const powers =
+    rawPowers.length === 0 && rawAbilities.length === 0
+      ? Array.from(allGameModeProvisions.values())
+      : rawPowers;
+
+  const icons = [
+    ...abilities.map((ability) => `icons/consumables/${ability}.webp`),
+    ...powers.map((power) => `icons/provisions/${power}.webp`),
+  ];
 
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
         <Button color="gray" variant="surface">
-          Game Mode Abilities
+          <Flex>
-          {totalSelected > 0 && (
+            {icons.slice(0, MAX_ICONS).map((icon, index) => (
+              <img
+                key={icon}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                  objectFit: "contain",
+                }}
+                src={asset(icon)}
+              />
+            ))}
+
+            {icons.length > MAX_ICONS && (
               <Text size="1" ml="1">
-              ({totalSelected})
+                {literals(strings.common.units.plus, {
+                  value: icons.length - MAX_ICONS,
+                })}
               </Text>
             )}
+          </Flex>
         </Button>
       </DropdownMenu.Trigger>
 
-      <DropdownMenu.Content style={{ minWidth: "249px", maxWidth: "249px" }}>
+      <DropdownMenu.Content>
-        {/* Tab buttons */}
+        {gameModeRoles.map(({ gameModeId, consumables, provisions }) => {
-        <Flex gap="2" p="2" mb="2" width="100%">
-          <Button
-            size="1"
-            variant={activeTab === "active" ? "solid" : "soft"}
-            color={activeTab === "active" ? "violet" : "gray"}
-            onClick={() => setActiveTab("active")}
-            style={{ flex: 1, minWidth: 0 }}
-          >
-            Active
-          </Button>
-          <Button
-            size="1"
-            variant={activeTab === "passive" ? "solid" : "soft"}
-            color={activeTab === "passive" ? "violet" : "gray"}
-            onClick={() => setActiveTab("passive")}
-            style={{ flex: 1, minWidth: 0 }}
-          >
-            Passive
-          </Button>
-        </Flex>
-
-        <DropdownMenu.Separator />
-
-        {/* Active Abilities Content */}
-        {activeTab === "active" && (
-          <>
-            {gameModeRoles.map(({ gameModeId, consumables }) => {
           const gameMode = gameDefinitions.gameModes[gameModeId];
+          const hasNeither =
+            consumables.length === 0 && provisions.length === 0;
 
-              if (consumables.length === 0) return null;
+          if (hasNeither) return null;
+
+          const hasBoth = consumables.length > 0 && provisions.length > 0;
 
           return (
-                <Fragment key={`active-${gameModeId}`}>
+            <Fragment key={gameModeId}>
+              {consumables.length > 0 && (
                 <DropdownMenu.Label>
-                    {unwrap(gameMode.name)}
+                  {hasBoth
+                    ? literals(strings.website.common.tank_search.active, {
+                        name: unwrap(gameMode.name),
+                      })
+                    : unwrap(gameMode.name)}
                 </DropdownMenu.Label>
+              )}
 
               {consumables.map((consumable) => {
+                {
                   const selected = rawAbilities.includes(consumable);
                   const abilityDefinition =
                     consumableDefinitions.consumables[consumable];
@@ -1103,10 +1118,7 @@ function GameModeAbilitiesFilter() {
                               (n) => n !== consumable
                             );
                           } else {
-                              draft.abilities = [
+                            draft.abilities = [...draft.abilities, consumable];
-                                ...draft.abilities,
-                                consumable,
-                              ];
                           }
                         });
                       }}
@@ -1125,28 +1137,21 @@ function GameModeAbilitiesFilter() {
                       {unwrap(abilityDefinition.name)}
                     </DropdownMenu.CheckboxItem>
                   );
+                }
               })}
-                </Fragment>
+
-              );
+              {provisions.length > 0 && (
-            })}
+                <DropdownMenu.Label>
-          </>
+                  {hasBoth
+                    ? literals(strings.website.common.tank_search.passive, {
+                        name: unwrap(gameMode.name),
+                      })
+                    : unwrap(gameMode.name)}
+                </DropdownMenu.Label>
               )}
 
-        {/* Passive Abilities Content */}
-        {activeTab === "passive" && (
-          <>
-            {gameModeRoles.map(({ gameModeId, provisions }) => {
-              const gameMode = gameDefinitions.gameModes[gameModeId];
-
-              if (provisions.length === 0) return null;
-
-              return (
-                <Fragment key={`passive-${gameModeId}`}>
-                  <DropdownMenu.Label>
-                    {unwrap(gameMode.name)}
-                  </DropdownMenu.Label>
-
               {provisions.map((provision) => {
+                {
                   const selected = rawPowers.includes(provision);
                   const powerDefinition =
                     provisionDefinitions.provisions[provision];
@@ -1181,12 +1186,11 @@ function GameModeAbilitiesFilter() {
                       {unwrap(powerDefinition.name)}
                     </DropdownMenu.CheckboxItem>
                   );
+                }
               })}
             </Fragment>
           );
         })}
-          </>
-        )}
 
         <DropdownMenu.Separator />
 
@@ -1202,7 +1206,7 @@ function GameModeAbilitiesFilter() {
           }}
         >
           <TrashIcon />
-          Clear All
+          {strings.website.common.tank_search.clear}
         </DropdownMenu.Item>
       </DropdownMenu.Content>
     </DropdownMenu.Root>