mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-07-23 07:54:11 +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
564 lines
9.8 KiB
CSS
564 lines
9.8 KiB
CSS
/* Shared dialog and picker primitives reused by dialog components. */
|
|
/* ===== Dialog Overlay & Panel ===== */
|
|
/* ===== CLI-style Picker (Model, Mode, Resume) ===== */
|
|
.picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
margin: 24px;
|
|
}
|
|
|
|
.picker-in-shell {
|
|
height: 100%;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.picker-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 12px;
|
|
font-size: 13px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.picker-search-label {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.picker-search-input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--foreground);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.picker-search-hint {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.picker-sep {
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.picker-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
/* When the list itself is the focus owner (aria-activedescendant pattern),
|
|
selection is shown by the roving row highlight — suppress the outline. */
|
|
.picker-list:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.picker-list-compact {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.picker-empty {
|
|
padding: 16px 12px;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.picker-item {
|
|
display: flex;
|
|
width: calc(100% - 16px);
|
|
align-items: baseline;
|
|
margin: 1px 8px;
|
|
padding: 5px 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--foreground);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.picker-session-item {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.picker-item.selected {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.picker-item:hover {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.picker-keyboard-only .picker-item:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.picker-keyboard-only .picker-item.selected:hover {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.picker-item.disabled {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.picker-item-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex: 1;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.picker-item-title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.picker-item-checkbox {
|
|
color: var(--muted-foreground);
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
white-space: pre;
|
|
}
|
|
|
|
.picker-item.selected .picker-item-checkbox {
|
|
color: var(--agent-blue-500);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Multi-select "checked" emphasis — independent of the roving `.selected`
|
|
cursor, so ticked rows stay legible even when the cursor is elsewhere. */
|
|
.picker-item-checkbox-checked {
|
|
color: var(--agent-blue-500);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.picker-item.selected .picker-item-title {
|
|
color: var(--agent-blue-500);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.picker-item-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.picker-item-detail {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.picker-item-detail::before {
|
|
content: '·';
|
|
margin-right: 8px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* "Current value" marker: a left accent bar + a right ✓ that read on their own
|
|
channel, independent of the roving `.selected` background highlight. Both are
|
|
absolutely positioned and vertically centered, so they stay centered whatever
|
|
the row height (single- or multi-line). Shared by every list dialog. */
|
|
.dialog-current,
|
|
.picker-item-confirmed {
|
|
position: relative;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
.dialog-current::before,
|
|
.picker-item-confirmed::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);
|
|
}
|
|
|
|
.dialog-current::after,
|
|
.picker-item-confirmed::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--agent-blue-500, #4a9eff);
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.picker-item-badge {
|
|
flex-shrink: 0;
|
|
margin-left: 8px;
|
|
font-size: 11px;
|
|
color: var(--agent-blue-500, #4a9eff);
|
|
opacity: 0.8;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tools-status-badge {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
border-radius: 4px;
|
|
background: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
padding: 0 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tools-status-badge-enabled {
|
|
color: var(--success-color, #48bb78);
|
|
}
|
|
|
|
.tools-status-badge-disabled {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.tools-status-badge-busy {
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.tools-picker-item {
|
|
border-radius: 6px;
|
|
margin: 2px 8px;
|
|
padding: 5px 8px 6px;
|
|
}
|
|
|
|
.tools-picker-item .picker-item-row {
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tools-picker-item-expanded {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.tools-item-icon {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 1.5px solid currentColor;
|
|
border-radius: 4px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.tools-item-icon::before,
|
|
.tools-item-icon::after {
|
|
position: absolute;
|
|
left: 3px;
|
|
right: 3px;
|
|
height: 1.5px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
content: '';
|
|
}
|
|
|
|
.tools-item-icon::before {
|
|
top: 4px;
|
|
}
|
|
|
|
.tools-item-icon::after {
|
|
top: 8px;
|
|
}
|
|
|
|
.tools-item-chevron {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--muted-foreground);
|
|
stroke-width: 1.8;
|
|
transition: transform 120ms ease;
|
|
}
|
|
|
|
.tools-item-chevron-expanded {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.tools-item-detail::before {
|
|
content: none;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mcp-status {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.mcp-status-connected {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.mcp-status-connecting {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.mcp-status-disconnected {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.mcp-status-disabled,
|
|
.mcp-status-unknown {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.dialog-inline-button,
|
|
.dialog-primary-button,
|
|
.dialog-danger-button {
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background: var(--muted);
|
|
color: var(--foreground);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dialog-inline-button:hover,
|
|
.dialog-primary-button:hover {
|
|
border-color: var(--agent-blue-500);
|
|
}
|
|
|
|
.dialog-inline-button:disabled,
|
|
.dialog-primary-button:disabled,
|
|
.dialog-danger-button:disabled {
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.dialog-inline-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dialog-footer-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 10px 12px 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dialog-primary-button {
|
|
align-self: flex-start;
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.dialog-danger-button {
|
|
align-self: flex-start;
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.dialog-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dialog-form label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dialog-form input,
|
|
.dialog-form select,
|
|
.dialog-form textarea {
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.dialog-form-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
|
|
gap: 10px;
|
|
}
|
|
|
|
.dialog-textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.dialog-split {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
|
|
}
|
|
|
|
.dialog-split-list {
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
.tools-desc-expanded {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin: 8px;
|
|
padding: 8px;
|
|
background: var(--background);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.tools-desc-body {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.extensions-toolbar {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.extensions-row-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.extensions-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 8px;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.extensions-detail-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.extensions-detail-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.extensions-detail-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.extensions-detail-label {
|
|
color: var(--foreground);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.extensions-detail-value {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.extensions-confirm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
border-radius: 6px;
|
|
background: var(--muted);
|
|
color: var(--foreground);
|
|
padding: 8px;
|
|
}
|
|
|
|
.dialog-detail {
|
|
padding: 12px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dialog-detail-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--foreground);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dialog-detail-shortcut {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: var(--error-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.dialog-detail-meta {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dialog-detail-body {
|
|
color: var(--foreground);
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
line-height: 1.5;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
background: var(--background);
|
|
}
|