feat: add smooth sliding animation for new status data in TrendBlocks

Implement timestamp-based detection for new data arrival with coordinated
sliding animations:

- Detect new data using timestamp comparison (ts field)
- Slide existing blocks left when new data arrives
- New block grows from scale(0.1) to scale(1) while sliding in
- Coordinated 500ms animation with opacity fade-in
- Pause heartbeat during transitions, resume on completion

Creates engaging visual feedback when status updates arrive,
making it clear when new monitoring data is received.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: hemanandr

thingconnect.pulse.client/src/components/status/TrendBlocks.tsx

@@ -1,8 +1,13 @@
 import { HStack, Box } from '@chakra-ui/react';
 import type { SparklinePoint } from '@/api/types';
+import { useEffect, useState, useRef } from 'react';
 
 const TrendBlocks = ({ data }: { data: SparklinePoint[] }) => {
   const maxBlocks = 20;
+  const [isSliding, setIsSliding] = useState(false);
+  const [showNewData, setShowNewData] = useState(false);
+  const lastTimestampRef = useRef<string | null>(null);
+
   // Take the last 20 points, but maintain order (oldest to newest)
   const recentData = data.slice(-maxBlocks);
 
@@ -12,6 +17,25 @@ const TrendBlocks = ({ data }: { data: SparklinePoint[] }) => {
     return dataIdx >= 0 ? recentData[dataIdx] : null;
   });
 
+  // Detect new data by checking if the latest timestamp changed
+  useEffect(() => {
+    const latestTimestamp = recentData.length > 0 ? recentData[recentData.length - 1]?.ts : null;
+
+    if (latestTimestamp && lastTimestampRef.current && latestTimestamp !== lastTimestampRef.current) {
+      // New data detected - trigger slide animation
+      setIsSliding(true);
+      setShowNewData(false);
+
+      // After slide completes, show the new data
+      setTimeout(() => {
+        setShowNewData(true);
+        setIsSliding(false);
+      }, 500);
+    }
+
+    lastTimestampRef.current = latestTimestamp;
+  }, [recentData]);
+
   return (
     <>
       <style>
@@ -21,19 +45,35 @@ const TrendBlocks = ({ data }: { data: SparklinePoint[] }) => {
             50% { transform: scale(1.10); }
             100% { transform: scale(0.9); }
           }
+          @keyframes slideLeftGroup {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-16px); }
+          }
+          @keyframes slideInFromRight {
+            0% { transform: translateX(16px) scale(0.1); opacity: 0; }
+            50% { transform: translateX(8px) scale(0.5); opacity: 0.5; }
+            100% { transform: translateX(0) scale(1); opacity: 1; }
+          }
           .heartbeat-animation {
             animation: heartbeat 1.5s ease-in-out infinite;
           }
+          .slide-left-animation {
+            animation: slideLeftGroup 500ms ease-out;
+          }
+          .slide-in-animation {
+            animation: slideInFromRight 500ms ease-out;
+          }
         `}
       </style>
       <HStack gap={1} alignItems="center" overflow="hidden" py={"2px"} pr={"2px"}>
         {displayBlocks.map((point, idx) => {
           const isLastElement = idx === displayBlocks.length - 1 && point !== null;
           const isEmpty = point === null;
+          const isNewElement = isLastElement && showNewData;
 
           return (
             <Box
-              key={idx}
+              key={point?.ts || `empty-${idx}`}
               w='3'
               h='5'
               borderRadius='sm'
@@ -46,7 +86,15 @@ const TrendBlocks = ({ data }: { data: SparklinePoint[] }) => {
                   ? 'gray.700'
                   : point.s === 'd' ? 'red.600' : 'green.600'
               }}
-              className={isLastElement ? 'heartbeat-animation' : undefined}
+              className={
+                isNewElement
+                  ? 'slide-in-animation'
+                  : isSliding && !isEmpty
+                  ? 'slide-left-animation'
+                  : isLastElement && !isSliding && !showNewData
+                  ? 'heartbeat-animation'
+                  : undefined
+              }
               transformOrigin="center"
               position="relative"
               zIndex={isLastElement ? 2 : 1}