feat(ui): update ui packages and formatting checks

.github/copilot-instructions.md

@@ -100,8 +100,8 @@ poetry run pyright --level warning
 **Lint/Check**
 
 ```bash
-pnpm run lint        # Prettier
-pnpm eslint src      # ESLint
+pnpm run lint        # oxfmt + oxlint
+pnpm oxlint src      # oxlint
 pnpm tsc --noEmit    # TypeScript type-check
 ```
 
@@ -187,7 +187,7 @@ README.md, LICENSE, .gitignore, .pre-commit-config.yaml, pyrightconfig.json
 - **Pre-commit** via `.pre-commit-config.yaml` (Ruff, formatters, commit message, poetry lock check).
 - **Type checks** for Python (Ruff, mypy, pyright).
 - **Type checks** for frontend (TypeScript).
-- **Formatting**: Prettier for UI, Ruff for Python.
+- **Formatting**: oxfmt and oxlint for UI, Ruff for Python.
 
 ### **Frontend UI Unit Tests**
 
@@ -227,7 +227,7 @@ README.md, LICENSE, .gitignore, .pre-commit-config.yaml, pyrightconfig.json
 
 - Install deps (with lockfile validation).
 - Typecheck (Ruff/mypy/pyright for Python, tsc for TypeScript).
-- Lint/format (Ruff, Prettier, ESLint).
+- Lint/format (Ruff, oxfmt, oxlint).
 - Complete test suite.
 - PR title validation (.github/workflows/pr-title-check.yml).
 - All jobs **must pass** for UI/API/plugins—PRs will be blocked otherwise.
@@ -280,6 +280,8 @@ README.md, LICENSE, .gitignore, .pre-commit-config.yaml, pyrightconfig.json
 
 > **IMPORTANT FOR ALL FUTURE AGENTS**: When you learn something new, encounter a pitfall, or discover a non-obvious convention in this repository, **add a note to this section** before finishing your task. This keeps institutional knowledge available across conversations.
 
+- In `ui/`, `@fontsource/roboto` may fail TypeScript side-effect import resolution at the package root even when the dependency is installed; prefer importing the explicit CSS entry `@fontsource/roboto/index.css` from the app entrypoint.
+
 ---
 
 ### Changelog Entries for Bug Fixes

.github/workflows/ui-workflow.yml

@@ -90,13 +90,13 @@ jobs:
       - name: Run type checking
         run: pnpm tsc --noEmit
 
-      - name: Run prettier formatting checks
-        run: pnpm run lint
+      - name: Run oxfmt checks
+        run: pnpm oxfmt src --check
 
-      - name: Run eslint linter checks
-        run: pnpm eslint src
+      - name: Run oxlint checks
+        run: pnpm oxlint src
 
-      - name: Run Unit Tests
+      - name: Run unit Tests
         run: pnpm test
 
       - name: Report Coverage

.pre-commit-config.yaml

@@ -19,6 +19,11 @@ repos:
   #   hooks:
   #     - id: conventional-pre-commit
   #       stages: [commit-msg]
+  - repo: https://github.com/oxc-project/mirrors-oxfmt
+    rev: v0.58.0
+    hooks:
+      - id: oxfmt
+        name: Run oxfmt
   - repo: local
     hooks:
       - id: poetry-check-api
@@ -49,9 +54,9 @@ repos:
         language: script
         stages: [pre-commit]
         files: ^plugins/sentinel/.*\.(toml|lock)
-      - id: prettier
-        name: Prettier Formatting Checks
-        entry: hooks/prettier.sh
+      - id: oxlint
+        name: Run oxlint
+        entry: hooks/oxlint.sh
         language: script
         stages: [pre-commit]
         files: ^ui/.*

.vscode/extensions.json

@@ -6,7 +6,6 @@
     "ms-python.vscode-pylance",
     "charliermarsh.ruff",
     "github.vscode-github-actions",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
+    "oxc.oxc-vscode",
   ]
 }

.vscode/settings.json

@@ -6,10 +6,10 @@
     "typescriptreact"
   ],
   "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[scss]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[json]": {
     "editor.defaultFormatter": "vscode.json-language-features"
@@ -18,16 +18,16 @@
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[yaml]": {
     "editor.insertSpaces": true,
@@ -102,7 +102,6 @@
       "changeProcessCWD": true
     }
   ],
-  "prettier.configPath": "ui/.prettierrc",
   "search.exclude": {
     "**/node_modules": true,
     "**/bower_components": true,

documentation/docs/developer/frontend.fr.md

@@ -28,7 +28,7 @@ L'interface utilisateur fournit plusieurs scripts npm pour le développement :
 - `pnpm dev` ou `pnpm start` - Démarrer le serveur de développement Vite
 - `pnpm build` - Construire l'application pour la production (exécute le compilateur TypeScript et la construction Vite)
 - `pnpm serve` - Prévisualiser la construction de production localement
-- `pnpm lint` - Formater le code en utilisant Prettier
+- `pnpm lint` - Formater le code en utilisant oxfmt et oxlint
 - `pnpm test` - Exécuter les tests avec couverture en utilisant Vitest
 - `pnpm test-ui` - Exécuter les tests avec interface et couverture
 
@@ -67,10 +67,9 @@ L'interface utilisateur Howler est construite avec des technologies web modernes
 ### Outils de développement
 
 - **Vitest** - Framework de tests unitaires rapide (natif Vite)
-- **ESLint** - Linting de code avec intégration TypeScript, React et Prettier
-- **Prettier** - Formatage de code
+- **oxfmt et oxlint** - Formatage et Linting de code avec intégration TypeScript, React
 
 ## Visual Studio Code
 
 Si vous développez dans VS Code, il est recommandé d'installer les extensions recommandées de l'espace de travail pour
-le support intégré de Prettier et ESLint. Celles-ci se trouvent dans le fichier `.vscode/extensions.json`.
+le support intégré de oxfmt et oxlint. Celles-ci se trouvent dans le fichier `.vscode/extensions.json`.

documentation/docs/developer/frontend.md

@@ -28,7 +28,7 @@ The UI provides several npm scripts for development:
 - `pnpm dev` or `pnpm start` - Start the Vite development server
 - `pnpm build` - Build the application for production (runs TypeScript compiler and Vite build)
 - `pnpm serve` - Preview the production build locally
-- `pnpm lint` - Format code using Prettier
+- `pnpm lint` - Format code using oxfmt and oxlint
 - `pnpm test` - Run tests with coverage using Vitest
 - `pnpm test-ui` - Run tests with UI and coverage
 
@@ -67,10 +67,8 @@ The Howler UI is built with modern web technologies:
 ### Development Tools
 
 - **Vitest** - Fast unit testing framework (Vite-native)
-- **ESLint** - Code linting with TypeScript, React, and Prettier integration
-- **Prettier** - Code formatting
+- **oxfmt and oxlint** - Code linting and formatting with TypeScript, React integration
 
 ## Visual Studio Code
 
-If developing in VS Code, it is recommended to install the workspace's recommended extensions for built-in Prettier and
-ESLint support. These can be found in the `.vscode/extensions.json` file.
+If developing in VS Code, it is recommended to install the workspace's recommended extensions for built-in oxfmt and oxlint support. These can be found in the `.vscode/extensions.json` file.

hooks/oxlint.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+set -euo pipefail
+
+cd $(dirname $(dirname $0))/ui
+
+lintable_files=()
+
+for file in "$@"; do
+	# pre-commit passes repo-root-relative paths (for example: ui/src/foo.ts)
+	if [[ "$file" == ui/src/* ]]; then
+		relative_path="${file#ui/}"
+		if [[ "$relative_path" =~ \.(js|jsx|ts|tsx|mjs|cjs)$ ]] && [[ -f "$relative_path" ]]; then
+			lintable_files+=("$relative_path")
+		fi
+	fi
+done
+
+if [[ ${#lintable_files[@]} -eq 0 ]]; then
+	echo "No changed lintable files in ui/src; skipping oxlint."
+	exit 0
+fi
+
+pnpx oxlint --fix "${lintable_files[@]}"

ui/.oxfmtrc.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "arrowParens": "avoid",
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "src/models/entities/generated",
+    "src/locales/en/**/*.json",
+    "src/locales/fr/**/*.json",
+    "src/plugins/clue/locales/*.json"
+  ]
+}