mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 05:41:09 +02:00
ef76815eb2
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>
80 lines
3.3 KiB
Markdown
80 lines
3.3 KiB
Markdown
# 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`](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`](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.
|