Developer
01527ae4f0
Combine both branches into a single coherent branch: - Full mobile responsive parity (useIsMobile, MobileCardRow, SheetForm, .mobile-touch-target, mobile cards, SheetForm forms, 44px targets, dirty-state confirm, TablePagination, refetchIntervalInBackground). - Full services-as-hub IA (data-driven nav, service-page tab skeleton, new service types, Authentik directory + messaging, named dashboards, legacy routes 404, Observability split, Jellyseerr absorbed). Enhancement: service tabs now use mobile-parity primitives: - MediaTab: MobileCardRow below md (title/size/HDR/library/year) + TablePagination; DataTable at md+ (desktop branch preserved). - FilesTab: MobileCardRow below md (name/type/size/modified) + handleRowClick; DataTable at md+. - ServicePage: SheetForm branch below md (open-on-mount, sticky header + save bar, cancel navigates back to /services, dirty-state guard). - Dashboard: single-column + section anchors below md (from mobile-parity) + empty-state CTA (from services-hub). - App.tsx: useIsMobile() replaces inline matchMedia (from mobile-parity) + data-driven useNavItems (from services-hub). - Backup tables (BackupAlerts/Jobs/Runs) already have MobileCardRow from mobile-parity; JobsTab inherits mobile behavior through its sub-components. Conflict resolutions: - Backend: entirely from services-hub (mobile didn't touch it). - Deleted pages (Media/FileBrowser/Actions/Users/UsersPage/Applications/ ObservabilityPage/BackupsPage + hooks/useUsers + tests): kept deleted (services-hub deleted them; content moved into service tabs). - New service-tabs/*: from services-hub, enhanced with mobile patterns. - App.tsx: services-hub's data-driven nav + mobile-parity's useIsMobile. - Dashboard.tsx: merged (services-hub CTA + mobile-parity sections/anchors). - ServicePage.tsx: services-hub's tab skeleton + mobile-parity's SheetForm. - Primitives (useIsMobile/mobile-card/sheet-form/etc.): from mobile-parity. 117 frontend tests pass (mobile-parity's 122 - 5 deleted page tests + services-hub's new tab/dashboard tests); 271 backend tests pass; lint/ build green both sides.
Manage Frontend
React + TypeScript SPA for Manage, consuming the FastAPI backend.
Tech Stack
- Vite — Build tool
- React 18+ — UI framework
- TypeScript — Type safety
- @tanstack/react-query — Data fetching/caching
- @tanstack/react-table — Data tables (media, file browser)
- react-router-dom — Client-side routing
- Tailwind CSS + shadcn/ui — Styling
Setup
cd frontend
npm install
Development
npm run dev
Runs on http://localhost:5173 with API requests proxied to http://localhost:8000.
Make sure the backend is running:
cd ../backend
uvicorn media_library_viewer_api.main:app --reload --port 8000
Build
npm run build
Output goes to frontend/dist/.
Pages
- Dashboard (
/) — Now playing, library stats, configurable widgets and shortcuts, frontend/backend version chips in the shell header - Observability (
/observability) — Thin dashboard: Alertmanager alerts, Prometheus target health, machine status, and Grafana deep-links (no in-app charting) - Media (
/media) — Full-library table with sort/filter/search - Users (
/users) — Read-only Jellyfin user list with optional Jellyseerr enrichment - File Browser (
/files) — Remote directory browsing, ffprobe preview, jobs - Settings (
/settings) — Persistent monitoring machine definitions, SSH keys, and setup workflow - Actions (
/actions) — Saved server tasks (shell/python) targeting ssh_tasks services
Environment Variables
Set VITE_API_URL and any OIDC variables directly in your shell or Compose build args if the API is not at http://localhost:8000.
The frontend version defaults to the package.json version and can be overridden with VITE_APP_VERSION and VITE_APP_BUILD_INFO when you need explicit deployed labels.
VITE_API_URL=http://your-backend-host:8000
Configuration workflow examples
- Local development: run
docker compose -f docker-compose.dev.yml up --build, then open the app and add monitoring machines in the Settings tab. - Production: export the required Compose variables in your shell, run
docker compose up --build, and manage local/remote machines from Settings. - Observability: Manage only deploys backend + frontend. It connects to existing Grafana/Prometheus/Alertmanager instances; see
docker-compose.observability.ymlfor an optional standalone example stack. A machine can belocal(the API host itself) orssh(a remote host), and the UI treats both the same after configuration.
In development, the Vite proxy handles /api requests automatically. Observability services (Grafana, Prometheus, Alertmanager) are configured in the app on the Services page — there are no observability env vars.