till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 21:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
managarten/docs/optimizable/frontend-consistency-improvements.md
Till JS ef76815eb2 docs(optimizable): add README index + refresh frontend-consistency tracker 
The frontend-consistency-improvements.md was stale — it still listed
the 13 Tailwind-based ListViews as "to migrate" even though all 21
flagged modules shipped today (a2a43b1d5, 86c205ffc, 7d6a340b1, 52af8c0ce,
3e09ff66d). Rewrite to reflect the SHIPPED state and list the next
layer of open consistency work (i18n, Phosphor icons, cross-surface
theme parity).

New docs/optimizable/README.md is the master index. Consolidates:
  - 🔴 Release blocker: tier-patch revert (links memory entry)
  - 🟠 Tracked trackers: per-topic links with status
  - 🟡 Small open items without a dedicated file: module-structure
    audit, plan-inventory hygiene, memory-hygiene post-release,
    cross-surface theme parity
  - How-to: list of `pnpm run audit:*` commands for live metrics

Doesn't introduce new work items beyond what's already been discussed
this session — just gives them a home so future sessions can pick up
any one without re-discovery.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 18:07:44 +02:00

3.3 KiB
Raw Blame History

Frontend Consistency Improvements

Tracked improvements for UI / styling consistency across the Mana unified app.

1. ListView theme-token migration — ✅ SHIPPED 2026-04-22

All 76 module ListViews and the broader lib/modules/** + routes/(app)/** surface now use theme tokens (text-foreground, bg-muted, border-border, --color-* scoped CSS) instead of raw Tailwind white/N or neutral-palette classes.

Enforced by three validators wired into validate:all + lint-staged:

  • validate:theme-variables — CSS variable naming (--muted forbidden, --color-muted required)
  • validate:theme-utilities — Tailwind class rules: no (bg|text|border)-white/N, no (bg|text|border)-(gray|slate|zinc|neutral|stone)-N
  • validate:theme-parity — 25 tokens × 9 theme variants parity check

See packages/shared-tailwind/brand-literals.md for the register of intentional hex literals (period pink, calc retro skins, skilltree branch accents, who deck colours, etc.).

2. transition-all sweep — ✅ SHIPPED 2026-04-22

All 98 transition-all occurrences replaced with specific transitions (transition-colors, transition-opacity, transition-[width], transition-[border-color,box-shadow], transition-[transform,colors,box-shadow]). Prevents the P5 CSS-custom-property rendering bug where colours don't resolve on first paint.

Codemod: scripts/migrate-transition-all.mjs.

3. a11y warnings — ✅ SHIPPED 2026-04-22

30 svelte-check warnings resolved; pnpm check now runs with --fail-on-warnings so any regression blocks pre-push. Covers a11y (missing keyboard handlers, missing labels), dead CSS selectors, and Svelte 5 $state local-reference bugs.

4. i18n coverage — OPEN

65 / 78 modules still hardcode German in .svelte templates. The translation infrastructure (@mana/shared-i18n, per-module locale files for de / en / it / fr / es with ~3500 German strings) is fully wired; what's missing is usage. See i18n-migration-inventory.md for the priority list and per-module workflow. Run pnpm run audit:i18n-coverage for live numbers.

Top offenders today: broadcast (26 hits), articles (24), events (23), invoices (22), quiz + stretch (20 each), library (19), profile (17), skilltree PARTIAL (15), calendar PARTIAL (14).

5. Phosphor icon bloat — OPEN

@mana/shared-icons contributes 466 KB of icon paths to the shared bundle. See bundle-analysis.md §2. Biggest offender: app-registry/apps.ts imports 69 icons statically for the module-name → icon-component map — ~290 KB alone. Recommended fix: lazy getIconComponent(name) helper backed by per-icon dynamic imports.

Run pnpm run audit:icon-usage for the current inventory.

6. Cross-surface theme parity — OPEN

Not yet audited:

  • apps/mana/apps/landing/ (Astro) — does the landing page use the same theme tokens as the SvelteKit app, or a parallel system? Theme drift would mean Lume / Nature / Stone variants don't match between marketing and app.
  • apps/memoro/apps/mobile/ (Expo, RN) — the only remaining mobile surface. @mana/shared-theme targets React Native; is the token set aligned with the web --color-* palette?
  • games/ (arcade, voxelava, whopixels, worldream) — separate Vite/Svelte apps; unlikely to be aligned with the main theme but worth confirming.