fix: reveal conversation actions on hover
Conversation rows always reserved space for the more-actions button, and the active row kept it visible. The button now replaces the right-side timestamp only on hover, keyboard focus, or while its menu is open, leaving more room for conversation titles and timestamps by default. Release note: 会话列表仅在悬停或键盘聚焦时显示更多操作按钮,更新时间默认更靠右,为会话标题留出更多空间。
This commit is contained in:
@@ -7640,13 +7640,7 @@ function App(): React.JSX.Element {
|
||||
`conversation-branch-disabled-${conversation.id}`
|
||||
return (
|
||||
<div className="conversation-entry" key={conversation.id}>
|
||||
<div
|
||||
className={
|
||||
conversation.id === activeId
|
||||
? 'conversation-row conversation-row--active'
|
||||
: 'conversation-row'
|
||||
}
|
||||
>
|
||||
<div className="conversation-row">
|
||||
{conversationTasks.length > 0 && (
|
||||
<button
|
||||
aria-expanded={tasksExpanded}
|
||||
|
||||
@@ -251,24 +251,33 @@ describe('WorkspacePrimitives', () => {
|
||||
)
|
||||
})
|
||||
|
||||
it('keeps the conversation action close to the sidebar edge', () => {
|
||||
it('reveals the conversation action without reserving its space', () => {
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-row:has\(\.conversation-task-toggle\) \.conversation-item\s*\{[^}]*padding-left:\s*34px;/u
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-task-toggle\s*\{[^}]*left:\s*3px;[^}]*width:\s*28px;[^}]*height:\s*28px;/u
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-row \.conversation-item\s*\{[^}]*padding-right:\s*36px;/u
|
||||
expect(stylesheet).not.toMatch(
|
||||
/\.conversation-row \.conversation-item\s*\{[^}]*padding-right:/u
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-more\s*\{[^}]*right:\s*5px;/u
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-row:has\(\.conversation-activity-indicator\)\s+\.conversation-item\s*\{[^}]*padding-right:\s*52px;/u
|
||||
/\.conversation-row:hover \.conversation-more,\s*\.conversation-row:focus-within \.conversation-more,[^{]*\{[^}]*opacity:\s*1;/u
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-activity-indicator\s*\{[^}]*right:\s*38px;/u
|
||||
/\.conversation-row:hover \.conversation-item small,[^{]*\.conversation-item small\s*\{[^}]*opacity:\s*0;/u
|
||||
)
|
||||
expect(stylesheet).not.toContain(
|
||||
'.conversation-row--active .conversation-more'
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-row:has\(\.conversation-activity-indicator\)\s+\.conversation-item\s*\{[^}]*padding-right:\s*28px;/u
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.conversation-activity-indicator\s*\{[^}]*right:\s*10px;/u
|
||||
)
|
||||
expect(stylesheet).not.toContain('.conversation-delete')
|
||||
})
|
||||
|
||||
@@ -2846,6 +2846,7 @@ textarea:focus-visible {
|
||||
flex: 0 0 auto;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-caption);
|
||||
transition: opacity var(--motion-fast) ease-out;
|
||||
}
|
||||
|
||||
.overflow-marquee {
|
||||
@@ -8900,18 +8901,14 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.conversation-row .conversation-item {
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.conversation-row:has(.conversation-activity-indicator)
|
||||
.conversation-item {
|
||||
padding-right: 52px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.conversation-activity-indicator {
|
||||
position: absolute;
|
||||
right: 38px;
|
||||
right: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
@@ -8920,6 +8917,7 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
box-shadow: 0 0 0 4px
|
||||
color-mix(in srgb, var(--success) 14%, transparent);
|
||||
pointer-events: none;
|
||||
transition: right var(--motion-fast) ease-out;
|
||||
}
|
||||
|
||||
.conversation-more {
|
||||
@@ -8940,11 +8938,25 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
}
|
||||
|
||||
.conversation-row:hover .conversation-more,
|
||||
.conversation-row--active .conversation-more,
|
||||
.conversation-row:focus-within .conversation-more,
|
||||
.conversation-more:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.conversation-row:hover .conversation-item small,
|
||||
.conversation-row:focus-within .conversation-item small,
|
||||
.conversation-row:has(.conversation-more[aria-expanded='true'])
|
||||
.conversation-item small {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.conversation-row:hover .conversation-activity-indicator,
|
||||
.conversation-row:focus-within .conversation-activity-indicator,
|
||||
.conversation-row:has(.conversation-more[aria-expanded='true'])
|
||||
.conversation-activity-indicator {
|
||||
right: 38px;
|
||||
}
|
||||
|
||||
.conversation-more[aria-expanded='true'] {
|
||||
background: var(--accent-subtle);
|
||||
color: var(--accent);
|
||||
|
||||
Reference in New Issue
Block a user