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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user