mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-07-23 16:04:19 +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
121 lines
2.5 KiB
CSS
121 lines
2.5 KiB
CSS
.root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 4px 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;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: calc(100% - 16px);
|
|
margin: 1px 8px;
|
|
padding: 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Roving cursor (keyboard/hover position) — a plain gray highlight, matching
|
|
the other list dialogs. */
|
|
.item:hover,
|
|
.itemCursor {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
/* Confirmed selection: stronger than the cursor — a left accent bar plus a blue
|
|
title, so the chosen row stays distinguishable from the row merely under the
|
|
cursor (which only gets the gray background). */
|
|
.itemSelected::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 60%;
|
|
width: 3px;
|
|
border-radius: 0 3px 3px 0;
|
|
background: var(--agent-blue-500, #4a9eff);
|
|
}
|
|
|
|
.itemSelected .prompt {
|
|
color: var(--agent-blue-500, #4a9eff);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Keyboard mode: the pointer yields to the keyboard, so a cursor resting on a
|
|
row must not paint the hover highlight — only the keyboard cursor row does. */
|
|
.keyboardOnly .item:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.keyboardOnly .itemCursor:hover,
|
|
.keyboardOnly .itemCursor {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.itemDisabled {
|
|
cursor: default;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.prompt {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.turn {
|
|
color: var(--agent-blue-500);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.time {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 8px 0;
|
|
}
|
|
|
|
/* Inline failure text: toasts can be deduplicated by the app shell, so the
|
|
dialog must show the error itself (mirrors delete/release's message hint). */
|
|
.footerMessage {
|
|
margin-right: auto;
|
|
color: var(--error-color);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dangerButton {
|
|
border-color: var(--error-color);
|
|
color: var(--error-color);
|
|
}
|