feat: compact search

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

@@ -17,18 +17,22 @@ import {
   useTankopediaFilters,
 } from '../../../../stores/tankopediaFilters';
 
-export function FilterControl() {
+interface FilterControlProps {
+  compact?: boolean;
+}
+
+export function FilterControl({ compact }: FilterControlProps) {
   const awaitedGameDefinitions = use(gameDefinitions);
   const filters = useTankopediaFilters();
 
   return (
     <Flex height="fit-content" gap="2" align="start" justify="center">
       <Flex
-        direction={{ initial: 'row', sm: 'column' }}
+        direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
         overflow="hidden"
         style={{ borderRadius: 'var(--radius-5)' }}
       >
-        <Flex direction={{ sm: 'row', initial: 'column' }}>
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
           {times(5, (index) => {
             const tier = (index + 1) as Tier;
             const selected = filters.tier === tier;
@@ -51,7 +55,7 @@ export function FilterControl() {
             );
           })}
         </Flex>
-        <Flex direction={{ sm: 'row', initial: 'column' }}>
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
           {times(5, (index) => {
             const tier = (index + 6) as Tier;
             const selected = filters.tier === tier;
@@ -77,11 +81,11 @@ export function FilterControl() {
       </Flex>
 
       <Flex
-        direction={{ initial: 'row', sm: 'column' }}
+        direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
         overflow="hidden"
         style={{ borderRadius: 'var(--radius-5)' }}
       >
-        <Flex direction={{ sm: 'row', initial: 'column' }}>
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
           {awaitedGameDefinitions.nations
             .slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
             .map((nation) => {
@@ -109,7 +113,7 @@ export function FilterControl() {
               );
             })}
         </Flex>
-        <Flex direction={{ sm: 'row', initial: 'column' }}>
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
           {awaitedGameDefinitions.nations
             .slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
             .map((nation) => {
@@ -143,7 +147,7 @@ export function FilterControl() {
       <Flex
         overflow="hidden"
         style={{ borderRadius: 'var(--radius-full)' }}
-        direction={{ sm: 'row', initial: 'column' }}
+        direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
       >
         {TANK_CLASSES.map((tankClass) => {
           const Icon = classIcons[tankClass];
@@ -172,7 +176,7 @@ export function FilterControl() {
       <Flex
         overflow="hidden"
         style={{ borderRadius: 'var(--radius-full)' }}
-        direction={{ sm: 'row', initial: 'column' }}
+        direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
       >
         <IconButton
           variant={filters.type === 'researchable' ? 'solid' : 'soft'}
@@ -229,7 +233,7 @@ export function FilterControl() {
       <Flex
         overflow="hidden"
         style={{ borderRadius: 'var(--radius-full)' }}
-        direction={{ sm: 'row', initial: 'column' }}
+        direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
       >
         <IconButton
           variant={filters.testing === 'include' ? 'solid' : 'soft'}

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

@@ -1,404 +0,0 @@
-import { Callout, Flex, Text } from '@radix-ui/themes';
-import { go } from 'fuzzysort';
-import { times } from 'lodash';
-import { memo, use, useMemo } from 'react';
-import { ExperimentIcon } from '../../../../components/ExperimentIcon';
-import { TANK_CLASSES } from '../../../../components/Tanks/components/Item/constants';
-import { resolveNearPenetration } from '../../../../core/blitz/resolveNearPenetration';
-import { gameDefinitions } from '../../../../core/blitzkit/gameDefinitions';
-import { modelDefinitions } from '../../../../core/blitzkit/modelDefinitions';
-import { normalizeBoundingBox } from '../../../../core/blitzkit/normalizeBoundingBox';
-import { resolveDpm } from '../../../../core/blitzkit/resolveDpm';
-import { resolveReload } from '../../../../core/blitzkit/resolveReload';
-import {
-  TankDefinition,
-  tankDefinitions,
-  tankNames,
-  tanksDefinitionsArray,
-} 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';
-import { SearchBar } from './SearchBar';
-import { SkeletonTankCard } from './SkeletonTankCard';
-import { TankCard } from './TankCard';
-import { TankCardWrapper } from './TankCardWrapper';
-import { treeTypeOrder } from './TankSearch/constants';
-
-export const Results = memo(() => {
-  const awaitedGameDefinitions = use(gameDefinitions);
-  const awaitedModelDefinitions = use(modelDefinitions);
-  const awaitedTankDefinitions = use(tankDefinitions);
-  const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
-  const awaitedTankNames = use(tankNames);
-  const filters = useTankopediaFilters();
-  const tanks = useMemo(() => {
-    if (filters.search === undefined) {
-      const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
-        tankopediaFilterTank(filters, tank),
-      );
-      let sorted: TankDefinition[];
-
-      switch (filters.sort.by) {
-        case 'meta.none':
-          sorted = filtered
-            .sort(
-              (a, b) =>
-                treeTypeOrder.indexOf(b.treeType) -
-                treeTypeOrder.indexOf(a.treeType),
-            )
-            .sort(
-              (a, b) =>
-                TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class),
-            )
-            .sort(
-              (a, b) =>
-                awaitedGameDefinitions.nations.indexOf(b.nation) -
-                awaitedGameDefinitions.nations.indexOf(a.nation),
-            );
-          break;
-
-        case 'survivability.health': {
-          sorted = filtered.sort((a, b) => {
-            const aHealth = a.health + a.turrets.at(-1)!.health;
-            const bHealth = b.health + b.turrets.at(-1)!.health;
-
-            return aHealth - bHealth;
-          });
-          break;
-        }
-
-        case 'survivability.viewRange':
-          sorted = filtered.sort(
-            (a, b) => a.turrets.at(-1)!.viewRange - b.turrets.at(-1)!.viewRange,
-          );
-          break;
-
-        case 'survivability.camouflageStill':
-          sorted = filtered.sort(
-            (a, b) => a.camouflage.still - b.camouflage.still,
-          );
-          break;
-
-        case 'survivability.camouflageMoving':
-          sorted = filtered.sort(
-            (a, b) => a.camouflage.moving - b.camouflage.moving,
-          );
-          break;
-
-        case 'survivability.camouflageShooting':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.camouflage.still *
-                a.turrets.at(-1)!.guns.at(-1)!.camouflageLoss -
-              b.camouflage.still *
-                b.turrets.at(-1)!.guns.at(-1)!.camouflageLoss,
-          );
-          break;
-
-        case 'survivability.volume':
-          sorted = filtered.sort((a, b) => {
-            const aTankModelDefinition = awaitedModelDefinitions[a.id];
-            const bTankModelDefinition = awaitedModelDefinitions[b.id];
-            const aTurretModelDefinition =
-              aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-            const bTurretModelDefinition =
-              bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-            const aSize = normalizeBoundingBox(
-              unionBoundingBox(
-                aTankModelDefinition.boundingBox,
-                aTurretModelDefinition.boundingBox,
-              ),
-            );
-            const bSize = normalizeBoundingBox(
-              unionBoundingBox(
-                bTankModelDefinition.boundingBox,
-                bTurretModelDefinition.boundingBox,
-              ),
-            );
-            const aVolume = aSize[0] * aSize[1] * aSize[2];
-            const bVolume = bSize[0] * bSize[1] * bSize[2];
-
-            return aVolume - bVolume;
-          });
-          break;
-
-        case 'survivability.length':
-          sorted = filtered.sort((a, b) => {
-            const aTankModelDefinition = awaitedModelDefinitions[a.id];
-            const bTankModelDefinition = awaitedModelDefinitions[b.id];
-            const aTurretModelDefinition =
-              aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-            const bTurretModelDefinition =
-              bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-            const aSize = normalizeBoundingBox(
-              unionBoundingBox(
-                aTankModelDefinition.boundingBox,
-                aTurretModelDefinition.boundingBox,
-              ),
-            );
-            const bSize = normalizeBoundingBox(
-              unionBoundingBox(
-                bTankModelDefinition.boundingBox,
-                bTurretModelDefinition.boundingBox,
-              ),
-            );
-            const aLength = Math.max(aSize[0], aSize[1], aSize[2]);
-            const bLength = Math.max(bSize[0], bSize[1], bSize[2]);
-
-            return aLength - bLength;
-          });
-          break;
-
-        case 'fire.dpm':
-          sorted = filtered.sort(
-            (a, b) =>
-              resolveDpm(
-                a.turrets.at(-1)!.guns.at(-1)!,
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0],
-              ) -
-              resolveDpm(
-                b.turrets.at(-1)!.guns.at(-1)!,
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0],
-              ),
-          );
-          break;
-
-        case 'fire.reload':
-          sorted = filtered.sort(
-            (a, b) =>
-              resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
-              resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
-          );
-          break;
-
-        case 'fire.caliber':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
-              b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber,
-          );
-          break;
-
-        case 'fire.standardPenetration':
-          sorted = filtered.sort(
-            (a, b) =>
-              resolveNearPenetration(
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
-              ) -
-              resolveNearPenetration(
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
-              ),
-          );
-          break;
-
-        case 'fire.premiumPenetration':
-          sorted = filtered.sort(
-            (a, b) =>
-              resolveNearPenetration(
-                a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0,
-              ) -
-              resolveNearPenetration(
-                b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0,
-              ),
-          );
-          break;
-
-        case 'fire.damage':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor -
-              b.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor,
-          );
-          break;
-
-        case 'fire.shellVelocity':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.turrets.at(-1)!.guns.at(-1)!.shells[0].speed -
-              b.turrets.at(-1)!.guns.at(-1)!.shells[0].speed,
-          );
-          break;
-
-        case 'fire.aimTime':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.turrets.at(-1)!.guns.at(-1)!.aimTime -
-              b.turrets.at(-1)!.guns.at(-1)!.aimTime,
-          );
-          break;
-
-        case 'fire.dispersionStill':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.turrets.at(-1)!.guns.at(-1)!.dispersion.base -
-              b.turrets.at(-1)!.guns.at(-1)!.dispersion.base,
-          );
-          break;
-
-        case 'fire.dispersionMoving':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.tracks.at(-1)!.dispersion.move -
-              b.tracks.at(-1)!.dispersion.move,
-          );
-          break;
-
-        case 'fire.gunDepression':
-          sorted = filtered.sort(
-            (a, b) =>
-              awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[
-                a.turrets.at(-1)!.guns.at(-1)!.id
-              ].pitch.max +
-              (awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0) -
-              awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[
-                b.turrets.at(-1)!.guns.at(-1)!.id
-              ].pitch.max -
-              (awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0),
-          );
-          break;
-
-        case 'fire.gunElevation':
-          sorted = filtered.sort(
-            (a, b) =>
-              awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[
-                b.turrets.at(-1)!.guns.at(-1)!.id
-              ].pitch.min +
-              (awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0) -
-              awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[
-                a.turrets.at(-1)!.guns.at(-1)!.id
-              ].pitch.min -
-              (awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0),
-          );
-          break;
-
-        case 'maneuverability.forwardsSpeed':
-          sorted = filtered.sort((a, b) => a.speed.forwards - b.speed.forwards);
-          break;
-
-        case 'maneuverability.backwardsSpeed':
-          sorted = filtered.sort(
-            (a, b) => a.speed.backwards - b.speed.backwards,
-          );
-          break;
-
-        case 'maneuverability.power':
-          sorted = filtered.sort(
-            (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
-          );
-          break;
-
-        case 'maneuverability.powerToWeight':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.engines.at(-1)!.power /
-                (a.weight +
-                  a.engines.at(-1)!.weight +
-                  a.tracks.at(-1)!.weight +
-                  a.turrets.at(-1)!.weight +
-                  a.turrets.at(-1)!.guns.at(-1)!.weight) -
-              b.engines.at(-1)!.power /
-                (b.weight +
-                  b.engines.at(-1)!.weight +
-                  b.tracks.at(-1)!.weight +
-                  b.turrets.at(-1)!.weight +
-                  b.turrets.at(-1)!.guns.at(-1)!.weight),
-          );
-          break;
-
-        case 'maneuverability.weight':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.weight +
-              a.engines.at(-1)!.weight +
-              a.tracks.at(-1)!.weight +
-              a.turrets.at(-1)!.weight +
-              a.turrets.at(-1)!.guns.at(-1)!.weight -
-              (b.weight +
-                b.engines.at(-1)!.weight +
-                b.tracks.at(-1)!.weight +
-                b.turrets.at(-1)!.weight +
-                b.turrets.at(-1)!.guns.at(-1)!.weight),
-          );
-          break;
-
-        case 'maneuverability.traverseSpeed':
-          sorted = filtered.sort(
-            (a, b) =>
-              a.tracks.at(-1)!.traverseSpeed - b.tracks.at(-1)!.traverseSpeed,
-          );
-          break;
-      }
-
-      return filters.sort.direction === 'ascending' ? sorted : sorted.reverse();
-    } else {
-      const searchedRaw = go(filters.search, awaitedTankNames, {
-        key: 'combined',
-        limit: 25,
-      });
-      const searchedTanks = searchedRaw.map(
-        (result) => awaitedTankDefinitions[result.obj.id],
-      );
-      return searchedTanks;
-    }
-  }, [filters]);
-
-  return (
-    <Flex direction="column" gap="4" flexGrow="1">
-      <SearchBar topResult={tanks?.[0]} />
-
-      {!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">
-            <Callout.Icon>
-              <ExperimentIcon style={{ width: '1em', height: '1em' }} />
-            </Callout.Icon>
-            <Callout.Text>
-              Tanks in testing are subject to change and many not represent the
-              final product.
-            </Callout.Text>
-          </Callout.Root>
-        </Flex>
-      )}
-
-      {!filters.searching && (
-        <>
-          {tanks.length > 0 && (
-            <TankCardWrapper>
-              {tanks.map((tank) => (
-                <TankCard key={tank.id} tank={tank} />
-              ))}
-            </TankCardWrapper>
-          )}
-
-          {tanks.length === 0 && <NoResults type="search" />}
-        </>
-      )}
-
-      {filters.searching && (
-        <TankCardWrapper>
-          {times(Math.round(10 + 10 * Math.random()), (index) => (
-            <SkeletonTankCard key={index} />
-          ))}
-        </TankCardWrapper>
-      )}
-    </Flex>
-  );
-});

src/app/tools/tankopedia/components/TankCard.css.ts

@@ -3,6 +3,7 @@ import { createVar, style } from '@vanilla-extract/css';
 export const cardBackgroundVar = createVar();
 
 export const card = style({
+  cursor: 'pointer',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',

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

@@ -17,9 +17,10 @@ import * as styles from './TankCard.css';
 
 interface TankCardProps {
   tank: TankDefinition;
+  onSelect?: (tank: TankDefinition) => void;
 }
 
-export function TankCard({ tank }: TankCardProps) {
+export function TankCard({ tank, onSelect }: TankCardProps) {
   const awaitedModelDefinitions = use(modelDefinitions);
   const Icon = classIcons[tank.class];
   // const link = useRef<HTMLAnchorElement>(null);
@@ -131,7 +132,7 @@ export function TankCard({ tank }: TankCardProps) {
 
   return (
     <Link
-      // ref={link}
+      tabIndex={onSelect ? 0 : undefined}
       size="1"
       color={
         tank.treeType === 'collector'
@@ -142,7 +143,8 @@ export function TankCard({ tank }: TankCardProps) {
       }
       highContrast={tank.treeType === 'researchable'}
       underline="hover"
-      href={`/tools/tankopedia/${tank.id}`}
+      href={onSelect ? undefined : `/tools/tankopedia/${tank.id}`}
+      onClick={onSelect ? () => onSelect(tank) : undefined}
       className={styles.card}
       style={assignInlineVars({
         [styles.cardBackgroundVar]: `top left / contain no-repeat url(${asset(`flags/scratched/${tank.nation}.webp`)})`,

src/app/tools/tankopedia/components/TankSearch/components/CompactSearchResultRow.tsx

@@ -1,51 +0,0 @@
-import { Button, Flex, Text } from '@radix-ui/themes';
-import { SmallTankIcon } from '../../../../../../components/SmallTankIcon';
-import { TankDefinition } from '../../../../../../core/blitzkit/tankDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
-
-interface CompactSearchResultRowProps {
-  tanks: TankDefinition[];
-  onSelect?: (tank: TankDefinition) => void;
-}
-
-export function CompactSearchResultRow({
-  tanks,
-  onSelect = () => {},
-}: CompactSearchResultRowProps) {
-  return (
-    <Flex justify="center">
-      <Flex direction="column" gap="2" align="start">
-        {tanks.map((tank) => (
-          <Button
-            key={tank.id}
-            variant="ghost"
-            style={{ width: '100%' }}
-            onClick={() => onSelect(tank)}
-          >
-            <Flex gap="2" align="start" style={{ width: '100%' }}>
-              <Text align="right" color="gray" style={{ width: 24 }}>
-                {TIER_ROMAN_NUMERALS[tank.tier]}
-              </Text>
-
-              <Text color={tank.treeType === 'collector' ? 'blue' : 'amber'}>
-                <Flex gap="2" align="center">
-                  <SmallTankIcon id={tank.id} size={16} />
-
-                  <div
-                    style={{
-                      display: 'block',
-                      color:
-                        tank.treeType === 'researchable' ? 'white' : undefined,
-                    }}
-                  >
-                    {tank.name}
-                  </div>
-                </Flex>
-              </Text>
-            </Flex>
-          </Button>
-        ))}
-      </Flex>
-    </Flex>
-  );
-}

src/app/tools/tankopedia/components/TankSearch/components/Options/index.css.ts

@@ -1,17 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const splitFilters = style({
-  '@media': {
-    'screen and (min-width: 513px)': {
-      display: 'none',
-    },
-  },
-});
-
-export const oneLineFilters = style({
-  '@media': {
-    'screen and (max-width: 512px)': {
-      display: 'none',
-    },
-  },
-});

src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx

@@ -1,354 +0,0 @@
-'use client';
-
-import { CaretDownIcon } from '@radix-ui/react-icons';
-import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
-import { use } from 'react';
-import { Flag } from '../../../../../../../components/Flag';
-import {} from '../../../../../../../components/Tanks';
-import {
-  TANK_CLASSES,
-  TREE_TYPES,
-  TREE_TYPE_ICONS,
-  TREE_TYPE_IMAGES,
-} from '../../../../../../../components/Tanks/components/Item/constants';
-import { gameDefinitions } from '../../../../../../../core/blitzkit/gameDefinitions';
-import {
-  TIERS,
-  TIER_ROMAN_NUMERALS,
-} from '../../../../../../../core/blitzkit/tankDefinitions/constants';
-import mutateTankopediaPersistent, {
-  TankopediaTestTankDisplay,
-  useTankopediaPersistent,
-} from '../../../../../../../stores/tankopedia';
-import * as styles from './index.css';
-
-export function Options() {
-  const awaitedGameDefinitions = use(gameDefinitions);
-  const filters = useTankopediaPersistent((state) => state.filters);
-
-  return (
-    <Flex gap="2" wrap="wrap" justify="center">
-      <Flex>
-        {TREE_TYPES.map((type, index) => (
-          <Button
-            key={type}
-            color={filters.treeTypes.includes(type) ? undefined : 'gray'}
-            variant={filters.treeTypes.includes(type) ? 'surface' : 'soft'}
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius:
-                index === TREE_TYPES.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === TREE_TYPES.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopediaPersistent((draft) => {
-                if (draft.filters.treeTypes.includes(type)) {
-                  draft.filters.treeTypes = draft.filters.treeTypes.filter(
-                    (preexistingType) => preexistingType !== type,
-                  );
-                } else {
-                  draft.filters.treeTypes.push(type);
-                }
-              })
-            }
-          >
-            <img
-              alt={type}
-              src={TREE_TYPE_IMAGES[type]}
-              style={{ width: '1em', height: '1em' }}
-            />
-          </Button>
-        ))}
-      </Flex>
-      <Flex className={styles.oneLineFilters}>
-        {awaitedGameDefinitions.nations.map((nation, index) => (
-          <Button
-            key={nation}
-            color={filters.nations.includes(nation) ? undefined : 'gray'}
-            variant={filters.nations.includes(nation) ? 'surface' : 'soft'}
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius:
-                index === awaitedGameDefinitions.nations.length - 1
-                  ? undefined
-                  : 0,
-              borderBottomRightRadius:
-                index === awaitedGameDefinitions.nations.length - 1
-                  ? undefined
-                  : 0,
-            }}
-            onClick={() =>
-              mutateTankopediaPersistent((draft) => {
-                if (draft.filters.nations.includes(nation)) {
-                  draft.filters.nations = draft.filters.nations.filter(
-                    (preexistingType) => preexistingType !== nation,
-                  );
-                } else {
-                  draft.filters.nations.push(nation);
-                }
-              })
-            }
-          >
-            <Flag nation={nation} />
-          </Button>
-        ))}
-      </Flex>
-      <Flex>
-        {[...TANK_CLASSES].map((type, index) => (
-          <Button
-            key={type}
-            color={filters.types.includes(type) ? undefined : 'gray'}
-            variant={filters.types.includes(type) ? 'surface' : 'soft'}
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius:
-                index === TANK_CLASSES.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === TANK_CLASSES.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopediaPersistent((draft) => {
-                if (draft.filters.types.includes(type)) {
-                  draft.filters.types = draft.filters.types.filter(
-                    (preexistingType) => preexistingType !== type,
-                  );
-                } else {
-                  draft.filters.types.push(type);
-                }
-              })
-            }
-          >
-            <img
-              alt={type}
-              src={TREE_TYPE_ICONS.researchable[type]}
-              style={{ width: '1em', height: '1em' }}
-            />
-          </Button>
-        ))}
-      </Flex>
-      <Flex className={styles.oneLineFilters}>
-        {[...TIERS].map((tier, index) => (
-          <Button
-            key={tier}
-            color={filters.tiers.includes(tier) ? undefined : 'gray'}
-            variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius: index === TIERS.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === TIERS.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopediaPersistent((draft) => {
-                if (draft.filters.tiers.includes(tier)) {
-                  draft.filters.tiers = draft.filters.tiers.filter(
-                    (preexistingTier) => preexistingTier !== tier,
-                  );
-                } else {
-                  draft.filters.tiers.push(tier);
-                }
-              })
-            }
-          >
-            {TIER_ROMAN_NUMERALS[tier]}
-          </Button>
-        ))}
-      </Flex>{' '}
-      <Flex
-        direction="column"
-        className={styles.splitFilters}
-        style={{ width: '100%' }}
-      >
-        <Flex>
-          {[...TIERS].slice(0, 5).map((tier, index) => (
-            <Button
-              key={tier}
-              color={filters.tiers.includes(tier) ? undefined : 'gray'}
-              variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
-              style={{
-                flex: 1,
-                margin: -0.5,
-                borderTopLeftRadius: index === 0 ? 16 : 0,
-                borderBottomLeftRadius: 0,
-                borderTopRightRadius:
-                  index === TIERS.length - Math.round(TIERS.length / 2) - 1
-                    ? 16
-                    : 0,
-                borderBottomRightRadius: 0,
-              }}
-              onClick={() =>
-                mutateTankopediaPersistent((draft) => {
-                  if (draft.filters.tiers.includes(tier)) {
-                    draft.filters.tiers = draft.filters.tiers.filter(
-                      (preexistingTier) => preexistingTier !== tier,
-                    );
-                  } else {
-                    draft.filters.tiers.push(tier);
-                  }
-                })
-              }
-            >
-              {TIER_ROMAN_NUMERALS[tier]}
-            </Button>
-          ))}
-        </Flex>
-        <Flex>
-          {[...TIERS].slice(5).map((tier, index) => (
-            <Button
-              key={tier}
-              color={filters.tiers.includes(tier) ? undefined : 'gray'}
-              variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
-              style={{
-                flex: 1,
-                margin: -0.5,
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: index === 0 ? 16 : 0,
-                borderTopRightRadius: 0,
-                borderBottomRightRadius:
-                  index === TIERS.length - Math.round(TIERS.length / 2) - 1
-                    ? 16
-                    : 0,
-              }}
-              onClick={() =>
-                mutateTankopediaPersistent((draft) => {
-                  if (draft.filters.tiers.includes(tier)) {
-                    draft.filters.tiers = draft.filters.tiers.filter(
-                      (preexistingTier) => preexistingTier !== tier,
-                    );
-                  } else {
-                    draft.filters.tiers.push(tier);
-                  }
-                })
-              }
-            >
-              {TIER_ROMAN_NUMERALS[tier]}
-            </Button>
-          ))}
-        </Flex>
-      </Flex>
-      <Flex
-        direction="column"
-        className={styles.splitFilters}
-        style={{ width: '100%' }}
-      >
-        <Flex>
-          {awaitedGameDefinitions.nations.slice(0, 5).map((nation, index) => (
-            <Button
-              key={nation}
-              color={filters.nations.includes(nation) ? undefined : 'gray'}
-              variant={filters.nations.includes(nation) ? 'surface' : 'soft'}
-              style={{
-                flex: 1,
-                margin: -0.5,
-                borderTopLeftRadius: index === 0 ? 16 : 0,
-                borderBottomLeftRadius: 0,
-                borderTopRightRadius:
-                  index ===
-                  awaitedGameDefinitions.nations.length -
-                    Math.round(awaitedGameDefinitions.nations.length / 2)
-                    ? 16
-                    : 0,
-                borderBottomRightRadius:
-                  index === awaitedGameDefinitions.nations.length - 1
-                    ? undefined
-                    : 0,
-              }}
-              onClick={() =>
-                mutateTankopediaPersistent((draft) => {
-                  if (draft.filters.nations.includes(nation)) {
-                    draft.filters.nations = draft.filters.nations.filter(
-                      (preexistingType) => preexistingType !== nation,
-                    );
-                  } else {
-                    draft.filters.nations.push(nation);
-                  }
-                })
-              }
-            >
-              <Flag nation={nation} />
-            </Button>
-          ))}
-        </Flex>
-
-        <Flex>
-          {awaitedGameDefinitions.nations.slice(5).map((nation, index) => (
-            <Button
-              key={nation}
-              color={filters.nations.includes(nation) ? undefined : 'gray'}
-              variant={filters.nations.includes(nation) ? 'surface' : 'soft'}
-              style={{
-                flex: 1,
-                margin: -0.5,
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: index === 0 ? 16 : 0,
-                borderTopRightRadius:
-                  index === awaitedGameDefinitions.nations.length - 1
-                    ? undefined
-                    : 0,
-                borderBottomRightRadius:
-                  index ===
-                  awaitedGameDefinitions.nations.length -
-                    Math.round(awaitedGameDefinitions.nations.length / 2) -
-                    1
-                    ? 16
-                    : 0,
-              }}
-              onClick={() =>
-                mutateTankopediaPersistent((draft) => {
-                  if (draft.filters.nations.includes(nation)) {
-                    draft.filters.nations = draft.filters.nations.filter(
-                      (preexistingType) => preexistingType !== nation,
-                    );
-                  } else {
-                    draft.filters.nations.push(nation);
-                  }
-                })
-              }
-            >
-              <Flag nation={nation} />
-            </Button>
-          ))}
-        </Flex>
-      </Flex>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <Button variant="soft" color="gray">
-            Test tanks
-            <CaretDownIcon />
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.RadioGroup
-            value={filters.test}
-            onValueChange={(value) =>
-              mutateTankopediaPersistent((draft) => {
-                draft.filters.test = value as TankopediaTestTankDisplay;
-              })
-            }
-          >
-            <DropdownMenu.RadioItem value="include">
-              Include
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem value="exclude">
-              Exclude
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem value="only">Only</DropdownMenu.RadioItem>
-          </DropdownMenu.RadioGroup>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </Flex>
-  );
-}

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

@@ -1,175 +0,0 @@
-import { slateDark } from '@radix-ui/colors';
-import { Card, Flex, Inset, Link, Text } from '@radix-ui/themes';
-import { asset } from '../../../../../../core/blitzkit/asset';
-import { TankDefinition } from '../../../../../../core/blitzkit/tankDefinitions';
-import {
-  TANK_ICONS,
-  TANK_ICONS_COLLECTOR,
-  TANK_ICONS_PREMIUM,
-  TIER_ROMAN_NUMERALS,
-} from '../../../../../../core/blitzkit/tankDefinitions/constants';
-import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
-import { theme } from '../../../../../../stitches.config';
-import * as styles from '../../../page.css';
-import { CompactSearchResultRow } from './CompactSearchResultRow';
-
-interface ResultsProps {
-  compact?: boolean;
-  results: TankDefinition[];
-  onSelect?: (tank: TankDefinition) => void;
-}
-
-export function Results({ compact, results, onSelect }: ResultsProps) {
-  const firstChunk = compact
-    ? results.slice(0, Math.ceil(results.length / 2))
-    : [];
-  const secondChunk = compact
-    ? results.slice(Math.ceil(results.length / 2))
-    : [];
-
-  return (
-    <Flex
-      wrap="wrap"
-      gap="2"
-      style={{
-        justifyContent:
-          compact && firstChunk.length > 0 && secondChunk.length > 0
-            ? 'space-around'
-            : 'center',
-      }}
-    >
-      {!compact &&
-        results.map((tank) => (
-          <Link
-            key={tank.id}
-            className={styles.listing}
-            href={`/tools/tankopedia/${tank.id}`}
-            style={{
-              flex: 1,
-              minWidth: 256,
-            }}
-          >
-            <Card
-              key={tank.id}
-              style={{
-                cursor: 'pointer',
-                height: 64,
-                width: '100%',
-              }}
-            >
-              <Inset
-                key={tank.id}
-                style={{
-                  minHeight: 64,
-                  position: 'relative',
-                  display: 'flex',
-                }}
-              >
-                <img
-                  alt={tank.name}
-                  className={styles.flag}
-                  src={asset(`flags/scratched/${tank.nation}.webp`)}
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'contain',
-                    position: 'absolute',
-                  }}
-                />
-
-                <div
-                  className={styles.listingShadow}
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    position: 'absolute',
-                    transition: `box-shadow ${theme.durations.regular}`,
-                  }}
-                />
-
-                <div
-                  style={{
-                    width: 256,
-                    height: 128,
-                  }}
-                  className={styles.listingImage}
-                >
-                  <img
-                    alt={tank.name}
-                    src={tankIcon(tank.id)}
-                    style={{
-                      objectFit: 'contain',
-                      objectPosition: 'left center',
-                    }}
-                  />
-                </div>
-
-                <Flex
-                  align="center"
-                  justify="between"
-                  className={styles.listingLabel}
-                  style={{
-                    position: 'absolute',
-                    bottom: 8,
-                    padding: '0 12px',
-                    width: '100%',
-                    boxSizing: 'border-box',
-                  }}
-                >
-                  <Flex align="center" justify="center" gap="1">
-                    <img
-                      alt={tank.name}
-                      src={
-                        (tank.treeType === 'collector'
-                          ? TANK_ICONS_COLLECTOR
-                          : tank.treeType === 'premium'
-                            ? TANK_ICONS_PREMIUM
-                            : TANK_ICONS)[tank.class]
-                      }
-                      style={{ width: '1em', height: '1em' }}
-                    />
-                    <Text
-                      size="4"
-                      color={
-                        tank.treeType === 'collector'
-                          ? 'blue'
-                          : tank.treeType === 'premium'
-                            ? 'amber'
-                            : undefined
-                      }
-                      weight="medium"
-                      style={{
-                        color:
-                          tank.treeType === 'researchable'
-                            ? slateDark.slate12
-                            : undefined,
-                        whiteSpace: 'nowrap',
-                        maxWidth: 160,
-                        display: 'block',
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden',
-                      }}
-                    >
-                      {tank.name}
-                    </Text>
-                  </Flex>
-
-                  <Text size="4" color="gray" highContrast={false}>
-                    {TIER_ROMAN_NUMERALS[tank.tier]}
-                  </Text>
-                </Flex>
-              </Inset>
-            </Card>
-          </Link>
-        ))}
-
-      {compact && firstChunk.length > 0 && (
-        <CompactSearchResultRow tanks={firstChunk} onSelect={onSelect} />
-      )}
-
-      {compact && secondChunk.length > 0 && (
-        <CompactSearchResultRow tanks={secondChunk} onSelect={onSelect} />
-      )}
-    </Flex>
-  );
-}

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -1,19 +1,8 @@
-import {
-  CaretRightIcon,
-  MagnifyingGlassIcon,
-  TrashIcon,
-} from '@radix-ui/react-icons';
-import {
-  AlertDialog,
-  Button,
-  Flex,
-  Spinner,
-  Text,
-  TextField,
-} from '@radix-ui/themes';
+import { Callout, Flex, Text } from '@radix-ui/themes';
 import { go } from 'fuzzysort';
-import { use, useEffect, useMemo, useRef, useState } from 'react';
-import { isMobileOnly } from 'react-device-detect';
+import { times } from 'lodash';
+import { memo, use, useMemo } from 'react';
+import { ExperimentIcon } from '../../../../../components/ExperimentIcon';
 import { TANK_CLASSES } from '../../../../../components/Tanks/components/Item/constants';
 import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
 import { gameDefinitions } from '../../../../../core/blitzkit/gameDefinitions';
@@ -23,527 +12,400 @@ import { resolveDpm } from '../../../../../core/blitzkit/resolveDpm';
 import { resolveReload } from '../../../../../core/blitzkit/resolveReload';
 import {
   TankDefinition,
+  tankDefinitions,
+  tankNames,
   tanksDefinitionsArray,
 } from '../../../../../core/blitzkit/tankDefinitions';
+import { tankopediaFilterTank } from '../../../../../core/blitzkit/tankopediaFilterTank';
 import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
-import mutateTankopediaPersistent, {
-  SORT_NAMES,
-  useTankopediaPersistent,
-} from '../../../../../stores/tankopedia';
-import { PageTurner } from '../PageTurner';
-import { Sort } from '../Sort';
-import { Options } from './components/Options';
-import { Results } from './components/Results';
+import { SORT_NAMES, SORT_UNITS } from '../../../../../stores/tankopedia';
+import { useTankopediaFilters } from '../../../../../stores/tankopediaFilters';
+import { FilterControl } from '../FilterControl';
+import { NoResults } from '../NoResults';
+import { SearchBar } from '../SearchBar';
+import { SkeletonTankCard } from '../SkeletonTankCard';
+import { TankCard } from '../TankCard';
+import { TankCardWrapper } from '../TankCardWrapper';
 import { treeTypeOrder } from './constants';
 
 interface TankSearchProps {
   compact?: boolean;
   onSelect?: (tank: TankDefinition) => void;
-  onSelectAll?: (tanks: TankDefinition[]) => void;
 }
 
-export function TankSearch({
-  compact,
-  onSelect = () => {},
-  onSelectAll,
-}: TankSearchProps) {
-  const tanksPerPage = (compact ? 16 : 96) * (isMobileOnly ? 0.5 : 1);
+export const TankSearch = memo<TankSearchProps>(({ compact, onSelect }) => {
   const awaitedGameDefinitions = use(gameDefinitions);
-  const filters = useTankopediaPersistent((state) => state.filters);
-  const sort = useTankopediaPersistent((state) => state.sort);
-  const awaitedTanks = use(tanksDefinitionsArray);
   const awaitedModelDefinitions = use(modelDefinitions);
-  const [loaded, setLoaded] = useState(false);
-  const defaultSortedTanks = useMemo(
-    () =>
-      awaitedTanks
-        .sort(
-          (a, b) =>
-            (treeTypeOrder.indexOf(a.treeType) -
-              treeTypeOrder.indexOf(b.treeType)) *
-            (sort.direction === 'descending' ? -1 : 1),
-        )
-        .sort(
-          (a, b) =>
-            (TANK_CLASSES.indexOf(a.class) - TANK_CLASSES.indexOf(b.class)) *
-            (sort.direction === 'descending' ? -1 : 1),
-        )
-        .sort(
-          (a, b) =>
-            (awaitedGameDefinitions.nations.indexOf(a.nation) -
-              awaitedGameDefinitions.nations.indexOf(b.nation)) *
-            (sort.direction === 'descending' ? -1 : 1),
-        ),
-    [],
-  );
-  const input = useRef<HTMLInputElement>(null);
-  const searchableTanks = useMemo(() => {
-    const filtered = defaultSortedTanks.filter(
-      (tank) =>
-        (filters.tiers.length === 0
-          ? true
-          : filters.tiers.includes(tank.tier)) &&
-        (filters.types.length === 0
-          ? true
-          : filters.types.includes(tank.class)) &&
-        (filters.treeTypes.length === 0
-          ? true
-          : filters.treeTypes.includes(tank.treeType)) &&
-        (filters.nations.length === 0
-          ? true
-          : filters.nations.includes(tank.nation)) &&
-        (filters.test === 'include'
-          ? true
-          : filters.test === 'exclude'
-            ? !tank.testing
-            : tank.testing),
-    );
-    let sorted: TankDefinition[] = [];
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
+  const awaitedTankNames = use(tankNames);
+  const filters = useTankopediaFilters();
+  const tanks = useMemo(() => {
+    if (filters.search === undefined) {
+      const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
+        tankopediaFilterTank(filters, tank),
+      );
+      let sorted: TankDefinition[];
 
-    switch (sort.by) {
-      case 'meta.none':
-        sorted = filtered.sort((a, b) => a.tier - b.tier);
-        break;
+      switch (filters.sort.by) {
+        case 'meta.none':
+          sorted = filtered
+            .sort(
+              (a, b) =>
+                treeTypeOrder.indexOf(b.treeType) -
+                treeTypeOrder.indexOf(a.treeType),
+            )
+            .sort(
+              (a, b) =>
+                TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class),
+            )
+            .sort(
+              (a, b) =>
+                awaitedGameDefinitions.nations.indexOf(b.nation) -
+                awaitedGameDefinitions.nations.indexOf(a.nation),
+            );
+          break;
 
-      case 'survivability.health': {
-        sorted = filtered.sort((a, b) => {
-          const aHealth = a.health + a.turrets.at(-1)!.health;
-          const bHealth = b.health + b.turrets.at(-1)!.health;
+        case 'survivability.health': {
+          sorted = filtered.sort((a, b) => {
+            const aHealth = a.health + a.turrets.at(-1)!.health;
+            const bHealth = b.health + b.turrets.at(-1)!.health;
 
-          return aHealth - bHealth;
-        });
-        break;
-      }
+            return aHealth - bHealth;
+          });
+          break;
+        }
 
-      case 'survivability.viewRange':
-        sorted = filtered.sort(
-          (a, b) => a.turrets.at(-1)!.viewRange - b.turrets.at(-1)!.viewRange,
-        );
-        break;
-
-      case 'survivability.camouflageStill':
-        sorted = filtered.sort(
-          (a, b) => a.camouflage.still - b.camouflage.still,
-        );
-        break;
-
-      case 'survivability.camouflageMoving':
-        sorted = filtered.sort(
-          (a, b) => a.camouflage.moving - b.camouflage.moving,
-        );
-        break;
-
-      case 'survivability.camouflageShooting':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.turrets.at(-1)!.guns.at(-1)!.camouflageLoss -
-            b.turrets.at(-1)!.guns.at(-1)!.camouflageLoss,
-        );
-        break;
-
-      case 'survivability.volume':
-        sorted = filtered.sort((a, b) => {
-          const aTankModelDefinition = awaitedModelDefinitions[a.id];
-          const bTankModelDefinition = awaitedModelDefinitions[b.id];
-          const aTurretModelDefinition =
-            aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-          const bTurretModelDefinition =
-            bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-          const aSize = normalizeBoundingBox(
-            unionBoundingBox(
-              aTankModelDefinition.boundingBox,
-              aTurretModelDefinition.boundingBox,
-            ),
+        case 'survivability.viewRange':
+          sorted = filtered.sort(
+            (a, b) => a.turrets.at(-1)!.viewRange - b.turrets.at(-1)!.viewRange,
           );
-          const bSize = normalizeBoundingBox(
-            unionBoundingBox(
-              bTankModelDefinition.boundingBox,
-              bTurretModelDefinition.boundingBox,
-            ),
+          break;
+
+        case 'survivability.camouflageStill':
+          sorted = filtered.sort(
+            (a, b) => a.camouflage.still - b.camouflage.still,
           );
-          const aVolume = aSize[0] * aSize[1] * aSize[2];
-          const bVolume = bSize[0] * bSize[1] * bSize[2];
+          break;
 
-          return aVolume - bVolume;
-        });
-        break;
-
-      case 'survivability.length':
-        sorted = filtered.sort((a, b) => {
-          const aTankModelDefinition = awaitedModelDefinitions[a.id];
-          const bTankModelDefinition = awaitedModelDefinitions[b.id];
-          const aTurretModelDefinition =
-            aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-          const bTurretModelDefinition =
-            bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-          const aSize = normalizeBoundingBox(
-            unionBoundingBox(
-              aTankModelDefinition.boundingBox,
-              aTurretModelDefinition.boundingBox,
-            ),
+        case 'survivability.camouflageMoving':
+          sorted = filtered.sort(
+            (a, b) => a.camouflage.moving - b.camouflage.moving,
           );
-          const bSize = normalizeBoundingBox(
-            unionBoundingBox(
-              bTankModelDefinition.boundingBox,
-              bTurretModelDefinition.boundingBox,
-            ),
+          break;
+
+        case 'survivability.camouflageShooting':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.camouflage.still *
+                a.turrets.at(-1)!.guns.at(-1)!.camouflageLoss -
+              b.camouflage.still *
+                b.turrets.at(-1)!.guns.at(-1)!.camouflageLoss,
           );
-          const aLength = Math.max(aSize[0], aSize[1], aSize[2]);
-          const bLength = Math.max(bSize[0], bSize[1], bSize[2]);
+          break;
 
-          return aLength - bLength;
-        });
-        break;
+        case 'survivability.volume':
+          sorted = filtered.sort((a, b) => {
+            const aTankModelDefinition = awaitedModelDefinitions[a.id];
+            const bTankModelDefinition = awaitedModelDefinitions[b.id];
+            const aTurretModelDefinition =
+              aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
+            const bTurretModelDefinition =
+              bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
+            const aSize = normalizeBoundingBox(
+              unionBoundingBox(
+                aTankModelDefinition.boundingBox,
+                aTurretModelDefinition.boundingBox,
+              ),
+            );
+            const bSize = normalizeBoundingBox(
+              unionBoundingBox(
+                bTankModelDefinition.boundingBox,
+                bTurretModelDefinition.boundingBox,
+              ),
+            );
+            const aVolume = aSize[0] * aSize[1] * aSize[2];
+            const bVolume = bSize[0] * bSize[1] * bSize[2];
 
-      case 'fire.dpm':
-        sorted = filtered.sort(
-          (a, b) =>
-            resolveDpm(
-              a.turrets.at(-1)!.guns.at(-1)!,
-              a.turrets.at(-1)!.guns.at(-1)!.shells[0],
-            ) -
-            resolveDpm(
-              b.turrets.at(-1)!.guns.at(-1)!,
-              b.turrets.at(-1)!.guns.at(-1)!.shells[0],
-            ),
-        );
-        break;
+            return aVolume - bVolume;
+          });
+          break;
 
-      case 'fire.reload':
-        sorted = filtered.sort(
-          (a, b) =>
-            resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
-            resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
-        );
-        break;
+        case 'survivability.length':
+          sorted = filtered.sort((a, b) => {
+            const aTankModelDefinition = awaitedModelDefinitions[a.id];
+            const bTankModelDefinition = awaitedModelDefinitions[b.id];
+            const aTurretModelDefinition =
+              aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
+            const bTurretModelDefinition =
+              bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
+            const aSize = normalizeBoundingBox(
+              unionBoundingBox(
+                aTankModelDefinition.boundingBox,
+                aTurretModelDefinition.boundingBox,
+              ),
+            );
+            const bSize = normalizeBoundingBox(
+              unionBoundingBox(
+                bTankModelDefinition.boundingBox,
+                bTurretModelDefinition.boundingBox,
+              ),
+            );
+            const aLength = Math.max(aSize[0], aSize[1], aSize[2]);
+            const bLength = Math.max(bSize[0], bSize[1], bSize[2]);
 
-      case 'fire.caliber':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
-            b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber,
-        );
-        break;
+            return aLength - bLength;
+          });
+          break;
 
-      case 'fire.standardPenetration':
-        sorted = filtered.sort(
-          (a, b) =>
-            resolveNearPenetration(
-              a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
-            ) -
-            resolveNearPenetration(
-              b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
-            ),
-        );
-        break;
+        case 'fire.dpm':
+          sorted = filtered.sort(
+            (a, b) =>
+              resolveDpm(
+                a.turrets.at(-1)!.guns.at(-1)!,
+                a.turrets.at(-1)!.guns.at(-1)!.shells[0],
+              ) -
+              resolveDpm(
+                b.turrets.at(-1)!.guns.at(-1)!,
+                b.turrets.at(-1)!.guns.at(-1)!.shells[0],
+              ),
+          );
+          break;
 
-      case 'fire.premiumPenetration':
-        sorted = filtered.sort(
-          (a, b) =>
-            resolveNearPenetration(
-              (
-                a.turrets.at(-1)!.guns.at(-1)!.shells[1] ??
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0]
-              ).penetration,
-            ) -
-            resolveNearPenetration(
-              (
-                b.turrets.at(-1)!.guns.at(-1)!.shells[1] ??
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0]
-              ).penetration,
-            ),
-        );
-        break;
+        case 'fire.reload':
+          sorted = filtered.sort(
+            (a, b) =>
+              resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
+              resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
+          );
+          break;
 
-      case 'fire.damage':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor -
-            b.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor,
-        );
-        break;
+        case 'fire.caliber':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
+              b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber,
+          );
+          break;
 
-      case 'fire.shellVelocity':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.turrets.at(-1)!.guns.at(-1)!.shells[0].speed -
-            b.turrets.at(-1)!.guns.at(-1)!.shells[0].speed,
-        );
-        break;
+        case 'fire.standardPenetration':
+          sorted = filtered.sort(
+            (a, b) =>
+              resolveNearPenetration(
+                a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
+              ) -
+              resolveNearPenetration(
+                b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
+              ),
+          );
+          break;
 
-      case 'fire.aimTime':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.turrets.at(-1)!.guns.at(-1)!.aimTime -
-            b.turrets.at(-1)!.guns.at(-1)!.aimTime,
-        );
-        break;
+        case 'fire.premiumPenetration':
+          sorted = filtered.sort(
+            (a, b) =>
+              resolveNearPenetration(
+                a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0,
+              ) -
+              resolveNearPenetration(
+                b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0,
+              ),
+          );
+          break;
 
-      case 'fire.dispersionStill':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.turrets.at(-1)!.guns.at(-1)!.dispersion.base -
-            b.turrets.at(-1)!.guns.at(-1)!.dispersion.base,
-        );
-        break;
+        case 'fire.damage':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor -
+              b.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor,
+          );
+          break;
 
-      case 'fire.dispersionMoving':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.tracks.at(-1)!.dispersion.move - b.tracks.at(-1)!.dispersion.move,
-        );
-        break;
+        case 'fire.shellVelocity':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.turrets.at(-1)!.guns.at(-1)!.shells[0].speed -
+              b.turrets.at(-1)!.guns.at(-1)!.shells[0].speed,
+          );
+          break;
 
-      case 'fire.gunDepression':
-        sorted = filtered.sort(
-          (a, b) =>
-            awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[
-              a.turrets.at(-1)!.guns.at(-1)!.id
-            ].pitch.max -
-            awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[
-              b.turrets.at(-1)!.guns.at(-1)!.id
-            ].pitch.max,
-        );
-        break;
+        case 'fire.aimTime':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.turrets.at(-1)!.guns.at(-1)!.aimTime -
+              b.turrets.at(-1)!.guns.at(-1)!.aimTime,
+          );
+          break;
 
-      case 'fire.gunElevation':
-        sorted = filtered.sort(
-          (a, b) =>
-            // reversed because of negative values
-            awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[
-              b.turrets.at(-1)!.guns.at(-1)!.id
-            ].pitch.min -
-            awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[
-              a.turrets.at(-1)!.guns.at(-1)!.id
-            ].pitch.min,
-        );
-        break;
+        case 'fire.dispersionStill':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.turrets.at(-1)!.guns.at(-1)!.dispersion.base -
+              b.turrets.at(-1)!.guns.at(-1)!.dispersion.base,
+          );
+          break;
 
-      case 'maneuverability.forwardsSpeed':
-        sorted = filtered.sort((a, b) => a.speed.forwards - b.speed.forwards);
-        break;
+        case 'fire.dispersionMoving':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.tracks.at(-1)!.dispersion.move -
+              b.tracks.at(-1)!.dispersion.move,
+          );
+          break;
 
-      case 'maneuverability.backwardsSpeed':
-        sorted = filtered.sort((a, b) => a.speed.backwards - b.speed.backwards);
-        break;
+        case 'fire.gunDepression':
+          sorted = filtered.sort(
+            (a, b) =>
+              awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[
+                a.turrets.at(-1)!.guns.at(-1)!.id
+              ].pitch.max +
+              (awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0) -
+              awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[
+                b.turrets.at(-1)!.guns.at(-1)!.id
+              ].pitch.max -
+              (awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0),
+          );
+          break;
 
-      case 'maneuverability.power':
-        sorted = filtered.sort(
-          (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
-        );
-        break;
+        case 'fire.gunElevation':
+          sorted = filtered.sort(
+            (a, b) =>
+              awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[
+                b.turrets.at(-1)!.guns.at(-1)!.id
+              ].pitch.min +
+              (awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0) -
+              awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[
+                a.turrets.at(-1)!.guns.at(-1)!.id
+              ].pitch.min -
+              (awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0),
+          );
+          break;
 
-      case 'maneuverability.powerToWeight':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.engines.at(-1)!.power /
-              (a.weight +
-                a.engines.at(-1)!.weight +
-                a.tracks.at(-1)!.weight +
-                a.turrets.at(-1)!.weight +
-                a.turrets.at(-1)!.guns.at(-1)!.weight) -
-            b.engines.at(-1)!.power /
+        case 'maneuverability.forwardsSpeed':
+          sorted = filtered.sort((a, b) => a.speed.forwards - b.speed.forwards);
+          break;
+
+        case 'maneuverability.backwardsSpeed':
+          sorted = filtered.sort(
+            (a, b) => a.speed.backwards - b.speed.backwards,
+          );
+          break;
+
+        case 'maneuverability.power':
+          sorted = filtered.sort(
+            (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
+          );
+          break;
+
+        case 'maneuverability.powerToWeight':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.engines.at(-1)!.power /
+                (a.weight +
+                  a.engines.at(-1)!.weight +
+                  a.tracks.at(-1)!.weight +
+                  a.turrets.at(-1)!.weight +
+                  a.turrets.at(-1)!.guns.at(-1)!.weight) -
+              b.engines.at(-1)!.power /
+                (b.weight +
+                  b.engines.at(-1)!.weight +
+                  b.tracks.at(-1)!.weight +
+                  b.turrets.at(-1)!.weight +
+                  b.turrets.at(-1)!.guns.at(-1)!.weight),
+          );
+          break;
+
+        case 'maneuverability.weight':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.weight +
+              a.engines.at(-1)!.weight +
+              a.tracks.at(-1)!.weight +
+              a.turrets.at(-1)!.weight +
+              a.turrets.at(-1)!.guns.at(-1)!.weight -
               (b.weight +
                 b.engines.at(-1)!.weight +
                 b.tracks.at(-1)!.weight +
                 b.turrets.at(-1)!.weight +
                 b.turrets.at(-1)!.guns.at(-1)!.weight),
-        );
-        break;
+          );
+          break;
 
-      case 'maneuverability.weight':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.weight +
-            a.engines.at(-1)!.weight +
-            a.tracks.at(-1)!.weight +
-            a.turrets.at(-1)!.weight +
-            a.turrets.at(-1)!.guns.at(-1)!.weight -
-            (b.weight +
-              b.engines.at(-1)!.weight +
-              b.tracks.at(-1)!.weight +
-              b.turrets.at(-1)!.weight +
-              b.turrets.at(-1)!.guns.at(-1)!.weight),
-        );
-        break;
+        case 'maneuverability.traverseSpeed':
+          sorted = filtered.sort(
+            (a, b) =>
+              a.tracks.at(-1)!.traverseSpeed - b.tracks.at(-1)!.traverseSpeed,
+          );
+          break;
+      }
 
-      case 'maneuverability.traverseSpeed':
-        sorted = filtered.sort(
-          (a, b) =>
-            a.tracks.at(-1)!.traverseSpeed - b.tracks.at(-1)!.traverseSpeed,
-        );
-        break;
-    }
-
-    return sort.direction === 'ascending' ? sorted : sorted.reverse();
-  }, [
-    sort,
-    ...Object.entries(filters)
-      .filter(([name]) => name !== 'page')
-      .map(([, value]) => value),
-  ]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const searchResults = useMemo(
-    () =>
-      go(searchQuery, searchableTanks, {
-        keys: ['name', 'nameFull', 'id'] satisfies (keyof TankDefinition)[],
-        all: true,
-      }).map(({ obj }) => obj),
-    [searchQuery, searchableTanks],
-  );
-  const page = useTankopediaPersistent((state) => state.filters.page);
-  const searchResultsPageSlice = searchResults.slice(
-    page * tanksPerPage,
-    (page + 1) * tanksPerPage,
-  );
-
-  useEffect(() => {
-    mutateTankopediaPersistent((draft) => {
-      draft.filters.page = Math.min(
-        Math.max(0, page),
-        Math.ceil(searchResults.length / tanksPerPage) - 1,
+      return filters.sort.direction === 'ascending' ? sorted : sorted.reverse();
+    } else {
+      const searchedRaw = go(filters.search, awaitedTankNames, {
+        key: 'combined',
+        limit: 25,
+      });
+      const searchedTanks = searchedRaw.map(
+        (result) => awaitedTankDefinitions[result.obj.id],
       );
-    });
-  }, [searchResults]);
-
-  useEffect(() => {
-    setLoaded(true);
-  }, []);
-
-  if (!loaded) {
-    return (
-      <Flex justify="center">
-        <Spinner />
-      </Flex>
-    );
-  }
+      return searchedTanks;
+    }
+  }, [filters]);
 
   return (
-    <>
-      <Flex direction="column" gap="4">
-        <Flex gap="2">
-          <TextField.Root
-            style={{ flex: 1 }}
-            ref={input}
-            placeholder="Search tanks..."
-            onChange={(event) => {
-              setSearchQuery(event.target.value);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                if (
-                  searchResults.length > 0 &&
-                  input.current &&
-                  input.current.value.length > 0
-                ) {
-                  onSelect(searchResults[0]);
-                }
-              }
-            }}
-          >
-            <TextField.Slot>
-              <MagnifyingGlassIcon height="16" width="16" />
-            </TextField.Slot>
+    <Flex direction="column" gap="4" flexGrow="1">
+      <SearchBar topResult={tanks?.[0]} />
 
-            {searchResults.length > 0 &&
-              input.current &&
-              input.current.value.length > 0 && (
-                <TextField.Slot>
-                  <Button
-                    variant="ghost"
-                    onClick={() => onSelect(searchResults[0])}
-                  >
-                    {searchResults[0].name} <CaretRightIcon />
-                  </Button>
-                </TextField.Slot>
-              )}
-          </TextField.Root>
+      {!filters.search && !filters.searching && (
+        <FilterControl compact={compact} />
+      )}
 
-          <Sort />
-
-          <Button
-            color="red"
-            variant="soft"
-            onClick={() =>
-              useTankopediaPersistent.setState({
-                filters: {
-                  nations: [],
-                  tiers: [],
-                  treeTypes: [],
-                  types: [],
-                  test: 'include',
-                  page: 0,
-                },
-                sort: {
-                  by: 'meta.none',
-                  direction: 'descending',
-                },
-              })
-            }
-          >
-            <TrashIcon />
-          </Button>
+      {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>
-
-        <Options />
-      </Flex>
-
-      <Flex justify="center" gap="4" align="center">
-        <Text color="gray">
-          Sorting: {SORT_NAMES[sort.by]}, {sort.direction}
-        </Text>
-
-        {onSelectAll && searchResults.length <= 8 && (
-          <Button variant="ghost" onClick={() => onSelectAll(searchResults)}>
-            Select all
-          </Button>
-        )}
-        {onSelectAll && searchResults.length > 8 && (
-          <AlertDialog.Root>
-            <AlertDialog.Trigger>
-              <Button variant="ghost">Select all</Button>
-            </AlertDialog.Trigger>
-
-            <AlertDialog.Content>
-              <AlertDialog.Title>
-                Woah! That's a lot of tanks.
-              </AlertDialog.Title>
-              <AlertDialog.Description>
-                Would you like to select{' '}
-                <Text color="red">all {searchResults.length} tanks</Text>?
-              </AlertDialog.Description>
-
-              <Flex gap="2" justify="end">
-                <AlertDialog.Cancel>
-                  <Button variant="soft" color="gray">
-                    Cancel
-                  </Button>
-                </AlertDialog.Cancel>
-
-                <AlertDialog.Action onClick={() => onSelectAll(searchResults)}>
-                  <Button variant="solid" color="red">
-                    Select {searchResults.length} tanks
-                  </Button>
-                </AlertDialog.Action>
-              </Flex>
-            </AlertDialog.Content>
-          </AlertDialog.Root>
-        )}
-      </Flex>
-
-      {!compact && (
-        <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
       )}
 
-      <Results
-        compact={compact}
-        results={searchResultsPageSlice}
-        onSelect={onSelect}
-      />
-
-      {searchResultsPageSlice.length > tanksPerPage / 4 && (
-        <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
+      {filters.testing === 'only' && (
+        <Flex justify="center" mt="4">
+          <Callout.Root color="amber">
+            <Callout.Icon>
+              <ExperimentIcon style={{ width: '1em', height: '1em' }} />
+            </Callout.Icon>
+            <Callout.Text>
+              Tanks in testing are subject to change and many not represent the
+              final product.
+            </Callout.Text>
+          </Callout.Root>
+        </Flex>
       )}
-    </>
+
+      {!filters.searching && (
+        <>
+          {tanks.length > 0 && (
+            <TankCardWrapper>
+              {tanks.map((tank) => (
+                <TankCard onSelect={onSelect} key={tank.id} tank={tank} />
+              ))}
+            </TankCardWrapper>
+          )}
+
+          {tanks.length === 0 && <NoResults type="search" />}
+        </>
+      )}
+
+      {filters.searching && (
+        <TankCardWrapper>
+          {times(Math.round(10 + 10 * Math.random()), (index) => (
+            <SkeletonTankCard key={index} />
+          ))}
+        </TankCardWrapper>
+      )}
+    </Flex>
   );
-}
+});

src/app/tools/tankopedia/page.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import PageWrapper from '../../../components/PageWrapper';
-import { Results } from './components/Results';
+import { TankSearch } from './components/TankSearch';
 
 export default function Page() {
   return (
     <PageWrapper color="purple" size={1028}>
-      <Results />
+      <TankSearch />
     </PageWrapper>
   );
 }