feat: filter tooltips

src/app/tools/tankopedia/components/FilterControl.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ReloadIcon } from '@radix-ui/react-icons';
-import { Box, Flex, IconButton, Text } from '@radix-ui/themes';
+import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
 import { times } from 'lodash';
 import { use } from 'react';
 import { classIcons } from '../../../../components/ClassIcon';
@@ -14,6 +14,7 @@ import { asset } from '../../../../core/blitzkit/asset';
 import { gameDefinitions } from '../../../../core/blitzkit/gameDefinitions';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
+import strings from '../../../../lang/en-US.json';
 import * as TankFilters from '../../../../stores/tankFilters';
 
 interface FilterControlProps {
@@ -39,6 +40,7 @@ export function FilterControl({ compact }: FilterControlProps) {
             const selected = filters.tiers?.includes(tier);
 
             return (
+              <Tooltip key={tier} content={`Tier ${tier}`}>
                 <IconButton
                   key={tier}
                   variant={selected ? 'solid' : 'soft'}
@@ -57,6 +59,7 @@ export function FilterControl({ compact }: FilterControlProps) {
                 >
                   <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
                 </IconButton>
+              </Tooltip>
             );
           })}
         </Flex>
@@ -66,6 +69,7 @@ export function FilterControl({ compact }: FilterControlProps) {
             const selected = filters.tiers?.includes(tier);
 
             return (
+              <Tooltip key={tier} content={`Tier ${tier}`}>
                 <IconButton
                   key={tier}
                   variant={selected ? 'solid' : 'soft'}
@@ -84,6 +88,7 @@ export function FilterControl({ compact }: FilterControlProps) {
                 >
                   <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
                 </IconButton>
+              </Tooltip>
             );
           })}
         </Flex>
@@ -101,8 +106,15 @@ export function FilterControl({ compact }: FilterControlProps) {
               const selected = filters.nations?.includes(nation);
 
               return (
-                <IconButton
+                <Tooltip
+                  content={
+                    strings.common.nations[
+                      nation as keyof typeof strings.common.nations
+                    ]
+                  }
                   key={nation}
+                >
+                  <IconButton
                     variant={selected ? 'solid' : 'soft'}
                     color={selected ? undefined : 'gray'}
                     highContrast
@@ -124,6 +136,7 @@ export function FilterControl({ compact }: FilterControlProps) {
                       src={asset(`flags/circle/${nation}.webp`)}
                     />
                   </IconButton>
+                </Tooltip>
               );
             })}
         </Flex>
@@ -134,6 +147,14 @@ export function FilterControl({ compact }: FilterControlProps) {
               const selected = filters.nations?.includes(nation);
 
               return (
+                <Tooltip
+                  content={
+                    strings.common.nations[
+                      nation as keyof typeof strings.common.nations
+                    ]
+                  }
+                  key={nation}
+                >
                   <IconButton
                     key={nation}
                     style={{ flex: 1 }}
@@ -158,6 +179,7 @@ export function FilterControl({ compact }: FilterControlProps) {
                       src={asset(`flags/circle/${nation}.webp`)}
                     />
                   </IconButton>
+                </Tooltip>
               );
             })}
         </Flex>
@@ -173,8 +195,11 @@ export function FilterControl({ compact }: FilterControlProps) {
           const selected = filters.classes?.includes(tankClass);
 
           return (
-            <IconButton
+            <Tooltip
+              content={strings.common.tank_class_medium[tankClass]}
               key={tankClass}
+            >
+              <IconButton
                 variant={selected ? 'solid' : 'soft'}
                 radius="none"
                 color={selected ? undefined : 'gray'}
@@ -193,6 +218,7 @@ export function FilterControl({ compact }: FilterControlProps) {
               >
                 <Icon style={{ width: '1em', height: '1em' }} />
               </IconButton>
+            </Tooltip>
           );
         })}
       </Flex>
@@ -202,6 +228,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         style={{ borderRadius: 'var(--radius-full)' }}
         direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
       >
+        <Tooltip content="Researchable">
           <IconButton
             variant={filters.types?.includes('researchable') ? 'solid' : 'soft'}
             radius="none"
@@ -210,7 +237,9 @@ export function FilterControl({ compact }: FilterControlProps) {
             onClick={() =>
               mutateTankFilters((draft) => {
                 if (draft.types?.includes('researchable')) {
-                draft.types = draft.types?.filter((t) => t !== 'researchable');
+                  draft.types = draft.types?.filter(
+                    (t) => t !== 'researchable',
+                  );
                 } else {
                   draft.types = [...(draft.types ?? []), 'researchable'];
                 }
@@ -219,6 +248,8 @@ export function FilterControl({ compact }: FilterControlProps) {
           >
             <ResearchedIcon style={{ width: '1em', height: '1em' }} />
           </IconButton>
+        </Tooltip>
+        <Tooltip content="Premium">
           <IconButton
             variant={filters.types?.includes('premium') ? 'solid' : 'soft'}
             radius="none"
@@ -241,6 +272,8 @@ export function FilterControl({ compact }: FilterControlProps) {
               <ResearchedIcon style={{ width: '1em', height: '1em' }} />
             </Text>
           </IconButton>
+        </Tooltip>
+        <Tooltip content="Collector">
           <IconButton
             variant={filters.types?.includes('collector') ? 'solid' : 'soft'}
             radius="none"
@@ -263,6 +296,7 @@ export function FilterControl({ compact }: FilterControlProps) {
               <ResearchedIcon style={{ width: '1em', height: '1em' }} />
             </Text>
           </IconButton>
+        </Tooltip>
       </Flex>
 
       <Flex
@@ -270,6 +304,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         style={{ borderRadius: 'var(--radius-full)' }}
         direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
       >
+        <Tooltip content="Include test tank">
           <IconButton
             variant={filters.testing === 'include' ? 'solid' : 'soft'}
             radius="none"
@@ -285,6 +320,8 @@ export function FilterControl({ compact }: FilterControlProps) {
               style={{ width: '1em', height: '1em', color: 'currentColor' }}
             />
           </IconButton>
+        </Tooltip>
+        <Tooltip content="Exclude test tank">
           <IconButton
             variant={filters.testing === 'exclude' ? 'solid' : 'soft'}
             radius="none"
@@ -300,6 +337,8 @@ export function FilterControl({ compact }: FilterControlProps) {
               style={{ width: '1em', height: '1em', color: 'currentColor' }}
             />
           </IconButton>
+        </Tooltip>
+        <Tooltip content="Only test tank">
           <IconButton
             variant={filters.testing === 'only' ? 'solid' : 'soft'}
             radius="none"
@@ -315,6 +354,7 @@ export function FilterControl({ compact }: FilterControlProps) {
               style={{ width: '1em', height: '1em', color: 'currentColor' }}
             />
           </IconButton>
+        </Tooltip>
       </Flex>
 
       <Box>

src/lang/en-US.json

@@ -58,6 +58,13 @@
       "AT-SPG": "TD"
     },
 
+    "tank_class_medium": {
+      "lightTank": "Light",
+      "mediumTank": "Medium",
+      "heavyTank": "Heavy",
+      "AT-SPG": "Tank destroyer"
+    },
+
     "tree_type": {
       "researchable": "Tech tree",
       "premium": "Premium",