fix: remove tooltips in tank filters

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

@@ -6,10 +6,9 @@ import {
   TIER_ROMAN_NUMERALS,
   type Tier,
 } from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en-US.json';
 import { useStore } from '@nanostores/react';
 import { ReloadIcon } from '@radix-ui/react-icons';
-import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
+import { Box, Flex, IconButton, Text } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
 import { classIcons } from '../../ClassIcon';
@@ -40,7 +39,6 @@ export function FilterControl({ compact }: FilterControlProps) {
             const selected = tankFilters.tiers?.includes(tier);
 
             return (
-              <Tooltip key={tier} content={`Tier ${tier}`}>
               <IconButton
                 key={tier}
                 variant={selected ? 'solid' : 'soft'}
@@ -54,16 +52,12 @@ export function FilterControl({ compact }: FilterControlProps) {
                       tankFilters.tiers.filter((t) => t !== tier),
                     );
                   } else {
-                      $tankFilters.setKey('tiers', [
+                    $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
-                        ...tankFilters.tiers,
-                        tier,
-                      ]);
                   }
                 }}
               >
                 <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
               </IconButton>
-              </Tooltip>
             );
           })}
         </Flex>
@@ -73,7 +67,6 @@ export function FilterControl({ compact }: FilterControlProps) {
             const selected = tankFilters.tiers?.includes(tier);
 
             return (
-              <Tooltip key={tier} content={`Tier ${tier}`}>
               <IconButton
                 key={tier}
                 variant={selected ? 'solid' : 'soft'}
@@ -87,16 +80,12 @@ export function FilterControl({ compact }: FilterControlProps) {
                       tankFilters.tiers.filter((t) => t !== tier),
                     );
                   } else {
-                      $tankFilters.setKey('tiers', [
+                    $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
-                        ...tankFilters.tiers,
-                        tier,
-                      ]);
                   }
                 }}
               >
                 <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
               </IconButton>
-              </Tooltip>
             );
           })}
         </Flex>
@@ -114,30 +103,13 @@ export function FilterControl({ compact }: FilterControlProps) {
               const selected = tankFilters.nations?.includes(nation);
 
               return (
-                <Tooltip
-                  content={
-                    strings.common.nations[
-                      nation as keyof typeof strings.common.nations
-                    ]
-                  }
-                  key={nation}
-                >
                 <IconButton
+                  key={nation}
                   variant={selected ? 'solid' : 'soft'}
                   color={selected ? undefined : 'gray'}
                   highContrast
                   radius="none"
-                    onClick={() =>
+                  onClick={() => {
-                      // mutateTankFilters((draft) => {
-                      //   if (draft.nations?.includes(nation)) {
-                      //     draft.nations = draft.nations?.filter(
-                      //       (n) => n !== nation,
-                      //     );
-                      //   } else {
-                      //     draft.nations = [...(draft.nations ?? []), nation];
-                      //   }
-                      // })
-                      {
                     if (tankFilters.nations.includes(nation)) {
                       $tankFilters.setKey(
                         'nations',
@@ -149,15 +121,13 @@ export function FilterControl({ compact }: FilterControlProps) {
                         nation,
                       ]);
                     }
-                      }
+                  }}
-                    }
                 >
                   <img
                     style={{ width: '1em', height: '1em' }}
                     src={asset(`flags/circle/${nation}.webp`)}
                   />
                 </IconButton>
-                </Tooltip>
               );
             })}
         </Flex>
@@ -168,14 +138,6 @@ export function FilterControl({ compact }: FilterControlProps) {
               const selected = tankFilters.nations?.includes(nation);
 
               return (
-                <Tooltip
-                  content={
-                    strings.common.nations[
-                      nation as keyof typeof strings.common.nations
-                    ]
-                  }
-                  key={nation}
-                >
                 <IconButton
                   key={nation}
                   style={{ flex: 1 }}
@@ -183,17 +145,7 @@ export function FilterControl({ compact }: FilterControlProps) {
                   color={selected ? undefined : 'gray'}
                   highContrast
                   radius="none"
-                    onClick={() =>
+                  onClick={() => {
-                      // mutateTankFilters((draft) => {
-                      //   if (draft.nations?.includes(nation)) {
-                      //     draft.nations = draft.nations?.filter(
-                      //       (n) => n !== nation,
-                      //     );
-                      //   } else {
-                      //     draft.nations = [...(draft.nations ?? []), nation];
-                      //   }
-                      // })
-                      {
                     if (tankFilters.nations.includes(nation)) {
                       $tankFilters.setKey(
                         'nations',
@@ -205,15 +157,13 @@ export function FilterControl({ compact }: FilterControlProps) {
                         nation,
                       ]);
                     }
-                      }
+                  }}
-                    }
                 >
                   <img
                     style={{ width: '1em', height: '1em' }}
                     src={asset(`flags/circle/${nation}.webp`)}
                   />
                 </IconButton>
-                </Tooltip>
               );
             })}
         </Flex>
@@ -229,11 +179,8 @@ export function FilterControl({ compact }: FilterControlProps) {
           const selected = tankFilters.classes?.includes(tankClass);
 
           return (
-            <Tooltip
-              content={strings.common.tank_class_medium[tankClass]}
-              key={tankClass}
-            >
             <IconButton
+              key={tankClass}
               variant={selected ? 'solid' : 'soft'}
               radius="none"
               color={selected ? undefined : 'gray'}
@@ -254,7 +201,6 @@ export function FilterControl({ compact }: FilterControlProps) {
             >
               <Icon style={{ width: '1em', height: '1em' }} />
             </IconButton>
-            </Tooltip>
           );
         })}
       </Flex>
@@ -264,7 +210,6 @@ export function FilterControl({ compact }: FilterControlProps) {
         style={{ borderRadius: 'var(--radius-full)' }}
         direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
       >
-        <Tooltip content="Researchable">
         <IconButton
           variant={
             tankFilters.types?.includes(TankType.RESEARCHABLE)
@@ -294,8 +239,6 @@ export function FilterControl({ compact }: FilterControlProps) {
         >
           <ResearchedIcon style={{ width: '1em', height: '1em' }} />
         </IconButton>
-        </Tooltip>
-        <Tooltip content="Premium">
         <IconButton
           variant={
             tankFilters.types?.includes(TankType.PREMIUM) ? 'solid' : 'soft'
@@ -330,8 +273,6 @@ export function FilterControl({ compact }: FilterControlProps) {
             <ResearchedIcon style={{ width: '1em', height: '1em' }} />
           </Text>
         </IconButton>
-        </Tooltip>
-        <Tooltip content="Collector">
         <IconButton
           variant={
             tankFilters.types?.includes(TankType.COLLECTOR) ? 'solid' : 'soft'
@@ -366,7 +307,6 @@ export function FilterControl({ compact }: FilterControlProps) {
             <ResearchedIcon style={{ width: '1em', height: '1em' }} />
           </Text>
         </IconButton>
-        </Tooltip>
       </Flex>
 
       <Flex
@@ -374,7 +314,6 @@ export function FilterControl({ compact }: FilterControlProps) {
         style={{ borderRadius: 'var(--radius-full)' }}
         direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
       >
-        <Tooltip content="Include test tank">
         <IconButton
           variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
           radius="none"
@@ -388,47 +327,32 @@ export function FilterControl({ compact }: FilterControlProps) {
             style={{ width: '1em', height: '1em', color: 'currentColor' }}
           />
         </IconButton>
-        </Tooltip>
-        <Tooltip content="Exclude test tank">
         <IconButton
           variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
           radius="none"
           color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
           highContrast
-            onClick={() =>
+          onClick={() => {
-              // mutateTankFilters((draft) => {
-              //   draft.testing = 'exclude';
-              // })
-              {
             $tankFilters.setKey('testing', 'exclude');
-              }
+          }}
-            }
         >
           <ScienceOffIcon
             style={{ width: '1em', height: '1em', color: 'currentColor' }}
           />
         </IconButton>
-        </Tooltip>
-        <Tooltip content="Only test tank">
         <IconButton
           variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
           radius="none"
           color={tankFilters.testing === 'only' ? undefined : 'gray'}
           highContrast
-            onClick={() =>
+          onClick={() => {
-              // mutateTankFilters((draft) => {
-              //   draft.testing = 'only';
-              // })
-              {
             $tankFilters.setKey('testing', 'only');
-              }
+          }}
-            }
         >
           <ScienceIcon
             style={{ width: '1em', height: '1em', color: 'currentColor' }}
           />
         </IconButton>
-        </Tooltip>
       </Flex>
 
       <Box>