Merge pull request 'feat: ui/toolbar' (#4357) from ui/toolbar into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4357

pkgs/clan-app/ui/icons/cursor.svg

@@ -22,4 +22,4 @@
     <rect x="24" y="24" width="6" height="6"/>
     <rect x="29" y="24" width="6" height="6"/>
     <rect x="6" y="30" width="6" height="6"/>
-</svg>
+</svg>

pkgs/clan-app/ui/src/components/Divider/Divider.css

@@ -1,5 +1,5 @@
 hr {
-  @apply border-none outline-none bg-inv-2;
+  @apply border-none outline-none bg-inv-2 self-stretch;
 
   &.inverted {
     @apply bg-def-3;

pkgs/clan-app/ui/src/components/Icon/Icon.tsx

@@ -102,6 +102,7 @@ export type IconVariant = keyof typeof icons;
 const viewBoxes: Partial<Record<IconVariant, string>> = {
   ClanIcon: "0 0 72 89",
   Offline: "0 0 38 27",
+  Cursor: "0 0 35 42",
 };
 
 export interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.css

@@ -0,0 +1,30 @@
+div.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);
+  background: linear-gradient(
+    180deg,
+    theme(colors.bg.inv.3) 0%,
+    theme(colors.bg.inv.4) 100%
+  );
+
+  & > hr {
+    @apply h-full min-h-8;
+  }
+
+  & > button.toolbar-button {
+    @apply w-6 h-6 p-1 rounded-[0.25rem];
+
+    &:hover {
+      @apply bg-inv-1;
+    }
+
+    &:active {
+      @apply bg-inv-4;
+    }
+
+    &.selected {
+      @apply bg-bg-semantic-success-4;
+    }
+  }
+}

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@kachurun/storybook-solid";
+import { Toolbar, ToolbarProps } from "@/src/components/Toolbar/Toolbar";
+import { Divider } from "@/src/components/Divider/Divider";
+import { ToolbarButton } from "./ToolbarButton";
+
+const meta: Meta<ToolbarProps> = {
+  title: "Components/Toolbar",
+  component: Toolbar,
+};
+
+export default meta;
+
+type Story = StoryObj<ToolbarProps>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <ToolbarButton name="select" icon="Cursor" />
+        <ToolbarButton name="new-machine" icon="NewMachine" />
+        <Divider orientation="vertical" />
+        <ToolbarButton name="modules" icon="Modules" selected={true} />
+        <ToolbarButton name="ai" icon="AI" />
+      </>
+    ),
+  },
+};

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,14 @@
+import "./Toolbar.css";
+import { JSX } from "solid-js";
+
+export interface ToolbarProps {
+  children: JSX.Element;
+}
+
+export const Toolbar = (props: ToolbarProps) => {
+  return (
+    <div class="toolbar" role="toolbar" aria-orientation="horizontal">
+      {props.children}
+    </div>
+  );
+};

pkgs/clan-app/ui/src/components/Toolbar/ToolbarButton.tsx

@@ -0,0 +1,22 @@
+import "./Toolbar.css";
+import cx from "classnames";
+import { Button } from "@kobalte/core/button";
+import Icon, { IconVariant } from "@/src/components/Icon/Icon";
+import type { JSX } from "solid-js";
+
+export interface ToolbarButtonProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: IconVariant;
+  selected?: boolean;
+}
+
+export const ToolbarButton = (props: ToolbarButtonProps) => {
+  return (
+    <Button
+      class={cx("toolbar-button", { selected: props.selected })}
+      {...props}
+    >
+      <Icon icon={props.icon} inverted={!props.selected} />
+    </Button>
+  );
+};

pkgs/clan-app/ui/tailwind/core-plugin.ts

@@ -13,6 +13,7 @@ const primaries = {
     black: toRGB("#000000"),
     darknet_name: toRGB("#00ff57"),
     darknet_label: toRGB("#2cff74"),
+    toolbar_border: toRGB("#2e4a4b"),
   },
   primary: {
     50: toRGB("#f4f9f9"),