Coder/deepseek-harness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sidebar): synchronize collapsed rail motion

Browse Source
This commit is contained in:
_Kerman
2026-08-12 22:54:38 +08:00
parent 7c4c118456
commit de97ea0ba8
16 changed files with 157 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/client/ui-sidebar/src/client/SidebarRoot.module.css
View File

@@ -58,24 +58,35 @@
from { opacity: 0; }
}
/* Rail controls hold hidden while the column slides shut, then fade in over
the slide's tail: .railIn applies at settle (150ms into the 0.3s AppFrame
track transition), so a 100ms delay + 150ms fade starts just before the
slide ends (250ms) and finishes at 400ms; `backwards` keeps them at
opacity 0 through the delay. Only a live collapse gets .railIn — a
refresh straight into the collapsed state renders statically. */
/* At the 150ms rail settle, the four upper controls enter from the former
rail right edge over the remaining 150ms of the AppFrame track transition.
The bottom-pinned settings seat shares their opacity timeline but stays
horizontally fixed. Only a live collapse gets .railIn; a cold collapsed
render stays static. */
.railIn .iconButton,
.railIn .newSession,
.railIn .regionArea {
animation: rail-in 150ms var(--ds-ease-in-out) backwards;
}
.railIn .footArea {
animation: rail-in 150ms var(--ds-ease-in-out) 100ms backwards;
animation: rail-fade-in 150ms var(--ds-ease-in-out) backwards;
}
@keyframes rail-in {
from {
opacity: 0;
transform: translateX(49px);
}
}
@keyframes rail-fade-in {
from { opacity: 0; }
}
/* Logo row (figma pad (4,8,4,8)): brand left, panel toggle right-anchored —
the toggle is the rail's expand control and slides in with the right edge. */
/* Logo row (figma pad (4,8,4,8)): expanded keeps the panel toggle at the
right edge; the rail gives every control the same base left anchor before
the shared entry translation is applied. */
.logoRow {
flex: none;
display: flex;
@@ -93,6 +104,7 @@
height: 36px;
padding: 0;
margin-bottom: 12px;
justify-content: flex-start;
}
/* Brand group (figma I133:7632): the full wordmark rides the text ink
@@ -185,6 +197,8 @@
}
.collapsed .newSession {
align-self: flex-start;
width: 36px;
height: 36px;
padding: 0;
margin: 0 0 12px;
@@ -239,7 +253,8 @@
.fading > *,
.railIn .iconButton,
.railIn .newSession,
.railIn .footArea {
.railIn .footArea,
.railIn .regionArea {
transition: none;
animation: none;
}

13
packages/client/ui-sidebar/src/client/SidebarRoot.tsx
View File

@@ -2,12 +2,13 @@
* Sidebar shell: column geometry only. Collapse is a slide plus crossfade:
* content freezes at its expanded width (inline style) and fades out in place
* while the sliding column (AppFrame grid tracks) clips it — nothing reflows
* mid-slide. At settle the wide-only content unmounts and the control rows
* snap to the 56px rail (one icon each, same top-down order) fading in as the
* slide ends. The workspace/session browsing region between the New Session
* button and the foot is the `sidebar.workspaces` registrant's, and the foot
* is the `sidebar.settings` registrant's; the shell hands them the wide flag
* (plus an expand request callback for the browser).
* mid-slide. At settle the wide-only content unmounts and the four upper
* controls enter the 56px rail from the same horizontal offset (one icon each,
* same top-down order) on one fade that ends with the slide. The bottom-pinned
* settings control only fades. The workspace/session browsing region between
* the New Session button and the foot is the `sidebar.workspaces` registrant's,
* and the foot is the `sidebar.settings` registrant's; the shell hands them the
* wide flag (plus an expand request callback for the browser).
*
* The column also owns whether the scroll regions nested in it draw a
* scrollbar at all: the shell tracks the pointer and rebinds ui-theme's