feat: mixer tank selector

packages/website/src/components/Compare/TankControl.tsx

@@ -16,7 +16,7 @@ interface TankControlProps {
 const provisionDefinitions = await awaitableProvisionDefinitions;
 
 export function TankControl({ index, slug }: TankControlProps) {
-  const { locale } = useLocale();
+  const { locale, strings } = useLocale();
   const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false);
 
   return (
@@ -44,7 +44,9 @@ export function TankControl({ index, slug }: TankControlProps) {
         </Dialog.Trigger>
 
         <Dialog.Content>
-          <Dialog.Title align="center">Switch tanks</Dialog.Title>
+          <Dialog.Title align="center">
+            {strings.website.common.tank_search.swap_dialog_title}
+          </Dialog.Title>
 
           <Flex gap="4" direction="column">
             <Flex

packages/website/src/components/MixerScene/components/Model.tsx

@@ -1,9 +1,7 @@
-import { Html } from "@react-three/drei";
 import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
 import { jsxTree } from "../../../core/blitzkit/jsxTree";
 import { useModel } from "../../../hooks/useModel";
 import { Mixer } from "../../../stores/mixer";
-import { Selector } from "./Selector";
 
 const modelDefinitions = await awaitableModelDefinitions;
 
@@ -50,28 +48,6 @@ export function Model() {
         });
       })}
 
-      <Html
-        position={[
-          0,
-          trackModel.origin.z + tankModel.turret_origin.z,
-          (trackModel.origin.y + tankModel.turret_origin.y) / 2,
-        ]}
-      >
-        <Selector>test hull</Selector>
-      </Html>
-
-      <Html
-        position={[
-          0,
-          trackModel.origin.z + tankModel.turret_origin.z,
-          trackModel.origin.y +
-            tankModel.turret_origin.y +
-            turretModel.gun_origin.y,
-        ]}
-      >
-        <Selector>test turret</Selector>
-      </Html>
-
       <group
         position={[
           tankModel.turret_origin.x +

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

@@ -1,13 +1,10 @@
-import { Grid, type GridProps } from '@radix-ui/themes';
+import { Grid, type GridProps } from "@radix-ui/themes";
 
 export function TankCardWrapper(props: GridProps) {
   return (
     <Grid
       py="4"
-      columns={{
-        initial: 'repeat(auto-fill, minmax(6rem, 1fr))',
-        sm: 'repeat(auto-fill, minmax(10rem, 1fr))',
-      }}
+      columns="repeat(auto-fill, minmax(7rem, 1fr))"
       flow="dense"
       gap="4"
       gapY="8"

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

@@ -33,7 +33,7 @@ import { SkeletonTankCard } from "./components/SkeletonTankCard";
 import { TankCardWrapper } from "./components/TankCardWrapper";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 
-type TankSearchProps = MaybeSkeletonComponentProps &
+export type TankSearchProps = MaybeSkeletonComponentProps &
   Omit<FlexProps, "onSelect"> & {
     compact?: boolean;
     onSelect?: (tank: TankDefinition) => void;

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -331,7 +331,9 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
               </Dialog.Trigger>
 
               <Dialog.Content>
-                <Dialog.Title align="center">Select tank</Dialog.Title>
+                <Dialog.Title align="center">
+                  {strings.website.common.tank_search.select_dialog_title}
+                </Dialog.Title>
 
                 <Tabs.Root
                   value={tab}