feat(web/mazenet): amber-tint pending LAN placeholders
Pre: optimistic placeholders for enqueued LAN-add mutations were indistinguishable from regular not-yet-deployed nets — same dim mono chrome, same dotted border. User couldn't tell whether a drop had been queued or had silently failed and re-stacked over an existing LAN. Tag the placeholder with `pending: true`, render it in the same amber the REAP button uses (var(--warn, #e0a040)) with a 'PENDING' chip-mini in the head. Visual is loud enough that there is no chance of confusion with INACTIVE (dimmed) or regular pending-state LANs (mono). Reconciliation is the existing refetch pumping setNets(h.nets) on SSE — no extra plumbing needed; placeholders disappear naturally when the mutator's applied event lands and the canvas re-hydrates from the server.
This commit is contained in:
@@ -27,6 +27,7 @@ const NetBox: React.FC<Props> = ({
|
||||
dropTarget ? 'drop-target' : '',
|
||||
inactive ? 'inactive' : '',
|
||||
deployed ? 'deployed' : '',
|
||||
net.pending ? 'pending' : '',
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const Icon = net.kind === 'internet' ? Globe : net.kind === 'dmz' ? ShieldAlert : GitMerge;
|
||||
@@ -53,12 +54,20 @@ const NetBox: React.FC<Props> = ({
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<Icon size={10} />
|
||||
<span>{net.label}</span>
|
||||
{inactive && (
|
||||
{inactive && !net.pending && (
|
||||
<span className="chip-mini"
|
||||
style={{ marginLeft: 4, borderColor: 'var(--border)', color: 'rgba(255,255,255,0.45)' }}>
|
||||
INACTIVE
|
||||
</span>
|
||||
)}
|
||||
{net.pending && (
|
||||
<span className="chip-mini"
|
||||
style={{ marginLeft: 4,
|
||||
borderColor: 'var(--warn, #e0a040)',
|
||||
color: 'var(--warn, #e0a040)' }}>
|
||||
PENDING
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="cidr">{net.cidr}</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user