chore: Upgrade UI vite and tailwind packages (#443)

* chore: Upgrade UI vite and tailwind packages

Vite 5.2.0 -> 6.3.5
@vitejs/plugin-basic-ssl 1.2.0 -> 2.0.0
cva: 1.0.0-beta.1 -> 1.0.0-beta.3
focus-trap-react 10.2.3 -> 11.0.3
framer-motion 11.15.0 -> 12.11.0
@tailwindcss/postcss 4.1.6
@tailwindcss/vite 4.1.6
tailwind 3.4.17 -> 4.1.6
tailwind-merge 2.5.5 -> 3.3.0

Minor updates:
@headlessui/react 2.2.2 -> 2.2.3
@types/react 19.1.3 -> 19.1.4
@types/react-dom 19.1.3 -> 19.1.5
@typescript-eslint/eslint-plugin 8.32.0 -> 8.32.1
@typescript-eslint/parser 8.32.0 -> 8.32.1
react-simple-keyboard 3.8.71 -> 3.8.72

The new version of vite required an Node 22.15 (since that's current LTS and node 21.x is EOL)

The changes to css due to the tailwind 3 to 4 upgrade were done following [the upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3)

Done in this order (important):
`shadow-sm` -> `shadow-xs`
`shadow` -> `shadown-sm`
`rounded` -> `rounded-sm`
`outline-none` -> `outline-hidden`
`32rem_32rem_at_center` -> `center_at_32rem_32rem` (revised order of gradient props)
`ring-1 ring-black ring-opacity-5` -> `ring-1 ring-black/50`
`flex-shrink-0` -> `shrink-0`
`flex-grow-0` -> `grow-0`
`outline outline-1` -> `outline-1`

ALSO removed the **extra** `opacity-0` on the video element (trips up latest tailwind causing the video to be invisible)

FocusTrap is now not exported as the default, so change those imports

headlessui's Menu completely changed, so upgrade to the new syntax which necessitated a reorganization of the Header.tsx to enable the "menu" to still work

* Update eslint config and fix errors

Author: IDisposable

ui/.eslintrc.cjs

@@ -0,0 +1,93 @@
+const {
+    defineConfig,
+    globalIgnores,
+} = require("eslint/config");
+
+const globals = require("globals");
+
+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 compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+module.exports = defineConfig([{
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+        },
+
+        parser: tsParser,
+        ecmaVersion: "latest",
+        sourceType: "module",
+
+        parserOptions: {
+            project: ["./tsconfig.json", "./tsconfig.node.json"],
+            tsconfigRootDir: __dirname,
+            ecmaFeatures: {
+                jsx: true
+            }
+        },
+    },
+
+    extends: fixupConfigRules(compat.extends(
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/stylistic",
+        "plugin:react-hooks/recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:import/recommended",
+        "prettier",
+    )),
+
+    plugins: {
+        "react-refresh": reactRefresh,
+    },
+
+    rules: {
+        "react-refresh/only-export-components": ["warn", {
+            allowConstantExport: true,
+        }],
+
+        "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"],
+                ],
+
+                extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+            },
+        },
+    },
+}, globalIgnores([
+    "**/dist",
+    "**/.eslintrc.cjs",
+    "**/tailwind.config.js",
+    "**/postcss.config.js",
+])]);