feat: combine controls

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -1,18 +1,14 @@
-import { Flex, Heading, Switch, Text } from '@radix-ui/themes';
+import { Flex, Heading, Text } from '@radix-ui/themes';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import strings from '../../../../../../lang/en-US.json';
 import { theme } from '../../../../../../stitches.config';
 import { useDuel } from '../../../../../../stores/duel';
-import mutateTankopediaPersistent, {
-  useTankopediaPersistent,
-} from '../../../../../../stores/tankopedia';
 import { TankSandbox } from './TankSandbox';
 import { Options } from './components/Options';
 
 export function HeroSection() {
   const tank = useDuel((state) => state.protagonist!.tank);
-  const mode = useTankopediaPersistent((state) => state.mode);
   const wideFormat = useWideFormat(880);
 
   return (
@@ -77,31 +73,10 @@ export function HeroSection() {
               <TankSandbox />
             </div>
 
-            <Flex
+            <Options />
-              style={{
-                position: 'absolute',
-                bottom: 16,
-                left: '50%',
-                transform: 'translateX(-50%)',
-                cursor: 'default',
-                userSelect: 'none',
-              }}
-              align="center"
-              gap="2"
-              onClick={() => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
-                });
-              }}
-            >
-              <Switch checked={mode === 'armor'} />
-              Armor
-            </Flex>
           </div>
         </div>
       </Flex>
-
-      <Options />
     </Flex>
   );
 }

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -4,7 +4,7 @@ import {
   EyeOpenIcon,
   GearIcon,
 } from '@radix-ui/react-icons';
-import { DropdownMenu, Flex, IconButton } from '@radix-ui/themes';
+import { DropdownMenu, Flex, IconButton, Switch } from '@radix-ui/themes';
 import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose';
 import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
 import { useApp } from '../../../../../../../stores/app';
@@ -15,6 +15,7 @@ import mutateTankopediaPersistent, {
 import { ENVIRONMENTS } from '../../Lighting';
 
 export function Options() {
+  const mode = useTankopediaPersistent((state) => state.mode);
   const isFullScreen = useFullScreen();
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
@@ -42,12 +43,32 @@ export function Options() {
   return (
     <Flex
       gap="4"
+      align="center"
       style={{
         position: 'absolute',
-        top: 18,
+        bottom: 16,
-        right: 18,
+        left: '50%',
+        transform: 'translateX(-50%)',
       }}
     >
+      <Flex
+        style={{
+          cursor: 'default',
+          userSelect: 'none',
+        }}
+        align="center"
+        gap="2"
+        onClick={() => {
+          mutateTankopediaPersistent((draft) => {
+            draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
+          });
+        }}
+        mr="2"
+      >
+        <Switch size="1" checked={mode === 'armor'} />
+        Armor
+      </Flex>
+
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <IconButton variant="ghost" color="gray">
@@ -78,57 +99,61 @@ export function Options() {
         </DropdownMenu.Trigger>
 
         <DropdownMenu.Content>
-          <DropdownMenu.Label>Armor</DropdownMenu.Label>
+          {mode === 'armor' && (
+            <>
+              <DropdownMenu.Label>Armor</DropdownMenu.Label>
 
-          <DropdownMenu.CheckboxItem
+              <DropdownMenu.CheckboxItem
-            checked={showSpacedArmor}
+                checked={showSpacedArmor}
-            onCheckedChange={(checked) => {
+                onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
+                  mutateTankopediaPersistent((draft) => {
-                draft.model.visual.showSpacedArmor = checked;
+                    draft.model.visual.showSpacedArmor = checked;
-              });
+                  });
-              mutateTankopediaTemporary((draft) => {
+                  mutateTankopediaTemporary((draft) => {
-                draft.shot = undefined;
+                    draft.shot = undefined;
-              });
+                  });
-            }}
+                }}
-          >
+              >
-            Spaced armor
+                Spaced armor
-          </DropdownMenu.CheckboxItem>
+              </DropdownMenu.CheckboxItem>
 
-          <DropdownMenu.CheckboxItem
+              <DropdownMenu.CheckboxItem
-            checked={greenPenetration}
+                checked={greenPenetration}
-            onCheckedChange={(checked) => {
+                onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
+                  mutateTankopediaPersistent((draft) => {
-                draft.model.visual.greenPenetration = checked;
+                    draft.model.visual.greenPenetration = checked;
-              });
+                  });
-            }}
+                }}
-          >
+              >
-            Green penetration
+                Green penetration
-          </DropdownMenu.CheckboxItem>
+              </DropdownMenu.CheckboxItem>
 
-          {developerMode && (
+              {developerMode && (
-            <DropdownMenu.CheckboxItem
+                <DropdownMenu.CheckboxItem
-              checked={wireframe}
+                  checked={wireframe}
-              onCheckedChange={(checked) => {
+                  onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
+                    mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.wireframe = checked;
+                      draft.model.visual.wireframe = checked;
-                });
+                    });
-              }}
+                  }}
-            >
+                >
-              Wireframe
+                  Wireframe
-            </DropdownMenu.CheckboxItem>
+                </DropdownMenu.CheckboxItem>
+              )}
+
+              <DropdownMenu.CheckboxItem
+                checked={opaque}
+                onCheckedChange={(checked) => {
+                  mutateTankopediaPersistent((draft) => {
+                    draft.model.visual.opaque = checked;
+                  });
+                }}
+              >
+                Opaque
+              </DropdownMenu.CheckboxItem>
+            </>
           )}
 
-          <DropdownMenu.CheckboxItem
-            checked={opaque}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.opaque = checked;
-              });
-            }}
-          >
-            Opaque
-          </DropdownMenu.CheckboxItem>
-
           <DropdownMenu.Label>Environment</DropdownMenu.Label>
 
           <DropdownMenu.CheckboxItem