feat: unify workspace sidebar and create Foundry graph pages

src/components/ui/icon-button.module.css

@@ -0,0 +1,18 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 24px;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.button svg { width: 16px; height: 16px; flex: 0 0 16px; }
+.button:hover { background: #e9e7e3; }
+.button:focus-visible { outline: 2px solid #9d7d66; outline-offset: 2px; }
+.button:disabled { opacity: 0.45; cursor: not-allowed; }

src/components/ui/icon-button.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import type { LucideIcon } from "lucide-react";
+import styles from "./icon-button.module.css";
+
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  icon: LucideIcon;
+  label: string;
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton({ icon: Icon, label, className = "", type = "button", ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        aria-label={label}
+        title={label}
+        className={`${styles.button} ${className}`}
+        {...props}
+      >
+        <Icon size={16} strokeWidth={1.6} aria-hidden="true" />
+      </button>
+    );
+  },
+);