From 1955fc87ee98af91e564c0719136aa637ce01bba Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 05:05:59 +0200
Subject: [PATCH] =?UTF-8?q?refactor(glass):=20R10=20S3a=20=E2=80=94=20glas?=
 =?UTF-8?q?s-card=20notification=20rows=20+=20perf-aware=20.overlay-backdr?=
 =?UTF-8?q?op?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- NotificationsPanel per-row .glass -> glass-card (the rows are cards, not panel surface).
- New .overlay-backdrop recipe (4px blur = backdrop-blur-xs) with a data-perf override that
  DROPS the blur. The viewport-sized modal scrim blur (Modal/PlayerModal/Welcome) was a raw
  backdrop-blur-xs utility that survived perf mode while every .glass had its blur dropped —
  the most expensive blur in the app. Overlays keep their bg-black/NN.
- gotcha: write ONLY the standard backdrop-filter; a manual -webkit- line makes lightningcss
  drop the standard prop (webkit-only output -> no blur in Firefox).
---
 frontend/src/components/Modal.tsx              |  2 +-
 frontend/src/components/NotificationsPanel.tsx |  4 ++--
 frontend/src/components/PlayerModal.tsx        |  2 +-
 frontend/src/components/Welcome.tsx            |  2 +-
 frontend/src/index.css                         | 11 +++++++++++
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 41c5e768..041230a3 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -56,7 +56,7 @@ export default function Modal({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/70 backdrop-blur-xs"
+      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/70 overlay-backdrop"
       onMouseDown={(e) => {
         pressedOnBackdrop.current = e.target === e.currentTarget;
       }}
diff --git a/frontend/src/components/NotificationsPanel.tsx b/frontend/src/components/NotificationsPanel.tsx
index 7a731249..aad9cd7d 100644
--- a/frontend/src/components/NotificationsPanel.tsx
+++ b/frontend/src/components/NotificationsPanel.tsx
@@ -255,7 +255,7 @@ function NotificationRow({
   }
   return (
     <div
-      className={`glass rounded-xl p-3.5 flex items-start gap-3 transition ${
+      className={`glass-card rounded-xl p-3.5 flex items-start gap-3 transition ${
         n.read ? "opacity-70" : ""
       }`}
     >
@@ -340,7 +340,7 @@ function ClientActivityRow({
   const access = n.meta?.kind === "access-requests" ? n.meta : null;
   return (
     <div
-      className={`glass rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
+      className={`glass-card rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
     >
       <Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
       <div className="min-w-0 flex-1">
diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index 36259808..bb403baf 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -889,7 +889,7 @@ export default function PlayerModal({
     <div
       ref={dialogRef}
       data-testid="player-modal"
-      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs"
+      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/80 overlay-backdrop"
       onClick={onClose}
       role="dialog"
       aria-modal="true"
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index 11f20618..1a0057fd 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -258,7 +258,7 @@ function Lightbox({ src, label, onClose }: { src: string; label: string; onClose
   }, [onClose]);
   return (
     <div
-      className="fixed inset-0 z-popover grid place-items-center bg-black/80 backdrop-blur-xs p-4 sm:p-8"
+      className="fixed inset-0 z-popover grid place-items-center bg-black/80 overlay-backdrop p-4 sm:p-8"
       onClick={onClose}
       role="dialog"
       aria-modal="true"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0b0d04d9..c19ab2cf 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -479,6 +479,17 @@ html[data-perf="1"] body {
   background: var(--bg);
 }
 
+/* Full-viewport modal scrim blur, as a named recipe so perf mode can DROP it. This is the most
+   expensive blur in the app (viewport-sized); as a raw `backdrop-blur-xs` utility on each overlay
+   it survived data-perf while every .glass surface had its blur dropped. Overlays keep their own
+   bg-black/NN; this adds only the (perf-aware) 4px blur, matching backdrop-blur-xs. */
+.overlay-backdrop {
+  backdrop-filter: blur(4px);
+}
+html[data-perf="1"] .overlay-backdrop {
+  backdrop-filter: none;
+}
+
 /* Skip layout/paint for off-screen feed cards so long lists stay smooth while
    scrolling. contain-intrinsic-size reserves an approximate box so the scrollbar
    stays stable; `auto` lets the browser remember each card's real size after it