Developer
30f1b6e6db
Apply the mobile-touch-target CSS class to 40 interactive elements across 12 files. The class applies min-height/min-width:44px only below md (max-width:767px), satisfying WCAG 2.5.5 / Apple HIG on touch devices. Desktop behavior is unchanged. Audit log (before -> after hit-area): - App.tsx: hamburger/dark-mode/sign-out (32/32/28 -> 44) - Dashboard.tsx: shortcut open/edit/delete (28 -> 44), enabled switch (18 -> 44) - Media.tsx: mobile pagination prev/next (28 -> 44) - FileBrowser.impl.tsx: 'Open Settings' alert button (28 -> 44) - UsersPage.impl.tsx: compose toolbar bold/italic/link/list (32 -> 44), attachment remove button (16 -> 44) - Settings.tsx: machine switch (18 -> 44), clear/add-machine buttons (28 -> 44), reset-db checkboxes x3 (16 -> 44) - Actions.tsx: 'Add action' button (28 -> 44) - ServicePage.tsx: service enabled switch (18 -> 44) - ServicesPage.tsx: service switch/open-link/delete-icon (18/28/32 -> 44) - ObservabilityPage.tsx: retry + 4 asChild link buttons (28 -> 44) - WidgetConfigDialog.tsx: 4 icon buttons (32 -> 44), 2 switches (18 -> 44), 2 add-widget buttons (28 -> 44) - SessionActivityPanel.tsx: 'Open in Users' button (28 -> 44) Deliberately skipped: default-size text buttons (32px, borderline), desktop-only sidebar toggle, DataTable internals (desktop-only below md), Select triggers. Dashboard anchor pills and HoverEditButton already had the class from Slices 1/2. No new tests (the class applies via @media which jsdom doesn't honor). 116 tests pass; lint/build green. Refs openspec/changes/mobile-responsive-parity/ (spec R6, tasks slice 9).
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.