perf: add indexed notification summaries and widget

src/govoplan_notifications/backend/db/models.py

@@ -19,6 +19,14 @@ class NotificationMessage(Base, TimestampMixin):
     __table_args__ = (
         Index("ix_notification_messages_tenant_status", "tenant_id", "status"),
         Index("ix_notification_messages_tenant_recipient", "tenant_id", "recipient_type", "recipient_id"),
+        Index(
+            "ix_notification_messages_summary",
+            "tenant_id",
+            "recipient_id",
+            "deleted_at",
+            "status",
+            "read_at",
+        ),
         Index("ix_notification_messages_source", "tenant_id", "source_module", "source_resource_type", "source_resource_id"),
         Index("ix_notification_messages_due", "tenant_id", "status", "not_before_at"),
     )

src/govoplan_notifications/backend/manifest.py

@@ -4,8 +4,18 @@ from pathlib import Path
 
 from govoplan_core.core.access import CAPABILITY_AUTH_PERMISSION_EVALUATOR, CAPABILITY_AUTH_PRINCIPAL_RESOLVER
 from govoplan_core.core.module_guards import drop_table_retirement_provider, persistent_table_uninstall_guard
-from govoplan_core.core.modules import MigrationSpec, ModuleContext, ModuleInterfaceProvider, ModuleManifest, PermissionDefinition, RoleTemplate
+from govoplan_core.core.modules import (
+    FrontendModule,
+    FrontendRoute,
+    MigrationSpec,
+    ModuleContext,
+    ModuleInterfaceProvider,
+    ModuleManifest,
+    PermissionDefinition,
+    RoleTemplate,
+)
 from govoplan_core.core.notifications import CAPABILITY_NOTIFICATIONS_DISPATCH
+from govoplan_core.core.views import ViewSurface
 from govoplan_core.db.base import Base
 from govoplan_notifications.backend.db import models as notification_models  # noqa: F401 - populate Notifications ORM metadata
 
@@ -82,6 +92,34 @@ manifest = ModuleManifest(
     role_templates=ROLE_TEMPLATES,
     route_factory=_notifications_router,
     tenant_summary_providers=(_tenant_summary,),
+    frontend=FrontendModule(
+        module_id=MODULE_ID,
+        package_name="@govoplan/notifications-webui",
+        routes=(
+            FrontendRoute(
+                path="/notifications",
+                component="NotificationCenterPage",
+                required_any=(READ_SCOPE,),
+                order=59,
+            ),
+        ),
+        view_surfaces=(
+            ViewSurface(
+                id="notifications.widget.summary",
+                module_id=MODULE_ID,
+                kind="section",
+                label="Notification summary widget",
+                order=30,
+            ),
+            ViewSurface(
+                id="notifications.settings.preferences",
+                module_id=MODULE_ID,
+                kind="section",
+                label="Notification preferences",
+                order=40,
+            ),
+        ),
+    ),
     migration_spec=MigrationSpec(
         module_id=MODULE_ID,
         metadata=Base.metadata,

src/govoplan_notifications/backend/migrations/versions/7a8b9c0d1e2f_v020_notification_summary_index.py

@@ -0,0 +1,29 @@
+"""Add notification summary covering index.
+
+Revision ID: 7a8b9c0d1e2f
+Revises: 6f7a8b9c0d1e
+"""
+
+from alembic import op
+
+
+revision = "7a8b9c0d1e2f"
+down_revision = "6f7a8b9c0d1e"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_index(
+        "ix_notification_messages_summary",
+        "notification_messages",
+        ["tenant_id", "recipient_id", "deleted_at", "status", "read_at"],
+        unique=False,
+    )
+
+
+def downgrade() -> None:
+    op.drop_index(
+        "ix_notification_messages_summary",
+        table_name="notification_messages",
+    )

src/govoplan_notifications/backend/service.py

@@ -6,7 +6,7 @@ from email.message import EmailMessage
 from pathlib import Path
 from typing import Any
 
-from sqlalchemy import event, or_
+from sqlalchemy import and_, case, event, func, or_
 from sqlalchemy.orm import Session
 
 from govoplan_core.core.notifications import NotificationDispatchRequest
@@ -200,21 +200,75 @@ def notification_summary(
     user_id: str | None = None,
     recipient_ids: tuple[str, ...] | None = None,
 ) -> dict[str, int | bool]:
-    base_query = session.query(NotificationMessage).filter(
+    filters = [
         NotificationMessage.tenant_id == tenant_id,
         NotificationMessage.deleted_at.is_(None),
-    )
+    ]
     if recipient_ids is not None:
-        base_query = base_query.filter(NotificationMessage.recipient_id.in_(recipient_ids))
+        filters.append(NotificationMessage.recipient_id.in_(recipient_ids))
-    active_query = base_query.filter(NotificationMessage.status.notin_(["cancelled", "skipped"]))
+    active = NotificationMessage.status.notin_(["cancelled", "skipped"])
+    total, unread, pending, failed = (
+        session.query(
+            func.count(NotificationMessage.id),
+            func.coalesce(
+                func.sum(
+                    case(
+                        (
+                            and_(
+                                active,
+                                NotificationMessage.read_at.is_(None),
+                            ),
+                            1,
+                        ),
+                        else_=0,
+                    )
+                ),
+                0,
+            ),
+            func.coalesce(
+                func.sum(
+                    case(
+                        (
+                            and_(
+                                active,
+                                NotificationMessage.status.in_(
+                                    sorted(PENDING_STATUSES)
+                                ),
+                            ),
+                            1,
+                        ),
+                        else_=0,
+                    )
+                ),
+                0,
+            ),
+            func.coalesce(
+                func.sum(
+                    case(
+                        (
+                            and_(
+                                active,
+                                NotificationMessage.status == "failed",
+                            ),
+                            1,
+                        ),
+                        else_=0,
+                    )
+                ),
+                0,
+            ),
+        )
+        .filter(*filters)
+        .one()
+    )
     show_unread_badge = True
     if user_id:
         show_unread_badge = get_notification_preferences(session, tenant_id=tenant_id, user_id=user_id).show_unread_badge
     return {
-        "total": base_query.count(),
+        "total": int(total or 0),
-        "unread": active_query.filter(NotificationMessage.read_at.is_(None)).count(),
+        "unread": int(unread or 0),
-        "pending": active_query.filter(NotificationMessage.status.in_(sorted(PENDING_STATUSES))).count(),
+        "pending": int(pending or 0),
-        "failed": active_query.filter(NotificationMessage.status == "failed").count(),
+        "failed": int(failed or 0),
         "show_unread_badge": show_unread_badge,
     }
 

webui/package.json

@@ -14,14 +14,15 @@
     "./styles/notifications.css": "./src/styles/notifications.css"
   },
   "scripts": {
-    "test:action-url": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.tests.json && node .component-test-build/tests/action-url.test.js"
+    "test:action-url": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.tests.json && node .component-test-build/tests/action-url.test.js",
+    "test:ui-structure": "node scripts/test-notification-page-structure.mjs"
   },
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.1",
+    "react-router-dom": ">=7.18.2 <8",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",
     "vite": "^6.0.6"

webui/scripts/test-notification-page-structure.mjs

@@ -0,0 +1,18 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+const pagePath = fileURLToPath(new URL("../src/features/notifications/NotificationCenterPage.tsx", import.meta.url));
+const stylesPath = fileURLToPath(new URL("../src/styles/notifications.css", import.meta.url));
+const page = readFileSync(pagePath, "utf8");
+const styles = readFileSync(stylesPath, "utf8");
+
+assert.match(page, /SelectionList,[\s\S]*SelectionListItem,[\s\S]*from "@govoplan\/core-webui"/);
+assert.match(page, /<SelectionList label="Notifications" className="notifications-selection-list">/);
+assert.match(page, /<SelectionListItem[\s\S]*selected=\{selected\?\.id === notification\.id\}/);
+assert.match(page, /className=\{`notifications-list-item \$\{notification\.read_at \? "is-read" : ""\}`\}/);
+assert.doesNotMatch(page, /<button[\s\S]{0,160}notifications-list-item/);
+assert.doesNotMatch(styles, /\.notifications-list-item:(?:hover|focus-visible)/);
+assert.doesNotMatch(styles, /\.notifications-list-item\.is-selected/);
+
+console.log("Notification rows use the central selection-list contract.");

webui/src/features/notifications/NotificationCenterPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
-import { Button, DismissibleAlert, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
+import { AdminIconButton, Button, DismissibleAlert, SegmentedControl, SelectionList, SelectionListItem, StatusBadge, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
 import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
 import { safeNotificationActionUrl } from "../../security/actionUrl";
 
@@ -99,37 +99,40 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
               <strong>Notifications</strong>
               {unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
             </div>
-            <Button className="notifications-icon-button" onClick={() => void load()} title="Refresh" disabled={loading || busy}>
+            <AdminIconButton label="Refresh" icon={<RefreshCw size={16} aria-hidden="true" />} onClick={() => void load()} disabled={loading || busy} />
-              <RefreshCw size={16} />
-            </Button>
-          </div>
-          <div className="notifications-filter-row" role="tablist" aria-label="Notification status">
-            {statusFilters.map((status) => (
-              <button key={status} className={status === statusFilter ? "is-active" : ""} type="button" onClick={() => setStatusFilter(status)} role="tab" aria-selected={status === statusFilter}>
-                {status}
-              </button>
-            ))}
           </div>
+          <SegmentedControl
+            className="notifications-status-filter"
+            options={statusFilters.map((status) => ({ id: status, label: status }))}
+            value={statusFilter}
+            onChange={setStatusFilter}
+            ariaLabel="Notification status"
+            width="fill"
+          />
           <div className="notifications-list">
             {loading ? <div className="notifications-note">Loading notifications</div> : null}
             {!loading && notifications.length === 0 ? <div className="notifications-note">No notifications in this view.</div> : null}
-            {notifications.map((notification) => (
+            {notifications.length > 0 ? (
-              <button
+              <SelectionList label="Notifications" className="notifications-selection-list">
-                key={notification.id}
+                {notifications.map((notification) => (
-                type="button"
+                  <SelectionListItem
-                className={`notifications-list-item ${selected?.id === notification.id ? "is-selected" : ""} ${notification.read_at ? "is-read" : ""}`}
+                    key={notification.id}
-                onClick={() => setSelectedId(notification.id)}
+                    selected={selected?.id === notification.id}
-              >
+                    className={`notifications-list-item ${notification.read_at ? "is-read" : ""}`}
-                <span className="notifications-list-heading">
+                    onClick={() => setSelectedId(notification.id)}
-                  <strong>{notification.subject || notification.event_kind}</strong>
+                  >
-                  <small>{formatStatus(notification.status)}</small>
+                    <span className="notifications-list-heading">
-                </span>
+                      <strong>{notification.subject || notification.event_kind}</strong>
-                <span className="notifications-list-meta">
+                      <small>{formatStatus(notification.status)}</small>
-                  <span>{notification.source_module}</span>
+                    </span>
-                  <span>{formatDate(notification.created_at)}</span>
+                    <span className="notifications-list-meta">
-                </span>
+                      <span>{notification.source_module}</span>
-              </button>
+                      <span>{formatDate(notification.created_at)}</span>
-            ))}
+                    </span>
+                  </SelectionListItem>
+                ))}
+              </SelectionList>
+            ) : null}
           </div>
         </aside>
         <section className="notifications-workspace">
@@ -177,7 +180,7 @@ function NotificationDetails({ notification }: { notification: NotificationMessa
     <div className="notifications-detail">
       <section className="notifications-message">
         <div className="notifications-message-meta">
-          <span className={`notifications-status status-${notification.status}`}>{formatStatus(notification.status)}</span>
+          <StatusBadge status={notification.status} label={formatStatus(notification.status)} />
           <span>{notification.channel}</span>
           <span>{formatDate(notification.created_at)}</span>
         </div>

webui/src/features/notifications/NotificationSettingsPanel.tsx

@@ -1,20 +1,41 @@
 import { useEffect, useMemo, useState } from "react";
 import { Mail, Save } from "lucide-react";
-import { Button, Card, DismissibleAlert, FormField, ToggleSwitch, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
+import {
+  Button,
+  Card,
+  DismissibleAlert,
+  FormField,
+  ReferenceMultiSelect,
+  ToggleSwitch,
+  isViewSurfaceVisible,
+  moduleViewSurfaceId,
+  platformModuleReferenceProvider,
+  useEffectiveView,
+  usePlatformLanguage,
+  usePlatformModules,
+  useViewSurfaces,
+  type ApiSettings,
+  type AuthInfo,
+  type ReferenceOption
+} from "@govoplan/core-webui";
 import { getNotificationPreferences, updateNotificationPreferences, type NotificationPreferences } from "../../api/notifications";
 
 type Draft = Pick<NotificationPreferences, "show_unread_badge" | "email_enabled" | "email_digest_enabled"> & {
-  muted_source_modules_text: string;
+  muted_source_modules: string[];
 };
 
 const DEFAULT_DRAFT: Draft = {
   show_unread_badge: true,
   email_enabled: false,
   email_digest_enabled: false,
-  muted_source_modules_text: ""
+  muted_source_modules: []
 };
 
 export default function NotificationSettingsPanel({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
+  const modules = usePlatformModules();
+  const effectiveView = useEffectiveView();
+  const viewSurfaces = useViewSurfaces();
+  const { translateText } = usePlatformLanguage();
   const [loaded, setLoaded] = useState<NotificationPreferences | null>(null);
   const [draft, setDraft] = useState<Draft>(DEFAULT_DRAFT);
   const [loading, setLoading] = useState(true);
@@ -28,9 +49,40 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
       draft.show_unread_badge !== loaded.show_unread_badge ||
       draft.email_enabled !== loaded.email_enabled ||
       draft.email_digest_enabled !== loaded.email_digest_enabled ||
-      normalizeMutedModules(draft.muted_source_modules_text).join(",") !== loaded.muted_source_modules.join(",")
+      draft.muted_source_modules.join(",") !== loaded.muted_source_modules.join(",")
     );
   }, [draft, loaded]);
+  const moduleOptions = useMemo<ReferenceOption[]>(
+    () => modules.map((module) => {
+      const visible = isViewSurfaceVisible(
+        effectiveView,
+        moduleViewSurfaceId(module.id),
+        viewSurfaces
+      );
+      return {
+        value: module.id,
+        label: translateText(module.label),
+        description: [
+          module.id,
+          `version ${module.version}`,
+          visible ? null : "Hidden by the active view"
+        ].filter(Boolean).join(" · "),
+        kind: "module",
+        availability: visible ? "available" : "unavailable",
+        disabled: !visible,
+        sourceModule: "core",
+        provenance: {
+          version: module.version,
+          visibleInActiveView: visible
+        }
+      };
+    }),
+    [effectiveView, modules, translateText, viewSurfaces]
+  );
+  const moduleProvider = useMemo(
+    () => platformModuleReferenceProvider(settings, moduleOptions),
+    [moduleOptions, settings]
+  );
 
   useEffect(() => {
     void loadPreferences();
@@ -46,7 +98,7 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
         show_unread_badge: preferences.show_unread_badge,
         email_enabled: preferences.email_enabled,
         email_digest_enabled: preferences.email_digest_enabled,
-        muted_source_modules_text: preferences.muted_source_modules.join(", ")
+        muted_source_modules: preferences.muted_source_modules
       });
     } catch (error) {
       setMessageTone("warning");
@@ -64,14 +116,14 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
         show_unread_badge: draft.show_unread_badge,
         email_enabled: draft.email_enabled,
         email_digest_enabled: draft.email_digest_enabled,
-        muted_source_modules: normalizeMutedModules(draft.muted_source_modules_text)
+        muted_source_modules: draft.muted_source_modules
       });
       setLoaded(next);
       setDraft({
         show_unread_badge: next.show_unread_badge,
         email_enabled: next.email_enabled,
         email_digest_enabled: next.email_digest_enabled,
-        muted_source_modules_text: next.muted_source_modules.join(", ")
+        muted_source_modules: next.muted_source_modules
       });
       window.dispatchEvent(new CustomEvent("govoplan:notifications-changed"));
       setMessageTone("success");
@@ -95,11 +147,16 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
             disabled={loading}
             onChange={(value) => setDraft((current) => ({ ...current, show_unread_badge: value }))}
           />
-          <FormField label="Muted source modules" help="Comma-separated module IDs. Filtering will be applied by later delivery rules.">
+          <FormField label="Muted source modules" help="Choose active modules. Saved modules hidden by the current view remain visible here and are not discarded.">
-            <input
+            <ReferenceMultiSelect
-              value={draft.muted_source_modules_text}
+              values={draft.muted_source_modules}
-              onChange={(event) => setDraft((current) => ({ ...current, muted_source_modules_text: event.target.value }))}
+              onChange={(muted_source_modules) =>
-              placeholder="calendar, campaign"
+                setDraft((current) => ({ ...current, muted_source_modules }))
+              }
+              provider={moduleProvider}
+              aria-label="Muted source modules"
+              placeholder="Add a source module"
+              emptyText="No visible modules match."
               disabled={loading}
             />
           </FormField>
@@ -136,15 +193,3 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
     </div>
   );
 }
-
-function normalizeMutedModules(value: string): string[] {
-  const seen = new Set<string>();
-  return value
-    .split(",")
-    .map((item) => item.trim().toLowerCase())
-    .filter((item) => {
-      if (!item || seen.has(item)) return false;
-      seen.add(item);
-      return true;
-    });
-}

webui/src/features/notifications/NotificationSummaryWidget.tsx

@@ -0,0 +1,73 @@
+import { Link } from "react-router-dom";
+import {
+  DismissibleAlert,
+  LoadingFrame,
+  MetricCard,
+  adminErrorMessage,
+  type ApiSettings,
+  type DashboardWidgetConfiguration,
+  useSharedNotificationSummary
+} from "@govoplan/core-webui";
+
+export default function NotificationSummaryWidget({
+  settings,
+  refreshKey,
+  configuration,
+  showCenterLink
+}: {
+  settings: ApiSettings;
+  refreshKey: number;
+  configuration: DashboardWidgetConfiguration;
+  showCenterLink: boolean;
+}) {
+  const showDeliveryState = configuration.showDeliveryState !== false;
+  const state = useSharedNotificationSummary(settings, {
+    enabled: true,
+    scopeKey: "current-session",
+    intervalMs: 30_000,
+    refreshKey
+  });
+  const summary = state.summary;
+  const error = state.error ? adminErrorMessage(state.error) : "";
+
+  return (
+    <LoadingFrame loading={state.loading} label="Loading notification summary">
+      {error && (
+        <DismissibleAlert tone="warning" resetKey={error}>
+          {error}
+        </DismissibleAlert>
+      )}
+      <div className="metric-grid inside dashboard-widget-metrics">
+        <MetricCard
+          label="Unread"
+          value={summary?.unread ?? 0}
+          tone={summary?.unread ? "info" : "good"}
+          detail={`${summary?.total ?? 0} total`}
+        />
+        {showDeliveryState && (
+          <MetricCard
+            label="Pending"
+            value={summary?.pending ?? 0}
+            tone={summary?.pending ? "warning" : "good"}
+            detail="Awaiting delivery"
+          />
+        )}
+        {showDeliveryState && (
+          <MetricCard
+            label="Failed"
+            value={summary?.failed ?? 0}
+            tone={summary?.failed ? "danger" : "good"}
+            detail="Delivery failures"
+          />
+        )}
+      </div>
+      {showCenterLink && (
+        <div className="notifications-widget-actions">
+          <Link className="btn btn-secondary" to="/notifications">
+            Open notification center
+          </Link>
+        </div>
+      )}
+    </LoadingFrame>
+  );
+}

webui/src/module.ts

@@ -1,5 +1,10 @@
 import { createElement, lazy } from "react";
-import type { PlatformWebModule, SettingsSectionsUiCapability } from "@govoplan/core-webui";
+import type {
+  DashboardWidgetsUiCapability,
+  PlatformWebModule,
+  SettingsSectionsUiCapability
+} from "@govoplan/core-webui";
+import NotificationSummaryWidget from "./features/notifications/NotificationSummaryWidget";
 import { generatedTranslations } from "./i18n/generatedTranslations";
 import "./styles/notifications.css";
 
@@ -8,10 +13,52 @@ const NotificationSettingsPanel = lazy(() => import("./features/notifications/No
 
 const notificationRead = ["notifications:notification:read"];
 
+const notificationDashboardWidgets: DashboardWidgetsUiCapability = {
+  widgets: [
+    {
+      id: "notifications.summary",
+      surfaceId: "notifications.widget.summary",
+      title: "Notifications",
+      description: "Unread notifications and delivery state.",
+      moduleId: "notifications",
+      category: "Communication",
+      order: 60,
+      defaultSize: "medium",
+      supportedSizes: ["medium", "wide"],
+      anyOf: notificationRead,
+      refreshIntervalMs: 30_000,
+      defaultConfiguration: {
+        showDeliveryState: true
+      },
+      configurationFields: [
+        {
+          id: "showDeliveryState",
+          label: "Show delivery state",
+          description: "Include pending and failed delivery counts.",
+          kind: "boolean"
+        }
+      ],
+      render: ({ settings, effectiveView, refreshKey, configuration }) =>
+        createElement(NotificationSummaryWidget, {
+          settings,
+          refreshKey,
+          configuration,
+          showCenterLink: (
+            !effectiveView?.activeViewId
+            || effectiveView.visibleSurfaceIds.includes(
+              "notifications.route.notifications"
+            )
+          )
+        })
+    }
+  ]
+};
+
 const notificationSettingsSections: SettingsSectionsUiCapability = {
   sections: [
     {
       id: "notifications",
+      surfaceId: "notifications.settings.preferences",
       label: "Notifications",
       group: "ui",
       order: 40,
@@ -28,11 +75,28 @@ export const notificationsModule: PlatformWebModule = {
   dependencies: [],
   optionalDependencies: ["mail", "tasks", "portal", "workflow", "calendar", "scheduling"],
   translations: generatedTranslations,
+  viewSurfaces: [
+    {
+      id: "notifications.widget.summary",
+      moduleId: "notifications",
+      kind: "section",
+      label: "Notification summary widget",
+      order: 30
+    },
+    {
+      id: "notifications.settings.preferences",
+      moduleId: "notifications",
+      kind: "section",
+      label: "Notification preferences",
+      order: 40
+    }
+  ],
   routes: [
     { path: "/notifications", anyOf: notificationRead, order: 59, render: ({ settings, auth }) => createElement(NotificationCenterPage, { settings, auth }) }
   ],
   uiCapabilities: {
-    "settings.sections": notificationSettingsSections
+    "settings.sections": notificationSettingsSections,
+    "dashboard.widgets": notificationDashboardWidgets
   }
 };
 

webui/src/styles/notifications.css

@@ -13,6 +13,12 @@
   box-sizing: border-box;
 }
 
+.notifications-widget-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
 .notifications-shell {
   height: 100%;
   min-height: 0;
@@ -65,40 +71,9 @@
   font-weight: 800;
 }
 
-.notifications-icon-button.btn {
+.notifications-status-filter {
-  width: 34px;
+  width: calc(100% - 16px);
-  min-width: 34px;
+  margin: 8px;
-  height: 34px;
-  justify-content: center;
-  padding: 0;
-}
-
-.notifications-filter-row {
-  display: flex;
-  gap: 5px;
-  padding: 8px;
-  border-bottom: var(--border-line);
-  overflow-x: auto;
-}
-
-.notifications-filter-row button {
-  min-height: 28px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  padding: 0 8px;
-  text-transform: capitalize;
-}
-
-.notifications-filter-row button:hover,
-.notifications-filter-row button.is-active {
-  background: var(--sidebar-hover-bg);
-  color: var(--text-strong);
 }
 
 .notifications-list {
@@ -110,27 +85,14 @@
   padding: 8px;
 }
 
+.notifications-selection-list {
+  gap: 4px;
+}
+
 .notifications-list-item {
-  width: 100%;
   display: grid;
   gap: 4px;
   min-height: 58px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-  padding: 9px;
-  text-align: left;
-}
-
-.notifications-list-item:hover,
-.notifications-list-item.is-selected {
-  background: var(--sidebar-hover-bg);
-}
-
-.notifications-list-item.is-selected {
-  box-shadow: inset 3px 0 var(--accent);
 }
 
 .notifications-list-item.is-read {
@@ -230,29 +192,6 @@
   font-weight: 700;
 }
 
-.notifications-status {
-  border-radius: 999px;
-  background: var(--panel-soft);
-  color: var(--text);
-  padding: 3px 8px;
-}
-
-.notifications-status.status-failed {
-  background: var(--danger-soft);
-  color: var(--danger-text);
-}
-
-.notifications-status.status-sent {
-  background: var(--success-soft);
-  color: var(--green);
-}
-
-.notifications-status.status-queued,
-.notifications-status.status-pending {
-  background: var(--warning-bg);
-  color: var(--warning-text);
-}
-
 .notifications-action-link {
   width: max-content;
   max-width: 100%;