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:
@@ -199,6 +199,21 @@ body.maze-fullscreen .maze-shell {
|
|||||||
opacity: 0.42; filter: grayscale(0.7); border-style: dotted;
|
opacity: 0.42; filter: grayscale(0.7); border-style: dotted;
|
||||||
}
|
}
|
||||||
.maze-net-box.inactive .maze-net-box-head { color: rgba(255, 255, 255, 0.5); }
|
.maze-net-box.inactive .maze-net-box-head { color: rgba(255, 255, 255, 0.5); }
|
||||||
|
/* Optimistic placeholder for an enqueued LAN-add. Amber tint matches
|
||||||
|
* the REAP button voice — clearly "in-flight, not committed" without
|
||||||
|
* collapsing into the dimmed-out 'inactive' style which means the
|
||||||
|
* opposite (no traffic on a deployed LAN). */
|
||||||
|
.maze-net-box.pending {
|
||||||
|
border-color: var(--warn, #e0a040);
|
||||||
|
background: rgba(224, 160, 64, 0.04);
|
||||||
|
border-style: dashed;
|
||||||
|
filter: none; opacity: 1;
|
||||||
|
}
|
||||||
|
.maze-net-box.pending .maze-net-box-head {
|
||||||
|
color: var(--warn, #e0a040);
|
||||||
|
border-bottom-color: rgba(224, 160, 64, 0.45);
|
||||||
|
}
|
||||||
|
.maze-net-box.pending .cidr { color: rgba(224, 160, 64, 0.7); }
|
||||||
.maze-net-box-head {
|
.maze-net-box-head {
|
||||||
position: absolute; top: 0; left: 0; right: 0;
|
position: absolute; top: 0; left: 0; right: 0;
|
||||||
padding: 6px 12px; border-bottom: 1px dashed var(--border);
|
padding: 6px 12px; border-bottom: 1px dashed var(--border);
|
||||||
|
|||||||
@@ -138,7 +138,7 @@ const MazeNET: React.FC = () => {
|
|||||||
setNets((p) => [...p, {
|
setNets((p) => [...p, {
|
||||||
id: tempId, name, label: name.toUpperCase(),
|
id: tempId, name, label: name.toUpperCase(),
|
||||||
cidr: subnet ?? '', kind: isDmz ? 'dmz' : 'subnet',
|
cidr: subnet ?? '', kind: isDmz ? 'dmz' : 'subnet',
|
||||||
x, y, w, h,
|
x, y, w, h, pending: true,
|
||||||
}]);
|
}]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,6 +27,7 @@ const NetBox: React.FC<Props> = ({
|
|||||||
dropTarget ? 'drop-target' : '',
|
dropTarget ? 'drop-target' : '',
|
||||||
inactive ? 'inactive' : '',
|
inactive ? 'inactive' : '',
|
||||||
deployed ? 'deployed' : '',
|
deployed ? 'deployed' : '',
|
||||||
|
net.pending ? 'pending' : '',
|
||||||
].filter(Boolean).join(' ');
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
const Icon = net.kind === 'internet' ? Globe : net.kind === 'dmz' ? ShieldAlert : GitMerge;
|
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' }}>
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||||
<Icon size={10} />
|
<Icon size={10} />
|
||||||
<span>{net.label}</span>
|
<span>{net.label}</span>
|
||||||
{inactive && (
|
{inactive && !net.pending && (
|
||||||
<span className="chip-mini"
|
<span className="chip-mini"
|
||||||
style={{ marginLeft: 4, borderColor: 'var(--border)', color: 'rgba(255,255,255,0.45)' }}>
|
style={{ marginLeft: 4, borderColor: 'var(--border)', color: 'rgba(255,255,255,0.45)' }}>
|
||||||
INACTIVE
|
INACTIVE
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
{net.pending && (
|
||||||
|
<span className="chip-mini"
|
||||||
|
style={{ marginLeft: 4,
|
||||||
|
borderColor: 'var(--warn, #e0a040)',
|
||||||
|
color: 'var(--warn, #e0a040)' }}>
|
||||||
|
PENDING
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<span className="cidr">{net.cidr}</span>
|
<span className="cidr">{net.cidr}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,6 +15,11 @@ export interface Net {
|
|||||||
y: number;
|
y: number;
|
||||||
w: number;
|
w: number;
|
||||||
h: number;
|
h: number;
|
||||||
|
/** Optimistic placeholder for an enqueued mutation on a live
|
||||||
|
* topology. Replaced on next refetch when the mutator emits the
|
||||||
|
* applied event. Rendered with an amber tint so the user can tell
|
||||||
|
* it's a queued add, not a regular non-deployed LAN. */
|
||||||
|
pending?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type NodeKind = 'decky' | 'observed';
|
export type NodeKind = 'decky' | 'observed';
|
||||||
|
|||||||
Reference in New Issue
Block a user