chore: upgrade to Vue 3

.devcontainer/devcontainer.json

@@ -1,31 +1,24 @@
-// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.134.1/containers/typescript-node
 {
-  "name": "Node.js & TypeScript",
-  "build": {
-    "dockerfile": "Dockerfile",
-    // Update 'VARIANT' to pick a Node version: 10, 12, 14...
-    "args": {
-      "VARIANT": "16"
-    }
-  },
-  // Set *default* container specific settings.json values on container create.
-  "settings": {
-    "terminal.integrated.shell.linux": "/usr/bin/zsh"
+  "name": "jellyfin-vue Codespace (with support for Tauri and Docker development)",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18",
+  "features": {
+    "ghcr.io/devcontainers/features/rust:1": {
+      "profile": "default"
+    },
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {
+      "dockerDashComposeVersion": "v2"
+    },
+    "ghcr.io/devcontainers/features/github-cli:1": {}
   },
-  // Add the IDs of extensions you want installed when the container is created.
-  "extensions": [
-    "octref.vetur",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "lokalise.i18n-ally",
-    "ryanluker.vscode-coverage-gutters"
-  ],
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "containerEnv": { "SHELL": "/bin/bash" },
   "forwardPorts": [3000],
-  // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "npm install",
-  // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
-  // "remoteUser": "node"
-  "mounts": ["source=jellyfin-vue-history,target=/commandhistory,type=volume"]
+  "portsAttributes": {
+    "3000": {
+      "label": "Vite server",
+      "onAutoForward": "notify"
+    }
+  },
+  "postCreateCommand": "npm ci",
+  "postAttachCommand": "cat .vscode/extensions.json | jq -r .recommendations[] | xargs -n 1 code --install-extension",
+  "hostRequirements": { "cpus": 4, "memory": "8gb" }
 }

.docker/docker-entrypoint.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+## If the command has not been replaced by the user (i.e docker run image /bin/sh),
+## follow through the setup process
+if [[ "$*" = "nginx -g daemon off;" ]]; then
+    echo "==== Starting Jellyfin Vue setup ===="
+    echo
+    /setup.sh
+    echo
+    echo "====      Setup finished!        ===="
+    echo -e "\n"
+fi
+
+exec "$@"

.docker/nginx.conf

@@ -1,11 +1,9 @@
 server {
     listen 80;
-
     root /usr/share/nginx/html;
-
     location / {
         # First attempt to serve request as file, then as directory, then fall back to redirecting to index.html
-        # This is needed for history mode in Vue router
+        # This is needed for history mode in Vue router: https://router.vuejs.org/guide/essentials/history-mode.html#nginx
         try_files $uri $uri/ /index.html;
     }
 }

.docker/setup.sh

@@ -0,0 +1,21 @@
+#!/bin/sh
+
+CONFIG_FILE_PATH="/usr/share/nginx/html/config.json"
+echo "Writing data to $CONFIG_FILE_PATH..."
+
+if [[ "$HISTORY_ROUTER_MODE" == "0" ]]; then
+    ROUTER_MODE="hash"
+else
+    ROUTER_MODE="history"
+fi
+
+echo "DEFAULT_SERVERS value: $DEFAULT_SERVERS"
+echo "ROUTER_MODE value: $ROUTER_MODE"
+
+output=$(jq -r --arg R_MODE "$ROUTER_MODE" --arg SERVS "$DEFAULT_SERVERS" '
+    .defaultServerURLs = ($SERVS | split(",")) |
+    .routerMode = $R_MODE
+    ' $CONFIG_FILE_PATH
+)
+
+echo "$output" > $CONFIG_FILE_PATH

.github/renovate.json

@@ -1,40 +1,69 @@
 {
   "packageRules": [
     {
-      "matchManagers": ["npm"],
-      "matchDepTypes": ["devDependencies"],
+      "matchManagers": [
+        "npm"
+      ],
+      "matchDepTypes": [
+        "devDependencies"
+      ],
       "groupName": "development dependencies",
       "groupSlug": "dev-deps"
     },
     {
-      "matchManagers": ["npm"],
-      "matchDepTypes": ["dependencies"],
+      "matchManagers": [
+        "npm"
+      ],
+      "matchDepTypes": [
+        "dependencies"
+      ],
       "groupName": "dependencies",
       "groupSlug": "deps"
     },
     {
-      "matchManagers": ["github-actions"],
+      "matchManagers": [
+        "github-actions"
+      ],
       "groupName": "CI dependencies",
       "groupSlug": "ci-deps",
       "separateMajorMinor": false
     },
     {
-      "matchManagers": ["cargo"],
+      "matchManagers": [
+        "cargo"
+      ],
       "groupName": "Tauri dependencies",
       "groupSlug": "tauri-deps",
       "separateMajorMinor": false
     }
   ],
   "dependencyDashboard": false,
-  "ignoreDeps": ["npm", "swiper", "node"],
-  "enabledManagers": ["npm", "github-actions", "cargo"],
-  "labels": ["dependencies"],
+  "ignoreDeps": [
+    "npm",
+    "node"
+  ],
+  "enabledManagers": [
+    "npm",
+    "github-actions",
+    "cargo"
+  ],
+  "labels": [
+    "dependencies"
+  ],
   "rebaseWhen": "behind-base-branch",
   "rangeStrategy": "pin",
   "lockFileMaintenance": {
     "enabled": true,
-    "schedule": ["every 2 months on the first day of the month"]
+    "schedule": [
+      "every 2 months on the first day of the month"
+    ]
   },
-  "assignees": ["ferferga", "ThibaultNocchi"],
-  "reviewers": ["ferferga", "ThibaultNocchi"]
+  "assignees": [
+    "ferferga",
+    "ThibaultNocchi"
+  ],
+  "reviewers": [
+    "ferferga",
+    "ThibaultNocchi"
+  ]
 }

.github/workflows/automation.yml

@@ -9,7 +9,7 @@ on:
     branches:
       - master
     paths-ignore:
-      - '**/*.md'
+      - "**/*.md"
   pull_request_target:
 
 jobs:
@@ -63,10 +63,10 @@ jobs:
         if: ${{ github.event_name == 'pull_request_target' }}
         continue-on-error: true
         with:
-          repo-token: '${{ secrets.JF_BOT_TOKEN }}'
+          repo-token: "${{ secrets.JF_BOT_TOKEN }}"
 
       - name: Check all PRs for merge conflicts ⛔
         uses: eps1lon/actions-label-merge-conflict@v2.1.0
         with:
-          dirtyLabel: 'merge conflict'
+          dirtyLabel: "merge conflict"
           repoToken: ${{ secrets.JF_BOT_TOKEN }}

.github/workflows/codeQL.yml

@@ -10,7 +10,7 @@ on:
       - master
   pull_request:
     paths-ignore:
-      - '**/*.md'
+      - "**/*.md"
   workflow_call:
 
 jobs:

.github/workflows/code_quality.yml

@@ -7,9 +7,9 @@ concurrency:
 on:
   pull_request:
     paths-ignore:
-      - '**/*.md'
+      - "**/*.md"
   schedule:
-    - cron: '30 7 * * 6'
+    - cron: "30 7 * * 6"
   workflow_dispatch:
 
 jobs:
@@ -34,41 +34,34 @@ jobs:
       - name: Setup node environment ⚙️
         uses: actions/setup-node@v3.5.1
         with:
-          node-version: 16
-          cache: 'npm'
+          node-version: 18
           check-latest: true
 
       - name: Install dependencies 📦
         run: npm ci --no-audit
 
       - name: Run linter ✏️
-        run: 'npm run lint:js && npm run lint:style'
+        run: npm run lint
 
-  test:
-    name: Test 🧫
+  typecheck:
+    name: Typecheck 🈯
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout ⬇️
         uses: actions/checkout@v3.2.0
-        with:
-          fetch-depth: 0
 
       - name: Setup node environment ⚙️
         uses: actions/setup-node@v3.5.1
         with:
-          node-version: 16
-          cache: 'npm'
+          node-version: 18
           check-latest: true
 
       - name: Install dependencies 📦
         run: npm ci --no-audit
 
-      - name: Run tests 🧪
-        run: npm run test
-
-      - name: Upload coverage ⬆️
-        uses: codecov/codecov-action@v3.1.1
+      - name: Run typecheck 📖
+        run: npm run typecheck
 
   build:
     name: Build frontend 🛠️
@@ -77,9 +70,9 @@ jobs:
       fail-fast: false
       matrix:
         platform:
-          - 'linux/amd64'
-          - 'linux/arm64'
-          - 'linux/arm'
+          - "linux/amd64"
+          - "linux/arm64"
+          - "linux/arm"
 
     steps:
       - name: Checkout ⬇️
@@ -131,9 +124,9 @@ jobs:
       fail-fast: false
       matrix:
         platform:
-          - 'macos-latest'
-          - 'ubuntu-latest'
-          - 'windows-latest'
+          - "macos-latest"
+          - "ubuntu-latest"
+          - "windows-latest"
 
     runs-on: ${{ matrix.platform }}
     steps:
@@ -143,8 +136,7 @@ jobs:
       - name: Setup node environment ⚙️
         uses: actions/setup-node@v3.5.1
         with:
-          node-version: 16
-          cache: 'npm'
+          node-version: 18
           check-latest: true
 
       - name: Install dependencies 📦
@@ -157,10 +149,10 @@ jobs:
           sudo apt-get install -y webkit2gtk-4.0
 
       - name: Generate Tauri icons 🖌️
-        run: 'npm run tauri:icon -w tauri'
+        run: "npm run tauri:icon -w tauri"
 
       - name: Build Tauri 🛠️
-        run: 'npm run tauri:build -w tauri'
+        run: "npm run tauri:build -w tauri"
 
       - name: Upload artifact (Linux) ⬆️🐧
         uses: actions/upload-artifact@v3.1.1
@@ -194,7 +186,7 @@ jobs:
     needs:
       - dependency-review
       - lint
-      - test
+      - typecheck
       - build
       - build_tauri
 

.github/workflows/job_messages.yml

@@ -27,7 +27,7 @@ on:
         value: ${{ jobs.msg.outputs.msg }}
       marker:
         description: Hidden marker to detect PR comments composed by the bot
-        value: 'CFPages-deployment'
+        value: "CFPages-deployment"
 
 jobs:
   msg:

.github/workflows/release.yml

@@ -72,9 +72,9 @@ jobs:
       fail-fast: false
       matrix:
         platform:
-          - 'macos-latest'
-          - 'ubuntu-latest'
-          - 'windows-latest'
+          - "macos-latest"
+          - "ubuntu-latest"
+          - "windows-latest"
 
     runs-on: ${{ matrix.platform }}
     steps:
@@ -84,8 +84,7 @@ jobs:
       - name: Setup node environment ⚙️
         uses: actions/setup-node@v3.5.1
         with:
-          node-version: 16
-          cache: 'npm'
+          node-version: 18
           check-latest: true
 
       - name: Install dependencies 📦
@@ -98,10 +97,10 @@ jobs:
           sudo apt-get install -y webkit2gtk-4.0
 
       - name: Generate Tauri icons 🖌️
-        run: 'npm run tauri:icon -w tauri'
+        run: "npm run tauri:icon -w tauri"
 
       - name: Build Tauri 🛠️
-        run: 'npm run tauri:build -w tauri'
+        run: "npm run tauri:build -w tauri"
 
       - name: Upload artifact (Linux) ⬆️🐧
         uses: actions/upload-artifact@v3.1.1