feat(desktop): add fade-edge mask utilities

[Kitenite]

Summary

Adds composable .fade-edge-{t,r,b,l} utility classes that fade out one or more edges of an element via a linear-gradient mask. Useful for indicating scroll affordance on horizontally / vertically overflowing containers.

• Combine sides freely: class=\"fade-edge-r fade-edge-b\" fades both edges.
• Override fade size per element with [--fade-edge-size:2rem].
• Lives in apps/desktop/src/renderer/styles/fade-edge.css and is imported once from globals.css. The file header documents the promotion path: when a second consumer outside apps/desktop needs it, move to packages/ui/src/styles/fade-edge.css and update imports.

No consumers in this PR — a follow-up PR (the v2 sidebar ports work) is the first consumer.

Test plan

• App builds and styles compile
• Apply class=\"fade-edge-r\" to a horizontally scrolling element and verify the right edge fades out
• Apply combined sides (e.g. fade-edge-r fade-edge-b) and verify both fade

---

Summary by cubic

Adds composable edge-fade utilities .fade-edge-{t,r,b,l} that use a linear-gradient mask to fade edges and hint overflow scrolling. Included once in the desktop renderer via globals.css; first consumer will follow.

• New Features
  • Combine sides (e.g., fade-edge-r fade-edge-b).
  • Override fade size with --fade-edge-size (default 1.5rem).
  • Lives in apps/desktop/src/renderer/styles/fade-edge.css, imported from apps/desktop/src/renderer/globals.css (promote to packages/ui when shared).

^{Written for commit 84934a2. Summary will update on new commits.}

Summary by CodeRabbit

• New Features
  • Added edge-fade utility classes to create adjustable fade effects on element edges (top, right, bottom, left) with a configurable fade distance.
  • Global styles now include the new fade-edge utilities so they’re available across the desktop renderer.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 25c5c087-3190-4ea6-87c5-8d3a0320f42e

📥 Commits

Reviewing files that changed from the base of the PR and between 0cc4646 and 84934a2.

📒 Files selected for processing (1)

• apps/desktop/src/renderer/styles/fade-edge.css

---

📝 Walkthrough

Walkthrough

A new CSS utility file providing edge-fade masks was added and imported into the global stylesheet. It defines four composable classes (.fade-edge-t/.fade-edge-r/.fade-edge-b/.fade-edge-l) that apply directional mask gradients configurable via CSS custom properties.

Changes

Cohort / File(s)	Summary
CSS Edge Fade Utilities apps/desktop/src/renderer/globals.css, apps/desktop/src/renderer/styles/fade-edge.css	Added fade-edge.css defining .fade-edge-t, .fade-edge-r, .fade-edge-b, .fade-edge-l utilities using mask-image/-webkit-mask-image with configurable --fade-edge-size. Imported the new stylesheet from the global CSS.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 I nibble at corners, soft and light,

I blend the edges out of sight,
A gentle mask on top and side,
Four little fades where secrets hide,
Hop—new styles make the UI bright!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(desktop): add fade-edge mask utilities' clearly and accurately summarizes the main change: introducing new CSS utility classes for fading element edges.
Description check	✅ Passed	The pull request description is comprehensive and well-structured, covering summary, implementation details, test plan, and promotion path. It exceeds the template requirements with clear, practical information.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/fade-edge-utility

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/desktop/src/renderer/styles/fade-edge.css`:
- Line 23: Add a blank line immediately before the mask-image declaration to
satisfy the Stylelint rule declaration-empty-line-before; locate the mask-image
property in fade-edge.css (the mask-image: declaration) and insert a single
empty line above it so the declaration is separated from the previous block or
comment.

🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: f9c359fd-2210-41c0-b6df-0545c1b0ba1d

📥 Commits

Reviewing files that changed from the base of the PR and between c272a51 and 0cc4646.

📒 Files selected for processing (2)

• apps/desktop/src/renderer/globals.css
• apps/desktop/src/renderer/styles/fade-edge.css

[greptile-apps]

Greptile Summary

Adds composable .fade-edge-{t,r,b,l} CSS utility classes that mask-fade one or more edges of an element using a two-gradient intersection approach, plus the single import line wiring it into globals.css. The implementation is clean and the gradient math is correct — when a size variable is 0px the corresponding gradient collapses to a fully-opaque mask, so unused axes have no visual effect on the intersection.

Confidence Score: 5/5

Safe to merge — CSS-only addition with no consumers yet; no runtime risk.

All findings are P2 or lower. The gradient math is correct for every combination of the four classes, the mask-composite: intersect / -webkit-mask-composite: source-in pairing is appropriate for Electron/Chromium, and the @layer utilities placement ensures Tailwind's JIT-generated arbitrary overrides (e.g. [--fade-edge-size:2rem]) cascade after the defaults.

No files require special attention.

Important Files Changed

Filename	Overview
apps/desktop/src/renderer/styles/fade-edge.css	New utility file adding composable .fade-edge-{t,r,b,l} CSS mask classes using two-gradient intersection technique; logic is correct for single and combined edges
apps/desktop/src/renderer/globals.css	Adds a single @import "./styles/fade-edge.css" line; import placement is correct (after Tailwind imports, within the utilities layer cascade order)

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Element with fade-edge-* class"] --> B["Shared rule sets defaults\n--fade-edge-size: 1.5rem\nAll four size vars reset to 0px\nmask-image with 2 gradients\nmask-composite: intersect"]
    B --> D["fade-edge-t sets --fade-edge-t-size"]
    B --> E["fade-edge-r sets --fade-edge-r-size"]
    B --> F["fade-edge-b sets --fade-edge-b-size"]
    B --> G["fade-edge-l sets --fade-edge-l-size"]
    D --> H["Vertical gradient\ntransparent to black at t-size\nblack to transparent at 100%-b-size"]
    E --> I["Horizontal gradient\ntransparent to black at l-size\nblack to transparent at 100%-r-size"]
    F --> H
    G --> I
    H --> J["mask-composite intersect\nPixels opaque in BOTH gradients only"]
    I --> J
    J --> K["Final faded edges rendered"]

Loading

_{Reviews (1): Last reviewed commit: "feat(desktop): add fade-edge mask utilit..." | Re-trigger Greptile}

[cubic-dev-ai]

No issues found across 2 files

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ⚠️ Neon database branch

Thank you for your contribution! 🎉