Frontend: Jellyfin Media + Requests tabs (Slice 5)

Replace the MediaTab and RequestsTab stubs with real implementations on
the Jellyfin service page.

MediaTab (pages/service-tabs/MediaTab.tsx): lifts the operational content
from the top-level Media page into an instance-scoped tab. Build controls,
status display, library counts, media DataTable, and pagination all read
the Jellyfin service id directly from the instance prop (replacing the old
URL-search-param service selector + dropdown). Row-click navigation to
the file browser is preserved (note: target /files is a cross-slice
dependency on slice 6's FilesTab).

RequestsTab (pages/service-tabs/RequestsTab.tsx): reads the absorbed
jellyseerr_url + jellyseerr_api_key from the Jellyfin instance config.
When unconfigured, renders a CTA to add the fields via the Config tab.
When configured, shows the Jellyseerr URL + an honest placeholder (no
requests backend endpoint exists yet -- out of scope for this slice).

service-tabs/index.ts updated to wire the new components; the
MediaTabStub/RequestsTabStub removed from stubs.tsx.

Note: this branch is based on main, not on mobile-responsive-parity, so
MediaTab lifts main's DataTable + TanStack column-visibility mobile
hiding (no MobileCardRow -- that lands when the branches reconcile).

Tests: MediaTab (instance-scoped hooks + build controls + table render)
+ RequestsTab (configured URL vs empty-state CTA). 90 tests pass (+6);
lint/build green.

Cross-slice flag: MediaTab row-click -> /files will 404 until slice 6
re-routes it to the ssh_tasks FilesTab.

Refs openspec/changes/services-as-hub-ia/ (spec R2.4, tasks slice 5).
This commit is contained in:
Developer
2026-06-26 19:12:25 +00:00
parent caf6c226ff
commit dd48214987
6 changed files with 714 additions and 10 deletions
@@ -28,14 +28,6 @@ export function OverviewTab({ instance }: { instance: ServiceInstance }) {
return <Stub label="Service overview" instance={instance} />;
}
export function MediaTab({ instance }: { instance: ServiceInstance }) {
return <Stub label="Media" instance={instance} />;
}
export function RequestsTab({ instance }: { instance: ServiceInstance }) {
return <Stub label="Requests" instance={instance} />;
}
export function FilesTab({ instance }: { instance: ServiceInstance }) {
return <Stub label="Files" instance={instance} />;
}