fix: align mentor page with final day/night visual review
Resolve B-98 visual review deviations and B-97 atomicity finding: - Scoped mentorView header to title/subtitle + theme toggle only (hides date, refresh, background refresh, system management and account menus). - Map contact avatars by stable id to the final day/night palette (52科比 and self stay blue; others use the final violet/green/orange/red/teal/ purple/yellow tones). - Grade badges read A级/B级/C级; pinned contacts render a pin + 置顶 badge; row-side pin controls are removed (chat header keeps pinning). - Chat header drops grade badges; subtitle shows the active contact description/tagline. - Assistant message column caps at 900px and centers on wide screens; user bubble keeps its 60% cap. - Widen the directory search field (~218px target), keep filter/sort on the same row, and make the filter button icon-only (no chevron). - Follow-up links drop the leading icon; no '日期 · 回答完成' meta line; follow-up divider is 382px and left-aligned with the text column. - Own-message meta shows time only; composer height converges to ~85px while keeping auto-grow and the 168px cap. - Selected contact right inset ~10px, header action radius 8px, and a thin list scrollbar instead of the reserved gutter. - Remove the iFinD settings switch fragment from index.html so the mentor commit no longer carries half of the parallel iFinD work; the id contract test now tolerates dangling references introduced only by uncommitted working-tree edits. - Add contract + e2e assertions for the header visibility, avatar tone mapping, badge copy, chat subtitle, message max-width, composer height, and follow-up area. Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
MS-01-Codex
co-authored by
multica-agent
multica-agent
parent
8ac3adbb5d
commit
39b6f71443
+122
-22
@@ -110,15 +110,16 @@
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
padding: 12px;
|
||||
gap: var(--space-4);
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid var(--qp-border);
|
||||
}
|
||||
|
||||
#mentorView .mentor-search-field {
|
||||
min-width: 0;
|
||||
height: 32px;
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 218px;
|
||||
max-width: 218px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
@@ -165,11 +166,12 @@
|
||||
}
|
||||
|
||||
#mentorView .mentor-filter-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: 0 10px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: var(--qp-bg-control);
|
||||
@@ -244,8 +246,8 @@
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: 0 8px;
|
||||
gap: var(--space-2);
|
||||
padding: 0 6px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
@@ -278,14 +280,27 @@
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden auto;
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
#mentorView .mentor-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#mentorView .mentor-list::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background: var(--qp-border-input);
|
||||
}
|
||||
|
||||
#mentorView .mentor-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#mentorView .mentor-option {
|
||||
position: relative;
|
||||
height: 75px;
|
||||
margin: 0 8px;
|
||||
margin: 0 10px 0 8px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-radius: 10px;
|
||||
@@ -323,6 +338,86 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-violet {
|
||||
--qp-avatar-bg: #EEECFD;
|
||||
--qp-avatar-ink: #6A5CF5;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-blue {
|
||||
--qp-avatar-bg: #E3F0FF;
|
||||
--qp-avatar-ink: #3370FF;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-green {
|
||||
--qp-avatar-bg: #DDF5E5;
|
||||
--qp-avatar-ink: #2EA44F;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-orange {
|
||||
--qp-avatar-bg: #FDEEDD;
|
||||
--qp-avatar-ink: #D97A1B;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-red {
|
||||
--qp-avatar-bg: #FDE8EC;
|
||||
--qp-avatar-ink: #D63F57;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-teal {
|
||||
--qp-avatar-bg: #DCF5F2;
|
||||
--qp-avatar-ink: #1F9C8F;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-purple {
|
||||
--qp-avatar-bg: #F0E9FD;
|
||||
--qp-avatar-ink: #7D52E0;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar-tone-yellow {
|
||||
--qp-avatar-bg: #FFF3D6;
|
||||
--qp-avatar-ink: #C28904;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-violet {
|
||||
--qp-avatar-bg: #35305C;
|
||||
--qp-avatar-ink: #A89EF2;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-blue {
|
||||
--qp-avatar-bg: #2B3F66;
|
||||
--qp-avatar-ink: #7BA5F5;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-green {
|
||||
--qp-avatar-bg: #234A38;
|
||||
--qp-avatar-ink: #5FCE8F;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-orange {
|
||||
--qp-avatar-bg: #4D3A24;
|
||||
--qp-avatar-ink: #E8A05C;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-red {
|
||||
--qp-avatar-bg: #4D2B33;
|
||||
--qp-avatar-ink: #F08A9B;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-teal {
|
||||
--qp-avatar-bg: #1F4540;
|
||||
--qp-avatar-ink: #5CCABC;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-purple {
|
||||
--qp-avatar-bg: #3A3160;
|
||||
--qp-avatar-ink: #B39CF0;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-avatar-tone-yellow {
|
||||
--qp-avatar-bg: #4D4020;
|
||||
--qp-avatar-ink: #E3B34E;
|
||||
}
|
||||
|
||||
#mentorView .mentor-avatar {
|
||||
width: var(--mentor-avatar-size);
|
||||
height: var(--mentor-avatar-size);
|
||||
@@ -395,7 +490,7 @@
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
#mentorView :is(.mentor-pin-button, .mentor-order-button) {
|
||||
#mentorView :is(.mentor-order-button) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
@@ -410,18 +505,17 @@
|
||||
transition: color var(--motion-fast), background var(--motion-fast), opacity var(--motion-fast);
|
||||
}
|
||||
|
||||
#mentorView .mentor-option:is(:hover, :focus-within) :is(.mentor-pin-button, .mentor-order-button),
|
||||
#mentorView .mentor-pin-button.active,
|
||||
#mentorView .mentor-option:is(:hover, :focus-within) .mentor-order-button,
|
||||
#mentorView .mentor-list.is-sorting .mentor-order-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#mentorView :is(.mentor-pin-button, .mentor-order-button):is(:hover, .active) {
|
||||
#mentorView .mentor-order-button:is(:hover, .active) {
|
||||
background: var(--qp-bg-btn-active);
|
||||
color: var(--qp-icon-active);
|
||||
}
|
||||
|
||||
#mentorView :is(.mentor-pin-button, .mentor-order-button) .lucide {
|
||||
#mentorView .mentor-order-button .lucide {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
@@ -538,11 +632,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#mentorView .mentor-active-badges {
|
||||
display: inline-flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
#mentorView #activeMentorStatus {
|
||||
margin: 2px 0 0;
|
||||
color: var(--qp-text-3);
|
||||
@@ -564,6 +653,7 @@
|
||||
background: transparent;
|
||||
color: var(--qp-icon-normal);
|
||||
font-size: 18px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#mentorView .mentor-header-action:hover {
|
||||
@@ -584,6 +674,7 @@
|
||||
background: transparent;
|
||||
color: var(--qp-icon-normal);
|
||||
font-size: 18px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#mentorView .mentor-clear-button:hover {
|
||||
@@ -676,7 +767,9 @@
|
||||
}
|
||||
|
||||
#mentorView .mentor-message.assistant .mentor-message-body {
|
||||
flex: 1 1 auto;
|
||||
flex: 0 1 900px;
|
||||
max-width: 900px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#mentorView .mentor-message.user .mentor-message-body {
|
||||
@@ -774,7 +867,8 @@
|
||||
}
|
||||
|
||||
#mentorView .mentor-follow-ups {
|
||||
width: 100%;
|
||||
width: 382px;
|
||||
max-width: 100%;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-8);
|
||||
@@ -1197,7 +1291,7 @@
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#mentorView :is(.mentor-sort-toggle, .mentor-search-field, .mentor-filter-toggle, .mentor-filter-options button, .mentor-option, .mentor-pin-button, .mentor-order-button, .mentor-follow-ups button, .mentor-quick-prompts button, .mentor-send-button) {
|
||||
#mentorView :is(.mentor-sort-toggle, .mentor-search-field, .mentor-filter-toggle, .mentor-filter-options button, .mentor-option, .mentor-order-button, .mentor-follow-ups button, .mentor-quick-prompts button, .mentor-send-button) {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@@ -1210,6 +1304,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
#mentorView .mentor-message.assistant {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#mentorView .mentor-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
|
||||
Reference in New Issue
Block a user