Repository navigation
feat(dashboard): compact grid layout for no-auth provider accounts - #4137
diegosouzapw merged 3 commits into
Conversation
The no-auth account list (e.g. MiMoCode Free) rendered every account as a full-width row, so a provider with 15+ accounts became a tall, cluttered single column that was hard to scan. Rework NoAuthAccountCard's account list into a responsive 1/2/3-column grid of compact chips with a capped, scrollable height (max-h-72 overflow-y-auto) so the card never grows unbounded. Each chip keeps the per-account proxy control as a shield icon (muted = no proxy, filled blue = configured, host shown in the tooltip) plus the hover remove button. Because an anchored popover would be clipped by the scroll container, the proxy editor is lifted out of the per-row map into a single centered modal, preserving the existing configure/save/cancel behavior. Adds tests/unit/noauth-account-card.test.tsx covering the grid layout, one-chip-per-account, capped-scroll height, the proxy shield on every chip, and opening the proxy editor.
|
Warning You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again! |
…sts/unit/ui/ The new component test was placed at tests/unit/noauth-account-card.test.tsx, which the check:test-discovery gate flags as an orphan: the node native runner only collects tests/unit/*.test.ts, and the vitest UI run (test:vitest:ui) is path-filtered to tests/unit/ui, so a top-level .test.tsx never runs. Move it to tests/unit/ui/ (alongside the other component tests) and fix the relative import depth so it is actually collected and executed. Co-authored-by: diegosouzapw <diegosouza.pw@gmail.com>
91183dc
into
cheaper-inference:release/v3.8.29
|
Thanks, @felipesartori! 🙏 Nice UX upgrade — the no-auth account list was genuinely unwieldy at 15+ accounts, and the compact chip grid + capped scroll + lifted proxy modal is a clean solution. The component-test coverage is appreciated too. One tiny adjustment before merge (co-authored): the new test landed at |
…heaper-inference#4137) Integrated into release/v3.8.29 (moved component test into tests/unit/ui/; check:test-discovery green). Co-authored-by: diegosouzapw
Problem
The no-auth account list (e.g. MiMoCode (Free)) rendered every account as a full-width row. A provider with 15+ accounts became a tall, repetitive single column — cluttered and hard to scan.
Change
Reworked
NoAuthAccountCard's account list into a responsive 1 / 2 / 3-column grid of compact chips with a capped, scrollable height (max-h-72 overflow-y-auto), so the card never grows unbounded.Each chip keeps the per-account proxy control as a shield icon:
type://host:portshown in the tooltip)Because an anchored popover would be clipped by the scroll container, the proxy editor was lifted out of the per-row map into a single centered modal, preserving the existing configure / save / cancel behavior (click-outside still closes).
Tests
Added
tests/unit/noauth-account-card.test.tsx(vitest + jsdom), covering:All 5 pass; ESLint and typecheck clean on the changed files.
Validation (Hard Rule #18)
UI-only change validated by the new automated component tests (TDD path), and manually verified locally on the live dashboard (
/dashboard/providers/mimocode) against the real 15-account MiMoCode connection.Notes
src/shared/components/NoAuthAccountCard.tsx), used by all no-auth providers.🤖 Generated with Claude Code