feat(app): sidebar, preset picker, wizard, App rewired around workspaces + LayoutEngine

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-09 21:31:49 +07:00
parent 0320a2f313
commit 7ec0c84685
4 changed files with 162 additions and 57 deletions
@@ -0,0 +1,30 @@
+export const PRESETS: { id: string; label: string; slots: number }[] = [
+  { id: "1", label: "1", slots: 1 },
+  { id: "2lr", label: "2↔", slots: 2 },
+  { id: "2tb", label: "2↕", slots: 2 },
+  { id: "2+1", label: "2+1", slots: 3 },
+  { id: "1+2", label: "1+2", slots: 3 },
+  { id: "3", label: "3", slots: 3 },
+  { id: "2x2", label: "2×2", slots: 4 },
+  { id: "4", label: "4", slots: 4 },
+  { id: "2x3", label: "2×3", slots: 6 },
+  { id: "2x4", label: "2×4", slots: 8 },
+];
+
+export function PresetPicker({ selected, onSelect }: { selected: string; onSelect: (id: string) => void }) {
+  return (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      {PRESETS.map((p) => (
+        <button key={p.id} onClick={() => onSelect(p.id)}
+          style={{
+            padding: "6px 10px", borderRadius: 6, fontFamily: "monospace", fontSize: 12,
+            background: p.id === selected ? "#1A2029" : "transparent",
+            border: p.id === selected ? "1px solid #4C8DFF" : "1px solid #232A33",
+            color: p.id === selected ? "#E6EDF3" : "#8B97A6", cursor: "pointer",
+          }}>
+          {p.label}
+        </button>
+      ))}
+    </div>
+  );
+}