From 9954653657cea753cc2293572bb0d5b36142b3a7 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 29 Jul 2025 19:10:42 +0200
Subject: [PATCH] ui/toolbar: use css modules

---
 .../{Toolbar.css => Toolbar.module.css}       |  4 +--
 .../components/Toolbar/Toolbar.stories.tsx    | 36 +++++--------------
 .../ui/src/components/Toolbar/Toolbar.tsx     |  4 +--
 .../src/components/Toolbar/ToolbarButton.tsx  |  4 +--
 4 files changed, 14 insertions(+), 34 deletions(-)
 rename pkgs/clan-app/ui/src/components/Toolbar/{Toolbar.css => Toolbar.module.css} (92%)

diff --git a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.css b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.module.css
similarity index 92%
rename from pkgs/clan-app/ui/src/components/Toolbar/Toolbar.css
rename to pkgs/clan-app/ui/src/components/Toolbar/Toolbar.module.css
index 17a049404..3341e8ee7 100644
--- a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.css
+++ b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.module.css
@@ -1,4 +1,4 @@
-div.toolbar {
+.toolbar {
   @apply flex flex-row items-center justify-center gap-1.5 p-1 size-fit rounded-md self-stretch;
 
   border: 0.0625rem solid theme(colors.off.toolbar_border);
@@ -13,7 +13,7 @@ div.toolbar {
   }
 }
 
-button.toolbar-button {
+.toolbar_button {
   @apply w-6 h-6 p-1 rounded-[0.25rem];
 
   &:hover {
diff --git a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx
index e8fe242d4..46796c68f 100644
--- a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx
@@ -43,13 +43,8 @@ export const WithTooltip: Story = {
           trigger={<ToolbarButton name="select" icon="Cursor" />}
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Select an object
             </Typography>
           </div>
@@ -59,13 +54,8 @@ export const WithTooltip: Story = {
           trigger={<ToolbarButton name="new-machine" icon="NewMachine" />}
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Create a new machine
             </Typography>
           </div>
@@ -76,13 +66,8 @@ export const WithTooltip: Story = {
           }
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Manage Services
             </Typography>
           </div>
@@ -91,13 +76,8 @@ export const WithTooltip: Story = {
           trigger={<ToolbarButton name="ai" icon="AI" />}
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Chat with AI
             </Typography>
           </div>
diff --git a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.tsx b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.tsx
index 6c347a1db..b79b1f620 100644
--- a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.tsx
+++ b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.tsx
@@ -1,5 +1,5 @@
-import "./Toolbar.css";
 import { JSX } from "solid-js";
+import styles from "./Toolbar.module.css";
 
 export interface ToolbarProps {
   children: JSX.Element;
@@ -7,7 +7,7 @@ export interface ToolbarProps {
 
 export const Toolbar = (props: ToolbarProps) => {
   return (
-    <div class="toolbar" role="toolbar" aria-orientation="horizontal">
+    <div class={styles.toolbar} role="toolbar" aria-orientation="horizontal">
       {props.children}
     </div>
   );
diff --git a/pkgs/clan-app/ui/src/components/Toolbar/ToolbarButton.tsx b/pkgs/clan-app/ui/src/components/Toolbar/ToolbarButton.tsx
index b271d7b95..8e37797fc 100644
--- a/pkgs/clan-app/ui/src/components/Toolbar/ToolbarButton.tsx
+++ b/pkgs/clan-app/ui/src/components/Toolbar/ToolbarButton.tsx
@@ -1,4 +1,4 @@
-import "./Toolbar.css";
+import styles from "./Toolbar.module.css";
 import cx from "classnames";
 import { Button } from "@kobalte/core/button";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
@@ -13,7 +13,7 @@ export interface ToolbarButtonProps
 export const ToolbarButton = (props: ToolbarButtonProps) => {
   return (
     <Button
-      class={cx("toolbar-button", { selected: props.selected })}
+      class={cx(styles.toolbar_button, { selected: props.selected })}
       {...props}
     >
       <Icon icon={props.icon} inverted={!props.selected} />