Merge branch 'main' into data-driven

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

@@ -3,7 +3,7 @@ import { Button, Dialog, Flex, SegmentedControl } from "@radix-ui/themes";
 import { api } from "../../api/dynamic";
 import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember";
 import { useLocale } from "../../hooks/useLocale";
-import { CompareEphemeral } from "../../stores/compareEphemeral";
+import { CompareEphemeral, syncShellSlot } from "../../stores/compareEphemeral";
 import {
   ComparePersistent,
   type DeltaMode,
@@ -22,6 +22,7 @@ export function Controls({
   onAddTankDialogOpenChange,
 }: ControlsProps) {
   const deltaMode = ComparePersistent.use((state) => state.deltaMode);
+  const syncShells = CompareEphemeral.use((state) => state.syncShells);
   const { strings } = useLocale();
 
   return (
@@ -36,11 +37,11 @@ export function Controls({
           </Button>
         </Dialog.Trigger>
 
-        <Dialog.Content>
+        <Dialog.Content maxHeight={DIALOG_MAX_HEIGHT}>
           <Dialog.Title align="center">
             {strings.website.tools.compare.actions.add.title}
           </Dialog.Title>
-          <Dialog.Description align="center">
+          <Dialog.Description align="center" mb="4">
             {strings.website.tools.compare.actions.add.description}
           </Dialog.Description>
 
@@ -111,6 +112,31 @@ export function Controls({
           {strings.website.tools.compare.actions.deltas.absolute}
         </SegmentedControl.Item>
       </SegmentedControl.Root>
+
+      <Flex
+        align="center"
+        gap="2"
+        style={{ cursor: "pointer" }}
+        onClick={() => {
+          CompareEphemeral.mutate((draft) => {
+            draft.syncShells = !draft.syncShells;
+
+            if (!draft.syncShells || draft.members.length === 0) return;
+
+            const [first] = draft.members;
+
+            syncShellSlot(
+              draft.members,
+              first.gun.shells.findIndex(({ id }) => id === first.shell.id),
+            );
+          });
+        }}
+      >
+        <Checkbox variant="classic" checked={syncShells} />
+        <Text size="2">
+          {strings.website.tools.compare.actions.sync_shells}
+        </Text>
+      </Flex>
     </Flex>
   );
 }