feat: collapse the Downloading, Completed and Subscriptions sections (closes #1070)

All three section headers become toggles. Collapsing removes the section
from the DOM rather than hiding it, so a long completed list stops
costing render work while it is put away.

The chevron sits at the right edge of the header. Putting it before the
label indents that title past the ones without a chevron, and the three
section titles are a left-aligned column; keeping them aligned matters
more than keeping the affordance next to the word. Direction follows the
Advanced Options disclosure already in the form — down when open, right
when closed.

The request covered Completed and Subscriptions only, but leaving
Downloading as the one fixed section is arbitrary once its neighbours
move. Each section remembers its own state in a metube_* cookie, matching
how every other client-side preference here is persisted; the request
asked for localStorage, but a second mechanism for the same job is not
worth it. All three default to expanded, so an upgrade doesn't hide
anything a user was already looking at.

The Downloading and Completed blocks hold the viewChild.required targets
behind their select-all checkboxes. Nothing reads them while a section is
collapsed: the only caller is the checkbox's own (changed) output, and
the queueChanged/doneChanged subscriptions reach it through an optional
viewChild. Verified live on a download that finished while the section
was put away.
This commit is contained in:
Alex Shnitman
2026-08-28 09:19:07 +03:00
parent 1251613f45
commit 79388370e9
4 changed files with 476 additions and 387 deletions
+22
View File
@@ -10,6 +10,28 @@
padding: 0.5rem 0
margin-top: 3.5rem
.metube-section-toggle
// Positioned so it paints above the header's full-bleed :before overlay.
position: relative
display: flex
align-items: center
// Title left, chevron against the right edge, so all three section titles
// stay on the same left margin whether or not a chevron is present.
justify-content: space-between
gap: 0.75rem
width: 100%
padding: 0
border: 0
background: none
color: inherit
font: inherit
text-align: left
.metube-section-chevron
font-size: 1.1rem
width: 1.1rem
color: var(--bs-secondary-color)
.metube-section-header:before
content: ""
position: absolute