From 0cc464662de6dba4ffa7930e75869b3e95ec38e2 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sat, 25 Apr 2026 12:52:31 -0700
Subject: [PATCH 1/2] feat(desktop): add fade-edge mask utilities

Add 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 horizontal/vertical scroll affordance.

Lives in `apps/desktop/src/renderer/styles/fade-edge.css` (single
import in `globals.css`) so the file can be promoted to `packages/ui`
once a second consumer needs it.
---
 apps/desktop/src/renderer/globals.css         |  1 +
 .../desktop/src/renderer/styles/fade-edge.css | 69 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 apps/desktop/src/renderer/styles/fade-edge.css

diff --git a/apps/desktop/src/renderer/globals.css b/apps/desktop/src/renderer/globals.css
index bdea523634a..cc96debd1f0 100644
--- a/apps/desktop/src/renderer/globals.css
+++ b/apps/desktop/src/renderer/globals.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "streamdown/styles.css";
+@import "./styles/fade-edge.css";
 
 @source "./**/*.{ts,tsx}";
 @source "../../../../packages/ui/src/**/*.{ts,tsx}";
diff --git a/apps/desktop/src/renderer/styles/fade-edge.css b/apps/desktop/src/renderer/styles/fade-edge.css
new file mode 100644
index 00000000000..bc1b732b88f
--- /dev/null
+++ b/apps/desktop/src/renderer/styles/fade-edge.css
@@ -0,0 +1,69 @@
+/**
+ * Edge-fade mask utilities.
+ *
+ * Fades out one or more edges of an element via a linear-gradient mask.
+ * Composable: `class="fade-edge-r fade-edge-b"` fades both edges.
+ * Override the fade size per element with `[--fade-edge-size:2rem]`.
+ *
+ * NOTE: This is a generic, app-agnostic utility. When a second consumer
+ * outside `apps/desktop` needs it, promote this file to
+ * `packages/ui/src/styles/fade-edge.css` and update consumers' imports.
+ */
+
+@layer utilities {
+	.fade-edge-t,
+	.fade-edge-r,
+	.fade-edge-b,
+	.fade-edge-l {
+		--fade-edge-size: 1.5rem;
+		--fade-edge-t-size: 0px;
+		--fade-edge-r-size: 0px;
+		--fade-edge-b-size: 0px;
+		--fade-edge-l-size: 0px;
+		mask-image:
+			linear-gradient(
+				to bottom,
+				transparent,
+				black var(--fade-edge-t-size),
+				black calc(100% - var(--fade-edge-b-size)),
+				transparent
+			),
+			linear-gradient(
+				to right,
+				transparent,
+				black var(--fade-edge-l-size),
+				black calc(100% - var(--fade-edge-r-size)),
+				transparent
+			);
+		-webkit-mask-image:
+			linear-gradient(
+				to bottom,
+				transparent,
+				black var(--fade-edge-t-size),
+				black calc(100% - var(--fade-edge-b-size)),
+				transparent
+			),
+			linear-gradient(
+				to right,
+				transparent,
+				black var(--fade-edge-l-size),
+				black calc(100% - var(--fade-edge-r-size)),
+				transparent
+			);
+		mask-composite: intersect;
+		-webkit-mask-composite: source-in;
+	}
+
+	.fade-edge-t {
+		--fade-edge-t-size: var(--fade-edge-size);
+	}
+	.fade-edge-r {
+		--fade-edge-r-size: var(--fade-edge-size);
+	}
+	.fade-edge-b {
+		--fade-edge-b-size: var(--fade-edge-size);
+	}
+	.fade-edge-l {
+		--fade-edge-l-size: var(--fade-edge-size);
+	}
+}

From 84934a233c4beb089aae5909cab03eba8b502e54 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sat, 25 Apr 2026 13:11:19 -0700
Subject: [PATCH 2/2] style: blank line before mask-image declaration

---
 apps/desktop/src/renderer/styles/fade-edge.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/desktop/src/renderer/styles/fade-edge.css b/apps/desktop/src/renderer/styles/fade-edge.css
index bc1b732b88f..801718a17d8 100644
--- a/apps/desktop/src/renderer/styles/fade-edge.css
+++ b/apps/desktop/src/renderer/styles/fade-edge.css
@@ -20,6 +20,7 @@
 		--fade-edge-r-size: 0px;
 		--fade-edge-b-size: 0px;
 		--fade-edge-l-size: 0px;
+
 		mask-image:
 			linear-gradient(
 				to bottom,