merge: align dev branch with main

2026-06-03 08:51:02 +00:00
parent 51a399c775
commit b39d6ce5f4
319 changed files with 30221 additions and 9221 deletions
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { Icon } from "../components/ui";
+import {
+	ToolTypesTab,
+	ToolConfigsTab,
+	ConfigFoldersTab,
+} from "../components/features/tool-workshop";
+
+type Tab = "types" | "configs" | "folders";
+
+export const ToolWorkshopPage = () => {
+	const [activeTab, setActiveTab] = useState<Tab>("types");
+
+	return (
+		<div className="container">
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					marginBottom: "1rem",
+				}}
+			>
+				<h1>Tool Workshop</h1>
+			</div>
+
+			<div
+				className="tabs"
+				style={{
+					display: "flex",
+					gap: "0.5rem",
+					marginBottom: "1rem",
+					borderBottom: "1px solid var(--color-border)",
+				}}
+			>
+				{(["types", "configs", "folders"] as Tab[]).map((tab) => (
+					<button
+						key={tab}
+						onClick={() => setActiveTab(tab)}
+						className={activeTab === tab ? "tab-active" : "tab"}
+						style={{
+							padding: "0.5rem 1rem",
+							borderBottom:
+								activeTab === tab
+									? "2px solid var(--color-primary)"
+									: "2px solid transparent",
+							background: "none",
+							border: "none",
+							cursor: "pointer",
+							fontWeight: activeTab === tab ? 600 : 400,
+						}}
+					>
+						{tab === "types" && (
+							<>
+								<Icon name="code" size="sm" /> Tool Types
+							</>
+						)}
+						{tab === "configs" && (
+							<>
+								<Icon name="settings" size="sm" /> Configs
+							</>
+						)}
+						{tab === "folders" && (
+							<>
+								<Icon name="folder" size="sm" /> Config Folders
+							</>
+						)}
+					</button>
+				))}
+			</div>
+
+			{activeTab === "types" && <ToolTypesTab />}
+			{activeTab === "configs" && <ToolConfigsTab />}
+			{activeTab === "folders" && <ConfigFoldersTab />}
+		</div>
+	);
+};