From 429049761f69eb9c24a7c485c790ab9c9948ac4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 4 Jun 2024 18:06:15 -0500
Subject: [PATCH] feat: edge plus button

---
 src/app/tools/compare/page.tsx | 1463 ++++++++++++++++----------------
 1 file changed, 744 insertions(+), 719 deletions(-)

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 59780b070..30d002922 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -10,6 +10,7 @@ import {
   TrashIcon,
 } from '@radix-ui/react-icons';
 import {
+  Box,
   Button,
   Callout,
   Dialog,
@@ -618,799 +619,823 @@ export default function Page() {
 
       {members.length > 0 && (
         <Flex justify="center">
-          <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
-            <Table.Header>
-              <Table.Row>
-                <Table.ColumnHeaderCell
-                  width="0"
-                  style={{
-                    position: 'relative',
-                    height: '100%',
-                  }}
-                >
-                  <Flex
+          <Box maxWidth="100%" position="relative">
+            <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeaderCell
+                    width="0"
                     style={{
-                      width: '100%',
+                      position: 'relative',
                       height: '100%',
                     }}
-                    align="center"
-                    justify="center"
                   >
-                    <BlitzkitButtonWatermark width={64} height={64} />
-                    <InsertionMarker index={0} />
-                  </Flex>
-                </Table.ColumnHeaderCell>
+                    <Flex
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                      }}
+                      align="center"
+                      justify="center"
+                    >
+                      <BlitzkitButtonWatermark width={64} height={64} />
+                      <InsertionMarker index={0} />
+                    </Flex>
+                  </Table.ColumnHeaderCell>
 
-                {members.map(({ tank, key }, index) => {
-                  return <TankCard index={index} key={key} tank={tank} />;
-                })}
-              </Table.Row>
-            </Table.Header>
+                  {members.map(({ tank, key }, index) => {
+                    return <TankCard index={index} key={key} tank={tank} />;
+                  })}
+                </Table.Row>
+              </Table.Header>
 
-            <Table.Body>
-              <Table.Row>
-                <Table.Cell
-                  style={{
-                    height: '100%',
-                  }}
-                >
-                  <Flex
+              <Table.Body>
+                <Table.Row>
+                  <Table.Cell
                     style={{
-                      width: '100%',
                       height: '100%',
                     }}
-                    align="center"
-                    justify="center"
                   >
-                    <Popover.Root>
-                      <Popover.Trigger>
-                        <Button variant="ghost" radius="large">
-                          <Flex
-                            direction="column"
-                            style={{
-                              gap: 2,
-                            }}
-                          >
-                            {Object.entries(
-                              awaitedSkillDefinitions.classes,
-                            ).map(([tankClass, skills]) => (
-                              <Flex
-                                key={tankClass}
-                                style={{
-                                  gap: 2,
-                                }}
-                              >
-                                {skills.map((skill) => (
-                                  <div
-                                    key={skill}
-                                    style={{
-                                      width: 6,
-                                      height: 6,
-                                      borderRadius: 2,
-                                      backgroundColor:
-                                        crewSkills[skill] === 0
-                                          ? theme.colors.textLowContrast
-                                          : permanentSkills.includes(skill)
-                                            ? theme.colors
-                                                .textLowContrast_crimson
-                                            : theme.colors
-                                                .textLowContrast_amber,
-                                    }}
-                                  />
-                                ))}
-                              </Flex>
-                            ))}
-                          </Flex>
-                        </Button>
-                      </Popover.Trigger>
-
-                      <Popover.Content>
-                        <CrewSkillManager
-                          skillLevels={crewSkills}
-                          onChange={(skills) => {
-                            mutateCompareTemporary((draft) => {
-                              draft.crewSkills = skills;
-                            });
-                          }}
-                        />
-
-                        <Flex justify="end" mt="4" gap="4">
-                          <Button
-                            variant="ghost"
-                            onClick={() => {
-                              mutateCompareTemporary((draft) => {
-                                Object.keys(draft.crewSkills).forEach(
-                                  (skill) => {
-                                    draft.crewSkills[skill] = 0;
-                                  },
-                                );
-                              });
-                            }}
-                          >
-                            Clear
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            onClick={() => {
-                              mutateCompareTemporary((draft) => {
-                                Object.keys(draft.crewSkills).forEach(
-                                  (skill) => {
-                                    draft.crewSkills[skill] = 7;
-                                  },
-                                );
-                              });
-                            }}
-                          >
-                            Maximize
-                          </Button>
-                        </Flex>
-                      </Popover.Content>
-                    </Popover.Root>
-                  </Flex>
-                </Table.Cell>
-
-                {members.map(
-                  (
-                    {
-                      equipmentMatrix,
-                      tank,
-                      key,
-                      provisions,
-                      gun,
-                      shell,
-                      turret,
-                      engine,
-                      track,
-                      consumables,
-                    },
-                    index,
-                  ) => {
-                    const equipmentPreset =
-                      awaitedEquipmentDefinitions.presets[tank.equipment];
-                    const provisionsList = availableProvisions(
-                      tank,
-                      gun,
-                      awaitedProvisionDefinitions,
-                    );
-                    const consumablesList = Object.values(
-                      awaitedConsumableDefinitions,
-                    ).filter((consumable) =>
-                      checkConsumableProvisionInclusivity(
-                        consumable,
-                        tank,
-                        gun,
-                      ),
-                    );
-
-                    return (
-                      <Table.Cell key={key}>
-                        <Flex
-                          align="center"
-                          justify="center"
-                          direction="column"
-                          gap="2"
-                        >
-                          <Popover.Root>
-                            <Popover.Trigger>
-                              <Button variant="ghost">
-                                <Flex align="center">
-                                  {(
-                                    [
-                                      'turret',
-                                      'gun',
-                                      'engine',
-                                      'chassis',
-                                    ] as const
-                                  ).map((module, index) => (
-                                    <img
-                                      alt={module}
-                                      width={24}
-                                      height={24}
-                                      src={asset(
-                                        `icons/modules/${module}.webp`,
-                                      )}
+                    <Flex
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                      }}
+                      align="center"
+                      justify="center"
+                    >
+                      <Popover.Root>
+                        <Popover.Trigger>
+                          <Button variant="ghost" radius="large">
+                            <Flex
+                              direction="column"
+                              style={{
+                                gap: 2,
+                              }}
+                            >
+                              {Object.entries(
+                                awaitedSkillDefinitions.classes,
+                              ).map(([tankClass, skills]) => (
+                                <Flex
+                                  key={tankClass}
+                                  style={{
+                                    gap: 2,
+                                  }}
+                                >
+                                  {skills.map((skill) => (
+                                    <div
+                                      key={skill}
                                       style={{
-                                        marginLeft: index > 0 ? -8 : 0,
-                                        objectFit: 'contain',
+                                        width: 6,
+                                        height: 6,
+                                        borderRadius: 2,
+                                        backgroundColor:
+                                          crewSkills[skill] === 0
+                                            ? theme.colors.textLowContrast
+                                            : permanentSkills.includes(skill)
+                                              ? theme.colors
+                                                  .textLowContrast_crimson
+                                              : theme.colors
+                                                  .textLowContrast_amber,
                                       }}
                                     />
                                   ))}
                                 </Flex>
-                              </Button>
-                            </Popover.Trigger>
+                              ))}
+                            </Flex>
+                          </Button>
+                        </Popover.Trigger>
 
-                            <Popover.Content>
-                              <ModuleManager
-                                tank={tank}
-                                turret={turret}
-                                gun={gun}
-                                shell={shell}
-                                engine={engine}
-                                track={track}
-                                onChange={(modules) => {
-                                  mutateCompareTemporary((draft) => {
-                                    draft.members[index] = {
-                                      ...draft.members[index],
-                                      ...modules,
-                                    };
-                                  });
-                                }}
-                              />
+                        <Popover.Content>
+                          <CrewSkillManager
+                            skillLevels={crewSkills}
+                            onChange={(skills) => {
+                              mutateCompareTemporary((draft) => {
+                                draft.crewSkills = skills;
+                              });
+                            }}
+                          />
 
-                              <Flex justify="end" mt="4" gap="4">
-                                <Button
-                                  variant="ghost"
-                                  onClick={() => {
-                                    mutateCompareTemporary((draft) => {
-                                      const member = draft.members[index];
+                          <Flex justify="end" mt="4" gap="4">
+                            <Button
+                              variant="ghost"
+                              onClick={() => {
+                                mutateCompareTemporary((draft) => {
+                                  Object.keys(draft.crewSkills).forEach(
+                                    (skill) => {
+                                      draft.crewSkills[skill] = 0;
+                                    },
+                                  );
+                                });
+                              }}
+                            >
+                              Clear
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              onClick={() => {
+                                mutateCompareTemporary((draft) => {
+                                  Object.keys(draft.crewSkills).forEach(
+                                    (skill) => {
+                                      draft.crewSkills[skill] = 7;
+                                    },
+                                  );
+                                });
+                              }}
+                            >
+                              Maximize
+                            </Button>
+                          </Flex>
+                        </Popover.Content>
+                      </Popover.Root>
+                    </Flex>
+                  </Table.Cell>
 
-                                      member.turret = member.tank.turrets[0];
-                                      member.gun = member.turret.guns[0];
-                                      member.shell = member.gun.shells[0];
-                                      member.engine = member.tank.engines[0];
-                                      member.track = member.tank.tracks[0];
-                                    });
-                                  }}
-                                >
-                                  Stock
-                                </Button>
-                                <Button
-                                  variant="ghost"
-                                  onClick={() => {
-                                    mutateCompareTemporary((draft) => {
-                                      const member = draft.members[index];
+                  {members.map(
+                    (
+                      {
+                        equipmentMatrix,
+                        tank,
+                        key,
+                        provisions,
+                        gun,
+                        shell,
+                        turret,
+                        engine,
+                        track,
+                        consumables,
+                      },
+                      index,
+                    ) => {
+                      const equipmentPreset =
+                        awaitedEquipmentDefinitions.presets[tank.equipment];
+                      const provisionsList = availableProvisions(
+                        tank,
+                        gun,
+                        awaitedProvisionDefinitions,
+                      );
+                      const consumablesList = Object.values(
+                        awaitedConsumableDefinitions,
+                      ).filter((consumable) =>
+                        checkConsumableProvisionInclusivity(
+                          consumable,
+                          tank,
+                          gun,
+                        ),
+                      );
 
-                                      member.turret =
-                                        member.tank.turrets.at(-1)!;
-                                      member.gun = member.turret.guns.at(-1)!;
-                                      member.shell = member.gun.shells[0];
-                                      member.engine =
-                                        member.tank.engines.at(-1)!;
-                                      member.track = member.tank.tracks.at(-1)!;
-                                    });
-                                  }}
-                                >
-                                  Upgrade
-                                </Button>
-                              </Flex>
-                            </Popover.Content>
-                          </Popover.Root>
-
-                          <Flex align="center" justify="center" gap="3">
+                      return (
+                        <Table.Cell key={key}>
+                          <Flex
+                            align="center"
+                            justify="center"
+                            direction="column"
+                            gap="2"
+                          >
                             <Popover.Root>
                               <Popover.Trigger>
-                                <Button
-                                  variant="ghost"
-                                  radius="large"
-                                  style={{
-                                    height: '100%',
-                                    width: 12,
-                                    position: 'relative',
-                                  }}
-                                >
-                                  <Flex direction="column" justify="center">
-                                    {provisions.map((provision, index) => (
+                                <Button variant="ghost">
+                                  <Flex align="center">
+                                    {(
+                                      [
+                                        'turret',
+                                        'gun',
+                                        'engine',
+                                        'chassis',
+                                      ] as const
+                                    ).map((module, index) => (
                                       <img
-                                        alt={
-                                          awaitedProvisionDefinitions[provision]
-                                            .name
-                                        }
-                                        key={provision}
+                                        alt={module}
+                                        width={24}
+                                        height={24}
                                         src={asset(
-                                          `/icons/provisions/${provision}.webp`,
+                                          `icons/modules/${module}.webp`,
                                         )}
                                         style={{
-                                          left: '50%',
-                                          /**
-                                           * max = 100% - 16px - 4px
-                                           * min = 4px
-                                           * diff = max - min
-                                           *      = 100% - 16px - 4px - 4px
-                                           *      = 100% - 24px
-                                           * coefficient = index / length - 1
-                                           * position = min + coefficient * diff
-                                           */
-                                          top: `calc(4px + ${
-                                            provisions.length === 1
-                                              ? 0.5
-                                              : index / (provisions.length - 1)
-                                          } * (100% - 24px))`,
-                                          transform: 'translateX(-50%)',
-                                          position: 'absolute',
-                                          width: 16,
-                                          height: 16,
+                                          marginLeft: index > 0 ? -8 : 0,
                                           objectFit: 'contain',
                                         }}
                                       />
                                     ))}
-
-                                    {provisions.length === 0 && (
-                                      <ComponentPlaceholderIcon />
-                                    )}
                                   </Flex>
                                 </Button>
                               </Popover.Trigger>
 
                               <Popover.Content>
-                                <ProvisionsManager
-                                  provisions={provisionsList.map(
-                                    (provision) => provision.id,
-                                  )}
-                                  selected={provisions}
-                                  disabled={
-                                    tank.provisions === provisions.length
-                                  }
-                                  onChange={(provisions) => {
+                                <ModuleManager
+                                  tank={tank}
+                                  turret={turret}
+                                  gun={gun}
+                                  shell={shell}
+                                  engine={engine}
+                                  track={track}
+                                  onChange={(modules) => {
                                     mutateCompareTemporary((draft) => {
-                                      draft.members[index].provisions =
-                                        provisions;
+                                      draft.members[index] = {
+                                        ...draft.members[index],
+                                        ...modules,
+                                      };
                                     });
                                   }}
                                 />
 
-                                <Flex justify="end" mt="4">
+                                <Flex justify="end" mt="4" gap="4">
                                   <Button
                                     variant="ghost"
                                     onClick={() => {
                                       mutateCompareTemporary((draft) => {
-                                        draft.members[index].provisions = [];
+                                        const member = draft.members[index];
+
+                                        member.turret = member.tank.turrets[0];
+                                        member.gun = member.turret.guns[0];
+                                        member.shell = member.gun.shells[0];
+                                        member.engine = member.tank.engines[0];
+                                        member.track = member.tank.tracks[0];
                                       });
                                     }}
                                   >
-                                    Clear
+                                    Stock
+                                  </Button>
+                                  <Button
+                                    variant="ghost"
+                                    onClick={() => {
+                                      mutateCompareTemporary((draft) => {
+                                        const member = draft.members[index];
+
+                                        member.turret =
+                                          member.tank.turrets.at(-1)!;
+                                        member.gun = member.turret.guns.at(-1)!;
+                                        member.shell = member.gun.shells[0];
+                                        member.engine =
+                                          member.tank.engines.at(-1)!;
+                                        member.track =
+                                          member.tank.tracks.at(-1)!;
+                                      });
+                                    }}
+                                  >
+                                    Upgrade
                                   </Button>
                                 </Flex>
                               </Popover.Content>
                             </Popover.Root>
 
-                            <Popover.Root>
-                              <Popover.Trigger>
-                                <Button variant="ghost" radius="large">
-                                  <Flex gap="1" direction="column">
-                                    {times(3, (y) => (
-                                      <Flex
-                                        key={y}
-                                        style={{
-                                          gap: 6,
-                                        }}
-                                      >
-                                        {times(3, (x) => {
-                                          const equipment =
-                                            equipmentMatrix[y][x];
-
-                                          return (
-                                            <Flex
-                                              key={x}
-                                              style={{
-                                                gap: 2,
-                                              }}
-                                            >
-                                              <div
-                                                style={{
-                                                  width: 4,
-                                                  height: 8,
-                                                  backgroundColor:
-                                                    equipment === -1
-                                                      ? theme.colors
-                                                          .textLowContrast_crimson
-                                                      : theme.colors
-                                                          .textLowContrast,
-                                                  borderRadius: 2,
-                                                }}
-                                              />
-                                              <div
-                                                style={{
-                                                  width: 4,
-                                                  height: 8,
-                                                  backgroundColor:
-                                                    equipment === 1
-                                                      ? theme.colors
-                                                          .textLowContrast_crimson
-                                                      : theme.colors
-                                                          .textLowContrast,
-                                                  borderRadius: 2,
-                                                }}
-                                              />
-                                            </Flex>
-                                          );
-                                        })}
-                                      </Flex>
-                                    ))}
-                                  </Flex>
-                                </Button>
-                              </Popover.Trigger>
-
-                              <Popover.Content>
-                                <EquipmentManager
-                                  matrix={equipmentMatrix}
-                                  preset={equipmentPreset}
-                                  onChange={(matrix) => {
-                                    mutateCompareTemporary((draft) => {
-                                      draft.members[index].equipmentMatrix =
-                                        matrix;
-                                      draft.sorting = undefined;
-                                    });
-                                  }}
-                                />
-
-                                <Flex justify="end" gap="4" mt="4">
+                            <Flex align="center" justify="center" gap="3">
+                              <Popover.Root>
+                                <Popover.Trigger>
                                   <Button
                                     variant="ghost"
-                                    color="red"
-                                    onClick={() => {
+                                    radius="large"
+                                    style={{
+                                      height: '100%',
+                                      width: 12,
+                                      position: 'relative',
+                                    }}
+                                  >
+                                    <Flex direction="column" justify="center">
+                                      {provisions.map((provision, index) => (
+                                        <img
+                                          alt={
+                                            awaitedProvisionDefinitions[
+                                              provision
+                                            ].name
+                                          }
+                                          key={provision}
+                                          src={asset(
+                                            `/icons/provisions/${provision}.webp`,
+                                          )}
+                                          style={{
+                                            left: '50%',
+                                            /**
+                                             * max = 100% - 16px - 4px
+                                             * min = 4px
+                                             * diff = max - min
+                                             *      = 100% - 16px - 4px - 4px
+                                             *      = 100% - 24px
+                                             * coefficient = index / length - 1
+                                             * position = min + coefficient * diff
+                                             */
+                                            top: `calc(4px + ${
+                                              provisions.length === 1
+                                                ? 0.5
+                                                : index /
+                                                  (provisions.length - 1)
+                                            } * (100% - 24px))`,
+                                            transform: 'translateX(-50%)',
+                                            position: 'absolute',
+                                            width: 16,
+                                            height: 16,
+                                            objectFit: 'contain',
+                                          }}
+                                        />
+                                      ))}
+
+                                      {provisions.length === 0 && (
+                                        <ComponentPlaceholderIcon />
+                                      )}
+                                    </Flex>
+                                  </Button>
+                                </Popover.Trigger>
+
+                                <Popover.Content>
+                                  <ProvisionsManager
+                                    provisions={provisionsList.map(
+                                      (provision) => provision.id,
+                                    )}
+                                    selected={provisions}
+                                    disabled={
+                                      tank.provisions === provisions.length
+                                    }
+                                    onChange={(provisions) => {
+                                      mutateCompareTemporary((draft) => {
+                                        draft.members[index].provisions =
+                                          provisions;
+                                      });
+                                    }}
+                                  />
+
+                                  <Flex justify="end" mt="4">
+                                    <Button
+                                      variant="ghost"
+                                      onClick={() => {
+                                        mutateCompareTemporary((draft) => {
+                                          draft.members[index].provisions = [];
+                                        });
+                                      }}
+                                    >
+                                      Clear
+                                    </Button>
+                                  </Flex>
+                                </Popover.Content>
+                              </Popover.Root>
+
+                              <Popover.Root>
+                                <Popover.Trigger>
+                                  <Button variant="ghost" radius="large">
+                                    <Flex gap="1" direction="column">
+                                      {times(3, (y) => (
+                                        <Flex
+                                          key={y}
+                                          style={{
+                                            gap: 6,
+                                          }}
+                                        >
+                                          {times(3, (x) => {
+                                            const equipment =
+                                              equipmentMatrix[y][x];
+
+                                            return (
+                                              <Flex
+                                                key={x}
+                                                style={{
+                                                  gap: 2,
+                                                }}
+                                              >
+                                                <div
+                                                  style={{
+                                                    width: 4,
+                                                    height: 8,
+                                                    backgroundColor:
+                                                      equipment === -1
+                                                        ? theme.colors
+                                                            .textLowContrast_crimson
+                                                        : theme.colors
+                                                            .textLowContrast,
+                                                    borderRadius: 2,
+                                                  }}
+                                                />
+                                                <div
+                                                  style={{
+                                                    width: 4,
+                                                    height: 8,
+                                                    backgroundColor:
+                                                      equipment === 1
+                                                        ? theme.colors
+                                                            .textLowContrast_crimson
+                                                        : theme.colors
+                                                            .textLowContrast,
+                                                    borderRadius: 2,
+                                                  }}
+                                                />
+                                              </Flex>
+                                            );
+                                          })}
+                                        </Flex>
+                                      ))}
+                                    </Flex>
+                                  </Button>
+                                </Popover.Trigger>
+
+                                <Popover.Content>
+                                  <EquipmentManager
+                                    matrix={equipmentMatrix}
+                                    preset={equipmentPreset}
+                                    onChange={(matrix) => {
                                       mutateCompareTemporary((draft) => {
                                         draft.members[index].equipmentMatrix =
-                                          times(3, () =>
-                                            times(3, () => 0),
-                                          ) as EquipmentMatrix;
+                                          matrix;
                                         draft.sorting = undefined;
                                       });
                                     }}
-                                  >
-                                    Clear
-                                  </Button>
-                                  <Button
-                                    variant="ghost"
-                                    onClick={() => {
-                                      mutateCompareTemporary((draft) => {
-                                        draft.members.forEach((member) => {
-                                          member.equipmentMatrix =
-                                            draft.members[
-                                              index
-                                            ].equipmentMatrix;
+                                  />
+
+                                  <Flex justify="end" gap="4" mt="4">
+                                    <Button
+                                      variant="ghost"
+                                      color="red"
+                                      onClick={() => {
+                                        mutateCompareTemporary((draft) => {
+                                          draft.members[index].equipmentMatrix =
+                                            times(3, () =>
+                                              times(3, () => 0),
+                                            ) as EquipmentMatrix;
                                           draft.sorting = undefined;
                                         });
-                                      });
-                                    }}
-                                  >
-                                    Apply to all
-                                  </Button>
-                                </Flex>
-                              </Popover.Content>
-                            </Popover.Root>
-
-                            <Popover.Root>
-                              <Popover.Trigger>
-                                <Button
-                                  variant="ghost"
-                                  radius="large"
-                                  style={{
-                                    height: '100%',
-                                    width: 12,
-                                    position: 'relative',
-                                  }}
-                                >
-                                  <Flex direction="column" justify="center">
-                                    {consumables.map((consumable, index) => (
-                                      <img
-                                        alt={
-                                          awaitedConsumableDefinitions[
-                                            consumable
-                                          ].name
-                                        }
-                                        key={consumable}
-                                        src={asset(
-                                          `/icons/consumables/${consumable}.webp`,
-                                        )}
-                                        style={{
-                                          left: '50%',
-                                          /**
-                                           * max = 100% - 16px - 4px
-                                           * min = 4px
-                                           * diff = max - min
-                                           *      = 100% - 16px - 4px - 4px
-                                           *      = 100% - 24px
-                                           * coefficient = index / length - 1
-                                           * position = min + coefficient * diff
-                                           */
-                                          top: `calc(4px + ${
-                                            consumables.length === 1
-                                              ? 0.5
-                                              : index / (consumables.length - 1)
-                                          } * (100% - 24px))`,
-                                          transform: 'translateX(-50%)',
-                                          position: 'absolute',
-                                          width: 16,
-                                          height: 16,
-                                          objectFit: 'contain',
-                                        }}
-                                      />
-                                    ))}
-
-                                    {consumables.length === 0 && (
-                                      <ComponentPlaceholderIcon />
-                                    )}
+                                      }}
+                                    >
+                                      Clear
+                                    </Button>
+                                    <Button
+                                      variant="ghost"
+                                      onClick={() => {
+                                        mutateCompareTemporary((draft) => {
+                                          draft.members.forEach((member) => {
+                                            member.equipmentMatrix =
+                                              draft.members[
+                                                index
+                                              ].equipmentMatrix;
+                                            draft.sorting = undefined;
+                                          });
+                                        });
+                                      }}
+                                    >
+                                      Apply to all
+                                    </Button>
                                   </Flex>
-                                </Button>
-                              </Popover.Trigger>
+                                </Popover.Content>
+                              </Popover.Root>
 
-                              <Popover.Content>
-                                <ConsumablesManager
-                                  consumables={consumablesList}
-                                  selected={consumables}
-                                  onChange={(consumables) => {
-                                    mutateCompareTemporary((draft) => {
-                                      draft.members[index].consumables =
-                                        consumables;
-                                    });
-                                  }}
-                                  disabled={
-                                    tank.consumables === consumables.length
-                                  }
-                                />
-
-                                <Flex justify="end" mt="4">
+                              <Popover.Root>
+                                <Popover.Trigger>
                                   <Button
                                     variant="ghost"
-                                    onClick={() => {
-                                      mutateCompareTemporary((draft) => {
-                                        draft.members[index].consumables = [];
-                                      });
+                                    radius="large"
+                                    style={{
+                                      height: '100%',
+                                      width: 12,
+                                      position: 'relative',
                                     }}
                                   >
-                                    Clear
+                                    <Flex direction="column" justify="center">
+                                      {consumables.map((consumable, index) => (
+                                        <img
+                                          alt={
+                                            awaitedConsumableDefinitions[
+                                              consumable
+                                            ].name
+                                          }
+                                          key={consumable}
+                                          src={asset(
+                                            `/icons/consumables/${consumable}.webp`,
+                                          )}
+                                          style={{
+                                            left: '50%',
+                                            /**
+                                             * max = 100% - 16px - 4px
+                                             * min = 4px
+                                             * diff = max - min
+                                             *      = 100% - 16px - 4px - 4px
+                                             *      = 100% - 24px
+                                             * coefficient = index / length - 1
+                                             * position = min + coefficient * diff
+                                             */
+                                            top: `calc(4px + ${
+                                              consumables.length === 1
+                                                ? 0.5
+                                                : index /
+                                                  (consumables.length - 1)
+                                            } * (100% - 24px))`,
+                                            transform: 'translateX(-50%)',
+                                            position: 'absolute',
+                                            width: 16,
+                                            height: 16,
+                                            objectFit: 'contain',
+                                          }}
+                                        />
+                                      ))}
+
+                                      {consumables.length === 0 && (
+                                        <ComponentPlaceholderIcon />
+                                      )}
+                                    </Flex>
                                   </Button>
-                                </Flex>
-                              </Popover.Content>
-                            </Popover.Root>
-                          </Flex>
+                                </Popover.Trigger>
 
-                          <Flex mt="1">
-                            {gun.shells.map((thisShell, shellIndex) => (
-                              <IconButton
-                                color={
-                                  thisShell.id === shell.id ? undefined : 'gray'
-                                }
-                                variant="soft"
-                                key={thisShell.id}
-                                style={{
-                                  borderTopLeftRadius:
-                                    shellIndex === 0 ? undefined : 0,
-                                  borderBottomLeftRadius:
-                                    shellIndex === 0 ? undefined : 0,
-                                  borderTopRightRadius:
-                                    shellIndex === gun.shells.length - 1
+                                <Popover.Content>
+                                  <ConsumablesManager
+                                    consumables={consumablesList}
+                                    selected={consumables}
+                                    onChange={(consumables) => {
+                                      mutateCompareTemporary((draft) => {
+                                        draft.members[index].consumables =
+                                          consumables;
+                                      });
+                                    }}
+                                    disabled={
+                                      tank.consumables === consumables.length
+                                    }
+                                  />
+
+                                  <Flex justify="end" mt="4">
+                                    <Button
+                                      variant="ghost"
+                                      onClick={() => {
+                                        mutateCompareTemporary((draft) => {
+                                          draft.members[index].consumables = [];
+                                        });
+                                      }}
+                                    >
+                                      Clear
+                                    </Button>
+                                  </Flex>
+                                </Popover.Content>
+                              </Popover.Root>
+                            </Flex>
+
+                            <Flex mt="1">
+                              {gun.shells.map((thisShell, shellIndex) => (
+                                <IconButton
+                                  color={
+                                    thisShell.id === shell.id
                                       ? undefined
-                                      : 0,
-                                  borderBottomRightRadius:
-                                    shellIndex === gun.shells.length - 1
-                                      ? undefined
-                                      : 0,
-                                  marginLeft: shellIndex === 0 ? 0 : -1,
-                                }}
-                                onClick={() => {
-                                  mutateCompareTemporary((draft) => {
-                                    draft.members[index].shell = thisShell;
-                                  });
-                                }}
-                              >
-                                <img
-                                  alt={thisShell.name}
-                                  width={16}
-                                  height={16}
-                                  src={asset(
-                                    `icons/shells/${thisShell.icon}.webp`,
-                                  )}
-                                />
-                              </IconButton>
-                            ))}
+                                      : 'gray'
+                                  }
+                                  variant="soft"
+                                  key={thisShell.id}
+                                  style={{
+                                    borderTopLeftRadius:
+                                      shellIndex === 0 ? undefined : 0,
+                                    borderBottomLeftRadius:
+                                      shellIndex === 0 ? undefined : 0,
+                                    borderTopRightRadius:
+                                      shellIndex === gun.shells.length - 1
+                                        ? undefined
+                                        : 0,
+                                    borderBottomRightRadius:
+                                      shellIndex === gun.shells.length - 1
+                                        ? undefined
+                                        : 0,
+                                    marginLeft: shellIndex === 0 ? 0 : -1,
+                                  }}
+                                  onClick={() => {
+                                    mutateCompareTemporary((draft) => {
+                                      draft.members[index].shell = thisShell;
+                                    });
+                                  }}
+                                >
+                                  <img
+                                    alt={thisShell.name}
+                                    width={16}
+                                    height={16}
+                                    src={asset(
+                                      `icons/shells/${thisShell.icon}.webp`,
+                                    )}
+                                  />
+                                </IconButton>
+                              ))}
+                            </Flex>
                           </Flex>
-                        </Flex>
-                      </Table.Cell>
-                    );
-                  },
+                        </Table.Cell>
+                      );
+                    },
+                  )}
+                </Table.Row>
+              </Table.Body>
+
+              <Title>Fire</Title>
+              <Table.Body>
+                <Row name="DPM" value="dpm" decimals={0} />
+                <Row
+                  name="Reload"
+                  deltaType="lowerIsBetter"
+                  value={(stats) =>
+                    stats.shellReload ??
+                    stats.shellReloads!.reduce((a, b) => a + b, 0) /
+                      stats.shellReloads!.length
+                  }
+                  display={(stats) =>
+                    stats.shellReload?.toFixed(2) ??
+                    stats
+                      .shellReloads!.map((reload) => reload.toFixed(2))
+                      .join(', ')
+                  }
+                  deltaNominalDisplay={(delta) => delta.toFixed(2)}
+                />
+                {hasNonRegularGun && (
+                  <>
+                    <Row
+                      name="Intra-clip"
+                      deltaType="lowerIsBetter"
+                      value="intraClip"
+                      decimals={2}
+                    />
+                    <Row name="Shells" value="shells" decimals={0} />
+                  </>
                 )}
-              </Table.Row>
-            </Table.Body>
+                <Row name="Penetration" value="penetration" decimals={0} />
+                <Row name="Damage" value="damage" decimals={0} />
+                <Row name="Module damage" value="moduleDamage" decimals={0} />
+                <Row name="Caliber" value="caliber" decimals={0} />
+                <Row
+                  name="Normalization"
+                  value="shellNormalization"
+                  decimals={0}
+                />
+                <Row
+                  name="Ricochet"
+                  value="shellRicochet"
+                  deltaType="lowerIsBetter"
+                  decimals={0}
+                />
+                <Row name="Shell velocity" value="shellVelocity" decimals={0} />
+                <Row
+                  name="Aim time"
+                  value="aimTime"
+                  deltaType="lowerIsBetter"
+                  decimals={2}
+                />
+                <Row
+                  name="Dispersion"
+                  value="dispersion"
+                  deltaType="lowerIsBetter"
+                  decimals={3}
+                />
+                <Row
+                  name="Dispersion moving"
+                  value="dispersionMoving"
+                  deltaType="lowerIsBetter"
+                  decimals={3}
+                />
+                <Row
+                  name="Dispersion hull traversing"
+                  value="dispersionHullTraversing"
+                  deltaType="lowerIsBetter"
+                  decimals={3}
+                />
+                <Row
+                  name="Dispersion turret traversing"
+                  value="dispersionTurretTraversing"
+                  deltaType="lowerIsBetter"
+                  decimals={3}
+                />
+                <Row
+                  name="Dispersion shooting"
+                  value="dispersionShooting"
+                  deltaType="lowerIsBetter"
+                  decimals={3}
+                />
+                <Row
+                  name="Dispersion gun damaged"
+                  value="dispersionGunDamaged"
+                  deltaType="lowerIsBetter"
+                  decimals={3}
+                />
+                <Row name="Gun depression" value="gunDepression" decimals={1} />
+                <Row name="Gun elevation" value="gunElevation" decimals={1} />
+              </Table.Body>
 
-            <Title>Fire</Title>
-            <Table.Body>
-              <Row name="DPM" value="dpm" decimals={0} />
-              <Row
-                name="Reload"
-                deltaType="lowerIsBetter"
-                value={(stats) =>
-                  stats.shellReload ??
-                  stats.shellReloads!.reduce((a, b) => a + b, 0) /
-                    stats.shellReloads!.length
-                }
-                display={(stats) =>
-                  stats.shellReload?.toFixed(2) ??
-                  stats
-                    .shellReloads!.map((reload) => reload.toFixed(2))
-                    .join(', ')
-                }
-                deltaNominalDisplay={(delta) => delta.toFixed(2)}
-              />
-              {hasNonRegularGun && (
-                <>
-                  <Row
-                    name="Intra-clip"
-                    deltaType="lowerIsBetter"
-                    value="intraClip"
-                    decimals={2}
-                  />
-                  <Row name="Shells" value="shells" decimals={0} />
-                </>
-              )}
-              <Row name="Penetration" value="penetration" decimals={0} />
-              <Row name="Damage" value="damage" decimals={0} />
-              <Row name="Module damage" value="moduleDamage" decimals={0} />
-              <Row name="Caliber" value="caliber" decimals={0} />
-              <Row
-                name="Normalization"
-                value="shellNormalization"
-                decimals={0}
-              />
-              <Row
-                name="Ricochet"
-                value="shellRicochet"
-                deltaType="lowerIsBetter"
-                decimals={0}
-              />
-              <Row name="Shell velocity" value="shellVelocity" decimals={0} />
-              <Row
-                name="Aim time"
-                value="aimTime"
-                deltaType="lowerIsBetter"
-                decimals={2}
-              />
-              <Row
-                name="Dispersion"
-                value="dispersion"
-                deltaType="lowerIsBetter"
-                decimals={3}
-              />
-              <Row
-                name="Dispersion moving"
-                value="dispersionMoving"
-                deltaType="lowerIsBetter"
-                decimals={3}
-              />
-              <Row
-                name="Dispersion hull traversing"
-                value="dispersionHullTraversing"
-                deltaType="lowerIsBetter"
-                decimals={3}
-              />
-              <Row
-                name="Dispersion turret traversing"
-                value="dispersionTurretTraversing"
-                deltaType="lowerIsBetter"
-                decimals={3}
-              />
-              <Row
-                name="Dispersion shooting"
-                value="dispersionShooting"
-                deltaType="lowerIsBetter"
-                decimals={3}
-              />
-              <Row
-                name="Dispersion gun damaged"
-                value="dispersionGunDamaged"
-                deltaType="lowerIsBetter"
-                decimals={3}
-              />
-              <Row name="Gun depression" value="gunDepression" decimals={1} />
-              <Row name="Gun elevation" value="gunElevation" decimals={1} />
-            </Table.Body>
+              <Title>Maneuverability</Title>
+              <Table.Body>
+                <Row name="Speed forwards" value="speedForwards" decimals={0} />
+                <Row
+                  name="Speed backwards"
+                  value="speedBackwards"
+                  decimals={0}
+                />
+                <Row name="Engine power" value="enginePower" decimals={0} />
+                <Row name="Weight" value="weight" decimals={1} />
+                <Row
+                  name="Power to weight ratio on hard terrain"
+                  value="powerToWeightRatioHardTerrain"
+                  decimals={1}
+                />
+                <Row
+                  name="Power to weight ratio on medium terrain"
+                  value="powerToWeightRatioMediumTerrain"
+                  decimals={1}
+                />
+                <Row
+                  name="Power to weight ratio on soft terrain"
+                  value="powerToWeightRatioSoftTerrain"
+                  decimals={1}
+                />
+                <Row
+                  name="Turret traverse speed"
+                  value="turretTraverseSpeed"
+                  decimals={1}
+                />
+                <Row
+                  name="Traverse speed on hard terrain"
+                  value="hullTraverseHardTerrain"
+                  decimals={1}
+                />
+                <Row
+                  name="Traverse speed on medium terrain"
+                  value="hullTraverseMediumTerrain"
+                  decimals={1}
+                />
+                <Row
+                  name="Traverse speed on soft terrain"
+                  value="hullTraverseSoftTerrain"
+                  decimals={1}
+                />
+              </Table.Body>
 
-            <Title>Maneuverability</Title>
-            <Table.Body>
-              <Row name="Speed forwards" value="speedForwards" decimals={0} />
-              <Row name="Speed backwards" value="speedBackwards" decimals={0} />
-              <Row name="Engine power" value="enginePower" decimals={0} />
-              <Row name="Weight" value="weight" decimals={1} />
-              <Row
-                name="Power to weight ratio on hard terrain"
-                value="powerToWeightRatioHardTerrain"
-                decimals={1}
-              />
-              <Row
-                name="Power to weight ratio on medium terrain"
-                value="powerToWeightRatioMediumTerrain"
-                decimals={1}
-              />
-              <Row
-                name="Power to weight ratio on soft terrain"
-                value="powerToWeightRatioSoftTerrain"
-                decimals={1}
-              />
-              <Row
-                name="Turret traverse speed"
-                value="turretTraverseSpeed"
-                decimals={1}
-              />
-              <Row
-                name="Traverse speed on hard terrain"
-                value="hullTraverseHardTerrain"
-                decimals={1}
-              />
-              <Row
-                name="Traverse speed on medium terrain"
-                value="hullTraverseMediumTerrain"
-                decimals={1}
-              />
-              <Row
-                name="Traverse speed on soft terrain"
-                value="hullTraverseSoftTerrain"
-                decimals={1}
-              />
-            </Table.Body>
+              <Title>Survivability</Title>
+              <Table.Body>
+                <Row name="Health" value="health" decimals={0} />
+                <Row
+                  name="Fire chance"
+                  value="fireChance"
+                  deltaType="lowerIsBetter"
+                  display={(stats) => (stats.fireChance * 100).toFixed(0)}
+                  deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+                />
+                <Row name="View range" value="viewRange" decimals={0} />
+                <Row
+                  name="Camouflage still"
+                  value="camouflageStill"
+                  display={(stats) => (stats.camouflageStill * 100).toFixed(0)}
+                  deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+                />
+                <Row
+                  name="Camouflage moving"
+                  value="camouflageMoving"
+                  display={(stats) => (stats.camouflageMoving * 100).toFixed(0)}
+                  deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+                />
+                <Row
+                  name="Camouflage shooting still"
+                  value="camouflageShootingStill"
+                  display={(stats) =>
+                    (stats.camouflageShootingStill * 100).toFixed(0)
+                  }
+                  deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+                />
+                <Row
+                  name="Camouflage shooting moving"
+                  value="camouflageShootingMoving"
+                  display={(stats) =>
+                    (stats.camouflageShootingMoving * 100).toFixed(0)
+                  }
+                  deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+                />
+                <Row
+                  name="Camouflage caught on fire"
+                  value="camouflageCaughtOnFire"
+                  display={(stats) =>
+                    (stats.camouflageCaughtOnFire * 100).toFixed(0)
+                  }
+                  deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+                />
+                <Row
+                  name="Width"
+                  value="width"
+                  deltaType="lowerIsBetter"
+                  decimals={1}
+                />
+                <Row
+                  name="Height"
+                  value="height"
+                  deltaType="lowerIsBetter"
+                  decimals={1}
+                />
+                <Row
+                  name="Length"
+                  value="length"
+                  deltaType="lowerIsBetter"
+                  decimals={1}
+                />
+                <Row
+                  name="Volume"
+                  value="volume"
+                  deltaType="lowerIsBetter"
+                  decimals={1}
+                />
+              </Table.Body>
+            </Table.Root>
 
-            <Title>Survivability</Title>
-            <Table.Body>
-              <Row name="Health" value="health" decimals={0} />
-              <Row
-                name="Fire chance"
-                value="fireChance"
-                deltaType="lowerIsBetter"
-                display={(stats) => (stats.fireChance * 100).toFixed(0)}
-                deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
-              />
-              <Row name="View range" value="viewRange" decimals={0} />
-              <Row
-                name="Camouflage still"
-                value="camouflageStill"
-                display={(stats) => (stats.camouflageStill * 100).toFixed(0)}
-                deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
-              />
-              <Row
-                name="Camouflage moving"
-                value="camouflageMoving"
-                display={(stats) => (stats.camouflageMoving * 100).toFixed(0)}
-                deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
-              />
-              <Row
-                name="Camouflage shooting still"
-                value="camouflageShootingStill"
-                display={(stats) =>
-                  (stats.camouflageShootingStill * 100).toFixed(0)
-                }
-                deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
-              />
-              <Row
-                name="Camouflage shooting moving"
-                value="camouflageShootingMoving"
-                display={(stats) =>
-                  (stats.camouflageShootingMoving * 100).toFixed(0)
-                }
-                deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
-              />
-              <Row
-                name="Camouflage caught on fire"
-                value="camouflageCaughtOnFire"
-                display={(stats) =>
-                  (stats.camouflageCaughtOnFire * 100).toFixed(0)
-                }
-                deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
-              />
-              <Row
-                name="Width"
-                value="width"
-                deltaType="lowerIsBetter"
-                decimals={1}
-              />
-              <Row
-                name="Height"
-                value="height"
-                deltaType="lowerIsBetter"
-                decimals={1}
-              />
-              <Row
-                name="Length"
-                value="length"
-                deltaType="lowerIsBetter"
-                decimals={1}
-              />
-              <Row
-                name="Volume"
-                value="volume"
-                deltaType="lowerIsBetter"
-                decimals={1}
-              />
-            </Table.Body>
-          </Table.Root>
+            <IconButton
+              style={{
+                position: 'absolute',
+                right: 0,
+                top: 73, // lol nobody complain pls :)
+                transform: 'translate(50%, -50%)',
+              }}
+              onClick={() => setAddTankDialogOpen(true)}
+            >
+              <PlusIcon />
+            </IconButton>
+          </Box>
         </Flex>
       )}