bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(ui): mark all UI audit §5 items as done with commit references

Browse Source 
Updates docs/ui/UI_AUDIT.md §5 to reflect that all 10 recommendations
shipped (#1-#7 + #9-#10) or are partially complete with explicit rationale
for what was deferred (#8). Each item now references the commit hash that
addressed it so readers can trace the implementation.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Devin 2026-05-10 09:40:11 +00:00
parent a48187da83
commit eab2721e95
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/ui/UI_AUDIT.md
View File

@ -240,25 +240,25 @@ Quick Actions block fixed in commit `343ffb4`. 28 inline-style blocks remain —
### Immediate (1 commit, ~1 hour)
1. **Add `title=` to the 11 untitled truncate sites.** Files: PositionsTab, HistoryTab, AdminTab, OverviewTab, EntriesTab, TradeProfileManager, MarketOpportunities. Quick UX win.
2. **Fix the 5 inline `gridTemplateColumns: '1fr 1fr'`** instances by adding `minmax(0, 1fr) minmax(0, 1fr)` (MarketplaceTab × 2, MembershipTab × 1, MyStrategiesTab × 2).
3. **Fix `index.css:1230` and `:1895`** — add `minmax(0, ...)` to bare `1fr` columns.
4. **Fix `index.css:1620`** — replace `42vw` with `min(42%, 460px)` or relative-to-container sizing.
5. **Audit the 31 `<Button>` files** — for any with multi-line/stacked children, replace with native `<button>` (see Pattern A fix).
1. ✅ **Add `title=` to the 11 untitled truncate sites.** Done in commit `1a5172c` — covers PositionsTab, HistoryTab, AdminTab, OverviewTab, EntriesTab, TradeProfileManager, MarketOpportunities.
2. ✅ **Fix the 5 inline `gridTemplateColumns: '1fr 1fr'`.** Done in `1807dc0` — MarketplaceTab × 2, MembershipTab × 1, MyStrategiesTab × 2.
3. ✅ **Fix `index.css:1230` and `:1895`** — bare `1fr` wrapped in `minmax(0, ...)`. Same commit.
4. ✅ **Fix `index.css:1620`** — replaced `width: min(42vw, 460px) !important` with `flex: 1 1 240px; min-width: 0; max-width: 460px`. Same commit.
5. ✅ **`<Button>` audit.** Done in `67c9ecb`+ `63f17bf`. 5 of 31 Button-using files had stacked block children (StrategyWizard ×2, SimpleView ×2, MyStrategiesTab ×1) — converted to `<CardButton>` (see #9 below).
### Short-term (1 week)
6. **ESLint rules** (preventive):
- Custom rule: warn when `truncate` class is used without `title=` or `aria-label=` on the same element.
- Custom rule: warn on `gridTemplateColumns` containing bare `1fr` (suggest `minmax(0, 1fr)`).
- Custom rule: warn on `<Button>` with non-string children that span multiple lines.
- Limit inline `style` props with > 5 properties (encourage class extraction).
7. **CSS audit script:** scan `index.css` for class selectors with multiple definitions (Pattern G). Aim to reduce `!important` count from 122 → < 60.
6. ✅ **ESLint rules.** Local plugin shipped in `a0fcb65` at `web/eslint-local/`:
- `bytelyst-trading/truncate-needs-title` — fires on `truncate`/`line-clamp-*` without `title=`/`aria-label=`.
- `bytelyst-trading/grid-needs-minmax` — fires on bare `Nfr` in gridTemplateColumns. Caught + fixed 2 additional violations on first run.
- `bytelyst-trading/no-button-with-stacked-children` — fires on `<Button>` with 2+ block children.
- All wired as `'warn'`. `npm run lint` reports zero `bytelyst-trading/*` warnings.
7. ✅ **CSS audit script.** `web/scripts/audit-css.mjs` shipped in `c10de34` (extended for hex audit in `063afdb`). Surfaces duplicate selectors + per-class !important counts + hardcoded hex outside token defs. Run via `npm run audit:css`. Top hotspots: `.positions-tab` (22 rules / 26 !imp), `.trade-plans-page` (20 / 25), `.history-tab` (17 / 22), `.trading-sidebar-logo` (9 / 20) — these are the Pattern G consolidation targets for a future pass.
### Medium-term (2–3 weeks)
8. **Refactor OverviewTab + HomeView + MyStrategiesTab** to extract inline styles into `home.css` / `overview.css` / `strategies.css` partials. Highest user impact (these are landing pages).
9. **Component primitives audit:** add a `<CardButton>` primitive in `@bytelyst/ui` (or an `as="card"` variant on `<Button>`) that drops `whitespace-nowrap` and `h-{size}` constraints. Document the difference. Pushes the Pattern A fix to the design system rather than the consumers.
8. **Refactor OverviewTab + HomeView + MyStrategiesTab** ✅ partial done. Per-pattern analysis found 191 inline-style blocks across the 3 files; 155 are unique one-offs already using `var(--bl-*)` tokens. The 39 repeated-pattern occurrences (the meaningful drift signal) were extracted to Tailwind utilities + `web/src/styles/landing-views.css` (`.lv-card`, `.lv-eyebrow`, `.lv-icon-tag`, etc.) in commit `a48187d`. The remaining one-offs are intentionally left inline — they're locally readable and converting them to single-use classes wouldn't reduce drift.
9. **Component primitives audit:** ✅ done. `<CardButton>` shipped in `@bytelyst/ui@0.1.6` (common-plat commit `953730ff`). Drops `whitespace-nowrap` and `h-{size}`, preserves the focus-visible ring. All 5 Pattern A sites in this repo were converted to use it (commit `63f17bf`). The fix is upstream in the design system, not in consumer-side className shims.
10. **Theme token sweep:** ✅ done. `node scripts/audit-css.mjs` (or `npm run audit:css`) now also reports hardcoded hex outside `--name: #xxx;` token defs and `var(--x, #xxx)` fallbacks. Initial run on `index.css + App.css + layout-fixes.css` reports **4 known intentional violations** (pre-cascade body color/background-color in `:root` and `html.dark`, mirroring `--foreground`/`--background`). These are annotated with explanatory comments in `index.css:12-14` and `:88`. New violations will surface immediately. Re-run after refactoring to confirm zero new hex.
---