⭐️ feature: first app steps

.gitignore

@@ -0,0 +1,149 @@
+### macOS
+# Finder metadata
+.DS_Store
+
+# Thumbnails
+._*
+
+# Custom folder icons
+Icon␍
+
+# Volume root files
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+### JetBrains
+# JetBrains IDE directory
+.idea/
+
+# CMake build directories
+cmake-build-*/
+
+# File-based project format
+*.iws
+*.iml
+
+# IntelliJ build output
+out/
+
+### Go
+# Binaries for programs and plugins
+*.exe
+*.exe~
+*.dll
+*.so
+*.dylib
+
+# Test binary, built with `go test -c`
+*.test
+
+# Output of the go coverage tool
+*.out
+
+# Go workspace file
+go.work.sum
+
+# env file
+.env
+.env.*
+!.env.example
+
+### Node
+# Dependencies
+node_modules/
+
+# Logs
+*.log
+
+# Runtime data
+*.pid
+*.pid.lock
+
+# Coverage
+coverage/
+*.lcov
+.nyc_output
+
+# Build output
+dist/
+dist-server/
+build/Release
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Framework build output and caches
+.cache
+.parcel-cache
+.next
+out/
+.nuxt
+
+# dotenv environment variable files
+.env
+.env.local
+.env.*.local
+
+# npm cache directory
+.npm
+*.tgz
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/install-state.gz
+.pnp.*
+
+### Python
+# Byte-compiled files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+build/
+dist/
+*.egg-info/
+*.egg
+
+# dotenv environment variable files
+.env
+
+# Virtual environments
+.venv
+env/
+venv/
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.pytest_cache/
+
+# Type checkers
+.mypy_cache/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+# .python-version
+
+### Project secrets
+# Local persisted app secrets/config
+data/*.secure.json
+omniarr/data/*.secure.json
+
+# Server-side compiled JS artifacts generated from TS sources
+server/**/*.js
+shared/**/*.js

Dockerfile

@@ -0,0 +1,29 @@
+FROM node:22-alpine AS build
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM node:22-alpine AS runtime
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PORT=8787
+ENV OMNIARR_DATA_DIR=/app/data
+
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/dist-server ./dist-server
+
+VOLUME ["/app/data"]
+
+EXPOSE 8787
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=20s --retries=3 \
+  CMD wget -qO- http://127.0.0.1:8787/api/health || exit 1
+
+CMD ["node", "dist-server/server/index.js"]

README.md

@@ -0,0 +1,144 @@
+# OmniArr
+
+React + TypeScript frontend with a built-in Node backend for:
+
+- master-password login with `HttpOnly` session cookie
+- encrypted storage of service settings
+- Jellyfin, Sonarr, Radarr, qBittorrent and TMDb integration
+- a single production process for Docker/TrueNAS
+
+## Persistence
+
+All critical state is persisted under `OMNIARR_DATA_DIR`.
+
+By default inside the container that is:
+
+```text
+/app/data
+```
+
+The encrypted state file is:
+
+```text
+/app/data/omniarr.secure.json
+```
+
+That file contains:
+
+- master-password verifier
+- encryption salt
+- encrypted application settings
+
+If you do not persist `/app/data`, you will lose:
+
+- the master password
+- all integration settings
+- all saved configuration after restart, redeploy or image update
+
+## Local Development
+
+Single command:
+
+```bash
+npm run dev:all
+```
+
+That starts:
+
+- Vite frontend
+- Node API server
+
+If you want them separately:
+
+```bash
+npm run dev:server
+npm run dev
+```
+
+## Production
+
+Build and serve:
+
+```bash
+npm run serve
+```
+
+Or separately:
+
+```bash
+npm run build
+npm run start
+```
+
+The production server serves both the static frontend and the API on the same port.
+
+## Docker
+
+Build:
+
+```bash
+docker build -t omniarr .
+```
+
+Run with persistence:
+
+```bash
+docker run -d \
+  --name omniarr \
+  --restart unless-stopped \
+  -p 8787:8787 \
+  -e PORT=8787 \
+  -e OMNIARR_DATA_DIR=/app/data \
+  -e TMDB_BEARER_TOKEN=your_tmdb_bearer_token \
+  -v /path/on/host/omniarr-data:/app/data \
+  omniarr
+```
+
+## Docker Compose
+
+There is a ready [docker-compose.yml](./docker-compose.yml).
+
+Start it with:
+
+```bash
+docker compose up -d --build
+```
+
+The default compose file uses:
+
+```text
+./data:/app/data
+```
+
+For TrueNAS, replace `./data` with a persistent dataset path if you prefer bind mounts managed outside the app directory.
+
+## TrueNAS Notes
+
+Recommended app/container settings:
+
+- Container port: `8787`
+- Host port: your choice, commonly `8787`
+- Storage mount: persistent dataset -> `/app/data`
+- Restart policy: `unless-stopped`
+
+Recommended environment variables:
+
+- `PORT=8787`
+- `OMNIARR_DATA_DIR=/app/data`
+- `TMDB_BEARER_TOKEN=...` if you want TMDb configured at deploy time
+
+Example host dataset mount:
+
+```text
+/path/to/omniarr-data -> /app/data
+```
+
+That dataset is the piece that must survive updates and image replacements.
+
+## First Boot
+
+On first boot there is no default password.
+
+You create the master password in the UI.
+
+After that, OmniArr stores only the verifier and encrypted settings in `/app/data/omniarr.secure.json`.

docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  omniarr:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: omniarr
+    restart: unless-stopped
+    ports:
+      - "8787:8787"
+    environment:
+      PORT: "8787"
+      OMNIARR_DATA_DIR: /app/data
+      TMDB_BEARER_TOKEN: ""
+    volumes:
+      - ./data:/app/data

eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist', 'dist-server']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    ignores: ['server/**/*.ts'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+  {
+    files: ['server/**/*.ts'],
+    extends: [js.configs.recommended, tseslint.configs.recommended],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>omniarr</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "omniarr",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:all": "node --experimental-strip-types server/dev-runner.ts",
+    "dev:server": "node --experimental-strip-types server/index.ts",
+    "dev:server:watch": "node --experimental-strip-types --watch server/index.ts",
+    "build": "tsc -p tsconfig.server.json && tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "start": "node dist-server/server/index.js",
+    "serve": "npm run build && npm run start"
+  },
+  "dependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@eslint/js": "^10.0.1",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.10"
+  }
+}

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filtLine truncated

public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

server/dev-runner.ts

@@ -0,0 +1,36 @@
+import { spawn, type ChildProcess } from 'node:child_process'
+
+const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm'
+
+const children: ChildProcess[] = [
+  spawn(npmCommand, ['run', 'dev:server'], {
+    stdio: 'inherit',
+    env: process.env,
+  }),
+  spawn(npmCommand, ['run', 'dev', '--', '--host', '0.0.0.0'], {
+    stdio: 'inherit',
+    env: process.env,
+  }),
+]
+
+for (const child of children) {
+  child.on('exit', (code) => {
+    shutdown(code ?? 0)
+  })
+}
+
+for (const signal of ['SIGINT', 'SIGTERM'] as const) {
+  process.on(signal, () => {
+    shutdown(0)
+  })
+}
+
+function shutdown(code: number) {
+  for (const child of children) {
+    if (!child.killed) {
+      child.kill('SIGTERM')
+    }
+  }
+
+  process.exit(code)
+}

server/index.ts

@@ -0,0 +1,461 @@
+import { createServer, type IncomingMessage, type ServerResponse } from 'node:http';
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { defaultConfig, type AppConfig, type AuthPayload } from '../shared/contracts.js';
+import { decryptJson, deriveEncryptionKey, encryptJson, randomToken, verifyPassword, createPasswordRecord } from './lib/security.js';
+import { loadState, readAdmin, readEncryptedConfig, saveAdminAndConfig, updateEncryptedConfig } from './lib/store.js';
+import {
+  getConnectionStatuses,
+  getDashboard,
+  getDownloads,
+  getHubPage,
+  getServiceOptions,
+  loadJellyfinUsers,
+  proxyJellyfinImage,
+  requestMovie,
+  requestSeries,
+  sanitizeConfig
+} from './lib/services.js';
+
+interface SessionRecord {
+  encryptionKey: Buffer;
+  expiresAt: number;
+}
+
+const PORT = Number(process.env.PORT || 8787);
+const SESSION_COOKIE = 'omniarr_session';
+const SESSION_TTL_MS = 1000 * 60 * 60 * 12;
+const sessions = new Map<string, SessionRecord>();
+const failedAttempts = new Map<string, { count: number; lastAttempt: number }>();
+
+const server = createServer(async (request, response) => {
+  try {
+    await routeRequest(request, response);
+  } catch (error) {
+    console.error('Unhandled request error:', error);
+    sendJson(response, 500, {
+      error: error instanceof Error ? error.message : 'Internal server error'
+    });
+  }
+});
+
+server.listen(PORT, '0.0.0.0', () => {
+  console.log(`OmniArr server listening on http://127.0.0.1:${PORT}`);
+});
+
+setInterval(cleanupSessions, 1000 * 60 * 15).unref();
+
+async function routeRequest(request: IncomingMessage, response: ServerResponse): Promise<void> {
+  const method = request.method || 'GET';
+  const url = new URL(request.url || '/', `http://${request.headers.host || '127.0.0.1'}`);
+  console.log(`${method} ${url.pathname}`);
+
+  if (url.pathname === '/api/health' && method === 'GET') {
+    sendJson(response, 200, {
+      ok: true
+    });
+    return;
+  }
+
+  if (url.pathname === '/api/auth/session' && method === 'GET') {
+    const state = await loadState();
+    const session = getSession(request);
+    sendJson(response, 200, {
+      needsSetup: !state.admin,
+      authenticated: Boolean(session)
+    });
+    return;
+  }
+
+  if (url.pathname === '/api/auth/register' && method === 'POST') {
+    const state = await loadState();
+    if (state.admin) {
+      console.warn('Register blocked: app already initialized');
+      sendJson(response, 409, { error: 'The app has already been initialized.' });
+      return;
+    }
+
+    const body = await readJson<AuthPayload>(request);
+    const password = String(body.password || '');
+    if (password.length < 8) {
+      console.warn('Register blocked: password too short');
+      sendJson(response, 400, { error: 'Password must be at least 8 characters long.' });
+      return;
+    }
+
+    const record = createPasswordRecord(password);
+    const encryptionKey = deriveEncryptionKey(password, record.encryptionSalt);
+    await saveAdminAndConfig(
+      {
+        ...record,
+        createdAt: new Date().toISOString()
+      },
+      encryptJson(defaultConfig, encryptionKey)
+    );
+
+    const token = createSession(encryptionKey);
+    setSessionCookie(request, response, token);
+    resetFailedAttempts(getClientAddress(request));
+    console.log('Register completed successfully');
+    sendJson(response, 200, {
+      ok: true,
+      needsSetup: false
+    });
+    return;
+  }
+
+  if (url.pathname === '/api/auth/login' && method === 'POST') {
+    const admin = await readAdmin();
+    if (!admin) {
+      console.warn('Login blocked: no master password configured');
+      sendJson(response, 409, { error: 'The app does not have a master password yet.' });
+      return;
+    }
+
+    if (isRateLimited(getClientAddress(request))) {
+      console.warn('Login blocked: rate limited');
+      sendJson(response, 429, { error: 'Too many attempts. Wait one minute.' });
+      return;
+    }
+
+    const body = await readJson<AuthPayload>(request);
+    const password = String(body.password || '');
+    if (!verifyPassword(password, admin)) {
+      trackFailedAttempt(getClientAddress(request));
+      console.warn('Login blocked: incorrect password');
+      sendJson(response, 401, { error: 'Incorrect password.' });
+      return;
+    }
+
+    const encryptionKey = deriveEncryptionKey(password, admin.encryptionSalt);
+    const token = createSession(encryptionKey);
+    setSessionCookie(request, response, token);
+    resetFailedAttempts(getClientAddress(request));
+    console.log('Login completed successfully');
+    sendJson(response, 200, {
+      ok: true,
+      needsSetup: false
+    });
+    return;
+  }
+
+  if (url.pathname === '/api/auth/logout' && method === 'POST') {
+    const token = getSessionToken(request);
+    if (token) {
+      sessions.delete(token);
+    }
+
+    clearSessionCookie(request, response);
+    sendJson(response, 200, { ok: true, needsSetup: false });
+    return;
+  }
+
+  const session = getSession(request);
+  if (!session && url.pathname.startsWith('/api/')) {
+    sendJson(response, 401, { error: 'Unauthorized.' });
+    return;
+  }
+
+  if (url.pathname === '/api/settings' && method === 'GET') {
+    const config = await readConfig(session!.encryptionKey);
+    sendJson(response, 200, config);
+    return;
+  }
+
+  if (url.pathname === '/api/settings' && method === 'PUT') {
+    const body = await readJson<AppConfig>(request);
+    const config = sanitizeConfig(body);
+    await updateEncryptedConfig(encryptJson(config, session!.encryptionKey));
+    const connections = await getConnectionStatuses(config);
+    sendJson(response, 200, {
+      config,
+      connections
+    });
+    return;
+  }
+
+  if (url.pathname === '/api/settings/options' && method === 'GET') {
+    const config = await readConfig(session!.encryptionKey);
+    sendJson(response, 200, await getServiceOptions(config));
+    return;
+  }
+
+  if (url.pathname === '/api/settings/jellyfin-users' && method === 'POST') {
+    const body = await readJson<{ baseUrl: string; apiKey: string }>(request);
+    sendJson(response, 200, {
+      jellyfinUsers: await loadJellyfinUsers(String(body.baseUrl || ''), String(body.apiKey || ''))
+    });
+    return;
+  }
+
+  if (url.pathname === '/api/dashboard' && method === 'GET') {
+    const config = await readConfig(session!.encryptionKey);
+    sendJson(response, 200, await getDashboard(config));
+    return;
+  }
+
+  if (url.pathname.startsWith('/api/hubs/') && method === 'GET') {
+    const config = await readConfig(session!.encryptionKey);
+    const page = decodeURIComponent(url.pathname.replace('/api/hubs/', '')) as
+      | 'stream'
+      | 'home'
+      | 'anime'
+      | 'dorama'
+      | 'library';
+    sendJson(response, 200, await getHubPage(config, page));
+    return;
+  }
+
+  if (url.pathname === '/api/downloads' && method === 'GET') {
+    const config = await readConfig(session!.encryptionKey);
+    sendJson(response, 200, await getDownloads(config));
+    return;
+  }
+
+  if (url.pathname === '/api/requests/movie' && method === 'POST') {
+    const config = await readConfig(session!.encryptionKey);
+    const body = await readJson<{ tmdbId: number }>(request);
+    await requestMovie(config, Number(body.tmdbId));
+    sendJson(response, 200, { ok: true });
+    return;
+  }
+
+  if (url.pathname === '/api/requests/series' && method === 'POST') {
+    const config = await readConfig(session!.encryptionKey);
+    const body = await readJson<{ tmdbId: number }>(request);
+    await requestSeries(config, Number(body.tmdbId));
+    sendJson(response, 200, { ok: true });
+    return;
+  }
+
+  if (url.pathname.startsWith('/api/assets/jellyfin/') && method === 'GET') {
+    const config = await readConfig(session!.encryptionKey);
+    const itemId = decodeURIComponent(url.pathname.replace('/api/assets/jellyfin/', ''));
+    const kind = url.searchParams.get('kind') || 'Primary';
+    const maxWidth = Number(url.searchParams.get('maxWidth') || 640);
+    const tag = url.searchParams.get('tag') || '';
+    const image = await proxyJellyfinImage(config, itemId, kind, maxWidth, tag);
+    if (!image) {
+      response.writeHead(302, {
+        Location: '/omniarr/placeholder.jpg',
+        'Cache-Control': 'private, max-age=300'
+      });
+      response.end();
+      return;
+    }
+    response.writeHead(200, {
+      'Content-Type': image.contentType || 'image/jpeg',
+      'Cache-Control': 'private, max-age=300'
+    });
+    response.end(Buffer.from(image.data));
+    return;
+  }
+
+  await serveApp(url.pathname, response);
+}
+
+function createSession(encryptionKey: Buffer): string {
+  const token = randomToken();
+  sessions.set(token, {
+    encryptionKey,
+    expiresAt: Date.now() + SESSION_TTL_MS
+  });
+  return token;
+}
+
+function getSession(request: IncomingMessage): SessionRecord | null {
+  const token = getSessionToken(request);
+  if (!token) {
+    return null;
+  }
+
+  const session = sessions.get(token);
+  if (!session) {
+    return null;
+  }
+
+  if (session.expiresAt < Date.now()) {
+    sessions.delete(token);
+    return null;
+  }
+
+  session.expiresAt = Date.now() + SESSION_TTL_MS;
+  return session;
+}
+
+function getSessionToken(request: IncomingMessage): string | null {
+  const cookieHeader = request.headers.cookie;
+  if (!cookieHeader) {
+    return null;
+  }
+
+  for (const part of cookieHeader.split(';')) {
+    const [key, value] = part.trim().split('=');
+    if (key === SESSION_COOKIE && value) {
+      return value;
+    }
+  }
+
+  return null;
+}
+
+function setSessionCookie(request: IncomingMessage, response: ServerResponse, token: string): void {
+  const isSecure = request.headers['x-forwarded-proto'] === 'https' || process.env.NODE_ENV === 'production';
+  response.setHeader(
+    'Set-Cookie',
+    `${SESSION_COOKIE}=${token}; HttpOnly; Path=/; SameSite=Strict; Max-Age=${Math.floor(SESSION_TTL_MS / 1000)}${isSecure ? '; Secure' : ''}`
+  );
+}
+
+function clearSessionCookie(request: IncomingMessage, response: ServerResponse): void {
+  const isSecure = request.headers['x-forwarded-proto'] === 'https' || process.env.NODE_ENV === 'production';
+  response.setHeader(
+    'Set-Cookie',
+    `${SESSION_COOKIE}=; HttpOnly; Path=/; SameSite=Strict; Max-Age=0${isSecure ? '; Secure' : ''}`
+  );
+}
+
+async function readConfig(encryptionKey: Buffer): Promise<AppConfig> {
+  const encrypted = await readEncryptedConfig();
+  if (!encrypted) {
+    return defaultConfig;
+  }
+
+  const stored = decryptJson<Partial<AppConfig>>(encrypted, encryptionKey);
+
+  return sanitizeConfig({
+    preferences: {
+      ...defaultConfig.preferences,
+      ...(stored.preferences || {})
+    },
+    jellyfin: {
+      ...defaultConfig.jellyfin,
+      ...(stored.jellyfin || {})
+    },
+    sonarr: {
+      ...defaultConfig.sonarr,
+      ...(stored.sonarr || {})
+    },
+    radarr: {
+      ...defaultConfig.radarr,
+      ...(stored.radarr || {})
+    },
+    qbittorrent: {
+      ...defaultConfig.qbittorrent,
+      ...(stored.qbittorrent || {})
+    },
+    tmdb: {
+      ...defaultConfig.tmdb,
+      ...(stored.tmdb || {})
+    }
+  });
+}
+
+async function readJson<T>(request: IncomingMessage): Promise<T> {
+  const chunks: Buffer[] = [];
+  for await (const chunk of request) {
+    chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+  }
+
+  const raw = Buffer.concat(chunks).toString('utf8');
+  if (!raw) {
+    return {} as T;
+  }
+
+  return JSON.parse(raw) as T;
+}
+
+function sendJson(response: ServerResponse, statusCode: number, payload: unknown): void {
+  response.writeHead(statusCode, {
+    'Content-Type': 'application/json; charset=utf-8',
+    'Cache-Control': 'no-store'
+  });
+  response.end(JSON.stringify(payload));
+}
+
+async function serveApp(pathname: string, response: ServerResponse): Promise<void> {
+  const relativePath = pathname === '/' ? '/index.html' : pathname;
+  const filePath = resolve(process.cwd(), 'dist', `.${relativePath}`);
+
+  try {
+    const content = await readFile(filePath);
+    response.writeHead(200, {
+      'Content-Type': contentType(filePath)
+    });
+    response.end(content);
+  } catch {
+    try {
+      const indexHtml = await readFile(resolve(process.cwd(), 'dist', 'index.html'));
+      response.writeHead(200, {
+        'Content-Type': 'text/html; charset=utf-8'
+      });
+      response.end(indexHtml);
+    } catch {
+      response.writeHead(404, {
+        'Content-Type': 'text/plain; charset=utf-8'
+      });
+      response.end('Build the frontend first with `npm run build`.');
+    }
+  }
+}
+
+function contentType(filePath: string): string {
+  if (filePath.endsWith('.js')) {
+    return 'text/javascript; charset=utf-8';
+  }
+  if (filePath.endsWith('.css')) {
+    return 'text/css; charset=utf-8';
+  }
+  if (filePath.endsWith('.svg')) {
+    return 'image/svg+xml';
+  }
+  if (filePath.endsWith('.png')) {
+    return 'image/png';
+  }
+  if (filePath.endsWith('.jpg') || filePath.endsWith('.jpeg')) {
+    return 'image/jpeg';
+  }
+  if (filePath.endsWith('.html')) {
+    return 'text/html; charset=utf-8';
+  }
+  return 'application/octet-stream';
+}
+
+function getClientAddress(request: IncomingMessage): string {
+  return request.socket.remoteAddress || 'unknown';
+}
+
+function trackFailedAttempt(address: string): void {
+  const current = failedAttempts.get(address);
+  failedAttempts.set(address, {
+    count: (current?.count || 0) + 1,
+    lastAttempt: Date.now()
+  });
+}
+
+function resetFailedAttempts(address: string): void {
+  failedAttempts.delete(address);
+}
+
+function isRateLimited(address: string): boolean {
+  const current = failedAttempts.get(address);
+  if (!current) {
+    return false;
+  }
+
+  if (Date.now() - current.lastAttempt > 60_000) {
+    failedAttempts.delete(address);
+    return false;
+  }
+
+  return current.count >= 5;
+}
+
+function cleanupSessions(): void {
+  const now = Date.now();
+  for (const [token, session] of sessions.entries()) {
+    if (session.expiresAt < now) {
+      sessions.delete(token);
+    }
+  }
+}

server/lib/security.ts

@@ -0,0 +1,68 @@
+import { createCipheriv, createDecipheriv, randomBytes, scryptSync, timingSafeEqual } from 'node:crypto';
+
+const KEY_LENGTH = 32;
+
+export interface PasswordRecord {
+  passwordHash: string;
+  passwordSalt: string;
+  encryptionSalt: string;
+}
+
+export function createPasswordRecord(password: string): PasswordRecord {
+  const passwordSalt = randomBase64(16);
+  const encryptionSalt = randomBase64(16);
+  const passwordHash = derivePasswordHash(password, passwordSalt);
+
+  return {
+    passwordHash,
+    passwordSalt,
+    encryptionSalt
+  };
+}
+
+export function verifyPassword(password: string, record: PasswordRecord): boolean {
+  const expected = Buffer.from(record.passwordHash, 'base64');
+  const actual = Buffer.from(derivePasswordHash(password, record.passwordSalt), 'base64');
+
+  return expected.length === actual.length && timingSafeEqual(expected, actual);
+}
+
+export function deriveEncryptionKey(password: string, encryptionSalt: string): Buffer {
+  return scryptSync(password, encryptionSalt, KEY_LENGTH);
+}
+
+export function encryptJson(value: unknown, key: Buffer): { iv: string; data: string } {
+  const iv = randomBytes(12);
+  const cipher = createCipheriv('aes-256-gcm', key, iv);
+  const plaintext = Buffer.from(JSON.stringify(value), 'utf8');
+  const encrypted = Buffer.concat([cipher.update(plaintext), cipher.final()]);
+  const tag = cipher.getAuthTag();
+
+  return {
+    iv: iv.toString('base64'),
+    data: Buffer.concat([encrypted, tag]).toString('base64')
+  };
+}
+
+export function decryptJson<T>(payload: { iv: string; data: string }, key: Buffer): T {
+  const raw = Buffer.from(payload.data, 'base64');
+  const encrypted = raw.subarray(0, raw.length - 16);
+  const tag = raw.subarray(raw.length - 16);
+  const decipher = createDecipheriv('aes-256-gcm', key, Buffer.from(payload.iv, 'base64'));
+  decipher.setAuthTag(tag);
+  const json = Buffer.concat([decipher.update(encrypted), decipher.final()]).toString('utf8');
+
+  return JSON.parse(json) as T;
+}
+
+export function randomToken(): string {
+  return randomBase64(32).replace(/[+/=]/g, '');
+}
+
+function derivePasswordHash(password: string, salt: string): string {
+  return scryptSync(password, salt, 64).toString('base64');
+}
+
+function randomBase64(size: number): string {
+  return randomBytes(size).toString('base64');
+}

server/lib/store.ts

@@ -0,0 +1,84 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+interface StoredAdmin {
+  passwordHash: string;
+  passwordSalt: string;
+  encryptionSalt: string;
+  createdAt: string;
+}
+
+interface EncryptedConfig {
+  iv: string;
+  data: string;
+}
+
+interface StoredState {
+  version: 1;
+  admin: StoredAdmin | null;
+  config: EncryptedConfig | null;
+}
+
+const DATA_DIR = resolve(process.env.OMNIARR_DATA_DIR || resolve(process.cwd(), 'data'));
+const STORE_FILE = resolve(DATA_DIR, 'omniarr.secure.json');
+
+const EMPTY_STATE: StoredState = {
+  version: 1,
+  admin: null,
+  config: null
+};
+
+export async function loadState(): Promise<StoredState> {
+  try {
+    const raw = await readFile(STORE_FILE, 'utf8');
+    const parsed = JSON.parse(raw) as Partial<StoredState>;
+
+    return {
+      version: 1,
+      admin: parsed.admin ?? null,
+      config: parsed.config ?? null
+    };
+  } catch {
+    return EMPTY_STATE;
+  }
+}
+
+export async function saveState(state: StoredState): Promise<void> {
+  await mkdir(dirname(STORE_FILE), { recursive: true });
+  await writeFile(STORE_FILE, JSON.stringify(state, null, 2), 'utf8');
+}
+
+export async function needsSetup(): Promise<boolean> {
+  const state = await loadState();
+  return !state.admin;
+}
+
+export async function readEncryptedConfig(): Promise<EncryptedConfig | null> {
+  const state = await loadState();
+  return state.config;
+}
+
+export async function saveAdminAndConfig(
+  admin: StoredAdmin,
+  config: EncryptedConfig
+): Promise<void> {
+  await saveState({
+    version: 1,
+    admin,
+    config
+  });
+}
+
+export async function updateEncryptedConfig(config: EncryptedConfig): Promise<void> {
+  const state = await loadState();
+  await saveState({
+    ...state,
+    config
+  });
+}
+
+export async function readAdmin(): Promise<StoredAdmin | null> {
+  const state = await loadState();
+  return state.admin;
+}
+
+export type { EncryptedConfig, StoredAdmin, StoredState };

shared/contracts.ts

@@ -0,0 +1,191 @@
+export type AppRoute =
+  | 'stream'
+  | 'home'
+  | 'anime'
+  | 'dorama'
+  | 'library'
+  | 'downloads'
+  | 'settings';
+
+export interface ServiceConfig {
+  baseUrl: string;
+}
+
+export interface JellyfinConfig extends ServiceConfig {
+  apiKey: string;
+  userId: string;
+}
+
+export interface SonarrConfig extends ServiceConfig {
+  apiKey: string;
+  rootFolderPath: string;
+  qualityProfileId: number;
+  languageProfileId: number;
+  monitor: string;
+  startSearch: boolean;
+}
+
+export interface RadarrConfig extends ServiceConfig {
+  apiKey: string;
+  rootFolderPath: string;
+  qualityProfileId: number;
+  monitor: string;
+  startSearch: boolean;
+}
+
+export interface QbittorrentConfig extends ServiceConfig {
+  username: string;
+  password: string;
+}
+
+export interface TmdbConfig {
+  bearerToken: string;
+}
+
+export interface AppPreferences {
+  language: string;
+  region: string;
+  excludeLibraryItems: boolean;
+  animationLevel: 'smooth' | 'reduced';
+}
+
+export interface AppConfig {
+  preferences: AppPreferences;
+  jellyfin: JellyfinConfig;
+  sonarr: SonarrConfig;
+  radarr: RadarrConfig;
+  qbittorrent: QbittorrentConfig;
+  tmdb: TmdbConfig;
+}
+
+export interface SelectOption {
+  id: string;
+  label: string;
+}
+
+export interface ServiceOptionsResponse {
+  jellyfinUsers: SelectOption[];
+  sonarrRootFolders: SelectOption[];
+  sonarrQualityProfiles: SelectOption[];
+  sonarrLanguageProfiles: SelectOption[];
+  radarrRootFolders: SelectOption[];
+  radarrQualityProfiles: SelectOption[];
+}
+
+export interface ConnectionStatus {
+  key: 'jellyfin' | 'sonarr' | 'radarr' | 'qbittorrent' | 'tmdb';
+  label: string;
+  ok: boolean;
+  message: string;
+}
+
+export interface MediaCard {
+  id: string;
+  tmdbId?: number;
+  providerId?: string;
+  title: string;
+  subtitle: string;
+  overview: string;
+  mediaType: 'movie' | 'tv' | 'episode' | 'series' | 'mixed';
+  posterUrl: string;
+  backdropUrl: string;
+  badge?: string;
+  progress?: number;
+  secondaryValue?: string;
+  actionLabel?: string;
+  accent?: string;
+}
+
+export interface DownloadItem {
+  id: string;
+  source: 'sonarr' | 'radarr' | 'qbittorrent';
+  title: string;
+  detail: string;
+  progress: number;
+  state: string;
+  speed?: string;
+  eta?: string;
+  size?: string;
+}
+
+export interface DashboardResponse {
+  connections: ConnectionStatus[];
+  hero: MediaCard[];
+  continueWatching: MediaCard[];
+  recentlyAdded: MediaCard[];
+  recommendations: MediaCard[];
+  trendingSeries: MediaCard[];
+  downloads: DownloadItem[];
+}
+
+export interface HubSection {
+  id: string;
+  title: string;
+  style?: 'poster' | 'landscape' | 'profile' | 'genre' | 'network' | 'episode';
+  items: MediaCard[];
+}
+
+export interface HubPageResponse {
+  page: 'stream' | 'home' | 'anime' | 'dorama' | 'library';
+  hero: MediaCard[];
+  continueWatching?: MediaCard[];
+  sections: HubSection[];
+}
+
+export interface SessionResponse {
+  needsSetup: boolean;
+  authenticated: boolean;
+}
+
+export interface AuthPayload {
+  password: string;
+}
+
+export interface AuthResponse {
+  ok: boolean;
+  needsSetup: boolean;
+  message?: string;
+}
+
+export interface ApiErrorPayload {
+  error: string;
+}
+
+export const defaultConfig: AppConfig = {
+  preferences: {
+    language: 'en-US',
+    region: 'US',
+    excludeLibraryItems: true,
+    animationLevel: 'smooth'
+  },
+  jellyfin: {
+    baseUrl: '',
+    apiKey: '',
+    userId: ''
+  },
+  sonarr: {
+    baseUrl: '',
+    apiKey: '',
+    rootFolderPath: '',
+    qualityProfileId: 0,
+    languageProfileId: 0,
+    monitor: 'all',
+    startSearch: false
+  },
+  radarr: {
+    baseUrl: '',
+    apiKey: '',
+    rootFolderPath: '',
+    qualityProfileId: 0,
+    monitor: 'movieOnly',
+    startSearch: false
+  },
+  qbittorrent: {
+    baseUrl: '',
+    username: '',
+    password: ''
+  },
+  tmdb: {
+    bearerToken: ''
+  }
+};

src/App.tsx

@@ -0,0 +1,977 @@
+import {
+  type FormEvent,
+  type ReactNode,
+  startTransition,
+  useEffect,
+  useState,
+} from 'react'
+import { api } from './api'
+import {
+  defaultConfig,
+  type AppConfig,
+  type AppRoute,
+  type ConnectionStatus,
+  type DownloadItem,
+  type HubPageResponse,
+  type MediaCard,
+  type SelectOption,
+  type ServiceOptionsResponse,
+} from '../shared/contracts'
+
+type AuthState = 'loading' | 'setup' | 'login' | 'app'
+type EntryStage = 'onboarding' | 'profiles' | 'dashboard'
+
+const sidebarItems: Array<{ route: AppRoute; label: string; short: string }> = [
+  { route: 'home', label: 'Inicio', short: 'H' },
+  { route: 'dorama', label: 'K-Drama', short: 'K' },
+  { route: 'anime', label: 'Anime', short: 'A' },
+  { route: 'library', label: 'Library', short: 'L' },
+  { route: 'downloads', label: 'Downloads', short: 'D' },
+]
+
+function App() {
+  const [authState, setAuthState] = useState<AuthState>('loading')
+  const [entryStage, setEntryStage] = useState<EntryStage>('profiles')
+  const [route, setRoute] = useState<AppRoute>('home')
+  const [busy, setBusy] = useState(false)
+  const [jellyfinUsersBusy, setJellyfinUsersBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [password, setPassword] = useState('')
+  const [config, setConfig] = useState<AppConfig>(defaultConfig)
+  const [options, setOptions] = useState<ServiceOptionsResponse>({
+    jellyfinUsers: [],
+    sonarrRootFolders: [],
+    sonarrQualityProfiles: [],
+    sonarrLanguageProfiles: [],
+    radarrRootFolders: [],
+    radarrQualityProfiles: [],
+  })
+  const [downloads, setDownloads] = useState<DownloadItem[]>([])
+  const [connections, setConnections] = useState<ConnectionStatus[]>([])
+  const [hubPages, setHubPages] = useState<Partial<Record<HubPageResponse['page'], HubPageResponse>>>({})
+  const [hubLoading, setHubLoading] = useState(false)
+  const [selectedCard, setSelectedCard] = useState<MediaCard | null>(null)
+
+  async function refreshBaseData() {
+    const [settings, serviceOptions, dashboard] = await Promise.all([
+      api.getSettings(),
+      api.getOptions(),
+      api.getDashboard(),
+    ])
+
+    setConfig(settings)
+    setOptions(serviceOptions)
+    setDownloads(dashboard.downloads)
+    setConnections(dashboard.connections)
+    setEntryStage(resolveEntryStage(settings, serviceOptions))
+  }
+
+  async function loadHub(page: HubPageResponse['page']) {
+    setHubLoading(true)
+    try {
+      const hub = await api.getHub(page)
+      setHubPages((current) => ({ ...current, [page]: hub }))
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : 'Failed to load this section.')
+    } finally {
+      setHubLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function boot() {
+      try {
+        const session = await api.getSession()
+        if (cancelled) return
+
+        if (session.needsSetup) {
+          setAuthState('setup')
+          return
+        }
+
+        if (!session.authenticated) {
+          setAuthState('login')
+          return
+        }
+
+        await refreshBaseData()
+        if (!cancelled) {
+          setAuthState('app')
+        }
+      } catch (bootError) {
+        if (!cancelled) {
+          setError(bootError instanceof Error ? bootError.message : 'Failed to start OmniArr.')
+          setAuthState('login')
+        }
+      }
+    }
+
+    void boot()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (authState !== 'app' || entryStage !== 'dashboard') {
+      return
+    }
+
+    if (route === 'downloads' || route === 'settings') {
+      return
+    }
+
+    const page = route as HubPageResponse['page']
+    let cancelled = false
+
+    void api.getHub(page)
+      .then((hub) => {
+        if (cancelled) return
+        setHubPages((current) => ({ ...current, [page]: hub }))
+      })
+      .catch((loadError) => {
+        if (cancelled) return
+        setError(loadError instanceof Error ? loadError.message : 'Failed to load this section.')
+      })
+      .finally(() => {
+        if (cancelled) return
+        setHubLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [authState, entryStage, route])
+
+  useEffect(() => {
+    if (authState !== 'app' || entryStage !== 'dashboard') {
+      return
+    }
+
+    const interval = window.setInterval(() => {
+      void refreshBaseData()
+      if (route !== 'downloads' && route !== 'settings') {
+        void loadHub(route as HubPageResponse['page'])
+      }
+    }, 30000)
+
+    return () => window.clearInterval(interval)
+  }, [authState, entryStage, route])
+
+  async function handleAuthSubmit() {
+    setBusy(true)
+    setError('')
+    try {
+      if (authState === 'setup') {
+        await api.register({ password })
+      } else {
+        await api.login({ password })
+      }
+      await refreshBaseData()
+      setPassword('')
+      setNotice(authState === 'setup' ? 'Instance initialized.' : 'Signed in.')
+      setAuthState('app')
+    } catch (authError) {
+      setError(authError instanceof Error ? authError.message : 'Authentication failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleLoadJellyfinUsers() {
+    setJellyfinUsersBusy(true)
+    setError('')
+    setNotice('')
+    try {
+      const response = await api.loadJellyfinUsers({
+        baseUrl: config.jellyfin.baseUrl,
+        apiKey: config.jellyfin.apiKey,
+      })
+      setOptions((current) => ({ ...current, jellyfinUsers: response.jellyfinUsers }))
+      setEntryStage(response.jellyfinUsers.length ? 'profiles' : 'onboarding')
+      setNotice(response.jellyfinUsers.length ? 'Jellyfin users loaded.' : 'No Jellyfin users found.')
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : 'Failed to load Jellyfin users.')
+    } finally {
+      setJellyfinUsersBusy(false)
+    }
+  }
+
+  async function handleSelectJellyfinUser(userId: string) {
+    setBusy(true)
+    setError('')
+    setNotice('')
+    try {
+      const nextConfig = {
+        ...config,
+        jellyfin: {
+          ...config.jellyfin,
+          userId,
+        },
+      }
+      const response = await api.saveSettings(nextConfig)
+      setConfig(response.config)
+      await refreshBaseData()
+      setEntryStage('dashboard')
+      setNotice('Profile selected.')
+      setRoute('home')
+    } catch (selectError) {
+      setError(selectError instanceof Error ? selectError.message : 'Failed to select Jellyfin profile.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleSaveSettings(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setBusy(true)
+    setError('')
+    setNotice('')
+    try {
+      const response = await api.saveSettings(config)
+      setConfig(response.config)
+      await refreshBaseData()
+      setNotice('Settings saved and services refreshed.')
+    } catch (saveError) {
+      setError(saveError instanceof Error ? saveError.message : 'Failed to save settings.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleRequest(card: MediaCard) {
+    if (!card.tmdbId) return
+
+    setBusy(true)
+    setError('')
+    setNotice('')
+    try {
+      if (card.mediaType === 'movie') {
+        await api.requestMovie(card.tmdbId)
+      } else {
+        await api.requestSeries(card.tmdbId)
+      }
+      if (route !== 'downloads' && route !== 'settings') {
+        await loadHub(route as HubPageResponse['page'])
+      }
+      setNotice(`${card.title} sent to ${card.mediaType === 'movie' ? 'Radarr' : 'Sonarr'}.`)
+    } catch (requestError) {
+      setError(requestError instanceof Error ? requestError.message : 'Failed to send request.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function updateConfig<K extends keyof AppConfig>(key: K, value: AppConfig[K]) {
+    setConfig((current) => ({
+      ...current,
+      [key]: value,
+    }))
+  }
+
+  if (authState === 'loading') {
+    return <LoadingScreen />
+  }
+
+  if (authState === 'setup' || authState === 'login') {
+    return (
+      <AuthScreen
+        busy={busy}
+        error={error}
+        mode={authState}
+        onSubmit={handleAuthSubmit}
+        password={password}
+        setPassword={setPassword}
+      />
+    )
+  }
+
+  if (entryStage === 'onboarding') {
+    return (
+      <JellyfinOnboardingScreen
+        apiKey={config.jellyfin.apiKey}
+        baseUrl={config.jellyfin.baseUrl}
+        busy={jellyfinUsersBusy}
+        error={error}
+        notice={notice}
+        onApiKeyChange={(apiKey) =>
+          updateConfig('jellyfin', { ...config.jellyfin, apiKey })
+        }
+        onBaseUrlChange={(baseUrl) =>
+          updateConfig('jellyfin', { ...config.jellyfin, baseUrl })
+        }
+        onLoadUsers={handleLoadJellyfinUsers}
+        users={options.jellyfinUsers}
+      />
+    )
+  }
+
+  if (entryStage === 'profiles') {
+    return (
+      <ProfileSelectionScreen
+        busy={busy}
+        currentUserId={config.jellyfin.userId}
+        error={error}
+        notice={notice}
+        onBackToOnboarding={() => setEntryStage('onboarding')}
+        onSelectUser={handleSelectJellyfinUser}
+        users={options.jellyfinUsers}
+      />
+    )
+  }
+
+  const currentJellyfinUser =
+    options.jellyfinUsers.find((option) => option.id === config.jellyfin.userId)?.label || 'Media cockpit'
+  const currentHub = route !== 'downloads' && route !== 'settings' ? hubPages[route as HubPageResponse['page']] : undefined
+
+  return (
+    <div className="omniarr-app">
+      <Sidebar
+        busy={busy}
+        connections={connections}
+        currentUser={currentJellyfinUser}
+        onExitProfile={() => setEntryStage('profiles')}
+        route={route}
+        setRoute={setRoute}
+      />
+
+      <div className="content-shell">
+        <main className="content-panel">
+          <div className="content-scroll">
+            <div className="content-status">
+              {notice ? <p className="notice">{notice}</p> : null}
+              {error ? <p className="error-banner">{error}</p> : null}
+            </div>
+
+            {route === 'downloads' ? <DownloadsPage downloads={downloads} /> : null}
+            {route === 'settings' ? (
+              <SettingsView
+                busy={busy}
+                config={config}
+                jellyfinUsersBusy={jellyfinUsersBusy}
+                onLoadJellyfinUsers={handleLoadJellyfinUsers}
+                onSave={handleSaveSettings}
+                options={options}
+                updateConfig={updateConfig}
+              />
+            ) : null}
+            {route !== 'downloads' && route !== 'settings' ? (
+              <HubPageView
+                busy={busy}
+                hub={currentHub}
+                loading={hubLoading}
+                onOpenCard={setSelectedCard}
+                onRequest={handleRequest}
+                route={route}
+              />
+            ) : null}
+          </div>
+        </main>
+      </div>
+
+      {selectedCard ? (
+        <TitleDetailsModal
+          card={selectedCard}
+          config={config}
+          onClose={() => setSelectedCard(null)}
+          onRequest={handleRequest}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+function Sidebar(props: {
+  route: AppRoute
+  setRoute: (route: AppRoute) => void
+  currentUser: string
+  connections: ConnectionStatus[]
+  busy: boolean
+  onExitProfile: () => void
+}) {
+  return (
+    <aside className="omniarr-sidebar">
+      <div className="sidebar-wallpaper" />
+      <div className="sidebar-inner">
+        <button className="sidebar-profile" onClick={() => startTransition(() => props.setRoute('home'))} type="button">
+          <div className="sidebar-avatar">{props.currentUser.slice(0, 1).toUpperCase()}</div>
+          <div className="sidebar-profile-copy">
+            <strong>{props.currentUser}</strong>
+          </div>
+        </button>
+
+        <div className="sidebar-links">
+          {sidebarItems.map((item) => (
+            <button
+              className={item.route === props.route ? 'sidebar-link active' : 'sidebar-link'}
+              key={item.route}
+              onClick={() => startTransition(() => props.setRoute(item.route))}
+              type="button"
+            >
+              <span className="sidebar-link-short" aria-hidden="true">{item.short}</span>
+              <span>{item.label}</span>
+            </button>
+          ))}
+        </div>
+
+        <div className="sidebar-services">
+          <p className="eyebrow">Connections</p>
+          <div className="service-status-list">
+            {props.connections.map((connection) => (
+              <div className="service-status" key={connection.key} title={connection.message}>
+                <span className={connection.ok ? 'status-dot ok' : 'status-dot down'} />
+                <span>{connection.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="sidebar-footer">
+          <button className="ghost-button sidebar-settings" onClick={() => startTransition(() => props.setRoute('settings'))} type="button">
+            <span className="door-icon sidebar-action-icon" aria-hidden="true">S</span>
+            <span>Settings</span>
+          </button>
+          <button className="ghost-button sidebar-exit" disabled={props.busy} onClick={props.onExitProfile} type="button">
+            <span className="door-icon sidebar-action-icon" aria-hidden="true">[]</span>
+            <span>Switch user</span>
+          </button>
+        </div>
+      </div>
+    </aside>
+  )
+}
+
+function LoadingScreen() {
+  return (
+    <div className="loading-screen">
+      <div className="loading-orb" />
+      <p>Preparing OmniArr…</p>
+    </div>
+  )
+}
+
+function AuthScreen({
+  mode,
+  password,
+  setPassword,
+  onSubmit,
+  busy,
+  error,
+}: {
+  mode: 'setup' | 'login'
+  password: string
+  setPassword: (value: string) => void
+  onSubmit: () => Promise<void>
+  busy: boolean
+  error: string
+}) {
+  const isPasswordValid = password.trim().length >= 8
+  return (
+    <div className="auth-layout">
+      <section className="auth-panel">
+        <p className="eyebrow">{mode === 'setup' ? 'First boot' : 'Secure access'}</p>
+        <h1>{mode === 'setup' ? 'Create your master password' : 'Sign in to OmniArr'}</h1>
+        <p className="auth-copy">
+          {mode === 'setup'
+            ? 'This password protects the session and encrypts service settings on the server.'
+            : 'The full backend remains protected behind the current session.'}
+        </p>
+        <div className="auth-form">
+          <label>
+            Password
+            <input
+              autoComplete={mode === 'setup' ? 'new-password' : 'current-password'}
+              className="input"
+              minLength={8}
+              onChange={(event) => setPassword(event.target.value)}
+              placeholder="At least 8 characters"
+              type="password"
+              value={password}
+            />
+          </label>
+          {!isPasswordValid && password.length > 0 ? <p className="helper-text">Password must be at least 8 non-space characters.</p> : null}
+          {error ? <p className="error-banner">{error}</p> : null}
+          {busy ? <p className="notice">Contacting backend…</p> : null}
+          <button className="primary-button" disabled={busy || !isPasswordValid} onClick={() => void onSubmit()} type="button">
+            {busy ? 'Processing…' : mode === 'setup' ? 'Initialize' : 'Sign in'}
+          </button>
+        </div>
+      </section>
+
+      <section className="auth-visual">
+        <div className="auth-wallpaper" />
+        <div className="glass-card">
+          <p className="eyebrow">Migration</p>
+          <ul className="feature-list">
+            <li>Server-side session auth</li>
+            <li>Encrypted persisted settings</li>
+            <li>Jellyfin, Sonarr, Radarr and qBittorrent</li>
+            <li>Rebuilt React UI with shared layout</li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function JellyfinOnboardingScreen(props: {
+  baseUrl: string
+  apiKey: string
+  users: SelectOption[]
+  busy: boolean
+  error: string
+  notice: string
+  onBaseUrlChange: (value: string) => void
+  onApiKeyChange: (value: string) => void
+  onLoadUsers: () => Promise<void>
+}) {
+  return (
+    <div className="auth-layout">
+      <section className="auth-panel">
+        <p className="eyebrow">Jellyfin setup</p>
+        <h1>Connect your server</h1>
+        <p className="auth-copy">
+          Enter your Jellyfin URL and API key to load the available profiles before entering the dashboard.
+        </p>
+        <div className="auth-form">
+          <label>
+            Jellyfin URL
+            <input className="input" onChange={(event) => props.onBaseUrlChange(event.target.value)} value={props.baseUrl} />
+          </label>
+          <label>
+            API key
+            <input className="input" onChange={(event) => props.onApiKeyChange(event.target.value)} value={props.apiKey} />
+          </label>
+          {props.error ? <p className="error-banner">{props.error}</p> : null}
+          {props.notice ? <p className="notice">{props.notice}</p> : null}
+          <button className="primary-button" disabled={props.busy || !props.baseUrl.trim() || !props.apiKey.trim()} onClick={() => void props.onLoadUsers()} type="button">
+            {props.busy ? 'Loading users…' : 'Load Jellyfin users'}
+          </button>
+        </div>
+      </section>
+      <section className="auth-visual">
+        <div className="auth-wallpaper" />
+        <div className="glass-card">
+          <p className="eyebrow">Profiles</p>
+          <div className="profile-grid compact">
+            {props.users.map((user) => (
+              <div className="profile-card static" key={user.id}>
+                <div className="profile-avatar">{user.label.slice(0, 1).toUpperCase()}</div>
+                <strong>{user.label}</strong>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function ProfileSelectionScreen(props: {
+  users: SelectOption[]
+  currentUserId: string
+  busy: boolean
+  error: string
+  notice: string
+  onSelectUser: (userId: string) => Promise<void>
+  onBackToOnboarding: () => void
+}) {
+  return (
+    <div className="profiles-layout">
+      <div className="profiles-header">
+        <p className="eyebrow">Profiles</p>
+        <h1>Who&apos;s watching?</h1>
+        {props.error ? <p className="error-banner">{props.error}</p> : null}
+        {props.notice ? <p className="notice">{props.notice}</p> : null}
+      </div>
+      <div className="profile-grid">
+        {props.users.map((user) => (
+          <button
+            className={user.id === props.currentUserId ? 'profile-card active' : 'profile-card'}
+            disabled={props.busy}
+            key={user.id}
+            onClick={() => void props.onSelectUser(user.id)}
+            type="button"
+          >
+            <div className="profile-avatar">{user.label.slice(0, 1).toUpperCase()}</div>
+            <strong>{user.label}</strong>
+          </button>
+        ))}
+      </div>
+      <div className="profiles-actions">
+        <button className="ghost-button" onClick={props.onBackToOnboarding} type="button">
+          Edit Jellyfin connection
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function HubPageView(props: {
+  route: AppRoute
+  hub?: HubPageResponse
+  loading: boolean
+  onRequest: (card: MediaCard) => Promise<void>
+  onOpenCard: (card: MediaCard) => void
+  busy: boolean
+}) {
+  if (props.loading) {
+    return <LoadingHub />
+  }
+
+  if (!props.hub) {
+    return (
+      <EmptyState
+        copy="This section could not be loaded. Check the service URLs and the current Jellyfin profile."
+        title="Section unavailable"
+      />
+    )
+  }
+
+  const hasHero = props.hub.hero.length > 0
+  const hasSections = props.hub.sections.some((section) => section.items.length > 0)
+  const hasContinueWatching = Boolean(props.hub.continueWatching?.length)
+
+  if (!hasHero && !hasSections && !hasContinueWatching) {
+    return (
+      <EmptyState
+        copy="Check Jellyfin, TMDb and the selected profile. This page is connected, but it has no media to display yet."
+        title="No media available"
+      />
+    )
+  }
+
+  return (
+    <div className="hub-page">
+      <HeroShowcase hero={props.hub.hero} onOpenCard={props.onOpenCard} />
+      {props.hub.continueWatching?.length ? (
+        <SectionCarousel busy={props.busy} onOpenCard={props.onOpenCard} onRequest={props.onRequest} section={{ id: 'continue', title: 'Continue Watching', style: 'episode', items: props.hub.continueWatching }} />
+      ) : null}
+      {props.hub.sections.map((section) => (
+        <SectionCarousel busy={props.busy} key={section.id} onOpenCard={props.onOpenCard} onRequest={props.onRequest} section={section} />
+      ))}
+    </div>
+  )
+}
+
+function HeroShowcase({ hero, onOpenCard }: { hero: MediaCard[]; onOpenCard: (card: MediaCard) => void }) {
+  const featured = hero[0]
+  if (!featured) {
+    return (
+      <div className="hero-showcase empty">
+        <div className="hero-copy">
+          <span className="badge">Library</span>
+          <h1>No featured media yet</h1>
+          <p>Once Jellyfin and TMDb return content, featured titles will appear here.</p>
+        </div>
+      </div>
+    )
+  }
+
+  const heroImage = featured.backdropUrl || featured.posterUrl
+
+  return (
+    <section
+      className="hero-showcase"
+      onClick={() => onOpenCard(featured)}
+      style={heroImage
+        ? { backgroundImage: `linear-gradient(180deg, rgba(6,10,18,0.12), rgba(7,7,10,0.94)), url("${heroImage}")` }
+        : undefined}
+    >
+      <div className="hero-copy">
+        <span className="badge">{featured.badge || 'Featured'}</span>
+        <h1>{featured.title}</h1>
+        <p>{featured.overview || featured.subtitle}</p>
+      </div>
+      <div className="hero-dots">
+        {hero.slice(0, 6).map((card) => (
+          <div className="hero-dot" key={card.id} title={card.title} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function SectionCarousel(props: {
+  section: HubPageResponse['sections'][number]
+  onRequest: (card: MediaCard) => Promise<void>
+  onOpenCard: (card: MediaCard) => void
+  busy: boolean
+}) {
+  if (!props.section.items.length) return null
+
+  return (
+    <section className="carousel-section">
+      <div className="carousel-title">{props.section.title}</div>
+      <div className="carousel-track">
+        {props.section.items.map((card) => (
+          <MediaTile busy={props.busy} card={card} key={card.id} onOpenCard={props.onOpenCard} onRequest={props.onRequest} styleType={props.section.style || 'landscape'} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function MediaTile(props: {
+  card: MediaCard
+  styleType: 'poster' | 'landscape' | 'profile' | 'genre' | 'network' | 'episode'
+  busy: boolean
+  onOpenCard: (card: MediaCard) => void
+  onRequest: (card: MediaCard) => Promise<void>
+}) {
+  const actionable = Boolean(props.card.tmdbId && (props.card.mediaType === 'movie' || props.card.mediaType === 'tv'))
+  const imageUrl = props.styleType === 'landscape' || props.styleType === 'episode'
+    ? (props.card.backdropUrl || props.card.posterUrl)
+    : props.card.posterUrl
+
+  return (
+    <article className={`media-tile ${props.styleType}`}>
+      <button className="media-art media-trigger" onClick={() => props.onOpenCard(props.card)} type="button">
+        {imageUrl ? <img alt={props.card.title} loading="lazy" src={imageUrl} /> : <div className="media-fallback" />}
+        {props.card.progress ? <div className="tile-progress"><div className="tile-progress-fill" style={{ width: `${props.card.progress}%` }} /></div> : null}
+      </button>
+      <div className="tile-copy">
+        <span className="badge subtle">{props.card.badge || props.card.subtitle}</span>
+        <h3>{props.card.title}</h3>
+        <p>{props.card.secondaryValue || props.card.subtitle}</p>
+        {actionable ? (
+          <button className="tile-action" disabled={props.busy} onClick={() => void props.onRequest(props.card)} type="button">
+            {props.card.actionLabel || 'Add'}
+          </button>
+        ) : null}
+      </div>
+    </article>
+  )
+}
+
+function TitleDetailsModal(props: {
+  card: MediaCard
+  config: AppConfig
+  onClose: () => void
+  onRequest: (card: MediaCard) => Promise<void>
+}) {
+  const canPlay = Boolean(props.card.providerId && props.config.jellyfin.baseUrl)
+  const canRequest = Boolean(props.card.tmdbId && (props.card.mediaType === 'movie' || props.card.mediaType === 'tv'))
+  const backgroundImage = props.card.backdropUrl || props.card.posterUrl
+
+  function handlePlay() {
+    if (!props.card.providerId || !props.config.jellyfin.baseUrl) return
+    const baseUrl = props.config.jellyfin.baseUrl.replace(/\/$/, '')
+    window.open(`${baseUrl}/web/#/details?id=${encodeURIComponent(props.card.providerId)}`, '_blank', 'noopener,noreferrer')
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={props.onClose} role="presentation">
+      <div className="title-modal" onClick={(event) => event.stopPropagation()} role="dialog" aria-modal="true">
+        <button className="modal-close" onClick={props.onClose} type="button">Close</button>
+        <div className="title-modal-hero" style={backgroundImage ? { backgroundImage: `linear-gradient(180deg, rgba(5, 8, 14, 0.18), rgba(5, 8, 14, 0.96)), url("${backgroundImage}")` } : undefined}>
+          <div className="title-modal-grid">
+            <div className="title-modal-poster">
+              {props.card.posterUrl ? <img alt={props.card.title} src={props.card.posterUrl} /> : <div className="media-fallback" />}
+            </div>
+            <div className="title-modal-copy">
+              <span className="badge">{props.card.badge || props.card.subtitle || 'Title'}</span>
+              <h2>{props.card.title}</h2>
+              <p>{props.card.overview || props.card.subtitle || 'No details available yet.'}</p>
+              <div className="title-modal-meta">
+                {props.card.subtitle ? <span>{props.card.subtitle}</span> : null}
+                {props.card.secondaryValue ? <span>{props.card.secondaryValue}</span> : null}
+              </div>
+              <div className="title-modal-actions">
+                {canPlay ? <button className="primary-button" onClick={handlePlay} type="button">Play</button> : null}
+                {canRequest ? <button className="secondary-button" onClick={() => void props.onRequest(props.card)} type="button">{props.card.actionLabel || 'Add'}</button> : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DownloadsPage({ downloads }: { downloads: DownloadItem[] }) {
+  return (
+    <div className="downloads-page">
+      <section className="carousel-section">
+        <div className="carousel-title">Downloads</div>
+        <div className="downloads-grid">
+          {downloads.length ? downloads.map((item) => <DownloadRow item={item} key={item.id} />) : <EmptyState copy="The queue will appear here as soon as your services start working." title="No active downloads" />}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function DownloadRow({ item }: { item: DownloadItem }) {
+  return (
+    <article className="download-row">
+      <div>
+        <p className="download-source">{item.source}</p>
+        <h4>{item.title}</h4>
+        <p className="download-detail">{item.detail}</p>
+      </div>
+      <div className="download-meta">
+        <strong>{item.progress}%</strong>
+        <p>{[item.size, item.speed, item.eta].filter(Boolean).join(' · ')}</p>
+        <div className="tile-progress"><div className="tile-progress-fill" style={{ width: `${item.progress}%` }} /></div>
+      </div>
+    </article>
+  )
+}
+
+function SettingsView(props: {
+  config: AppConfig
+  jellyfinUsersBusy: boolean
+  onLoadJellyfinUsers: () => Promise<void>
+  updateConfig: <K extends keyof AppConfig>(key: K, value: AppConfig[K]) => void
+  options: ServiceOptionsResponse
+  onSave: (event: FormEvent<HTMLFormElement>) => Promise<void>
+  busy: boolean
+}) {
+  return (
+    <form className="settings-page" onSubmit={(event) => void props.onSave(event)}>
+      <SettingsCard title="Preferences">
+        <label>
+          Language
+          <input className="input" onChange={(event) => props.updateConfig('preferences', { ...props.config.preferences, language: event.target.value })} value={props.config.preferences.language} />
+        </label>
+        <label>
+          Region
+          <input className="input" maxLength={2} onChange={(event) => props.updateConfig('preferences', { ...props.config.preferences, region: event.target.value })} value={props.config.preferences.region} />
+        </label>
+      </SettingsCard>
+
+      <SettingsCard title="Jellyfin">
+        <ServiceFields
+          apiKey={props.config.jellyfin.apiKey}
+          baseUrl={props.config.jellyfin.baseUrl}
+          onApiKeyChange={(apiKey) => props.updateConfig('jellyfin', { ...props.config.jellyfin, apiKey })}
+          onBaseUrlChange={(baseUrl) => props.updateConfig('jellyfin', { ...props.config.jellyfin, baseUrl })}
+        />
+        <div className="inline-actions">
+          <button className="secondary-button" disabled={props.jellyfinUsersBusy || !props.config.jellyfin.baseUrl.trim() || !props.config.jellyfin.apiKey.trim()} onClick={() => void props.onLoadJellyfinUsers()} type="button">
+            {props.jellyfinUsersBusy ? 'Loading users…' : 'Load users'}
+          </button>
+        </div>
+        <label>
+          User
+          <select className="input" onChange={(event) => props.updateConfig('jellyfin', { ...props.config.jellyfin, userId: event.target.value })} value={props.config.jellyfin.userId}>
+            <option value="">Select user</option>
+            {props.options.jellyfinUsers.map((option) => <option key={option.id} value={option.id}>{option.label}</option>)}
+          </select>
+        </label>
+      </SettingsCard>
+
+      <SettingsCard title="Sonarr">
+        <ServiceFields
+          apiKey={props.config.sonarr.apiKey}
+          baseUrl={props.config.sonarr.baseUrl}
+          onApiKeyChange={(apiKey) => props.updateConfig('sonarr', { ...props.config.sonarr, apiKey })}
+          onBaseUrlChange={(baseUrl) => props.updateConfig('sonarr', { ...props.config.sonarr, baseUrl })}
+        />
+      </SettingsCard>
+
+      <SettingsCard title="Radarr">
+        <ServiceFields
+          apiKey={props.config.radarr.apiKey}
+          baseUrl={props.config.radarr.baseUrl}
+          onApiKeyChange={(apiKey) => props.updateConfig('radarr', { ...props.config.radarr, apiKey })}
+          onBaseUrlChange={(baseUrl) => props.updateConfig('radarr', { ...props.config.radarr, baseUrl })}
+        />
+      </SettingsCard>
+
+      <SettingsCard title="qBittorrent">
+        <label>
+          Base URL
+          <input className="input" onChange={(event) => props.updateConfig('qbittorrent', { ...props.config.qbittorrent, baseUrl: event.target.value })} value={props.config.qbittorrent.baseUrl} />
+        </label>
+        <label>
+          Username
+          <input className="input" onChange={(event) => props.updateConfig('qbittorrent', { ...props.config.qbittorrent, username: event.target.value })} value={props.config.qbittorrent.username} />
+        </label>
+        <label>
+          Password
+          <input className="input" onChange={(event) => props.updateConfig('qbittorrent', { ...props.config.qbittorrent, password: event.target.value })} type="password" value={props.config.qbittorrent.password} />
+        </label>
+      </SettingsCard>
+
+      <SettingsCard title="TMDb">
+        <label>
+          Bearer token
+          <input className="input" onChange={(event) => props.updateConfig('tmdb', { bearerToken: event.target.value })} placeholder="Optional if already provided via TMDB_BEARER_TOKEN" value={props.config.tmdb.bearerToken} />
+        </label>
+      </SettingsCard>
+
+      <div className="actions-row">
+        <button className="primary-button" disabled={props.busy} type="submit">
+          {props.busy ? 'Saving…' : 'Save settings'}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+function SettingsCard({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="settings-card">
+      <h2>{title}</h2>
+      <div className="settings-fields">{children}</div>
+    </section>
+  )
+}
+
+function ServiceFields(props: {
+  baseUrl: string
+  apiKey: string
+  onBaseUrlChange: (value: string) => void
+  onApiKeyChange: (value: string) => void
+}) {
+  return (
+    <>
+      <label>
+        Base URL
+        <input className="input" onChange={(event) => props.onBaseUrlChange(event.target.value)} value={props.baseUrl} />
+      </label>
+      <label>
+        API key
+        <input className="input" onChange={(event) => props.onApiKeyChange(event.target.value)} value={props.apiKey} />
+      </label>
+    </>
+  )
+}
+
+function EmptyState({ title, copy }: { title: string; copy: string }) {
+  return (
+    <div className="empty-state">
+      <h4>{title}</h4>
+      <p>{copy}</p>
+    </div>
+  )
+}
+
+function LoadingHub() {
+  return (
+    <div className="hub-loading">
+      <div className="loading-placeholder" />
+      <p>Loading media…</p>
+    </div>
+  )
+}
+
+function resolveEntryStage(config: AppConfig, options: ServiceOptionsResponse): EntryStage {
+  if (!config.jellyfin.baseUrl.trim() || !config.jellyfin.apiKey.trim()) {
+    return 'onboarding'
+  }
+  if (!options.jellyfinUsers.length) {
+    return 'profiles'
+  }
+  if (!config.jellyfin.userId.trim()) {
+    return 'profiles'
+  }
+  return 'dashboard'
+}
+
+export default App

src/api.ts

@@ -0,0 +1,89 @@
+import type {
+  AppConfig,
+  AuthPayload,
+  AuthResponse,
+  DashboardResponse,
+  DownloadItem,
+  HubPageResponse,
+  ServiceOptionsResponse,
+  SessionResponse
+} from '../shared/contracts'
+
+async function request<T>(input: string, init?: RequestInit): Promise<T> {
+  let response: Response
+
+  try {
+    response = await fetch(input, {
+      ...init,
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(init?.headers ?? {}),
+      },
+    })
+  } catch {
+    throw new Error('Could not reach the OmniArr backend. Check that the server is running.')
+  }
+
+  if (!response.ok) {
+    const payload = (await safeJson(response)) as { error?: string } | null
+    throw new Error(payload?.error || `${response.status} ${response.statusText}`)
+  }
+
+  if (response.status === 204) {
+    return undefined as T
+  }
+
+  return (await response.json()) as T
+}
+
+async function safeJson(response: Response) {
+  try {
+    return await response.json()
+  } catch {
+    return null
+  }
+}
+
+export const api = {
+  getSession: () => request<SessionResponse>('/api/auth/session'),
+  register: (payload: AuthPayload) =>
+    request<AuthResponse>('/api/auth/register', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }),
+  login: (payload: AuthPayload) =>
+    request<AuthResponse>('/api/auth/login', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }),
+  logout: () =>
+    request<AuthResponse>('/api/auth/logout', {
+      method: 'POST',
+    }),
+  getSettings: () => request<AppConfig>('/api/settings'),
+  saveSettings: (payload: AppConfig) =>
+    request<{ config: AppConfig }>('/api/settings', {
+      method: 'PUT',
+      body: JSON.stringify(payload),
+    }),
+  getOptions: () => request<ServiceOptionsResponse>('/api/settings/options'),
+  loadJellyfinUsers: (payload: { baseUrl: string; apiKey: string }) =>
+    request<{ jellyfinUsers: ServiceOptionsResponse['jellyfinUsers'] }>('/api/settings/jellyfin-users', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }),
+  getDashboard: () => request<DashboardResponse>('/api/dashboard'),
+  getHub: (page: HubPageResponse['page']) => request<HubPageResponse>(`/api/hubs/${page}`),
+  getDownloads: () => request<DownloadItem[]>('/api/downloads'),
+  requestMovie: (tmdbId: number) =>
+    request<{ ok: boolean }>('/api/requests/movie', {
+      method: 'POST',
+      body: JSON.stringify({ tmdbId }),
+    }),
+  requestSeries: (tmdbId: number) =>
+    request<{ ok: boolean }>('/api/requests/series', {
+      method: 'POST',
+      body: JSON.stringify({ tmdbId }),
+    }),
+}

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="usLine truncated

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "shared"]
+}

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.server.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

tsconfig.server.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "./dist-server",
+    "rootDir": ".",
+    "types": ["node"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["server/**/*.ts", "shared/**/*.ts"]
+}

vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({ presets: [reactCompilerPreset()] })
+  ],
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:8787'
+    }
+  }
+})