chore: update ESLint configuration and add Prettier plugin

- Add eslint-plugin-prettier to integrate Prettier with ESLint.
- Update linting scripts to include CSS files.

ui/eslint.config.cjs

@@ -1,48 +1,44 @@
-const {
-    defineConfig,
-    globalIgnores,
-} = require("eslint/config");
+const { defineConfig, globalIgnores } = require("eslint/config");
+const eslintPluginPrettierRecommended = require("eslint-plugin-prettier/recommended");
 
 const globals = require("globals");
 
-const {
-    fixupConfigRules,
-} = require("@eslint/compat");
+const { fixupConfigRules } = require("@eslint/compat");
 
 const tsParser = require("@typescript-eslint/parser");
 const reactRefresh = require("eslint-plugin-react-refresh");
 const js = require("@eslint/js");
 
-const {
-    FlatCompat,
-} = require("@eslint/eslintrc");
+const { FlatCompat } = require("@eslint/eslintrc");
 
 const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
 });
 
-module.exports = defineConfig([{
+module.exports = defineConfig([
+  {
     languageOptions: {
-        globals: {
-            ...globals.browser,
-        },
+      globals: {
+        ...globals.browser,
+      },
 
-        parser: tsParser,
-        ecmaVersion: "latest",
-        sourceType: "module",
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
 
-        parserOptions: {
-            project: ["./tsconfig.json", "./tsconfig.node.json"],
-            tsconfigRootDir: __dirname,
-            ecmaFeatures: {
-                jsx: true
-            }
+      parserOptions: {
+        project: ["./tsconfig.json", "./tsconfig.node.json"],
+        tsconfigRootDir: __dirname,
+        ecmaFeatures: {
+          jsx: true,
         },
+      },
     },
 
-    extends: fixupConfigRules(compat.extends(
+    extends: fixupConfigRules(
+      compat.extends(
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/stylistic",
@@ -51,43 +47,53 @@ module.exports = defineConfig([{
         "plugin:react/jsx-runtime",
         "plugin:import/recommended",
         "prettier",
-    )),
+      ),
+    ),
 
     plugins: {
-        "react-refresh": reactRefresh,
+      "react-refresh": reactRefresh,
     },
 
     rules: {
-        "react-refresh/only-export-components": ["warn", {
-            allowConstantExport: true,
-        }],
+      "react-refresh/only-export-components": [
+        "warn",
+        {
+          allowConstantExport: true,
+        },
+      ],
 
-        "import/order": ["error", {
-            groups: ["builtin", "external", "internal", "parent", "sibling"],
-            "newlines-between": "always",
-        }],
+      "import/order": [
+        "error",
+        {
+          groups: ["builtin", "external", "internal", "parent", "sibling"],
+          "newlines-between": "always",
+        },
+      ],
     },
 
     settings: {
-        "react": {
-            "version": "detect"
-        },
-        "import/resolver": {
-            alias: {
-                map: [
-                    ["@components", "./src/components"],
-                    ["@routes", "./src/routes"],
-                    ["@assets", "./src/assets"],
-                    ["@", "./src"],
-                ],
+      react: {
+        version: "detect",
+      },
+      "import/resolver": {
+        alias: {
+          map: [
+            ["@components", "./src/components"],
+            ["@routes", "./src/routes"],
+            ["@assets", "./src/assets"],
+            ["@", "./src"],
+          ],
 
-                extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
-            },
+          extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
         },
+      },
     },
-}, globalIgnores([
+  },
+  globalIgnores([
     "**/dist",
     "**/.eslintrc.cjs",
     "**/tailwind.config.js",
     "**/postcss.config.js",
-])]);
+  ]),
+  eslintPluginPrettierRecommended,
+]);

ui/package-lock.json

@@ -59,12 +59,13 @@
         "eslint": "^9.26.0",
         "eslint-config-prettier": "^10.1.5",
         "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-prettier": "^5.4.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
         "globals": "^16.1.0",
         "postcss": "^8.5.3",
-        "prettier": "^3.5.3",
+        "prettier": "3.5.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^4.1.7",
         "typescript": "^5.8.3",
@@ -919,6 +920,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.4.tgz",
+      "integrity": "sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
+      }
+    },
     "node_modules/@react-aria/focus": {
       "version": "3.20.3",
       "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.3.tgz",
@@ -3539,6 +3553,37 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.4.0.tgz",
+      "integrity": "sha512-BvQOvUhkVQM1i63iMETK9Hjud9QhqBnbtT1Zc642p9ynzBuCe5pybkOnvqZIBypXmMlsGcnU4HZ8sCTPfpAexA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.11.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
@@ -3746,6 +3791,13 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-equals": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
@@ -5554,6 +5606,19 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/prettier-plugin-tailwindcss": {
       "version": "0.6.11",
       "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
@@ -6370,6 +6435,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/synckit": {
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.6.tgz",
+      "integrity": "sha512-2pR2ubZSV64f/vqm9eLPz/KOvR9Dm+Co/5ChLgeHl0yEDRc6h5hXHoxEQH8Y5Ljycozd3p1k5TTSVdzYGkPvLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.2.4"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",

ui/package.json

@@ -14,8 +14,8 @@
     "build:device": "tsc && vite build --mode=device --emptyOutDir",
     "build:staging": "tsc && vite build --mode=cloud-staging",
     "build:prod": "tsc && vite build --mode=cloud-production",
-    "lint": "eslint './src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix",
+    "lint": "eslint './src/**/*.{ts,tsx,css}'",
+    "lint:fix": "eslint './src/**/*.{ts,tsx,css}' --fix",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -70,12 +70,13 @@
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.4.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.1.0",
     "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
+    "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4.1.7",
     "typescript": "^5.8.3",