diff --git a/src/ui/app/components/alert/status-badge.tsx b/src/ui/app/components/alert/status-badge.tsx index 7b5e6e5d..0a5e6821 100644 --- a/src/ui/app/components/alert/status-badge.tsx +++ b/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,6 +46,8 @@ export interface StatusBadgeProps { className?: ClassValue; /** Show icon */ showIcon?: boolean; + /** Show label */ + showLabel?: boolean; } export function StatusBadge({ @@ -53,14 +55,18 @@ export function StatusBadge({ variant = "alert", className, showIcon = true, + showLabel = true, }: StatusBadgeProps) { const config = variant === "reminder" ? reminderStatusConfig : statusConfig; const { label, icon: Icon, className: statusClassName } = config[status.tag]; return ( - - {showIcon && } - {label} + + {showIcon && } + {showLabel && label} ); } diff --git a/src/ui/app/components/alert/trigger-action.tsx b/src/ui/app/components/alert/trigger-action.tsx index 454e4e90..d8730f96 100644 --- a/src/ui/app/components/alert/trigger-action.tsx +++ b/src/ui/app/components/alert/trigger-action.tsx @@ -34,7 +34,7 @@ export function TriggerActionIndicator({ return (
diff --git a/src/ui/app/routes/alerts/index.tsx b/src/ui/app/routes/alerts/index.tsx index 7dd42b78..3bb8a3b2 100644 --- a/src/ui/app/routes/alerts/index.tsx +++ b/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}
-
- - +
+
+ + +
/ {timeFrameToLabel(alert.timeFrame)}
-
+
+
);