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>
+  )
+}
@@ -0,0 +1,35 @@
+import { type NodeProps, type Node } from '@xyflow/react'
+import {
+  Globe, Router, Network, Server, Layers, Box, Container,
+  HardDrive, Cpu, Wifi, Circle,
+} from 'lucide-react'
+import { BaseNode } from './BaseNode'
+import type { NodeData } from '@/types'
+
+type N = NodeProps<Node<NodeData>>
+
+export const IspNode = (props: N) => <BaseNode {...props} icon={Globe} glowColor="#00d4ff" />
+export const RouterNode = (props: N) => <BaseNode {...props} icon={Router} glowColor="#00d4ff" />
+export const SwitchNode = (props: N) => <BaseNode {...props} icon={Network} glowColor="#39d353" />
+export const ServerNode = (props: N) => <BaseNode {...props} icon={Server} glowColor="#a855f7" />
+export const ProxmoxNode = (props: N) => <BaseNode {...props} icon={Layers} glowColor="#ff6e00" />
+export const VmNode = (props: N) => <BaseNode {...props} icon={Box} glowColor="#a855f7" />
+export const LxcNode = (props: N) => <BaseNode {...props} icon={Container} glowColor="#00d4ff" />
+export const NasNode = (props: N) => <BaseNode {...props} icon={HardDrive} glowColor="#39d353" />
+export const IotNode = (props: N) => <BaseNode {...props} icon={Cpu} glowColor="#e3b341" />
+export const ApNode = (props: N) => <BaseNode {...props} icon={Wifi} glowColor="#00d4ff" />
+export const GenericNode = (props: N) => <BaseNode {...props} icon={Circle} glowColor="#8b949e" />
+
+export const nodeTypes = {
+  isp: IspNode,
+  router: RouterNode,
+  switch: SwitchNode,
+  server: ServerNode,
+  proxmox: ProxmoxNode,
+  vm: VmNode,
+  lxc: LxcNode,
+  nas: NasNode,
+  iot: IotNode,
+  ap: ApNode,
+  generic: GenericNode,
+}