From 46975c5260a58330d11c75459838a815e2c8ca47 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 4 Jul 2026 20:23:28 +0200
Subject: [PATCH] fix(ui): single watched indicator-toggle on episode cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Watched state was signalled three times on one card: the green badge,
the hover toggle in the top-right cluster, and a checkmark appended to
the title. Now one control does both jobs — a toggle at the top-left
of the artwork that looks like the old green badge when watched
(always visible) and appears as a ghost circle on hover when not.
The right cluster keeps only the download action; the title checkmark
is gone.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../season-container.component.html           | 41 ++++++------
 .../season-container.component.scss           | 66 ++++++++++++++++---
 .../season-container.component.ts             |  2 -
 3 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/libs/ui/components/src/lib/season-container/season-container.component.html b/libs/ui/components/src/lib/season-container/season-container.component.html
index 5e6bde9ec..e9b756e86 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.html
+++ b/libs/ui/components/src/lib/season-container/season-container.component.html
@@ -133,9 +133,27 @@
                                         </div>
                                     }
                                 }
-                                <app-watched-badge
-                                    [isWatched]="isEpisodeWatched(episode)"
-                                />
+                                <button
+                                    mat-icon-button
+                                    class="episode-card__watched-toggle"
+                                    [class.episode-card__watched-toggle--watched]="
+                                        isEpisodeWatched(episode)
+                                    "
+                                    data-testid="episode-watched-toggle"
+                                    (click)="toggleWatched($event, episode)"
+                                    [matTooltip]="
+                                        (isEpisodeWatched(episode)
+                                            ? 'XTREAM.MARK_UNWATCHED'
+                                            : 'XTREAM.MARK_WATCHED'
+                                        ) | translate
+                                    "
+                                >
+                                    <mat-icon>{{
+                                        isEpisodeWatched(episode)
+                                            ? 'check_circle'
+                                            : 'radio_button_unchecked'
+                                    }}</mat-icon>
+                                </button>
                                 <div class="episode-card__actions">
                                     @if (isElectron()) {
                                         @if (isEpisodeDownloaded(episode)) {
@@ -188,23 +206,6 @@
                                             </button>
                                         }
                                     }
-                                    <button
-                                        mat-icon-button
-                                        class="toggle-watched-btn"
-                                        (click)="toggleWatched($event, episode)"
-                                        [matTooltip]="
-                                            (isEpisodeWatched(episode)
-                                                ? 'XTREAM.MARK_UNWATCHED'
-                                                : 'XTREAM.MARK_WATCHED'
-                                            ) | translate
-                                        "
-                                    >
-                                        <mat-icon>{{
-                                            isEpisodeWatched(episode)
-                                                ? 'check_circle'
-                                                : 'radio_button_unchecked'
-                                        }}</mat-icon>
-                                    </button>
                                 </div>
                                 <div class="episode-card__overlay">
                                     <div class="episode-card__play">
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.scss b/libs/ui/components/src/lib/season-container/season-container.component.scss
index 1a38962d1..4427636b3 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.scss
+++ b/libs/ui/components/src/lib/season-container/season-container.component.scss
@@ -208,20 +208,71 @@ app-season-tabs {
         box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 40%, transparent);
     }
 
-    // Watched state
+    // Watched state — the sole indicator is the watched toggle on the
+    // thumbnail (plus the dimmed card); no extra checkmarks elsewhere.
     &--watched {
         opacity: 0.7;
 
         &:hover {
             opacity: 1;
         }
+    }
 
-        .episode-card__title::after {
-            content: ' ✓';
-            color: var(--mat-sys-tertiary);
-            font-weight: bold;
-            margin-left: 4px;
+    // Watched indicator + toggle in one control, top-left on the artwork.
+    // Watched: always visible, green (the old badge look). Unwatched: ghost
+    // circle revealed on card hover.
+    &__watched-toggle {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        z-index: 2;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(255, 255, 255, 0.75);
+        background: rgba(0, 0, 0, 0.6);
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        opacity: 0;
+        transition:
+            opacity 0.2s ease,
+            background 0.2s ease,
+            color 0.2s ease;
+
+        mat-icon {
+            font-size: 17px;
+            width: 17px;
+            height: 17px;
+            line-height: 17px;
         }
+
+        &:hover {
+            color: white;
+            background: rgba(0, 0, 0, 0.85);
+        }
+
+        &:focus-visible {
+            opacity: 1;
+        }
+
+        &--watched {
+            opacity: 1;
+            color: white;
+            background: rgba(70, 211, 105, 0.9);
+            border-color: transparent;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+            &:hover {
+                color: white;
+                background: rgba(70, 211, 105, 1);
+            }
+        }
+    }
+
+    &:hover .episode-card__watched-toggle {
+        opacity: 1;
     }
 
     &:hover {
@@ -303,8 +354,7 @@ app-season-tabs {
         display: flex;
         gap: 4px;
 
-        .download-btn,
-        .toggle-watched-btn {
+        .download-btn {
             color: rgba(255, 255, 255, 0.75);
             background: rgba(0, 0, 0, 0.6);
             border: 1px solid rgba(255, 255, 255, 0.14);
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.ts b/libs/ui/components/src/lib/season-container/season-container.component.ts
index 0efc32d46..0c292fd28 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.ts
+++ b/libs/ui/components/src/lib/season-container/season-container.component.ts
@@ -31,7 +31,6 @@ import {
 } from '@iptvnator/shared/interfaces';
 import { DownloadsService } from '@iptvnator/services';
 import { ProgressCapsuleComponent } from '../progress-capsule/progress-capsule.component';
-import { WatchedBadgeComponent } from '../watched-badge/watched-badge.component';
 import {
     buildXtreamEpisodeDownloadRequest,
     getEpisodeDownloadId,
@@ -76,7 +75,6 @@ export interface SeasonContainerPlaybackToggleRequest {
         ProgressCapsuleComponent,
         SeasonTabsComponent,
         TranslateModule,
-        WatchedBadgeComponent,
     ],
 })
 export class SeasonContainerComponent implements OnInit {