feat: compact icons

packages/website-ue/src/components/IconButton/index.module.css

@@ -3,5 +3,5 @@
 
   aspect-ratio: 1 / 1;
 
-  font-size: 2rem;
+  font-size: 1.75em;
 }

packages/website-ue/src/components/TankopediaLoadout/index.module.css

@@ -1,20 +1,32 @@
 .lines {
   display: flex;
+  flex-direction: column;
 
   gap: var(--space-3);
 
   .line {
     display: flex;
-    flex-direction: column;
     align-items: center;
 
-    gap: var(--space-2);
+    gap: var(--space-3);
 
     .stage {
+      position: relative;
+
       img {
         width: 1em;
         height: 1em;
       }
+
+      .tier {
+        position: absolute;
+        left: var(--space-2);
+        top: var(--space-2);
+      }
+    }
+
+    .arrow {
+      display: contents;
     }
   }
 }

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -1,5 +1,5 @@
 import type { UpgradeLine } from "@blitzkit/closed/protos/game/proto/legacy/blitz_static_tank_upgrade_line";
-import { CaretDownIcon } from "@radix-ui/react-icons";
+import { romanize } from "@blitzkit/core";
 import { Fragment } from "react";
 import { api } from "../../core/api/dynamic";
 import { useAwait } from "../../hooks/useAwait";
@@ -8,6 +8,7 @@ import { Tankopedia } from "../../stores/tankopedia";
 import { Heading } from "../Heading";
 import { IconButton } from "../IconButton";
 import { Section } from "../Section";
+import { Text } from "../Text";
 import styles from "./index.module.css";
 
 export function TankopediaLoadout() {
@@ -40,12 +41,18 @@ function Line({ line }: LineProps) {
 
   return (
     <div className={styles.line}>
+      {line.name}
+
       {line.stages.map((stage, index) => {
         const isSelected = upgrades[line.name] === index;
 
         return (
           <Fragment key={stage.tech_name}>
-            {index !== 0 && <CaretDownIcon width="1em" height="1em" />}
+            {/* {index !== 0 && (
+              <Text lowContrast className={styles.arrow}>
+                <CaretRightIcon width="1em" height="1em" />
+              </Text>
+            )} */}
 
             <IconButton
               variant={isSelected ? "solid" : "surface"}
@@ -104,7 +111,10 @@ function Line({ line }: LineProps) {
               <img src={`/api/tanks/modules/${stage.stage_type}.webp`} />
               {/* {stage.display_name} */}
               {/* {stage.grade} */}
-              {/* {stage.number} */}
+
+              <Text lowContrast size="minor" className={styles.tier}>
+                {romanize(stage.number)}
+              </Text>
             </IconButton>
           </Fragment>
         );

packages/website-ue/src/core/ui/romanize.ts

@@ -0,0 +1,48 @@
+// Source - https://stackoverflow.com/a/9083076
+// Posted by Rene Pot, modified by community. See post 'Timeline' for change history
+// Retrieved 2026-05-11, License - CC BY-SA 4.0
+
+const keys = [
+  "",
+  "C",
+  "CC",
+  "CCC",
+  "CD",
+  "D",
+  "DC",
+  "DCC",
+  "DCCC",
+  "CM",
+  "",
+  "X",
+  "XX",
+  "XXX",
+  "XL",
+  "L",
+  "LX",
+  "LXX",
+  "LXXX",
+  "XC",
+  "",
+  "I",
+  "II",
+  "III",
+  "IV",
+  "V",
+  "VI",
+  "VII",
+  "VIII",
+  "IX",
+];
+
+export function romanize(number: number) {
+  let digits = String(+number).split("");
+  let roman = "";
+  let i = 3;
+
+  while (i--) {
+    roman = (keys[+digits.pop()! + i * 10] || "") + roman;
+  }
+
+  return Array(+digits.join("") + 1).join("M") + roman;
+}