feat(web): media browse, global search & trash screens (#141)

- MediaBrowseScreen (/app/media): one parameterized screen for all 9 top-level
  kinds with an in-screen kind switcher, per-kind search box, 100/page paging
- SearchScreen (/app/search): grouped per-kind results with counts + 'See all';
  TopBar search input now navigates here
- TrashScreen (/app/trash): state:FileNotFound results, multi-select + Empty Trash
  via DELETE /api/media-items and /api/maintenance/empty_trash (confirm dialogs)
- Shared media/mediaKinds (icon/label maps, hueOf, duration helpers) + MediaPosterCard;
  ChannelBuilder and CollectionsScreen now reuse the single-source maps (their
  exhaustive Record<LibraryBrowseMediaType> had to cover the 6 new kinds anyway)
- api: search.ts, mediaItems.ts, maintenance.ts (+ URL-assert tests)
- One consolidated 'Browse' nav entry with an in-screen kind switcher instead of
  9 per-kind nav rows (deviation from Blazor's per-kind Media links)
- Nav: Media group gains Browse/Search/Trash; Settings Classic-UI help trimmed

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-07 15:39:54 +02:00
co-authored by Claude Fable 5
parent 6c68c291a0
commit 14cafca740
17 changed files with 1178 additions and 54 deletions
+104
View File
@@ -2443,6 +2443,110 @@
}
}
/* media browse / search / trash poster grid */
.ctv-media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-6, 12px);
}
.ctv-media-card {
position: relative;
border-radius: var(--radius-sm);
border: 1px solid var(--border-hairline);
background: var(--surface-card);
overflow: hidden;
transition:
border-color 120ms ease,
box-shadow 120ms ease;
}
.ctv-media-card[role='button'] {
cursor: pointer;
}
.ctv-media-card-selected {
border-color: var(--action-primary);
box-shadow: 0 0 0 1px var(--action-primary);
}
.ctv-media-card-poster {
position: relative;
overflow: hidden;
}
.ctv-media-card-poster img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ctv-media-card-icon {
position: absolute;
top: 7px;
left: 7px;
display: inline-flex;
z-index: 1;
}
.ctv-media-card-check {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--action-primary);
color: var(--text-on-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
box-shadow: var(--shadow-sm);
z-index: 2;
}
.ctv-media-card-body {
padding: 8px 10px 10px;
}
.ctv-media-card-title {
font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-sans);
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ctv-media-card-meta {
margin-top: 3px;
font: var(--text-2xs) / 1.2 var(--font-sans);
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ctv-media-section-header {
display: flex;
align-items: baseline;
gap: var(--space-4, 8px);
margin: var(--space-7, 16px) 0 var(--space-5, 10px);
}
.ctv-media-section-header h2 {
font: var(--weight-semibold) var(--text-md) / 1.2 var(--font-sans);
color: var(--text-primary);
margin: 0;
}
.ctv-media-section-count {
font: var(--text-xs) / 1 var(--font-sans);
color: var(--text-secondary);
}
/* lineup */
.ctv-builder-lineup-list {
display: flex;