Update alert status icons and add status badges to list views

src/ui/app/components/alert/status-badge.tsx

@@ -2,7 +2,7 @@ import { Badge } from "@/components/ui/badge";
 import type { AlertTriggerStatus, ReminderTriggerStatus } from "@/lib/entities";
 import { cn } from "@/lib/utils";
 import type { ClassValue } from "clsx";
-import { AlertCircleIcon, CheckCircleIcon, EyeOffIcon } from "lucide-react";
+import { BanIcon, BellIcon, CheckCircleIcon } from "lucide-react";
 
 type StatusTag = "untriggered" | "hit" | "ignored";
 
@@ -15,13 +15,13 @@ const statusConfig = {
   },
   hit: {
     label: "Triggered",
-    icon: AlertCircleIcon,
+    icon: BellIcon,
     className:
       "text-red-600 dark:text-red-400 border-red-600/50 dark:border-red-400/50 bg-red-500/10",
   },
   ignored: {
     label: "Ignored",
-    icon: EyeOffIcon,
+    icon: BanIcon,
     className:
       "text-muted-foreground border-muted-foreground/50 bg-muted-foreground/10",
   },
@@ -32,7 +32,7 @@ const reminderStatusConfig = {
   ...statusConfig,
   hit: {
     label: "Triggered",
-    icon: AlertCircleIcon,
+    icon: BellIcon,
     className:
       "text-amber-600 dark:text-amber-400 border-amber-600/50 dark:border-amber-400/50 bg-amber-500/10",
   },
@@ -46,21 +46,27 @@ export interface StatusBadgeProps {
   className?: ClassValue;
   /** Show icon */
   showIcon?: boolean;
+  /** Show label */
+  showLabel?: boolean;
 }
 
 export function StatusBadge({
   status,
   variant = "alert",
   className,
   showIcon = true,
+  showLabel = true,
 }: StatusBadgeProps) {
   const config = variant === "reminder" ? reminderStatusConfig : statusConfig;
   const { label, icon: Icon, className: statusClassName } = config[status.tag];
 
   return (
-    <Badge variant="outline" className={cn(statusClassName, className)}>
-      {showIcon && <Icon className="size-3 mr-1 shrink-0" />}
-      {label}
+    <Badge
+      variant="outline"
+      className={cn(statusClassName, "gap-1", !showLabel && "p-1", className)}
+    >
+      {showIcon && <Icon className="size-3 shrink-0" />}
+      {showLabel && label}
     </Badge>
   );
 }

src/ui/app/components/alert/trigger-action.tsx

@@ -34,7 +34,7 @@ export function TriggerActionIndicator({
       return (
         <div
           className={cn(
-            "flex items-center gap-1 text-muted-foreground",
+            "flex items-center gap-1 text-muted-foreground whitespace-nowrap",
             className,
           )}
         >

src/ui/app/routes/alerts/index.tsx

@@ -1,3 +1,4 @@
+import { StatusBadge } from "@/components/alert/status-badge";
 import { TriggerActionIndicator } from "@/components/alert/trigger-action";
 import AppIcon from "@/components/app/app-icon";
 import { NoAlerts, NoAlertsFound } from "@/components/empty-states";
@@ -241,12 +242,18 @@ function AlertListItem({ alert }: { alert: Alert }) {
         ) : null}
         <div className="flex-1" />
 
-        <div className="flex flex-col items-end ml-auto py-2 ">
-          <TriggerActionIndicator
-            action={alert.triggerAction}
-            className="text-sm"
-          />
-
+        <div className="flex flex-col items-end gap-1 ml-auto py-2 ">
+          <div className="flex items-center gap-2">
+            <TriggerActionIndicator
+              action={alert.triggerAction}
+              className="text-sm shrink-0"
+            />
+            <StatusBadge
+              status={alert.status}
+              showLabel={false}
+              className="shrink-0"
+            />
+          </div>
           <div className="flex items-baseline text-card-foreground/50">
             <DurationText
               className="text-lg text-center text-card-foreground whitespace-nowrap"

src/ui/app/routes/home.tsx

@@ -1,3 +1,4 @@
+import { StatusBadge } from "@/components/alert/status-badge";
 import { TriggerActionIndicator } from "@/components/alert/trigger-action";
 import AppIcon from "@/components/app/app-icon";
 import { ScoreCircle } from "@/components/tag/score";
@@ -385,11 +386,16 @@ function MiniAlertItem({ alert }: { alert: Alert }) {
         <span>/</span>
         <span>{timeFrameToLabel(alert.timeFrame)}</span>
       </div>
-      <div className="flex justify-end">
+      <div className="flex justify-end gap-1">
         <TriggerActionIndicator
           action={alert.triggerAction}
           className="text-xs whitespace-nowrap"
         />
+        <StatusBadge
+          status={alert.status}
+          className="shrink-0"
+          showLabel={false}
+        />
       </div>
     </div>
   );