diff --git a/src/components/NodeLibraryTab.jsx b/src/components/NodeLibraryTab.jsx index 4ee50de..7944529 100644 --- a/src/components/NodeLibraryTab.jsx +++ b/src/components/NodeLibraryTab.jsx @@ -94,7 +94,7 @@ function NodeLibraryTab({ nodes, groups: groupsProp, selectedNode, onSelectNode - + @@ -117,10 +117,16 @@ function NodeLibraryTab({ nodes, groups: groupsProp, selectedNode, onSelectNode >
GroupGroup Node Unit Base Capacity + className="node-group-badge" + style={{ + background: getGroupColor(node.group) + '14', + color: getGroupColor(node.group), + borderColor: getGroupColor(node.group) + '30' + }} + > + + {groups[node.group]?.name || node.group} +
{node.name}
diff --git a/src/styles/app.css b/src/styles/app.css index a54bc57..8212187 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -564,6 +564,18 @@ flex-shrink: 0; } +.node-group-badge { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 3px 8px; + border-radius: var(--radius-sm); + font-size: 0.6875rem; + font-weight: 500; + white-space: nowrap; + border: 1px solid; +} + .node-card-name { font-weight: 500; font-size: 0.875rem;