From 2c66bd65080d014aab4124a2b679de284dada83c Mon Sep 17 00:00:00 2001
From: Glen Huang <me@glenhuang.com>
Date: Wed, 24 Sep 2025 18:04:24 +0800
Subject: [PATCH] ui/cubes: use css modules for cubes

---
 pkgs/clan-app/ui/src/scene/cubes.css        | 27 ---------------------
 pkgs/clan-app/ui/src/scene/cubes.module.css |  9 +++++++
 pkgs/clan-app/ui/src/scene/cubes.tsx        |  6 ++---
 3 files changed, 12 insertions(+), 30 deletions(-)
 delete mode 100644 pkgs/clan-app/ui/src/scene/cubes.css
 create mode 100644 pkgs/clan-app/ui/src/scene/cubes.module.css

diff --git a/pkgs/clan-app/ui/src/scene/cubes.css b/pkgs/clan-app/ui/src/scene/cubes.css
deleted file mode 100644
index 4f5e4edad..000000000
--- a/pkgs/clan-app/ui/src/scene/cubes.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.cubes-scene-container {
-  width: 100%;
-  height: 100vh;
-}
-
-/* <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center">
-        <Show when={show()}> */
-.toolbar-container {
-  @apply absolute bottom-10 z-30 left-1/2;
-  @apply flex justify-center items-center;
-}
-
-.machine-label {
-  @apply text-white bg-inv-4 py-1 px-2 rounded-sm;
-  font-size: 0.75rem;
-}
-
-.machine-label::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #203637 transparent transparent transparent;
-}
diff --git a/pkgs/clan-app/ui/src/scene/cubes.module.css b/pkgs/clan-app/ui/src/scene/cubes.module.css
new file mode 100644
index 000000000..b39bba575
--- /dev/null
+++ b/pkgs/clan-app/ui/src/scene/cubes.module.css
@@ -0,0 +1,9 @@
+.cubesSceneContainer {
+  width: 100%;
+  height: 100vh;
+}
+
+.toolbarContainer {
+  @apply absolute bottom-10 z-30 left-1/2;
+  @apply flex justify-center items-center;
+}
diff --git a/pkgs/clan-app/ui/src/scene/cubes.tsx b/pkgs/clan-app/ui/src/scene/cubes.tsx
index 1dd1cfedf..782139f15 100644
--- a/pkgs/clan-app/ui/src/scene/cubes.tsx
+++ b/pkgs/clan-app/ui/src/scene/cubes.tsx
@@ -7,7 +7,7 @@ import {
   JSX,
   Show,
 } from "solid-js";
-import "./cubes.css";
+import styles from "./cubes.module.css";
 
 import * as THREE from "three";
 import { MapControls } from "three/examples/jsm/controls/MapControls.js";
@@ -779,7 +779,7 @@ export function CubeScene(props: {
       </Show>
       <div
         class={cx(
-          "cubes-scene-container",
+          styles.cubesSceneContainer,
           ctx.worldMode() === "default" && "cursor-no-drop",
           ctx.worldMode() === "select" && "cursor-pointer",
           ctx.worldMode() === "service" && "cursor-pointer",
@@ -788,7 +788,7 @@ export function CubeScene(props: {
         )}
         ref={(el) => (container = el)}
       />
-      <div class="toolbar-container">
+      <div class={styles.toolbarContainer}>
         <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
           {props.toolbarPopup}
         </div>