Address remaining QA suggestions S-02 through S-06

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>
This commit is contained in:
Kyle 2026-03-12 18:35:44 +08:00
parent 6e0a848c45
commit 2770a9e88e
3 changed files with 9 additions and 2 deletions

View File

@ -495,7 +495,7 @@ export default function CalendarPage() {
<div ref={calendarContainerRef} className="flex-1 flex flex-col overflow-hidden"> <div ref={calendarContainerRef} className="flex-1 flex flex-col overflow-hidden">
{/* Custom toolbar */} {/* 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)}> <Button variant="ghost" size="icon" className="h-8 w-8 lg:hidden" onClick={() => setMobileSidebarOpen(true)}>
<PanelLeft className="h-4 w-4" /> <PanelLeft className="h-4 w-4" />
</Button> </Button>

View File

@ -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' }, 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 { function getMinutesUntilTomorrowMorning(): number {
const now = new Date(); const now = new Date();
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 9, 0, 0); const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 9, 0, 0);

View File

@ -8,6 +8,9 @@
* Also renders a noise texture for tactile depth and a radial vignette * Also renders a noise texture for tactile depth and a radial vignette
* to darken edges and draw focus to center content. * 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() { export default function AppAmbientBackground() {
return ( return (
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true"> <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" className="absolute animate-drift-1"
style={{ style={{
inset: '-100px', inset: '-100px',
willChange: 'transform',
background: 'radial-gradient(ellipse 90% 70% at 30% 20%, hsl(var(--accent-color) / 0.45) 0%, transparent 60%)', 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" className="absolute animate-drift-2"
style={{ style={{
inset: '-100px', inset: '-100px',
willChange: 'transform',
background: 'radial-gradient(ellipse 80% 60% at 75% 75%, hsl(var(--accent-color) / 0.35) 0%, transparent 60%)', 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 <div
className="absolute inset-0 opacity-[0.035]" className="absolute inset-0 opacity-[0.035]"
style={{ 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', backgroundRepeat: 'repeat',
backgroundSize: '256px 256px', backgroundSize: '256px 256px',
}} }}