From 5b9ff7acb37d689408d42d08b0b2b935b8a7030b Mon Sep 17 00:00:00 2001
From: GonnaHetzMe <karelpak1@seznam.cz>
Date: Wed, 25 Mar 2026 17:25:52 +0100
Subject: [PATCH] feat: CopyableCode styles and remove DEV name fallback

---
 .../Armor/components/ArmorPlateDisplay.tsx    |  7 ++++-
 .../website/src/components/CopyableCode.tsx   | 30 ++++++++++++-------
 .../Tankopedia/MetaSection/index.tsx          | 19 +++++++++---
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
index fb3fd4b6e..80e54eda4 100644
--- a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
+++ b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
@@ -61,7 +61,12 @@ export function ArmorPlateDisplay() {
               <>
                 <Text mt="2" color="gray" size="2">
                   <b>DEV:</b>{" "}
-                  <CopyableCode copy={highlightArmor.name}>
+                  <CopyableCode
+                    copy={highlightArmor.name}
+                    variant="soft"
+                    highContrast
+                    color="gray"
+                  >
                     {highlightArmor.name}
                   </CopyableCode>
                 </Text>
diff --git a/packages/website/src/components/CopyableCode.tsx b/packages/website/src/components/CopyableCode.tsx
index 8877b4b07..030d52963 100644
--- a/packages/website/src/components/CopyableCode.tsx
+++ b/packages/website/src/components/CopyableCode.tsx
@@ -1,29 +1,37 @@
-import { Code, Tooltip } from "@radix-ui/themes";
-import { useState, type ReactNode } from "react";
+import { Code, Tooltip, type CodeProps } from "@radix-ui/themes";
+import { useState } from "react";
 import { useLocale } from "../hooks/useLocale";
 
-interface CopyableCodeProps {
+export interface CopyableCodeProps extends CodeProps {
   copy?: string;
-  children: ReactNode;
 }
 
-export function CopyableCode({ copy, children }: CopyableCodeProps) {
+export function CopyableCode({
+  copy,
+  onClick,
+  onPointerLeave,
+  style,
+  children,
+  ...props
+}: CopyableCodeProps) {
   const [copied, setCopied] = useState(false);
   const { strings } = useLocale();
 
   return (
     <Tooltip open={copied} content={strings.website.common.copy_button.copied}>
       <Code
-        variant="soft"
-        highContrast
-        color="gray"
-        style={{ cursor: copy ? "copy" : "default" }}
-        onClick={() => {
+        {...props}
+        style={{ ...(copy ? { cursor: "copy" } : {}), ...style }}
+        onClick={(event) => {
+          onClick?.(event);
           if (!copy) return;
           navigator.clipboard.writeText(copy);
           setCopied(true);
         }}
-        onPointerLeave={() => setCopied(false)}
+        onPointerLeave={(event) => {
+          onPointerLeave?.(event);
+          setCopied(false);
+        }}
       >
         {children}
       </Code>
diff --git a/packages/website/src/components/Tankopedia/MetaSection/index.tsx b/packages/website/src/components/Tankopedia/MetaSection/index.tsx
index f3276136a..62f560f5b 100644
--- a/packages/website/src/components/Tankopedia/MetaSection/index.tsx
+++ b/packages/website/src/components/Tankopedia/MetaSection/index.tsx
@@ -24,6 +24,7 @@ export function MetaSection() {
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const ClassIcon = classIcons[protagonist.class];
   const { locale, strings } = useLocale();
+  const devName = (protagonist as { dev_name?: string }).dev_name;
 
   return (
     <Flex justify="center" mt="-9">
@@ -102,17 +103,27 @@ export function MetaSection() {
                     <Listing
                       label={strings.website.tools.tankopedia.meta.dev_id}
                     >
-                      <CopyableCode copy={`${protagonist.id}`}>
+                      <CopyableCode
+                        copy={`${protagonist.id}`}
+                        variant="soft"
+                        highContrast
+                        color="gray"
+                      >
                         {protagonist.id}
                       </CopyableCode>
                     </Listing>
                   )}
-                  {developerMode && (
+                  {developerMode && devName && (
                     <Listing
                       label={strings.website.tools.tankopedia.meta.dev_name}
                     >
-                      <CopyableCode copy={protagonist.dev_name}>
-                        {protagonist.dev_name ?? '-'}
+                      <CopyableCode
+                        copy={devName}
+                        variant="soft"
+                        highContrast
+                        color="gray"
+                      >
+                        {devName}
                       </CopyableCode>
                     </Listing>
                   )}