forked from
l4.pm/atvouch
dev vouch dev on at. thats about it
add design decisions section
+115
+46
frontend/src/App.css
+46
frontend/src/App.css
···
497
497
text-align: center;
498
498
}
499
499
500
+
.design-link {
501
+
text-align: center;
502
+
margin-top: 3rem;
503
+
font-size: 12px;
504
+
letter-spacing: 0.03em;
505
+
}
506
+
507
+
/* ── design decisions ── */
508
+
509
+
.design-decisions {
510
+
margin-top: 1rem;
511
+
}
512
+
513
+
.design-decisions-list {
514
+
border: 1px solid var(--border);
515
+
border-top: 3px solid var(--accent);
516
+
background: var(--bg-raised);
517
+
}
518
+
519
+
.design-decision-item {
520
+
padding: 1rem 1.25rem;
521
+
border-bottom: 1px solid var(--border);
522
+
}
523
+
524
+
.design-decision-item:last-child {
525
+
border-bottom: none;
526
+
}
527
+
528
+
.design-decision-item h3 {
529
+
font-family: var(--sans);
530
+
font-size: 14px;
531
+
font-weight: 700;
532
+
color: var(--text);
533
+
margin-bottom: 0.35rem;
534
+
}
535
+
536
+
.design-decision-item p {
537
+
font-size: 13px;
538
+
line-height: 1.7;
539
+
color: var(--text-dim);
540
+
}
541
+
500
542
/* ── responsive ── */
501
543
502
544
@media (max-width: 980px) {
···
541
583
542
584
.instructions {
543
585
text-align: left;
586
+
}
587
+
588
+
.design-decisions-list {
589
+
width: 100%;
544
590
}
545
591
}
546
592
+69
frontend/src/App.tsx
+69
frontend/src/App.tsx
···
26
26
const [agent, setAgent] = useState<OAuthUserAgent | null>(null);
27
27
const [loading, setLoading] = useState(true);
28
28
const [error, setError] = useState<string | null>(null);
29
+
const [designOpen, setDesignOpen] = useState(false);
29
30
30
31
useEffect(() => {
31
32
(async () => {
···
103
104
) : (
104
105
<Dashboard agent={agent} onLogout={handleLogout} />
105
106
)}
107
+
<div className="design-link">
108
+
<a
109
+
href="#"
110
+
onClick={(e) => {
111
+
e.preventDefault();
112
+
setDesignOpen(!designOpen);
113
+
}}
114
+
>
115
+
design decisions [{designOpen ? "hide" : "show"}]
116
+
</a>
117
+
</div>
118
+
{designOpen && <DesignDecisions />}
106
119
<footer className="footer">
107
120
<a href="https://tangled.org/l4.pm/atvouch" target="_blank" rel="noopener noreferrer">
108
121
source
···
543
556
</>
544
557
)}
545
558
</aside>
559
+
);
560
+
}
561
+
562
+
interface DesignDecision {
563
+
id: string;
564
+
title: string;
565
+
explanation: string;
566
+
}
567
+
568
+
const DESIGN_DECISIONS: DesignDecision[] = [
569
+
{
570
+
id: "no-counters",
571
+
title: "(1) no counters on people",
572
+
explanation:
573
+
"because remote vouches can be created by anyone for any reason, you can't trust them at all. " +
574
+
"this is also why trust decisions must always be made in the context of the current logged in user (you) " +
575
+
"so that vouch chains can be located and shown to you specifically.",
576
+
},
577
+
{
578
+
id: "no-text",
579
+
title: "(2) no text on vouches",
580
+
explanation:
581
+
"generally moderation reasons, plus i wouldn't want to implement some kind of block just for this " +
582
+
"proof of concept. having singular vouch units pointing to people is enough from an actual usability " +
583
+
"standpoint of the project.",
584
+
},
585
+
{
586
+
id: "max-3-levels",
587
+
title: "(3) routing from a max of 3 levels",
588
+
explanation:
589
+
"this was made back when the demo was microcosm based, but now i could increase that to 4 or 5. " +
590
+
"past 5 though i think the graphs would become very meaningless if more people actually used this, " +
591
+
"so i'll leave at 3 and reconsider if anyone wants to bump that up.",
592
+
},
593
+
{
594
+
id: "explicit-type",
595
+
title: "(4) you must explicitly type to vouch",
596
+
explanation:
597
+
"there were buttons to let you vouch anyone to create mutual vouches, removed it though because " +
598
+
"adding the friction to vouch is very intentional from a design perspective. at least to make you " +
599
+
"think more carefully of who you vouch, at least that's the intent.",
600
+
},
601
+
];
602
+
603
+
function DesignDecisions() {
604
+
return (
605
+
<div className="design-decisions">
606
+
<div className="design-decisions-list">
607
+
{DESIGN_DECISIONS.map((d) => (
608
+
<div key={d.id} className="design-decision-item">
609
+
<h3>{d.title}</h3>
610
+
<p>{d.explanation}</p>
611
+
</div>
612
+
))}
613
+
</div>
614
+
</div>
546
615
);
547
616
}
548
617