From bdc013b4c8c5db47d7f1d01c96d194f78f84740d Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 16 Apr 2025 23:34:30 -0500
Subject: [PATCH] fix: cleaner clear button

---
 packages/i18n/strings/en.json                 |   2 +-
 .../TankSearch/components/FilterControl.tsx   | 881 +++++++++---------
 2 files changed, 450 insertions(+), 433 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 980ebccb0..849f2daa9 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -756,7 +756,7 @@
       },
 
       "tank_search": {
-        "clear_filters": "Clear",
+        "clear_filters": "Clear filters",
         "search_bar_hint": "Search tanks...",
         "recent": "Recently viewed",
         "select_all": "Select all",
diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx
index b8f4da472..189c3893f 100644
--- a/packages/website/src/components/TankSearch/components/FilterControl.tsx
+++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx
@@ -6,17 +6,16 @@ import {
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
-import { ReloadIcon } from '@radix-ui/react-icons';
 import {
   Box,
-  Button,
   Flex,
   IconButton,
   Inset,
+  Link,
   Popover,
   Text,
 } from '@radix-ui/themes';
-import { times } from 'lodash-es';
+import { isEqual, times } from 'lodash-es';
 import { awaitableGameDefinitions } from '../../../core/awaitables/gameDefinitions';
 import { Var } from '../../../core/radix/var';
 import { useLocale } from '../../../hooks/useLocale';
@@ -121,493 +120,511 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
 export function FilterControl({ compact }: FilterControlProps) {
   const tankFilters = useStore($tankFilters);
   const { strings } = useLocale();
+  const clearable = !isEqual(tankFilters, initialTankFilters);
 
   return (
-    <Flex
-      height="fit-content"
-      gap="2"
-      align={{ initial: 'start', md: 'center' }}
-      justify="center"
-    >
+    <Flex direction="column" align="center">
       <Flex
-        direction={compact ? 'row' : { initial: 'row', md: 'column' }}
-        overflow="hidden"
-        style={{ borderRadius: 'var(--radius-5)' }}
+        height="fit-content"
+        gap="2"
+        align={{ initial: 'start', md: 'center' }}
+        justify="center"
       >
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
-          {times(5, (index) => {
-            const tier = index + 1;
-            const selected = tankFilters.tiers?.includes(tier);
-
-            return (
-              <IconButton
-                key={tier}
-                variant={selected ? 'solid' : 'soft'}
-                radius="none"
-                color={selected ? undefined : 'gray'}
-                highContrast
-                onClick={() => {
-                  if (tankFilters.tiers.includes(tier)) {
-                    $tankFilters.setKey(
-                      'tiers',
-                      tankFilters.tiers.filter((t) => t !== tier),
-                    );
-                  } else {
-                    $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
-                  }
-                }}
-              >
-                <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
-              </IconButton>
-            );
-          })}
-        </Flex>
-
-        <Box
-          display={{ initial: 'none', md: 'block' }}
-          style={{
-            height: Var('space-1'),
-            backgroundColor: Var('gray-a3'),
-          }}
-        />
-
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
-          {times(5, (index) => {
-            const tier = index + 6;
-            const selected = tankFilters.tiers?.includes(tier);
-
-            return (
-              <IconButton
-                key={tier}
-                variant={selected ? 'solid' : 'soft'}
-                radius="none"
-                color={selected ? undefined : 'gray'}
-                highContrast
-                onClick={() => {
-                  if (tankFilters.tiers.includes(tier)) {
-                    $tankFilters.setKey(
-                      'tiers',
-                      tankFilters.tiers.filter((t) => t !== tier),
-                    );
-                  } else {
-                    $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
-                  }
-                }}
-              >
-                <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
-              </IconButton>
-            );
-          })}
-        </Flex>
-      </Flex>
-
-      <Flex
-        direction={compact ? 'row' : { initial: 'row', md: 'column' }}
-        overflow="hidden"
-        style={{ borderRadius: 'var(--radius-5)' }}
-      >
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
-          {gameDefinitions.nations
-            .slice(0, Math.ceil(gameDefinitions.nations.length / 2))
-            .map((nation) => {
-              const selected = tankFilters.nations?.includes(nation);
-
-              return (
-                <IconButton
-                  key={nation}
-                  variant={selected ? 'solid' : 'soft'}
-                  color={selected ? undefined : 'gray'}
-                  highContrast
-                  radius="none"
-                  onClick={() => {
-                    if (tankFilters.nations.includes(nation)) {
-                      $tankFilters.setKey(
-                        'nations',
-                        tankFilters.nations.filter((n) => n !== nation),
-                      );
-                    } else {
-                      $tankFilters.setKey('nations', [
-                        ...tankFilters.nations,
-                        nation,
-                      ]);
-                    }
-                  }}
-                >
-                  <img
-                    style={{ width: '1em', height: '1em' }}
-                    src={asset(`flags/circle/${nation}.webp`)}
-                  />
-                </IconButton>
-              );
-            })}
-        </Flex>
-
-        <Box
-          display={{ initial: 'none', md: 'block' }}
-          style={{
-            height: Var('space-1'),
-            backgroundColor: Var('gray-a3'),
-          }}
-        />
-
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
-          {gameDefinitions.nations
-            .slice(Math.ceil(gameDefinitions.nations.length / 2))
-            .map((nation) => {
-              const selected = tankFilters.nations?.includes(nation);
-
-              return (
-                <IconButton
-                  key={nation}
-                  style={{ flex: 1 }}
-                  variant={selected ? 'solid' : 'soft'}
-                  color={selected ? undefined : 'gray'}
-                  highContrast
-                  radius="none"
-                  onClick={() => {
-                    if (tankFilters.nations.includes(nation)) {
-                      $tankFilters.setKey(
-                        'nations',
-                        tankFilters.nations.filter((n) => n !== nation),
-                      );
-                    } else {
-                      $tankFilters.setKey('nations', [
-                        ...tankFilters.nations,
-                        nation,
-                      ]);
-                    }
-                  }}
-                >
-                  <img
-                    style={{ width: '1em', height: '1em' }}
-                    src={asset(`flags/circle/${nation}.webp`)}
-                  />
-                </IconButton>
-              );
-            })}
-        </Flex>
-      </Flex>
-
-      <Flex
-        direction={{ initial: 'row', md: 'column' }}
-        align="start"
-        gap={{ initial: '2', md: '1' }}
-      >
-        <Flex gap="2" align="start">
+        <Flex
+          flexShrink="0"
+          direction={compact ? 'row' : { initial: 'row', md: 'column' }}
+          overflow="hidden"
+          style={{ borderRadius: 'var(--radius-5)' }}
+        >
           <Flex
-            overflow="hidden"
-            style={{ borderRadius: 'var(--radius-full)' }}
             direction={compact ? 'column' : { md: 'row', initial: 'column' }}
           >
-            {TANK_CLASSES.map((tankClass) => {
-              const Icon = classIcons[tankClass];
-              const selected = tankFilters.classes?.includes(tankClass);
+            {times(5, (index) => {
+              const tier = index + 1;
+              const selected = tankFilters.tiers?.includes(tier);
 
               return (
                 <IconButton
-                  key={tankClass}
+                  key={tier}
                   variant={selected ? 'solid' : 'soft'}
                   radius="none"
                   color={selected ? undefined : 'gray'}
                   highContrast
                   onClick={() => {
-                    if (tankFilters.classes.includes(tankClass)) {
+                    if (tankFilters.tiers.includes(tier)) {
                       $tankFilters.setKey(
-                        'classes',
-                        tankFilters.classes.filter((c) => c !== tankClass),
+                        'tiers',
+                        tankFilters.tiers.filter((t) => t !== tier),
                       );
                     } else {
-                      $tankFilters.setKey('classes', [
-                        ...tankFilters.classes,
-                        tankClass,
+                      $tankFilters.setKey('tiers', [
+                        ...tankFilters.tiers,
+                        tier,
                       ]);
                     }
                   }}
                 >
-                  <Icon style={{ width: '1em', height: '1em' }} />
+                  <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
                 </IconButton>
               );
             })}
           </Flex>
 
+          <Box
+            display={{ initial: 'none', md: 'block' }}
+            style={{
+              height: Var('space-1'),
+              backgroundColor: Var('gray-a3'),
+            }}
+          />
+
           <Flex
-            overflow="hidden"
-            style={{ borderRadius: 'var(--radius-full)' }}
             direction={compact ? 'column' : { md: 'row', initial: 'column' }}
           >
-            <IconButton
-              variant={
-                tankFilters.gunType.includes('regular') ? 'solid' : 'soft'
-              }
-              radius="none"
-              color={
-                tankFilters.gunType.includes('regular') ? undefined : 'gray'
-              }
-              highContrast
-              onClick={() => {
-                if (tankFilters.gunType.includes('regular')) {
-                  $tankFilters.setKey(
-                    'gunType',
-                    tankFilters.gunType.filter((t) => t !== 'regular'),
-                  );
-                } else {
-                  $tankFilters.setKey('gunType', [
-                    ...tankFilters.gunType,
-                    'regular',
-                  ]);
-                }
-              }}
-            >
-              <GunRegularIcon style={{ width: '1em', height: '1em' }} />
-            </IconButton>
-            <IconButton
-              variant={
-                tankFilters.gunType.includes('auto_loader') ? 'solid' : 'soft'
-              }
-              radius="none"
-              color={
-                tankFilters.gunType.includes('auto_loader') ? undefined : 'gray'
-              }
-              highContrast
-              onClick={() => {
-                if (tankFilters.gunType.includes('auto_loader')) {
-                  $tankFilters.setKey(
-                    'gunType',
-                    tankFilters.gunType.filter((t) => t !== 'auto_loader'),
-                  );
-                } else {
-                  $tankFilters.setKey('gunType', [
-                    ...tankFilters.gunType,
-                    'auto_loader',
-                  ]);
-                }
-              }}
-            >
-              <GunAutoloaderIcon style={{ width: '1em', height: '1em' }} />
-            </IconButton>
-            <IconButton
-              variant={
-                tankFilters.gunType.includes('auto_reloader') ? 'solid' : 'soft'
-              }
-              radius="none"
-              color={
-                tankFilters.gunType.includes('auto_reloader')
-                  ? undefined
-                  : 'gray'
-              }
-              highContrast
-              onClick={() => {
-                if (tankFilters.gunType.includes('auto_reloader')) {
-                  $tankFilters.setKey(
-                    'gunType',
-                    tankFilters.gunType.filter((t) => t !== 'auto_reloader'),
-                  );
-                } else {
-                  $tankFilters.setKey('gunType', [
-                    ...tankFilters.gunType,
-                    'auto_reloader',
-                  ]);
-                }
-              }}
-            >
-              <GunAutoreloaderIcon style={{ width: '1em', height: '1em' }} />
-            </IconButton>
-          </Flex>
+            {times(5, (index) => {
+              const tier = index + 6;
+              const selected = tankFilters.tiers?.includes(tier);
 
-          <Box display={{ initial: 'none', md: 'block' }}>
-            <Button
-              color="red"
-              onClick={() => {
-                $tankFilters.set(initialTankFilters);
-                $tankopediaSort.set(initialTankopediaSort);
-              }}
-            >
-              <ReloadIcon />
-              {strings.website.common.tank_search.clear_filters}
-            </Button>
-          </Box>
+              return (
+                <IconButton
+                  key={tier}
+                  variant={selected ? 'solid' : 'soft'}
+                  radius="none"
+                  color={selected ? undefined : 'gray'}
+                  highContrast
+                  onClick={() => {
+                    if (tankFilters.tiers.includes(tier)) {
+                      $tankFilters.setKey(
+                        'tiers',
+                        tankFilters.tiers.filter((t) => t !== tier),
+                      );
+                    } else {
+                      $tankFilters.setKey('tiers', [
+                        ...tankFilters.tiers,
+                        tier,
+                      ]);
+                    }
+                  }}
+                >
+                  <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
+                </IconButton>
+              );
+            })}
+          </Flex>
         </Flex>
 
-        <Flex gap="2" align="start">
+        <Flex
+          flexShrink="0"
+          direction={compact ? 'row' : { initial: 'row', md: 'column' }}
+          overflow="hidden"
+          style={{ borderRadius: 'var(--radius-5)' }}
+        >
           <Flex
-            overflow="hidden"
-            style={{ borderRadius: 'var(--radius-full)' }}
             direction={compact ? 'column' : { md: 'row', initial: 'column' }}
           >
-            <IconButton
-              variant={
-                tankFilters.types?.includes(TankType.RESEARCHABLE)
-                  ? 'solid'
-                  : 'soft'
-              }
-              radius="none"
-              color={
-                tankFilters.types?.includes(TankType.RESEARCHABLE)
-                  ? undefined
-                  : 'gray'
-              }
-              highContrast
-              onClick={() => {
-                if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
-                  $tankFilters.setKey(
-                    'types',
-                    tankFilters.types.filter(
-                      (t) => t !== TankType.RESEARCHABLE,
-                    ),
-                  );
-                } else {
-                  $tankFilters.setKey('types', [
-                    ...tankFilters.types,
-                    TankType.RESEARCHABLE,
-                  ]);
-                }
-              }}
+            {gameDefinitions.nations
+              .slice(0, Math.ceil(gameDefinitions.nations.length / 2))
+              .map((nation) => {
+                const selected = tankFilters.nations?.includes(nation);
+
+                return (
+                  <IconButton
+                    key={nation}
+                    variant={selected ? 'solid' : 'soft'}
+                    color={selected ? undefined : 'gray'}
+                    highContrast
+                    radius="none"
+                    onClick={() => {
+                      if (tankFilters.nations.includes(nation)) {
+                        $tankFilters.setKey(
+                          'nations',
+                          tankFilters.nations.filter((n) => n !== nation),
+                        );
+                      } else {
+                        $tankFilters.setKey('nations', [
+                          ...tankFilters.nations,
+                          nation,
+                        ]);
+                      }
+                    }}
+                  >
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      src={asset(`flags/circle/${nation}.webp`)}
+                    />
+                  </IconButton>
+                );
+              })}
+          </Flex>
+
+          <Box
+            display={{ initial: 'none', md: 'block' }}
+            style={{
+              height: Var('space-1'),
+              backgroundColor: Var('gray-a3'),
+            }}
+          />
+
+          <Flex
+            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+          >
+            {gameDefinitions.nations
+              .slice(Math.ceil(gameDefinitions.nations.length / 2))
+              .map((nation) => {
+                const selected = tankFilters.nations?.includes(nation);
+
+                return (
+                  <IconButton
+                    key={nation}
+                    style={{ flex: 1 }}
+                    variant={selected ? 'solid' : 'soft'}
+                    color={selected ? undefined : 'gray'}
+                    highContrast
+                    radius="none"
+                    onClick={() => {
+                      if (tankFilters.nations.includes(nation)) {
+                        $tankFilters.setKey(
+                          'nations',
+                          tankFilters.nations.filter((n) => n !== nation),
+                        );
+                      } else {
+                        $tankFilters.setKey('nations', [
+                          ...tankFilters.nations,
+                          nation,
+                        ]);
+                      }
+                    }}
+                  >
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      src={asset(`flags/circle/${nation}.webp`)}
+                    />
+                  </IconButton>
+                );
+              })}
+          </Flex>
+        </Flex>
+
+        <Flex
+          direction={{ initial: 'row', md: 'column' }}
+          align="start"
+          gap={{ initial: '2', md: '1' }}
+        >
+          <Flex gap="2" align="start">
+            <Flex
+              overflow="hidden"
+              style={{ borderRadius: 'var(--radius-full)' }}
+              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
             >
-              <ResearchedIcon style={{ width: '1em', height: '1em' }} />
-            </IconButton>
-            <IconButton
-              variant={
-                tankFilters.types?.includes(TankType.PREMIUM) ? 'solid' : 'soft'
-              }
-              radius="none"
-              color={
-                tankFilters.types?.includes(TankType.PREMIUM) ? 'amber' : 'gray'
-              }
-              highContrast
-              onClick={() => {
-                if (tankFilters.types.includes(TankType.PREMIUM)) {
-                  $tankFilters.setKey(
-                    'types',
-                    tankFilters.types.filter((t) => t !== TankType.PREMIUM),
-                  );
-                } else {
-                  $tankFilters.setKey('types', [
-                    ...tankFilters.types,
-                    TankType.PREMIUM,
-                  ]);
-                }
-              }}
+              {TANK_CLASSES.map((tankClass) => {
+                const Icon = classIcons[tankClass];
+                const selected = tankFilters.classes?.includes(tankClass);
+
+                return (
+                  <IconButton
+                    key={tankClass}
+                    variant={selected ? 'solid' : 'soft'}
+                    radius="none"
+                    color={selected ? undefined : 'gray'}
+                    highContrast
+                    onClick={() => {
+                      if (tankFilters.classes.includes(tankClass)) {
+                        $tankFilters.setKey(
+                          'classes',
+                          tankFilters.classes.filter((c) => c !== tankClass),
+                        );
+                      } else {
+                        $tankFilters.setKey('classes', [
+                          ...tankFilters.classes,
+                          tankClass,
+                        ]);
+                      }
+                    }}
+                  >
+                    <Icon style={{ width: '1em', height: '1em' }} />
+                  </IconButton>
+                );
+              })}
+            </Flex>
+
+            <Flex
+              overflow="hidden"
+              style={{ borderRadius: 'var(--radius-full)' }}
+              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
             >
-              <Text
+              <IconButton
+                variant={
+                  tankFilters.gunType.includes('regular') ? 'solid' : 'soft'
+                }
+                radius="none"
+                color={
+                  tankFilters.gunType.includes('regular') ? undefined : 'gray'
+                }
+                highContrast
+                onClick={() => {
+                  if (tankFilters.gunType.includes('regular')) {
+                    $tankFilters.setKey(
+                      'gunType',
+                      tankFilters.gunType.filter((t) => t !== 'regular'),
+                    );
+                  } else {
+                    $tankFilters.setKey('gunType', [
+                      ...tankFilters.gunType,
+                      'regular',
+                    ]);
+                  }
+                }}
+              >
+                <GunRegularIcon style={{ width: '1em', height: '1em' }} />
+              </IconButton>
+              <IconButton
+                variant={
+                  tankFilters.gunType.includes('auto_loader') ? 'solid' : 'soft'
+                }
+                radius="none"
+                color={
+                  tankFilters.gunType.includes('auto_loader')
+                    ? undefined
+                    : 'gray'
+                }
+                highContrast
+                onClick={() => {
+                  if (tankFilters.gunType.includes('auto_loader')) {
+                    $tankFilters.setKey(
+                      'gunType',
+                      tankFilters.gunType.filter((t) => t !== 'auto_loader'),
+                    );
+                  } else {
+                    $tankFilters.setKey('gunType', [
+                      ...tankFilters.gunType,
+                      'auto_loader',
+                    ]);
+                  }
+                }}
+              >
+                <GunAutoloaderIcon style={{ width: '1em', height: '1em' }} />
+              </IconButton>
+              <IconButton
+                variant={
+                  tankFilters.gunType.includes('auto_reloader')
+                    ? 'solid'
+                    : 'soft'
+                }
+                radius="none"
+                color={
+                  tankFilters.gunType.includes('auto_reloader')
+                    ? undefined
+                    : 'gray'
+                }
+                highContrast
+                onClick={() => {
+                  if (tankFilters.gunType.includes('auto_reloader')) {
+                    $tankFilters.setKey(
+                      'gunType',
+                      tankFilters.gunType.filter((t) => t !== 'auto_reloader'),
+                    );
+                  } else {
+                    $tankFilters.setKey('gunType', [
+                      ...tankFilters.gunType,
+                      'auto_reloader',
+                    ]);
+                  }
+                }}
+              >
+                <GunAutoreloaderIcon style={{ width: '1em', height: '1em' }} />
+              </IconButton>
+            </Flex>
+
+            <Flex
+              overflow="hidden"
+              style={{ borderRadius: 'var(--radius-full)' }}
+              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+            >
+              <ShellFilter index={0} />
+              <ShellFilter index={1} premium />
+              <ShellFilter index={2} />
+            </Flex>
+          </Flex>
+
+          <Flex gap="2" align="start">
+            <Flex
+              overflow="hidden"
+              style={{ borderRadius: 'var(--radius-full)' }}
+              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+            >
+              <IconButton
+                variant={
+                  tankFilters.types?.includes(TankType.RESEARCHABLE)
+                    ? 'solid'
+                    : 'soft'
+                }
+                radius="none"
+                color={
+                  tankFilters.types?.includes(TankType.RESEARCHABLE)
+                    ? undefined
+                    : 'gray'
+                }
+                highContrast
+                onClick={() => {
+                  if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
+                    $tankFilters.setKey(
+                      'types',
+                      tankFilters.types.filter(
+                        (t) => t !== TankType.RESEARCHABLE,
+                      ),
+                    );
+                  } else {
+                    $tankFilters.setKey('types', [
+                      ...tankFilters.types,
+                      TankType.RESEARCHABLE,
+                    ]);
+                  }
+                }}
+              >
+                <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+              </IconButton>
+              <IconButton
+                variant={
+                  tankFilters.types?.includes(TankType.PREMIUM)
+                    ? 'solid'
+                    : 'soft'
+                }
+                radius="none"
                 color={
                   tankFilters.types?.includes(TankType.PREMIUM)
-                    ? undefined
-                    : 'amber'
+                    ? 'amber'
+                    : 'gray'
                 }
-                style={{ display: 'flex', justifyContent: 'center' }}
+                highContrast
+                onClick={() => {
+                  if (tankFilters.types.includes(TankType.PREMIUM)) {
+                    $tankFilters.setKey(
+                      'types',
+                      tankFilters.types.filter((t) => t !== TankType.PREMIUM),
+                    );
+                  } else {
+                    $tankFilters.setKey('types', [
+                      ...tankFilters.types,
+                      TankType.PREMIUM,
+                    ]);
+                  }
+                }}
               >
-                <ResearchedIcon style={{ width: '1em', height: '1em' }} />
-              </Text>
-            </IconButton>
-            <IconButton
-              variant={
-                tankFilters.types?.includes(TankType.COLLECTOR)
-                  ? 'solid'
-                  : 'soft'
-              }
-              radius="none"
-              color={
-                tankFilters.types?.includes(TankType.COLLECTOR)
-                  ? 'blue'
-                  : 'gray'
-              }
-              highContrast
-              onClick={() => {
-                if (tankFilters.types.includes(TankType.COLLECTOR)) {
-                  $tankFilters.setKey(
-                    'types',
-                    tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
-                  );
-                } else {
-                  $tankFilters.setKey('types', [
-                    ...tankFilters.types,
-                    TankType.COLLECTOR,
-                  ]);
+                <Text
+                  color={
+                    tankFilters.types?.includes(TankType.PREMIUM)
+                      ? undefined
+                      : 'amber'
+                  }
+                  style={{ display: 'flex', justifyContent: 'center' }}
+                >
+                  <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+                </Text>
+              </IconButton>
+              <IconButton
+                variant={
+                  tankFilters.types?.includes(TankType.COLLECTOR)
+                    ? 'solid'
+                    : 'soft'
                 }
-              }}
-            >
-              <Text
+                radius="none"
                 color={
                   tankFilters.types?.includes(TankType.COLLECTOR)
-                    ? undefined
-                    : 'blue'
+                    ? 'blue'
+                    : 'gray'
                 }
-                style={{ display: 'flex', justifyContent: 'center' }}
+                highContrast
+                onClick={() => {
+                  if (tankFilters.types.includes(TankType.COLLECTOR)) {
+                    $tankFilters.setKey(
+                      'types',
+                      tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
+                    );
+                  } else {
+                    $tankFilters.setKey('types', [
+                      ...tankFilters.types,
+                      TankType.COLLECTOR,
+                    ]);
+                  }
+                }}
               >
-                <ResearchedIcon style={{ width: '1em', height: '1em' }} />
-              </Text>
-            </IconButton>
-          </Flex>
+                <Text
+                  color={
+                    tankFilters.types?.includes(TankType.COLLECTOR)
+                      ? undefined
+                      : 'blue'
+                  }
+                  style={{ display: 'flex', justifyContent: 'center' }}
+                >
+                  <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+                </Text>
+              </IconButton>
+            </Flex>
 
-          <Flex
-            overflow="hidden"
-            style={{ borderRadius: 'var(--radius-full)' }}
-            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
-          >
-            <IconButton
-              variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
-              radius="none"
-              color={tankFilters.testing === 'include' ? undefined : 'gray'}
-              highContrast
-              onClick={() => {
-                $tankFilters.setKey('testing', 'include');
-              }}
+            <Flex
+              overflow="hidden"
+              style={{ borderRadius: 'var(--radius-full)' }}
+              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
             >
-              <ExperimentIcon
-                style={{ width: '1em', height: '1em', color: 'currentColor' }}
-              />
-            </IconButton>
-            <IconButton
-              variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
-              radius="none"
-              color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
-              highContrast
-              onClick={() => {
-                $tankFilters.setKey('testing', 'exclude');
-              }}
-            >
-              <ScienceOffIcon
-                style={{ width: '1em', height: '1em', color: 'currentColor' }}
-              />
-            </IconButton>
-            <IconButton
-              variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
-              radius="none"
-              color={tankFilters.testing === 'only' ? undefined : 'gray'}
-              highContrast
-              onClick={() => {
-                $tankFilters.setKey('testing', 'only');
-              }}
-            >
-              <ScienceIcon
-                style={{ width: '1em', height: '1em', color: 'currentColor' }}
-              />
-            </IconButton>
-          </Flex>
-
-          <Flex
-            overflow="hidden"
-            style={{ borderRadius: 'var(--radius-full)' }}
-            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
-          >
-            <ShellFilter index={0} />
-            <ShellFilter index={1} premium />
-            <ShellFilter index={2} />
+              <IconButton
+                variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
+                radius="none"
+                color={tankFilters.testing === 'include' ? undefined : 'gray'}
+                highContrast
+                onClick={() => {
+                  $tankFilters.setKey('testing', 'include');
+                }}
+              >
+                <ExperimentIcon
+                  style={{ width: '1em', height: '1em', color: 'currentColor' }}
+                />
+              </IconButton>
+              <IconButton
+                variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
+                radius="none"
+                color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
+                highContrast
+                onClick={() => {
+                  $tankFilters.setKey('testing', 'exclude');
+                }}
+              >
+                <ScienceOffIcon
+                  style={{ width: '1em', height: '1em', color: 'currentColor' }}
+                />
+              </IconButton>
+              <IconButton
+                variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
+                radius="none"
+                color={tankFilters.testing === 'only' ? undefined : 'gray'}
+                highContrast
+                onClick={() => {
+                  $tankFilters.setKey('testing', 'only');
+                }}
+              >
+                <ScienceIcon
+                  style={{ width: '1em', height: '1em', color: 'currentColor' }}
+                />
+              </IconButton>
+            </Flex>
           </Flex>
         </Flex>
       </Flex>
 
-      <Box display={{ initial: 'block', md: 'none' }} ml="4">
-        <IconButton
+      {clearable && (
+        <Link
           color="red"
-          onClick={() => {
+          underline="always"
+          mt="4"
+          href="#"
+          onClick={(event) => {
+            event.preventDefault();
             $tankFilters.set(initialTankFilters);
             $tankopediaSort.set(initialTankopediaSort);
           }}
         >
-          <ReloadIcon />
-        </IconButton>
-      </Box>
+          {strings.website.common.tank_search.clear_filters}
+        </Link>
+      )}
     </Flex>
   );
 }