fix(notifications): addresses PR review findings

- wraps mutedSources in createSignal for proper SolidJS reactivity
- swaps markAllAsRead/setDrawerOpen order so unread highlights render
- removes dead errors prop from tab components and DashboardStore
- adds type="button" to all notification drawer and toast buttons
- adds createMemo for sorted notifications, classList consistency
- adds 8 new tests: muting, pruning, aria-expanded, reset, cycling

Author: wgordon17

src/app/components/dashboard/ActionsTab.tsx

@@ -1,6 +1,6 @@
 import { createMemo, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
-import type { WorkflowRun, ApiError } from "../../services/api";
+import type { WorkflowRun } from "../../services/api";
 import { config } from "../../stores/config";
 import { viewState, setViewState, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, type ActionsFilterField } from "../../stores/view";
 import WorkflowRunRow from "./WorkflowRunRow";
@@ -13,7 +13,6 @@ import ChevronIcon from "../shared/ChevronIcon";
 interface ActionsTabProps {
   workflowRuns: WorkflowRun[];
   loading?: boolean;
-  errors?: ApiError[];
 }
 
 interface WorkflowGroup {
@@ -201,7 +200,7 @@ export default function ActionsTab(props: ActionsTabProps) {
       {/* Empty */}
       <Show
         when={
-          !props.loading && (!props.errors || props.errors.length === 0) && repoGroups().length === 0
+          !props.loading && repoGroups().length === 0
         }
       >
         <div class="p-8 text-center text-gray-500 dark:text-gray-400">

src/app/components/dashboard/DashboardPage.tsx

@@ -8,7 +8,7 @@ import IssuesTab from "./IssuesTab";
 import PullRequestsTab from "./PullRequestsTab";
 import { config } from "../../stores/config";
 import { viewState, updateViewState } from "../../stores/view";
-import type { Issue, PullRequest, WorkflowRun, ApiError } from "../../services/api";
+import type { Issue, PullRequest, WorkflowRun } from "../../services/api";
 import { createPollCoordinator, fetchAllData, type DashboardData } from "../../services/poll";
 import { clearAuth, user, onAuthCleared, DASHBOARD_STORAGE_KEY } from "../../stores/auth";
 
@@ -20,7 +20,6 @@ interface DashboardStore {
   issues: Issue[];
   pullRequests: PullRequest[];
   workflowRuns: WorkflowRun[];
-  errors: ApiError[];
   loading: boolean;
   lastRefreshedAt: Date | null;
 }
@@ -29,7 +28,6 @@ const initialDashboardState: DashboardStore = {
   issues: [],
   pullRequests: [],
   workflowRuns: [],
-  errors: [],
   loading: true,
   lastRefreshedAt: null,
 };
@@ -49,7 +47,6 @@ function loadCachedDashboard(): DashboardStore {
       issues: parsed.issues as Issue[],
       pullRequests: parsed.pullRequests as PullRequest[],
       workflowRuns: parsed.workflowRuns as WorkflowRun[],
-      errors: [],
       loading: false,
       lastRefreshedAt: typeof parsed.lastRefreshedAt === "string" ? new Date(parsed.lastRefreshedAt) : null,
     };
@@ -91,7 +88,6 @@ async function pollFetch(): Promise<DashboardData> {
         issues: data.issues,
         pullRequests: data.pullRequests,
         workflowRuns: data.workflowRuns,
-        errors: data.errors,
         loading: false,
         lastRefreshedAt: now,
       });
@@ -195,23 +191,20 @@ export default function DashboardPage() {
               <IssuesTab
                 issues={dashboardData.issues}
                 loading={dashboardData.loading}
-                errors={dashboardData.errors}
                 userLogin={userLogin()}
               />
             </Match>
             <Match when={activeTab() === "pullRequests"}>
               <PullRequestsTab
                 pullRequests={dashboardData.pullRequests}
                 loading={dashboardData.loading}
-                errors={dashboardData.errors}
                 userLogin={userLogin()}
               />
             </Match>
             <Match when={activeTab() === "actions"}>
               <ActionsTab
                 workflowRuns={dashboardData.workflowRuns}
                 loading={dashboardData.loading}
-                errors={dashboardData.errors}
               />
             </Match>
           </Switch>

src/app/components/dashboard/IssuesTab.tsx

@@ -2,7 +2,7 @@ import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 import { config } from "../../stores/config";
 import { viewState, setSortPreference, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, type IssueFilterField } from "../../stores/view";
-import type { Issue, ApiError } from "../../services/api";
+import type { Issue } from "../../services/api";
 import ItemRow from "./ItemRow";
 import IgnoreBadge from "./IgnoreBadge";
 import SortIcon from "../shared/SortIcon";
@@ -18,7 +18,6 @@ import { groupByRepo, computePageLayout, slicePageGroups } from "../../lib/group
 export interface IssuesTabProps {
   issues: Issue[];
   loading?: boolean;
-  errors?: ApiError[];
   userLogin: string;
 }
 

src/app/components/dashboard/PullRequestsTab.tsx

@@ -2,7 +2,7 @@ import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 import { config } from "../../stores/config";
 import { viewState, setSortPreference, ignoreItem, unignoreItem, setTabFilter, resetTabFilter, resetAllTabFilters, type PullRequestFilterField } from "../../stores/view";
-import type { PullRequest, ApiError } from "../../services/api";
+import type { PullRequest } from "../../services/api";
 import { deriveInvolvementRoles, prSizeCategory } from "../../lib/format";
 import ItemRow from "./ItemRow";
 import StatusDot from "../shared/StatusDot";
@@ -21,7 +21,6 @@ import { groupByRepo, computePageLayout, slicePageGroups } from "../../lib/group
 export interface PullRequestsTabProps {
   pullRequests: PullRequest[];
   loading?: boolean;
-  errors?: ApiError[];
   userLogin: string;
 }
 

src/app/components/layout/Header.tsx

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, Show } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { user, clearAuth } from "../../stores/auth";
 import { getCoreRateLimit, getSearchRateLimit } from "../../services/github";
@@ -15,16 +15,16 @@ export default function Header() {
     navigate("/login");
   }
 
-  function toggleDrawer() {
+  function handleBellClick() {
     if (!drawerOpen()) {
-      markAllAsRead();
       setDrawerOpen(true);
+      markAllAsRead();
     } else {
       setDrawerOpen(false);
     }
   }
 
-  const unreadCount = createMemo(() => getUnreadCount());
+  const unreadCount = () => getUnreadCount();
 
   const coreRL = () => getCoreRateLimit();
   const searchRL = () => getSearchRateLimit();
@@ -109,7 +109,7 @@ export default function Header() {
         {/* Bell icon with unread badge */}
         <button
           type="button"
-          onClick={toggleDrawer}
+          onClick={handleBellClick}
           class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0 relative"
           aria-label={unreadCount() > 0 ? `Notifications, ${unreadCount()} unread` : "Notifications"}
           aria-expanded={drawerOpen()}

src/app/components/shared/NotificationDrawer.tsx

@@ -1,10 +1,10 @@
-import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
 import {
   getNotifications,
   markAllAsRead,
   clearNotifications,
   dismissError,
-  mutedSources,
+  addMutedSource,
 } from "../../lib/errors";
 import { relativeTime } from "../../lib/format";
 import { severityConfig } from "./ToastContainer";
@@ -58,9 +58,11 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
     onCleanup(() => document.removeEventListener("keydown", handler));
   });
 
+  const sortedNotifications = createMemo(() => getNotifications().slice().reverse());
+
   function handleDismissAll() {
     const current = getNotifications();
-    for (const n of current) mutedSources.add(n.source);
+    for (const n of current) addMutedSource(n.source);
     clearNotifications();
   }
 
@@ -94,18 +96,21 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
               Notifications
             </h2>
             <button
+              type="button"
               onClick={markAllAsRead}
               class="text-sm text-blue-500 hover:text-blue-700 dark:hover:text-blue-300"
             >
               Mark all as read
             </button>
             <button
+              type="button"
               onClick={handleDismissAll}
               class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
             >
               Dismiss all
             </button>
             <button
+              type="button"
               ref={closeButtonRef}
               onClick={props.onClose}
               aria-label="Close notifications"
@@ -124,15 +129,15 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
           {/* Notification list */}
           <div class="flex-1 overflow-y-auto">
             <Show
-              when={getNotifications().length > 0}
+              when={sortedNotifications().length > 0}
               fallback={
                 <div class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
                   No notifications
                 </div>
               }
             >
               <ul>
-                <For each={getNotifications().slice().reverse()}>
+                <For each={sortedNotifications()}>
                   {(notif) => {
                     const cfg = severityConfig(notif.severity);
                     return (
@@ -168,6 +173,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
                           </p>
                         </div>
                         <button
+                          type="button"
                           onClick={() => dismissError(notif.id)}
                           aria-label="Dismiss notification"
                           class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 mt-0.5"

src/app/components/shared/ToastContainer.tsx

@@ -1,12 +1,10 @@
 import { createEffect, createSignal, For, onCleanup } from "solid-js";
 import {
   getNotifications,
-  mutedSources,
+  isMuted,
   type AppNotification,
   type NotificationSeverity,
 } from "../../lib/errors";
-
-// Severity configuration — shared with NotificationDrawer (imported there after C4)
 export interface SeverityConfig {
   path: string;
   secondaryPath?: string;
@@ -134,7 +132,7 @@ export default function ToastContainer() {
       // Check suppression conditions
       const lastToasted = lastToastedAt.get(notif.source);
       const inCooldown = lastToasted !== undefined && Date.now() - lastToasted < COOLDOWN_MS;
-      const muted = mutedSources.has(notif.source);
+      const muted = isMuted(notif.source);
 
       if (inCooldown || muted) continue;
 
@@ -182,7 +180,11 @@ export default function ToastContainer() {
           return (
             <div
               role="alert"
-              class={`flex items-start gap-3 rounded-lg border p-3 shadow-lg ${cfg.bgClass} ${cfg.textClass} ${cfg.borderColorClass} ${item.dismissing ? "animate-toast-out" : "animate-toast-in"}`}
+              class={`flex items-start gap-3 rounded-lg border p-3 shadow-lg ${cfg.bgClass} ${cfg.textClass} ${cfg.borderColorClass}`}
+              classList={{
+                "animate-toast-in": !item.dismissing,
+                "animate-toast-out": item.dismissing,
+              }}
             >
               <svg
                 class={`h-5 w-5 shrink-0 ${cfg.iconClass}`}
@@ -202,6 +204,7 @@ export default function ToastContainer() {
                 )}
               </span>
               <button
+                type="button"
                 onClick={() => dismissToast(item.notification.id)}
                 class="shrink-0 opacity-60 hover:opacity-100 transition-opacity"
                 aria-label="Dismiss notification"

src/app/lib/errors.ts

@@ -97,15 +97,27 @@ export function getErrors(): AppNotification[] {
 
 // 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>();
+const [_mutedSources, _setMutedSources] = createSignal(new Set<string>());
+
+export function addMutedSource(source: string): void {
+  _setMutedSources((prev) => new Set([...prev, source]));
+}
+
+export function isMuted(source: string): boolean {
+  return _mutedSources().has(source);
+}
+
+export function clearMutedSources(): void {
+  _setMutedSources(new Set<string>());
+}
 
 export function clearNotifications(): void {
   setNotifications([]);
 }
 
 export function resetNotificationState(): void {
   setNotifications([]);
-  mutedSources.clear();
+  clearMutedSources();
 }
 
 // Backward-compat alias

src/app/services/poll.ts

@@ -240,7 +240,6 @@ export function createPollCoordinator(
   let hiddenAt: number | null = null;
   let destroyed = false;
 
-
   async function doFetch(): Promise<void> {
     if (destroyed || isRefreshing()) return;
     setIsRefreshing(true);

tests/components/DashboardPage.test.tsx

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