From 63b87da5f3913aabd76c38a7ae21b983f211acc5 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 30 Jul 2026 22:11:57 +0200
Subject: [PATCH] refactor(downloads): simplify ready cards

---
 .../src/lib/download-library.component.html   | 72 +++++++++++++------
 .../src/lib/download-library.component.scss   | 27 -------
 .../lib/download-library.component.spec.ts    | 65 +++++++++++++++++
 .../src/lib/download-library.component.ts     |  2 +
 4 files changed, 119 insertions(+), 47 deletions(-)

diff --git a/libs/portal/downloads/feature/src/lib/download-library.component.html b/libs/portal/downloads/feature/src/lib/download-library.component.html
index d73c3b1f4..ef9e46df5 100644
--- a/libs/portal/downloads/feature/src/lib/download-library.component.html
+++ b/libs/portal/downloads/feature/src/lib/download-library.component.html
@@ -72,12 +72,6 @@
                                     </span>
                                 }
                             </button>
-                            <span class="download-library__offline">
-                                <mat-icon aria-hidden="true"
-                                    >download_done</mat-icon
-                                >
-                                {{ 'DOWNLOADS.OFFLINE' | translate }}
-                            </span>
                         </div>
 
                         <div class="download-library__body">
@@ -169,14 +163,59 @@
                                 }
                             </div>
                             <div class="download-library__metadata">
-                                @if (entity.sourceName.trim()) {
-                                    <span>{{ entity.sourceName }}</span>
-                                    <span aria-hidden="true">·</span>
-                                }
                                 <span>{{
                                     formatBytes(entity.trackedBytes)
                                 }}</span>
                             </div>
+                            <div
+                                class="download-library__actions"
+                                [attr.aria-label]="entity.title"
+                            >
+                                <button
+                                    mat-icon-button
+                                    type="button"
+                                    [matMenuTriggerFor]="seriesMenu"
+                                    [attr.aria-label]="
+                                        ('DOWNLOADS.MORE_ACTIONS'
+                                            | translate) +
+                                        ': ' +
+                                        entity.title
+                                    "
+                                    [matTooltip]="
+                                        'DOWNLOADS.MORE_ACTIONS' | translate
+                                    "
+                                >
+                                    <mat-icon aria-hidden="true">
+                                        more_vert
+                                    </mat-icon>
+                                </button>
+                                <mat-menu #seriesMenu="matMenu">
+                                    <app-download-source-menu-header
+                                        [sourceName]="entity.sourceName"
+                                    />
+                                    <button
+                                        mat-menu-item
+                                        type="button"
+                                        [attr.aria-label]="
+                                            ('DOWNLOADS.OPEN_EPISODES'
+                                                | translate) +
+                                            ': ' +
+                                            entity.title
+                                        "
+                                        (click)="openEpisodes(entity)"
+                                    >
+                                        <mat-icon aria-hidden="true">
+                                            video_library
+                                        </mat-icon>
+                                        <span>
+                                            {{
+                                                'DOWNLOADS.OPEN_EPISODES'
+                                                    | translate
+                                            }}
+                                        </span>
+                                    </button>
+                                </mat-menu>
+                            </div>
                         </div>
                     </article>
                 } @else {
@@ -253,12 +292,6 @@
                                     </span>
                                 }
                             </button>
-                            <span class="download-library__offline">
-                                <mat-icon aria-hidden="true"
-                                    >download_done</mat-icon
-                                >
-                                {{ 'DOWNLOADS.OFFLINE' | translate }}
-                            </span>
                         </div>
 
                         <div class="download-library__body">
@@ -316,10 +349,6 @@
                                 </span>
                             }
                             <div class="download-library__metadata">
-                                @if (entity.sourceName.trim()) {
-                                    <span>{{ entity.sourceName }}</span>
-                                    <span aria-hidden="true">·</span>
-                                }
                                 <span>{{
                                     formatBytes(entity.trackedBytes)
                                 }}</span>
@@ -382,6 +411,9 @@
                                     >
                                 </button>
                                 <mat-menu #itemMenu="matMenu">
+                                    <app-download-source-menu-header
+                                        [sourceName]="entity.sourceName"
+                                    />
                                     <button
                                         mat-menu-item
                                         type="button"
diff --git a/libs/portal/downloads/feature/src/lib/download-library.component.scss b/libs/portal/downloads/feature/src/lib/download-library.component.scss
index f78024458..881cf8eb3 100644
--- a/libs/portal/downloads/feature/src/lib/download-library.component.scss
+++ b/libs/portal/downloads/feature/src/lib/download-library.component.scss
@@ -127,33 +127,6 @@
     }
 }
 
-.download-library__offline {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 5px 8px;
-    border: 1px solid
-        color-mix(in srgb, var(--mat-sys-on-primary) 18%, transparent);
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--mat-sys-primary) 88%, transparent);
-    color: var(--mat-sys-on-primary);
-    font-size: 0.66rem;
-    font-weight: 700;
-    letter-spacing: 0.045em;
-    line-height: 1;
-    text-transform: uppercase;
-    pointer-events: none;
-
-    mat-icon {
-        width: 14px;
-        height: 14px;
-        font-size: 14px;
-    }
-}
-
 .download-library__body {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
diff --git a/libs/portal/downloads/feature/src/lib/download-library.component.spec.ts b/libs/portal/downloads/feature/src/lib/download-library.component.spec.ts
index 86e59e795..b0541cd8d 100644
--- a/libs/portal/downloads/feature/src/lib/download-library.component.spec.ts
+++ b/libs/portal/downloads/feature/src/lib/download-library.component.spec.ts
@@ -36,6 +36,11 @@ const TRANSLATIONS = {
         SOURCE_PLAYLIST_MISSING:
             'This download can no longer open because its source was removed.',
     },
+    PORTALS: {
+        MULTI_SOURCE: {
+            SOURCE: 'Source',
+        },
+    },
 };
 
 function item(overrides: Partial<DownloadItem>): DownloadItem {
@@ -218,6 +223,66 @@ describe('DownloadLibraryComponent', () => {
         expect(fallbackEpisodeCard.textContent).toContain('Episode');
     });
 
+    it('keeps ready cards clean while preserving tracked size', () => {
+        const section = byTestId('downloads-library-section');
+        const movieCard = byTestId('download-library-movie-9');
+        const seriesCard = byTestId('download-library-series-playlist-a-77');
+        const episodeCard = byTestId('download-library-episode-21');
+
+        expect(section.textContent).not.toContain('Offline');
+        expect(movieCard.textContent).not.toContain('Cinema');
+        expect(seriesCard.textContent).not.toContain('Living room');
+        expect(episodeCard.textContent).not.toContain('Archive');
+        expect(movieCard.textContent).toContain('2.4 MB');
+    });
+
+    it('puts the movie source ahead of its overflow commands', async () => {
+        const card = byTestId('download-library-movie-9');
+
+        await click(button(card, 'More actions: Moonrise'));
+
+        const header = document.querySelector<HTMLElement>(
+            '.download-source-menu-header'
+        );
+        const copy = button(document, 'Copy download URL: Moonrise');
+        const remove = button(document, 'Remove from manager: Moonrise');
+        expect(header?.textContent?.replace(/\s+/g, ' ').trim()).toBe(
+            'Source Cinema'
+        );
+        expect(
+            header &&
+                header.compareDocumentPosition(copy) &
+                    Node.DOCUMENT_POSITION_FOLLOWING
+        ).toBeTruthy();
+        expect(
+            copy.compareDocumentPosition(remove) &
+                Node.DOCUMENT_POSITION_FOLLOWING
+        ).toBeTruthy();
+    });
+
+    it('opens downloaded episodes from the series overflow without a file action', async () => {
+        const card = byTestId('download-library-series-playlist-a-77');
+        const episodeGroups: DownloadSeriesCardViewModel[] = [];
+        const actions: unknown[] = [];
+        component.episodesOpened.subscribe((group) =>
+            episodeGroups.push(group)
+        );
+        component.itemAction.subscribe((action) => actions.push(action));
+
+        await click(button(card, 'More actions: Northwind'));
+
+        const header = document.querySelector<HTMLElement>(
+            '.download-source-menu-header'
+        );
+        expect(header?.textContent?.replace(/\s+/g, ' ').trim()).toBe(
+            'Source Living room'
+        );
+        await click(button(document, 'Open downloaded episodes: Northwind'));
+
+        expect(episodeGroups).toEqual([SERIES]);
+        expect(actions).toEqual([]);
+    });
+
     it('omits the named library section when no completed entity is visible', async () => {
         fixture.componentRef.setInput('entities', []);
         await fixture.whenStable();
diff --git a/libs/portal/downloads/feature/src/lib/download-library.component.ts b/libs/portal/downloads/feature/src/lib/download-library.component.ts
index 6d9f67e1e..72c5387a3 100644
--- a/libs/portal/downloads/feature/src/lib/download-library.component.ts
+++ b/libs/portal/downloads/feature/src/lib/download-library.component.ts
@@ -19,6 +19,7 @@ import type {
     DownloadLibraryEntity,
     DownloadSeriesCardViewModel,
 } from './download-library.viewmodel';
+import { DownloadSourceMenuHeaderComponent } from './download-source-menu-header.component';
 
 @Component({
     selector: 'app-download-library',
@@ -29,6 +30,7 @@ import type {
         MatMenuModule,
         MatTooltipModule,
         TranslatePipe,
+        DownloadSourceMenuHeaderComponent,
     ],
     templateUrl: './download-library.component.html',
     styleUrl: './download-library.component.scss',