feat: Add smooth animated opacity transition for Focus Mode

[bhavyasanthoshi02]

Description

This PR replaces the instant snap opacity transition in Focus Mode with a smooth, animated opacity transition. It also extends the settings store and UI to support a user-configurable transition duration.

Changes

• Settings Store (settingsStore.js): Added transitionDuration (default 1.5 seconds, bounded between 0.1 and 10.0 seconds) to focusMode schema and sanitation logic.
• Dynamic Transition (renderer.js): Modified the Focus Mode opacity IPC handler to apply a CSS transition (canvas.style.transition = 'opacity <duration>s ease') before updating the opacity value.
• Settings UI (settings.html, settings.js):
  • Added a new Focus Mode configuration group under the System Tweaks tab.
  • Added a checkbox to toggle Focus Mode, along with range sliders for Dimmed Opacity, Idle Timeout, and Fade Duration.
  • Enabled real-time synchronization of these settings between the UI, store, and renderer.

Please review the pr and send the required changes which are to be done
Thank you
Closes #271

Summary by CodeRabbit

• New Features
  • Expanded the Settings “Focus Mode” section with adjustable Dimmed Opacity, Idle Timeout, and Fade Duration.
  • Fade Duration is now configurable and displayed in seconds, with Dimmed Opacity shown as a percentage.
• Bug Fixes
  • Focus Mode canvas fades now use the selected Fade Duration for smooth transitions, falling back to a safe default when values are missing or invalid.
  • Improved Focus Mode value validation to clamp settings within allowed ranges.
• Tests
  • Added coverage to ensure Focus Mode sanitization clamps both dim opacity, idle timeout, and fade duration correctly.

[vercel]

@bhavyasanthoshi02 is attempting to deploy a commit to the Dot_NotSam's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Review limit reached

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

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

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ 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 review availability.

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, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 88bead7b-bf11-4dfa-b726-e469db7f8b3f

📥 Commits

Reviewing files that changed from the base of the PR and between 3946ff0 and fd5ea79.

📒 Files selected for processing (4)

• settings.html
• settings.js
• settingsStore.js
• test/settingsStore.test.js

📝 Walkthrough

Walkthrough

Adds a transitionDuration field to Focus Mode settings, exposes it in the settings UI, keeps it synchronized in settings state, and applies it as an opacity transition on the canvas.

Changes

Focus Mode Fade Duration

Layer / File(s)	Summary
focusMode schema: transitionDuration default and validation settingsStore.js, test/settingsStore.test.js	DEFAULT_SETTINGS.focusMode gains transitionDuration: 1.5, sanitizeFocusMode clamps it to 0.1–10, and tests cover clamping for dimOpacity, idleTimeout, and transitionDuration.
Settings UI: toggle and sliders settings.html	Updates the Focus Mode section copy, renames the enable checkbox, and replaces the tuning container with the new dim opacity, idle timeout, and fade duration controls.
Settings JS: binding, initial load, and onChange sync settings.js	Wires the renamed controls, converts dim opacity between percent and stored decimal form, formats timeout values in seconds, and syncs transitionDuration during initial load and live updates.
Canvas CSS transition renderer.js	Reads visualizerState.focusMode.transitionDuration with a 1.5 fallback and applies it as the canvas opacity transition before setting opacity.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• SamXop123/Paraline#97: Modifies the same window.visualizerSettings.onFocusModeOpacity flow in renderer.js and the focusMode settings shape.
• SamXop123/Paraline#189: Updates Focus Mode UI wiring in settings.html and settings.js using the same settings update path.

Poem

🐇 I twitched my nose and watched it glide,
A gentle fade, not a sudden slide.
One point five seconds, soft and neat,
With settings tuned, the calm feels sweet.
No snap, no jolt — just hush and hue,
A cozy blur from me to you.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a smooth Focus Mode opacity transition.
Linked Issues check	✅ Passed	The PR implements the requested smooth Focus Mode fade and exposes an optional duration setting.
Out of Scope Changes check	✅ Passed	The added UI, settings schema, and renderer changes all support the Focus Mode transition request.

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

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@settings.html`:
- Around line 556-557: The Focus Mode switch markup is left open, causing the
DOM to spill into later sections. Update the Focus Mode block around the
focus-mode-checkbox markup and its related container elements so every newly
opened label/div is properly closed before the next section begins, and verify
the same structure in the later duplicated Focus Mode block referenced by the
comment.
- Around line 548-557: Move all Focus Mode controls into a single dedicated
Focus Mode section and remove the older duplicate block so the page only renders
one UI for this feature. Update the related markup around the Focus Mode
toggle/sliders and delete the legacy Focus Mode section later in the file,
ensuring `id="val-focus-mode-dim-opacity"` appears only once. Keep the
`focus-mode-checkbox` and the Focus Mode range/value elements together so the
`getElementById(...)` logic in `settings.js` targets a single set of controls.

In `@settings.js`:
- Around line 289-293: The later toggleFocusModeControls helper is shadowing the
earlier one, so the focus mode settings container visibility logic is never
reached. Rename this helper in settings.js and update the relevant call sites so
the version that controls focusModeSettingsContainer is the one being invoked,
keeping the two focus mode behaviors distinct.

In `@settingsStore.js`:
- Around line 582-584: The transitionDuration sanitization currently falls back
to DEFAULT_SETTINGS.focusMode.transitionDuration for any out-of-range input,
which turns values outside the 0.1–10 contract into 1.5 instead of the nearest
bound. Update the logic around transitionDuration in settingsStore.js to first
verify the input is finite and then clamp it to the 0.1–10 range, so values
below the minimum become 0.1 and values above the maximum become 10 rather than
resetting to the default.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ad713f02-8ef6-4142-acf0-2c164af130cc

📥 Commits

Reviewing files that changed from the base of the PR and between 662881d and 3946ff0.

📒 Files selected for processing (4)

• renderer.js
• settings.html
• settings.js
• settingsStore.js

[SamXop123]

@bhavyasanthoshi02 pls fix the coderabbit review comments

[bhavyasanthoshi02]

Resolved. Removed the duplicate Focus Mode controls, cleaned up the shadowed selectors in settings.js, and implemented out-of-range value clamping with test coverage in settingsStore.js.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
paraline	Ready	Preview, Comment	Jun 28, 2026 10:08am

[SamXop123]

Great! Thank you for the contribution @bhavyasanthoshi02

[github-actions]

🎉 Congratulations @bhavyasanthoshi02! 🎉

Your pull request has been successfully merged into Paraline! Thank you so much for your valuable contribution and effort. Every single improvement helps make Paraline a better desktop experience for everyone! 🙌

🚀 What's Next?

• Keep the momentum going! Feel free to browse through our open Issues and grab another one that interests you!
• Support the Project: If you enjoyed contributing to Paraline, please take a second to star our repository! It helps increase the project's visibility and supports our community. ⭐

💬 Stay Connected:
Have any questions, want feedback, or just want to discuss further contributions? Feel free to reach out directly to the maintainer on Discord: dot_notsam!

Thank you again, and keep up the amazing work! 💻✨