feat: sort label

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -502,7 +502,7 @@ export function Characteristics() {
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">
           <Heading size="5">Maneuverability</Heading>
-          <Info name="Speed" unit="km/hr" />
+          <Info name="Speed" unit="kph" />
           <InfoWithDelta decimals={0} indent name="Forwards">
             {stats.speedForwards}
           </InfoWithDelta>

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

@@ -1,4 +1,4 @@
-import { Callout, Flex } from '@radix-ui/themes';
+import { Callout, Flex, Text } from '@radix-ui/themes';
 import { go } from 'fuzzysort';
 import { times } from 'lodash';
 import { memo, use, useMemo } from 'react';
@@ -18,6 +18,7 @@ import {
 } from '../../../../core/blitzkit/tankDefinitions';
 import { tankopediaFilterTank } from '../../../../core/blitzkit/tankopediaFilterTank';
 import { unionBoundingBox } from '../../../../core/blitzkit/unionBoundingBox';
+import { SORT_NAMES, SORT_UNITS } from '../../../../stores/tankopedia';
 import { useTankopediaFilters } from '../../../../stores/tankopediaFilters';
 import { FilterControl } from './FilterControl';
 import { NoResults } from './NoResults';
@@ -351,6 +352,18 @@ export const Results = memo(() => {
 
       {!filters.search && !filters.searching && <FilterControl />}
 
+      {filters.sort.by !== 'meta.none' && (
+        <Flex py="2" mt="2" justify="center">
+          <Text color="gray">
+            Sorting by {SORT_NAMES[filters.sort.by]}
+            {SORT_UNITS[filters.sort.by] === undefined
+              ? ''
+              : ` (${SORT_UNITS[filters.sort.by]})`}
+            , {filters.sort.direction}
+          </Text>
+        </Flex>
+      )}
+
       {filters.testing === 'only' && (
         <Flex justify="center" mt="4">
           <Callout.Root color="amber">

src/stores/tankopedia.ts

@@ -134,6 +134,35 @@ export const SORT_NAMES = {
   'maneuverability.traverseSpeed': 'traverse speed',
 } as const;
 
+export const SORT_UNITS: Record<TankopediaSortBy, string | undefined> = {
+  'meta.none': undefined,
+  'survivability.health': 'hp',
+  'fire.aimTime': 's',
+  'fire.caliber': 'mm',
+  'fire.damage': 'hp',
+  'fire.dispersionMoving': 'm',
+  'fire.dispersionStill': 'm',
+  'fire.dpm': undefined,
+  'fire.gunDepression': '°',
+  'fire.gunElevation': '°',
+  'fire.premiumPenetration': 'mm',
+  'fire.reload': 's',
+  'fire.shellVelocity': 'm/s',
+  'fire.standardPenetration': 'mm',
+  'maneuverability.backwardsSpeed': 'kph',
+  'maneuverability.forwardsSpeed': 'kph',
+  'maneuverability.power': 'hp',
+  'maneuverability.powerToWeight': 'hp/tn',
+  'maneuverability.traverseSpeed': '°/s',
+  'maneuverability.weight': 'tn',
+  'survivability.camouflageMoving': '%',
+  'survivability.camouflageShooting': '%',
+  'survivability.camouflageStill': '%',
+  'survivability.length': 'm',
+  'survivability.viewRange': 'm',
+  'survivability.volume': 'm^3',
+};
+
 export const useTankopediaPersistent = create<TankopediaPersistent>()(
   persist(
     subscribeWithSelector<TankopediaPersistent>(() => ({