forked from
l4.pm/atvouch
dev vouch dev on at. thats about it
remove vouch button from Remote Vouch panel
the friction is intentional
+2
-39
-10
frontend/src/App.css
-10
frontend/src/App.css
···
436
436
flex-shrink: 0;
437
437
}
438
438
439
-
.vouch-back-btn {
440
-
font-size: 10px;
441
-
padding: 0.2rem 0.5rem;
442
-
border: 1px solid var(--accent-dim);
443
-
background: none;
444
-
color: var(--accent);
445
-
text-transform: uppercase;
446
-
letter-spacing: 0.06em;
447
-
flex-shrink: 0;
448
-
}
449
439
450
440
/* ── footer ── */
451
441
+2
-29
frontend/src/App.tsx
+2
-29
frontend/src/App.tsx
···
249
249
<CreateVouchSection agent={agent} onVouchCreated={refreshVouches} />
250
250
<CheckVouchSection agent={agent} />
251
251
</main>
252
-
<RemoteVouchesSection agent={agent} myVouches={vouches} onVouchCreated={refreshVouches} />
252
+
<RemoteVouchesSection agent={agent} myVouches={vouches} />
253
253
</div>
254
254
</div>
255
255
);
···
367
367
function RemoteVouchesSection({
368
368
agent,
369
369
myVouches,
370
-
onVouchCreated,
371
370
}: {
372
371
agent: OAuthUserAgent;
373
372
myVouches: VouchEntry[] | null;
374
-
onVouchCreated: () => void;
375
373
}) {
376
374
const [vouchers, setVouchers] = useState<RemoteVoucher[] | null>(null);
377
375
const [loading, setLoading] = useState(true);
378
376
const [error, setError] = useState<string | null>(null);
379
-
const [vouchingFor, setVouchingFor] = useState<Set<string>>(new Set());
380
377
381
378
useEffect(() => {
382
379
(async () => {
···
405
402
406
403
const alreadyVouched = new Set(myVouches?.filter((v) => v.valid).map((v) => v.did) ?? []);
407
404
408
-
const handleVouch = async (voucher: RemoteVoucher) => {
409
-
const label = voucher.handle ?? voucher.did;
410
-
setVouchingFor((prev) => new Set(prev).add(voucher.did));
411
-
try {
412
-
await createVouch(agent, voucher.handle ?? voucher.did);
413
-
onVouchCreated();
414
-
} catch (err) {
415
-
alert(`Failed to vouch for ${label}: ${err}`);
416
-
}
417
-
setVouchingFor((prev) => {
418
-
const next = new Set(prev);
419
-
next.delete(voucher.did);
420
-
return next;
421
-
});
422
-
};
423
-
424
405
return (
425
406
<aside className="sidebar sidebar-right">
426
407
<h2>Remote vouches</h2>
···
441
422
>
442
423
{v.handle ?? v.did}
443
424
</a>
444
-
{alreadyVouched.has(v.did) ? (
425
+
{alreadyVouched.has(v.did) && (
445
426
<span className="vouch-mutual">mutual</span>
446
-
) : (
447
-
<button
448
-
className="vouch-back-btn"
449
-
disabled={vouchingFor.has(v.did)}
450
-
onClick={() => handleVouch(v)}
451
-
>
452
-
{vouchingFor.has(v.did) ? "..." : "vouch"}
453
-
</button>
454
427
)}
455
428
</li>
456
429
))}