Stu Mason
Stu Mason

Activity

Pull Request Opened

PR #115 opened: feat(ux): phase 4 — visual language unification

Scope

Phase 4 of the UX overhaul (plan / audit / tokens / brief).

One link style, one type hierarchy, one numeric format system across the site. Rebased on top of Phase 3 (#114).

What's in

  • <SmartLink> (new, 3 variants):
    • bodytext-link, hover text-link-hover, animated underline thickness
    • navtext-overline text-muted, hover text-accent-brand (preserves current top-nav look)
    • subtletext-default, hover text-accent-brand, no underline (used for DataTable linked titles)
    • Auto-detects internal vs external (/ or current origin → Inertia <Link>, otherwise <a target="_blank" rel="noopener noreferrer">)
  • <MetricValue> (new) — single source of truth for numeric rendering. Formats: number, percent, delta, velocity, predicted. Em-dash for null/zero. <DataTable> now delegates all numeric cells through this.
  • <Narrative> — mini-parser extended to render `code`, [text](url), and **bold** inline (priority order: code → link → bold so backticked text isn't linked). Title moved to text-h2.
  • reports/show.tsx + reports/index.tsx — nav links → <SmartLink variant="nav">, h1/h2/body all wired through tokens (text-h1, text-h2, text-body, text-body-sm, text-muted, text-strong). Index card hover swung to border-accent-brand-muted + bg-hover.
  • app/Reports/Predictions.php — narrative cross-links to [the live predictor](/reports/predicting-hn) to exercise the new link parser.

Pragmatic notes

  • Brief named resources/js/layouts/app-layout.tsx but the top nav lives inline in the report pages; swap landed there.
  • Motion utilities inlined as duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] since --dur-* / --ease-* tokens aren't exposed as Tailwind utilities yet (matches the Phase 2 pattern).
  • Conductor resolved 4 rebase conflicts on top of Phase 3: merged TimestampLine + token-based text-h1/text-body in show.tsx; combined Phase 3's "Refreshed Xm ago" freshness with Phase 4's token-based card styling on index.tsx.

Test plan

  • npm run build clean (post-rebase)
  • vendor/bin/pint --dirty --format agent clean
  • php artisan test --compact — 182 pass, 26 skipped, 2 pre-existing LinkedIn failures (unrelated)
  • Post-deploy Playwright on /, /reports, /reports/predictions
+324
additions
-78
deletions
8
files changed