mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-07-09 17:19:02 +00:00
5c9e73f371
* feat(web-shell): add keyboard-nav and IME-safe filter hooks Two reusable hooks for list-style dialogs: - useListboxKeyboard: Arrow/Home/End/Enter navigation driven by an active index, with a "keyboard mode" flag to suppress hover. Yields modified-key combos (Cmd/Ctrl/Alt/Shift), Home/End in text inputs, and Enter on focused buttons/links to native handling. - useFilterInput: IME-composition-safe search state so a filtered list does not refire on every intermediate pinyin character (commits on compositionend). * feat(web-shell): DialogShell Escape/backdrop close and focus management Give every dialog shared, accessible dismissal and focus behaviour: - Escape closes (guarded during IME composition so it cancels the composition, not the dialog) - click on the backdrop closes - Tab is trapped within the panel, wrapping at both ends - focus moves into the dialog on open and is restored to the opener on close * feat(web-shell): overhaul list-dialog interaction and accessibility Unify interaction across the model, theme, approval, resume, tools, delete, release and rewind dialogs: - keyboard navigation via useListboxKeyboard, with a roving highlight that opens on the current value and does not fight the mouse - consistent selection visuals: a single roving highlight plus a persistent "current" accent bar + checkmark; options are role=option divs (no stray focus ring) - IME-safe search via useFilterInput; fix Chinese-input jitter in the resume/delete/release search boxes - accessibility: role=listbox/option, aria-activedescendant, and aria-selected bound to the current value rather than the roving highlight - destructive dialogs keep Enter non-destructive where a confirm button is the commit (delete/release); rewind confirms on Enter like a single-select picker Refactors: - extract shared SessionRow used by resume/delete/release - rename resume-picker-* CSS primitives to picker-* (they are shared by all list dialogs, not resume-specific) Adds regression tests for the model duplicate-current fix, release hover selection, rewind Enter, the listbox/aria wiring, and the shared hooks. * fix(web-shell): address dialog interaction review feedback Follow-up fixes from upstream review: - DialogShell closes on completed backdrop clicks instead of mousedown, and its Tab trap now also catches the panel-focused fallback case - ToolsDialog now has full listbox semantics (ids, aria-activedescendant, aria-expanded) - Rewind keeps the roving cursor separate from the confirmed target; Enter only confirms, and the danger button executes the rewind - Model/Approval aria-selected now reflects the actual current value; model highlights stay in bounds when the model list shrinks - Home/End and modified arrow-key combos yield to native text navigation in search inputs; Escape yields to IME composition in DialogShell - Dead picker CSS and duplicate declarations removed; extra regression tests added for reviewer-raised edge cases * fix(web-shell): harden shared dialog keyboard and IME handling * fix(web-shell): tighten dialog shell focus, stacking, and backdrop behavior * fix(web-shell): align list dialog selection semantics and add coverage
125 lines
2 KiB
CSS
125 lines
2 KiB
CSS
.layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 6px 8px 0;
|
|
}
|
|
|
|
/* Focused programmatically for keyboard nav / aria-activedescendant; selection
|
|
is shown by the roving row highlight, so suppress the container outline. */
|
|
.list:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-height: 32px;
|
|
padding: 5px 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--foreground);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
text-align: left;
|
|
}
|
|
|
|
.row:hover,
|
|
.selected {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
/* Keyboard mode: the pointer yields to the keyboard, so a cursor resting on a
|
|
row must not paint a second highlight. Only the keyboard-selected row keeps
|
|
its background. */
|
|
.keyboardOnly .row:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.keyboardOnly .row.selected:hover {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.selected .label {
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.divider {
|
|
flex: 0 0 auto;
|
|
height: 1px;
|
|
margin: 6px 8px 0;
|
|
background: var(--border);
|
|
}
|
|
|
|
.number {
|
|
min-width: 28px;
|
|
color: var(--muted-foreground);
|
|
text-align: right;
|
|
}
|
|
|
|
.provider {
|
|
flex: 0 0 auto;
|
|
color: var(--agent-blue-500);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--foreground);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
margin: 8px;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.detailRow {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.detailLabel {
|
|
min-width: 12ch;
|
|
flex-shrink: 0;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.detailValue {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.empty {
|
|
padding: 14px 0;
|
|
color: var(--muted-foreground);
|
|
}
|