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,72 @@
+import { useCallback } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  BackgroundVariant,
+  type Node,
+  type Edge,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { useCanvasStore } from '@/stores/canvasStore'
+import { nodeTypes } from './nodes'
+import { edgeTypes } from './edges'
+import type { NodeData, EdgeData } from '@/types'
+
+export function CanvasContainer() {
+  const {
+    nodes, edges,
+    onNodesChange, onEdgesChange, onConnect,
+    setSelectedNode,
+  } = useCanvasStore()
+
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node<NodeData>) => {
+    setSelectedNode(node.id)
+  }, [setSelectedNode])
+
+  const onPaneClick = useCallback(() => {
+    setSelectedNode(null)
+  }, [setSelectedNode])
+
+  return (
+    <div className="w-full h-full">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges as Edge<EdgeData>[]}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        snapToGrid
+        snapGrid={[16, 16]}
+        fitView
+        colorMode="dark"
+      >
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={24}
+          size={1}
+          color="#30363d"
+        />
+        <Controls />
+        <MiniMap
+          nodeColor={(node) => {
+            const data = node.data as NodeData
+            const colorMap: Record<string, string> = {
+              online: '#39d353',
+              offline: '#f85149',
+              pending: '#e3b341',
+              unknown: '#8b949e',
+            }
+            return colorMap[data?.status ?? 'unknown']
+          }}
+          maskColor="rgba(13, 17, 23, 0.7)"
+        />
+      </ReactFlow>
+    </div>
+  )
+}