From 00105e25f76c4cfbade414aa1f57192d0aa65562 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 15:07:11 +0200
Subject: [PATCH] fix(settings): add icon to notification-status-card heading
 for cross-section parity

Both heading variants (empty-state at line 126, header at line 139) now
follow the convention used by 21 other Settings sections: a Bell icon
(text-primary h-5 w-5) preceding the h2 in a flex container with
gap-2 items-center. Brings the only two violators in
src/components/settings/* into alignment with the icon-heading pattern
established in telegram-card.tsx, ntfy-card.tsx, web-push-card.tsx.
---
 .../settings/notification-status-card.tsx     | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/notification-status-card.tsx b/src/components/settings/notification-status-card.tsx
index 3090c57e7..38ef4a006 100644
--- a/src/components/settings/notification-status-card.tsx
+++ b/src/components/settings/notification-status-card.tsx
@@ -21,6 +21,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   AlertCircle,
+  Bell,
   CheckCircle2,
   Clock,
   Loader2,
@@ -123,9 +124,12 @@ export function NotificationStatusCard() {
         className="bg-card border-border rounded-xl border p-6"
         data-testid="notification-status-empty"
       >
-        <h2 className="text-lg font-semibold">
-          {t("settings.notificationStatus.title")}
-        </h2>
+        <div className="flex items-center gap-2">
+          <Bell className="text-primary h-5 w-5" />
+          <h2 className="text-lg font-semibold">
+            {t("settings.notificationStatus.title")}
+          </h2>
+        </div>
         <p className="text-muted-foreground mt-1 text-sm">
           {t("settings.notificationStatus.emptyDescription")}
         </p>
@@ -136,9 +140,12 @@ export function NotificationStatusCard() {
   return (
     <div className="bg-card border-border rounded-xl border p-6">
       <header className="mb-4">
-        <h2 className="text-lg font-semibold">
-          {t("settings.notificationStatus.title")}
-        </h2>
+        <div className="flex items-center gap-2">
+          <Bell className="text-primary h-5 w-5" />
+          <h2 className="text-lg font-semibold">
+            {t("settings.notificationStatus.title")}
+          </h2>
+        </div>
         <p className="text-muted-foreground text-xs">
           {t("settings.notificationStatus.description")}
         </p>