fix: adapt frontend to dep updates (Vuetify 4, TS 6, ESLint 10, Vite 8)

- tsconfig: drop TS6-deprecated baseUrl; moduleResolution Node -> Bundler
- eslint: migrate .eslintrc.cjs to flat config (eslint.config.mjs);
  add vue-eslint-parser, globals, @eslint/js; drop --ext from lint scripts
- vuetify 4: theme.global.name.value = x -> theme.change(x)
- drop unused watch import; rename unused status arg; remove
  required: true from prop that has a default

frontend/.eslintrc.cjs

@@ -1,42 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    es2022: true,
-    node: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:vue/vue3-recommended',
-  ],
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  plugins: ['@typescript-eslint', 'vue'],
-  rules: {
-    // TypeScript
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-    '@typescript-eslint/no-explicit-any': 'warn',
-    '@typescript-eslint/ban-ts-comment': 'warn',
-
-    // Vue
-    'vue/multi-word-component-names': 'off',
-    'vue/no-v-html': 'off',
-    'vue/require-default-prop': 'off',
-    'vue/max-attributes-per-line': 'off',
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/html-closing-bracket-newline': 'off',
-    'vue/html-self-closing': 'off',
-    'vue/html-indent': 'off',
-    'vue/v-slot-style': 'off',
-
-    // General
-    'no-console': ['warn', { allow: ['warn', 'error'] }],
-    'prefer-const': 'error',
-  },
-  ignorePatterns: ['dist', 'node_modules', 'src/generated', '*.d.ts'],
-}

frontend/eslint.config.mjs

@@ -0,0 +1,57 @@
+import js from '@eslint/js'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import vuePlugin from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+import globals from 'globals'
+
+export default [
+  {
+    ignores: ['dist/**', 'node_modules/**', 'src/generated/**', '**/*.d.ts'],
+  },
+  js.configs.recommended,
+  ...vuePlugin.configs['flat/recommended'],
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,ts,tsx,cts,mts,vue}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2022,
+      },
+      parser: vueParser,
+      parserOptions: {
+        parser: tsParser,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      vue: vuePlugin,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'off',
+      'vue/require-default-prop': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/html-closing-bracket-newline': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/html-indent': 'off',
+      'vue/v-slot-style': 'off',
+
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'prefer-const': 'error',
+    },
+  },
+]

frontend/package.json

@@ -7,43 +7,46 @@
     "dev": "node --no-warnings ./node_modules/.bin/vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "lint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint .",
     "test": "vitest",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@fontsource/roboto": "^5.2.9",
+    "@fontsource/roboto": "^5.2.10",
     "@mdi/font": "^7.4.47",
     "fork-awesome": "^1.2.0",
-    "openapi-fetch": "^0.15.0",
+    "openapi-fetch": "^0.17.0",
     "pinia": "^3.0.4",
     "roboto-fontface": "^0.10.0",
-    "vue": "^3.5.25",
-    "vuetify": "^3.11.0"
+    "vue": "^3.5.32",
+    "vuetify": "^4.0.5"
   },
   "devDependencies": {
-    "@babel/types": "^7.28.5",
+    "@babel/types": "^7.29.0",
+    "@eslint/js": "^10.0.1",
     "@testing-library/vue": "^8.1.0",
-    "@types/node": "^24.10.1",
-    "@typescript-eslint/eslint-plugin": "^8.48.0",
-    "@typescript-eslint/parser": "^8.48.0",
-    "@vitejs/plugin-vue": "^6.0.2",
+    "@types/node": "^25.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
+    "@vitejs/plugin-vue": "^6.0.6",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.39.1",
-    "eslint-plugin-vue": "^10.6.1",
-    "happy-dom": "^20.0.10",
-    "openapi-typescript": "^7.10.1",
-    "prettier": "^3.6.2",
-    "sass": "^1.94.2",
-    "typescript": "^5.9.3",
-    "unplugin-fonts": "^1.4.0",
-    "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.2.4",
-    "vite-plugin-vuetify": "^2.1.2",
-    "vitest": "^4.0.14",
-    "vue-tsc": "^3.1.5"
+    "eslint": "^10.2.1",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.5.0",
+    "happy-dom": "^20.9.0",
+    "openapi-typescript": "^7.13.0",
+    "prettier": "^3.8.3",
+    "sass": "^1.99.0",
+    "typescript": "^6.0.3",
+    "unplugin-fonts": "^2.0.0",
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "^8.0.8",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vitest": "^4.1.4",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^3.2.7"
   },
   "packageManager": "yarn@4.14.1"
 }

frontend/src/components/CurrentlyBuilding/QueuedPackagesList.vue

@@ -37,7 +37,6 @@ import type { components } from '@/api'
 defineProps({
   packages: {
     type: Array<components['schemas']['Package']>,
-    required: true,
     default: () => []
   }
 })

frontend/src/composables/Packages/usePackageDisplay.ts

@@ -17,8 +17,7 @@ export function usePackageDisplay() {
     }
   }
 
-  const getStatusColor = (status: components['schemas']['Package']['status']) => {
-    // Return empty string - we now use StatusBadge component instead of row colors
+  const getStatusColor = (_status: components['schemas']['Package']['status']) => {
     return ''
   }
 

frontend/src/composables/useTheme.ts

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useTheme as useVuetifyTheme } from 'vuetify'
 
 type ThemeMode = 'light' | 'dark' | 'system'
@@ -38,8 +38,7 @@ export function useTheme() {
       }, 300)
     }
 
-    // Apply to Vuetify
-    vuetifyTheme.global.name.value = dark ? 'darkTheme' : 'lightTheme'
+    vuetifyTheme.change(dark ? 'darkTheme' : 'lightTheme')
 
     // Apply data attribute for CSS variables
     document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')

frontend/tsconfig.json

@@ -1,10 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "strict": true,
     "jsx": "preserve",
     "resolveJsonModule": true,
@@ -14,10 +13,8 @@
     "skipLibCheck": true,
     "noEmit": true,
     "paths": {
-      "@/*": [
-       "src/*"
-      ]
-     }
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }],

frontend/tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.mts"]