feat(ui): settings-form UX — single-select, token form, checkbox & date-field consistency#638
Conversation
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the API token creation interface, introducing a segmented access mode control ("By resource" vs "Full access"), a redesigned scope grid with column-wise "select all" checkboxes, and improved accessibility for checkbox controls across several components. Additionally, the SearchableSelect component was updated to distinguish single-select and multi-select behaviors, displaying single-select values directly within the input. The review feedback suggests utilizing SolidJS's native prop:indeterminate binding in ApiTokenControls.tsx to simplify the checkbox state management, which would eliminate the need for manual refs and the createEffect hook.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
The generic .field input rule out-specifies .date-field-wrap > input.date-field
{border:0}, so the date input drew its own border inside the pill wrap's — a
double border. Exclude .date-field from the generic input border/focus rules so
the wrap carries the only border. And bump the settings checkboxes from 20px to
24px (WCAG 2.2 AA target size 2.5.8) with the accent color.
Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
Single-select SearchableSelect read like a multi-select — the chosen value sat as a chip beside an empty search box. Rewrite single to a value-in-input (React- Select single) control: the input DISPLAYS the selected label; opening lists all options with the current one highlighted (no pre-filter); typing filters; picking replaces the value; closing without a pick reverts to the selected label. A `searching` flag (set on the native onInput, real typing only) gates filtering so the resting label never pre-filters. Multi keeps its removable chips + inline search unchanged. Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
c1787be to
fe59260
Compare
Token form: create form first (clear heading), token list below. "Full access"
is now a mode toggle ("By resource" vs "Full access") that hides the scope grid
and shows a warning stating the wildcard grants all current AND future rights (not
a snapshot — verified against ApiScope::grants). The scope table is replaced by a
narrow content-sized grid with the read/write checkboxes right after each resource
and a three-state select-all checkbox per column header.
Checkbox consistency: help-icon checkbox rows (.field-check-row, in
WorklogSyncPreferences and AdminCrudShell) join the same two-column grid as the
plain checkboxes — label right-aligned in column 1, [checkbox + help] in column 2
— instead of a left-aligned flex row. The label is a col1 <label for>; the help
trigger stays outside it so clicking it never toggles the box.
Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
fe59260 to
db9860a
Compare
Summary
The settings-form UX review, implemented. Consolidates several reported issues into one coherent change.
Changes
SearchableSelectsingle now shows the chosen value IN the input (React-Select single style) instead of as a chip beside an empty search box. Opening lists all options (current highlighted, no pre-filter); typing filters; picking replaces; closing without a pick reverts. Multi keeps its removable chips + inline search unchanged.ApiScope::grants). The far-right scope table becomes a narrow, content-sized grid with read/write checkboxes right after each resource and a three-state select-all checkbox per column header..field-check-row(Worklog-Sync prefs, admin dialogs) joins the same two-column grid as the plain checkboxes (label right-aligned col1, [checkbox + ⓘ] col2) instead of a left-aligned flex row..field inputrule no longer out-specifies the borderless.date-fieldinside its pill wrap, so date fields show one border, not two.Verification
bun run typecheck/lintclean; full suite 579 pass (incl. new tests for the value-in-input single revert, the token column select-all + indeterminate, and full-access hides-grid)..field-check-rowsync checkboxes are data-gated (need a connected ticket system) so verified structurally via the WorklogSyncPreferences a11y test + the shared grid CSS.Built largely via a sequential dynamic workflow; each piece was reviewed on its merits (one agent's scope-grid width was corrected —
1frstretched it, leaving the far-right gap it was meant to fix).