From 19d9b5c75d11ce581dd7f1b53df771f24276495c Mon Sep 17 00:00:00 2001
From: Quick <31828688+Quick104@users.noreply.github.com>
Date: Tue, 26 May 2026 21:29:11 -0400
Subject: [PATCH] feat(episode-carousel): highlight currently viewed episode

- Add "Now Viewing" badge with pulsing indicator on current episode
- Replace border with primary-color ring for current episode card
- Set aria-current="page" on links to the current episode
---
 .../ItemDetail/components/EpisodeCarousel.tsx | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx b/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx
index 298eae08..581fdaac 100644
--- a/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx
+++ b/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router";
 import { Check, Play, ChevronLeft, ChevronRight } from "lucide-react";
 import type { EpisodeListItem } from "@/api/types";
 import { decodeThumbhash } from "@/lib/thumbhash";
+import { cn } from "@/lib/utils";
 import MediaItemMenu from "@/components/MediaItemMenu";
 import type { EpisodeNavigationState } from "../itemDetailLayout";
 import { useCarouselEmbla } from "@/hooks/useCarouselEmbla";
@@ -48,7 +49,7 @@ export default function EpisodeCarousel({
           </button>
         )}
 
-        <div ref={emblaRef} className="embla__viewport overflow-hidden">
+        <div ref={emblaRef} className="embla__viewport overflow-hidden py-4 pl-4">
           <ul role="list" className="embla__container flex cursor-grab list-none gap-3">
             {episodes.map((ep) => {
               const isCurrent = ep.episode_number === currentEpisodeNumber;
@@ -79,12 +80,16 @@ export default function EpisodeCarousel({
                       <Link
                         to={`/item/${ep.content_id}`}
                         state={episodeLinkState}
+                        aria-current={isCurrent ? "page" : undefined}
                         className="block"
                       >
                         <div
-                          className={`surface-panel-subtle relative aspect-video overflow-hidden rounded-[1.1rem] border ${
-                            isCurrent ? "border-primary/40" : "border-border/30"
-                          }`}
+                          className={cn(
+                            "surface-panel-subtle relative aspect-video overflow-hidden rounded-[1.1rem] border transition-[border-color,box-shadow] duration-200",
+                            isCurrent
+                              ? "border-transparent shadow-[0_0_0_2px_var(--primary)]"
+                              : "border-border/30",
+                          )}
                           style={
                             thumbhashUrl
                               ? { backgroundImage: `url(${thumbhashUrl})`, backgroundSize: "cover" }
@@ -103,6 +108,15 @@ export default function EpisodeCarousel({
                               <Play size={28} className="text-muted-foreground/30" />
                             </div>
                           )}
+                          {isCurrent && (
+                            <div className="bg-primary text-primary-foreground pointer-events-none absolute top-2.5 left-2.5 z-10 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] leading-none font-semibold tracking-[0.08em] uppercase shadow-[0_2px_8px_rgb(0_0_0/0.28)]">
+                              <span className="relative flex size-1.5">
+                                <span className="bg-primary-foreground absolute inline-flex h-full w-full animate-ping rounded-full opacity-60" />
+                                <span className="bg-primary-foreground relative inline-flex size-1.5 rounded-full" />
+                              </span>
+                              Now Viewing
+                            </div>
+                          )}
                           {ep.user_data?.played && (
                             <div className="absolute top-2 right-2 rounded-full bg-black/65 p-1.5 text-green-400">
                               <Check className="size-4" />
@@ -135,7 +149,12 @@ export default function EpisodeCarousel({
                         hasPartialProgress={progress != null}
                       />
                     </div>
-                    <Link to={`/item/${ep.content_id}`} state={episodeLinkState} className="block">
+                    <Link
+                      to={`/item/${ep.content_id}`}
+                      state={episodeLinkState}
+                      aria-current={isCurrent ? "page" : undefined}
+                      className="block"
+                    >
                       <p className="text-muted-foreground/70 mt-2 text-xs">
                         Episode {ep.episode_number}
                       </p>