episode buttons with progress

src/components/layout/Seasons.tsx

@@ -1,5 +1,6 @@
 import { Dropdown } from "components/Dropdown";
 import { Episode } from "components/media/EpisodeButton";
+import { WatchedEpisode } from "components/media/WatchedEpisodeButton";
 import { useLoading } from "hooks/useLoading";
 import { serializePortableMedia } from "hooks/usePortableMedia";
 import {
@@ -70,9 +71,13 @@ export function Seasons(props: SeasonsProps) {
             }
           />
           {seasons.seasons[seasonSelected]?.episodes.map((v) => (
-            <Episode
+            <WatchedEpisode
               key={v.episodeNumber}
-              episodeNumber={v.episodeNumber}
+              media={{
+                ...props.media,
+                episode: v.episodeNumber,
+                season: seasonSelected,
+              }}
               active={v.episodeNumber === episodeSelected}
               onClick={() =>
                 navigateToSeasonAndEpisode(seasonSelected, v.episodeNumber)

src/components/media/EpisodeButton.tsx

@@ -9,8 +9,8 @@ export function Episode(props: EpisodeProps) {
   return (
     <div
       onClick={props.onClick}
-      className={`bg-denim-500 hover:bg-denim-400 transition-[background-color, transform] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded border-2 border-transparent font-bold text-white active:scale-110 ${
-        props.active ? "border-bink-500 bg-bink-200" : ""
+      className={`bg-denim-500 hover:bg-denim-400 transition-[background-color, transform, box-shadow] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded font-bold text-white active:scale-110 ${
+        props.active ? "shadow-bink-500 shadow-[inset_0_0_0_2px]" : ""
       }`}
     >
       <div

src/components/media/WatchedEpisodeButton.tsx

@@ -0,0 +1,24 @@
+import { MWMediaMeta } from "providers";
+import { useWatchedContext, getWatchedFromPortable } from "state/watched";
+import { Episode } from "./EpisodeButton";
+
+export interface WatchedEpisodeProps {
+  media: MWMediaMeta;
+  onClick?: () => void;
+  active?: boolean;
+}
+
+export function WatchedEpisode(props: WatchedEpisodeProps) {
+  const { watched } = useWatchedContext();
+  const foundWatched = getWatchedFromPortable(watched.items, props.media);
+  const watchedPercentage = (foundWatched && foundWatched.percentage) || 0;
+
+  return (
+    <Episode
+      progress={watchedPercentage}
+      episodeNumber={props.media.episode ?? 1}
+      active={props.active}
+      onClick={props.onClick}
+    />
+  );
+}