Add immersive focus mode for task editing #300

2026-06-21T16:51:45Z

talksik commented

2026-06-21 16:51:45 +00:00

(Migrated from github.com)

Summary

Implements an immersive focus mode for task particle editing that dims and blurs the surrounding stream chrome while a field is focused, and prevents navigation away from the editor mid-edit.

Closes #286

Key Changes

TaskParticleView: Added immersive and onEditingChange props to support focus mode UI and state synchronization
- Renders a dimmed backdrop with blur effect when immersive mode is active and editing
- Elevates the card with shadow and ring styling during edit focus
- Tracks editing state and notifies parent component via onEditingChange callback
- Provides exitFocus handler to blur active elements and exit edit mode
useStreamNavigationKeys: Enhanced to respect edit focus mode
- Added editing and onExitEditing parameters
- When editing is active, Escape key exits the editor instead of the stream
- Navigation keys are suppressed during edit mode to prevent mid-edit navigation
StreamView: Integrated focus mode into the stream navigation flow
- Tracks task editing state with taskEditing state variable
- Passes editing state and exit handler to navigation key hook
- Enables immersive mode on TaskParticleView and wires up editing state callbacks

Implementation Details

Focus mode uses CSS transitions and backdrop blur for smooth visual feedback
Escape key behavior is context-aware: exits editor during edit, exits stream otherwise
Edit state is properly reset on particle unmount to prevent stranded focus mode
The implementation follows existing patterns for state management and callback propagation

https://claude.ai/code/session_01BDWBJjERKk8zUmh6bcKWSM

Summary by CodeRabbit

New Features
- Added immersive focus editing mode for task editing with visual overlay
- Keyboard handlers prevent accidental navigation while in editing mode
- Press Escape to exit focused editing and return to normal view

## Summary Implements an immersive focus mode for task particle editing that dims and blurs the surrounding stream chrome while a field is focused, and prevents navigation away from the editor mid-edit. Closes #286 ## Key Changes - **TaskParticleView**: Added `immersive` and `onEditingChange` props to support focus mode UI and state synchronization - Renders a dimmed backdrop with blur effect when immersive mode is active and editing - Elevates the card with shadow and ring styling during edit focus - Tracks editing state and notifies parent component via `onEditingChange` callback - Provides `exitFocus` handler to blur active elements and exit edit mode - **useStreamNavigationKeys**: Enhanced to respect edit focus mode - Added `editing` and `onExitEditing` parameters - When editing is active, Escape key exits the editor instead of the stream - Navigation keys are suppressed during edit mode to prevent mid-edit navigation - **StreamView**: Integrated focus mode into the stream navigation flow - Tracks task editing state with `taskEditing` state variable - Passes editing state and exit handler to navigation key hook - Enables immersive mode on TaskParticleView and wires up editing state callbacks ## Implementation Details - Focus mode uses CSS transitions and backdrop blur for smooth visual feedback - Escape key behavior is context-aware: exits editor during edit, exits stream otherwise - Edit state is properly reset on particle unmount to prevent stranded focus mode - The implementation follows existing patterns for state management and callback propagation https://claude.ai/code/session_01BDWBJjERKk8zUmh6bcKWSM  ## Summary by CodeRabbit * **New Features** * Added immersive focus editing mode for task editing with visual overlay * Keyboard handlers prevent accidental navigation while in editing mode * Press Escape to exit focused editing and return to normal view

coderabbitai[bot] commented

2026-06-21 16:51:53 +00:00

(Migrated from github.com)

Warning

Review limit reached

@talksik, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 13 minutes and 56 seconds. Learn how PR review limits work.

To unlock additional reviews, enable usage-based billing in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: ea807035-6efc-4171-b06f-1c2c2602e1d3

📥 Commits

Reviewing files that changed from the base of the PR and between e68d5ca4dc and 641b3ebcb7.

📒 Files selected for processing (1)

js/desktop/src/features/particles/task-particle-view.tsx

📝 Walkthrough

Walkthrough

TaskParticleView gains an optional immersive prop that, when true and the card is in editing mode, installs a capture-phase keydown handler (Escape exits focus; navigation keys are suppressed), renders a full-screen dim/blur overlay, elevates card styling, and shows a KeyHint. stream-view.tsx passes immersive to TaskParticleView.

Immersive Editing Mode

Layer / File(s)	Summary
`immersive` prop, `exitFocus`, and keydown interception `js/desktop/src/features/particles/task-particle-view.tsx`	Adds `immersive?: boolean` to `TaskParticleViewProps` (with JSDoc), imports `isTypingTarget` and `KeyHint`, destructures `immersive` defaulting to `false`, defines `exitFocus` (blurs active element), and installs/removes a capture-phase `keydown` handler when `immersive && editing`: Escape calls `exitFocus`; navigation keys are stopped unless the target is a typing field.
Overlay, KeyHint rendering, and stream-view wiring `js/desktop/src/features/particles/task-particle-view.tsx`, `js/desktop/src/features/particles/stream-view.tsx`	Conditionally renders a fixed full-screen dim/blur overlay (mousedown → `exitFocus`) and elevated card container styling during `immersive && editing`. Renders a fixed `KeyHint` for Esc. Passes `immersive` prop from stream-view to `TaskParticleView`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 A card glows bright in focus mode,
The screen dims down to ease the load.
Press Escape when thoughts are done,
The blur clears off — the edit's won!
Nav keys sleep while pencil flies,
Immersive mode — a rabbit's prize! ✨

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

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

[![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/flowy-live/llink/pull/300?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)   > [!WARNING] > ## Review limit reached > > `@talksik`, we couldn't start this review because you've reached your PR review rate limit. > > More reviews will be available in 13 minutes and 56 seconds. [Learn how PR review limits work](https://docs.coderabbit.ai/management/plans#fair-usage-limits-policy). > > To unlock additional reviews, enable usage-based billing in the [billing tab](https://app.coderabbit.ai/settings/billing?tab=usage&orgId=38db3cff-af1d-4bc7-962b-ccd4cc6661ac). > > <details> > <summary>⌛ How to resolve this issue?</summary> > > After more reviews become available, a review can be triggered using the `@coderabbitai review` command as a PR comment. Alternatively, push new commits to this PR. > > To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. > > </details> > > > <details> > <summary>🚦 How do rate limits work?</summary> > > CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. > > For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. > > Please see our [Fair Usage Limits Policy](https://docs.coderabbit.ai/management/plans#fair-usage-limits-policy) for further information. > > </details> > > <details> > <summary>ℹ️ Review info</summary> > > <details> > <summary>⚙️ Run configuration</summary> > > **Configuration used**: defaults > > **Review profile**: CHILL > > **Plan**: Free > > **Run ID**: `ea807035-6efc-4171-b06f-1c2c2602e1d3` > > </details> > > <details> > <summary>📥 Commits</summary> > > Reviewing files that changed from the base of the PR and between e68d5ca4dc4df2af65a57070747e8024ac95398a and 641b3ebcb7bc2505f681b0421354203f5d7c1286. > > </details> > > <details> > <summary>📒 Files selected for processing (1)</summary> > > * `js/desktop/src/features/particles/task-particle-view.tsx` > > </details> > > </details>   <details> <summary>📝 Walkthrough</summary> ## Walkthrough `TaskParticleView` gains an optional `immersive` prop that, when `true` and the card is in editing mode, installs a capture-phase keydown handler (Escape exits focus; navigation keys are suppressed), renders a full-screen dim/blur overlay, elevates card styling, and shows a `KeyHint`. `stream-view.tsx` passes `immersive` to `TaskParticleView`. **Immersive Editing Mode** |Layer / File(s)|Summary| |---|---| |**`immersive` prop, `exitFocus`, and keydown interception** <br> `js/desktop/src/features/particles/task-particle-view.tsx`|Adds `immersive?: boolean` to `TaskParticleViewProps` (with JSDoc), imports `isTypingTarget` and `KeyHint`, destructures `immersive` defaulting to `false`, defines `exitFocus` (blurs active element), and installs/removes a capture-phase `keydown` handler when `immersive && editing`: Escape calls `exitFocus`; navigation keys are stopped unless the target is a typing field.| |**Overlay, KeyHint rendering, and stream-view wiring** <br> `js/desktop/src/features/particles/task-particle-view.tsx`, `js/desktop/src/features/particles/stream-view.tsx`|Conditionally renders a fixed full-screen dim/blur overlay (mousedown → `exitFocus`) and elevated card container styling during `immersive && editing`. Renders a fixed `KeyHint` for Esc. Passes `immersive` prop from stream-view to `TaskParticleView`.| ## Estimated code review effort 🎯 2 (Simple) | ⏱️ ~10 minutes ## Poem > 🐇 A card glows bright in focus mode, > The screen dims down to ease the load. > Press Escape when thoughts are done, > The blur clears off — the edit's won! > Nav keys sleep while pencil flies, > Immersive mode — a rabbit's prize! ✨ </details>   --- > [!NOTE] > <details> > <summary>🎁 Summarized by CodeRabbit Free</summary> > > Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting <https://app.coderabbit.ai/login>. > > </details> <sub>Comment `@coderabbitai help` to get the list of available commands and usage tips.</sub>

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#300