feat(v2): NexusLayout, Sidebar, NavGroup, NavItem, Topbar, FlowBoard placeholder

2026-06-12 00:20:27 +02:00
parent f378d7aed4
commit 3672e56994
9 changed files with 725 additions and 1 deletions
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { icons } from '../../composables/icons'
+
+defineProps<{
+  connected?: boolean
+}>()
+</script>
+
+<template>
+  <header class="topbar">
+    <!-- Search -->
+    <div class="search">
+      <span class="search-icon" v-html="icons.search || ''"></span>
+      <span class="search-placeholder">Operationen, Agents oder Tasks suchen…</span>
+    </div>
+
+    <!-- Spacer -->
+    <div class="spacer"></div>
+
+    <!-- Status Pill -->
+    <span :class="['pill', connected ? 'live' : 'preview']">
+      <span class="status-dot" :class="connected ? 'on' : 'off'"></span>
+      {{ connected ? 'Verbunden' : 'Preview' }}
+    </span>
+
+    <!-- Ask Iris Button -->
+    <button class="btn btn-primary">
+      <span class="btn-icon" v-html="icons.spark || ''"></span>
+      Ask Iris
+    </button>
+  </header>
+</template>
+
+<style scoped>
+.topbar {
+  height: 62px;
+  flex: 0 0 62px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(8,6,20,.5);
+  backdrop-filter: blur(14px);
+}
+
+.search {
+  flex: 1;
+  max-width: 560px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 38px;
+  padding: 0 14px;
+  border-radius: 11px;
+  background: rgba(124,108,255,.06);
+  border: 1px solid var(--line);
+  color: var(--tx-3);
+  font-size: 13.5px;
+  font-family: 'Manrope', sans-serif;
+}
+
+.search-icon :deep(svg) {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+.search-placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 11px;
+  border-radius: 20px;
+  font-size: 11.5px;
+  font-weight: 600;
+  font-family: 'Manrope', sans-serif;
+  border: 1px solid var(--line-2);
+  background: rgba(124,108,255,.07);
+  color: var(--tx-2);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+}
+
+.status-dot.on {
+  background: var(--st-work);
+  box-shadow: 0 0 0 0 rgba(61,220,151,.5);
+  animation: pulse-work 1.8s infinite;
+}
+
+.status-dot.off {
+  background: var(--st-idle);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 10px;
+  font-family: 'Manrope', sans-serif;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  border: none;
+  transition: filter .16s;
+}
+
+.btn-primary {
+  background: var(--grad);
+  color: #fff;
+  box-shadow: var(--glow-purple);
+}
+
+.btn-primary:hover {
+  filter: brightness(1.08);
+}
+
+.btn-icon :deep(svg) {
+  width: 15px;
+  height: 15px;
+}
+
+@keyframes pulse-work {
+  0%   { box-shadow: 0 0 0 0   rgba(61,220,151,.55); }
+  70%  { box-shadow: 0 0 0 7px rgba(61,220,151,0); }
+  100% { box-shadow: 0 0 0 0   rgba(61,220,151,0); }
+}
+</style>