well at least some of it is showing up i guess

packages/website/src/components/SegmentedControl/index.module.css

@@ -69,6 +69,13 @@
 
     .label {
       white-space: nowrap;
+
+      line-height: 1;
+
+      img,
+      svg {
+        height: 1em;
+      }
     }
 
     &:has(input:checked) {

packages/website/src/components/TankopediaOptions/index.module.css

@@ -0,0 +1,27 @@
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  align-items: center;
+
+  transition: var(--duration-brief);
+
+  position: absolute;
+  left: 50%;
+  bottom: var(--space-4);
+
+  transform: translate(-50%, calc(100% + var(--space-4)) s);
+
+  &[data-visible="true"] {
+    transform: translate(-50%, 0);
+  }
+
+  .controls {
+    display: flex;
+    gap: var(--space-4);
+    align-items: center;
+  }
+
+  .tabs {
+  }
+}

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

@@ -1,6 +1,5 @@
-import { alias, romanize, uniqueGuns } from "@blitzkit/core";
+import { uniqueGuns } from "@blitzkit/core";
-import { literals } from "@blitzkit/i18n/src/literals";
+import { ShadowInnerIcon, ShadowNoneIcon } from "@radix-ui/react-icons";
-import { Flex, IconButton, Popover, Text } from "@radix-ui/themes";
 import { useState, type RefObject } from "react";
 import { DuelModule, useDuel } from "../../hooks/useDuel";
 import { useEquipment } from "../../hooks/useEquipment";
@@ -11,26 +10,16 @@ import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { Tankopedia } from "../../stores/tankopedia";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants";
-import type { ComputedCharacteristics } from "../../types/characteristics";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
-import { EqualIcon } from "../EqualIcon";
+import { IconButton } from "../IconButton";
-import { ModuleButton } from "../ModuleButtons/ModuleButton";
+import { SegmentedControl } from "../SegmentedControl";
-import {
+import styles from "./index.module.css";
-  SidebarIconButton,
-  SidebarIconGroup,
-} from "../TankopediaSidebarIconButtons";
-import { CustomShellButton } from "./components/CustomShellButton";
 
 type OptionsProps = MaybeSkeletonComponentProps & {
   canvas: RefObject<HTMLCanvasElement>;
-  antagonistCharacteristics: ComputedCharacteristics;
 };
 
-export function TankopediaOptions({
+export function TankopediaOptions({ canvas, skeleton }: OptionsProps) {
-  canvas,
-  skeleton,
-  antagonistCharacteristics,
-}: OptionsProps) {
   const strings = useStrings();
   const unwrap = useUnwrapper();
 
@@ -59,29 +48,13 @@ export function TankopediaOptions({
   const equalize = Tankopedia.use((state) => state.environment.equalize);
 
   return (
-    <>
+    <div className={styles.options}>
-      
+      <div className={styles.controls}>
-
-      {/* <Flex
-        direction="column"
-        align="center"
-        position="absolute"
-        bottom={revealed ? "4" : "-100%"}
-        left="50%"
-        style={{ transform: "translateX(-50%)", transitionDuration: "200ms" }}
-        gap="2"
-      >
-        <Flex
-          gap="2"
-          align="center"
-          style={{ transitionDuration: "200ms" }}
-          position="relative"
-        >
         {disturbed && (
           <>
             {requestedDisplay === TankopediaDisplay.DynamicArmor && (
               <IconButton
-                  size="2"
+                size="minor"
                 highContrast
                 onClick={() => {
                   TankopediaPersistent.mutate((draft) => {
@@ -99,7 +72,7 @@ export function TankopediaOptions({
               </IconButton>
             )}
 
-              <DropdownMenu.Root>
+            {/* <DropdownMenu.Root>
               <DropdownMenu.Trigger>
                 <IconButton
                   size="2"
@@ -118,19 +91,15 @@ export function TankopediaOptions({
                   {strings.tanks.poses.hull_down}
                 </DropdownMenu.Item>
 
-                  <DropdownMenu.Item
+                <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
-                    onClick={() => poseEvent.emit(Pose.FaceHug)}
-                  >
                   {strings.tanks.poses.face_hug}
                 </DropdownMenu.Item>
 
-                  <DropdownMenu.Item
+                <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
-                    onClick={() => poseEvent.emit(Pose.Default)}
-                  >
                   {strings.tanks.poses.default}
                 </DropdownMenu.Item>
               </DropdownMenu.Content>
-              </DropdownMenu.Root>
+            </DropdownMenu.Root> */}
 
             <IconButton
               size="2"
@@ -176,10 +145,36 @@ export function TankopediaOptions({
             )}
           </>
         )}
-        </Flex>
+      </div>
 
-        <Flex gap="3" align="center" mt="2">
+      <div gap="3" align="center" mt="2">
-          <SegmentedControl.Root
+        <SegmentedControl
+          onValueChange={(value) => {
+            Tankopedia.mutate((draft) => {
+              draft.requestedDisplay = Number(value);
+            });
+          }}
+          value={`${requestedDisplay}`}
+          options={[
+            {
+              label: <img src="/assets/images/icons/tankopedia-model.png" />,
+              value: `${TankopediaDisplay.Model}`,
+            },
+            {
+              label: (
+                <img src="/assets/images/icons/tankopedia-dynamic-armor.png" />
+              ),
+              value: `${TankopediaDisplay.DynamicArmor}`,
+            },
+            {
+              label: (
+                <img src="/assets/images/icons/tankopedia-static-armor.png" />
+              ),
+              value: `${TankopediaDisplay.StaticArmor}`,
+            },
+          ]}
+        />
+        {/* <SegmentedControl.Root
           variant="classic"
           value={`${disturbed ? requestedDisplay : -1}`}
           onValueChange={(value) => {
@@ -191,35 +186,31 @@ export function TankopediaOptions({
         >
           <SegmentedControl.Item value={`${TankopediaDisplay.Model}`}>
             <Tooltip tooltip={strings.tanks.tabs.model}>
-                <Flex height="100%" align="center">
+              <div height="100%" align="center">
-                  <img
+                
-                    src="/assets/images/icons/tankopedia-model.png"
-                    style={{ height: "1.25em" }}
-                  />
-                </Flex>
             </Tooltip>
           </SegmentedControl.Item>
           <SegmentedControl.Item value={`${TankopediaDisplay.DynamicArmor}`}>
             <Tooltip tooltip={strings.tanks.tabs.dynamic_armor}>
-                <Flex height="100%" align="center">
+              <div height="100%" align="center">
                 <img
                   src="/assets/images/icons/tankopedia-dynamic-armor.png"
                   style={{ height: "1.25em" }}
                 />
-                </Flex>
+              </div>
             </Tooltip>
           </SegmentedControl.Item>
           <SegmentedControl.Item value={`${TankopediaDisplay.StaticArmor}`}>
             <Tooltip tooltip={strings.tanks.tabs.model}>
-                <Flex height="100%" align="center">
+              <div height="100%" align="center">
                 <img
                   src="/assets/images/icons/tankopedia-static-armor.png"
                   style={{ height: "1.25em" }}
                 />
-                </Flex>
+              </div>
             </Tooltip>
           </SegmentedControl.Item>
-          </SegmentedControl.Root>
+        </SegmentedControl.Root> */}
 
         {requestedDisplay === TankopediaDisplay.DynamicArmor && (
           <Dialog.Root
@@ -266,8 +257,7 @@ export function TankopediaOptions({
             </Dialog.Content>
           </Dialog.Root>
         )}
-        </Flex>
+      </div>
-      </Flex> */}
+    </div>
-    </>
   );
 }

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

@@ -23,6 +23,7 @@ import { SmartCanvas } from "../SmartCanvas";
 import { StaticArmor, type ThicknessRange } from "../StaticArmor";
 import { TankModel } from "../TankModel";
 import { TankopediaAntagonistControl } from "../TankopediaAntagonistControl";
+import { TankopediaOptions } from "../TankopediaOptions";
 import { TankopediaSkinSwitcher } from "../TankopediaSkinSwitcher";
 import styles from "./index.module.css";
 
@@ -178,6 +179,7 @@ export function TankopediaSandbox({
       <TankopediaAntagonistControl
         antagonistCharacteristics={antagonistCharacteristics}
       />
+      <TankopediaOptions />
     </div>
   );
 }