feat: add frontend source (fix submodule), compact node design

- Remove nested .git from Vite scaffold - Horizontal node layout: icon left, label+IP right, reduced height
2026-03-06 23:31:15 +01:00
parent 4310a5cc2d
commit 9bb34c99cc
35 changed files with 9902 additions and 1 deletions
@@ -0,0 +1,68 @@
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
+import { type LucideIcon } from 'lucide-react'
+import type { NodeData, NodeStatus } from '@/types'
+
+const STATUS_COLORS: Record<NodeStatus, string> = {
+  online: '#39d353',
+  offline: '#f85149',
+  pending: '#e3b341',
+  unknown: '#8b949e',
+}
+
+interface BaseNodeProps extends NodeProps<Node<NodeData>> {
+  icon: LucideIcon
+  glowColor?: string
+}
+
+export function BaseNode({ data, selected, icon: Icon, glowColor = '#00d4ff' }: BaseNodeProps) {
+  const statusColor = STATUS_COLORS[data.status]
+  const isOnline = data.status === 'online'
+
+  return (
+    <div
+      className="relative flex flex-row items-center gap-2.5 px-2.5 py-2 rounded-lg border transition-all duration-200"
+      style={{
+        background: '#21262d',
+        borderColor: selected ? glowColor : '#30363d',
+        boxShadow: isOnline
+          ? `0 0 10px ${glowColor}2e, 0 0 3px ${glowColor}1a`
+          : selected
+          ? `0 0 8px ${glowColor}44`
+          : 'none',
+        opacity: data.status === 'offline' ? 0.55 : 1,
+        minWidth: 140,
+      }}
+    >
+      <Handle type="target" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
+
+      {/* Icon */}
+      <div
+        className="flex items-center justify-center w-7 h-7 rounded-md shrink-0"
+        style={{ color: isOnline ? glowColor : '#8b949e', background: '#161b22' }}
+      >
+        <Icon size={15} />
+      </div>
+
+      {/* Details */}
+      <div className="flex flex-col min-w-0">
+        <div className="text-xs font-medium leading-tight truncate max-w-[110px]" title={data.label}>
+          {data.label}
+        </div>
+        {data.ip && (
+          <div className="font-mono text-[10px] text-[#8b949e] truncate" title={data.ip}>
+            {data.ip}
+          </div>
+        )}
+      </div>
+
+      {/* Status dot */}
+      <div
+        className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full shrink-0"
+        style={{ backgroundColor: statusColor }}
+        title={data.status}
+      />
+
+      <Handle type="source" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
+    </div>
+  )
+}