feat: mixer buttons

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

@@ -1,14 +1,15 @@
 import { OrbitControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
-import { Suspense } from "react";
+import { forwardRef, Suspense } from "react";
 import { Lighting } from "../Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
 import { SceneProps } from "../Tankopedia/HeroSection/components/TankSandbox/components/SceneProps";
 import { MixerFallback } from "./components/MixerFallback";
 import { Model } from "./components/Model";
 
-export function MixerScene() {
+export const MixerScene = forwardRef<HTMLCanvasElement>((_, ref) => {
   return (
     <Canvas
+      ref={ref}
       shadows="soft"
       style={{ background: "black" }}
       camera={{
@@ -31,4 +32,4 @@ export function MixerScene() {
       </Suspense>
     </Canvas>
   );
-}
+});

packages/website/src/components/ScreenshotButton.tsx

@@ -0,0 +1,92 @@
+import { CameraIcon, CopyIcon, DownloadIcon } from "@radix-ui/react-icons";
+import {
+  Button,
+  Flex,
+  IconButton,
+  Popover,
+  type ButtonProps,
+} from "@radix-ui/themes";
+import type { RefObject } from "react";
+import { useLocale } from "../hooks/useLocale";
+import { screenshotReadyEvent } from "./Tankopedia/HeroSection/components/TankSandbox/components/SceneProps";
+
+interface Props extends ButtonProps {
+  canvas: RefObject<HTMLCanvasElement>;
+  name: string;
+}
+
+export function ScreenshotButton({ canvas, name, children, ...props }: Props) {
+  const { strings } = useLocale();
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger>
+        {children ? (
+          <Button {...props}>
+            <CameraIcon />
+            {children}
+          </Button>
+        ) : (
+          <IconButton {...props}>
+            <CameraIcon />
+          </IconButton>
+        )}
+      </Popover.Trigger>
+
+      <Popover.Content>
+        <Flex direction="column" gap="2">
+          <Popover.Close>
+            <Button
+              onClick={() => {
+                screenshotReadyEvent.dispatch(true);
+
+                requestAnimationFrame(() => {
+                  if (!canvas.current) return;
+
+                  const anchor = document.createElement("a");
+
+                  anchor.setAttribute("download", `${name}.png`);
+                  anchor.setAttribute(
+                    "href",
+                    canvas.current.toDataURL("image/png")
+                  );
+                  anchor.click();
+
+                  screenshotReadyEvent.dispatch(false);
+                });
+              }}
+            >
+              <DownloadIcon />
+              {strings.website.tools.tankopedia.sandbox.screenshot.download}
+            </Button>
+          </Popover.Close>
+          <Popover.Close>
+            <Button
+              variant="outline"
+              onClick={() => {
+                screenshotReadyEvent.dispatch(true);
+
+                requestAnimationFrame(() => {
+                  if (!canvas.current) return;
+
+                  canvas.current.toBlob((blob) => {
+                    if (!blob) return;
+
+                    navigator.clipboard.write([
+                      new ClipboardItem({ "image/png": blob }),
+                    ]);
+                  });
+
+                  screenshotReadyEvent.dispatch(false);
+                });
+              }}
+            >
+              <CopyIcon />
+              {strings.website.tools.tankopedia.sandbox.screenshot.copy}
+            </Button>
+          </Popover.Close>
+        </Flex>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -6,9 +6,6 @@ import {
 } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import {
-  CameraIcon,
-  CopyIcon,
-  DownloadIcon,
   EnterFullScreenIcon,
   ExitFullScreenIcon,
   EyeOpenIcon,
@@ -39,9 +36,9 @@ import { TankopediaDisplay } from "../../../../../stores/tankopediaPersistent/co
 import type { MaybeSkeletonComponentProps } from "../../../../../types/maybeSkeletonComponentProps";
 import type { ThicknessRange } from "../../../../Armor/components/StaticArmor";
 import { ModuleButton } from "../../../../ModuleButtons/ModuleButton";
+import { ScreenshotButton } from "../../../../ScreenshotButton";
 import { SmallTankIcon } from "../../../../SmallTankIcon";
 import { TankSearch } from "../../../../TankSearch";
-import { screenshotReadyEvent } from "../TankSandbox/components/SceneProps";
 import { CustomShellButton } from "./components/CustomShellButton";
 import { DynamicArmorSwitcher } from "./components/DynamicArmorSwitcher";
 import { QuickInputs } from "./components/QuickInputs";
@@ -440,77 +437,12 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
 
-              <Popover.Root>
-                <Popover.Trigger>
-                  <IconButton color="gray" variant="ghost">
-                    <CameraIcon />
-                  </IconButton>
-                </Popover.Trigger>
-
-                <Popover.Content>
-                  <Flex direction="column" gap="2">
-                    <Popover.Close>
-                      <Button
-                        onClick={() => {
-                          screenshotReadyEvent.dispatch(true);
-
-                          requestAnimationFrame(() => {
-                            if (!canvas.current) return;
-
-                            const anchor = document.createElement("a");
-
-                            anchor.setAttribute(
-                              "download",
-                              `${protagonistTank.name}.png`
-                            );
-                            anchor.setAttribute(
-                              "href",
-                              canvas.current.toDataURL("image/png")
-                            );
-                            anchor.click();
-
-                            screenshotReadyEvent.dispatch(false);
-                          });
-                        }}
-                      >
-                        <DownloadIcon />
-                        {
-                          strings.website.tools.tankopedia.sandbox.screenshot
-                            .download
-                        }
-                      </Button>
-                    </Popover.Close>
-                    <Popover.Close>
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          screenshotReadyEvent.dispatch(true);
-
-                          requestAnimationFrame(() => {
-                            if (!canvas.current) return;
-
-                            canvas.current.toBlob((blob) => {
-                              if (!blob) return;
-
-                              navigator.clipboard.write([
-                                new ClipboardItem({ "image/png": blob }),
-                              ]);
-                            });
-
-                            screenshotReadyEvent.dispatch(false);
-                          });
-                        }}
-                      >
-                        <CopyIcon />
-                        {
-                          strings.website.tools.tankopedia.sandbox.screenshot
-                            .copy
-                        }
-                      </Button>
-                    </Popover.Close>
-                  </Flex>
-                </Popover.Content>
-              </Popover.Root>
+              <ScreenshotButton
+                color="gray"
+                variant="ghost"
+                canvas={canvas}
+                name={protagonistTank.slug}
+              />
 
               {fullScreenAvailable && (
                 <IconButton