feat: brand-new interface

This was initally generated by ai, but later has been heavily edited.
The reason why it has been implemented is that there are plans to
implement more features to ui, but it becomes hard to add new features
to plain js, so I decided to rewrite it in typescript.

Yet because it is still ai slop, it is still possible to enable old
interface via configuration, even though new interface is turned on by
default to get feedback

frontend/eslint.config.js

@@ -0,0 +1,67 @@
+import js from "@eslint/js";
+import stylistic from "@stylistic/eslint-plugin";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommendedTypeChecked],
+        files: ["src/**/*.{ts,tsx}"],
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+            "simple-import-sort": simpleImportSort,
+            "@stylistic": stylistic,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+
+            // imports
+            "simple-import-sort/imports": "error",
+            "simple-import-sort/exports": "error",
+
+            // brackets
+            "curly": "error",
+            "@stylistic/brace-style": ["error", "1tbs"],
+
+            // stylistic
+            "@stylistic/array-bracket-spacing": ["error", "never"],
+            "@stylistic/arrow-parens": ["error", "as-needed"],
+            "@stylistic/comma-dangle": ["error", "always-multiline"],
+            "@stylistic/comma-spacing": ["error", { before: false, after: true }],
+            "@stylistic/eol-last": ["error", "always"],
+            "@stylistic/indent": ["error", 4],
+            "@stylistic/jsx-quotes": ["error", "prefer-double"],
+            "@stylistic/max-len": ["error", {
+                code: 120,
+                ignoreComments: true,
+                ignoreStrings: true,
+                ignoreTemplateLiterals: true,
+                ignoreUrls: true,
+            }],
+            "@stylistic/no-extra-parens": ["error", "all"],
+            "@stylistic/no-multi-spaces": "error",
+            "@stylistic/no-multiple-empty-lines": ["error", { max: 1 }],
+            "@stylistic/no-trailing-spaces": "error",
+            "@stylistic/object-curly-spacing": ["error", "always"],
+            "@stylistic/quotes": ["error", "double"],
+            "@stylistic/semi": ["error", "always"],
+
+            // typescript
+            "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }],
+            "@typescript-eslint/explicit-function-return-type": ["error", { allowExpressions: true }],
+            "@typescript-eslint/no-deprecated": "error",
+            "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+        },
+    },
+);