feat(journeys-ui): apologist chat drawer UI update [NES-1641] by edmonday · Pull Request #9184 · JesusFilm/core

edmonday · 2026-05-08T05:31:54Z

Summary

Iterates on the pinned apologist-chat sheet UX based on the Claude Design handoff. Replaces the binary collapse/expand gesture with a live-tracking drag and three snap stops, swaps the chevron handle for a standard drag pill, and tints the send button brand red.

Also addresses one of the deferred items from the PR #9122 review — the synthetic-tap-after-drag-then-return edge case.

Drawer behaviour

Three snap stops: minimized (32 px handle), 80%, full.
Empty chat → 168 px idle (handle + header + input). First message ever auto-expands to 80%.
Re-expansion from minimized always lands at 80%; full is only reachable by dragging up from 80%.
Drag down from 80% or full → minimized. Drag up from minimized → 80%.
Drag handle and the chat header are both drag surfaces (shared via `useDragSheet` hook).
Snap animation: 780 ms cubic-bezier(0.16, 1, 0.3, 1) — gentle ease-out into the target.
Pointer tap on the collapsed handle is a no-op — only an explicit upward drag expands. Keyboard Enter/Space still toggles.
Drag-then-return-to-start gestures are correctly recognised as drags (max-displacement tracking).

Send button

Brand red (`#C52D3A`) fill when there's submittable content or while loading. Disabled state unchanged (DIVIDER grey).
Hover uses `BRAND_RED_HOVER` (`#A8202C`).

Files

`libs/journeys/ui/src/components/AiChat/DragHandle/` — `useDragSheet` hook, live-drag callbacks, pill affordance
`libs/journeys/ui/src/components/AiChat/AiChat.tsx` — controlled `collapsed`, drag handler forwarding, draggable header wrapper
`libs/journeys/ui/src/components/PinnedChatBar/PinnedChatBar.tsx` — snap state machine, 780 ms ease-out animation
`libs/journeys/ui/src/components/Conversation/Conversation.tsx` — `suppressScrollPill` prop so the chevron doesn't flash in mid-collapse
`libs/journeys/ui/src/components/PromptInput/PromptInput.tsx` + `AiChat/chatStyles.ts` — brand-red send button

Verification

`npx tsc --noEmit -p libs/journeys/ui/tsconfig.lib.json` — passes
DragHandle spec — 14 tests pass (regression coverage for drag-then-return + new live-drag mode)
Conversation, AiChat, PinnedChatBar, PromptInput, StepFooter specs — all green (61 tests)

Linear: NES-1641

🤖 Generated with Claude Code

- DragHandle: extract useDragSheet hook, track max abs displacement to fix synthetic-tap-after-drag-then-return, add live-drag callbacks - DragHandle: replace chevron icon with standard pill affordance - AiChat: forward drag handlers, make ChatHeader a drag surface, controlled collapsed state - PinnedChatBar: own snap state with three stops (minimized / 80% / full); first message auto-expands to 80%, re-expansion always lands at 80%, full reachable only by drag-up from 80% - PinnedChatBar: 780ms ease-out snap, 480ms toggle ease-out - DragHandle: tap on collapsed handle is a no-op (drag-only expand) - Conversation: suppressScrollPill prop so the chevron doesn't flash in mid-collapse animation - PromptInput: brand red send/stop button when active or loading Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

linear · 2026-05-08T05:31:57Z

NES-1641

coderabbitai · 2026-05-08T05:32:03Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c04e602b-577c-4e06-be71-55cfb774e71a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch edmondshen/nes-1641-general-ux-improvements-apologist-chat-mobile

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-08T05:32:46Z

	Fails
🚫	Please request a reviewer for this PR.

	Warnings
⚠️	❗ Big PR (752 changes)

(change count - 752): Pull Request size seems relatively large. If Pull Request contains multiple changes, split each into separate PR will helps faster, easier review.

Generated by 🚫 dangerJS against 9643330

nx-cloud · 2026-05-08T05:33:01Z

View your CI Pipeline Execution ↗ for commit bab1490

Command	Status	Duration	Result
`nx run-many --target=vercel-alias --projects=jo...`	✅ Succeeded	2s	View ↗
`nx run-many --target=upload-sourcemaps --projec...`	✅ Succeeded	10s	View ↗
`nx run-many --target=deploy --projects=journeys...`	✅ Succeeded	2m 33s	View ↗
`nx run-many --target=vercel-alias --projects=re...`	✅ Succeeded	2s	View ↗
`nx run-many --target=upload-sourcemaps --projec...`	✅ Succeeded	6s	View ↗
`nx run-many --target=vercel-alias --projects=watch`	✅ Succeeded	2s	View ↗
`nx run-many --target=deploy --projects=resources`	✅ Succeeded	1m 49s	View ↗
`nx run-many --target=vercel-alias --projects=vi...`	✅ Succeeded	2s	View ↗
`Additional runs (7)`	✅ Succeeded	...	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-08 05:45:44 UTC

setCollapsed(false) was unconditional in handleSubmit/handleRetry/initial- message paths. In controlled mode this routed through onCollapsedChange, which always snaps to the large (80%) stop — silently shrinking a sheet the user had dragged to 100%. Skip the call when already expanded. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-08T05:44:09Z