From 0d4b61993cba37c180ac91e40a0fb362711de8de Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <jj@r.bdr.sh>
Date: Fri, 30 Jan 2026 11:31:24 +0100
Subject: Initial implementation

---
 src/components/Sidebar.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/Sidebar.tsx

(limited to 'src/components/Sidebar.tsx')

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..97d923b
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { useStore } from "../store/store.ts";
+
+export const Sidebar: React.FC = () => {
+  const availableModels = useStore((state) => state.availableModels);
+  const addModel = useStore((state) => state.addModel);
+
+  const handleAdd = (modelId: string) => {
+    addModel(modelId, { x: 0, y: 0, z: 0 });
+  };
+
+  return (
+    <section className="sidebar">
+      <h2 className="sidebar-title">Models</h2>
+      <nav className="model-list">
+        {availableModels.map((model) => (
+          <article key={model.id} className="model-item">
+            <span className="model-name">{model.name}</span>
+            <button
+              className="add-model-btn"
+              onClick={() => handleAdd(model.id)}
+            >
+              Add
+            </button>
+          </article>
+        ))}
+      </nav>
+    </section>
+  );
+};
-- 
cgit