Skip to content

feat: add content density levels (minimal / detailed / full) #5

@Ragnar-no-sleep

Description

@Ragnar-no-sleep

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions