feat(FN-2880): refactor notification provider cards in settings

- Replace notifications UI with reusable provider cards for ntfy and webhook settings
- Add event option metadata rendering and provider-specific test notification actions
- Align notification card gutters with existing settings layout and mobile behavior
- Expand SettingsModal and mobile tests to cover provider card visibility and interactions

packages/dashboard/app/components/SettingsModal.css

@@ -751,6 +751,42 @@
   border-radius: var(--radius-sm);
 }
 
+/**
+ * Notification provider cards:
+ * reusable container pattern for per-provider notification configuration
+ * (ntfy, webhook, and future providers).
+ */
+.notification-provider-card {
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  margin: 0 var(--space-xl) var(--space-lg);
+  overflow: hidden;
+}
+
+.notification-provider-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: var(--btn-border-width) solid var(--border);
+}
+
+.notification-provider-body {
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.notification-provider-actions {
+  display: flex;
+  gap: var(--space-sm);
+  padding-top: var(--space-md);
+  border-top: var(--btn-border-width) solid var(--border);
+  margin-top: var(--space-md);
+}
+
 /* === Memory Settings === */
 .memory-status-message {
   display: flex;
@@ -1185,6 +1221,18 @@
     display: none;
   }
 
+  .notification-provider-card {
+    margin: 0 var(--space-lg) var(--space-md);
+  }
+
+  .notification-provider-header {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .notification-provider-body {
+    padding: var(--space-md);
+  }
+
   .settings-scope-icon {
     margin-right: 0;
   }
@@ -1522,32 +1570,3 @@
 .settings-node-status--connecting .settings-node-status__dot {
   background: var(--color-warning);
 }
-
-.settings-node-status {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xs);
-  margin-top: var(--space-sm);
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.settings-node-status__dot {
-  width: var(--space-sm);
-  height: var(--space-sm);
-  border-radius: var(--radius-pill);
-  background: var(--color-muted);
-}
-
-.settings-node-status--online .settings-node-status__dot {
-  background: var(--color-success);
-}
-
-.settings-node-status--offline .settings-node-status__dot,
-.settings-node-status--error .settings-node-status__dot {
-  background: var(--color-error);
-}
-
-.settings-node-status--connecting .settings-node-status__dot {
-  background: var(--color-warning);
-}