feat(web): collapse mobile composer by default

[chirino]

Summary

On mobile viewports (< 640px), the chat composer now collapses to a compact single-row input when not focused, freeing up vertical space for reading the conversation. Tapping the collapsed bar expands the full composer with editor focus; blurring collapses it back.

Fixes #1262

Changes

• Add mobile-collapsed state to the chat composer that hides the Lexical editor, toolbar controls, model picker, and attachment previews when unfocused
• Show a compact row with truncated prompt text (or "Ask anything…" placeholder) and a send button in collapsed state
• Desktop/wide-screen behavior is completely unchanged

Note

Collapse mobile composer by default in ChatView

• On small viewports, the composer in ChatView.tsx collapses when unfocused, showing a single-line preview of the current prompt or pending answer alongside a circular send button.
• Clicking the collapsed row expands the full composer and focuses the editor via requestAnimationFrame; blur collapses it again.
• Status panels, image previews, and the bottom toolbar are all hidden while collapsed.
• Behavioral Change: mobile users will see the compact composer by default until they tap to interact with it.

^{Macroscope summarized 5c33d5c.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. 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: 54f21e1e-e92b-4dbe-a802-28e577235e4e

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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

Tip

CodeRabbit can suggest fixes for GitHub Check annotations.

Configure the reviews.tools.github-checks setting to adjust the time to wait for GitHub Checks to complete.

[macroscopeapp]

🟡 Medium components/ChatView.tsx:3649

The collapsed mobile send button (lines 3649-3659) allows submission when activePendingProgress exists but canAdvance is false. It only checks composerSendState.hasSendableContent, which doesn't validate whether the user has selected an option or provided a valid custom answer. This lets users submit incomplete responses that would be blocked in the expanded view (lines 3951-3979). Consider disabling the button when activePendingProgress exists and !activePendingProgress.canAdvance.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file apps/web/src/components/ChatView.tsx around line 3649:

The collapsed mobile send button (lines 3649-3659) allows submission when `activePendingProgress` exists but `canAdvance` is false. It only checks `composerSendState.hasSendableContent`, which doesn't validate whether the user has selected an option or provided a valid custom answer. This lets users submit incomplete responses that would be blocked in the expanded view (lines 3951-3979). Consider disabling the button when `activePendingProgress` exists and `!activePendingProgress.canAdvance`.

Evidence trail:
apps/web/src/components/ChatView.tsx:3649-3659 (collapsed mobile button disabled condition), apps/web/src/components/ChatView.tsx:3967-3971 (expanded view button disabled condition), apps/web/src/pendingUserInput.ts:121 (canAdvance definition), apps/web/src/components/ChatView.tsx:2809-2819 (onAdvanceActivePendingUserInput function), apps/web/src/components/ChatView.tsx:2353-2355 (onSend calls onAdvanceActivePendingUserInput when activePendingProgress exists)

[Noojuno]

@chirino Can you please include before/after screenshots or video in your PR description?

[chirino]

and