feat: rename to breakdown

src/components/EmbedCustomize.tsx

@@ -1,16 +1,10 @@
 import * as radixColors from '@radix-ui/colors';
-import {
-  BorderSolidIcon,
-  Cross1Icon,
-  ImageIcon,
-  SquareIcon,
-} from '@radix-ui/react-icons';
+import { ImageIcon } from '@radix-ui/react-icons';
 import {
   Box,
   Button,
   Flex,
   Heading,
-  IconButton,
   ScrollArea,
   Select,
   Slider,
@@ -89,15 +83,6 @@ export function EmbedCustomize<Config extends EmbedConfig>({
           <Flex direction="column" gap="2" p="4">
             <Heading mb="4">Customize</Heading>
 
-            <Button
-              variant="outline"
-              color="gray"
-              mb="6"
-              onClick={() => fileInput.current?.click()}
-            >
-              <ImageIcon /> Upload test background
-            </Button>
-
             {Object.entries(config).map(([keyUntyped, setting]) => {
               const key = keyUntyped as keyof (
                 | Immutable<ExtractEmbedConfigType<Config>>
@@ -577,25 +562,22 @@ export function EmbedCustomize<Config extends EmbedConfig>({
           >
             <Flex
               justify="between"
+              align="center"
               p="2"
-              px="3"
+              pl="3"
               style={{
                 backgroundColor: 'var(--color-panel-solid)',
               }}
             >
               <Text color="gray">Example preview</Text>
 
-              <Flex align="center" gap="3">
-                <IconButton color="gray" disabled size="1" variant="ghost">
-                  <BorderSolidIcon />
-                </IconButton>
-                <IconButton color="gray" disabled size="1" variant="ghost">
-                  <SquareIcon />
-                </IconButton>
-                <IconButton color="gray" disabled size="1" variant="ghost">
-                  <Cross1Icon />
-                </IconButton>
-              </Flex>
+              <Button
+                variant="outline"
+                color="gray"
+                onClick={() => fileInput.current?.click()}
+              >
+                <ImageIcon /> Upload test background
+              </Button>
             </Flex>
 
             <Flex

src/components/TanksEmbed.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from '@radix-ui/themes';
 import { times } from 'lodash';
 import { ReactNode } from 'react';
-import { TanksEmbedState } from '../app/tools/embed/customize/tanks/page';
+import { BreakdownEmbedState } from '../app/tools/embed/customize/breakdown/page';
 import {
   toColorVar,
   toRadiusVar,
@@ -13,12 +13,15 @@ import { ClassLight } from './ClassIcon/components/ClassLight';
 import { ClassMedium } from './ClassIcon/components/ClassMedium';
 import { ClassTankDestroyer } from './ClassIcon/components/ClassTankDestroyer';
 
-interface TanksEmbedWrapperProps {
+interface BreakdownEmbedWrapperProps {
   children: ReactNode;
-  state: TanksEmbedState;
+  state: BreakdownEmbedState;
 }
 
-export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
+export function BreakdownEmbedWrapper({
+  children,
+  state,
+}: BreakdownEmbedWrapperProps) {
   return (
     <Flex
       direction="column"
@@ -30,12 +33,12 @@ export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
   );
 }
 
-interface TanksEmbedCardProps {
+interface BreakdownEmbedCardProps {
   tank: TankDefinition | null;
-  state: TanksEmbedState;
+  state: BreakdownEmbedState;
 }
 
-export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
+export function BreakdownEmbedCard({ tank, state }: BreakdownEmbedCardProps) {
   const { color: cardTitleColor, ...restCardTitleProps } = state.cardTitle;
   return (
     <Flex