Use biome for frontend formatting and linting

.aspect/rules/external_repository_action_cache/npm_translate_lock_LTUzNjQ2NjY3

@@ -1,7 +1,7 @@
 # @generated
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "@@//frontend:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
-frontend/package-lock.json=1050907894
-frontend/package.json=-2118623145
+frontend/package-lock.json=1029306719
+frontend/package.json=1684304897
 frontend/patches/vite.patch=-1261363333
-frontend/pnpm-lock.yaml=1245402688
+frontend/pnpm-lock.yaml=1691778299

.github/workflows/frontend.yaml

@@ -29,6 +29,11 @@
                "name": "Check if any generated files changed",
                "run": "git add . && git diff --exit-code HEAD --"
             },
+            {
+               "name": "Lint and format",
+               "run": "npm run biome-ci",
+               "working-directory": "frontend"
+            },
             {
                "name": "Test",
                "run": "npm run test",

frontend/biome.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": [
+      "**",
+      "!!**/dist",
+      "!!**/node_modules",
+      "!**/src/routeTree.gen.ts",
+      "!**/src/lib/grpc-client",
+      "!**/src/graphql/__generated__",
+      "!**/possibleTypes.json"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedImports": "error"
+      },
+      "complexity": {
+        "noImportantStyles": "off"
+      }
+    }
+  },
+  "javascript": {
+    "parser": {
+      "jsxEverywhere": false
+    },
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

frontend/index.html

@@ -6,12 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- BB_PORTAL_CONFIGURATION_PLACEHOLDER -->
     <script>
-      (function() {
+      (() => {
         try {
-          var key = 'prefers-dark';
-          var isDark = localStorage.getItem(key) === 'true' || (!localStorage.getItem(key) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+          const key = 'prefers-dark';
+          const isDark = localStorage.getItem(key) === 'true' || (!localStorage.getItem(key) && window.matchMedia('(prefers-color-scheme: dark)').matches);
           document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-        } catch (e) {}
+        } catch (_e) {}
       })();
     </script>
   </head>

frontend/package.json

@@ -12,7 +12,11 @@
     "generate-graphql": "graphql-codegen --config ./src/graphql/codegen.ts",
     "generate-grpc": "./tools/grpc-client-gen.sh",
     "generate-possible-types": "node ./tools/create-possible-types.js",
-    "predev": "npm run generate"
+    "predev": "npm run generate",
+    "format": "biome format --write",
+    "lint": "biome lint --write",
+    "check": "biome check --write",
+    "biome-ci": "biome ci"
   },
   "dependencies": {
     "@ant-design/colors": "^7.0.2",
@@ -47,6 +51,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
+    "@biomejs/biome": "2.4.8",
     "@graphql-codegen/cli": "^6.1.3",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@rolldown/plugin-babel": "^0.2.1",