Skip to content

Commit 3fe27c9

Browse files
hardbeat920hardbeat920
committed
Simplify composer dock animation by removing width changes
• Align centered composer box with docked dimensions (max-w-4xl, p-1.5) • Remove width from animation—only position changes during dock transition • Adjust background transition timing for session state changes
1 parent 51266ae commit 3fe27c9

4 files changed

Lines changed: 20 additions & 21 deletions

File tree

‎src/features/sessions/ui/EmptySession.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ export function EmptySession({ cwd, composer, hasChatBackground }: Props) {
5151
>
5252
{arcadeEnabled && !hasChatBackground ? <TerminalGridBackground /> : null}
5353
{composer ? (
54-
<div className="pointer-events-none relative z-10 mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center px-6 py-12">
54+
// Same box as the docked composer (max-w-4xl, p-1.5), so the input
55+
// keeps its width when the first message docks it.
56+
<div className="pointer-events-none relative z-10 mx-auto flex w-full max-w-4xl flex-1 flex-col justify-center px-1.5 py-12">
5557
<div className="pointer-events-auto mb-4 px-2.5">
5658
<h1
5759
className="truncate text-lg text-content"

‎src/features/sessions/ui/useComposerDockMotion.test.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,7 @@ describe("useComposerDockMotion", () => {
5858

5959
expect(animate).toHaveBeenCalledTimes(1);
6060
const [frames] = animate.mock.calls[0];
61-
expect(frames[0]).toEqual({
62-
transform: "translate(0px, -400px)",
63-
width: "600px",
64-
});
65-
expect(frames[1].width).toBe("700px");
61+
expect(frames[0]).toEqual({ transform: "translate(0px, -400px)" });
6662
});
6763

6864
it("does not animate when the composer docks without a submit", () => {

‎src/features/sessions/ui/useComposerDockMotion.ts‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,16 @@ function reducedMotion() {
1616
export function useComposerDockMotion(docked: boolean) {
1717
const centeredRef = useRef<HTMLDivElement>(null);
1818
const dockedRef = useRef<HTMLDivElement>(null);
19-
const launch = useRef<{
20-
top: number;
21-
centerX: number;
22-
width: number;
23-
at: number;
24-
} | null>(null);
19+
const launch = useRef<{ top: number; centerX: number; at: number } | null>(
20+
null,
21+
);
2522

2623
const captureLaunch = useCallback(() => {
2724
const rect = centeredRef.current?.getBoundingClientRect();
2825
launch.current = rect
2926
? {
3027
top: rect.top,
3128
centerX: rect.left + rect.width / 2,
32-
width: rect.width,
3329
at: performance.now(),
3430
}
3531
: null;
@@ -43,18 +39,14 @@ export function useComposerDockMotion(docked: boolean) {
4339
if (!from || !element || reducedMotion()) return;
4440
if (performance.now() - from.at > LAUNCH_WINDOW_MS) return;
4541
const to = element.getBoundingClientRect();
46-
// Align centers so the composer drops straight down, and grow it from
47-
// the narrower centered width instead of snapping to the dock width.
42+
// Align centers so the composer drops straight down.
4843
const dx = from.centerX - (to.left + to.width / 2);
4944
const dy = from.top - to.top;
5045
if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return;
5146
const animation = element.animate(
5247
[
53-
{
54-
transform: `translate(${dx}px, ${dy}px)`,
55-
width: `${from.width}px`,
56-
},
57-
{ transform: "translate(0, 0)", width: `${to.width}px` },
48+
{ transform: `translate(${dx}px, ${dy}px)` },
49+
{ transform: "translate(0, 0)" },
5850
],
5951
{ duration: DURATION_MS, easing: EASING },
6052
);

‎src/styles/index.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,8 +312,17 @@ html.has-chat-background.chat-background-effect-ready
312312
opacity: var(--chat-background-session-opacity);
313313
}
314314

315+
/*
316+
* Sending the first message eases the background into its session look (or
317+
* out entirely when it only shows on empty sessions) alongside the composer.
318+
*/
319+
.chat-pane-background[data-session-empty="false"]::before {
320+
transition-duration: 600ms;
321+
}
322+
315323
@media (prefers-reduced-motion: reduce) {
316-
.chat-pane-background::before {
324+
.chat-pane-background::before,
325+
.chat-pane-background[data-session-empty="false"]::before {
317326
transition-duration: 0ms;
318327
}
319328
}

0 commit comments

Comments
 (0)