From 8d8a5bdb66ba0bc3a0440a8331f7d64bcf008254 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 11 Nov 2025 12:41:12 -0700
Subject: [PATCH] Revert "feat: hide the arrow buttons on scroll lists when at
 either end of the list"

This reverts commit 4f781f97361a937ee8aa5c565d6e9f6df64041b6.
---
 .../components/carousels/EpisodeCarousel.tsx  |  73 +++---------
 src/components/player/atoms/Episodes.tsx      |  89 +++++----------
 .../components/CarouselNavButtons.tsx         |  53 +--------
 .../discover/components/CategoryButtons.tsx   | 105 +++++-------------
 src/stores/__old/watched/store.ts             |   2 +-
 5 files changed, 74 insertions(+), 248 deletions(-)

diff --git a/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx b/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx
index 9fec2494..b6eeacb6 100644
--- a/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx
+++ b/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx
@@ -45,39 +45,6 @@ export function EpisodeCarousel({
   const updateItem = useProgressStore((s) => s.updateItem);
   const confirmModal = useModal("season-watch-confirm");
 
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  const updateScrollState = () => {
-    if (!carouselRef.current) {
-      setCanScrollLeft(false);
-      setCanScrollRight(false);
-      return;
-    }
-
-    const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
-    const isAtStart = scrollLeft <= 1;
-    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
-
-    setCanScrollLeft(!isAtStart);
-    setCanScrollRight(!isAtEnd);
-  };
-
-  useEffect(() => {
-    const carousel = carouselRef.current;
-    if (!carousel) return;
-
-    updateScrollState();
-
-    carousel.addEventListener("scroll", updateScrollState);
-    window.addEventListener("resize", updateScrollState);
-
-    return () => {
-      carousel.removeEventListener("scroll", updateScrollState);
-      window.removeEventListener("resize", updateScrollState);
-    };
-  }, []);
-
   const handleScroll = (direction: "left" | "right") => {
     if (!carouselRef.current) return;
 
@@ -563,17 +530,15 @@ export function EpisodeCarousel({
       {/* Episodes Carousel */}
       <div className="relative">
         {/* Left scroll button */}
-        {canScrollLeft && (
-          <div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
-            <button
-              type="button"
-              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-              onClick={() => handleScroll("left")}
-            >
-              <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
-            </button>
-          </div>
-        )}
+        <div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
+          <button
+            type="button"
+            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+            onClick={() => handleScroll("left")}
+          >
+            <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
+          </button>
+        </div>
 
         <div
           ref={carouselRef}
@@ -818,17 +783,15 @@ export function EpisodeCarousel({
         </div>
 
         {/* Right scroll button */}
-        {canScrollRight && (
-          <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
-            <button
-              type="button"
-              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-              onClick={() => handleScroll("right")}
-            >
-              <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
-            </button>
-          </div>
-        )}
+        <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
+          <button
+            type="button"
+            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+            onClick={() => handleScroll("right")}
+          >
+            <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/player/atoms/Episodes.tsx b/src/components/player/atoms/Episodes.tsx
index 8b9bf424..2d081980 100644
--- a/src/components/player/atoms/Episodes.tsx
+++ b/src/components/player/atoms/Episodes.tsx
@@ -766,39 +766,6 @@ export function EpisodesView({
     ],
   );
 
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  const updateScrollState = () => {
-    if (!carouselRef.current) {
-      setCanScrollLeft(false);
-      setCanScrollRight(false);
-      return;
-    }
-
-    const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
-    const isAtStart = scrollLeft <= 1;
-    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
-
-    setCanScrollLeft(!isAtStart);
-    setCanScrollRight(!isAtEnd);
-  };
-
-  useEffect(() => {
-    const carousel = carouselRef.current;
-    if (!carousel) return;
-
-    updateScrollState();
-
-    carousel.addEventListener("scroll", updateScrollState);
-    window.addEventListener("resize", updateScrollState);
-
-    return () => {
-      carousel.removeEventListener("scroll", updateScrollState);
-      window.removeEventListener("resize", updateScrollState);
-    };
-  }, []);
-
   const handleScroll = (direction: "left" | "right") => {
     if (!carouselRef.current) return;
 
@@ -949,22 +916,20 @@ export function EpisodesView({
     content = (
       <div className="relative">
         {/* Horizontal scroll buttons */}
-        {canScrollLeft && (
-          <div
-            className={classNames(
-              "absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
-              forceCompactEpisodeView ? "hidden" : "hidden lg:block",
-            )}
+        <div
+          className={classNames(
+            "absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
+            forceCompactEpisodeView ? "hidden" : "hidden lg:block",
+          )}
+        >
+          <button
+            type="button"
+            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+            onClick={() => handleScroll("left")}
           >
-            <button
-              type="button"
-              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-              onClick={() => handleScroll("left")}
-            >
-              <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
-            </button>
-          </div>
-        )}
+            <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
+          </button>
+        </div>
 
         <div
           ref={carouselRef}
@@ -1031,22 +996,20 @@ export function EpisodesView({
         </div>
 
         {/* Right scroll button */}
-        {canScrollRight && (
-          <div
-            className={classNames(
-              "absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
-              forceCompactEpisodeView ? "hidden" : "hidden lg:block",
-            )}
+        <div
+          className={classNames(
+            "absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
+            forceCompactEpisodeView ? "hidden" : "hidden lg:block",
+          )}
+        >
+          <button
+            type="button"
+            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+            onClick={() => handleScroll("right")}
           >
-            <button
-              type="button"
-              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-              onClick={() => handleScroll("right")}
-            >
-              <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
-            </button>
-          </div>
-        )}
+            <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
+          </button>
+        </div>
       </div>
     );
   }
diff --git a/src/pages/discover/components/CarouselNavButtons.tsx b/src/pages/discover/components/CarouselNavButtons.tsx
index 24cbdae3..bd9d3261 100644
--- a/src/pages/discover/components/CarouselNavButtons.tsx
+++ b/src/pages/discover/components/CarouselNavButtons.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useState } from "react";
-
 import { Icon, Icons } from "@/components/Icon";
 import { Flare } from "@/components/utils/Flare";
 
@@ -13,12 +11,9 @@ interface CarouselNavButtonsProps {
 interface NavButtonProps {
   direction: "left" | "right";
   onClick: () => void;
-  visible: boolean;
 }
 
-function NavButton({ direction, onClick, visible }: NavButtonProps) {
-  if (!visible) return null;
-
+function NavButton({ direction, onClick }: NavButtonProps) {
   return (
     <button
       type="button"
@@ -48,40 +43,6 @@ export function CarouselNavButtons({
   categorySlug,
   carouselRefs,
 }: CarouselNavButtonsProps) {
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  const updateScrollState = useCallback(() => {
-    const carousel = carouselRefs.current[categorySlug];
-    if (!carousel) {
-      setCanScrollLeft(false);
-      setCanScrollRight(false);
-      return;
-    }
-
-    const { scrollLeft, scrollWidth, clientWidth } = carousel;
-    const isAtStart = scrollLeft <= 1;
-    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
-
-    setCanScrollLeft(!isAtStart);
-    setCanScrollRight(!isAtEnd);
-  }, [categorySlug, carouselRefs]);
-
-  useEffect(() => {
-    const carousel = carouselRefs.current[categorySlug];
-    if (!carousel) return;
-
-    updateScrollState();
-
-    carousel.addEventListener("scroll", updateScrollState);
-    window.addEventListener("resize", updateScrollState);
-
-    return () => {
-      carousel.removeEventListener("scroll", updateScrollState);
-      window.removeEventListener("resize", updateScrollState);
-    };
-  }, [categorySlug, carouselRefs, updateScrollState]);
-
   const handleScroll = (direction: "left" | "right") => {
     const carousel = carouselRefs.current[categorySlug];
     if (!carousel) return;
@@ -115,16 +76,8 @@ export function CarouselNavButtons({
 
   return (
     <>
-      <NavButton
-        direction="left"
-        onClick={() => handleScroll("left")}
-        visible={canScrollLeft}
-      />
-      <NavButton
-        direction="right"
-        onClick={() => handleScroll("right")}
-        visible={canScrollRight}
-      />
+      <NavButton direction="left" onClick={() => handleScroll("left")} />
+      <NavButton direction="right" onClick={() => handleScroll("right")} />
     </>
   );
 }
diff --git a/src/pages/discover/components/CategoryButtons.tsx b/src/pages/discover/components/CategoryButtons.tsx
index 8f7f1c0e..6bb6bfc8 100644
--- a/src/pages/discover/components/CategoryButtons.tsx
+++ b/src/pages/discover/components/CategoryButtons.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useState } from "react";
-
 import { Icon, Icons } from "@/components/Icon";
 
 interface CategoryButtonsProps {
@@ -17,84 +15,34 @@ export function CategoryButtons({
   isMobile,
   showAlwaysScroll,
 }: CategoryButtonsProps) {
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  const updateScrollState = useCallback(() => {
-    const element = document.getElementById(`button-carousel-${categoryType}`);
-    if (!element) {
-      setCanScrollLeft(false);
-      setCanScrollRight(false);
-      return;
-    }
-
-    const { scrollLeft, scrollWidth, clientWidth } = element;
-    const isAtStart = scrollLeft <= 1;
-    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
-
-    setCanScrollLeft(!isAtStart);
-    setCanScrollRight(!isAtEnd);
-  }, [categoryType]);
-
-  useEffect(() => {
-    const element = document.getElementById(`button-carousel-${categoryType}`);
-    if (!element) return;
-
-    updateScrollState();
-
-    element.addEventListener("scroll", updateScrollState);
-    window.addEventListener("resize", updateScrollState);
-
-    return () => {
-      element.removeEventListener("scroll", updateScrollState);
-      window.removeEventListener("resize", updateScrollState);
-    };
-  }, [categoryType, updateScrollState]);
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      updateScrollState();
-    }, 0);
-    return () => clearTimeout(timeoutId);
-  }, [categories, categoryType, updateScrollState]);
-
-  const renderScrollButton = (direction: "left" | "right") => {
-    const shouldShow = direction === "left" ? canScrollLeft : canScrollRight;
-
-    if (!shouldShow && !showAlwaysScroll && !isMobile) return null;
-
-    return (
-      <div>
-        <button
-          type="button"
-          className="flex items-center rounded-full px-4 text-white py-3"
-          onClick={() => {
-            const element = document.getElementById(
-              `button-carousel-${categoryType}`,
-            );
-            if (element) {
-              element.scrollBy({
-                left: direction === "left" ? -200 : 200,
-                behavior: "smooth",
-              });
-            }
-          }}
-        >
-          <Icon
-            icon={
-              direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT
-            }
-            className="text-2xl rtl:-scale-x-100"
-          />
-        </button>
-      </div>
-    );
-  };
+  const renderScrollButton = (direction: "left" | "right") => (
+    <div>
+      <button
+        type="button"
+        className="flex items-center rounded-full px-4 text-white py-3"
+        onClick={() => {
+          const element = document.getElementById(
+            `button-carousel-${categoryType}`,
+          );
+          if (element) {
+            element.scrollBy({
+              left: direction === "left" ? -200 : 200,
+              behavior: "smooth",
+            });
+          }
+        }}
+      >
+        <Icon
+          icon={direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT}
+          className="text-2xl rtl:-scale-x-100"
+        />
+      </button>
+    </div>
+  );
 
   return (
     <div className="flex overflow-x-auto">
-      {(showAlwaysScroll || isMobile || canScrollLeft) &&
-        renderScrollButton("left")}
+      {(showAlwaysScroll || isMobile) && renderScrollButton("left")}
 
       <div
         id={`button-carousel-${categoryType}`}
@@ -114,8 +62,7 @@ export function CategoryButtons({
         </div>
       </div>
 
-      {(showAlwaysScroll || isMobile || canScrollRight) &&
-        renderScrollButton("right")}
+      {(showAlwaysScroll || isMobile) && renderScrollButton("right")}
     </div>
   );
 }
diff --git a/src/stores/__old/watched/store.ts b/src/stores/__old/watched/store.ts
index 5bc2f6fe..7d5739ad 100644
--- a/src/stores/__old/watched/store.ts
+++ b/src/stores/__old/watched/store.ts
@@ -1,10 +1,10 @@
 import { useProgressStore } from "@/stores/progress";
 
-import { createVersionedStore } from "../migrations";
 import { OldData, migrateV2Videos } from "./migrations/v2";
 import { migrateV3Videos } from "./migrations/v3";
 import { migrateV4Videos } from "./migrations/v4";
 import { WatchedStoreData } from "./types";
+import { createVersionedStore } from "../migrations";
 
 export const VideoProgressStore = createVersionedStore<WatchedStoreData>()
   .setKey("video-progress")