From eb99d14b6e220a35422cc59afab17e599e34874c Mon Sep 17 00:00:00 2001
From: The Daniel <dmnyc@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:51:27 -0400
Subject: [PATCH] fix(carousel): reverse slide direction on prev arrow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The featured-market carousel always animated content in from the
right. Clicking the back arrow advanced the index backward but
visually slid the new card the wrong way. Track direction in the
store so the prev arrow uses a mirrored keyframe (-80% → 0) while
auto-advance and the next arrow keep the original direction.
---
 src/components/home/FeaturedMarket.tsx | 10 ++++++++--
 src/components/home/HomePage.tsx       |  1 +
 src/store/index.ts                     |  6 ++++++
 src/style.css                          | 17 ++++++++++++++++-
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/home/FeaturedMarket.tsx b/src/components/home/FeaturedMarket.tsx
index 0b2bdaec..22a7ecbd 100644
--- a/src/components/home/FeaturedMarket.tsx
+++ b/src/components/home/FeaturedMarket.tsx
@@ -122,6 +122,7 @@ export default function FeaturedMarket({
   totalItems: number;
 }) {
   const trendingIndex = useStore((s) => s.trendingIndex);
+  const trendingDirection = useStore((s) => s.trendingDirection);
   const { data: rawPriceHistory } = usePriceHistory(market.marketId);
   const priceHistory =
     rawPriceHistory && rawPriceHistory.length > 0
@@ -138,6 +139,7 @@ export default function FeaturedMarket({
   const handlePrev = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex - 1 + totalItems) % totalItems,
+      trendingDirection: "prev",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
@@ -145,6 +147,7 @@ export default function FeaturedMarket({
   const handleNext = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex + 1) % totalItems,
+      trendingDirection: "next",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
@@ -198,7 +201,7 @@ export default function FeaturedMarket({
           place so the nav arrows never jump. */}
       <div
         key={market.marketId}
-        className="animate-carousel-slide flex min-h-0 flex-1 flex-col"
+        className={`${trendingDirection === "prev" ? "animate-carousel-slide-reverse" : "animate-carousel-slide"} flex min-h-0 flex-1 flex-col`}
       >
         <button
           type="button"
@@ -256,6 +259,7 @@ export function FeaturedGroupCard({
   totalItems: number;
 }) {
   const trendingIndex = useStore((s) => s.trendingIndex);
+  const trendingDirection = useStore((s) => s.trendingDirection);
 
   const blocksLeft = group.expiryHeight - group.currentHeight;
   const timeLeft = blocksLeft > 0 ? formatTimeRemaining(blocksLeft) : "Expired";
@@ -267,6 +271,7 @@ export function FeaturedGroupCard({
   const handlePrev = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex - 1 + totalItems) % totalItems,
+      trendingDirection: "prev",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
@@ -274,6 +279,7 @@ export function FeaturedGroupCard({
   const handleNext = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex + 1) % totalItems,
+      trendingDirection: "next",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
@@ -309,7 +315,7 @@ export function FeaturedGroupCard({
       {/* Sliding body — see FeaturedMarket for the same pattern. */}
       <div
         key={group.id}
-        className="animate-carousel-slide flex min-h-0 flex-1 flex-col"
+        className={`${trendingDirection === "prev" ? "animate-carousel-slide-reverse" : "animate-carousel-slide"} flex min-h-0 flex-1 flex-col`}
       >
         {/* Title */}
         <button
diff --git a/src/components/home/HomePage.tsx b/src/components/home/HomePage.tsx
index b522bf89..67614ae7 100644
--- a/src/components/home/HomePage.tsx
+++ b/src/components/home/HomePage.tsx
@@ -1050,6 +1050,7 @@ function TrendingHomeView({ markets }: { markets: Market[] }) {
     const id = window.setTimeout(() => {
       useStore.setState((s) => ({
         trendingIndex: (s.trendingIndex + 1) % total,
+        trendingDirection: "next",
       }));
     }, delay);
     return () => clearTimeout(id);
diff --git a/src/store/index.ts b/src/store/index.ts
index 5abe4a49..dd5329ce 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -49,6 +49,11 @@ export interface NavigationSlice {
   categoryFilter: "all" | "live" | "ending-soon";
   search: string;
   trendingIndex: number;
+  /** Direction of the most recent trending-carousel advance. Drives
+   *  the slide animation: "next" enters from the right, "prev" from
+   *  the left. Auto-advance and the right arrow set "next"; the
+   *  left arrow sets "prev". */
+  trendingDirection: "next" | "prev";
   /** Unix ms. While `Date.now()` is below this value the trending-
    *  carousel auto-advance skips its tick. Set whenever the user
    *  clicks the prev/next arrows so manual browsing isn't yanked
@@ -332,6 +337,7 @@ export const useStore = create<StoreState>()(() => ({
   categoryFilter: "all",
   search: "",
   trendingIndex: 0,
+  trendingDirection: "next",
   trendingAutoAdvancePausedUntil: 0,
   userMenuOpen: false,
   searchOpen: false,
diff --git a/src/style.css b/src/style.css
index 71f18a11..9fd79afc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -653,11 +653,26 @@ button:focus-visible,
     opacity: 1;
   }
 }
+@keyframes deadcat-carousel-slide-reverse {
+  0% {
+    transform: translateX(-80%);
+    opacity: 0.3;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
 .animate-carousel-slide {
   animation: deadcat-carousel-slide 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
+.animate-carousel-slide-reverse {
+  animation: deadcat-carousel-slide-reverse 360ms cubic-bezier(0.16, 1, 0.3, 1)
+    both;
+}
 @media (prefers-reduced-motion: reduce) {
-  .animate-carousel-slide {
+  .animate-carousel-slide,
+  .animate-carousel-slide-reverse {
     animation: none;
   }
 }