claudes variant of ui

2026-07-07 23:25:03 +03:00
parent 29f8bb149d
commit e27770d1c3
26 changed files with 3232 additions and 1 deletions
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { NODE_TYPES } from '../nodeTypes'
+
+const emit = defineEmits<{
+  addNode: [nodeType: string]
+}>()
+
+const groups = [
+  { label: 'Sources',  types: ['testpattern', 'ndiin', 'decklinkin'] },
+  { label: 'Sinks',    types: ['ndiout', 'decklinkout', 'fakesink'] },
+]
+</script>
+
+<template>
+  <div class="palette">
+    <div class="palette-title">Nodes</div>
+    <div v-for="group in groups" :key="group.label" class="palette-group">
+      <div class="group-label">{{ group.label }}</div>
+      <button
+        v-for="type in group.types"
+        :key="type"
+        class="palette-btn"
+        @click="emit('addNode', type)"
+      >
+        + {{ NODE_TYPES[type]?.label ?? type }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.palette {
+  width: 140px;
+  background: #181825;
+  border-right: 1px solid #313244;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.palette-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: #6c7086;
+  letter-spacing: 0.8px;
+  padding: 12px 12px 6px;
+  text-transform: uppercase;
+}
+
+.palette-group {
+  padding: 4px 0 8px;
+}
+
+.group-label {
+  font-size: 10px;
+  color: #45475a;
+  padding: 4px 12px 2px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.palette-btn {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #bac2de;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  border-radius: 0;
+}
+
+.palette-btn:hover {
+  background: #2a2b3d;
+  color: #cdd6f4;
+}
+</style>