From 2770a9e88e5ae5210d5092cdaa2c1650f47a231e Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 18:35:44 +0800
Subject: [PATCH] Address remaining QA suggestions S-02 through S-06
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

S-02: Confirmed drift-3 is used by auth/AmbientBackground — not dead code.
S-03: Extracted noise SVG data URI to module-level NOISE_SVG constant.
S-04: Added will-change: transform to drift orbs for GPU layer promotion.
S-05: Documented the 9 AM snooze default in getMinutesUntilTomorrowMorning.
S-06: Made calendar toolbar bg-card/95 with backdrop-blur-md for better
      readability over the transparent FullCalendar grid.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/calendar/CalendarPage.tsx       | 2 +-
 frontend/src/components/dashboard/UpcomingWidget.tsx    | 2 ++
 frontend/src/components/layout/AppAmbientBackground.tsx | 7 ++++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index 9f0b6e5..6dd9449 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -495,7 +495,7 @@ export default function CalendarPage() {
 
       <div ref={calendarContainerRef} className="flex-1 flex flex-col overflow-hidden">
         {/* Custom toolbar */}
-        <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
+        <div className="border-b bg-card/95 backdrop-blur-md px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
           <Button variant="ghost" size="icon" className="h-8 w-8 lg:hidden" onClick={() => setMobileSidebarOpen(true)}>
             <PanelLeft className="h-4 w-4" />
           </Button>
diff --git a/frontend/src/components/dashboard/UpcomingWidget.tsx b/frontend/src/components/dashboard/UpcomingWidget.tsx
index 5450f89..10fd13f 100644
--- a/frontend/src/components/dashboard/UpcomingWidget.tsx
+++ b/frontend/src/components/dashboard/UpcomingWidget.tsx
@@ -30,6 +30,8 @@ const typeConfig: Record<string, { hoverGlow: string; pillBg: string; pillText:
   reminder: { hoverGlow: 'hover:bg-orange-500/[0.08]', pillBg: 'bg-orange-500/15', pillText: 'text-orange-400', label: 'REMINDER' },
 };
 
+// Snooze "Tomorrow" targets 9 AM — a reasonable default morning time.
+// Could be made configurable via user settings in the future.
 function getMinutesUntilTomorrowMorning(): number {
   const now = new Date();
   const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 9, 0, 0);
diff --git a/frontend/src/components/layout/AppAmbientBackground.tsx b/frontend/src/components/layout/AppAmbientBackground.tsx
index e6d5715..67cf421 100644
--- a/frontend/src/components/layout/AppAmbientBackground.tsx
+++ b/frontend/src/components/layout/AppAmbientBackground.tsx
@@ -8,6 +8,9 @@
  * Also renders a noise texture for tactile depth and a radial vignette
  * to darken edges and draw focus to center content.
  */
+
+const NOISE_SVG = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
+
 export default function AppAmbientBackground() {
   return (
     <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
@@ -16,6 +19,7 @@ export default function AppAmbientBackground() {
         className="absolute animate-drift-1"
         style={{
           inset: '-100px',
+          willChange: 'transform',
           background: 'radial-gradient(ellipse 90% 70% at 30% 20%, hsl(var(--accent-color) / 0.45) 0%, transparent 60%)',
         }}
       />
@@ -23,6 +27,7 @@ export default function AppAmbientBackground() {
         className="absolute animate-drift-2"
         style={{
           inset: '-100px',
+          willChange: 'transform',
           background: 'radial-gradient(ellipse 80% 60% at 75% 75%, hsl(var(--accent-color) / 0.35) 0%, transparent 60%)',
         }}
       />
@@ -30,7 +35,7 @@ export default function AppAmbientBackground() {
       <div
         className="absolute inset-0 opacity-[0.035]"
         style={{
-          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+          backgroundImage: NOISE_SVG,
           backgroundRepeat: 'repeat',
           backgroundSize: '256px 256px',
         }}