44 */
55
66import type { FeedMessage } from " ~~/lib/api/types/data-contracts" ;
7- import IconCircle from " ~icons/mdi/circle " ;
8- import IconCircleOutline from " ~icons/mdi/circle-outline " ;
9- import IconCheck from " ~icons/mdi/check" ;
7+ import IconBell from " ~icons/mdi/bell " ;
8+ import IconEyeCheck from " ~icons/mdi/eye-check " ;
9+ import IconCheckCircle from " ~icons/mdi/check-circle " ;
1010import IconArchive from " ~icons/mdi/archive" ;
1111import IconClock from " ~icons/mdi/clock" ;
1212import IconChevronDown from " ~icons/mdi/chevron-down" ;
@@ -43,9 +43,9 @@ const priorityLabels = {
4343
4444// State icons
4545const stateIcons = {
46- new: IconCircle ,
47- acknowledged: IconCircleOutline ,
48- resolved: IconCheck ,
46+ new: IconBell ,
47+ acknowledged: IconEyeCheck ,
48+ resolved: IconCheckCircle ,
4949 archived: IconArchive ,
5050};
5151
@@ -57,6 +57,14 @@ const stateColors = {
5757 archived: " text-base-content/40" ,
5858};
5959
60+ // State border colors
61+ const stateBorderColors = {
62+ new: " border-l-primary" ,
63+ acknowledged: " border-l-info" ,
64+ resolved: " border-l-success" ,
65+ archived: " border-l-base-content/40" ,
66+ };
67+
6068// Expanded state for card details
6169const isExpanded = ref (false );
6270const activeTab = ref <" request" | " headers" | " queryParams" | " logs" >(
@@ -131,7 +139,8 @@ const handleDelete = async () => {
131139
132140<template >
133141 <div
134- class =" card bg-base-200 shadow-sm border border-base-300 hover:shadow-md transition-shadow"
142+ class =" card bg-base-200 shadow-sm border border-base-300 hover:shadow-md transition-shadow border-l-8"
143+ :class =" stateBorderColors[message.state as keyof typeof stateBorderColors]"
135144 >
136145 <!-- Card Header - Always visible -->
137146 <div class =" card-body p-4" >
@@ -140,7 +149,7 @@ const handleDelete = async () => {
140149 <div class =" flex-shrink-0 pt-1" >
141150 <component
142151 :is ="
143- stateIcons[message.state as keyof typeof stateIcons] || IconCircle
152+ stateIcons[message.state as keyof typeof stateIcons] || IconBell
144153 "
145154 class =" h-5 w-5"
146155 :class =" stateColors[message.state as keyof typeof stateColors]"
0 commit comments