feat: Add selective blur filter on screen

[Vishal2002]

Description

Implements selective blur functionality for video input with proper coordinate system alignment between frontend UI and GPU shader.

Changes Made

• Frontend (TypeScript/SolidJS):

  • Added BlurOverlay.tsx for interactive blur rectangle manipulation
  • Added BlurTrack.tsx for timeline-based blur segment management
  • Implemented drag-and-drop resize handles for blur regions
  • Added real-time preview with backdrop-filter

• Backend (Rust/WGPU):

  • Created SelectiveBlurPipeline with proper GPU buffer management
  • Implemented SelectiveBlurLayer for render pass integration
  • Added Gaussian blur shader with optimized sampling
  • Fixed coordinate system mismatch between UI and shader

• Shader (WGSL):

  • Implemented full-screen triangle rendering technique
  • Added dynamic blur radius based on intensity settings
  • Fixed UV coordinate mapping to match frontend coordinate system
  • Optimized blur sampling to prevent boundary artifacts

Resolves #143

Summary by CodeRabbit

• New Features
  • Introduced timeline Blur segments and a dedicated Blur track.
  • Interactive Blur overlay in the preview for moving/resizing rectangular regions.
  • Config panel for selected Blur segment with intensity and area (X, Y, Width, Height) sliders and delete.
  • Create, select, drag, and resize multiple blur segments tied to timeline time.
  • Rendering now applies selective blur in active regions (real-time and exported video).
  • Added a Blur icon for UI.

[coderabbitai[bot]]

Walkthrough

Adds selective blur support end-to-end: new data types (Rect, BlurSegment), editor UI (timeline track, overlay, sidebar), project API updates, and a GPU-based selective blur rendering pass with WGSL shader and pipeline.

Changes

Cohort / File(s)	Summary
Data model: project config crates/project/src/configuration.rs	Adds Rect and BlurSegment types; adds blur_segments: Option<Vec<BlurSegment>> to TimelineConfiguration.
Desktop bridge/types apps/desktop/src/utils/tauri.ts	Exposes Rect, BlurSegment, and adds TimelineConfiguration.blurSegments; type-style/formatting tweaks.
Tauri recording config apps/desktop/src-tauri/src/recording.rs	Imports BlurSegment and initializes timeline.blur_segments = Some(Vec::new()) in project config conversion.
Editor: overlay & player apps/desktop/src/routes/editor/BlurOverlay.tsx, apps/desktop/src/routes/editor/Player.tsx	New BlurOverlay component renders interactive blur rectangles over the preview; Player mounts the overlay above the canvas.
Editor: timeline track apps/desktop/src/routes/editor/Timeline/BlurTrack.tsx, apps/desktop/src/routes/editor/Timeline/index.tsx	New BlurTrack for creating/selecting/moving/resizing blur segments; timeline state extended with blurSegments and drag state integrated.
Editor: context/actions apps/desktop/src/routes/editor/context.ts	Adds deleteBlurSegment action and extends EditorState.timeline.selection union with { type: "blur"; index: number }.
Editor: config sidebar apps/desktop/src/routes/editor/ConfigSidebar.tsx	Adds BlurSegmentConfig UI with sliders for intensity and rect, plus delete/done actions; wired into selection flow.
Renderer: layer and pipeline crates/rendering/src/layers/selective_blur.rs, crates/rendering/src/selective_blur_pipeline.rs, crates/rendering/src/shaders/blur.wgsl, crates/rendering/src/layers/mod.rs, crates/rendering/src/lib.rs	Adds selective blur WGSL shader, pipeline, and SelectiveBlurLayer; integrates conditional two-pass blur into renderer and updates render signatures.
Misc formatting crates/rendering/src/frame_pipeline.rs	Minor whitespace/formatting change.
UI icon typings packages/ui-solid/src/auto-imports.d.ts	Adds global IconCapBlur and reformatting of global icon declarations.

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant Timeline as BlurTrack
  participant Context as EditorContext
  participant Sidebar as ConfigSidebar
  participant Overlay as BlurOverlay

  User->>Timeline: click/add/drag/resize segment
  Timeline->>Context: update project.timeline.blurSegments
  Timeline->>Context: set selection {type:"blur", index}
  User->>Sidebar: adjust blur amount / rect sliders
  Sidebar->>Context: setProject(...blurSegments[index]...)
  Context-->>Overlay: reactive project/editorState change
  Overlay->>Overlay: compute active segments for current time
  Overlay-->>User: render/update blur rectangles on preview

sequenceDiagram
  participant App
  participant Renderer as RendererLayers
  participant Layer as SelectiveBlurLayer
  participant GPU as WGPU

  App->>Renderer: render(device, encoder, session, uniforms, current_time)
  Renderer->>Renderer: draw main pass to current texture
  Renderer->>Renderer: active_blur_segments = check(uniforms.timeline, current_time)
  alt active_blur_segments exist
    Renderer->>Layer: render(pass, device, current_texture_view, uniforms, current_time)
    Layer->>GPU: bind texture, sampler, blur segments buffer
    Layer->>GPU: set pipeline and draw fullscreen triangle
    Renderer->>Renderer: swap textures
  else no segments
    Renderer-->>App: skip blur pass
  end
  Renderer-->>App: present

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Assessment against linked issues

Objective	Addressed	Explanation
UI to select a portion of the screen to blur [#143]	✅
Option to increase the blur amount [#143]	✅

Assessment against linked issues: Out-of-scope changes

Code Change	Explanation
Add IconCapBlur global (packages/ui-solid/src/auto-imports.d.ts)	Icon typing/auto-import addition not required by #143; auxiliary asset typing.
Type/style refactor in tauri types (apps/desktop/src/utils/tauri.ts)	Formatting and event-type shape tweaks are type-system/style changes unrelated to the blur-picker UI requirement.

Suggested reviewers

• Brendonovich

Poem

I drew a hush upon the screen—so sleek!
With twitching nose, I blur what’s bleak.
A hop, a drag, a slider’s gleam,
Soft clouds drift over secrets unseen.
Pixels sigh, “At last, we’re sure!” 🐇✨

[!TIP]

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.