-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Description
Context
public/index.html renders all content at full detail unconditionally. The governance UI has a lot of context (lock instructions, chart legends, FAQs, about tab) that can overwhelm new users.
Proposed approach
A 3-level density system (already implemented in ASDF-Web tool pages):
| Level | Behavior |
|---|---|
minimal |
Stats + core actions only (dashboard view) |
detailed |
+ guides, descriptions, lock instructions |
full |
+ visual effects, expanded hero, animations |
Implementation:
<!-- In HTML: tag context sections -->
<div class=density-detailed>
<!-- Lock Instructions panel (currently always visible) -->
<!-- Token breakdown chart legend -->
</div>
<div class=density-full>
<!-- Animated gradient background orbs -->
<!-- Extended About tab content -->
</div>/* Default: minimal (show nothing tagged as detailed/full) */
.density-detailed, .density-full { display: none; }
/* When detailed mode active */
[data-density='detailed'] .density-detailed { display: block; }
[data-density='detailed'] .density-full { display: none; }
/* When full mode active */
[data-density='full'] .density-detailed { display: block; }
[data-density='full'] .density-full { display: block; }// Toggle — stored in localStorage
function setDensity(level) {
document.documentElement.dataset.density = level;
localStorage.setItem('tvutil-density', level);
}Why
- Better onboarding: new users see the clean dashboard, not the full complexity
- Power users get full detail with one click
- Reduces cognitive load on first visit (the lock instructions are helpful but not always needed)
- Aligns with ASDF-Web design system for future integration
Options
A — Full implementation (CSS + JS + HTML tagging, as described above)
B — Simplified: just collapse the Lock Instructions panel (collapsible already exists, extend it)
C — Defer — leave for v2, prioritize other fixes
Which path aligns with your roadmap?
From ASDF-Web × TokenVotingUtil design system audit — 2026-02-25
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels