fix(notifications): moves mutedSources to errors.ts, adds aria attrs, fixes responsive width, caches matchMedia, clears state on logout

Author: wgordon17

src/app/components/layout/Header.tsx

@@ -108,9 +108,12 @@ export default function Header() {
 
         {/* Bell icon with unread badge */}
         <button
+          type="button"
           onClick={toggleDrawer}
           class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0 relative"
-          aria-label="Notifications"
+          aria-label={unreadCount() > 0 ? `Notifications, ${unreadCount()} unread` : "Notifications"}
+          aria-expanded={drawerOpen()}
+          aria-haspopup="dialog"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

src/app/components/shared/NotificationDrawer.tsx

@@ -4,9 +4,10 @@ import {
   markAllAsRead,
   clearNotifications,
   dismissError,
+  mutedSources,
 } from "../../lib/errors";
 import { relativeTime } from "../../lib/format";
-import { severityConfig, mutedSources } from "./ToastContainer";
+import { severityConfig } from "./ToastContainer";
 
 interface NotificationDrawerProps {
   open: boolean;
@@ -19,8 +20,8 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
   let closeTimeoutHandle: ReturnType<typeof setTimeout> | undefined;
   let closeButtonRef: HTMLButtonElement | undefined;
 
-  const animDelay = () =>
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const animDelay = reducedMotion ? 0 : 300;
 
   createEffect(() => {
     if (props.open) {
@@ -38,7 +39,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
         closeTimeoutHandle = setTimeout(() => {
           setVisible(false);
           closeTimeoutHandle = undefined;
-        }, animDelay());
+        }, animDelay);
       }
     }
   });

src/app/components/shared/ToastContainer.tsx

@@ -1,6 +1,7 @@
 import { createEffect, createSignal, For, onCleanup } from "solid-js";
 import {
   getNotifications,
+  mutedSources,
   type AppNotification,
   type NotificationSeverity,
 } from "../../lib/errors";
@@ -50,10 +51,6 @@ export function severityConfig(severity: NotificationSeverity): SeverityConfig {
   }
 }
 
-// Module-level muted sources — session only, resets on page reload
-// Populated by NotificationDrawer's "Dismiss all" action
-export const mutedSources = new Set<string>();
-
 interface ToastItem {
   notification: AppNotification;
   dismissing: boolean;
@@ -72,8 +69,8 @@ export default function ToastContainer() {
   const dismissingTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
   const COOLDOWN_MS = 60_000;
-  const animDelay = () =>
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const animDelay = reducedMotion ? 0 : 300;
 
   function removeToast(id: string) {
     setVisibleToasts((prev) => {
@@ -99,7 +96,7 @@ export default function ToastContainer() {
     const t = setTimeout(() => {
       dismissingTimeouts.delete(id);
       removeToast(id);
-    }, animDelay());
+    }, animDelay);
     dismissingTimeouts.set(id, t);
   }
 
@@ -178,7 +175,7 @@ export default function ToastContainer() {
   });
 
   return (
-    <div class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 w-96">
+    <div class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 w-[calc(100vw-2rem)] max-w-96" aria-live="assertive" aria-atomic="false">
       <For each={[...visibleToasts().values()]}>
         {(item) => {
           const cfg = severityConfig(item.notification.severity);

src/app/lib/errors.ts

@@ -95,10 +95,19 @@ export function getErrors(): AppNotification[] {
   return notifications();
 }
 
+// Muted sources — suppress toasts for these sources after "Dismiss all"
+// Session-only, reset on page reload and on logout (via resetNotificationState)
+export const mutedSources = new Set<string>();
+
 export function clearNotifications(): void {
   setNotifications([]);
 }
 
+export function resetNotificationState(): void {
+  setNotifications([]);
+  mutedSources.clear();
+}
+
 // Backward-compat alias
 export function clearErrors(): void {
   clearNotifications();

src/app/services/poll.ts

@@ -13,8 +13,7 @@ import {
   resetEmptyActionRepos,
 } from "./api";
 import { detectNewItems, dispatchNotifications, _resetNotificationState } from "../lib/notifications";
-import { pushError, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking, clearNotifications } from "../lib/errors";
-import { mutedSources } from "../components/shared/ToastContainer";
+import { pushError, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking, resetNotificationState } from "../lib/errors";
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -45,8 +44,7 @@ function resetPollState(): void {
   _notifGateDisabled = false;
   _resetNotificationState();
   resetEmptyActionRepos();
-  clearNotifications();
-  mutedSources.clear();
+  resetNotificationState();
 }
 
 // Auto-reset poll state on logout (avoids circular dep with auth.ts)

tests/components/DashboardPage.test.tsx

@@ -51,6 +51,7 @@ vi.mock("../../src/app/lib/errors", () => ({
   pushNotification: vi.fn(),
   clearErrors: vi.fn(),
   clearNotifications: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 // capturedFetchAll is populated by the createPollCoordinator mock each time

tests/components/layout/Header.test.tsx

@@ -45,6 +45,7 @@ vi.mock("../../../src/app/lib/errors", () => ({
   dismissNotificationBySource: vi.fn(),
   getErrors: vi.fn(() => []),
   clearErrors: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 import Header from "../../../src/app/components/layout/Header";

tests/components/shared/NotificationDrawer.test.tsx

@@ -5,9 +5,9 @@ import {
   pushNotification,
   clearNotifications,
   markAllAsRead,
+  mutedSources,
 } from "../../../src/app/lib/errors";
 import NotificationDrawer from "../../../src/app/components/shared/NotificationDrawer";
-import { mutedSources } from "../../../src/app/components/shared/ToastContainer";
 
 beforeEach(() => {
   clearNotifications();

tests/services/poll-fetchAllData.test.ts

@@ -49,6 +49,8 @@ vi.mock("../../src/app/lib/errors", () => ({
   dismissNotificationBySource: vi.fn(),
   startCycleTracking: vi.fn(),
   endCycleTracking: vi.fn(() => new Set()),
+  resetNotificationState: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 // ── Helpers ───────────────────────────────────────────────────────────────────

tests/services/poll.test.ts

@@ -18,6 +18,9 @@ vi.mock("../../src/app/lib/errors", () => ({
   startCycleTracking: () => mockStartCycleTracking(),
   endCycleTracking: () => mockEndCycleTracking(),
   pushNotification: vi.fn(),
+  clearNotifications: vi.fn(),
+  resetNotificationState: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 // Mock notifications so doFetch doesn't fail on detectNewItems