fix: cleaner clear button

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",

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,8 +120,10 @@ 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 direction="column" align="center">
       <Flex
         height="fit-content"
         gap="2"
@@ -130,11 +131,14 @@ export function FilterControl({ compact }: FilterControlProps) {
         justify="center"
       >
         <Flex
+          flexShrink="0"
           direction={compact ? 'row' : { initial: 'row', md: 'column' }}
           overflow="hidden"
           style={{ borderRadius: 'var(--radius-5)' }}
         >
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
+          <Flex
+            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+          >
             {times(5, (index) => {
               const tier = index + 1;
               const selected = tankFilters.tiers?.includes(tier);
@@ -153,7 +157,10 @@ export function FilterControl({ compact }: FilterControlProps) {
                         tankFilters.tiers.filter((t) => t !== tier),
                       );
                     } else {
-                    $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
+                      $tankFilters.setKey('tiers', [
+                        ...tankFilters.tiers,
+                        tier,
+                      ]);
                     }
                   }}
                 >
@@ -171,7 +178,9 @@ export function FilterControl({ compact }: FilterControlProps) {
             }}
           />
 
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
+          <Flex
+            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+          >
             {times(5, (index) => {
               const tier = index + 6;
               const selected = tankFilters.tiers?.includes(tier);
@@ -190,7 +199,10 @@ export function FilterControl({ compact }: FilterControlProps) {
                         tankFilters.tiers.filter((t) => t !== tier),
                       );
                     } else {
-                    $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
+                      $tankFilters.setKey('tiers', [
+                        ...tankFilters.tiers,
+                        tier,
+                      ]);
                     }
                   }}
                 >
@@ -202,11 +214,14 @@ export function FilterControl({ compact }: FilterControlProps) {
         </Flex>
 
         <Flex
+          flexShrink="0"
           direction={compact ? 'row' : { initial: 'row', md: 'column' }}
           overflow="hidden"
           style={{ borderRadius: 'var(--radius-5)' }}
         >
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
+          <Flex
+            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+          >
             {gameDefinitions.nations
               .slice(0, Math.ceil(gameDefinitions.nations.length / 2))
               .map((nation) => {
@@ -250,7 +265,9 @@ export function FilterControl({ compact }: FilterControlProps) {
             }}
           />
 
-        <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
+          <Flex
+            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+          >
             {gameDefinitions.nations
               .slice(Math.ceil(gameDefinitions.nations.length / 2))
               .map((nation) => {
@@ -366,7 +383,9 @@ export function FilterControl({ compact }: FilterControlProps) {
                 }
                 radius="none"
                 color={
-                tankFilters.gunType.includes('auto_loader') ? undefined : 'gray'
+                  tankFilters.gunType.includes('auto_loader')
+                    ? undefined
+                    : 'gray'
                 }
                 highContrast
                 onClick={() => {
@@ -387,7 +406,9 @@ export function FilterControl({ compact }: FilterControlProps) {
               </IconButton>
               <IconButton
                 variant={
-                tankFilters.gunType.includes('auto_reloader') ? 'solid' : 'soft'
+                  tankFilters.gunType.includes('auto_reloader')
+                    ? 'solid'
+                    : 'soft'
                 }
                 radius="none"
                 color={
@@ -414,18 +435,15 @@ export function FilterControl({ compact }: FilterControlProps) {
               </IconButton>
             </Flex>
 
-          <Box display={{ initial: 'none', md: 'block' }}>
+            <Flex
-            <Button
+              overflow="hidden"
-              color="red"
+              style={{ borderRadius: 'var(--radius-full)' }}
-              onClick={() => {
+              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
-                $tankFilters.set(initialTankFilters);
-                $tankopediaSort.set(initialTankopediaSort);
-              }}
             >
-              <ReloadIcon />
+              <ShellFilter index={0} />
-              {strings.website.common.tank_search.clear_filters}
+              <ShellFilter index={1} premium />
-            </Button>
+              <ShellFilter index={2} />
-          </Box>
+            </Flex>
           </Flex>
 
           <Flex gap="2" align="start">
@@ -467,11 +485,15 @@ export function FilterControl({ compact }: FilterControlProps) {
               </IconButton>
               <IconButton
                 variant={
-                tankFilters.types?.includes(TankType.PREMIUM) ? 'solid' : 'soft'
+                  tankFilters.types?.includes(TankType.PREMIUM)
+                    ? 'solid'
+                    : 'soft'
                 }
                 radius="none"
                 color={
-                tankFilters.types?.includes(TankType.PREMIUM) ? 'amber' : 'gray'
+                  tankFilters.types?.includes(TankType.PREMIUM)
+                    ? 'amber'
+                    : 'gray'
                 }
                 highContrast
                 onClick={() => {
@@ -584,30 +606,25 @@ export function FilterControl({ compact }: FilterControlProps) {
                 />
               </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>
 
-      <Box display={{ initial: 'block', md: 'none' }} ml="4">
+      {clearable && (
-        <IconButton
+        <Link
           color="red"
-          onClick={() => {
+          underline="always"
+          mt="4"
+          href="#"
+          onClick={(event) => {
+            event.preventDefault();
             $tankFilters.set(initialTankFilters);
             $tankopediaSort.set(initialTankopediaSort);
           }}
         >
-          <ReloadIcon />
+          {strings.website.common.tank_search.clear_filters}
-        </IconButton>
+        </Link>
-      </Box>
+      )}
     </Flex>
   );
 }