Reverse feed direction and add navigation arrows

dashboard/src/components/dashboard/MiniEventFeed.jsx

@@ -18,11 +18,14 @@ import {
   Activity,
   AlertCircle,
   FileText,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import { format } from "date-fns";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Skeleton } from "@/components/ui/skeleton";
 import { EventDialog } from "./EventFeed.jsx";
+import { Button } from "@/components/ui/button";
 
 const METRIC_IDS = {
   PLACED_ORDER: "Y8cqcF",
@@ -319,6 +322,34 @@ const MiniEventFeed = ({
   const [error, setError] = useState(null);
   const [lastUpdate, setLastUpdate] = useState(null);
   const scrollRef = useRef(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);
+
+  const handleScroll = () => {
+    if (scrollRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+      setShowLeftArrow(scrollLeft > 0);
+      setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 1);
+    }
+  };
+
+  const scrollToEnd = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({
+        left: scrollRef.current.scrollWidth,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  const scrollToStart = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({
+        left: 0,
+        behavior: 'smooth'
+      });
+    }
+  };
 
   const fetchEvents = useCallback(async () => {
     try {
@@ -354,6 +385,7 @@ const MiniEventFeed = ({
             left: scrollRef.current.scrollWidth,
             behavior: 'instant'
           });
+          handleScroll();
         }, 0);
       }
     } catch (error) {
@@ -370,11 +402,37 @@ const MiniEventFeed = ({
     return () => clearInterval(interval);
   }, [fetchEvents]);
 
+  useEffect(() => {
+    handleScroll();
+  }, [events]);
+
   return (
     <div className="fixed bottom-0 left-0 right-0">
       <Card className="bg-gradient-to-br rounded-none from-gray-900 to-gray-600 backdrop-blur">
-      <div className="px-1 pt-2 pb-3">
+        <div className="px-1 pt-2 pb-3 relative">
-        <div className="overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']">
+          {showLeftArrow && (
+            <Button
+              variant="ghost"
+              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-gray-900/50 hover:bg-gray-900/75 h-12 w-8 p-0 [&_svg]:!h-8 [&_svg]:!w-8"
+              onClick={scrollToStart}
+            >
+              <ChevronLeft className="text-white" />
+            </Button>
+          )}
+          {showRightArrow && (
+            <Button
+              variant="ghost"
+              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-gray-900/50 hover:bg-gray-900/75 h-12 w-8 p-0 [&_svg]:!h-8 [&_svg]:!w-8"
+              onClick={scrollToEnd}
+            >
+              <ChevronRight className="text-white" />
+            </Button>
+          )}
+          <div 
+            ref={scrollRef}
+            onScroll={handleScroll}
+            className="overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']"
+          >
             <div className="flex flex-row gap-3 pr-4" style={{ width: 'max-content' }}>
               {loading && !events.length ? (
                 <LoadingState />
@@ -391,7 +449,7 @@ const MiniEventFeed = ({
                   <EmptyState />
                 </div>
               ) : (
-              events.map((event) => (
+                [...events].reverse().map((event) => (
                   <EventCard 
                     key={event.id} 
                     event={event}