use revealed

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

@@ -10,7 +10,7 @@
   left: 50%;
   bottom: var(--space-4);
 
-  transform: translate(-50%, calc(100% + var(--space-4)) s);
+  transform: translate(-50%, calc(100% + var(--space-4)));
 
   &[data-visible="true"] {
     transform: translate(-50%, 0);

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

@@ -1,5 +1,12 @@
 import { uniqueGuns } from "@blitzkit/core";
-import { ShadowInnerIcon, ShadowNoneIcon } from "@radix-ui/react-icons";
+import {
+  Crosshair1Icon,
+  EnterFullScreenIcon,
+  ExitFullScreenIcon,
+  ShadowInnerIcon,
+  ShadowNoneIcon,
+  SunIcon,
+} from "@radix-ui/react-icons";
 import { useState, type RefObject } from "react";
 import { DuelModule, useDuel } from "../../hooks/useDuel";
 import { useEquipment } from "../../hooks/useEquipment";
@@ -12,8 +19,13 @@ import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { IconButton } from "../IconButton";
+import { ScreenshotButton } from "../ScreenshotButton";
 import { SegmentedControl } from "../SegmentedControl";
 import styles from "./index.module.css";
+import { Dialog, Tabs } from "radix-ui";
+import { Button } from "../Button";
+import { SmallTankIcon } from "../SmallTankIcon";
+import { TankSearch } from "../TankSearch";
 
 type OptionsProps = MaybeSkeletonComponentProps & {
   canvas: RefObject<HTMLCanvasElement>;
@@ -230,11 +242,7 @@ export function TankopediaOptions({ canvas, skeleton }: OptionsProps) {
                 {strings.website.common.tank_search.select_dialog_title}
               </Dialog.Title>
 
-              <Tabs.Root
+              <Tabs.Root value={tab} onValueChange={setTab}>
-                value={tab}
-                onValueChange={setTab}
-                style={{ position: "relative" }}
-              >
                 <TankSearch
                   compact
                   onSelect={(tank) => {

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

@@ -1,4 +1,6 @@
 .wrapper {
+  background-color: black;
+
   height: calc(100dvh - 16rem);
   position: relative;
 

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

@@ -23,7 +23,6 @@ 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";
 
@@ -113,8 +112,6 @@ export function TankopediaSandbox({
 
     function handleTransitionEvent(event: QuicklimeEvent<number>) {
       if (!wrapper.current) return;
-
-      wrapper.current.style.backgroundColor = `rgba(0, 0, 0, ${1 - event.data})`;
     }
 
     poseEvent.on(handlePoseEvent);
@@ -179,7 +176,7 @@ export function TankopediaSandbox({
       <TankopediaAntagonistControl
         antagonistCharacteristics={antagonistCharacteristics}
       />
-      <TankopediaOptions />
+      {/* <TankopediaOptions /> */}
     </div>
   );
 }

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

@@ -19,7 +19,7 @@ export function TankopediaSkinSwitcher() {
 
   const skin = Tankopedia.use((state) => state.requestedSkin);
   const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
-  const disturbed = Tankopedia.use((state) => state.disturbed);
+  const revealed = Tankopedia.use((state) => state.revealed);
 
   const skins = uniqBy(
     Object.values(camouflageDefinitions.camouflages).filter(
@@ -33,7 +33,7 @@ export function TankopediaSkinSwitcher() {
   return (
     <div
       className={styles["skin-switcher"]}
-      data-visible={disturbed && requestedDisplay === TankopediaDisplay.Model}
+      data-visible={revealed && requestedDisplay === TankopediaDisplay.Model}
     >
       {skins.map((camouflage) => {
         const name = unwrap(camouflage.name!).replace(