dd48214987
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).
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
/**
|
||
* Service-page content tab stubs.
|
||
*
|
||
* Each stub renders a "coming soon" placeholder. Slices 5–9 replace these with
|
||
* real operational content lifted from the old top-level pages. All stubs accept
|
||
* an `instance` prop so the real implementations can scope queries by instance.
|
||
*/
|
||
import type { ServiceInstance } from "../../types";
|
||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||
|
||
function Stub({
|
||
label,
|
||
instance,
|
||
}: {
|
||
label: string;
|
||
instance: ServiceInstance;
|
||
}) {
|
||
return (
|
||
<Alert>
|
||
<AlertDescription>
|
||
{label} for {instance.name} — coming soon.
|
||
</AlertDescription>
|
||
</Alert>
|
||
);
|
||
}
|
||
|
||
export function OverviewTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Service overview" instance={instance} />;
|
||
}
|
||
|
||
export function FilesTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Files" instance={instance} />;
|
||
}
|
||
|
||
export function ActionsTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Actions" instance={instance} />;
|
||
}
|
||
|
||
export function JobsTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Backup jobs" instance={instance} />;
|
||
}
|
||
|
||
export function UsersTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Users" instance={instance} />;
|
||
}
|
||
|
||
export function MessagingTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Messaging" instance={instance} />;
|
||
}
|
||
|
||
export function AlertsTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Alerts" instance={instance} />;
|
||
}
|
||
|
||
export function LinksTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Links" instance={instance} />;
|
||
}
|
||
|
||
export function MetricsTab({ instance }: { instance: ServiceInstance }) {
|
||
return <Stub label="Metrics" instance={instance} />;
|
||
}
|