feat: highlight new alerts

package.json

@@ -19,7 +19,6 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.11.11",
     "lucide-react": "^0.454.0",
     "next": "15.0.2",
     "next-themes": "^0.4.1",

src/app/globals.css

@@ -41,7 +41,9 @@ body {
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --row-highlight: #FDF1E6;
   }
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
@@ -75,13 +77,15 @@ body {
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --row-highlight: #2C2218;
   }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }

src/components/alerts/alert-groups.tsx

@@ -1,4 +1,3 @@
-import { motion, AnimatePresence } from "framer-motion"
 import { useState } from "react"
 import { ChevronDown } from "lucide-react"
 
@@ -57,20 +56,17 @@ function AlertGroup(props: AlertGroupProps) {
         maxHeight: open ? `${alerts.length * 50}px` : '0',
       }}>
         <ul>
-          <AnimatePresence>
-            {alerts.map((alert: Alert) => (
-              <motion.li
-                key={alert.fingerprint}
-                onClick={() => setSelectedAlert(alert)}
-                initial={{ backgroundColor: 'yellow' }}
-                animate={{ backgroundColor: 'transparent' }}
-                exit={{ backgroundColor: 'yellow' }}
-                transition={{ duration: 1 }}
-              >
-                <AlertRow alert={alert} />
-              </motion.li>
-            ))}
-          </AnimatePresence>
+          {alerts.map((alert: Alert) => (
+            <li
+              key={alert.fingerprint}
+              onClick={() => setSelectedAlert(alert)}
+              className={cn({
+                'animate-highlight': new Date(alert.startsAt) > new Date(Date.now() - 30 * 60 * 1000)
+              })}
+            >
+              <AlertRow alert={alert} />
+            </li>
+          ))}
         </ul>
       </div>
     </Collapsible>

src/components/alerts/alert-severity.tsx

@@ -17,7 +17,7 @@ export function AlertSeverity({ alert }: { alert: Alert }) {
       text = 'ERR'
       break
     case 'warning':
-      color = 'bg-orange-300'
+      color = 'bg-orange-300 dark:text-black'
       text = 'WARN'
       break
     case 'info':

tailwind.config.ts

@@ -92,12 +92,21 @@ const config: Config = {
           from: {
             transform: 'rotate(360deg)'
           },
-        }
+        },
+        'highlight': {
+          '0%': {
+            background: 'var(--row-highlight)',
+          },
+          '100%': {
+            background: 'none',
+          },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
-        'reverse-spin': 'reverse-spin 1s linear infinite'
+        'reverse-spin': 'reverse-spin 1s linear infinite',
+        highlight: 'highlight 3s',
       }
     }
   },