modals should focus chat input on exit

[matheusfillipe]

Summary by CodeRabbit

Release Notes

• New Features
  • Chat input now automatically receives focus when closing UI elements and modals, streamlining the user interaction flow.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Implements state-driven focus management for the chat input. A new store flag shouldFocusChatInput and actions requestChatInputFocus/clearChatInputFocus enable components like QuickActions to request focus. ChatArea listens to the flag via useEffect, focuses the input, and clears the request.

Changes

Cohort / File(s)	Summary
Store Focus Management src/store/index.ts	Adds shouldFocusChatInput boolean flag to UI state; introduces requestChatInputFocus and clearChatInputFocus actions to toggle the flag
Component Integration src/components/layout/ChatArea.tsx, src/components/ui/QuickActions.tsx	ChatArea adds useEffect to focus chat input when shouldFocusChatInput is true, then clears the flag; QuickActions imports and calls requestChatInputFocus on close
Test State Updates tests/components/ChatArea.test.tsx, tests/components/MetadataDisplay.test.tsx, tests/lib/nicknameRetry.test.ts, tests/protocol/mode.test.ts	Adds shouldFocusChatInput: false to UI state mock initialization across test suites

Sequence Diagram

sequenceDiagram
    participant QuickActions
    participant Store
    participant ChatArea
    participant InputElement

    QuickActions->>QuickActions: User closes quick actions panel
    QuickActions->>Store: requestChatInputFocus()
    Store->>Store: Set shouldFocusChatInput = true
    ChatArea->>Store: Read shouldFocusChatInput (selector)
    Store-->>ChatArea: shouldFocusChatInput = true
    ChatArea->>ChatArea: useEffect triggered
    ChatArea->>InputElement: Focus input element
    ChatArea->>Store: clearChatInputFocus()
    Store->>Store: Set shouldFocusChatInput = false

Loading

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~12-18 minutes

• Pattern is homogeneous: identical flag additions across multiple test files with minimal variance
• Core logic is straightforward: simple state flag toggle with focused useEffect
• Main review focus: verify store action exports are correct, confirm ChatArea useEffect dependencies include inputRef.current safety check, and ensure proper cleanup behavior

Suggested Reviewers

• ValwareIRC

Poem

🐰 A rabbit hops through focus flows,
State-driven paths through modal throes,
When quick actions close their door,
Input awaits, now bright once more! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'modals should focus chat input on exit' accurately describes the main change: implementing focus behavior on the chat input when modals close, which is the primary feature across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/fix-focus-on-qam-exit

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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.}

[github-actions]

Preview URL: https://feat-fix-focus-on-qam-exit.obsidianirc.pages.dev

Automated deployment preview for the PR in the Cloudflare Pages.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

tests/components/ChatArea.test.tsx (1)

59-105: ChatArea test store state updated for new UI flag

Adding shouldFocusChatInput: false to the ui setup keeps this suite in sync with the updated UIState definition and avoids shape mismatches when the component reads the store.

If you want to harden the new behavior, consider a small focused test that sets shouldFocusChatInput to true in the store and asserts that ChatArea focuses the input and clears the flag.

src/store/index.ts (1)

370-424: Store-level chat input focus flag and actions look consistent and safe

The new UIState.shouldFocusChatInput plus requestChatInputFocus / clearChatInputFocus:

• Are properly typed on UIState and AppState.
• Are initialized to false in the root ui state.
• Use the existing immutable update pattern (ui: { ...state.ui, ... }), so they won’t clobber other UI fields.
• Provide a clean, one-shot “focus request” signal for components like ChatArea and QuickActions.

This design fits well with the rest of the UI slice and should be easy to extend to other modals if needed.

If you later need per-server or per-tab focus behavior, you could evolve this into a small “focus request” object (e.g., { target: "chatInput", serverId? }) instead of a single boolean, but that’s not necessary for this PR.

Also applies to: 676-679, 803-841, 2289-2299

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 957488a and b7f6eda.

📒 Files selected for processing (7)

• src/components/layout/ChatArea.tsx (1 hunks)
• src/components/ui/QuickActions.tsx (2 hunks)
• src/store/index.ts (4 hunks)
• tests/components/ChatArea.test.tsx (1 hunks)
• tests/components/MetadataDisplay.test.tsx (1 hunks)
• tests/lib/nicknameRetry.test.ts (2 hunks)
• tests/protocol/mode.test.ts (1 hunks)

🔇 Additional comments (7)

tests/protocol/mode.test.ts (1)

25-59: UI fixture correctly extended with new focus flag

Including shouldFocusChatInput: false in the UI slice keeps this test setup aligned with the store’s UIState and default values. No further changes needed.

tests/lib/nicknameRetry.test.ts (1)

35-75: Nickname retry tests correctly updated for UIState change

Including shouldFocusChatInput: false in both mocked ui states keeps these Partial<AppState> fixtures compatible with the expanded UIState while remaining behaviorally neutral for the nickname logic under test.

Also applies to: 132-172

src/components/ui/QuickActions.tsx (2)

53-53: LGTM! Clean integration with the store.

The addition of requestChatInputFocus follows the existing pattern for extracting store actions.

---

59-64: LGTM! Proper focus request on modal close.

The implementation correctly requests chat input focus after resetting the modal state, and the dependency array is properly updated.

tests/components/MetadataDisplay.test.tsx (1)

163-163: LGTM! Test updated for new UI state field.

The addition of shouldFocusChatInput: false correctly reflects the new store structure.

src/components/layout/ChatArea.tsx (2)

178-181: LGTM! Store selectors correctly extracted.

The new selectors clearChatInputFocus and shouldFocusChatInput are properly extracted from the store.

---

183-189: Verify mobile platform behavior.

The focus effect correctly implements the state-driven focus pattern. However, the existing focus effect at lines 1421-1422 skips auto-focus on mobile platforms (Android/iOS) to avoid disruptive keyboard pop-ups, but this new effect doesn't include that check.

On mobile, auto-focusing when modals close will bring up the keyboard, which may or may not be desired behavior. Please verify this is intentional.

If mobile should be excluded, apply this diff:

   // Focus chat input when requested by other components (e.g., modals closing)
   useEffect(() => {
+    // Skip auto-focus on mobile platforms
+    if ("__TAURI__" in window && ["android", "ios"].includes(platform()))
+      return;
+      
     if (shouldFocusChatInput && inputRef.current) {
       inputRef.current.focus();
       clearChatInputFocus();
     }
   }, [shouldFocusChatInput, clearChatInputFocus]);