diff --git a/.github/workflows/typescript.yml b/.github/workflows/typescript.yml
new file mode 100644
index 0000000..9ee6610
--- /dev/null
+++ b/.github/workflows/typescript.yml
@@ -0,0 +1,41 @@
+name: TypeScript Type Check
+
+permissions:
+  contents: read
+
+on:
+  push:
+    branches:
+      - "*"
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  type-check:
+    name: TypeScript Type Check
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./app
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: "./app/package-lock.json"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run TypeScript type check
+        run: npm run type-check
+
+      - name: Run ESLint
+        run: npm run lint
+        continue-on-error: true
diff --git a/app/.eslintrc.json b/app/.eslintrc.json
deleted file mode 100644
index ab13d32..0000000
--- a/app/.eslintrc.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-    "env": {
-      "browser": true,
-      "es2021": true,
-      "node": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:react-hooks/recommended"
-    ],
-    "parserOptions": {
-      "ecmaFeatures": {
-        "jsx": true
-      },
-      "ecmaVersion": 12,
-      "sourceType": "module"
-    },
-    "plugins": [
-      "react"
-    ],
-    "rules": {
-      "react/prop-types": "off",
-      "no-unused-vars": "warn"
-    },
-    "settings": {
-      "react": {
-        "version": "detect"
-      }
-    }
-  }
\ No newline at end of file
diff --git a/app/eslint.config.mjs b/app/eslint.config.mjs
new file mode 100644
index 0000000..b85bc40
--- /dev/null
+++ b/app/eslint.config.mjs
@@ -0,0 +1,107 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig([
+  globalIgnores([
+    '**/node_modules',
+    '**/dist',
+    '**/build',
+    '**/coverage',
+    '**/public',
+    '**/*.js',
+    '**/vite.config.ts',
+    '**/eslint.config.mjs',
+  ]),
+  {
+    extends: fixupConfigRules(
+      compat.extends(
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking'
+      )
+    ),
+
+    plugins: {
+      react: fixupPluginRules(react),
+      'react-hooks': fixupPluginRules(reactHooks),
+      '@typescript-eslint': fixupPluginRules(typescriptEslint),
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+
+        project: './tsconfig.json',
+      },
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      'no-console': [
+        'warn',
+        {
+          allow: ['warn', 'error', 'debug'],
+        },
+      ],
+
+      'no-duplicate-imports': 'error',
+      'no-unused-vars': 'off',
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+
+      '@typescript-eslint/consistent-type-imports': [
+        'warn',
+        {
+          prefer: 'type-imports',
+        },
+      ],
+
+      '@typescript-eslint/no-misused-promises': 'warn',
+      '@typescript-eslint/no-floating-promises': 'warn',
+      '@typescript-eslint/unbound-method': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'warn',
+    },
+  },
+]);
diff --git a/app/package-lock.json b/app/package-lock.json
index 234707b..cdcbeb7 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -36,14 +36,24 @@
         "unist-util-visit": "^5.0.0"
       },
       "devDependencies": {
-        "@types/react": "^18.2.67",
-        "@types/react-dom": "^18.2.22",
+        "@eslint/compat": "^1.2.9",
+        "@types/babel__core": "^7.20.5",
+        "@types/node": "^22.14.0",
+        "@types/react": "^18.3.20",
+        "@types/react-dom": "^18.3.6",
+        "@types/react-syntax-highlighter": "^15.5.13",
+        "@typescript-eslint/eslint-plugin": "^8.32.1",
+        "@typescript-eslint/parser": "^8.32.1",
         "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.27.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "postcss": "^8.4.47",
         "postcss-preset-mantine": "^1.17.0",
         "postcss-simple-vars": "^7.0.1",
         "sass": "^1.80.4",
-        "vite": "^6.3.4",
+        "typescript": "^5.8.2",
+        "vite": "^6.2.4",
         "vite-plugin-compression2": "^1.3.0"
       }
     },
@@ -235,27 +245,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
-      "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
+      "integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.26.9",
-        "@babel/types": "^7.26.9"
+        "@babel/template": "^7.27.0",
+        "@babel/types": "^7.27.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
-      "integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.9"
+        "@babel/types": "^7.27.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -309,15 +319,15 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
-      "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
+      "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.26.9",
-        "@babel/types": "^7.26.9"
+        "@babel/parser": "^7.27.0",
+        "@babel/types": "^7.27.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -343,9 +353,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
-      "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -979,6 +989,223 @@
         "node": ">=18"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/compat": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.2.9.tgz",
+      "integrity": "sha512-gCdSY54n7k+driCadyMNv8JSPzYLeDVM/ikZRtvtROBpRdFSkS8W9A82MqsaY7lZuwL0wiapgD0NT1xT0hyJsA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": "^9.10.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
+      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.2.tgz",
+      "integrity": "sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
+      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.27.0.tgz",
+      "integrity": "sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
+      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.14.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.8",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
@@ -1032,6 +1259,72 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -2009,6 +2302,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/katex": {
       "version": "0.16.7",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
@@ -2037,14 +2337,13 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.7.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.0.tgz",
-      "integrity": "sha512-MOdOibwBs6KW1vfqz2uKMlxq5xAfAZ98SZjO8e3XnAbFnTJtAspqhWk7hrdSAs9/Y14ZWMiy7/MxMUzAOadYEw==",
+      "version": "22.14.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
+      "integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
-        "undici-types": "~6.19.2"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/prop-types": {
@@ -2055,9 +2354,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.9",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.9.tgz",
-      "integrity": "sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ==",
+      "version": "18.3.20",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
+      "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -2066,9 +2365,19 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+      "version": "18.3.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.6.tgz",
+      "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2081,6 +2390,212 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.32.1.tgz",
+      "integrity": "sha512-6u6Plg9nP/J1GRpe/vcjjabo6Uc5YQPAMxsgQyGC/I0RuukiG1wIe3+Vtg3IrSCVJDmqK3j8adrtzXSENRtFgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.32.1",
+        "@typescript-eslint/type-utils": "8.32.1",
+        "@typescript-eslint/utils": "8.32.1",
+        "@typescript-eslint/visitor-keys": "8.32.1",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.32.1.tgz",
+      "integrity": "sha512-LKMrmwCPoLhM45Z00O1ulb6jwyVr2kr3XJp+G+tSEZcbauNnScewcQwtJqXDhXeYPDEjZ8C1SjXm015CirEmGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.32.1",
+        "@typescript-eslint/types": "8.32.1",
+        "@typescript-eslint/typescript-estree": "8.32.1",
+        "@typescript-eslint/visitor-keys": "8.32.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.32.1.tgz",
+      "integrity": "sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.32.1",
+        "@typescript-eslint/visitor-keys": "8.32.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.32.1.tgz",
+      "integrity": "sha512-mv9YpQGA8iIsl5KyUPi+FGLm7+bA4fgXaeRcFKRDRwDMu4iwrSHeDPipwueNXhdIIZltwCJv+NkxftECbIZWfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.32.1",
+        "@typescript-eslint/utils": "8.32.1",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.32.1.tgz",
+      "integrity": "sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.32.1.tgz",
+      "integrity": "sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.32.1",
+        "@typescript-eslint/visitor-keys": "8.32.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.32.1.tgz",
+      "integrity": "sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.32.1",
+        "@typescript-eslint/types": "8.32.1",
+        "@typescript-eslint/typescript-estree": "8.32.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.32.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.32.1.tgz",
+      "integrity": "sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.32.1",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -2108,13 +2623,11 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2122,6 +2635,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -2134,12 +2657,214 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -2150,6 +2875,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -2165,6 +2897,16 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "license": "ISC"
     },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -2220,6 +2962,66 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -2261,6 +3063,23 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
@@ -2365,6 +3184,26 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2396,6 +3235,13 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2409,6 +3255,21 @@
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
       "license": "MIT"
     },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/css-selector-parser": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-3.0.5.tgz",
@@ -2488,6 +3349,60 @@
         "node": ">=18"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -2524,6 +3439,49 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2594,6 +3552,19 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -2604,6 +3575,21 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.113",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.113.tgz",
@@ -2611,6 +3597,180 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/es-abstract": {
+      "version": "1.23.9",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
+      "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.0",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-regex": "^1.2.1",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.0",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.3",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.18"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz",
@@ -2662,6 +3822,240 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.27.0.tgz",
+      "integrity": "sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.20.0",
+        "@eslint/config-helpers": "^0.2.1",
+        "@eslint/core": "^0.14.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.27.0",
+        "@eslint/plugin-kit": "^0.3.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.3.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "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",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
+      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/esm": {
       "version": "3.2.25",
       "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
@@ -2671,6 +4065,73 @@
         "node": ">=6"
       }
     },
+    "node_modules/espree": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/estree-util-is-identifier-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
@@ -2688,6 +4149,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2717,6 +4188,20 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -2740,6 +4225,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2753,6 +4251,60 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
@@ -2790,6 +4342,47 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2800,6 +4393,31 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-nonce": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
@@ -2809,6 +4427,38 @@
         "node": ">=6"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -2832,6 +4482,137 @@
         "node": ">=4"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hast-util-from-dom": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.0.tgz",
@@ -3098,6 +4879,12 @@
         "node": "*"
       }
     },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -3157,6 +4944,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ignore": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz",
+      "integrity": "sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
@@ -3164,12 +4961,54 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
     "node_modules/inline-style-parser": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
       "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
       "license": "MIT"
     },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -3203,6 +5042,141 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-decimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
@@ -3223,6 +5197,41 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3246,6 +5255,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3256,18 +5278,225 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "license": "MIT"
     },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsdom": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.2.0.tgz",
@@ -3321,6 +5550,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -3334,6 +5584,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/katex": {
       "version": "0.16.21",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.21.tgz",
@@ -3358,6 +5624,53 @@
         "node": ">= 12"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -3404,6 +5717,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mathjax-full": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz",
@@ -4111,6 +6434,22 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/mj-context-menu": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
@@ -4142,6 +6481,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -4177,6 +6523,185 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-entities": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
@@ -4227,6 +6752,33 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4247,6 +6799,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -4390,10 +6952,20 @@
         "postcss": "^8.2.1"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/prismjs": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -4640,13 +7212,14 @@
       }
     },
     "node_modules/react-syntax-highlighter": {
-      "version": "15.5.0",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
-      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
+      "integrity": "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
         "lowlight": "^1.17.0",
         "prismjs": "^1.27.0",
         "refractor": "^3.6.0"
@@ -4711,6 +7284,29 @@
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
       "license": "MIT"
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/refractor": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
@@ -4833,6 +7429,27 @@
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "license": "MIT"
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/rehype-mathjax": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/rehype-mathjax/-/rehype-mathjax-6.0.0.tgz",
@@ -5025,6 +7642,34 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -5105,6 +7750,61 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -5191,6 +7891,154 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5258,6 +8106,104 @@
         "node": "^12.20.0 || >=14"
       }
     },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/stringify-entities": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -5272,6 +8218,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/style-mod": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
@@ -5304,6 +8263,32 @@
         "postcss": "^8.3.3"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -5449,12 +8434,38 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
       "license": "0BSD"
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-fest": {
       "version": "4.26.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
@@ -5467,13 +8478,123 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "devOptional": true,
+      "license": "MIT"
     },
     "node_modules/unified": {
       "version": "11.0.5",
@@ -5659,6 +8780,16 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/url-parse": {
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
@@ -5999,12 +9130,127 @@
         "node": ">=18"
       }
     },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wicked-good-xpath": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
       "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw==",
       "license": "MIT"
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ws": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
@@ -6066,6 +9312,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/app/package.json b/app/package.json
index 3b361be..663117a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -5,8 +5,11 @@
   "type": "module",
   "scripts": {
     "start": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix"
   },
   "repository": {
     "type": "git",
@@ -50,14 +53,24 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@eslint/compat": "^1.2.9",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^22.14.0",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.27.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "postcss": "^8.4.47",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "sass": "^1.80.4",
-    "vite": "^6.3.4",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.4",
     "vite-plugin-compression2": "^1.3.0"
   },
   "browserslist": {
diff --git a/app/src/App.jsx b/app/src/App.tsx
similarity index 87%
rename from app/src/App.jsx
rename to app/src/App.tsx
index 5e6baad..c71c03c 100644
--- a/app/src/App.jsx
+++ b/app/src/App.tsx
@@ -11,7 +11,9 @@ import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import './App.scss';
 
-function AuthenticatedContent() {
+type AuthenticatedContentProps = object;
+
+const AuthenticatedContent: React.FC<AuthenticatedContentProps> = () => {
   const { user, loading, initialized } = useAuth();
 
   if (!initialized) {
@@ -33,9 +35,11 @@ function AuthenticatedContent() {
       </ModalProvider>
     </WorkspaceProvider>
   );
-}
+};
 
-function App() {
+type AppProps = object;
+
+const App: React.FC<AppProps> = () => {
   return (
     <>
       <ColorSchemeScript defaultColorScheme="light" />
@@ -49,6 +53,6 @@ function App() {
       </MantineProvider>
     </>
   );
-}
+};
 
 export default App;
diff --git a/app/src/api/admin.ts b/app/src/api/admin.ts
new file mode 100644
index 0000000..de9d72b
--- /dev/null
+++ b/app/src/api/admin.ts
@@ -0,0 +1,135 @@
+import {
+  API_BASE_URL,
+  type CreateUserRequest,
+  type UpdateUserRequest,
+} from '@/types/api';
+import { apiCall } from './api';
+import {
+  isSystemStats,
+  isUser,
+  isWorkspace,
+  type SystemStats,
+  type User,
+  type Workspace,
+} from '@/types/models';
+
+const ADMIN_BASE_URL = `${API_BASE_URL}/admin`;
+
+// User Management
+
+/**
+ * Fetches all users from the API
+ * @returns {Promise<User[]>} A promise that resolves to an array of users
+ * @throws {Error} If the API call fails or returns an invalid response
+ * */
+export const getUsers = async (): Promise<User[]> => {
+  const response = await apiCall(`${ADMIN_BASE_URL}/users`);
+  const data: unknown = await response.json();
+
+  if (!Array.isArray(data)) {
+    throw new Error('Invalid users response received from API');
+  }
+  return data.map((user) => {
+    if (!isUser(user)) {
+      throw new Error('Invalid user object received from API');
+    }
+    return user;
+  });
+};
+
+/**
+ * Creates a new user in the system
+ * @param {CreateUserRequest} userData The data for the new user
+ * @returns {Promise<User>} A promise that resolves to the created user
+ * @throws {Error} If the API call fails or returns an invalid response
+ * */
+export const createUser = async (
+  userData: CreateUserRequest
+): Promise<User> => {
+  const response = await apiCall(`${ADMIN_BASE_URL}/users`, {
+    method: 'POST',
+    body: JSON.stringify(userData),
+  });
+
+  const data: unknown = await response.json();
+  if (!isUser(data)) {
+    throw new Error('Invalid user object received from API');
+  }
+  return data;
+};
+
+/**
+ * Deletes a user from the system
+ * @param {number} userId The ID of the user to delete
+ * @throws {Error} If the API call fails or returns an invalid response
+ * */
+export const deleteUser = async (userId: number) => {
+  const response = await apiCall(`${ADMIN_BASE_URL}/users/${userId}`, {
+    method: 'DELETE',
+  });
+  if (response.status === 204) {
+    return;
+  } else {
+    throw new Error('Failed to delete user with status: ' + response.status);
+  }
+};
+
+/**
+ * Updates an existing user in the system
+ * @param {number} userId The ID of the user to update
+ * @param {UpdateUserRequest} userData The data to update the user with
+ * @returns {Promise<User>} A promise that resolves to the updated user
+ * @throws {Error} If the API call fails or returns an invalid response
+ * */
+export const updateUser = async (
+  userId: number,
+  userData: UpdateUserRequest
+): Promise<User> => {
+  const response = await apiCall(`${ADMIN_BASE_URL}/users/${userId}`, {
+    method: 'PUT',
+    body: JSON.stringify(userData),
+  });
+
+  const data: unknown = await response.json();
+  if (!isUser(data)) {
+    throw new Error('Invalid user object received from API');
+  }
+  return data;
+};
+
+// Workspace Management
+
+/**
+ * Fetches all workspaces from the API
+ * @returns {Promise<Workspace[]>} A promise that resolves to an array of workspaces
+ * @throws {Error} If the API call fails or returns an invalid response
+ * */
+export const getWorkspaces = async (): Promise<Workspace[]> => {
+  const response = await apiCall(`${ADMIN_BASE_URL}/workspaces`);
+  const data: unknown = await response.json();
+  if (!Array.isArray(data)) {
+    throw new Error('Invalid workspaces response received from API');
+  }
+  return data.map((workspace) => {
+    if (!isWorkspace(workspace)) {
+      throw new Error('Invalid workspace object received from API');
+    }
+    return workspace;
+  });
+};
+
+// System Statistics
+
+/**
+ * Fetches system-wide statistics from the API
+ * @returns {Promise<SystemStats>} A promise that resolves to the system statistics
+ * @throws {Error} If the API call fails or returns an invalid response
+ * */
+export const getSystemStats = async (): Promise<SystemStats> => {
+  const response = await apiCall(`${ADMIN_BASE_URL}/stats`);
+  const data: unknown = await response.json();
+  if (!isSystemStats(data)) {
+    throw new Error('Invalid system stats response received from API');
+  }
+  return data;
+};
diff --git a/app/src/api/api.ts b/app/src/api/api.ts
new file mode 100644
index 0000000..6f97c76
--- /dev/null
+++ b/app/src/api/api.ts
@@ -0,0 +1,78 @@
+import { refreshToken } from './auth';
+
+/**
+ * Gets the CSRF token from cookies
+ * @returns {string} The CSRF token or an empty string if not found
+ */
+const getCsrfToken = (): string => {
+  const cookies = document.cookie.split(';');
+  let csrfToken = '';
+  for (const cookie of cookies) {
+    const [name, value] = cookie.trim().split('=');
+    if (name === 'csrf_token' && value) {
+      csrfToken = decodeURIComponent(value);
+      break;
+    }
+  }
+  return csrfToken;
+};
+
+/**
+ * Makes an API call with proper cookie handling and error handling
+ */
+export const apiCall = async (
+  url: string,
+  options: RequestInit = {}
+): Promise<Response> => {
+  console.debug(`Making API call to: ${url}`);
+  try {
+    // Set up headers with CSRF token for non-GET requests
+    const method = options.method || 'GET';
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...(options.headers as Record<string, string>),
+    };
+
+    // Add CSRF token for non-GET methods
+    if (method !== 'GET') {
+      const csrfToken = getCsrfToken();
+      if (csrfToken) {
+        headers['X-CSRF-Token'] = csrfToken;
+      }
+    }
+
+    const response = await fetch(url, {
+      ...options,
+      // Include credentials to send/receive cookies
+      credentials: 'include',
+      headers,
+    });
+    console.debug(`Response status: ${response.status} for URL: ${url}`);
+
+    // Handle 401 responses
+    if (response.status === 401) {
+      const isRefreshEndpoint = url.endsWith('/auth/refresh');
+      if (!isRefreshEndpoint) {
+        // Attempt token refresh and retry the request
+        const refreshSuccess = await refreshToken();
+        if (refreshSuccess) {
+          // Retry the original request
+          return apiCall(url, options);
+        }
+      }
+      throw new Error('Authentication failed');
+    }
+
+    if (!response.ok && response.status !== 204) {
+      const errorData = (await response.json()) as { message: string };
+      throw new Error(
+        errorData?.message || `HTTP error! status: ${response.status}`
+      );
+    }
+
+    return response;
+  } catch (error) {
+    console.error(`API call failed: ${(error as Error).message}`);
+    throw error;
+  }
+};
diff --git a/app/src/api/auth.ts b/app/src/api/auth.ts
new file mode 100644
index 0000000..931bd68
--- /dev/null
+++ b/app/src/api/auth.ts
@@ -0,0 +1,75 @@
+import { API_BASE_URL, isLoginResponse, type LoginRequest } from '@/types/api';
+import { apiCall } from './api';
+import { isUser, type User } from '@/types/models';
+
+/**
+ * Logs in a user with email and password
+ * @param {string} email - The user's email
+ * @param {string} password - The user's password
+ * @returns {Promise<User>} A promise that resolves to the user
+ * @throws {Error} If the API call fails or returns an invalid response
+ * @throws {Error} If the login fails
+ */
+export const login = async (email: string, password: string): Promise<User> => {
+  const loginData: LoginRequest = { email, password };
+  const response = await apiCall(`${API_BASE_URL}/auth/login`, {
+    method: 'POST',
+    body: JSON.stringify(loginData),
+  });
+
+  const data: unknown = await response.json();
+  if (!isLoginResponse(data)) {
+    throw new Error('Invalid login response from API');
+  }
+
+  return data.user;
+};
+
+/**
+ * Logs out the current user
+ * @returns {Promise<void>} A promise that resolves when the logout is successful
+ * @throws {Error} If the API call fails or returns an invalid response
+ * @throws {Error} If the logout fails
+ */
+export const logout = async (): Promise<void> => {
+  const response = await apiCall(`${API_BASE_URL}/auth/logout`, {
+    method: 'POST',
+  });
+
+  if (response.status !== 204) {
+    throw new Error('Failed to log out');
+  }
+};
+
+/**
+ * Refreshes the auth token
+ * @returns true if refresh was successful, false otherwise
+ */
+export const refreshToken = async (): Promise<boolean> => {
+  try {
+    await apiCall(`${API_BASE_URL}/auth/refresh`, {
+      method: 'POST',
+    });
+
+    return true;
+  } catch (_error) {
+    return false;
+  }
+};
+
+/**
+ * Gets the currently authenticated user
+ * @returns {Promise<User>} A promise that resolves to the current user
+ * @throws {Error} If the API call fails or returns an invalid response
+ * @throws {Error} If the user data is invalid
+ */
+export const getCurrentUser = async (): Promise<User> => {
+  const response = await apiCall(`${API_BASE_URL}/auth/me`);
+  const data: unknown = await response.json();
+
+  if (!isUser(data)) {
+    throw new Error('Invalid user data received from API');
+  }
+
+  return data;
+};
diff --git a/app/src/api/file.ts b/app/src/api/file.ts
new file mode 100644
index 0000000..08f4c4f
--- /dev/null
+++ b/app/src/api/file.ts
@@ -0,0 +1,169 @@
+import { isFileNode, type FileNode } from '@/types/models';
+import { apiCall } from './api';
+import {
+  API_BASE_URL,
+  isLookupResponse,
+  isSaveFileResponse,
+  type SaveFileResponse,
+} from '@/types/api';
+
+/**
+ * listFiles fetches the list of files in a workspace
+ * @param workspaceName - The name of the workspace
+ * @returns {Promise<FileNode[]>} A promise that resolves to an array of FileNode objects
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const listFiles = async (workspaceName: string): Promise<FileNode[]> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(workspaceName)}/files`
+  );
+  const data: unknown = await response.json();
+  if (!Array.isArray(data)) {
+    throw new Error('Invalid files response received from API');
+  }
+  return data.map((file) => {
+    if (!isFileNode(file)) {
+      throw new Error('Invalid file object received from API');
+    }
+    return file;
+  });
+};
+
+/**
+ * lookupFileByName fetches the file paths that match the given filename in a workspace
+ * @param workspaceName - The name of the workspace
+ * @param filename - The name of the file to look up
+ * @returns {Promise<string[]>} A promise that resolves to an array of file paths
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const lookupFileByName = async (
+  workspaceName: string,
+  filename: string
+): Promise<string[]> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(
+      workspaceName
+    )}/files/lookup?filename=${encodeURIComponent(filename)}`
+  );
+  const data: unknown = await response.json();
+  if (!isLookupResponse(data)) {
+    throw new Error('Invalid lookup response received from API');
+  }
+  const lookupResponse = data;
+  return lookupResponse.paths;
+};
+
+/**
+ * getFileContent fetches the content of a file in a workspace
+ * @param workspaceName - The name of the workspace
+ * @param filePath - The path of the file to fetch
+ * @returns {Promise<string>} A promise that resolves to the file content
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const getFileContent = async (
+  workspaceName: string,
+  filePath: string
+): Promise<string> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(
+      workspaceName
+    )}/files/${encodeURIComponent(filePath)}`
+  );
+  return response.text();
+};
+
+/**
+ * saveFile saves the content to a file in a workspace
+ * @param workspaceName - The name of the workspace
+ * @param filePath - The path of the file to save
+ * @param content - The content to save in the file
+ * @returns {Promise<SaveFileResponse>} A promise that resolves to the save file response
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const saveFile = async (
+  workspaceName: string,
+  filePath: string,
+  content: string
+): Promise<SaveFileResponse> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(
+      workspaceName
+    )}/files/${encodeURIComponent(filePath)}`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+      body: content,
+    }
+  );
+  const data: unknown = await response.json();
+  if (!isSaveFileResponse(data)) {
+    throw new Error('Invalid save file response received from API');
+  }
+  return data;
+};
+
+/**
+ * deleteFile deletes a file in a workspace
+ * @param workspaceName - The name of the workspace
+ * @param filePath - The path of the file to delete
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const deleteFile = async (workspaceName: string, filePath: string) => {
+  await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(
+      workspaceName
+    )}/files/${encodeURIComponent(filePath)}`,
+    {
+      method: 'DELETE',
+    }
+  );
+};
+
+/**
+ * getLastOpenedFile fetches the last opened file in a workspace
+ * @param workspaceName - The name of the workspace
+ * @returns {Promise<string>} A promise that resolves to the last opened file path
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const getLastOpenedFile = async (
+  workspaceName: string
+): Promise<string> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(workspaceName)}/files/last`
+  );
+  const data: unknown = await response.json();
+  if (
+    typeof data !== 'object' ||
+    data === null ||
+    !('lastOpenedFilePath' in data)
+  ) {
+    throw new Error('Invalid last opened file response received from API');
+  }
+  return data.lastOpenedFilePath as string;
+};
+
+/**
+ * updateLastOpenedFile updates the last opened file in a workspace
+ * @param workspaceName - The name of the workspace
+ * @param filePath - The path of the file to set as last opened
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const updateLastOpenedFile = async (
+  workspaceName: string,
+  filePath: string
+) => {
+  await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(
+      workspaceName
+    )}/files/last`,
+    {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ filePath }),
+    }
+  );
+};
diff --git a/app/src/api/git.ts b/app/src/api/git.ts
new file mode 100644
index 0000000..6866d5f
--- /dev/null
+++ b/app/src/api/git.ts
@@ -0,0 +1,50 @@
+import { API_BASE_URL } from '@/types/api';
+import { apiCall } from './api';
+import type { CommitHash } from '@/types/models';
+
+/**
+ * pullChanges fetches the latest changes from the remote repository
+ * @param workspaceName - The name of the workspace
+ * @returns {Promise<string>} A promise that resolves to a message indicating the result of the pull operation
+ */
+export const pullChanges = async (workspaceName: string): Promise<string> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(workspaceName)}/git/pull`,
+    {
+      method: 'POST',
+    }
+  );
+  const data: unknown = await response.json();
+  if (typeof data !== 'object' || data === null || !('message' in data)) {
+    throw new Error('Invalid pull response received from API');
+  }
+  return data.message as string;
+};
+
+/**
+ * pushChanges pushes the local changes to the remote repository
+ * @param workspaceName - The name of the workspace
+ * @returns {Promise<CommitHash>} A promise that resolves to the commit hash of the pushed changes
+ */
+export const commitAndPush = async (
+  workspaceName: string,
+  message: string
+): Promise<CommitHash> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(
+      workspaceName
+    )}/git/commit`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ message }),
+    }
+  );
+  const data: unknown = await response.json();
+  if (typeof data !== 'object' || data === null || !('commitHash' in data)) {
+    throw new Error('Invalid commit response received from API');
+  }
+  return data.commitHash as CommitHash;
+};
diff --git a/app/src/api/user.ts b/app/src/api/user.ts
new file mode 100644
index 0000000..7ec858d
--- /dev/null
+++ b/app/src/api/user.ts
@@ -0,0 +1,41 @@
+import { API_BASE_URL, type UpdateProfileRequest } from '@/types/api';
+import { isUser, type User } from '@/types/models';
+import { apiCall } from './api';
+
+/**
+ * updateProfile updates the user's profile information.
+ * @param updateRequest - The request object containing the updated profile information.
+ * @returns A promise that resolves to the updated user object.
+ * @throws An error if the response is not valid user data.
+ */
+export const updateProfile = async (
+  updateRequest: UpdateProfileRequest
+): Promise<User> => {
+  const response = await apiCall(`${API_BASE_URL}/profile`, {
+    method: 'PUT',
+    body: JSON.stringify(updateRequest),
+  });
+  const data: unknown = await response.json();
+
+  if (!isUser(data)) {
+    throw new Error('Invalid user data');
+  }
+  return data;
+};
+
+/**
+ * deleteProfile deletes the user's profile.
+ * @param password - The password of the user.
+ * @throws An error if the response status is not 204 (No Content).
+ */
+export const deleteUser = async (password: string) => {
+  const response = await apiCall(`${API_BASE_URL}/profile`, {
+    method: 'DELETE',
+    body: JSON.stringify({ password }),
+  });
+
+  if (response.status !== 204) {
+    throw new Error('Failed to delete profile');
+  }
+  return;
+};
diff --git a/app/src/api/workspace.ts b/app/src/api/workspace.ts
new file mode 100644
index 0000000..9ba8b0d
--- /dev/null
+++ b/app/src/api/workspace.ts
@@ -0,0 +1,153 @@
+import { type Workspace, isWorkspace } from '@/types/models';
+import { apiCall } from './api';
+import { API_BASE_URL } from '@/types/api';
+
+/**
+ * listWorkspaces fetches the list of workspaces
+ * @returns {Promise<Workspace[]>} A promise that resolves to an array of Workspace objects
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const listWorkspaces = async (): Promise<Workspace[]> => {
+  const response = await apiCall(`${API_BASE_URL}/workspaces`);
+  const data: unknown = await response.json();
+  if (!Array.isArray(data)) {
+    throw new Error('Invalid workspaces response received from API');
+  }
+  return data.map((workspace) => {
+    if (!isWorkspace(workspace)) {
+      throw new Error('Invalid workspace object received from API');
+    }
+    return workspace;
+  });
+};
+
+/**
+ * createWorkspace creates a new workspace with the given name
+ * @param name - The name of the workspace to create
+ * @returns {Promise<Workspace>} A promise that resolves to the created Workspace object
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const createWorkspace = async (name: string): Promise<Workspace> => {
+  const response = await apiCall(`${API_BASE_URL}/workspaces`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ name }),
+  });
+  const data: unknown = await response.json();
+  if (!isWorkspace(data)) {
+    throw new Error('Invalid workspace object received from API');
+  }
+  return data;
+};
+
+/**
+ * getWorkspace fetches the workspace with the given name
+ * @param workspaceName - The name of the workspace to fetch
+ * @returns {Promise<Workspace>} A promise that resolves to the Workspace object
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const getWorkspace = async (
+  workspaceName: string
+): Promise<Workspace> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(workspaceName)}`
+  );
+  const data: unknown = await response.json();
+  if (!isWorkspace(data)) {
+    throw new Error('Invalid workspace object received from API');
+  }
+  return data;
+};
+
+/**
+ * updateWorkspace updates the workspace with the given name
+ * @param workspaceName - The name of the workspace to update
+ * @param workspaceData - The updated Workspace object
+ * @returns {Promise<Workspace>} A promise that resolves to the updated Workspace object
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const updateWorkspace = async (
+  workspaceName: string,
+  workspaceData: Workspace
+): Promise<Workspace> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(workspaceName)}`,
+    {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(workspaceData),
+    }
+  );
+  const data: unknown = await response.json();
+  if (!isWorkspace(data)) {
+    throw new Error('Invalid workspace object received from API');
+  }
+  return data;
+};
+
+/**
+ * deleteWorkspace deletes the workspace with the given name
+ * @param workspaceName - The name of the workspace to delete
+ * @returns {Promise<string>} A promise that resolves to the next workspace name to switch to
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const deleteWorkspace = async (
+  workspaceName: string
+): Promise<string> => {
+  const response = await apiCall(
+    `${API_BASE_URL}/workspaces/${encodeURIComponent(workspaceName)}`,
+    {
+      method: 'DELETE',
+    }
+  );
+  const data: unknown = await response.json();
+  if (
+    typeof data !== 'object' ||
+    data === null ||
+    !('nextWorkspaceName' in data)
+  ) {
+    throw new Error('Invalid delete workspace response received from API');
+  }
+  return data.nextWorkspaceName as string;
+};
+
+/**
+ * getLastWorkspaceName fetches the last workspace name
+ * @returns {Promise<string>} A promise that resolves to the last workspace name
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const getLastWorkspaceName = async (): Promise<string> => {
+  const response = await apiCall(`${API_BASE_URL}/workspaces/last`);
+  const data: unknown = await response.json();
+  if (
+    typeof data !== 'object' ||
+    data === null ||
+    !('lastWorkspaceName' in data)
+  ) {
+    throw new Error('Invalid last workspace name response received from API');
+  }
+  return data.lastWorkspaceName as string;
+};
+
+/**
+ * updateLastWorkspaceName updates the last workspace name
+ * @param workspaceName - The name of the workspace to set as last
+ * @throws {Error} If the API call fails or returns an invalid response
+ */
+export const updateLastWorkspaceName = async (workspaceName: string) => {
+  const response = await apiCall(`${API_BASE_URL}/workspaces/last`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ workspaceName }),
+  });
+  if (response.status !== 204) {
+    throw new Error('Failed to update last workspace name');
+  }
+  return;
+};
diff --git a/app/src/components/auth/LoginPage.jsx b/app/src/components/auth/LoginPage.tsx
similarity index 72%
rename from app/src/components/auth/LoginPage.jsx
rename to app/src/components/auth/LoginPage.tsx
index faa7d10..ad45793 100644
--- a/app/src/components/auth/LoginPage.jsx
+++ b/app/src/components/auth/LoginPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, type FormEvent } from 'react';
 import {
   TextInput,
   PasswordInput,
@@ -11,20 +11,22 @@ import {
 } from '@mantine/core';
 import { useAuth } from '../../contexts/AuthContext';
 
-const LoginPage = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
+const LoginPage: React.FC = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
   const { login } = useAuth();
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = (e: FormEvent<HTMLElement>): void => {
     e.preventDefault();
     setLoading(true);
-    try {
-      await login(email, password);
-    } finally {
-      setLoading(false);
-    }
+    login(email, password)
+      .catch((error) => {
+        console.error('Login failed:', error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   return (
diff --git a/app/src/components/editor/ContentView.jsx b/app/src/components/editor/ContentView.tsx
similarity index 54%
rename from app/src/components/editor/ContentView.jsx
rename to app/src/components/editor/ContentView.tsx
index 11eda30..4d43b14 100644
--- a/app/src/components/editor/ContentView.jsx
+++ b/app/src/components/editor/ContentView.tsx
@@ -2,10 +2,21 @@ import React from 'react';
 import { Text, Center } from '@mantine/core';
 import Editor from './Editor';
 import MarkdownPreview from './MarkdownPreview';
-import { getFileUrl } from '../../services/api';
-import { isImageFile } from '../../utils/fileHelpers';
+import { getFileUrl, isImageFile } from '../../utils/fileHelpers';
+import { useWorkspace } from '@/contexts/WorkspaceContext';
 
-const ContentView = ({
+type ViewTab = 'source' | 'preview';
+
+interface ContentViewProps {
+  activeTab: ViewTab;
+  selectedFile: string | null;
+  content: string;
+  handleContentChange: (content: string) => void;
+  handleSave: (filePath: string, content: string) => Promise<boolean>;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+}
+
+const ContentView: React.FC<ContentViewProps> = ({
   activeTab,
   selectedFile,
   content,
@@ -13,10 +24,21 @@ const ContentView = ({
   handleSave,
   handleFileSelect,
 }) => {
+  const { currentWorkspace } = useWorkspace();
+  if (!currentWorkspace) {
+    return (
+      <Center style={{ height: '100%' }}>
+        <Text size="xl" fw={500}>
+          No workspace selected.
+        </Text>
+      </Center>
+    );
+  }
+
   if (!selectedFile) {
     return (
       <Center style={{ height: '100%' }}>
-        <Text size="xl" weight={500}>
+        <Text size="xl" fw={500}>
           No file selected.
         </Text>
       </Center>
@@ -27,7 +49,7 @@ const ContentView = ({
     return (
       <Center className="image-preview">
         <img
-          src={getFileUrl(selectedFile)}
+          src={getFileUrl(currentWorkspace.name, selectedFile)}
           alt={selectedFile}
           style={{
             maxWidth: '100%',
diff --git a/app/src/components/editor/Editor.jsx b/app/src/components/editor/Editor.tsx
similarity index 71%
rename from app/src/components/editor/Editor.jsx
rename to app/src/components/editor/Editor.tsx
index 47ec20d..bbff99f 100644
--- a/app/src/components/editor/Editor.jsx
+++ b/app/src/components/editor/Editor.tsx
@@ -5,16 +5,28 @@ import { EditorView, keymap } from '@codemirror/view';
 import { markdown } from '@codemirror/lang-markdown';
 import { defaultKeymap } from '@codemirror/commands';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 
-const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
+interface EditorProps {
+  content: string;
+  handleContentChange: (content: string) => void;
+  handleSave: (filePath: string, content: string) => Promise<boolean>;
+  selectedFile: string;
+}
+
+const Editor: React.FC<EditorProps> = ({
+  content,
+  handleContentChange,
+  handleSave,
+  selectedFile,
+}) => {
   const { colorScheme } = useWorkspace();
-  const editorRef = useRef();
-  const viewRef = useRef();
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
 
   useEffect(() => {
-    const handleEditorSave = (view) => {
-      handleSave(selectedFile, view.state.doc.toString());
+    const handleEditorSave = (view: EditorView): boolean => {
+      void handleSave(selectedFile, view.state.doc.toString());
       return true;
     };
 
@@ -36,6 +48,8 @@ const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
       },
     });
 
+    if (!editorRef.current) return;
+
     const state = EditorState.create({
       doc: content,
       extensions: [
@@ -69,8 +83,11 @@ const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
 
     return () => {
       view.destroy();
+      viewRef.current = null;
     };
-  }, [colorScheme, handleContentChange]);
+    // TODO: Refactor
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [colorScheme, handleContentChange, handleSave, selectedFile]);
 
   useEffect(() => {
     if (viewRef.current && content !== viewRef.current.state.doc.toString()) {
diff --git a/app/src/components/editor/MarkdownPreview.jsx b/app/src/components/editor/MarkdownPreview.jsx
deleted file mode 100644
index 51b80ee..0000000
--- a/app/src/components/editor/MarkdownPreview.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
-import remarkMath from 'remark-math';
-import remarkRehype from 'remark-rehype';
-import rehypeMathjax from 'rehype-mathjax';
-import rehypeReact from 'rehype-react';
-import rehypePrism from 'rehype-prism';
-import * as prod from 'react/jsx-runtime';
-import { notifications } from '@mantine/notifications';
-import { remarkWikiLinks } from '../../utils/remarkWikiLinks';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
-
-const MarkdownPreview = ({ content, handleFileSelect }) => {
-  const [processedContent, setProcessedContent] = useState(null);
-  const baseUrl = window.API_BASE_URL;
-  const { currentWorkspace } = useWorkspace();
-
-  const handleLinkClick = (e, href) => {
-    e.preventDefault();
-
-    if (href.startsWith(`${baseUrl}/internal/`)) {
-      // For existing files, extract the path and directly select it
-      const [filePath] = decodeURIComponent(
-        href.replace(`${baseUrl}/internal/`, '')
-      ).split('#');
-      handleFileSelect(filePath);
-    } else if (href.startsWith(`${baseUrl}/notfound/`)) {
-      // For non-existent files, show a notification
-      const fileName = decodeURIComponent(
-        href.replace(`${baseUrl}/notfound/`, '')
-      );
-      notifications.show({
-        title: 'File Not Found',
-        message: `The file "${fileName}" does not exist.`,
-        color: 'red',
-      });
-    }
-  };
-
-  const processor = useMemo(
-    () =>
-      unified()
-        .use(remarkParse)
-        .use(remarkWikiLinks, currentWorkspace?.name)
-        .use(remarkMath)
-        .use(remarkRehype)
-        .use(rehypeMathjax)
-        .use(rehypePrism)
-        .use(rehypeReact, {
-          production: true,
-          jsx: prod.jsx,
-          jsxs: prod.jsxs,
-          Fragment: prod.Fragment,
-          components: {
-            img: ({ src, alt, ...props }) => (
-              <img
-                src={src}
-                alt={alt}
-                onError={(event) => {
-                  console.error('Failed to load image:', event.target.src);
-                  event.target.alt = 'Failed to load image';
-                }}
-                {...props}
-              />
-            ),
-            a: ({ href, children, ...props }) => (
-              <a
-                href={href}
-                onClick={(e) => handleLinkClick(e, href)}
-                {...props}
-              >
-                {children}
-              </a>
-            ),
-            code: ({ children, className, ...props }) => {
-              const language = className
-                ? className.replace('language-', '')
-                : null;
-              return (
-                <pre className={className}>
-                  <code {...props}>{children}</code>
-                </pre>
-              );
-            },
-          },
-        }),
-    [baseUrl, handleFileSelect, currentWorkspace?.name]
-  );
-
-  useEffect(() => {
-    const processContent = async () => {
-      if (!currentWorkspace) {
-        return;
-      }
-
-      try {
-        const result = await processor.process(content);
-        setProcessedContent(result.result);
-      } catch (error) {
-        console.error('Error processing markdown:', error);
-      }
-    };
-
-    processContent();
-  }, [content, processor, currentWorkspace]);
-
-  return <div className="markdown-preview">{processedContent}</div>;
-};
-
-export default MarkdownPreview;
diff --git a/app/src/components/editor/MarkdownPreview.tsx b/app/src/components/editor/MarkdownPreview.tsx
new file mode 100644
index 0000000..83e4c4b
--- /dev/null
+++ b/app/src/components/editor/MarkdownPreview.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect, useMemo, type ReactNode } from 'react';
+import { unified, type Preset } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkMath from 'remark-math';
+import remarkRehype from 'remark-rehype';
+import rehypeMathjax from 'rehype-mathjax';
+import rehypeReact, { type Options } from 'rehype-react';
+import rehypePrism from 'rehype-prism';
+import * as prod from 'react/jsx-runtime';
+import { notifications } from '@mantine/notifications';
+import { remarkWikiLinks } from '../../utils/remarkWikiLinks';
+import { useWorkspace } from '../../hooks/useWorkspace';
+
+interface MarkdownPreviewProps {
+  content: string;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+}
+
+interface MarkdownImageProps {
+  src: string;
+  alt?: string;
+  [key: string]: unknown;
+}
+
+interface MarkdownLinkProps {
+  href: string;
+  children: ReactNode;
+  [key: string]: unknown;
+}
+
+interface MarkdownCodeProps {
+  children: ReactNode;
+  className?: string;
+  [key: string]: unknown;
+}
+
+const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
+  content,
+  handleFileSelect,
+}) => {
+  const [processedContent, setProcessedContent] = useState<ReactNode | null>(
+    null
+  );
+  const baseUrl = window.API_BASE_URL;
+  const { currentWorkspace } = useWorkspace();
+
+  const processor = useMemo(() => {
+    const handleLinkClick = (
+      e: React.MouseEvent<HTMLAnchorElement>,
+      href: string
+    ): void => {
+      e.preventDefault();
+
+      if (href.startsWith(`${baseUrl}/internal/`)) {
+        // For existing files, extract the path and directly select it
+        const [filePath] = decodeURIComponent(
+          href.replace(`${baseUrl}/internal/`, '')
+        ).split('#');
+        if (filePath) {
+          void handleFileSelect(filePath);
+        }
+      } else if (href.startsWith(`${baseUrl}/notfound/`)) {
+        // For non-existent files, show a notification
+        const fileName = decodeURIComponent(
+          href.replace(`${baseUrl}/notfound/`, '')
+        );
+        notifications.show({
+          title: 'File Not Found',
+          message: `The file "${fileName}" does not exist.`,
+          color: 'red',
+        });
+      }
+    };
+    // Only create the processor if we have a workspace name
+    if (!currentWorkspace?.name) {
+      return unified();
+    }
+
+    return unified()
+      .use(remarkParse)
+      .use(remarkWikiLinks, currentWorkspace.name)
+      .use(remarkMath)
+      .use(remarkRehype)
+      .use(rehypeMathjax)
+      .use(rehypePrism as Preset)
+      .use(rehypeReact, {
+        jsx: prod.jsx,
+        jsxs: prod.jsxs,
+        Fragment: prod.Fragment,
+        development: false,
+        elementAttributeNameCase: 'react',
+        stylePropertyNameCase: 'dom',
+        components: {
+          img: ({ src, alt, ...props }: MarkdownImageProps) => (
+            <img
+              src={src}
+              alt={alt || ''}
+              onError={(event) => {
+                console.error('Failed to load image:', event.currentTarget.src);
+                event.currentTarget.alt = 'Failed to load image';
+              }}
+              {...props}
+            />
+          ),
+          a: ({ href, children, ...props }: MarkdownLinkProps) => (
+            <a href={href} onClick={(e) => handleLinkClick(e, href)} {...props}>
+              {children}
+            </a>
+          ),
+          code: ({ children, className, ...props }: MarkdownCodeProps) => {
+            return (
+              <pre className={className}>
+                <code {...props}>{children}</code>
+              </pre>
+            );
+          },
+        },
+      } as Options);
+  }, [currentWorkspace?.name, baseUrl, handleFileSelect]);
+
+  useEffect(() => {
+    const processContent = async (): Promise<void> => {
+      if (!currentWorkspace) {
+        return;
+      }
+
+      try {
+        const result = await processor.process(content);
+        setProcessedContent(result.result as ReactNode);
+      } catch (error) {
+        console.error('Error processing markdown:', error);
+      }
+    };
+
+    void processContent();
+  }, [content, processor, currentWorkspace]);
+
+  return <div className="markdown-preview">{processedContent}</div>;
+};
+
+export default MarkdownPreview;
diff --git a/app/src/components/files/FileActions.jsx b/app/src/components/files/FileActions.tsx
similarity index 74%
rename from app/src/components/files/FileActions.jsx
rename to app/src/components/files/FileActions.tsx
index d8b4f18..51ff89a 100644
--- a/app/src/components/files/FileActions.jsx
+++ b/app/src/components/files/FileActions.tsx
@@ -7,9 +7,17 @@ import {
   IconGitCommit,
 } from '@tabler/icons-react';
 import { useModalContext } from '../../contexts/ModalContext';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 
-const FileActions = ({ handlePullChanges, selectedFile }) => {
+interface FileActionsProps {
+  handlePullChanges: () => Promise<boolean>;
+  selectedFile: string | null;
+}
+
+const FileActions: React.FC<FileActionsProps> = ({
+  handlePullChanges,
+  selectedFile,
+}) => {
   const { settings } = useWorkspace();
   const {
     setNewFileModalVisible,
@@ -17,9 +25,9 @@ const FileActions = ({ handlePullChanges, selectedFile }) => {
     setCommitMessageModalVisible,
   } = useModalContext();
 
-  const handleCreateFile = () => setNewFileModalVisible(true);
-  const handleDeleteFile = () => setDeleteFileModalVisible(true);
-  const handleCommitAndPush = () => setCommitMessageModalVisible(true);
+  const handleCreateFile = (): void => setNewFileModalVisible(true);
+  const handleDeleteFile = (): void => setDeleteFileModalVisible(true);
+  const handleCommitAndPush = (): void => setCommitMessageModalVisible(true);
 
   return (
     <Group gap="xs">
@@ -53,7 +61,11 @@ const FileActions = ({ handlePullChanges, selectedFile }) => {
         <ActionIcon
           variant="default"
           size="md"
-          onClick={handlePullChanges}
+          onClick={() => {
+            handlePullChanges().catch((error) => {
+              console.error('Error pulling changes:', error);
+            });
+          }}
           disabled={!settings.gitEnabled}
         >
           <IconGitPullRequest size={16} />
diff --git a/app/src/components/files/FileTree.jsx b/app/src/components/files/FileTree.tsx
similarity index 51%
rename from app/src/components/files/FileTree.jsx
rename to app/src/components/files/FileTree.tsx
index 280ce31..0c7e141 100644
--- a/app/src/components/files/FileTree.jsx
+++ b/app/src/components/files/FileTree.tsx
@@ -1,21 +1,35 @@
 import React, { useRef, useState, useLayoutEffect } from 'react';
-import { Tree } from 'react-arborist';
+import { Tree, type NodeApi } from 'react-arborist';
 import { IconFile, IconFolder, IconFolderOpen } from '@tabler/icons-react';
 import { Tooltip } from '@mantine/core';
 import useResizeObserver from '@react-hook/resize-observer';
+import type { FileNode } from '@/types/models';
 
-const useSize = (target) => {
-  const [size, setSize] = useState();
+interface Size {
+  width: number;
+  height: number;
+}
+
+interface FileTreeProps {
+  files: FileNode[];
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+  showHiddenFiles: boolean;
+}
+
+const useSize = (target: React.RefObject<HTMLElement>): Size | undefined => {
+  const [size, setSize] = useState<Size>();
 
   useLayoutEffect(() => {
-    setSize(target.current.getBoundingClientRect());
+    if (target.current) {
+      setSize(target.current.getBoundingClientRect());
+    }
   }, [target]);
 
   useResizeObserver(target, (entry) => setSize(entry.contentRect));
   return size;
 };
 
-const FileIcon = ({ node }) => {
+const FileIcon = ({ node }: { node: NodeApi<FileNode> }) => {
   if (node.isLeaf) {
     return <IconFile size={16} />;
   }
@@ -26,7 +40,28 @@ const FileIcon = ({ node }) => {
   );
 };
 
-const Node = ({ node, style, dragHandle }) => {
+// Define a Node component that matches what React-Arborist expects
+function Node({
+  node,
+  style,
+  dragHandle,
+  onNodeClick,
+  ...rest
+}: {
+  node: NodeApi<FileNode>;
+  style: React.CSSProperties;
+  dragHandle?: React.Ref<HTMLDivElement>;
+  onNodeClick?: (node: NodeApi<FileNode>) => void;
+  // Accept any extra props from Arborist, but do not use an index signature
+} & Record<string, unknown>) {
+  const handleClick = () => {
+    if (node.isInternal) {
+      node.toggle();
+    } else if (typeof onNodeClick === 'function') {
+      onNodeClick(node);
+    }
+  };
+
   return (
     <Tooltip label={node.data.name} openDelay={500}>
       <div
@@ -40,13 +75,8 @@ const Node = ({ node, style, dragHandle }) => {
           whiteSpace: 'nowrap',
           overflow: 'hidden',
         }}
-        onClick={() => {
-          if (node.isInternal) {
-            node.toggle();
-          } else {
-            node.tree.props.onNodeClick(node);
-          }
-        }}
+        onClick={handleClick}
+        {...rest}
       >
         <FileIcon node={node} />
         <span
@@ -63,19 +93,31 @@ const Node = ({ node, style, dragHandle }) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-const FileTree = ({ files, handleFileSelect, showHiddenFiles }) => {
-  const target = useRef(null);
+const FileTree: React.FC<FileTreeProps> = ({
+  files,
+  handleFileSelect,
+  showHiddenFiles,
+}) => {
+  const target = useRef<HTMLDivElement>(null);
   const size = useSize(target);
 
-  files = files.filter((file) => {
+  const filteredFiles = files.filter((file) => {
     if (file.name.startsWith('.') && !showHiddenFiles) {
       return false;
     }
     return true;
   });
 
+  // Handler for node click
+  const onNodeClick = (node: NodeApi<FileNode>) => {
+    const fileNode = node.data;
+    if (!node.isInternal) {
+      void handleFileSelect(fileNode.path);
+    }
+  };
+
   return (
     <div
       ref={target}
@@ -83,24 +125,20 @@ const FileTree = ({ files, handleFileSelect, showHiddenFiles }) => {
     >
       {size && (
         <Tree
-          data={files}
+          data={filteredFiles}
           openByDefault={false}
           width={size.width}
           height={size.height}
           indent={24}
           rowHeight={28}
           onActivate={(node) => {
+            const fileNode = node.data;
             if (!node.isInternal) {
-              handleFileSelect(node.data.path);
-            }
-          }}
-          onNodeClick={(node) => {
-            if (!node.isInternal) {
-              handleFileSelect(node.data.path);
+              void handleFileSelect(fileNode.path);
             }
           }}
         >
-          {Node}
+          {(props) => <Node {...props} onNodeClick={onNodeClick} />}
         </Tree>
       )}
     </div>
diff --git a/app/src/components/layout/Header.jsx b/app/src/components/layout/Header.tsx
similarity index 94%
rename from app/src/components/layout/Header.jsx
rename to app/src/components/layout/Header.tsx
index 95fa001..8a73724 100644
--- a/app/src/components/layout/Header.jsx
+++ b/app/src/components/layout/Header.tsx
@@ -4,7 +4,7 @@ import UserMenu from '../navigation/UserMenu';
 import WorkspaceSwitcher from '../navigation/WorkspaceSwitcher';
 import WorkspaceSettings from '../settings/workspace/WorkspaceSettings';
 
-const Header = () => {
+const Header: React.FC = () => {
   return (
     <Group justify="space-between" h={60} px="md">
       <Text fw={700} size="lg">
diff --git a/app/src/components/layout/Layout.jsx b/app/src/components/layout/Layout.tsx
similarity index 94%
rename from app/src/components/layout/Layout.jsx
rename to app/src/components/layout/Layout.tsx
index 1b5094f..98e97b8 100644
--- a/app/src/components/layout/Layout.jsx
+++ b/app/src/components/layout/Layout.tsx
@@ -5,9 +5,9 @@ import Sidebar from './Sidebar';
 import MainContent from './MainContent';
 import { useFileNavigation } from '../../hooks/useFileNavigation';
 import { useFileList } from '../../hooks/useFileList';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 
-const Layout = () => {
+const Layout: React.FC = () => {
   const { currentWorkspace, loading: workspaceLoading } = useWorkspace();
   const { selectedFile, handleFileSelect } = useFileNavigation();
   const { files, loadFileList } = useFileList();
diff --git a/app/src/components/layout/MainContent.jsx b/app/src/components/layout/MainContent.tsx
similarity index 76%
rename from app/src/components/layout/MainContent.jsx
rename to app/src/components/layout/MainContent.tsx
index fe6d760..a6bfc87 100644
--- a/app/src/components/layout/MainContent.jsx
+++ b/app/src/components/layout/MainContent.tsx
@@ -10,11 +10,21 @@ import CommitMessageModal from '../modals/git/CommitMessageModal';
 import { useFileContent } from '../../hooks/useFileContent';
 import { useFileOperations } from '../../hooks/useFileOperations';
 import { useGitOperations } from '../../hooks/useGitOperations';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
 
-const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
-  const [activeTab, setActiveTab] = useState('source');
-  const { settings } = useWorkspace();
+type ViewTab = 'source' | 'preview';
+
+interface MainContentProps {
+  selectedFile: string | null;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+  loadFileList: () => Promise<void>;
+}
+
+const MainContent: React.FC<MainContentProps> = ({
+  selectedFile,
+  handleFileSelect,
+  loadFileList,
+}) => {
+  const [activeTab, setActiveTab] = useState<ViewTab>('source');
   const {
     content,
     hasUnsavedChanges,
@@ -22,15 +32,17 @@ const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
     handleContentChange,
   } = useFileContent(selectedFile);
   const { handleSave, handleCreate, handleDelete } = useFileOperations();
-  const { handleCommitAndPush } = useGitOperations(settings.gitEnabled);
+  const { handleCommitAndPush } = useGitOperations();
 
-  const handleTabChange = useCallback((value) => {
-    setActiveTab(value);
+  const handleTabChange = useCallback((value: string | null): void => {
+    if (value) {
+      setActiveTab(value as ViewTab);
+    }
   }, []);
 
   const handleSaveFile = useCallback(
-    async (filePath, content) => {
-      let success = await handleSave(filePath, content);
+    async (filePath: string, fileContent: string): Promise<boolean> => {
+      const success = await handleSave(filePath, fileContent);
       if (success) {
         setHasUnsavedChanges(false);
       }
@@ -40,22 +52,22 @@ const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
   );
 
   const handleCreateFile = useCallback(
-    async (fileName) => {
+    async (fileName: string): Promise<void> => {
       const success = await handleCreate(fileName);
       if (success) {
-        loadFileList();
-        handleFileSelect(fileName);
+        await loadFileList();
+        await handleFileSelect(fileName);
       }
     },
     [handleCreate, handleFileSelect, loadFileList]
   );
 
   const handleDeleteFile = useCallback(
-    async (filePath) => {
+    async (filePath: string): Promise<void> => {
       const success = await handleDelete(filePath);
       if (success) {
-        loadFileList();
-        handleFileSelect(null);
+        await loadFileList();
+        await handleFileSelect(null);
       }
     },
     [handleDelete, handleFileSelect, loadFileList]
diff --git a/app/src/components/layout/Sidebar.jsx b/app/src/components/layout/Sidebar.tsx
similarity index 59%
rename from app/src/components/layout/Sidebar.jsx
rename to app/src/components/layout/Sidebar.tsx
index 4de51fa..06f40ca 100644
--- a/app/src/components/layout/Sidebar.jsx
+++ b/app/src/components/layout/Sidebar.tsx
@@ -3,14 +3,27 @@ import { Box } from '@mantine/core';
 import FileActions from '../files/FileActions';
 import FileTree from '../files/FileTree';
 import { useGitOperations } from '../../hooks/useGitOperations';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
+import type { FileNode } from '@/types/models';
 
-const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
+interface SidebarProps {
+  selectedFile: string | null;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+  files: FileNode[];
+  loadFileList: () => Promise<void>;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  selectedFile,
+  handleFileSelect,
+  files,
+  loadFileList,
+}) => {
   const { settings } = useWorkspace();
-  const { handlePull } = useGitOperations(settings.gitEnabled);
+  const { handlePull } = useGitOperations();
 
   useEffect(() => {
-    loadFileList();
+    void loadFileList();
   }, [loadFileList]);
 
   return (
@@ -28,7 +41,7 @@ const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
       <FileTree
         files={files}
         handleFileSelect={handleFileSelect}
-        showHiddenFiles={settings.showHiddenFiles}
+        showHiddenFiles={settings.showHiddenFiles || false}
       />
     </Box>
   );
diff --git a/app/src/components/modals/account/DeleteAccountModal.jsx b/app/src/components/modals/account/DeleteAccountModal.tsx
similarity index 77%
rename from app/src/components/modals/account/DeleteAccountModal.jsx
rename to app/src/components/modals/account/DeleteAccountModal.tsx
index cc77459..96d56ea 100644
--- a/app/src/components/modals/account/DeleteAccountModal.jsx
+++ b/app/src/components/modals/account/DeleteAccountModal.tsx
@@ -8,8 +8,18 @@ import {
   Button,
 } from '@mantine/core';
 
-const DeleteAccountModal = ({ opened, onClose, onConfirm }) => {
-  const [password, setPassword] = useState('');
+interface DeleteAccountModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: (password: string) => Promise<void>;
+}
+
+const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
+  opened,
+  onClose,
+  onConfirm,
+}) => {
+  const [password, setPassword] = useState<string>('');
 
   return (
     <Modal
@@ -40,7 +50,7 @@ const DeleteAccountModal = ({ opened, onClose, onConfirm }) => {
           <Button
             color="red"
             onClick={() => {
-              onConfirm(password);
+              void onConfirm(password);
               setPassword('');
             }}
           >
diff --git a/app/src/components/modals/account/EmailPasswordModal.jsx b/app/src/components/modals/account/EmailPasswordModal.tsx
similarity index 74%
rename from app/src/components/modals/account/EmailPasswordModal.jsx
rename to app/src/components/modals/account/EmailPasswordModal.tsx
index cb585d2..02974ad 100644
--- a/app/src/components/modals/account/EmailPasswordModal.jsx
+++ b/app/src/components/modals/account/EmailPasswordModal.tsx
@@ -8,8 +8,20 @@ import {
   PasswordInput,
 } from '@mantine/core';
 
-const EmailPasswordModal = ({ opened, onClose, onConfirm, email }) => {
-  const [password, setPassword] = useState('');
+interface EmailPasswordModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: (password: string) => Promise<void>;
+  email: string;
+}
+
+const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
+  opened,
+  onClose,
+  onConfirm,
+  email,
+}) => {
+  const [password, setPassword] = useState<string>('');
 
   return (
     <Modal
@@ -36,7 +48,7 @@ const EmailPasswordModal = ({ opened, onClose, onConfirm, email }) => {
           </Button>
           <Button
             onClick={() => {
-              onConfirm(password);
+              void onConfirm(password);
               setPassword('');
             }}
           >
diff --git a/app/src/components/modals/file/CreateFileModal.jsx b/app/src/components/modals/file/CreateFileModal.tsx
similarity index 76%
rename from app/src/components/modals/file/CreateFileModal.jsx
rename to app/src/components/modals/file/CreateFileModal.tsx
index b44a843..82d805b 100644
--- a/app/src/components/modals/file/CreateFileModal.jsx
+++ b/app/src/components/modals/file/CreateFileModal.tsx
@@ -2,11 +2,15 @@ import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
 
-const CreateFileModal = ({ onCreateFile }) => {
-  const [fileName, setFileName] = useState('');
+interface CreateFileModalProps {
+  onCreateFile: (fileName: string) => Promise<void>;
+}
+
+const CreateFileModal: React.FC<CreateFileModalProps> = ({ onCreateFile }) => {
+  const [fileName, setFileName] = useState<string>('');
   const { newFileModalVisible, setNewFileModalVisible } = useModalContext();
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
     if (fileName) {
       await onCreateFile(fileName);
       setFileName('');
@@ -38,7 +42,7 @@ const CreateFileModal = ({ onCreateFile }) => {
           >
             Cancel
           </Button>
-          <Button onClick={handleSubmit}>Create</Button>
+          <Button onClick={() => void handleSubmit()}>Create</Button>
         </Group>
       </Box>
     </Modal>
diff --git a/app/src/components/modals/file/DeleteFileModal.jsx b/app/src/components/modals/file/DeleteFileModal.tsx
similarity index 63%
rename from app/src/components/modals/file/DeleteFileModal.jsx
rename to app/src/components/modals/file/DeleteFileModal.tsx
index 056bb21..8ba7f22 100644
--- a/app/src/components/modals/file/DeleteFileModal.jsx
+++ b/app/src/components/modals/file/DeleteFileModal.tsx
@@ -2,11 +2,21 @@ import React from 'react';
 import { Modal, Text, Button, Group } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
 
-const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
+interface DeleteFileModalProps {
+  onDeleteFile: (fileName: string) => Promise<void>;
+  selectedFile: string | null;
+}
+
+const DeleteFileModal: React.FC<DeleteFileModalProps> = ({
+  onDeleteFile,
+  selectedFile,
+}) => {
   const { deleteFileModalVisible, setDeleteFileModalVisible } =
     useModalContext();
 
-  const handleConfirm = async () => {
+  const handleConfirm = async (): Promise<void> => {
+    if (!selectedFile) return;
+
     await onDeleteFile(selectedFile);
     setDeleteFileModalVisible(false);
   };
@@ -18,7 +28,7 @@ const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
       title="Delete File"
       centered
     >
-      <Text>Are you sure you want to delete "{selectedFile}"?</Text>
+      <Text>Are you sure you want to delete &quot;{selectedFile}&quot;?</Text>
       <Group justify="flex-end" mt="xl">
         <Button
           variant="default"
@@ -26,7 +36,7 @@ const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
         >
           Cancel
         </Button>
-        <Button color="red" onClick={handleConfirm}>
+        <Button color="red" onClick={() => void handleConfirm()}>
           Delete
         </Button>
       </Group>
diff --git a/app/src/components/modals/git/CommitMessageModal.jsx b/app/src/components/modals/git/CommitMessageModal.tsx
similarity index 79%
rename from app/src/components/modals/git/CommitMessageModal.jsx
rename to app/src/components/modals/git/CommitMessageModal.tsx
index d0707b9..a8df024 100644
--- a/app/src/components/modals/git/CommitMessageModal.jsx
+++ b/app/src/components/modals/git/CommitMessageModal.tsx
@@ -2,12 +2,18 @@ import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
 
-const CommitMessageModal = ({ onCommitAndPush }) => {
+interface CommitMessageModalProps {
+  onCommitAndPush: (message: string) => Promise<void>;
+}
+
+const CommitMessageModal: React.FC<CommitMessageModalProps> = ({
+  onCommitAndPush,
+}) => {
   const [message, setMessage] = useState('');
   const { commitMessageModalVisible, setCommitMessageModalVisible } =
     useModalContext();
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
     if (message) {
       await onCommitAndPush(message);
       setMessage('');
@@ -39,7 +45,7 @@ const CommitMessageModal = ({ onCommitAndPush }) => {
           >
             Cancel
           </Button>
-          <Button onClick={handleSubmit}>Commit</Button>
+          <Button onClick={() => void handleSubmit()}>Commit</Button>
         </Group>
       </Box>
     </Modal>
diff --git a/app/src/components/modals/user/CreateUserModal.jsx b/app/src/components/modals/user/CreateUserModal.tsx
similarity index 53%
rename from app/src/components/modals/user/CreateUserModal.jsx
rename to app/src/components/modals/user/CreateUserModal.tsx
index 23d5b5d..39d0560 100644
--- a/app/src/components/modals/user/CreateUserModal.jsx
+++ b/app/src/components/modals/user/CreateUserModal.tsx
@@ -8,20 +8,41 @@ import {
   Button,
   Group,
 } from '@mantine/core';
+import type { CreateUserRequest } from '@/types/api';
+import { UserRole } from '@/types/models';
 
-const CreateUserModal = ({ opened, onClose, onCreateUser, loading }) => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [displayName, setDisplayName] = useState('');
-  const [role, setRole] = useState('viewer');
+interface CreateUserModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onCreateUser: (userData: CreateUserRequest) => Promise<boolean>;
+  loading: boolean;
+}
 
-  const handleSubmit = async () => {
-    const result = await onCreateUser({ email, password, displayName, role });
-    if (result.success) {
+const CreateUserModal: React.FC<CreateUserModalProps> = ({
+  opened,
+  onClose,
+  onCreateUser,
+  loading,
+}) => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [displayName, setDisplayName] = useState<string>('');
+  const [role, setRole] = useState<UserRole>(UserRole.Viewer);
+
+  const handleSubmit = async (): Promise<void> => {
+    const userData: CreateUserRequest = {
+      email,
+      password,
+      displayName,
+      role,
+    };
+
+    const success = await onCreateUser(userData);
+    if (success) {
       setEmail('');
       setPassword('');
       setDisplayName('');
-      setRole('viewer');
+      setRole(UserRole.Viewer);
       onClose();
     }
   };
@@ -53,18 +74,18 @@ const CreateUserModal = ({ opened, onClose, onCreateUser, loading }) => {
           label="Role"
           required
           value={role}
-          onChange={setRole}
+          onChange={(value) => value && setRole(value as UserRole)}
           data={[
-            { value: 'admin', label: 'Admin' },
-            { value: 'editor', label: 'Editor' },
-            { value: 'viewer', label: 'Viewer' },
+            { value: UserRole.Admin, label: 'Admin' },
+            { value: UserRole.Editor, label: 'Editor' },
+            { value: UserRole.Viewer, label: 'Viewer' },
           ]}
         />
         <Group justify="flex-end" mt="md">
           <Button variant="default" onClick={onClose}>
             Cancel
           </Button>
-          <Button onClick={handleSubmit} loading={loading}>
+          <Button onClick={() => void handleSubmit} loading={loading}>
             Create User
           </Button>
         </Group>
diff --git a/app/src/components/modals/user/DeleteUserModal.jsx b/app/src/components/modals/user/DeleteUserModal.jsx
deleted file mode 100644
index 5763a0a..0000000
--- a/app/src/components/modals/user/DeleteUserModal.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Modal, Text, Button, Group, Stack } from '@mantine/core';
-
-const DeleteUserModal = ({ opened, onClose, onConfirm, user, loading }) => (
-  <Modal
-    opened={opened}
-    onClose={onClose}
-    title="Delete User"
-    centered
-    size="sm"
-  >
-    <Stack>
-      <Text>
-        Are you sure you want to delete user "{user?.email}"? This action cannot
-        be undone and all associated data will be permanently deleted.
-      </Text>
-      <Group justify="flex-end" mt="xl">
-        <Button variant="default" onClick={onClose}>
-          Cancel
-        </Button>
-        <Button color="red" onClick={onConfirm} loading={loading}>
-          Delete User
-        </Button>
-      </Group>
-    </Stack>
-  </Modal>
-);
-
-export default DeleteUserModal;
diff --git a/app/src/components/modals/user/DeleteUserModal.tsx b/app/src/components/modals/user/DeleteUserModal.tsx
new file mode 100644
index 0000000..8870816
--- /dev/null
+++ b/app/src/components/modals/user/DeleteUserModal.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal, Text, Button, Group, Stack } from '@mantine/core';
+import type { User } from '@/types/models';
+
+interface DeleteUserModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  user: User | null;
+  loading: boolean;
+}
+
+const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
+  opened,
+  onClose,
+  onConfirm,
+  user,
+  loading,
+}) => (
+  <Modal
+    opened={opened}
+    onClose={onClose}
+    title="Delete User"
+    centered
+    size="sm"
+  >
+    <Stack>
+      <Text>
+        Are you sure you want to delete user &quot;{user?.email}&quot;? This
+        action cannot be undone and all associated data will be permanently
+        deleted.
+      </Text>
+      <Group justify="flex-end" mt="xl">
+        <Button variant="default" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button color="red" onClick={() => void onConfirm()} loading={loading}>
+          Delete User
+        </Button>
+      </Group>
+    </Stack>
+  </Modal>
+);
+
+export default DeleteUserModal;
diff --git a/app/src/components/modals/user/EditUserModal.jsx b/app/src/components/modals/user/EditUserModal.tsx
similarity index 64%
rename from app/src/components/modals/user/EditUserModal.jsx
rename to app/src/components/modals/user/EditUserModal.tsx
index 0c84bd5..b270a35 100644
--- a/app/src/components/modals/user/EditUserModal.jsx
+++ b/app/src/components/modals/user/EditUserModal.tsx
@@ -9,12 +9,28 @@ import {
   PasswordInput,
   Text,
 } from '@mantine/core';
+import type { UpdateUserRequest } from '@/types/api';
+import { type User, UserRole } from '@/types/models';
 
-const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
-  const [formData, setFormData] = useState({
+interface EditUserModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onEditUser: (userId: number, userData: UpdateUserRequest) => Promise<boolean>;
+  loading: boolean;
+  user: User | null;
+}
+
+const EditUserModal: React.FC<EditUserModalProps> = ({
+  opened,
+  onClose,
+  onEditUser,
+  loading,
+  user,
+}) => {
+  const [formData, setFormData] = useState<UpdateUserRequest>({
     email: '',
     displayName: '',
-    role: '',
+    role: UserRole.Editor,
     password: '',
   });
 
@@ -29,18 +45,20 @@ const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
     }
   }, [user]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
+    if (!user) return;
+
     const updateData = {
       ...formData,
       ...(formData.password ? { password: formData.password } : {}),
     };
 
-    const result = await onEditUser(user.id, updateData);
-    if (result.success) {
+    const success = await onEditUser(user.id, updateData);
+    if (success) {
       setFormData({
         email: '',
         displayName: '',
-        role: '',
+        role: UserRole.Editor,
         password: '',
       });
       onClose();
@@ -70,12 +88,14 @@ const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
         <Select
           label="Role"
           required
-          value={formData.role}
-          onChange={(value) => setFormData({ ...formData, role: value })}
+          value={formData.role ? formData.role.toString() : null}
+          onChange={(value) =>
+            setFormData({ ...formData, role: value as UserRole })
+          }
           data={[
-            { value: 'admin', label: 'Admin' },
-            { value: 'editor', label: 'Editor' },
-            { value: 'viewer', label: 'Viewer' },
+            { value: UserRole.Admin, label: 'Admin' },
+            { value: UserRole.Editor, label: 'Editor' },
+            { value: UserRole.Viewer, label: 'Viewer' },
           ]}
         />
         <PasswordInput
@@ -93,7 +113,7 @@ const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
           <Button variant="default" onClick={onClose}>
             Cancel
           </Button>
-          <Button onClick={handleSubmit} loading={loading}>
+          <Button onClick={() => void handleSubmit} loading={loading}>
             Save Changes
           </Button>
         </Group>
diff --git a/app/src/components/modals/workspace/CreateWorkspaceModal.jsx b/app/src/components/modals/workspace/CreateWorkspaceModal.tsx
similarity index 75%
rename from app/src/components/modals/workspace/CreateWorkspaceModal.jsx
rename to app/src/components/modals/workspace/CreateWorkspaceModal.tsx
index d847af1..1d218d5 100644
--- a/app/src/components/modals/workspace/CreateWorkspaceModal.jsx
+++ b/app/src/components/modals/workspace/CreateWorkspaceModal.tsx
@@ -1,16 +1,23 @@
 import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
-import { createWorkspace } from '../../../services/api';
 import { notifications } from '@mantine/notifications';
+import type { Workspace } from '@/types/models';
+import { createWorkspace } from '@/api/workspace';
 
-const CreateWorkspaceModal = ({ onWorkspaceCreated }) => {
-  const [name, setName] = useState('');
-  const [loading, setLoading] = useState(false);
+interface CreateWorkspaceModalProps {
+  onWorkspaceCreated?: (workspace: Workspace) => Promise<void>;
+}
+
+const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
+  onWorkspaceCreated,
+}) => {
+  const [name, setName] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
   const { createWorkspaceModalVisible, setCreateWorkspaceModalVisible } =
     useModalContext();
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
     if (!name.trim()) {
       notifications.show({
         title: 'Error',
@@ -31,9 +38,9 @@ const CreateWorkspaceModal = ({ onWorkspaceCreated }) => {
       setName('');
       setCreateWorkspaceModalVisible(false);
       if (onWorkspaceCreated) {
-        onWorkspaceCreated(workspace);
+        await onWorkspaceCreated(workspace);
       }
-    } catch (error) {
+    } catch (_error) {
       notifications.show({
         title: 'Error',
         message: 'Failed to create workspace',
@@ -70,7 +77,7 @@ const CreateWorkspaceModal = ({ onWorkspaceCreated }) => {
           >
             Cancel
           </Button>
-          <Button onClick={handleSubmit} loading={loading}>
+          <Button onClick={() => void handleSubmit} loading={loading}>
             Create
           </Button>
         </Group>
diff --git a/app/src/components/modals/workspace/DeleteWorkspaceModal.jsx b/app/src/components/modals/workspace/DeleteWorkspaceModal.tsx
similarity index 54%
rename from app/src/components/modals/workspace/DeleteWorkspaceModal.jsx
rename to app/src/components/modals/workspace/DeleteWorkspaceModal.tsx
index 8effeeb..e7e5d08 100644
--- a/app/src/components/modals/workspace/DeleteWorkspaceModal.jsx
+++ b/app/src/components/modals/workspace/DeleteWorkspaceModal.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import { Modal, Text, Button, Group, Stack } from '@mantine/core';
 
-const DeleteWorkspaceModal = ({
+interface DeleteUserModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  workspaceName: string | undefined;
+}
+
+const DeleteWorkspaceModal: React.FC<DeleteUserModalProps> = ({
   opened,
   onClose,
   onConfirm,
@@ -16,15 +23,15 @@ const DeleteWorkspaceModal = ({
   >
     <Stack>
       <Text>
-        Are you sure you want to delete workspace "{workspaceName}"? This action
-        cannot be undone and all files in this workspace will be permanently
-        deleted.
+        Are you sure you want to delete workspace &quot;{workspaceName}&quot;?
+        This action cannot be undone and all files in this workspace will be
+        permanently deleted.
       </Text>
       <Group justify="flex-end" mt="xl">
         <Button variant="default" onClick={onClose}>
           Cancel
         </Button>
-        <Button color="red" onClick={onConfirm}>
+        <Button color="red" onClick={() => void onConfirm}>
           Delete Workspace
         </Button>
       </Group>
diff --git a/app/src/components/navigation/UserMenu.jsx b/app/src/components/navigation/UserMenu.tsx
similarity index 67%
rename from app/src/components/navigation/UserMenu.jsx
rename to app/src/components/navigation/UserMenu.tsx
index 0002eb0..c7177b8 100644
--- a/app/src/components/navigation/UserMenu.jsx
+++ b/app/src/components/navigation/UserMenu.tsx
@@ -17,15 +17,19 @@ import {
 import { useAuth } from '../../contexts/AuthContext';
 import AccountSettings from '../settings/account/AccountSettings';
 import AdminDashboard from '../settings/admin/AdminDashboard';
+import { UserRole } from '@/types/models';
+import { getHoverStyle } from '@/utils/themeStyles';
 
-const UserMenu = () => {
-  const [accountSettingsOpened, setAccountSettingsOpened] = useState(false);
-  const [adminDashboardOpened, setAdminDashboardOpened] = useState(false);
-  const [opened, setOpened] = useState(false);
+const UserMenu: React.FC = () => {
+  const [accountSettingsOpened, setAccountSettingsOpened] =
+    useState<boolean>(false);
+  const [adminDashboardOpened, setAdminDashboardOpened] =
+    useState<boolean>(false);
+  const [opened, setOpened] = useState<boolean>(false);
   const { user, logout } = useAuth();
 
-  const handleLogout = () => {
-    logout();
+  const handleLogout = async (): Promise<void> => {
+    await logout();
   };
 
   return (
@@ -57,7 +61,7 @@ const UserMenu = () => {
               </Avatar>
               <div>
                 <Text size="sm" fw={500}>
-                  {user.displayName || user.email}
+                  {user?.displayName || user?.email}
                 </Text>
               </div>
             </Group>
@@ -72,15 +76,7 @@ const UserMenu = () => {
               }}
               px="sm"
               py="xs"
-              style={(theme) => ({
-                borderRadius: theme.radius.sm,
-                '&:hover': {
-                  backgroundColor:
-                    theme.colorScheme === 'dark'
-                      ? theme.colors.dark[5]
-                      : theme.colors.gray[0],
-                },
-              })}
+              style={(theme) => getHoverStyle(theme)}
             >
               <Group>
                 <IconSettings size={16} />
@@ -88,7 +84,7 @@ const UserMenu = () => {
               </Group>
             </UnstyledButton>
 
-            {user.role === 'admin' && (
+            {user?.role === UserRole.Admin && (
               <UnstyledButton
                 onClick={() => {
                   setAdminDashboardOpened(true);
@@ -96,15 +92,7 @@ const UserMenu = () => {
                 }}
                 px="sm"
                 py="xs"
-                style={(theme) => ({
-                  borderRadius: theme.radius.sm,
-                  '&:hover': {
-                    backgroundColor:
-                      theme.colorScheme === 'dark'
-                        ? theme.colors.dark[5]
-                        : theme.colors.gray[0],
-                  },
-                })}
+                style={(theme) => getHoverStyle(theme)}
               >
                 <Group>
                   <IconUsers size={16} />
@@ -114,19 +102,14 @@ const UserMenu = () => {
             )}
 
             <UnstyledButton
-              onClick={handleLogout}
+              onClick={() => {
+                void handleLogout();
+                setOpened(false);
+              }}
               px="sm"
               py="xs"
               color="red"
-              style={(theme) => ({
-                borderRadius: theme.radius.sm,
-                '&:hover': {
-                  backgroundColor:
-                    theme.colorScheme === 'dark'
-                      ? theme.colors.dark[5]
-                      : theme.colors.gray[0],
-                },
-              })}
+              style={(theme) => getHoverStyle(theme)}
             >
               <Group>
                 <IconLogout size={16} color="red" />
diff --git a/app/src/components/navigation/WorkspaceSwitcher.jsx b/app/src/components/navigation/WorkspaceSwitcher.tsx
similarity index 70%
rename from app/src/components/navigation/WorkspaceSwitcher.jsx
rename to app/src/components/navigation/WorkspaceSwitcher.tsx
index 6ddc0af..74d2722 100644
--- a/app/src/components/navigation/WorkspaceSwitcher.jsx
+++ b/app/src/components/navigation/WorkspaceSwitcher.tsx
@@ -15,21 +15,26 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 import { useModalContext } from '../../contexts/ModalContext';
-import { listWorkspaces } from '../../services/api';
+import { listWorkspaces } from '../../api/workspace';
 import CreateWorkspaceModal from '../modals/workspace/CreateWorkspaceModal';
+import type { Workspace } from '@/types/models';
+import {
+  getConditionalColor,
+  getWorkspacePaperStyle,
+} from '@/utils/themeStyles';
 
-const WorkspaceSwitcher = () => {
+const WorkspaceSwitcher: React.FC = () => {
   const { currentWorkspace, switchWorkspace } = useWorkspace();
   const { setSettingsModalVisible, setCreateWorkspaceModalVisible } =
     useModalContext();
-  const [workspaces, setWorkspaces] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [popoverOpened, setPopoverOpened] = useState(false);
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [popoverOpened, setPopoverOpened] = useState<boolean>(false);
   const theme = useMantineTheme();
 
-  const loadWorkspaces = async () => {
+  const loadWorkspaces = async (): Promise<void> => {
     setLoading(true);
     try {
       const list = await listWorkspaces();
@@ -40,14 +45,16 @@ const WorkspaceSwitcher = () => {
     setLoading(false);
   };
 
-  const handleCreateWorkspace = () => {
+  const handleCreateWorkspace = (): void => {
     setPopoverOpened(false);
     setCreateWorkspaceModalVisible(true);
   };
 
-  const handleWorkspaceCreated = async (newWorkspace) => {
+  const handleWorkspaceCreated = async (
+    newWorkspace: Workspace
+  ): Promise<void> => {
     await loadWorkspaces();
-    switchWorkspace(newWorkspace.name);
+    await switchWorkspace(newWorkspace.name);
   };
 
   return (
@@ -64,7 +71,7 @@ const WorkspaceSwitcher = () => {
             onClick={() => {
               setPopoverOpened((o) => !o);
               if (!popoverOpened) {
-                loadWorkspaces();
+                void loadWorkspaces();
               }
             }}
           >
@@ -108,24 +115,15 @@ const WorkspaceSwitcher = () => {
                       key={workspace.name}
                       p="xs"
                       withBorder
-                      style={{
-                        backgroundColor: isSelected
-                          ? theme.colors.blue[
-                              theme.colorScheme === 'dark' ? 8 : 1
-                            ]
-                          : undefined,
-                        borderColor: isSelected
-                          ? theme.colors.blue[
-                              theme.colorScheme === 'dark' ? 7 : 5
-                            ]
-                          : undefined,
-                      }}
+                      style={(theme) =>
+                        getWorkspacePaperStyle(theme, isSelected)
+                      }
                     >
                       <Group justify="space-between" wrap="nowrap">
                         <UnstyledButton
                           style={{ flex: 1 }}
                           onClick={() => {
-                            switchWorkspace(workspace.name);
+                            void switchWorkspace(workspace.name);
                             setPopoverOpened(false);
                           }}
                         >
@@ -134,25 +132,13 @@ const WorkspaceSwitcher = () => {
                               size="sm"
                               fw={500}
                               truncate
-                              c={
-                                isSelected
-                                  ? theme.colors.blue[
-                                      theme.colorScheme === 'dark' ? 0 : 9
-                                    ]
-                                  : undefined
-                              }
+                              c={isSelected ? 'blue' : 'inherit'}
                             >
                               {workspace.name}
                             </Text>
                             <Text
                               size="xs"
-                              c={
-                                isSelected
-                                  ? theme.colorScheme === 'dark'
-                                    ? theme.colors.blue[2]
-                                    : theme.colors.blue[7]
-                                  : 'dimmed'
-                              }
+                              c={getConditionalColor(theme, isSelected)}
                             >
                               {new Date(
                                 workspace.createdAt
@@ -165,11 +151,7 @@ const WorkspaceSwitcher = () => {
                             <ActionIcon
                               variant="subtle"
                               size="lg"
-                              color={
-                                theme.colorScheme === 'dark'
-                                  ? 'blue.2'
-                                  : 'blue.7'
-                              }
+                              color={getConditionalColor(theme, true)}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 setSettingsModalVisible(true);
diff --git a/app/src/components/settings/AccordionControl.jsx b/app/src/components/settings/AccordionControl.tsx
similarity index 58%
rename from app/src/components/settings/AccordionControl.jsx
rename to app/src/components/settings/AccordionControl.tsx
index 03cd02e..b366554 100644
--- a/app/src/components/settings/AccordionControl.jsx
+++ b/app/src/components/settings/AccordionControl.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { Accordion, Title } from '@mantine/core';
 
-const AccordionControl = ({ children }) => (
+interface AccordionControlProps {
+  children: React.ReactNode;
+}
+
+const AccordionControl: React.FC<AccordionControlProps> = ({ children }) => (
   <Accordion.Control>
     <Title order={4}>{children}</Title>
   </Accordion.Control>
diff --git a/app/src/components/settings/account/AccountSettings.jsx b/app/src/components/settings/account/AccountSettings.tsx
similarity index 70%
rename from app/src/components/settings/account/AccountSettings.jsx
rename to app/src/components/settings/account/AccountSettings.tsx
index 098240b..5464429 100644
--- a/app/src/components/settings/account/AccountSettings.jsx
+++ b/app/src/components/settings/account/AccountSettings.tsx
@@ -16,24 +16,39 @@ import SecuritySettings from './SecuritySettings';
 import ProfileSettings from './ProfileSettings';
 import DangerZoneSettings from './DangerZoneSettings';
 import AccordionControl from '../AccordionControl';
+import {
+  type UserProfileSettings,
+  type ProfileSettingsState,
+  type SettingsAction,
+  SettingsActionType,
+} from '@/types/models';
+import { getAccordionStyles } from '@/utils/themeStyles';
+
+interface AccountSettingsProps {
+  opened: boolean;
+  onClose: () => void;
+}
 
 // Reducer for managing settings state
-const initialState = {
+const initialState: ProfileSettingsState = {
   localSettings: {},
   initialSettings: {},
   hasUnsavedChanges: false,
 };
 
-function settingsReducer(state, action) {
+function settingsReducer(
+  state: ProfileSettingsState,
+  action: SettingsAction<UserProfileSettings>
+): ProfileSettingsState {
   switch (action.type) {
-    case 'INIT_SETTINGS':
+    case SettingsActionType.INIT_SETTINGS:
       return {
         ...state,
-        localSettings: action.payload,
-        initialSettings: action.payload,
+        localSettings: action.payload || {},
+        initialSettings: action.payload || {},
         hasUnsavedChanges: false,
       };
-    case 'UPDATE_LOCAL_SETTINGS':
+    case SettingsActionType.UPDATE_LOCAL_SETTINGS: {
       const newLocalSettings = { ...state.localSettings, ...action.payload };
       const hasChanges =
         JSON.stringify(newLocalSettings) !==
@@ -43,7 +58,8 @@ function settingsReducer(state, action) {
         localSettings: newLocalSettings,
         hasUnsavedChanges: hasChanges,
       };
-    case 'MARK_SAVED':
+    }
+    case SettingsActionType.MARK_SAVED:
       return {
         ...state,
         initialSettings: state.localSettings,
@@ -54,39 +70,51 @@ function settingsReducer(state, action) {
   }
 }
 
-const AccountSettings = ({ opened, onClose }) => {
+const AccountSettings: React.FC<AccountSettingsProps> = ({
+  opened,
+  onClose,
+}) => {
   const { user, refreshUser } = useAuth();
   const { loading, updateProfile } = useProfileSettings();
   const [state, dispatch] = useReducer(settingsReducer, initialState);
-  const isInitialMount = useRef(true);
-  const [emailModalOpened, setEmailModalOpened] = useState(false);
+  const isInitialMount = useRef<boolean>(true);
+  const [emailModalOpened, setEmailModalOpened] = useState<boolean>(false);
 
   // Initialize settings on mount
   useEffect(() => {
     if (isInitialMount.current && user) {
       isInitialMount.current = false;
-      const settings = {
-        displayName: user.displayName,
+      const settings: UserProfileSettings = {
+        displayName: user.displayName || '',
         email: user.email,
         currentPassword: '',
         newPassword: '',
       };
-      dispatch({ type: 'INIT_SETTINGS', payload: settings });
+      dispatch({
+        type: SettingsActionType.INIT_SETTINGS,
+        payload: settings,
+      });
     }
   }, [user]);
 
-  const handleInputChange = (key, value) => {
-    dispatch({ type: 'UPDATE_LOCAL_SETTINGS', payload: { [key]: value } });
+  const handleInputChange = (
+    key: keyof UserProfileSettings,
+    value: string
+  ): void => {
+    dispatch({
+      type: SettingsActionType.UPDATE_LOCAL_SETTINGS,
+      payload: { [key]: value } as UserProfileSettings,
+    });
   };
 
-  const handleSubmit = async () => {
-    const updates = {};
+  const handleSubmit = async (): Promise<void> => {
+    const updates: UserProfileSettings = {};
     const needsPasswordConfirmation =
       state.localSettings.email !== state.initialSettings.email;
 
     // Add display name if changed
     if (state.localSettings.displayName !== state.initialSettings.displayName) {
-      updates.displayName = state.localSettings.displayName;
+      updates.displayName = state.localSettings.displayName || '';
     }
 
     // Handle password change
@@ -106,17 +134,17 @@ const AccountSettings = ({ opened, onClose }) => {
     // If we're only changing display name or have password already provided, proceed directly
     if (!needsPasswordConfirmation || state.localSettings.currentPassword) {
       if (needsPasswordConfirmation) {
-        updates.email = state.localSettings.email;
+        updates.email = state.localSettings.email || '';
         // If we don't have a password change, we still need to include the current password for email change
         if (!updates.currentPassword) {
-          updates.currentPassword = state.localSettings.currentPassword;
+          updates.currentPassword = state.localSettings.currentPassword || '';
         }
       }
 
-      const result = await updateProfile(updates);
-      if (result.success) {
+      const updatedUser = await updateProfile(updates);
+      if (updatedUser) {
         await refreshUser();
-        dispatch({ type: 'MARK_SAVED' });
+        dispatch({ type: SettingsActionType.MARK_SAVED });
         onClose();
       }
     } else {
@@ -125,17 +153,20 @@ const AccountSettings = ({ opened, onClose }) => {
     }
   };
 
-  const handleEmailConfirm = async (password) => {
-    const updates = {
+  const handleEmailConfirm = async (password: string): Promise<void> => {
+    const updates: UserProfileSettings = {
       ...state.localSettings,
       currentPassword: password,
     };
+
     // Remove any undefined/empty values
     Object.keys(updates).forEach((key) => {
-      if (updates[key] === undefined || updates[key] === '') {
-        delete updates[key];
+      const typedKey = key as keyof UserProfileSettings;
+      if (updates[typedKey] === undefined || updates[typedKey] === '') {
+        delete updates[typedKey];
       }
     });
+
     // Remove keys that haven't changed
     if (updates.displayName === state.initialSettings.displayName) {
       delete updates.displayName;
@@ -144,10 +175,10 @@ const AccountSettings = ({ opened, onClose }) => {
       delete updates.email;
     }
 
-    const result = await updateProfile(updates);
-    if (result.success) {
+    const updatedUser = await updateProfile(updates);
+    if (updatedUser) {
       await refreshUser();
-      dispatch({ type: 'MARK_SAVED' });
+      dispatch({ type: SettingsActionType.MARK_SAVED });
       setEmailModalOpened(false);
       onClose();
     }
@@ -162,7 +193,7 @@ const AccountSettings = ({ opened, onClose }) => {
         centered
         size="lg"
       >
-        <Stack spacing="xl">
+        <Stack gap="xl">
           {state.hasUnsavedChanges && (
             <Badge color="yellow" variant="light">
               Unsaved Changes
@@ -172,25 +203,7 @@ const AccountSettings = ({ opened, onClose }) => {
           <Accordion
             defaultValue={['profile', 'security', 'danger']}
             multiple
-            styles={(theme) => ({
-              control: {
-                paddingTop: theme.spacing.md,
-                paddingBottom: theme.spacing.md,
-              },
-              item: {
-                borderBottom: `1px solid ${
-                  theme.colorScheme === 'dark'
-                    ? theme.colors.dark[4]
-                    : theme.colors.gray[3]
-                }`,
-                '&[data-active]': {
-                  backgroundColor:
-                    theme.colorScheme === 'dark'
-                      ? theme.colors.dark[7]
-                      : theme.colors.gray[0],
-                },
-              },
-            })}
+            styles={(theme) => getAccordionStyles(theme)}
           >
             <Accordion.Item value="profile">
               <AccordionControl>Profile</AccordionControl>
@@ -225,7 +238,7 @@ const AccountSettings = ({ opened, onClose }) => {
               Cancel
             </Button>
             <Button
-              onClick={handleSubmit}
+              onClick={() => void handleSubmit}
               loading={loading}
               disabled={!state.hasUnsavedChanges}
             >
@@ -239,7 +252,7 @@ const AccountSettings = ({ opened, onClose }) => {
         opened={emailModalOpened}
         onClose={() => setEmailModalOpened(false)}
         onConfirm={handleEmailConfirm}
-        email={state.localSettings.email}
+        email={state.localSettings.email || ''}
       />
     </>
   );
diff --git a/app/src/components/settings/account/DangerZoneSettings.jsx b/app/src/components/settings/account/DangerZoneSettings.tsx
similarity index 77%
rename from app/src/components/settings/account/DangerZoneSettings.jsx
rename to app/src/components/settings/account/DangerZoneSettings.tsx
index 9fed1bc..1636782 100644
--- a/app/src/components/settings/account/DangerZoneSettings.jsx
+++ b/app/src/components/settings/account/DangerZoneSettings.tsx
@@ -4,16 +4,16 @@ import DeleteAccountModal from '../../modals/account/DeleteAccountModal';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useProfileSettings } from '../../../hooks/useProfileSettings';
 
-const DangerZoneSettings = () => {
+const DangerZoneSettings: React.FC = () => {
   const { logout } = useAuth();
   const { deleteAccount } = useProfileSettings();
-  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
+  const [deleteModalOpened, setDeleteModalOpened] = useState<boolean>(false);
 
-  const handleDelete = async (password) => {
-    const result = await deleteAccount(password);
-    if (result.success) {
+  const handleDelete = async (password: string): Promise<void> => {
+    const success = await deleteAccount(password);
+    if (success) {
       setDeleteModalOpened(false);
-      logout();
+      await logout();
     }
   };
 
diff --git a/app/src/components/settings/account/ProfileSettings.jsx b/app/src/components/settings/account/ProfileSettings.tsx
similarity index 58%
rename from app/src/components/settings/account/ProfileSettings.jsx
rename to app/src/components/settings/account/ProfileSettings.tsx
index 687df65..52851c4 100644
--- a/app/src/components/settings/account/ProfileSettings.jsx
+++ b/app/src/components/settings/account/ProfileSettings.tsx
@@ -1,9 +1,18 @@
 import React from 'react';
 import { Box, Stack, TextInput } from '@mantine/core';
+import type { UserProfileSettings } from '@/types/models';
 
-const ProfileSettings = ({ settings, onInputChange }) => (
+interface ProfileSettingsProps {
+  settings: UserProfileSettings;
+  onInputChange: (key: keyof UserProfileSettings, value: string) => void;
+}
+
+const ProfileSettingsComponent: React.FC<ProfileSettingsProps> = ({
+  settings,
+  onInputChange,
+}) => (
   <Box>
-    <Stack spacing="md">
+    <Stack gap="md">
       <TextInput
         label="Display Name"
         value={settings.displayName || ''}
@@ -20,4 +29,4 @@ const ProfileSettings = ({ settings, onInputChange }) => (
   </Box>
 );
 
-export default ProfileSettings;
+export default ProfileSettingsComponent;
diff --git a/app/src/components/settings/account/SecuritySettings.jsx b/app/src/components/settings/account/SecuritySettings.tsx
similarity index 77%
rename from app/src/components/settings/account/SecuritySettings.jsx
rename to app/src/components/settings/account/SecuritySettings.tsx
index 3568ebc..ea62594 100644
--- a/app/src/components/settings/account/SecuritySettings.jsx
+++ b/app/src/components/settings/account/SecuritySettings.tsx
@@ -1,11 +1,22 @@
 import React, { useState } from 'react';
 import { Box, PasswordInput, Stack, Text } from '@mantine/core';
+import type { UserProfileSettings } from '@/types/models';
 
-const SecuritySettings = ({ settings, onInputChange }) => {
+interface SecuritySettingsProps {
+  settings: UserProfileSettings;
+  onInputChange: (key: keyof UserProfileSettings, value: string) => void;
+}
+
+type PasswordField = 'currentPassword' | 'newPassword' | 'confirmNewPassword';
+
+const SecuritySettings: React.FC<SecuritySettingsProps> = ({
+  settings,
+  onInputChange,
+}) => {
   const [confirmPassword, setConfirmPassword] = useState('');
   const [error, setError] = useState('');
 
-  const handlePasswordChange = (field, value) => {
+  const handlePasswordChange = (field: PasswordField, value: string) => {
     if (field === 'confirmNewPassword') {
       setConfirmPassword(value);
       // Check if passwords match when either password field changes
@@ -27,7 +38,7 @@ const SecuritySettings = ({ settings, onInputChange }) => {
 
   return (
     <Box>
-      <Stack spacing="md">
+      <Stack gap="md">
         <PasswordInput
           label="Current Password"
           value={settings.currentPassword || ''}
@@ -55,7 +66,7 @@ const SecuritySettings = ({ settings, onInputChange }) => {
         />
         <Text size="xs" c="dimmed">
           Password must be at least 8 characters long. Leave password fields
-          empty if you don't want to change it.
+          empty if you don&apos;t want to change it.
         </Text>
       </Stack>
     </Box>
diff --git a/app/src/components/settings/admin/AdminDashboard.jsx b/app/src/components/settings/admin/AdminDashboard.tsx
similarity index 72%
rename from app/src/components/settings/admin/AdminDashboard.jsx
rename to app/src/components/settings/admin/AdminDashboard.tsx
index e095dc5..d3d1e00 100644
--- a/app/src/components/settings/admin/AdminDashboard.jsx
+++ b/app/src/components/settings/admin/AdminDashboard.tsx
@@ -6,13 +6,23 @@ import AdminUsersTab from './AdminUsersTab';
 import AdminWorkspacesTab from './AdminWorkspacesTab';
 import AdminStatsTab from './AdminStatsTab';
 
-const AdminDashboard = ({ opened, onClose }) => {
+interface AdminDashboardProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+type AdminTabValue = 'users' | 'workspaces' | 'stats';
+
+const AdminDashboard: React.FC<AdminDashboardProps> = ({ opened, onClose }) => {
   const { user: currentUser } = useAuth();
-  const [activeTab, setActiveTab] = useState('users');
+  const [activeTab, setActiveTab] = useState<AdminTabValue>('users');
 
   return (
     <Modal opened={opened} onClose={onClose} size="xl" title="Admin Dashboard">
-      <Tabs value={activeTab} onChange={setActiveTab}>
+      <Tabs
+        value={activeTab}
+        onChange={(value) => setActiveTab(value as AdminTabValue)}
+      >
         <Tabs.List>
           <Tabs.Tab value="users" leftSection={<IconUsers size={16} />}>
             Users
@@ -26,7 +36,7 @@ const AdminDashboard = ({ opened, onClose }) => {
         </Tabs.List>
 
         <Tabs.Panel value="users" pt="md">
-          <AdminUsersTab currentUser={currentUser} />
+          {currentUser && <AdminUsersTab currentUser={currentUser} />}
         </Tabs.Panel>
 
         <Tabs.Panel value="workspaces" pt="md">
diff --git a/app/src/components/settings/admin/AdminStatsTab.jsx b/app/src/components/settings/admin/AdminStatsTab.tsx
similarity index 84%
rename from app/src/components/settings/admin/AdminStatsTab.jsx
rename to app/src/components/settings/admin/AdminStatsTab.tsx
index 3b7346f..f661223 100644
--- a/app/src/components/settings/admin/AdminStatsTab.jsx
+++ b/app/src/components/settings/admin/AdminStatsTab.tsx
@@ -4,8 +4,13 @@ import { IconAlertCircle } from '@tabler/icons-react';
 import { useAdminData } from '../../../hooks/useAdminData';
 import { formatBytes } from '../../../utils/formatBytes';
 
-const AdminStatsTab = () => {
-  const { data: stats, loading, error } = useAdminData('stats');
+interface StatsRow {
+  label: string;
+  value: string | number;
+}
+
+const AdminStatsTab: React.FC = () => {
+  const { data: stats, loading, error } = useAdminData<'stats'>('stats');
 
   if (loading) {
     return <LoadingOverlay visible={true} />;
@@ -19,7 +24,7 @@ const AdminStatsTab = () => {
     );
   }
 
-  const statsRows = [
+  const statsRows: StatsRow[] = [
     { label: 'Total Users', value: stats.totalUsers },
     { label: 'Active Users', value: stats.activeUsers },
     { label: 'Total Workspaces', value: stats.totalWorkspaces },
@@ -33,7 +38,7 @@ const AdminStatsTab = () => {
         System Statistics
       </Text>
 
-      <Table striped highlightOnHover withBorder>
+      <Table striped highlightOnHover>
         <Table.Thead>
           <Table.Tr>
             <Table.Th>Metric</Table.Th>
diff --git a/app/src/components/settings/admin/AdminUsersTab.jsx b/app/src/components/settings/admin/AdminUsersTab.tsx
similarity index 76%
rename from app/src/components/settings/admin/AdminUsersTab.jsx
rename to app/src/components/settings/admin/AdminUsersTab.tsx
index f6d5b99..82f1ed3 100644
--- a/app/src/components/settings/admin/AdminUsersTab.jsx
+++ b/app/src/components/settings/admin/AdminUsersTab.tsx
@@ -20,8 +20,14 @@ import { useUserAdmin } from '../../../hooks/useUserAdmin';
 import CreateUserModal from '../../modals/user/CreateUserModal';
 import EditUserModal from '../../modals/user/EditUserModal';
 import DeleteUserModal from '../../modals/user/DeleteUserModal';
+import type { User } from '@/types/models';
+import type { CreateUserRequest, UpdateUserRequest } from '@/types/api';
 
-const AdminUsersTab = ({ currentUser }) => {
+interface AdminUsersTabProps {
+  currentUser: User;
+}
+
+const AdminUsersTab: React.FC<AdminUsersTabProps> = ({ currentUser }) => {
   const {
     users,
     loading,
@@ -31,19 +37,24 @@ const AdminUsersTab = ({ currentUser }) => {
     delete: deleteUser,
   } = useUserAdmin();
 
-  const [createModalOpened, setCreateModalOpened] = useState(false);
-  const [editModalData, setEditModalData] = useState(null);
-  const [deleteModalData, setDeleteModalData] = useState(null);
+  const [createModalOpened, setCreateModalOpened] = useState<boolean>(false);
+  const [editModalData, setEditModalData] = useState<User | null>(null);
+  const [deleteModalData, setDeleteModalData] = useState<User | null>(null);
 
-  const handleCreateUser = async (userData) => {
+  const handleCreateUser = async (
+    userData: CreateUserRequest
+  ): Promise<boolean> => {
     return await create(userData);
   };
 
-  const handleEditUser = async (id, userData) => {
+  const handleEditUser = async (
+    id: number,
+    userData: UpdateUserRequest
+  ): Promise<boolean> => {
     return await update(id, userData);
   };
 
-  const handleDeleteClick = (user) => {
+  const handleDeleteClick = (user: User): void => {
     if (user.id === currentUser.id) {
       notifications.show({
         title: 'Error',
@@ -55,20 +66,20 @@ const AdminUsersTab = ({ currentUser }) => {
     setDeleteModalData(user);
   };
 
-  const handleDeleteConfirm = async () => {
+  const handleDeleteConfirm = async (): Promise<void> => {
     if (!deleteModalData) return;
-    const result = await deleteUser(deleteModalData.id);
-    if (result.success) {
+    const success = await deleteUser(deleteModalData.id);
+    if (success) {
       setDeleteModalData(null);
     }
   };
 
-  const rows = users.map((user) => (
+  const renderUserRow = (user: User) => (
     <Table.Tr key={user.id}>
       <Table.Td>{user.email}</Table.Td>
       <Table.Td>{user.displayName}</Table.Td>
       <Table.Td>
-        <Text transform="capitalize">{user.role}</Text>
+        <Text style={{ textTransform: 'capitalize' }}>{user.role}</Text>
       </Table.Td>
       <Table.Td>{new Date(user.createdAt).toLocaleDateString()}</Table.Td>
       <Table.Td>
@@ -91,7 +102,7 @@ const AdminUsersTab = ({ currentUser }) => {
         </Group>
       </Table.Td>
     </Table.Tr>
-  ));
+  );
 
   return (
     <Box pos="relative">
@@ -130,7 +141,7 @@ const AdminUsersTab = ({ currentUser }) => {
             <Table.Th style={{ width: 100 }}>Actions</Table.Th>
           </Table.Tr>
         </Table.Thead>
-        <Table.Tbody>{rows}</Table.Tbody>
+        <Table.Tbody>{users.map(renderUserRow)}</Table.Tbody>
       </Table>
 
       <CreateUserModal
diff --git a/app/src/components/settings/admin/AdminWorkspacesTab.jsx b/app/src/components/settings/admin/AdminWorkspacesTab.jsx
deleted file mode 100644
index 5c2cf9d..0000000
--- a/app/src/components/settings/admin/AdminWorkspacesTab.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import {
-  Table,
-  Group,
-  Text,
-  ActionIcon,
-  Box,
-  LoadingOverlay,
-  Alert,
-} from '@mantine/core';
-import { IconTrash, IconEdit, IconAlertCircle } from '@tabler/icons-react';
-import { useAdminData } from '../../../hooks/useAdminData';
-import { formatBytes } from '../../../utils/formatBytes';
-
-const AdminWorkspacesTab = () => {
-  const { data: workspaces, loading, error } = useAdminData('workspaces');
-
-  const rows = workspaces.map((workspace) => (
-    <Table.Tr key={workspace.id}>
-      <Table.Td>{workspace.userEmail}</Table.Td>
-      <Table.Td>{workspace.workspaceName}</Table.Td>
-      <Table.Td>
-        {new Date(workspace.workspaceCreatedAt).toLocaleDateString()}
-      </Table.Td>
-      <Table.Td>{workspace.totalFiles}</Table.Td>
-      <Table.Td>{formatBytes(workspace.totalSize)}</Table.Td>
-    </Table.Tr>
-  ));
-
-  return (
-    <Box pos="relative">
-      <LoadingOverlay visible={loading} />
-
-      {error && (
-        <Alert
-          icon={<IconAlertCircle size={16} />}
-          title="Error"
-          color="red"
-          mb="md"
-        >
-          {error}
-        </Alert>
-      )}
-
-      <Group justify="space-between" mb="md">
-        <Text size="xl" fw={700}>
-          Workspace Management
-        </Text>
-      </Group>
-
-      <Table striped highlightOnHover withTableBorder>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Owner</Table.Th>
-            <Table.Th>Name</Table.Th>
-            <Table.Th>Created At</Table.Th>
-            <Table.Th>Total Files</Table.Th>
-            <Table.Th>Total Size</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>{rows}</Table.Tbody>
-      </Table>
-    </Box>
-  );
-};
-
-export default AdminWorkspacesTab;
diff --git a/app/src/components/settings/admin/AdminWorkspacesTab.tsx b/app/src/components/settings/admin/AdminWorkspacesTab.tsx
new file mode 100644
index 0000000..094364b
--- /dev/null
+++ b/app/src/components/settings/admin/AdminWorkspacesTab.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Table, Group, Text, Box, LoadingOverlay, Alert } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
+import { useAdminData } from '../../../hooks/useAdminData';
+import { formatBytes } from '../../../utils/formatBytes';
+import type { FileCountStats, WorkspaceStats } from '@/types/models';
+
+const AdminWorkspacesTab: React.FC = () => {
+  const {
+    data: workspaces,
+    loading,
+    error,
+  } = useAdminData<'workspaces'>('workspaces');
+
+  const renderWorkspaceRow = (workspace: WorkspaceStats) => {
+    const fileStats: FileCountStats = workspace.fileCountStats || {
+      totalFiles: 0,
+      totalSize: 0,
+    };
+
+    return (
+      <Table.Tr key={workspace.workspaceID}>
+        <Table.Td>{workspace.userEmail}</Table.Td>
+        <Table.Td>{workspace.workspaceName}</Table.Td>
+        <Table.Td>
+          {new Date(workspace.workspaceCreatedAt).toLocaleDateString()}
+        </Table.Td>
+        <Table.Td>{fileStats.totalFiles}</Table.Td>
+        <Table.Td>{formatBytes(fileStats.totalSize)}</Table.Td>
+      </Table.Tr>
+    );
+  };
+
+  return (
+    <Box pos="relative">
+      <LoadingOverlay visible={loading} />
+
+      {error && (
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          title="Error"
+          color="red"
+          mb="md"
+        >
+          {error}
+        </Alert>
+      )}
+
+      <Group justify="space-between" mb="md">
+        <Text size="xl" fw={700}>
+          Workspace Management
+        </Text>
+      </Group>
+
+      <Table striped highlightOnHover withTableBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Owner</Table.Th>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Created At</Table.Th>
+            <Table.Th>Total Files</Table.Th>
+            <Table.Th>Total Size</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {!loading && !error && workspaces.map(renderWorkspaceRow)}
+        </Table.Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AdminWorkspacesTab;
diff --git a/app/src/components/settings/workspace/AppearanceSettings.jsx b/app/src/components/settings/workspace/AppearanceSettings.jsx
deleted file mode 100644
index 79e2055..0000000
--- a/app/src/components/settings/workspace/AppearanceSettings.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Text, Switch, Group, Box, Title } from '@mantine/core';
-import { useWorkspace } from '../../../contexts/WorkspaceContext';
-
-const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
-  const { colorScheme, updateColorScheme } = useWorkspace();
-
-  const handleThemeChange = () => {
-    const newTheme = colorScheme === 'dark' ? 'light' : 'dark';
-    updateColorScheme(newTheme);
-    onThemeChange(newTheme);
-  };
-
-  return (
-    <Box mb="md">
-      <Group justify="space-between" align="center">
-        <Text size="sm">Dark Mode</Text>
-        <Switch checked={colorScheme === 'dark'} onChange={handleThemeChange} />
-      </Group>
-    </Box>
-  );
-};
-
-export default AppearanceSettings;
diff --git a/app/src/components/settings/workspace/AppearanceSettings.tsx b/app/src/components/settings/workspace/AppearanceSettings.tsx
new file mode 100644
index 0000000..537d38b
--- /dev/null
+++ b/app/src/components/settings/workspace/AppearanceSettings.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text, Switch, Group, Box } from '@mantine/core';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { Theme } from '@/types/models';
+
+interface AppearanceSettingsProps {
+  onThemeChange: (newTheme: Theme) => void;
+}
+
+const AppearanceSettings: React.FC<AppearanceSettingsProps> = ({
+  onThemeChange,
+}) => {
+  const { colorScheme, updateColorScheme } = useTheme();
+
+  const handleThemeChange = (): void => {
+    const newTheme = colorScheme === 'dark' ? Theme.Light : Theme.Dark;
+    updateColorScheme(newTheme);
+    onThemeChange(newTheme);
+  };
+
+  return (
+    <Box mb="md">
+      <Group justify="space-between" align="center">
+        <Text size="sm">Dark Mode</Text>
+        <Switch checked={colorScheme === 'dark'} onChange={handleThemeChange} />
+      </Group>
+    </Box>
+  );
+};
+
+export default AppearanceSettings;
diff --git a/app/src/components/settings/workspace/DangerZoneSettings.jsx b/app/src/components/settings/workspace/DangerZoneSettings.tsx
similarity index 79%
rename from app/src/components/settings/workspace/DangerZoneSettings.jsx
rename to app/src/components/settings/workspace/DangerZoneSettings.tsx
index dbc0e30..9ee98c5 100644
--- a/app/src/components/settings/workspace/DangerZoneSettings.jsx
+++ b/app/src/components/settings/workspace/DangerZoneSettings.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
-import { Box, Button, Title } from '@mantine/core';
+import { Box, Button } from '@mantine/core';
 import DeleteWorkspaceModal from '../../modals/workspace/DeleteWorkspaceModal';
-import { useWorkspace } from '../../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../../hooks/useWorkspace';
 import { useModalContext } from '../../../contexts/ModalContext';
 
-const DangerZoneSettings = () => {
+const DangerZoneSettings: React.FC = () => {
   const { currentWorkspace, workspaces, deleteCurrentWorkspace } =
     useWorkspace();
   const { setSettingsModalVisible } = useModalContext();
-  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
+  const [deleteModalOpened, setDeleteModalOpened] = useState<boolean>(false);
 
-  const handleDelete = async () => {
+  const handleDelete = async (): Promise<void> => {
     await deleteCurrentWorkspace();
     setDeleteModalOpened(false);
     setSettingsModalVisible(false);
diff --git a/app/src/components/settings/workspace/EditorSettings.jsx b/app/src/components/settings/workspace/EditorSettings.tsx
similarity index 79%
rename from app/src/components/settings/workspace/EditorSettings.jsx
rename to app/src/components/settings/workspace/EditorSettings.tsx
index 13a76d2..62b58f9 100644
--- a/app/src/components/settings/workspace/EditorSettings.jsx
+++ b/app/src/components/settings/workspace/EditorSettings.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import { Text, Switch, Tooltip, Group, Box } from '@mantine/core';
 
-const EditorSettings = ({
+interface EditorSettingsProps {
+  autoSave: boolean;
+  showHiddenFiles: boolean;
+  onAutoSaveChange: (value: boolean) => void;
+  onShowHiddenFilesChange: (value: boolean) => void;
+}
+
+const EditorSettings: React.FC<EditorSettingsProps> = ({
   autoSave,
   showHiddenFiles,
   onAutoSaveChange,
diff --git a/app/src/components/settings/workspace/GeneralSettings.jsx b/app/src/components/settings/workspace/GeneralSettings.tsx
similarity index 60%
rename from app/src/components/settings/workspace/GeneralSettings.jsx
rename to app/src/components/settings/workspace/GeneralSettings.tsx
index 0ada3e9..d6763e1 100644
--- a/app/src/components/settings/workspace/GeneralSettings.jsx
+++ b/app/src/components/settings/workspace/GeneralSettings.tsx
@@ -1,7 +1,16 @@
 import React from 'react';
-import { Title, Box, TextInput, Text, Grid } from '@mantine/core';
+import { Box, TextInput, Text, Grid } from '@mantine/core';
+import type { Workspace } from '@/types/models';
 
-const GeneralSettings = ({ name, onInputChange }) => {
+interface GeneralSettingsProps {
+  name: string;
+  onInputChange: (key: keyof Workspace, value: string) => void;
+}
+
+const GeneralSettings: React.FC<GeneralSettingsProps> = ({
+  name,
+  onInputChange,
+}) => {
   return (
     <Box mb="md">
       <Grid gutter="md" align="center">
@@ -10,7 +19,7 @@ const GeneralSettings = ({ name, onInputChange }) => {
         </Grid.Col>
         <Grid.Col span={6}>
           <TextInput
-            value={name || ''}
+            value={name}
             onChange={(event) =>
               onInputChange('name', event.currentTarget.value)
             }
diff --git a/app/src/components/settings/workspace/GitSettings.jsx b/app/src/components/settings/workspace/GitSettings.tsx
similarity index 91%
rename from app/src/components/settings/workspace/GitSettings.jsx
rename to app/src/components/settings/workspace/GitSettings.tsx
index 1c5867c..b73d8eb 100644
--- a/app/src/components/settings/workspace/GitSettings.jsx
+++ b/app/src/components/settings/workspace/GitSettings.tsx
@@ -8,8 +8,21 @@ import {
   Group,
   Grid,
 } from '@mantine/core';
+import type { Workspace } from '@/types/models';
 
-const GitSettings = ({
+interface GitSettingsProps {
+  gitEnabled: boolean;
+  gitUrl: string;
+  gitUser: string;
+  gitToken: string;
+  gitAutoCommit: boolean;
+  gitCommitMsgTemplate: string;
+  gitCommitName: string;
+  gitCommitEmail: string;
+  onInputChange: (key: keyof Workspace, value: string | boolean) => void;
+}
+
+const GitSettings: React.FC<GitSettingsProps> = ({
   gitEnabled,
   gitUrl,
   gitUser,
@@ -21,7 +34,7 @@ const GitSettings = ({
   onInputChange,
 }) => {
   return (
-    <Stack spacing="md">
+    <Stack gap="md">
       <Grid gutter="md" align="center">
         <Grid.Col span={6}>
           <Text size="sm">Enable Git Repository</Text>
diff --git a/app/src/components/settings/workspace/WorkspaceSettings.jsx b/app/src/components/settings/workspace/WorkspaceSettings.tsx
similarity index 68%
rename from app/src/components/settings/workspace/WorkspaceSettings.jsx
rename to app/src/components/settings/workspace/WorkspaceSettings.tsx
index 34bc7b8..f20b01c 100644
--- a/app/src/components/settings/workspace/WorkspaceSettings.jsx
+++ b/app/src/components/settings/workspace/WorkspaceSettings.tsx
@@ -9,7 +9,7 @@ import {
   Accordion,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { useWorkspace } from '../../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../../hooks/useWorkspace';
 import AppearanceSettings from './AppearanceSettings';
 import EditorSettings from './EditorSettings';
 import GitSettings from './GitSettings';
@@ -17,23 +17,39 @@ import GeneralSettings from './GeneralSettings';
 import { useModalContext } from '../../../contexts/ModalContext';
 import DangerZoneSettings from './DangerZoneSettings';
 import AccordionControl from '../AccordionControl';
+import {
+  type Theme,
+  type Workspace,
+  type SettingsAction,
+  SettingsActionType,
+} from '@/types/models';
+import { getAccordionStyles } from '@/utils/themeStyles';
+// State and reducer for workspace settings
+interface WorkspaceSettingsState {
+  localSettings: Partial<Workspace>;
+  initialSettings: Partial<Workspace>;
+  hasUnsavedChanges: boolean;
+}
 
-const initialState = {
+const initialState: WorkspaceSettingsState = {
   localSettings: {},
   initialSettings: {},
   hasUnsavedChanges: false,
 };
 
-function settingsReducer(state, action) {
+function settingsReducer(
+  state: WorkspaceSettingsState,
+  action: SettingsAction<Partial<Workspace>>
+): WorkspaceSettingsState {
   switch (action.type) {
-    case 'INIT_SETTINGS':
+    case SettingsActionType.INIT_SETTINGS:
       return {
         ...state,
-        localSettings: action.payload,
-        initialSettings: action.payload,
+        localSettings: action.payload || {},
+        initialSettings: action.payload || {},
         hasUnsavedChanges: false,
       };
-    case 'UPDATE_LOCAL_SETTINGS':
+    case SettingsActionType.UPDATE_LOCAL_SETTINGS: {
       const newLocalSettings = { ...state.localSettings, ...action.payload };
       const hasChanges =
         JSON.stringify(newLocalSettings) !==
@@ -43,7 +59,8 @@ function settingsReducer(state, action) {
         localSettings: newLocalSettings,
         hasUnsavedChanges: hasChanges,
       };
-    case 'MARK_SAVED':
+    }
+    case SettingsActionType.MARK_SAVED:
       return {
         ...state,
         initialSettings: state.localSettings,
@@ -54,16 +71,16 @@ function settingsReducer(state, action) {
   }
 }
 
-const WorkspaceSettings = () => {
+const WorkspaceSettings: React.FC = () => {
   const { currentWorkspace, updateSettings } = useWorkspace();
   const { settingsModalVisible, setSettingsModalVisible } = useModalContext();
   const [state, dispatch] = useReducer(settingsReducer, initialState);
-  const isInitialMount = useRef(true);
+  const isInitialMount = useRef<boolean>(true);
 
   useEffect(() => {
-    if (isInitialMount.current) {
+    if (isInitialMount.current && currentWorkspace) {
       isInitialMount.current = false;
-      const settings = {
+      const settings: Partial<Workspace> = {
         name: currentWorkspace.name,
         theme: currentWorkspace.theme,
         autoSave: currentWorkspace.autoSave,
@@ -77,15 +94,21 @@ const WorkspaceSettings = () => {
         gitCommitName: currentWorkspace.gitCommitName,
         gitCommitEmail: currentWorkspace.gitCommitEmail,
       };
-      dispatch({ type: 'INIT_SETTINGS', payload: settings });
+      dispatch({ type: SettingsActionType.INIT_SETTINGS, payload: settings });
     }
   }, [currentWorkspace]);
 
-  const handleInputChange = useCallback((key, value) => {
-    dispatch({ type: 'UPDATE_LOCAL_SETTINGS', payload: { [key]: value } });
-  }, []);
+  const handleInputChange = useCallback(
+    <K extends keyof Workspace>(key: K, value: Workspace[K]): void => {
+      dispatch({
+        type: SettingsActionType.UPDATE_LOCAL_SETTINGS,
+        payload: { [key]: value } as Partial<Workspace>,
+      });
+    },
+    []
+  );
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
     try {
       if (!state.localSettings.name?.trim()) {
         notifications.show({
@@ -96,7 +119,7 @@ const WorkspaceSettings = () => {
       }
 
       await updateSettings(state.localSettings);
-      dispatch({ type: 'MARK_SAVED' });
+      dispatch({ type: SettingsActionType.MARK_SAVED });
       notifications.show({
         message: 'Settings saved successfully',
         color: 'green',
@@ -105,7 +128,9 @@ const WorkspaceSettings = () => {
     } catch (error) {
       console.error('Failed to save settings:', error);
       notifications.show({
-        message: 'Failed to save settings: ' + error.message,
+        message:
+          'Failed to save settings: ' +
+          (error instanceof Error ? error.message : String(error)),
         color: 'red',
       });
     }
@@ -123,7 +148,7 @@ const WorkspaceSettings = () => {
       centered
       size="lg"
     >
-      <Stack spacing="xl">
+      <Stack gap="xl">
         {state.hasUnsavedChanges && (
           <Badge color="yellow" variant="light">
             Unsaved Changes
@@ -134,23 +159,7 @@ const WorkspaceSettings = () => {
           defaultValue={['general', 'appearance', 'editor', 'git', 'danger']}
           multiple
           styles={(theme) => ({
-            control: {
-              paddingTop: theme.spacing.md,
-              paddingBottom: theme.spacing.md,
-            },
-            item: {
-              borderBottom: `1px solid ${
-                theme.colorScheme === 'dark'
-                  ? theme.colors.dark[4]
-                  : theme.colors.gray[3]
-              }`,
-              '&[data-active]': {
-                backgroundColor:
-                  theme.colorScheme === 'dark'
-                    ? theme.colors.dark[7]
-                    : theme.colors.gray[0],
-              },
-            },
+            ...getAccordionStyles(theme),
             chevron: {
               '&[data-rotate]': {
                 transform: 'rotate(180deg)',
@@ -162,7 +171,7 @@ const WorkspaceSettings = () => {
             <AccordionControl>General</AccordionControl>
             <Accordion.Panel>
               <GeneralSettings
-                name={state.localSettings.name}
+                name={state.localSettings.name || ''}
                 onInputChange={handleInputChange}
               />
             </Accordion.Panel>
@@ -172,9 +181,8 @@ const WorkspaceSettings = () => {
             <AccordionControl>Appearance</AccordionControl>
             <Accordion.Panel>
               <AppearanceSettings
-                themeSettings={state.localSettings.theme}
-                onThemeChange={(newTheme) =>
-                  handleInputChange('theme', newTheme)
+                onThemeChange={(newTheme: string) =>
+                  handleInputChange('theme', newTheme as Theme)
                 }
               />
             </Accordion.Panel>
@@ -184,12 +192,12 @@ const WorkspaceSettings = () => {
             <AccordionControl>Editor</AccordionControl>
             <Accordion.Panel>
               <EditorSettings
-                autoSave={state.localSettings.autoSave}
-                onAutoSaveChange={(value) =>
+                autoSave={state.localSettings.autoSave || false}
+                onAutoSaveChange={(value: boolean) =>
                   handleInputChange('autoSave', value)
                 }
-                showHiddenFiles={state.localSettings.showHiddenFiles}
-                onShowHiddenFilesChange={(value) =>
+                showHiddenFiles={state.localSettings.showHiddenFiles || false}
+                onShowHiddenFilesChange={(value: boolean) =>
                   handleInputChange('showHiddenFiles', value)
                 }
               />
@@ -200,14 +208,16 @@ const WorkspaceSettings = () => {
             <AccordionControl>Git Integration</AccordionControl>
             <Accordion.Panel>
               <GitSettings
-                gitEnabled={state.localSettings.gitEnabled}
-                gitUrl={state.localSettings.gitUrl}
-                gitUser={state.localSettings.gitUser}
-                gitToken={state.localSettings.gitToken}
-                gitAutoCommit={state.localSettings.gitAutoCommit}
-                gitCommitMsgTemplate={state.localSettings.gitCommitMsgTemplate}
-                gitCommitName={state.localSettings.gitCommitName}
-                gitCommitEmail={state.localSettings.gitCommitEmail}
+                gitEnabled={state.localSettings.gitEnabled || false}
+                gitUrl={state.localSettings.gitUrl || ''}
+                gitUser={state.localSettings.gitUser || ''}
+                gitToken={state.localSettings.gitToken || ''}
+                gitAutoCommit={state.localSettings.gitAutoCommit || false}
+                gitCommitMsgTemplate={
+                  state.localSettings.gitCommitMsgTemplate || ''
+                }
+                gitCommitName={state.localSettings.gitCommitName || ''}
+                gitCommitEmail={state.localSettings.gitCommitEmail || ''}
                 onInputChange={handleInputChange}
               />
             </Accordion.Panel>
@@ -225,7 +235,7 @@ const WorkspaceSettings = () => {
           <Button variant="default" onClick={handleClose}>
             Cancel
           </Button>
-          <Button onClick={handleSubmit}>Save Changes</Button>
+          <Button onClick={() => void handleSubmit}>Save Changes</Button>
         </Group>
       </Stack>
     </Modal>
diff --git a/app/src/contexts/AuthContext.jsx b/app/src/contexts/AuthContext.jsx
deleted file mode 100644
index 4878e05..0000000
--- a/app/src/contexts/AuthContext.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useEffect,
-} from 'react';
-import { notifications } from '@mantine/notifications';
-import * as authApi from '../services/authApi';
-
-const AuthContext = createContext(null);
-
-export const AuthProvider = ({ children }) => {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [initialized, setInitialized] = useState(false);
-
-  // Load user data on mount
-  useEffect(() => {
-    const initializeAuth = async () => {
-      try {
-        const userData = await authApi.getCurrentUser();
-        setUser(userData);
-      } catch (error) {
-        console.error('Failed to initialize auth:', error);
-      } finally {
-        setLoading(false);
-        setInitialized(true);
-      }
-    };
-
-    initializeAuth();
-  }, []);
-
-  const login = useCallback(async (email, password) => {
-    try {
-      const { user: userData } = await authApi.login(email, password);
-      setUser(userData);
-      notifications.show({
-        title: 'Success',
-        message: 'Logged in successfully',
-        color: 'green',
-      });
-      return true;
-    } catch (error) {
-      console.error('Login failed:', error);
-      notifications.show({
-        title: 'Error',
-        message: error.message || 'Login failed',
-        color: 'red',
-      });
-      return false;
-    }
-  }, []);
-
-  const logout = useCallback(async () => {
-    try {
-      await authApi.logout();
-    } catch (error) {
-      console.error('Logout failed:', error);
-    } finally {
-      setUser(null);
-    }
-  }, []);
-
-  const refreshToken = useCallback(async () => {
-    try {
-      const success = await authApi.refreshToken();
-      if (!success) {
-        await logout();
-      }
-      return success;
-    } catch (error) {
-      console.error('Token refresh failed:', error);
-      await logout();
-      return false;
-    }
-  }, [logout]);
-
-  const refreshUser = useCallback(async () => {
-    try {
-      const userData = await authApi.getCurrentUser();
-      setUser(userData);
-    } catch (error) {
-      console.error('Failed to refresh user data:', error);
-    }
-  }, []);
-
-  const value = {
-    user,
-    loading,
-    initialized,
-    login,
-    logout,
-    refreshToken,
-    refreshUser,
-  };
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-};
diff --git a/app/src/contexts/AuthContext.tsx b/app/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..866d2f5
--- /dev/null
+++ b/app/src/contexts/AuthContext.tsx
@@ -0,0 +1,131 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from 'react';
+import { notifications } from '@mantine/notifications';
+import {
+  login as apiLogin,
+  logout as apiLogout,
+  refreshToken as apiRefreshToken,
+  getCurrentUser,
+} from '@/api/auth';
+import type { User } from '@/types/models';
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  initialized: boolean;
+  login: (email: string, password: string) => Promise<boolean>;
+  logout: () => Promise<void>;
+  refreshToken: () => Promise<boolean>;
+  refreshUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+interface AuthProviderProps {
+  children: React.ReactNode;
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [initialized, setInitialized] = useState<boolean>(false);
+
+  // Load user data on mount
+  useEffect(() => {
+    const initializeAuth = async (): Promise<void> => {
+      try {
+        const userData = await getCurrentUser();
+        setUser(userData);
+      } catch (error) {
+        console.error('Failed to initialize auth:', error);
+      } finally {
+        setLoading(false);
+        setInitialized(true);
+      }
+    };
+
+    void initializeAuth();
+  }, []);
+
+  const login = useCallback(
+    async (email: string, password: string): Promise<boolean> => {
+      try {
+        const userData = await apiLogin(email, password);
+        setUser(userData);
+        notifications.show({
+          title: 'Success',
+          message: 'Logged in successfully',
+          color: 'green',
+        });
+        return true;
+      } catch (error) {
+        console.error('Login failed:', error);
+        notifications.show({
+          title: 'Error',
+          message: error instanceof Error ? error.message : 'Login failed',
+          color: 'red',
+        });
+        return false;
+      }
+    },
+    []
+  );
+
+  const logout = useCallback(async (): Promise<void> => {
+    try {
+      await apiLogout();
+    } catch (error) {
+      console.error('Logout failed:', error);
+    } finally {
+      setUser(null);
+    }
+  }, []);
+
+  const refreshToken = useCallback(async (): Promise<boolean> => {
+    try {
+      const success = await apiRefreshToken();
+      if (!success) {
+        await logout();
+      }
+      return success;
+    } catch (error) {
+      console.error('Token refresh failed:', error);
+      await logout();
+      return false;
+    }
+  }, [logout]);
+
+  const refreshUser = useCallback(async (): Promise<void> => {
+    try {
+      const userData = await getCurrentUser();
+      setUser(userData);
+    } catch (error) {
+      console.error('Failed to refresh user data:', error);
+    }
+  }, []);
+
+  const value: AuthContextType = {
+    user,
+    loading,
+    initialized,
+    login,
+    logout,
+    refreshToken,
+    refreshUser,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
diff --git a/app/src/contexts/ModalContext.jsx b/app/src/contexts/ModalContext.jsx
deleted file mode 100644
index 4865e6a..0000000
--- a/app/src/contexts/ModalContext.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { createContext, useContext, useState } from 'react';
-
-const ModalContext = createContext();
-
-export const ModalProvider = ({ children }) => {
-  const [newFileModalVisible, setNewFileModalVisible] = useState(false);
-  const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
-  const [commitMessageModalVisible, setCommitMessageModalVisible] =
-    useState(false);
-  const [settingsModalVisible, setSettingsModalVisible] = useState(false);
-  const [switchWorkspaceModalVisible, setSwitchWorkspaceModalVisible] =
-    useState(false);
-  const [createWorkspaceModalVisible, setCreateWorkspaceModalVisible] =
-    useState(false);
-
-  const value = {
-    newFileModalVisible,
-    setNewFileModalVisible,
-    deleteFileModalVisible,
-    setDeleteFileModalVisible,
-    commitMessageModalVisible,
-    setCommitMessageModalVisible,
-    settingsModalVisible,
-    setSettingsModalVisible,
-    switchWorkspaceModalVisible,
-    setSwitchWorkspaceModalVisible,
-    createWorkspaceModalVisible,
-    setCreateWorkspaceModalVisible,
-  };
-
-  return (
-    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
-  );
-};
-
-export const useModalContext = () => useContext(ModalContext);
diff --git a/app/src/contexts/ModalContext.tsx b/app/src/contexts/ModalContext.tsx
new file mode 100644
index 0000000..fb5bcc4
--- /dev/null
+++ b/app/src/contexts/ModalContext.tsx
@@ -0,0 +1,67 @@
+import React, {
+  type ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from 'react';
+
+interface ModalContextType {
+  newFileModalVisible: boolean;
+  setNewFileModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  deleteFileModalVisible: boolean;
+  setDeleteFileModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  commitMessageModalVisible: boolean;
+  setCommitMessageModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  settingsModalVisible: boolean;
+  setSettingsModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  switchWorkspaceModalVisible: boolean;
+  setSwitchWorkspaceModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  createWorkspaceModalVisible: boolean;
+  setCreateWorkspaceModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+// Create the context with a default undefined value
+const ModalContext = createContext<ModalContextType | null>(null);
+
+interface ModalProviderProps {
+  children: ReactNode;
+}
+
+export const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
+  const [newFileModalVisible, setNewFileModalVisible] = useState(false);
+  const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
+  const [commitMessageModalVisible, setCommitMessageModalVisible] =
+    useState(false);
+  const [settingsModalVisible, setSettingsModalVisible] = useState(false);
+  const [switchWorkspaceModalVisible, setSwitchWorkspaceModalVisible] =
+    useState(false);
+  const [createWorkspaceModalVisible, setCreateWorkspaceModalVisible] =
+    useState(false);
+
+  const value: ModalContextType = {
+    newFileModalVisible,
+    setNewFileModalVisible,
+    deleteFileModalVisible,
+    setDeleteFileModalVisible,
+    commitMessageModalVisible,
+    setCommitMessageModalVisible,
+    settingsModalVisible,
+    setSettingsModalVisible,
+    switchWorkspaceModalVisible,
+    setSwitchWorkspaceModalVisible,
+    createWorkspaceModalVisible,
+    setCreateWorkspaceModalVisible,
+  };
+
+  return (
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
+  );
+};
+
+export const useModalContext = (): ModalContextType => {
+  const context = useContext(ModalContext);
+  if (context === null) {
+    throw new Error('useModalContext must be used within a ModalProvider');
+  }
+  return context;
+};
diff --git a/app/src/contexts/ThemeContext.tsx b/app/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..5ccb069
--- /dev/null
+++ b/app/src/contexts/ThemeContext.tsx
@@ -0,0 +1,46 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { useMantineColorScheme, type MantineColorScheme } from '@mantine/core';
+
+interface ThemeContextType {
+  colorScheme: MantineColorScheme;
+  updateColorScheme: (newTheme: MantineColorScheme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+
+  const updateColorScheme = useCallback(
+    (newTheme: MantineColorScheme): void => {
+      setColorScheme(newTheme);
+    },
+    [setColorScheme]
+  );
+
+  const value: ThemeContextType = {
+    colorScheme,
+    updateColorScheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
diff --git a/app/src/contexts/WorkspaceContext.jsx b/app/src/contexts/WorkspaceContext.jsx
deleted file mode 100644
index beddf4f..0000000
--- a/app/src/contexts/WorkspaceContext.jsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-} from 'react';
-import { useMantineColorScheme } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import {
-  fetchLastWorkspaceName,
-  getWorkspace,
-  updateWorkspace,
-  updateLastWorkspaceName,
-  deleteWorkspace,
-  listWorkspaces,
-} from '../services/api';
-import { DEFAULT_WORKSPACE_SETTINGS } from '../utils/constants';
-
-const WorkspaceContext = createContext();
-
-export const WorkspaceProvider = ({ children }) => {
-  const [currentWorkspace, setCurrentWorkspace] = useState(null);
-  const [workspaces, setWorkspaces] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const { colorScheme, setColorScheme } = useMantineColorScheme();
-
-  const loadWorkspaces = useCallback(async () => {
-    try {
-      const workspaceList = await listWorkspaces();
-      setWorkspaces(workspaceList);
-      return workspaceList;
-    } catch (error) {
-      console.error('Failed to load workspaces:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to load workspaces list',
-        color: 'red',
-      });
-      return [];
-    }
-  }, []);
-
-  const loadWorkspaceData = useCallback(async (workspaceName) => {
-    try {
-      const workspace = await getWorkspace(workspaceName);
-      setCurrentWorkspace(workspace);
-      setColorScheme(workspace.theme);
-    } catch (error) {
-      console.error('Failed to load workspace data:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to load workspace data',
-        color: 'red',
-      });
-    }
-  }, []);
-
-  const loadFirstAvailableWorkspace = useCallback(async () => {
-    try {
-      const allWorkspaces = await listWorkspaces();
-      if (allWorkspaces.length > 0) {
-        const firstWorkspace = allWorkspaces[0];
-        await updateLastWorkspaceName(firstWorkspace.name);
-        await loadWorkspaceData(firstWorkspace.name);
-      }
-    } catch (error) {
-      console.error('Failed to load first available workspace:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to load workspace',
-        color: 'red',
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    const initializeWorkspace = async () => {
-      try {
-        const { lastWorkspaceName } = await fetchLastWorkspaceName();
-        if (lastWorkspaceName) {
-          await loadWorkspaceData(lastWorkspaceName);
-        } else {
-          await loadFirstAvailableWorkspace();
-        }
-        await loadWorkspaces();
-      } catch (error) {
-        console.error('Failed to initialize workspace:', error);
-        await loadFirstAvailableWorkspace();
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    initializeWorkspace();
-  }, []);
-
-  const switchWorkspace = useCallback(async (workspaceName) => {
-    try {
-      setLoading(true);
-      await updateLastWorkspaceName(workspaceName);
-      await loadWorkspaceData(workspaceName);
-      await loadWorkspaces();
-    } catch (error) {
-      console.error('Failed to switch workspace:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to switch workspace',
-        color: 'red',
-      });
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const deleteCurrentWorkspace = useCallback(async () => {
-    if (!currentWorkspace) return;
-
-    try {
-      const allWorkspaces = await loadWorkspaces();
-      if (allWorkspaces.length <= 1) {
-        notifications.show({
-          title: 'Error',
-          message:
-            'Cannot delete the last workspace. At least one workspace must exist.',
-          color: 'red',
-        });
-        return;
-      }
-
-      // Delete workspace and get the next workspace ID
-      const response = await deleteWorkspace(currentWorkspace.name);
-
-      // Load the new workspace data
-      await loadWorkspaceData(response.nextWorkspaceName);
-
-      notifications.show({
-        title: 'Success',
-        message: 'Workspace deleted successfully',
-        color: 'green',
-      });
-
-      await loadWorkspaces();
-    } catch (error) {
-      console.error('Failed to delete workspace:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to delete workspace',
-        color: 'red',
-      });
-    }
-  }, [currentWorkspace]);
-
-  const updateSettings = useCallback(
-    async (newSettings) => {
-      if (!currentWorkspace) return;
-
-      try {
-        const updatedWorkspace = {
-          ...currentWorkspace,
-          ...newSettings,
-        };
-
-        const response = await updateWorkspace(
-          currentWorkspace.name,
-          updatedWorkspace
-        );
-        setCurrentWorkspace(response);
-        setColorScheme(response.theme);
-        await loadWorkspaces();
-      } catch (error) {
-        console.error('Failed to save settings:', error);
-        throw error;
-      }
-    },
-    [currentWorkspace, setColorScheme]
-  );
-
-  const updateColorScheme = useCallback(
-    (newTheme) => {
-      setColorScheme(newTheme);
-    },
-    [setColorScheme]
-  );
-
-  const value = {
-    currentWorkspace,
-    workspaces,
-    settings: currentWorkspace || DEFAULT_WORKSPACE_SETTINGS,
-    updateSettings,
-    loading,
-    colorScheme,
-    updateColorScheme,
-    switchWorkspace,
-    deleteCurrentWorkspace,
-  };
-
-  return (
-    <WorkspaceContext.Provider value={value}>
-      {children}
-    </WorkspaceContext.Provider>
-  );
-};
-
-export const useWorkspace = () => {
-  const context = useContext(WorkspaceContext);
-  if (context === undefined) {
-    throw new Error('useWorkspace must be used within a WorkspaceProvider');
-  }
-  return context;
-};
diff --git a/app/src/contexts/WorkspaceContext.tsx b/app/src/contexts/WorkspaceContext.tsx
new file mode 100644
index 0000000..41cbd09
--- /dev/null
+++ b/app/src/contexts/WorkspaceContext.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { ThemeProvider } from './ThemeContext';
+import { WorkspaceDataProvider } from './WorkspaceDataContext';
+import { useWorkspace as useWorkspaceHook } from '../hooks/useWorkspace';
+
+// Re-export the useWorkspace hook directly for backward compatibility
+export const useWorkspace = useWorkspaceHook;
+
+interface WorkspaceProviderProps {
+  children: React.ReactNode;
+}
+
+// Create a backward-compatible WorkspaceProvider that composes our new providers
+export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
+  children,
+}) => {
+  return (
+    <ThemeProvider>
+      <WorkspaceDataProvider>{children}</WorkspaceDataProvider>
+    </ThemeProvider>
+  );
+};
diff --git a/app/src/contexts/WorkspaceDataContext.tsx b/app/src/contexts/WorkspaceDataContext.tsx
new file mode 100644
index 0000000..4d9e7e4
--- /dev/null
+++ b/app/src/contexts/WorkspaceDataContext.tsx
@@ -0,0 +1,146 @@
+import React, {
+  type ReactNode,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from 'react';
+import { notifications } from '@mantine/notifications';
+import { DEFAULT_WORKSPACE_SETTINGS, type Workspace } from '@/types/models';
+import {
+  getWorkspace,
+  listWorkspaces,
+  getLastWorkspaceName,
+  updateLastWorkspaceName,
+} from '@/api/workspace';
+import { useTheme } from './ThemeContext';
+
+interface WorkspaceDataContextType {
+  currentWorkspace: Workspace | null;
+  workspaces: Workspace[];
+  settings: Workspace | typeof DEFAULT_WORKSPACE_SETTINGS;
+  loading: boolean;
+  loadWorkspaces: () => Promise<Workspace[]>;
+  loadWorkspaceData: (workspaceName: string) => Promise<void>;
+  setCurrentWorkspace: (workspace: Workspace | null) => void;
+}
+
+const WorkspaceDataContext = createContext<WorkspaceDataContextType | null>(
+  null
+);
+
+interface WorkspaceDataProviderProps {
+  children: ReactNode;
+}
+
+export const WorkspaceDataProvider: React.FC<WorkspaceDataProviderProps> = ({
+  children,
+}) => {
+  const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(
+    null
+  );
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const { updateColorScheme } = useTheme();
+
+  const loadWorkspaces = useCallback(async (): Promise<Workspace[]> => {
+    try {
+      const workspaceList = await listWorkspaces();
+      setWorkspaces(workspaceList);
+      return workspaceList;
+    } catch (error) {
+      console.error('Failed to load workspaces:', error);
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to load workspaces list',
+        color: 'red',
+      });
+      return [];
+    }
+  }, []);
+
+  const loadWorkspaceData = useCallback(
+    async (workspaceName: string): Promise<void> => {
+      try {
+        const workspace = await getWorkspace(workspaceName);
+        setCurrentWorkspace(workspace);
+        updateColorScheme(workspace.theme);
+      } catch (error) {
+        console.error('Failed to load workspace data:', error);
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to load workspace data',
+          color: 'red',
+        });
+      }
+    },
+    [updateColorScheme]
+  );
+
+  const loadFirstAvailableWorkspace = useCallback(async (): Promise<void> => {
+    try {
+      const allWorkspaces = await listWorkspaces();
+      if (allWorkspaces.length > 0) {
+        const firstWorkspace = allWorkspaces[0];
+        if (!firstWorkspace) throw new Error('No workspaces available');
+        await updateLastWorkspaceName(firstWorkspace.name);
+        await loadWorkspaceData(firstWorkspace.name);
+      }
+    } catch (error) {
+      console.error('Failed to load first available workspace:', error);
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to load workspace',
+        color: 'red',
+      });
+    }
+  }, [loadWorkspaceData]);
+
+  useEffect(() => {
+    const initializeWorkspace = async (): Promise<void> => {
+      try {
+        const lastWorkspaceName = await getLastWorkspaceName();
+        if (lastWorkspaceName) {
+          await loadWorkspaceData(lastWorkspaceName);
+        } else {
+          await loadFirstAvailableWorkspace();
+        }
+        await loadWorkspaces();
+      } catch (error) {
+        console.error('Failed to initialize workspace:', error);
+        await loadFirstAvailableWorkspace();
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void initializeWorkspace();
+  }, [loadFirstAvailableWorkspace, loadWorkspaceData, loadWorkspaces]);
+
+  const value: WorkspaceDataContextType = {
+    currentWorkspace,
+    workspaces,
+    settings: currentWorkspace || DEFAULT_WORKSPACE_SETTINGS,
+    loading,
+    loadWorkspaces,
+    loadWorkspaceData,
+    setCurrentWorkspace,
+  };
+
+  return (
+    <WorkspaceDataContext.Provider value={value}>
+      {children}
+    </WorkspaceDataContext.Provider>
+  );
+};
+
+export const useWorkspaceData = (): WorkspaceDataContextType => {
+  const context = useContext(WorkspaceDataContext);
+  if (!context) {
+    throw new Error(
+      'useWorkspaceData must be used within a WorkspaceDataProvider'
+    );
+  }
+  return context;
+};
diff --git a/app/src/hooks/useAdminData.js b/app/src/hooks/useAdminData.js
deleted file mode 100644
index 9669ad3..0000000
--- a/app/src/hooks/useAdminData.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useState, useEffect } from 'react';
-import { notifications } from '@mantine/notifications';
-import { getUsers, getWorkspaces, getSystemStats } from '../services/adminApi';
-
-// Hook for admin data fetching (stats and workspaces)
-export const useAdminData = (type) => {
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  const loadData = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      let response;
-      switch (type) {
-        case 'stats':
-          response = await getSystemStats();
-          break;
-        case 'workspaces':
-          response = await getWorkspaces();
-          break;
-        case 'users':
-          response = await getUsers();
-          break;
-        default:
-          throw new Error('Invalid data type');
-      }
-      setData(response);
-    } catch (err) {
-      const message = err.response?.data?.error || err.message;
-      setError(message);
-      notifications.show({
-        title: 'Error',
-        message: `Failed to load ${type}: ${message}`,
-        color: 'red',
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-  }, [type]);
-
-  return { data, loading, error, reload: loadData };
-};
diff --git a/app/src/hooks/useAdminData.ts b/app/src/hooks/useAdminData.ts
new file mode 100644
index 0000000..730b4ad
--- /dev/null
+++ b/app/src/hooks/useAdminData.ts
@@ -0,0 +1,88 @@
+import { useState, useEffect, useCallback } from 'react';
+import { notifications } from '@mantine/notifications';
+import { getUsers, getWorkspaces, getSystemStats } from '@/api/admin';
+import type { SystemStats, User, WorkspaceStats } from '@/types/models';
+
+// Possible types of admin data
+type AdminDataType = 'stats' | 'workspaces' | 'users';
+
+// Define the return data type based on the requested data type
+type AdminData<T extends AdminDataType> = T extends 'stats'
+  ? SystemStats
+  : T extends 'workspaces'
+  ? WorkspaceStats[]
+  : T extends 'users'
+  ? User[]
+  : never;
+
+// Define the return type of the hook
+interface AdminDataResult<T extends AdminDataType> {
+  data: AdminData<T>;
+  loading: boolean;
+  error: string | null;
+  reload: () => Promise<void>;
+}
+
+// Hook for admin data fetching (stats and workspaces)
+export const useAdminData = <T extends AdminDataType>(
+  type: T
+): AdminDataResult<T> => {
+  // Initialize with the appropriate empty type
+  const getInitialData = (): AdminData<T> => {
+    if (type === 'stats') {
+      return {} as SystemStats as AdminData<T>;
+    } else if (type === 'workspaces') {
+      return [] as WorkspaceStats[] as AdminData<T>;
+    } else if (type === 'users') {
+      return [] as User[] as AdminData<T>;
+    } else {
+      return [] as unknown as AdminData<T>;
+    }
+  };
+
+  const [data, setData] = useState<AdminData<T>>(getInitialData());
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      let response;
+      switch (type) {
+        case 'stats':
+          response = await getSystemStats();
+          break;
+        case 'workspaces':
+          response = await getWorkspaces();
+          break;
+        case 'users':
+          response = await getUsers();
+          break;
+        default:
+          throw new Error('Invalid data type');
+      }
+      setData(response as AdminData<T>);
+    } catch (err) {
+      const message =
+        err instanceof Error
+          ? (err as { response?: { data?: { error?: string } } })?.response
+              ?.data?.error || err.message
+          : 'An unknown error occurred';
+      setError(message);
+      notifications.show({
+        title: 'Error',
+        message: `Failed to load ${type}: ${message}`,
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [type]);
+
+  useEffect(() => {
+    void loadData();
+  }, [loadData]);
+
+  return { data, loading, error, reload: loadData };
+};
diff --git a/app/src/hooks/useFileContent.js b/app/src/hooks/useFileContent.ts
similarity index 52%
rename from app/src/hooks/useFileContent.js
rename to app/src/hooks/useFileContent.ts
index 21b8776..12f996e 100644
--- a/app/src/hooks/useFileContent.js
+++ b/app/src/hooks/useFileContent.ts
@@ -1,25 +1,38 @@
 import { useState, useCallback, useEffect } from 'react';
-import { fetchFileContent } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
-import { DEFAULT_FILE } from '../utils/constants';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
+import { getFileContent } from '@/api/file';
+import { DEFAULT_FILE } from '@/types/models';
 
-export const useFileContent = (selectedFile) => {
-  const { currentWorkspace } = useWorkspace();
-  const [content, setContent] = useState(DEFAULT_FILE.content);
-  const [originalContent, setOriginalContent] = useState(DEFAULT_FILE.content);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+interface UseFileContentResult {
+  content: string;
+  setContent: React.Dispatch<React.SetStateAction<string>>;
+  hasUnsavedChanges: boolean;
+  setHasUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
+  loadFileContent: (filePath: string) => Promise<void>;
+  handleContentChange: (newContent: string) => void;
+}
+
+export const useFileContent = (
+  selectedFile: string | null
+): UseFileContentResult => {
+  const { currentWorkspace } = useWorkspaceData();
+  const [content, setContent] = useState<string>(DEFAULT_FILE.content);
+  const [originalContent, setOriginalContent] = useState<string>(
+    DEFAULT_FILE.content
+  );
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
 
   const loadFileContent = useCallback(
-    async (filePath) => {
+    async (filePath: string) => {
       if (!currentWorkspace) return;
 
       try {
-        let newContent;
+        let newContent: string;
         if (filePath === DEFAULT_FILE.path) {
           newContent = DEFAULT_FILE.content;
         } else if (!isImageFile(filePath)) {
-          newContent = await fetchFileContent(currentWorkspace.name, filePath);
+          newContent = await getFileContent(currentWorkspace.name, filePath);
         } else {
           newContent = ''; // Set empty content for image files
         }
@@ -38,12 +51,12 @@ export const useFileContent = (selectedFile) => {
 
   useEffect(() => {
     if (selectedFile && currentWorkspace) {
-      loadFileContent(selectedFile);
+      void loadFileContent(selectedFile);
     }
   }, [selectedFile, currentWorkspace, loadFileContent]);
 
   const handleContentChange = useCallback(
-    (newContent) => {
+    (newContent: string) => {
       setContent(newContent);
       setHasUnsavedChanges(newContent !== originalContent);
     },
diff --git a/app/src/hooks/useFileList.js b/app/src/hooks/useFileList.ts
similarity index 50%
rename from app/src/hooks/useFileList.js
rename to app/src/hooks/useFileList.ts
index 4557f1f..9d40bbd 100644
--- a/app/src/hooks/useFileList.js
+++ b/app/src/hooks/useFileList.ts
@@ -1,16 +1,22 @@
 import { useState, useCallback } from 'react';
-import { fetchFileList } from '../services/api';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { listFiles } from '../api/file';
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
+import type { FileNode } from '@/types/models';
 
-export const useFileList = () => {
-  const [files, setFiles] = useState([]);
-  const { currentWorkspace, loading: workspaceLoading } = useWorkspace();
+interface UseFileListResult {
+  files: FileNode[];
+  loadFileList: () => Promise<void>;
+}
 
-  const loadFileList = useCallback(async () => {
+export const useFileList = (): UseFileListResult => {
+  const [files, setFiles] = useState<FileNode[]>([]);
+  const { currentWorkspace, loading: workspaceLoading } = useWorkspaceData();
+
+  const loadFileList = useCallback(async (): Promise<void> => {
     if (!currentWorkspace || workspaceLoading) return;
 
     try {
-      const fileList = await fetchFileList(currentWorkspace.name);
+      const fileList = await listFiles(currentWorkspace.name);
       if (Array.isArray(fileList)) {
         setFiles(fileList);
       } else {
diff --git a/app/src/hooks/useFileNavigation.js b/app/src/hooks/useFileNavigation.ts
similarity index 53%
rename from app/src/hooks/useFileNavigation.js
rename to app/src/hooks/useFileNavigation.ts
index ed4ff76..3240c19 100644
--- a/app/src/hooks/useFileNavigation.js
+++ b/app/src/hooks/useFileNavigation.ts
@@ -1,16 +1,22 @@
 import { useState, useCallback, useEffect } from 'react';
-import { DEFAULT_FILE } from '../utils/constants';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
 import { useLastOpenedFile } from './useLastOpenedFile';
+import { DEFAULT_FILE } from '@/types/models';
 
-export const useFileNavigation = () => {
-  const [selectedFile, setSelectedFile] = useState(DEFAULT_FILE.path);
-  const [isNewFile, setIsNewFile] = useState(true);
-  const { currentWorkspace } = useWorkspace();
+interface UseFileNavigationResult {
+  selectedFile: string;
+  isNewFile: boolean;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+}
+
+export const useFileNavigation = (): UseFileNavigationResult => {
+  const [selectedFile, setSelectedFile] = useState<string>(DEFAULT_FILE.path);
+  const [isNewFile, setIsNewFile] = useState<boolean>(true);
+  const { currentWorkspace } = useWorkspaceData();
   const { loadLastOpenedFile, saveLastOpenedFile } = useLastOpenedFile();
 
   const handleFileSelect = useCallback(
-    async (filePath) => {
+    async (filePath: string | null): Promise<void> => {
       const newPath = filePath || DEFAULT_FILE.path;
       setSelectedFile(newPath);
       setIsNewFile(!filePath);
@@ -24,20 +30,20 @@ export const useFileNavigation = () => {
 
   // Load last opened file when workspace changes
   useEffect(() => {
-    const initializeFile = async () => {
+    const initializeFile = async (): Promise<void> => {
       setSelectedFile(DEFAULT_FILE.path);
       setIsNewFile(true);
 
       const lastFile = await loadLastOpenedFile();
       if (lastFile) {
-        handleFileSelect(lastFile);
+        await handleFileSelect(lastFile);
       } else {
-        handleFileSelect(null);
+        await handleFileSelect(null);
       }
     };
 
     if (currentWorkspace) {
-      initializeFile();
+      void initializeFile();
     }
   }, [currentWorkspace, loadLastOpenedFile, handleFileSelect]);
 
diff --git a/app/src/hooks/useFileOperations.js b/app/src/hooks/useFileOperations.ts
similarity index 67%
rename from app/src/hooks/useFileOperations.js
rename to app/src/hooks/useFileOperations.ts
index 6df5dae..f34e32c 100644
--- a/app/src/hooks/useFileOperations.js
+++ b/app/src/hooks/useFileOperations.ts
@@ -1,15 +1,22 @@
 import { useCallback } from 'react';
 import { notifications } from '@mantine/notifications';
-import { saveFileContent, deleteFile } from '../services/api';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { saveFile, deleteFile } from '../api/file';
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
 import { useGitOperations } from './useGitOperations';
+import { FileAction } from '@/types/models';
 
-export const useFileOperations = () => {
-  const { currentWorkspace, settings } = useWorkspace();
+interface UseFileOperationsResult {
+  handleSave: (filePath: string, content: string) => Promise<boolean>;
+  handleDelete: (filePath: string) => Promise<boolean>;
+  handleCreate: (fileName: string, initialContent?: string) => Promise<boolean>;
+}
+
+export const useFileOperations = (): UseFileOperationsResult => {
+  const { currentWorkspace, settings } = useWorkspaceData();
   const { handleCommitAndPush } = useGitOperations();
 
   const autoCommit = useCallback(
-    async (filePath, action) => {
+    async (filePath: string, action: FileAction): Promise<void> => {
       if (settings.gitAutoCommit && settings.gitEnabled) {
         let commitMessage = settings.gitCommitMsgTemplate
           .replace('${filename}', filePath)
@@ -21,21 +28,21 @@ export const useFileOperations = () => {
         await handleCommitAndPush(commitMessage);
       }
     },
-    [settings]
+    [settings, handleCommitAndPush]
   );
 
   const handleSave = useCallback(
-    async (filePath, content) => {
+    async (filePath: string, content: string): Promise<boolean> => {
       if (!currentWorkspace) return false;
 
       try {
-        await saveFileContent(currentWorkspace.name, filePath, content);
+        await saveFile(currentWorkspace.name, filePath, content);
         notifications.show({
           title: 'Success',
           message: 'File saved successfully',
           color: 'green',
         });
-        autoCommit(filePath, 'update');
+        await autoCommit(filePath, FileAction.Update);
         return true;
       } catch (error) {
         console.error('Error saving file:', error);
@@ -51,7 +58,7 @@ export const useFileOperations = () => {
   );
 
   const handleDelete = useCallback(
-    async (filePath) => {
+    async (filePath: string): Promise<boolean> => {
       if (!currentWorkspace) return false;
 
       try {
@@ -61,7 +68,7 @@ export const useFileOperations = () => {
           message: 'File deleted successfully',
           color: 'green',
         });
-        autoCommit(filePath, 'delete');
+        await autoCommit(filePath, FileAction.Delete);
         return true;
       } catch (error) {
         console.error('Error deleting file:', error);
@@ -77,17 +84,17 @@ export const useFileOperations = () => {
   );
 
   const handleCreate = useCallback(
-    async (fileName, initialContent = '') => {
+    async (fileName: string, initialContent: string = ''): Promise<boolean> => {
       if (!currentWorkspace) return false;
 
       try {
-        await saveFileContent(currentWorkspace.name, fileName, initialContent);
+        await saveFile(currentWorkspace.name, fileName, initialContent);
         notifications.show({
           title: 'Success',
           message: 'File created successfully',
           color: 'green',
         });
-        autoCommit(fileName, 'create');
+        await autoCommit(fileName, FileAction.Create);
         return true;
       } catch (error) {
         console.error('Error creating new file:', error);
diff --git a/app/src/hooks/useGitOperations.js b/app/src/hooks/useGitOperations.ts
similarity index 58%
rename from app/src/hooks/useGitOperations.js
rename to app/src/hooks/useGitOperations.ts
index 9a3e5b3..601dff1 100644
--- a/app/src/hooks/useGitOperations.js
+++ b/app/src/hooks/useGitOperations.ts
@@ -1,12 +1,18 @@
 import { useCallback } from 'react';
 import { notifications } from '@mantine/notifications';
-import { pullChanges, commitAndPush } from '../services/api';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { pullChanges, commitAndPush } from '../api/git';
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
+import type { CommitHash } from '@/types/models';
 
-export const useGitOperations = () => {
-  const { currentWorkspace, settings } = useWorkspace();
+interface UseGitOperationsResult {
+  handlePull: () => Promise<boolean>;
+  handleCommitAndPush: (message: string) => Promise<void>;
+}
 
-  const handlePull = useCallback(async () => {
+export const useGitOperations = (): UseGitOperationsResult => {
+  const { currentWorkspace, settings } = useWorkspaceData();
+
+  const handlePull = useCallback(async (): Promise<boolean> => {
     if (!currentWorkspace || !settings.gitEnabled) return false;
 
     try {
@@ -29,17 +35,19 @@ export const useGitOperations = () => {
   }, [currentWorkspace, settings.gitEnabled]);
 
   const handleCommitAndPush = useCallback(
-    async (message) => {
-      if (!currentWorkspace || !settings.gitEnabled) return false;
-
+    async (message: string): Promise<void> => {
+      if (!currentWorkspace || !settings.gitEnabled) return;
+      const commitHash: CommitHash = await commitAndPush(
+        currentWorkspace.name,
+        message
+      );
       try {
-        await commitAndPush(currentWorkspace.name, message);
         notifications.show({
           title: 'Success',
-          message: 'Successfully committed and pushed changes',
+          message: 'Successfully committed and pushed changes ' + commitHash,
           color: 'green',
         });
-        return true;
+        return;
       } catch (error) {
         console.error('Failed to commit and push changes:', error);
         notifications.show({
@@ -47,7 +55,7 @@ export const useGitOperations = () => {
           message: 'Failed to commit and push changes',
           color: 'red',
         });
-        return false;
+        return;
       }
     },
     [currentWorkspace, settings.gitEnabled]
diff --git a/app/src/hooks/useLastOpenedFile.js b/app/src/hooks/useLastOpenedFile.js
deleted file mode 100644
index d1b8bef..0000000
--- a/app/src/hooks/useLastOpenedFile.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useCallback } from 'react';
-import { getLastOpenedFile, updateLastOpenedFile } from '../services/api';
-import { useWorkspace } from '../contexts/WorkspaceContext';
-
-export const useLastOpenedFile = () => {
-  const { currentWorkspace } = useWorkspace();
-
-  const loadLastOpenedFile = useCallback(async () => {
-    if (!currentWorkspace) return null;
-
-    try {
-      const response = await getLastOpenedFile(currentWorkspace.name);
-      return response.lastOpenedFilePath || null;
-    } catch (error) {
-      console.error('Failed to load last opened file:', error);
-      return null;
-    }
-  }, [currentWorkspace]);
-
-  const saveLastOpenedFile = useCallback(
-    async (filePath) => {
-      if (!currentWorkspace) return;
-
-      try {
-        await updateLastOpenedFile(currentWorkspace.name, filePath);
-      } catch (error) {
-        console.error('Failed to save last opened file:', error);
-      }
-    },
-    [currentWorkspace]
-  );
-
-  return {
-    loadLastOpenedFile,
-    saveLastOpenedFile,
-  };
-};
diff --git a/app/src/hooks/useLastOpenedFile.ts b/app/src/hooks/useLastOpenedFile.ts
new file mode 100644
index 0000000..5c0ceeb
--- /dev/null
+++ b/app/src/hooks/useLastOpenedFile.ts
@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+import { getLastOpenedFile, updateLastOpenedFile } from '../api/file';
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
+
+interface UseLastOpenedFileResult {
+  loadLastOpenedFile: () => Promise<string | null>;
+  saveLastOpenedFile: (filePath: string) => Promise<void>;
+}
+
+export const useLastOpenedFile = (): UseLastOpenedFileResult => {
+  const { currentWorkspace } = useWorkspaceData();
+
+  const loadLastOpenedFile = useCallback(async (): Promise<string | null> => {
+    if (!currentWorkspace) return null;
+
+    try {
+      const response: string = await getLastOpenedFile(currentWorkspace.name);
+      return response || null;
+    } catch (error) {
+      console.error('Failed to load last opened file:', error);
+      return null;
+    }
+  }, [currentWorkspace]);
+
+  const saveLastOpenedFile = useCallback(
+    async (filePath: string): Promise<void> => {
+      if (!currentWorkspace) return;
+
+      try {
+        await updateLastOpenedFile(currentWorkspace.name, filePath);
+      } catch (error) {
+        console.error('Failed to save last opened file:', error);
+      }
+    },
+    [currentWorkspace]
+  );
+
+  return {
+    loadLastOpenedFile,
+    saveLastOpenedFile,
+  };
+};
diff --git a/app/src/hooks/useProfileSettings.js b/app/src/hooks/useProfileSettings.js
deleted file mode 100644
index 381e784..0000000
--- a/app/src/hooks/useProfileSettings.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useState, useCallback } from 'react';
-import { notifications } from '@mantine/notifications';
-import { updateProfile, deleteProfile } from '../services/api';
-
-export function useProfileSettings() {
-  const [loading, setLoading] = useState(false);
-
-  const handleProfileUpdate = useCallback(async (updates) => {
-    setLoading(true);
-    try {
-      const updatedUser = await updateProfile(updates);
-
-      notifications.show({
-        title: 'Success',
-        message: 'Profile updated successfully',
-        color: 'green',
-      });
-
-      return { success: true, user: updatedUser };
-    } catch (error) {
-      let errorMessage = 'Failed to update profile';
-
-      if (error.message.includes('password')) {
-        errorMessage = 'Current password is incorrect';
-      } else if (error.message.includes('email')) {
-        errorMessage = 'Email is already in use';
-      }
-
-      notifications.show({
-        title: 'Error',
-        message: errorMessage,
-        color: 'red',
-      });
-
-      return { success: false, error: error.message };
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const handleAccountDeletion = useCallback(async (password) => {
-    setLoading(true);
-    try {
-      await deleteProfile(password);
-
-      notifications.show({
-        title: 'Success',
-        message: 'Account deleted successfully',
-        color: 'green',
-      });
-
-      return { success: true };
-    } catch (error) {
-      notifications.show({
-        title: 'Error',
-        message: error.message || 'Failed to delete account',
-        color: 'red',
-      });
-
-      return { success: false, error: error.message };
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  return {
-    loading,
-    updateProfile: handleProfileUpdate,
-    deleteAccount: handleAccountDeletion,
-  };
-}
diff --git a/app/src/hooks/useProfileSettings.ts b/app/src/hooks/useProfileSettings.ts
new file mode 100644
index 0000000..587257d
--- /dev/null
+++ b/app/src/hooks/useProfileSettings.ts
@@ -0,0 +1,88 @@
+import { useState, useCallback } from 'react';
+import { notifications } from '@mantine/notifications';
+import { updateProfile, deleteUser } from '../api/user';
+import type { UpdateProfileRequest } from '@/types/api';
+import type { User } from '@/types/models';
+
+interface UseProfileSettingsResult {
+  loading: boolean;
+  updateProfile: (updates: UpdateProfileRequest) => Promise<User | null>;
+  deleteAccount: (password: string) => Promise<boolean>;
+}
+
+export function useProfileSettings(): UseProfileSettingsResult {
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleProfileUpdate = useCallback(
+    async (updates: UpdateProfileRequest): Promise<User | null> => {
+      setLoading(true);
+      try {
+        const updatedUser = await updateProfile(updates);
+
+        notifications.show({
+          title: 'Success',
+          message: 'Profile updated successfully',
+          color: 'green',
+        });
+
+        return updatedUser;
+      } catch (error) {
+        let errorMessage = 'Failed to update profile';
+
+        if (error instanceof Error) {
+          if (error.message.includes('password')) {
+            errorMessage = 'Current password is incorrect';
+          } else if (error.message.includes('email')) {
+            errorMessage = 'Email is already in use';
+          }
+        }
+
+        notifications.show({
+          title: 'Error',
+          message: errorMessage,
+          color: 'red',
+        });
+
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  const handleAccountDeletion = useCallback(
+    async (password: string): Promise<boolean> => {
+      setLoading(true);
+      try {
+        await deleteUser(password);
+
+        notifications.show({
+          title: 'Success',
+          message: 'Account deleted successfully',
+          color: 'green',
+        });
+
+        return true;
+      } catch (error) {
+        notifications.show({
+          title: 'Error',
+          message:
+            error instanceof Error ? error.message : 'Failed to delete account',
+          color: 'red',
+        });
+
+        return false;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  return {
+    loading,
+    updateProfile: handleProfileUpdate,
+    deleteAccount: handleAccountDeletion,
+  };
+}
diff --git a/app/src/hooks/useUserAdmin.js b/app/src/hooks/useUserAdmin.ts
similarity index 51%
rename from app/src/hooks/useUserAdmin.js
rename to app/src/hooks/useUserAdmin.ts
index f8e0a1d..9258eb0 100644
--- a/app/src/hooks/useUserAdmin.js
+++ b/app/src/hooks/useUserAdmin.ts
@@ -1,11 +1,28 @@
 import { useAdminData } from './useAdminData';
-import { createUser, updateUser, deleteUser } from '../services/adminApi';
+import {
+  createUser,
+  updateUser,
+  deleteUser as adminDeleteUser,
+} from '../api/admin';
 import { notifications } from '@mantine/notifications';
+import type { User } from '@/types/models';
+import type { CreateUserRequest, UpdateUserRequest } from '@/types/api';
 
-export const useUserAdmin = () => {
+interface UseUserAdminResult {
+  users: User[];
+  loading: boolean;
+  error: string | null;
+  create: (userData: CreateUserRequest) => Promise<boolean>;
+  update: (userId: number, userData: UpdateUserRequest) => Promise<boolean>;
+  delete: (userId: number) => Promise<boolean>;
+}
+
+export const useUserAdmin = (): UseUserAdminResult => {
   const { data: users, loading, error, reload } = useAdminData('users');
 
-  const handleCreate = async (userData) => {
+  const handleCreate = async (
+    userData: CreateUserRequest
+  ): Promise<boolean> => {
     try {
       await createUser(userData);
       notifications.show({
@@ -13,20 +30,23 @@ export const useUserAdmin = () => {
         message: 'User created successfully',
         color: 'green',
       });
-      reload();
-      return { success: true };
+      await reload();
+      return true;
     } catch (err) {
-      const message = err.response?.data?.error || err.message;
+      const message = err instanceof Error ? err.message : String(err);
       notifications.show({
         title: 'Error',
         message: `Failed to create user: ${message}`,
         color: 'red',
       });
-      return { success: false, error: message };
+      return false;
     }
   };
 
-  const handleUpdate = async (userId, userData) => {
+  const handleUpdate = async (
+    userId: number,
+    userData: UpdateUserRequest
+  ): Promise<boolean> => {
     try {
       await updateUser(userId, userData);
       notifications.show({
@@ -34,37 +54,37 @@ export const useUserAdmin = () => {
         message: 'User updated successfully',
         color: 'green',
       });
-      reload();
-      return { success: true };
+      await reload();
+      return true;
     } catch (err) {
-      const message = err.response?.data?.error || err.message;
+      const message = err instanceof Error ? err.message : String(err);
       notifications.show({
         title: 'Error',
         message: `Failed to update user: ${message}`,
         color: 'red',
       });
-      return { success: false, error: message };
+      return false;
     }
   };
 
-  const handleDelete = async (userId) => {
+  const handleDelete = async (userId: number): Promise<boolean> => {
     try {
-      await deleteUser(userId);
+      await adminDeleteUser(userId);
       notifications.show({
         title: 'Success',
         message: 'User deleted successfully',
         color: 'green',
       });
-      reload();
-      return { success: true };
+      await reload();
+      return true;
     } catch (err) {
-      const message = err.response?.data?.error || err.message;
+      const message = err instanceof Error ? err.message : String(err);
       notifications.show({
         title: 'Error',
         message: `Failed to delete user: ${message}`,
         color: 'red',
       });
-      return { success: false, error: message };
+      return false;
     }
   };
 
diff --git a/app/src/hooks/useWorkspace.ts b/app/src/hooks/useWorkspace.ts
new file mode 100644
index 0000000..fcaba6c
--- /dev/null
+++ b/app/src/hooks/useWorkspace.ts
@@ -0,0 +1,37 @@
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
+import { useTheme } from '../contexts/ThemeContext';
+import { useWorkspaceOperations } from './useWorkspaceOperations';
+import type { Workspace, DEFAULT_WORKSPACE_SETTINGS } from '@/types/models';
+import type { MantineColorScheme } from '@mantine/core';
+
+interface UseWorkspaceResult {
+  currentWorkspace: Workspace | null;
+  workspaces: Workspace[];
+  settings: Workspace | typeof DEFAULT_WORKSPACE_SETTINGS;
+  updateSettings: (newSettings: Partial<Workspace>) => Promise<void>;
+  loading: boolean;
+  colorScheme: MantineColorScheme;
+  updateColorScheme: (newTheme: MantineColorScheme) => void;
+  switchWorkspace: (workspaceName: string) => Promise<void>;
+  deleteCurrentWorkspace: () => Promise<void>;
+}
+
+export const useWorkspace = (): UseWorkspaceResult => {
+  const { currentWorkspace, workspaces, settings, loading } =
+    useWorkspaceData();
+  const { colorScheme, updateColorScheme } = useTheme();
+  const { switchWorkspace, deleteCurrentWorkspace, updateSettings } =
+    useWorkspaceOperations();
+
+  return {
+    currentWorkspace,
+    workspaces,
+    settings,
+    updateSettings,
+    loading,
+    colorScheme,
+    updateColorScheme,
+    switchWorkspace,
+    deleteCurrentWorkspace,
+  };
+};
diff --git a/app/src/hooks/useWorkspaceOperations.ts b/app/src/hooks/useWorkspaceOperations.ts
new file mode 100644
index 0000000..a822384
--- /dev/null
+++ b/app/src/hooks/useWorkspaceOperations.ts
@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import { notifications } from '@mantine/notifications';
+import { useWorkspaceData } from '../contexts/WorkspaceDataContext';
+import {
+  updateLastWorkspaceName,
+  updateWorkspace,
+  deleteWorkspace,
+} from '@/api/workspace';
+import { useTheme } from '../contexts/ThemeContext';
+import type { Workspace } from '@/types/models';
+
+interface UseWorkspaceOperationsResult {
+  switchWorkspace: (workspaceName: string) => Promise<void>;
+  deleteCurrentWorkspace: () => Promise<void>;
+  updateSettings: (newSettings: Partial<Workspace>) => Promise<void>;
+}
+
+export const useWorkspaceOperations = (): UseWorkspaceOperationsResult => {
+  const {
+    currentWorkspace,
+    loadWorkspaceData,
+    loadWorkspaces,
+    setCurrentWorkspace,
+  } = useWorkspaceData();
+  const { updateColorScheme } = useTheme();
+
+  const switchWorkspace = useCallback(
+    async (workspaceName: string): Promise<void> => {
+      try {
+        await updateLastWorkspaceName(workspaceName);
+        await loadWorkspaceData(workspaceName);
+        await loadWorkspaces();
+      } catch (error) {
+        console.error('Failed to switch workspace:', error);
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to switch workspace',
+          color: 'red',
+        });
+      }
+    },
+    [loadWorkspaceData, loadWorkspaces]
+  );
+
+  const deleteCurrentWorkspace = useCallback(async (): Promise<void> => {
+    if (!currentWorkspace) return;
+
+    try {
+      const allWorkspaces = await loadWorkspaces();
+      if (allWorkspaces.length <= 1) {
+        notifications.show({
+          title: 'Error',
+          message:
+            'Cannot delete the last workspace. At least one workspace must exist.',
+          color: 'red',
+        });
+        return;
+      }
+
+      // Delete workspace and get the next workspace ID
+      const nextWorkspaceName: string = await deleteWorkspace(
+        currentWorkspace.name
+      );
+
+      // Load the new workspace data
+      await loadWorkspaceData(nextWorkspaceName);
+
+      notifications.show({
+        title: 'Success',
+        message: 'Workspace deleted successfully',
+        color: 'green',
+      });
+
+      await loadWorkspaces();
+    } catch (error) {
+      console.error('Failed to delete workspace:', error);
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to delete workspace',
+        color: 'red',
+      });
+    }
+  }, [currentWorkspace, loadWorkspaceData, loadWorkspaces]);
+
+  const updateSettings = useCallback(
+    async (newSettings: Partial<Workspace>): Promise<void> => {
+      if (!currentWorkspace) return;
+
+      try {
+        const updatedWorkspace = {
+          ...currentWorkspace,
+          ...newSettings,
+        };
+
+        const response = await updateWorkspace(
+          currentWorkspace.name,
+          updatedWorkspace
+        );
+        setCurrentWorkspace(response);
+        if (newSettings.theme) {
+          updateColorScheme(response.theme);
+        }
+        await loadWorkspaces();
+      } catch (error) {
+        console.error('Failed to save settings:', error);
+        throw error;
+      }
+    },
+    [currentWorkspace, loadWorkspaces, updateColorScheme, setCurrentWorkspace]
+  );
+
+  return {
+    switchWorkspace,
+    deleteCurrentWorkspace,
+    updateSettings,
+  };
+};
diff --git a/app/src/index.html b/app/src/index.html
index 863830b..ed2abbc 100644
--- a/app/src/index.html
+++ b/app/src/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./index.jsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>
diff --git a/app/src/index.jsx b/app/src/index.tsx
similarity index 58%
rename from app/src/index.jsx
rename to app/src/index.tsx
index 593edf1..3701c7f 100644
--- a/app/src/index.jsx
+++ b/app/src/index.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const rootElement = document.getElementById('root') as HTMLElement;
+const root = ReactDOM.createRoot(rootElement);
+
 root.render(
   <React.StrictMode>
     <App />
diff --git a/app/src/services/adminApi.js b/app/src/services/adminApi.js
deleted file mode 100644
index 3c011d0..0000000
--- a/app/src/services/adminApi.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { apiCall } from './authApi';
-import { API_BASE_URL } from '../utils/constants';
-
-const ADMIN_BASE_URL = `${API_BASE_URL}/admin`;
-
-// User Management
-export const getUsers = async () => {
-  const response = await apiCall(`${ADMIN_BASE_URL}/users`);
-  return response.json();
-};
-
-export const createUser = async (userData) => {
-  const response = await apiCall(`${ADMIN_BASE_URL}/users`, {
-    method: 'POST',
-    body: JSON.stringify(userData),
-  });
-  return response.json();
-};
-
-export const deleteUser = async (userId) => {
-  const response = await apiCall(`${ADMIN_BASE_URL}/users/${userId}`, {
-    method: 'DELETE',
-  });
-  if (response.status === 204) {
-    return;
-  } else {
-    throw new Error('Failed to delete user with status: ', response.status);
-  }
-};
-
-export const updateUser = async (userId, userData) => {
-  const response = await apiCall(`${ADMIN_BASE_URL}/users/${userId}`, {
-    method: 'PUT',
-    body: JSON.stringify(userData),
-  });
-  return response.json();
-};
-
-// Workspace Management
-export const getWorkspaces = async () => {
-  const response = await apiCall(`${ADMIN_BASE_URL}/workspaces`);
-  return response.json();
-};
-
-// System Statistics
-export const getSystemStats = async () => {
-  const response = await apiCall(`${ADMIN_BASE_URL}/stats`);
-  return response.json();
-};
diff --git a/app/src/services/api.js b/app/src/services/api.js
deleted file mode 100644
index 626f684..0000000
--- a/app/src/services/api.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import { API_BASE_URL } from '../utils/constants';
-import { apiCall } from './authApi';
-
-export const updateProfile = async (updates) => {
-  const response = await apiCall(`${API_BASE_URL}/profile`, {
-    method: 'PUT',
-    body: JSON.stringify(updates),
-  });
-  return response.json();
-};
-
-export const deleteProfile = async (password) => {
-  const response = await apiCall(`${API_BASE_URL}/profile`, {
-    method: 'DELETE',
-    body: JSON.stringify({ password }),
-  });
-  return response.json();
-};
-
-export const fetchLastWorkspaceName = async () => {
-  const response = await apiCall(`${API_BASE_URL}/workspaces/last`);
-  return response.json();
-};
-
-export const fetchFileList = async (workspaceName) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/files`
-  );
-  return response.json();
-};
-
-export const fetchFileContent = async (workspaceName, filePath) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/files/${filePath}`
-  );
-  return response.text();
-};
-
-export const saveFileContent = async (workspaceName, filePath, content) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/files/${filePath}`,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'text/plain',
-      },
-      body: content,
-    }
-  );
-  return response.json();
-};
-
-export const deleteFile = async (workspaceName, filePath) => {
-  await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/files/${filePath}`,
-    {
-      method: 'DELETE',
-    }
-  );
-};
-
-export const getWorkspace = async (workspaceName) => {
-  const response = await apiCall(`${API_BASE_URL}/workspaces/${workspaceName}`);
-  return response.json();
-};
-
-// Combined function to update workspace data including settings
-export const updateWorkspace = async (workspaceName, workspaceData) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}`,
-    {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(workspaceData),
-    }
-  );
-  return response.json();
-};
-
-export const pullChanges = async (workspaceName) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/git/pull`,
-    {
-      method: 'POST',
-    }
-  );
-  return response.json();
-};
-
-export const commitAndPush = async (workspaceName, message) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/git/commit`,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ message }),
-    }
-  );
-  return response.json();
-};
-
-export const getFileUrl = (workspaceName, filePath) => {
-  return `${API_BASE_URL}/workspaces/${workspaceName}/files/${filePath}`;
-};
-
-export const lookupFileByName = async (workspaceName, filename) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/files/lookup?filename=${encodeURIComponent(
-      filename
-    )}`
-  );
-  const data = await response.json();
-  return data.paths;
-};
-
-export const updateLastOpenedFile = async (workspaceName, filePath) => {
-  await apiCall(`${API_BASE_URL}/workspaces/${workspaceName}/files/last`, {
-    method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ filePath }),
-  });
-};
-
-export const getLastOpenedFile = async (workspaceName) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}/files/last`
-  );
-  return response.json();
-};
-
-export const listWorkspaces = async () => {
-  const response = await apiCall(`${API_BASE_URL}/workspaces`);
-  return response.json();
-};
-
-export const createWorkspace = async (name) => {
-  const response = await apiCall(`${API_BASE_URL}/workspaces`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ name }),
-  });
-  return response.json();
-};
-
-export const deleteWorkspace = async (workspaceName) => {
-  const response = await apiCall(
-    `${API_BASE_URL}/workspaces/${workspaceName}`,
-    {
-      method: 'DELETE',
-    }
-  );
-  return response.json();
-};
-
-export const updateLastWorkspaceName = async (workspaceName) => {
-  const response = await apiCall(`${API_BASE_URL}/workspaces/last`, {
-    method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ workspaceName }),
-  });
-  return response.json();
-};
diff --git a/app/src/services/authApi.js b/app/src/services/authApi.js
deleted file mode 100644
index 9a65633..0000000
--- a/app/src/services/authApi.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { API_BASE_URL } from '../utils/constants';
-
-export const apiCall = async (url, options = {}) => {
-  try {
-    const headers = {
-      'Content-Type': 'application/json',
-      ...options.headers,
-    };
-
-    if (options.method && options.method !== 'GET') {
-      const csrfToken = document.cookie
-        .split('; ')
-        .find((row) => row.startsWith('csrf_token='))
-        ?.split('=')[1];
-      if (csrfToken) {
-        headers['X-CSRF-Token'] = csrfToken;
-      }
-    }
-
-    const response = await fetch(url, {
-      ...options,
-      headers,
-      credentials: 'include',
-    });
-
-    if (response.status === 429) {
-      throw new Error('Rate limit exceeded');
-    }
-
-    // Handle 401 responses
-    if (response.status === 401) {
-      const isRefreshEndpoint = url.endsWith('/auth/refresh');
-      if (!isRefreshEndpoint) {
-        // Attempt token refresh and retry the request
-        const refreshSuccess = await refreshToken();
-        if (refreshSuccess) {
-          // Retry the original request
-          return apiCall(url, options);
-        }
-      }
-      throw new Error('Authentication failed');
-    }
-
-    // Handle other error responses
-    if (!response.ok && response.status !== 204) {
-      const errorData = await response.json().catch(() => null);
-      throw new Error(
-        errorData?.message || `HTTP error! status: ${response.status}`
-      );
-    }
-
-    // Return null for 204 responses
-    if (response.status === 204) {
-      return null;
-    }
-
-    return response;
-  } catch (error) {
-    console.error(`API call failed: ${error.message}`);
-    throw error;
-  }
-};
-
-// Authentication endpoints
-export const login = async (email, password) => {
-  const response = await apiCall(`${API_BASE_URL}/auth/login`, {
-    method: 'POST',
-    body: JSON.stringify({ email, password }),
-  });
-
-  const data = await response.json();
-  // No need to store tokens as they're in cookies now
-  return data;
-};
-
-export const logout = async () => {
-  await apiCall(`${API_BASE_URL}/auth/logout`, {
-    method: 'POST',
-  });
-  return;
-};
-
-export const refreshToken = async () => {
-  try {
-    const response = await apiCall(`${API_BASE_URL}/auth/refresh`, {
-      method: 'POST',
-    });
-    return response.status === 200;
-  } catch (error) {
-    console.error('Token refresh failed:', error);
-    return false;
-  }
-};
-
-export const getCurrentUser = async () => {
-  const response = await apiCall(`${API_BASE_URL}/auth/me`);
-  return response.json();
-};
diff --git a/app/src/types/api.ts b/app/src/types/api.ts
new file mode 100644
index 0000000..1783cbb
--- /dev/null
+++ b/app/src/types/api.ts
@@ -0,0 +1,116 @@
+import { isUser, type User, type UserRole } from './models';
+
+declare global {
+  interface Window {
+    API_BASE_URL: string;
+  }
+}
+
+export const API_BASE_URL = window.API_BASE_URL;
+
+/**
+ * Error response from the API
+ */
+export interface ErrorResponse {
+  message: string;
+}
+
+/**
+ * API call options extending the standard RequestInit
+ */
+export interface ApiCallOptions extends RequestInit {
+  headers?: HeadersInit;
+}
+
+/**
+ * Login request parameters
+ */
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  user: User;
+  sessionId?: string;
+  expiresAt?: string; // ISO 8601 string representation of the date
+}
+
+export function isLoginResponse(obj: unknown): obj is LoginResponse {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'user' in obj &&
+    isUser(obj.user) &&
+    (!('sessionId' in obj) ||
+      typeof (obj as LoginResponse).sessionId === 'string') &&
+    (!('expiresAt' in obj) ||
+      typeof (obj as LoginResponse).expiresAt === 'string')
+  );
+}
+
+// CreateUserRequest holds the request fields for creating a new user
+export interface CreateUserRequest {
+  email: string;
+  displayName: string;
+  password: string;
+  role: UserRole;
+}
+
+// UpdateUserRequest holds the request fields for updating a user
+export interface UpdateUserRequest {
+  email?: string;
+  displayName?: string;
+  password?: string;
+  role?: UserRole;
+}
+
+export interface LookupResponse {
+  paths: string[];
+}
+
+export function isLookupResponse(obj: unknown): obj is LookupResponse {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'paths' in obj &&
+    Array.isArray((obj as LookupResponse).paths) &&
+    (obj as LookupResponse).paths.every((path) => typeof path === 'string')
+  );
+}
+
+export interface SaveFileResponse {
+  filePath: string;
+  size: number;
+  updatedAt: string; // ISO 8601 string representation of the date
+}
+
+export function isSaveFileResponse(obj: unknown): obj is SaveFileResponse {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'filePath' in obj &&
+    typeof (obj as SaveFileResponse).filePath === 'string' &&
+    'size' in obj &&
+    typeof (obj as SaveFileResponse).size === 'number' &&
+    'updatedAt' in obj &&
+    typeof (obj as SaveFileResponse).updatedAt === 'string'
+  );
+}
+
+export interface UpdateLastOpenedFileRequest {
+  filePath: string;
+}
+
+// UpdateProfileRequest represents a user profile update request
+export interface UpdateProfileRequest {
+  displayName?: string;
+  email?: string;
+  currentPassword?: string;
+  newPassword?: string;
+}
+
+// DeleteAccountRequest represents a user account deletion request
+export interface DeleteAccountRequest {
+  password: string;
+}
diff --git a/app/src/types/models.ts b/app/src/types/models.ts
new file mode 100644
index 0000000..3c17535
--- /dev/null
+++ b/app/src/types/models.ts
@@ -0,0 +1,287 @@
+/**
+ * User model from the API
+ */
+export interface User {
+  id: number;
+  email: string;
+  displayName?: string;
+  role: UserRole;
+  createdAt: string;
+  lastWorkspaceId: number;
+}
+
+/**
+ * Type guard to check if a value is a valid User
+ */
+export function isUser(value: unknown): value is User {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof (value as User).id === 'number' &&
+    'email' in value &&
+    typeof (value as User).email === 'string' &&
+    ('displayName' in value
+      ? typeof (value as User).displayName === 'string'
+      : true) &&
+    'role' in value &&
+    isUserRole((value as User).role) &&
+    'createdAt' in value &&
+    typeof (value as User).createdAt === 'string' &&
+    'lastWorkspaceId' in value &&
+    typeof (value as User).lastWorkspaceId === 'number'
+  );
+}
+
+/**
+ * User role in the system
+ */
+export enum UserRole {
+  Admin = 'admin',
+  Editor = 'editor',
+  Viewer = 'viewer',
+}
+
+/**
+ * Type guard to check if a value is a valid UserRole
+ */
+export function isUserRole(value: unknown): value is UserRole {
+  return (
+    typeof value === 'string' &&
+    Object.values(UserRole).includes(value as UserRole)
+  );
+}
+
+export enum Theme {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export interface WorkspaceSettings {
+  theme: Theme;
+  autoSave: boolean;
+  showHiddenFiles: boolean;
+  gitEnabled: boolean;
+  gitUrl: string;
+  gitUser: string;
+  gitToken: string;
+  gitAutoCommit: boolean;
+  gitCommitMsgTemplate: string;
+  gitCommitName: string;
+  gitCommitEmail: string;
+}
+
+export const DEFAULT_WORKSPACE_SETTINGS: WorkspaceSettings = {
+  theme: Theme.Light,
+  autoSave: false,
+  showHiddenFiles: false,
+  gitEnabled: false,
+  gitUrl: '',
+  gitUser: '',
+  gitToken: '',
+  gitAutoCommit: false,
+  gitCommitMsgTemplate: '${action} ${filename}',
+  gitCommitName: '',
+  gitCommitEmail: '',
+};
+
+export interface Workspace extends WorkspaceSettings {
+  id?: number;
+  userId?: number;
+  name: string;
+  createdAt: number | string;
+  lastOpenedFilePath?: string;
+}
+
+export const DEFAULT_WORKSPACE: Workspace = {
+  name: '',
+  createdAt: Date.now(),
+  lastOpenedFilePath: '',
+  ...DEFAULT_WORKSPACE_SETTINGS,
+};
+
+export function isWorkspace(obj: unknown): obj is Workspace {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'name' in obj &&
+    typeof (obj as Workspace).name === 'string' &&
+    'createdAt' in obj &&
+    (typeof (obj as Workspace).createdAt === 'number' ||
+      typeof (obj as Workspace).createdAt === 'string') &&
+    'theme' in obj &&
+    typeof (obj as Workspace).theme === 'string' &&
+    'autoSave' in obj &&
+    typeof (obj as Workspace).autoSave === 'boolean' &&
+    'showHiddenFiles' in obj &&
+    typeof (obj as Workspace).showHiddenFiles === 'boolean' &&
+    'gitEnabled' in obj &&
+    typeof (obj as Workspace).gitEnabled === 'boolean' &&
+    'gitUrl' in obj &&
+    typeof (obj as Workspace).gitUrl === 'string' &&
+    'gitUser' in obj &&
+    typeof (obj as Workspace).gitUser === 'string' &&
+    'gitToken' in obj &&
+    typeof (obj as Workspace).gitToken === 'string' &&
+    'gitAutoCommit' in obj &&
+    typeof (obj as Workspace).gitAutoCommit === 'boolean' &&
+    'gitCommitMsgTemplate' in obj &&
+    typeof (obj as Workspace).gitCommitMsgTemplate === 'string' &&
+    'gitCommitName' in obj &&
+    typeof (obj as Workspace).gitCommitName === 'string' &&
+    'gitCommitEmail' in obj &&
+    typeof (obj as Workspace).gitCommitEmail === 'string'
+  );
+}
+
+export enum FileAction {
+  Create = 'create',
+  Update = 'update',
+  Delete = 'delete',
+  Rename = 'rename',
+}
+
+export enum FileExtension {
+  Markdown = '.md',
+  JPG = '.jpg',
+  JPEG = '.jpeg',
+  PNG = '.png',
+  GIF = '.gif',
+  WebP = '.webp',
+  SVG = '.svg',
+}
+
+export const IMAGE_EXTENSIONS = [
+  FileExtension.JPG,
+  FileExtension.JPEG,
+  FileExtension.PNG,
+  FileExtension.GIF,
+  FileExtension.WebP,
+  FileExtension.SVG,
+];
+
+export interface DefaultFile {
+  name: string;
+  path: string;
+  content: string;
+}
+
+export const DEFAULT_FILE: DefaultFile = {
+  name: 'New File.md',
+  path: 'New File.md',
+  content: '# Welcome to NovaMD\n\nStart editing here!',
+};
+
+export interface FileNode {
+  id: string;
+  name: string;
+  path: string;
+  children?: FileNode[];
+}
+
+export function isFileNode(obj: unknown): obj is FileNode {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'id' in obj &&
+    typeof (obj as FileNode).id === 'string' &&
+    'name' in obj &&
+    typeof (obj as FileNode).name === 'string' &&
+    'path' in obj &&
+    typeof (obj as FileNode).path === 'string' &&
+    (!('children' in obj) ||
+      (obj as FileNode).children === undefined ||
+      (obj as FileNode).children === null ||
+      Array.isArray((obj as FileNode).children))
+  );
+}
+
+// WorkspaceStats holds workspace statistics
+export interface WorkspaceStats {
+  userID: number;
+  userEmail: string;
+  workspaceID: number;
+  workspaceName: string;
+  workspaceCreatedAt: string; // Using ISO string format for time.Time
+  fileCountStats?: FileCountStats;
+}
+
+// Define FileCountStats based on the Go struct definition of storage.FileCountStats
+export interface FileCountStats {
+  totalFiles: number;
+  totalSize: number;
+}
+
+export interface UserStats {
+  totalUsers: number;
+  totalWorkspaces: number;
+  activeUsers: number; // Users with activity in last 30 days
+}
+
+// SystemStats holds system-wide statistics
+export interface SystemStats extends FileCountStats, UserStats {}
+
+// isSystemStats checks if the given object is a valid SystemStats object
+export function isSystemStats(obj: unknown): obj is SystemStats {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'totalUsers' in obj &&
+    typeof (obj as SystemStats).totalUsers === 'number' &&
+    'totalWorkspaces' in obj &&
+    typeof (obj as SystemStats).totalWorkspaces === 'number' &&
+    'activeUsers' in obj &&
+    typeof (obj as SystemStats).activeUsers === 'number' &&
+    'totalFiles' in obj &&
+    typeof (obj as SystemStats).totalFiles === 'number' &&
+    'totalSize' in obj &&
+    typeof (obj as SystemStats).totalSize === 'number'
+  );
+}
+
+export type CommitHash = string;
+
+export enum InlineContainerType {
+  Paragraph = 'paragraph',
+  ListItem = 'listItem',
+  TableCell = 'tableCell',
+  Blockquote = 'blockquote',
+  Heading = 'heading',
+  Emphasis = 'emphasis',
+  Strong = 'strong',
+  Delete = 'delete',
+}
+
+export const MARKDOWN_REGEX = {
+  WIKILINK: /(!?)\[\[(.*?)\]\]/g,
+} as const;
+
+export enum ModalType {
+  NewFile = 'newFile',
+  DeleteFile = 'deleteFile',
+  CommitMessage = 'commitMessage',
+}
+
+export enum SettingsActionType {
+  INIT_SETTINGS = 'INIT_SETTINGS',
+  UPDATE_LOCAL_SETTINGS = 'UPDATE_LOCAL_SETTINGS',
+  MARK_SAVED = 'MARK_SAVED',
+}
+
+export interface UserProfileSettings {
+  displayName?: string;
+  email?: string;
+  currentPassword?: string;
+  newPassword?: string;
+}
+
+export interface ProfileSettingsState {
+  localSettings: UserProfileSettings;
+  initialSettings: UserProfileSettings;
+  hasUnsavedChanges: boolean;
+}
+
+export interface SettingsAction<T> {
+  type: SettingsActionType;
+  payload?: T;
+}
diff --git a/app/src/utils/constants.js b/app/src/utils/constants.js
deleted file mode 100644
index 201ab56..0000000
--- a/app/src/utils/constants.js
+++ /dev/null
@@ -1,67 +0,0 @@
-export const API_BASE_URL = window.API_BASE_URL;
-
-export const THEMES = {
-  LIGHT: 'light',
-  DARK: 'dark',
-};
-
-export const FILE_ACTIONS = {
-  CREATE: 'create',
-  DELETE: 'delete',
-  RENAME: 'rename',
-};
-
-export const MODAL_TYPES = {
-  NEW_FILE: 'newFile',
-  DELETE_FILE: 'deleteFile',
-  COMMIT_MESSAGE: 'commitMessage',
-};
-
-export const IMAGE_EXTENSIONS = [
-  '.jpg',
-  '.jpeg',
-  '.png',
-  '.gif',
-  '.webp',
-  '.svg',
-];
-
-// Renamed from DEFAULT_SETTINGS to be more specific
-export const DEFAULT_WORKSPACE_SETTINGS = {
-  theme: THEMES.LIGHT,
-  autoSave: false,
-  gitEnabled: false,
-  gitUrl: '',
-  gitUser: '',
-  gitToken: '',
-  gitAutoCommit: false,
-  gitCommitMsgTemplate: '${action} ${filename}',
-};
-
-// Template for creating new workspaces
-export const DEFAULT_WORKSPACE = {
-  name: '',
-  ...DEFAULT_WORKSPACE_SETTINGS,
-};
-
-export const DEFAULT_FILE = {
-  name: 'New File.md',
-  path: 'New File.md',
-  content: '# Welcome to Lemma\n\nStart editing here!',
-};
-
-export const MARKDOWN_REGEX = {
-  WIKILINK: /(!?)\[\[(.*?)\]\]/g,
-};
-
-// List of element types that can contain inline content
-export const INLINE_CONTAINER_TYPES = new Set([
-  'paragraph',
-  'listItem',
-  'tableCell',
-  'blockquote',
-  'heading',
-  'emphasis',
-  'strong',
-  'delete',
-]);
diff --git a/app/src/utils/fileHelpers.js b/app/src/utils/fileHelpers.js
deleted file mode 100644
index 7d0c1a0..0000000
--- a/app/src/utils/fileHelpers.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { IMAGE_EXTENSIONS } from './constants';
-
-export const isImageFile = (filePath) => {
-  return IMAGE_EXTENSIONS.some((ext) => filePath.toLowerCase().endsWith(ext));
-};
diff --git a/app/src/utils/fileHelpers.ts b/app/src/utils/fileHelpers.ts
new file mode 100644
index 0000000..bcc2dde
--- /dev/null
+++ b/app/src/utils/fileHelpers.ts
@@ -0,0 +1,17 @@
+import { API_BASE_URL } from '@/types/api';
+import { IMAGE_EXTENSIONS } from '@/types/models';
+
+/**
+ * Checks if the given file path has an image extension.
+ * @param filePath - The file path to check.
+ * @returns True if the file path has an image extension, false otherwise.
+ */
+export const isImageFile = (filePath: string): boolean => {
+  return IMAGE_EXTENSIONS.some((ext) => filePath.toLowerCase().endsWith(ext));
+};
+
+export const getFileUrl = (workspaceName: string, filePath: string) => {
+  return `${API_BASE_URL}/workspaces/${encodeURIComponent(
+    workspaceName
+  )}/files/${encodeURIComponent(filePath)}`;
+};
diff --git a/app/src/utils/formatBytes.js b/app/src/utils/formatBytes.js
deleted file mode 100644
index dde9f21..0000000
--- a/app/src/utils/formatBytes.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const formatBytes = (bytes) => {
-  const units = ['B', 'KB', 'MB', 'GB'];
-  let size = bytes;
-  let unitIndex = 0;
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024;
-    unitIndex++;
-  }
-  return `${size.toFixed(1)} ${units[unitIndex]}`;
-};
diff --git a/app/src/utils/formatBytes.ts b/app/src/utils/formatBytes.ts
new file mode 100644
index 0000000..595c61a
--- /dev/null
+++ b/app/src/utils/formatBytes.ts
@@ -0,0 +1,24 @@
+/**
+ * Units for file size display.
+ */
+type ByteUnit = 'B' | 'KB' | 'MB' | 'GB';
+
+/**
+ * An array of size units in ascending order.
+ */
+const UNITS: readonly ByteUnit[] = ['B', 'KB', 'MB', 'GB'] as const;
+
+/**
+ * Formats a number of bytes into a human-readable string.
+ * @param bytes - The number of bytes to format.
+ * @returns A string representing the formatted file size.
+ */
+export const formatBytes = (bytes: number): string => {
+  let size: number = bytes;
+  let unitIndex: number = 0;
+  while (size >= 1024 && unitIndex < UNITS.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(1)} ${UNITS[unitIndex]}`;
+};
diff --git a/app/src/utils/remarkWikiLinks.js b/app/src/utils/remarkWikiLinks.js
deleted file mode 100644
index 15d66aa..0000000
--- a/app/src/utils/remarkWikiLinks.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import { visit } from 'unist-util-visit';
-import { lookupFileByName, getFileUrl } from '../services/api';
-import { INLINE_CONTAINER_TYPES, MARKDOWN_REGEX } from './constants';
-
-function createNotFoundLink(fileName, displayText, baseUrl) {
-  return {
-    type: 'link',
-    url: `${baseUrl}/notfound/${encodeURIComponent(fileName)}`,
-    children: [{ type: 'text', value: displayText }],
-    data: {
-      hProperties: { style: { color: 'red', textDecoration: 'underline' } },
-    },
-  };
-}
-
-function createFileLink(filePath, displayText, heading, baseUrl) {
-  const url = heading
-    ? `${baseUrl}/internal/${encodeURIComponent(filePath)}#${encodeURIComponent(
-        heading
-      )}`
-    : `${baseUrl}/internal/${encodeURIComponent(filePath)}`;
-
-  return {
-    type: 'link',
-    url,
-    children: [{ type: 'text', value: displayText }],
-  };
-}
-
-function createImageNode(workspaceName, filePath, displayText) {
-  return {
-    type: 'image',
-    url: getFileUrl(workspaceName, filePath),
-    alt: displayText,
-    title: displayText,
-  };
-}
-
-function addMarkdownExtension(fileName) {
-  if (fileName.includes('.')) {
-    return fileName;
-  }
-  return `${fileName}.md`;
-}
-
-export function remarkWikiLinks(workspaceName) {
-  return async function transformer(tree) {
-    if (!workspaceName) {
-      console.warn('No workspace ID provided to remarkWikiLinks plugin');
-      return;
-    }
-
-    const baseUrl = window.API_BASE_URL;
-    const replacements = new Map();
-
-    // Find all wiki links
-    visit(tree, 'text', function (node, index, parent) {
-      const regex = MARKDOWN_REGEX.WIKILINK;
-      let match;
-      const matches = [];
-
-      while ((match = regex.exec(node.value)) !== null) {
-        const [fullMatch, isImage, innerContent] = match;
-        let fileName, displayText, heading;
-
-        const pipeIndex = innerContent.indexOf('|');
-        const hashIndex = innerContent.indexOf('#');
-
-        if (pipeIndex !== -1) {
-          displayText = innerContent.slice(pipeIndex + 1).trim();
-          fileName = innerContent.slice(0, pipeIndex).trim();
-        } else {
-          displayText = innerContent;
-          fileName = innerContent;
-        }
-
-        if (hashIndex !== -1 && (pipeIndex === -1 || hashIndex < pipeIndex)) {
-          heading = fileName.slice(hashIndex + 1).trim();
-          fileName = fileName.slice(0, hashIndex).trim();
-        }
-
-        matches.push({
-          fullMatch,
-          isImage,
-          fileName,
-          displayText,
-          heading,
-          index: match.index,
-        });
-      }
-
-      if (matches.length > 0) {
-        replacements.set(node, { matches, parent, index });
-      }
-    });
-
-    // Process all matches
-    for (const [node, { matches, parent }] of replacements) {
-      const newNodes = [];
-      let lastIndex = 0;
-
-      for (const match of matches) {
-        // Add text before the match
-        if (match.index > lastIndex) {
-          newNodes.push({
-            type: 'text',
-            value: node.value.slice(lastIndex, match.index),
-          });
-        }
-
-        try {
-          const lookupFileName = match.isImage
-            ? match.fileName
-            : addMarkdownExtension(match.fileName);
-
-          const paths = await lookupFileByName(workspaceName, lookupFileName);
-
-          if (paths && paths.length > 0) {
-            const filePath = paths[0];
-            if (match.isImage) {
-              newNodes.push(
-                createImageNode(workspaceName, filePath, match.displayText)
-              );
-            } else {
-              newNodes.push(
-                createFileLink(
-                  filePath,
-                  match.displayText,
-                  match.heading,
-                  baseUrl
-                )
-              );
-            }
-          } else {
-            newNodes.push(
-              createNotFoundLink(match.fileName, match.displayText, baseUrl)
-            );
-          }
-        } catch (error) {
-          console.debug('File lookup failed:', match.fileName, error);
-          newNodes.push(
-            createNotFoundLink(match.fileName, match.displayText, baseUrl)
-          );
-        }
-
-        lastIndex = match.index + match.fullMatch.length;
-      }
-
-      // Add any remaining text
-      if (lastIndex < node.value.length) {
-        newNodes.push({
-          type: 'text',
-          value: node.value.slice(lastIndex),
-        });
-      }
-
-      // If the parent is a container that can have inline content,
-      // replace the text node directly with the new nodes
-      if (parent && INLINE_CONTAINER_TYPES.has(parent.type)) {
-        const nodeIndex = parent.children.indexOf(node);
-        if (nodeIndex !== -1) {
-          parent.children.splice(nodeIndex, 1, ...newNodes);
-        }
-      } else {
-        // For other types of parents, wrap the nodes in a paragraph
-        const paragraph = {
-          type: 'paragraph',
-          children: newNodes,
-        };
-        const nodeIndex = parent.children.indexOf(node);
-        if (nodeIndex !== -1) {
-          parent.children.splice(nodeIndex, 1, paragraph);
-        }
-      }
-    }
-  };
-}
diff --git a/app/src/utils/remarkWikiLinks.ts b/app/src/utils/remarkWikiLinks.ts
new file mode 100644
index 0000000..43b3a1d
--- /dev/null
+++ b/app/src/utils/remarkWikiLinks.ts
@@ -0,0 +1,303 @@
+import { visit } from 'unist-util-visit';
+import type { Node, Parent } from 'unist';
+import type { Text } from 'mdast';
+import { lookupFileByName } from '@/api/file';
+import { getFileUrl } from './fileHelpers';
+import { InlineContainerType, MARKDOWN_REGEX } from '@/types/models';
+
+/**
+ * Represents a wiki link match from the regex
+ */
+interface WikiLinkMatch {
+  fullMatch: string;
+  isImage: boolean; // Changed from string to boolean
+  fileName: string;
+  displayText: string;
+  heading?: string | undefined;
+  index: number;
+}
+
+/**
+ * Node replacement information for processing
+ */
+interface ReplacementInfo {
+  matches: WikiLinkMatch[];
+  parent: Parent;
+  index: number;
+}
+
+/**
+ * Properties for link nodes
+ */
+interface LinkNodeProps {
+  style?: {
+    color?: string;
+    textDecoration?: string;
+  };
+}
+
+/**
+ * Link node with data properties
+ */
+interface LinkNode extends Node {
+  type: 'link';
+  url: string;
+  children: Node[];
+  data?: {
+    hProperties?: LinkNodeProps;
+  };
+}
+
+/**
+ * Image node
+ */
+interface ImageNode extends Node {
+  type: 'image';
+  url: string;
+  alt?: string;
+  title?: string;
+}
+
+/**
+ * Text node
+ */
+interface TextNode extends Node {
+  type: 'text';
+  value: string;
+}
+
+/**
+ * Creates a text node with the given value
+ */
+function createTextNode(value: string): TextNode {
+  return {
+    type: 'text',
+    value,
+  };
+}
+
+/**
+ * Creates a link node for files that don't exist
+ */
+function createNotFoundLink(
+  fileName: string,
+  displayText: string,
+  baseUrl: string
+): LinkNode {
+  return {
+    type: 'link',
+    url: `${baseUrl}/notfound/${encodeURIComponent(fileName)}`,
+    children: [createTextNode(displayText)],
+    data: {
+      hProperties: { style: { color: 'red', textDecoration: 'underline' } },
+    },
+  };
+}
+
+/**
+ * Creates a link node for existing files
+ */
+function createFileLink(
+  filePath: string,
+  displayText: string,
+  heading: string | undefined,
+  baseUrl: string
+): LinkNode {
+  const url = heading
+    ? `${baseUrl}/internal/${encodeURIComponent(filePath)}#${encodeURIComponent(
+        heading
+      )}`
+    : `${baseUrl}/internal/${encodeURIComponent(filePath)}`;
+
+  return {
+    type: 'link',
+    url,
+    children: [createTextNode(displayText)],
+  };
+}
+
+/**
+ * Creates an image node
+ */
+function createImageNode(
+  workspaceName: string,
+  filePath: string,
+  displayText: string
+): ImageNode {
+  return {
+    type: 'image',
+    url: getFileUrl(workspaceName, filePath),
+    alt: displayText,
+    title: displayText,
+  };
+}
+
+/**
+ * Adds markdown extension to a filename if it doesn't have one
+ */
+function addMarkdownExtension(fileName: string): string {
+  if (fileName.includes('.')) {
+    return fileName;
+  }
+  return `${fileName}.md`;
+}
+
+/**
+ * Determines if a node type can contain inline content
+ */
+function canContainInline(type: string): boolean {
+  return Object.values(InlineContainerType).includes(
+    type as InlineContainerType
+  );
+}
+
+/**
+ * Plugin for processing wiki-style links in markdown
+ */
+export function remarkWikiLinks(workspaceName: string) {
+  return async function transformer(tree: Node): Promise<void> {
+    if (!workspaceName) {
+      console.warn('No workspace ID provided to remarkWikiLinks plugin');
+      return;
+    }
+
+    const baseUrl: string = window.API_BASE_URL;
+    const replacements = new Map<Text, ReplacementInfo>();
+
+    // Find all wiki links
+    visit(tree, 'text', function (node: Text, index: number, parent: Parent) {
+      const regex = MARKDOWN_REGEX.WIKILINK;
+      let match: RegExpExecArray | null;
+      const matches: WikiLinkMatch[] = [];
+
+      while ((match = regex.exec(node.value)) !== null) {
+        // Provide default values during destructuring to handle potential undefined values
+        const [fullMatch = '', isImageMark = '', innerContent = ''] = match;
+
+        // Skip if we somehow got a match without the expected content
+        if (!innerContent) {
+          console.warn('Matched wiki link without inner content:', fullMatch);
+          continue;
+        }
+
+        let fileName: string;
+        let displayText: string;
+        let heading: string | undefined;
+
+        // Convert isImageMark string to boolean
+        const isImage: boolean = isImageMark === '!';
+
+        const pipeIndex: number = innerContent.indexOf('|');
+        const hashIndex: number = innerContent.indexOf('#');
+
+        if (pipeIndex !== -1) {
+          displayText = innerContent.slice(pipeIndex + 1).trim();
+          fileName = innerContent.slice(0, pipeIndex).trim();
+        } else {
+          displayText = innerContent;
+          fileName = innerContent;
+        }
+
+        if (hashIndex !== -1 && (pipeIndex === -1 || hashIndex < pipeIndex)) {
+          heading = fileName.slice(hashIndex + 1).trim();
+          fileName = fileName.slice(0, hashIndex).trim();
+        }
+
+        matches.push({
+          fullMatch,
+          isImage,
+          fileName,
+          displayText,
+          heading,
+          index: match.index,
+        });
+      }
+
+      if (matches.length > 0) {
+        replacements.set(node, { matches, parent, index });
+      }
+    });
+
+    // Process all matches
+    for (const [node, { matches, parent }] of replacements) {
+      const newNodes: (LinkNode | ImageNode | TextNode)[] = [];
+      let lastIndex: number = 0;
+
+      for (const match of matches) {
+        // Add text before the match
+        if (match.index > lastIndex) {
+          newNodes.push({
+            type: 'text',
+            value: node.value.slice(lastIndex, match.index),
+          });
+        }
+
+        try {
+          const lookupFileName: string = match.isImage
+            ? match.fileName
+            : addMarkdownExtension(match.fileName);
+
+          const paths: string[] = await lookupFileByName(
+            workspaceName,
+            lookupFileName
+          );
+
+          if (paths && paths.length > 0 && paths[0]) {
+            const filePath: string = paths[0];
+            if (match.isImage) {
+              newNodes.push(
+                createImageNode(workspaceName, filePath, match.displayText)
+              );
+            } else {
+              newNodes.push(
+                createFileLink(
+                  filePath,
+                  match.displayText,
+                  match.heading,
+                  baseUrl
+                )
+              );
+            }
+          } else {
+            newNodes.push(
+              createNotFoundLink(match.fileName, match.displayText, baseUrl)
+            );
+          }
+        } catch (error) {
+          console.debug('File lookup failed:', match.fileName, error);
+          newNodes.push(
+            createNotFoundLink(match.fileName, match.displayText, baseUrl)
+          );
+        }
+
+        lastIndex = match.index + match.fullMatch.length;
+      }
+
+      // Add any remaining text
+      if (lastIndex < node.value.length) {
+        newNodes.push({
+          type: 'text',
+          value: node.value.slice(lastIndex),
+        });
+      }
+
+      // Replace nodes in parent
+      if (parent && canContainInline(parent.type)) {
+        const nodeIndex: number = parent.children.indexOf(node);
+        if (nodeIndex !== -1) {
+          parent.children.splice(nodeIndex, 1, ...newNodes);
+        }
+      } else {
+        // Wrap in paragraph for other types
+        const paragraph: Parent = {
+          type: 'paragraph',
+          children: newNodes,
+        };
+        const nodeIndex: number = parent.children.indexOf(node);
+        if (nodeIndex !== -1) {
+          parent.children.splice(nodeIndex, 1, paragraph);
+        }
+      }
+    }
+  };
+}
diff --git a/app/src/utils/themeStyles.ts b/app/src/utils/themeStyles.ts
new file mode 100644
index 0000000..799c5d8
--- /dev/null
+++ b/app/src/utils/themeStyles.ts
@@ -0,0 +1,80 @@
+import type { MantineTheme } from '@mantine/core';
+
+// For type safety - this property exists on the MantineTheme but may not be in types
+interface ThemeWithColorScheme extends MantineTheme {
+  colorScheme?: 'dark' | 'light';
+}
+
+// Type-safe hover style function for unstyledButton and similar components
+export const getHoverStyle = (theme: MantineTheme) => ({
+  borderRadius: theme.radius.sm,
+  '&:hover': {
+    backgroundColor:
+      (theme as ThemeWithColorScheme).colorScheme === 'dark'
+        ? theme.colors.dark[5]
+        : theme.colors.gray[0],
+  },
+});
+
+// Type-safe color function for text or components that need conditional colors
+export const getConditionalColor = (
+  theme: MantineTheme,
+  isSelected = false
+) => {
+  if (isSelected) {
+    return (theme as ThemeWithColorScheme).colorScheme === 'dark'
+      ? theme.colors.blue[2]
+      : theme.colors.blue[7];
+  }
+  return 'dimmed';
+};
+
+// Helper for accordion styling
+export const getAccordionStyles = (theme: MantineTheme) => ({
+  control: {
+    paddingTop: theme.spacing.md,
+    paddingBottom: theme.spacing.md,
+  },
+  item: {
+    borderBottom: `1px solid ${
+      (theme as ThemeWithColorScheme).colorScheme === 'dark'
+        ? theme.colors.dark[4]
+        : theme.colors.gray[3]
+    }`,
+    '&[data-active]': {
+      backgroundColor:
+        (theme as ThemeWithColorScheme).colorScheme === 'dark'
+          ? theme.colors.dark[7]
+          : theme.colors.gray[0],
+    },
+  },
+});
+
+// Helper for workspace paper styling
+export const getWorkspacePaperStyle = (
+  theme: MantineTheme,
+  isSelected: boolean
+) => ({
+  backgroundColor: isSelected
+    ? theme.colors.blue[
+        (theme as ThemeWithColorScheme).colorScheme === 'dark' ? 8 : 1
+      ]
+    : undefined,
+  borderColor: isSelected
+    ? theme.colors.blue[
+        (theme as ThemeWithColorScheme).colorScheme === 'dark' ? 7 : 5
+      ]
+    : undefined,
+});
+
+// Helper for text color based on theme and selection
+export const getTextColor = (
+  theme: MantineTheme,
+  isSelected: boolean
+): string | null => {
+  if (!isSelected) return null;
+
+  return (theme as ThemeWithColorScheme).colorScheme === 'dark'
+    ? theme.colors.blue[0]
+    : theme.colors.blue[9];
+};
diff --git a/app/tsconfig.json b/app/tsconfig.json
new file mode 100644
index 0000000..36b0596
--- /dev/null
+++ b/app/tsconfig.json
@@ -0,0 +1,59 @@
+{
+  "compilerOptions": {
+    /* Language and Environment */
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "useDefineForClassFields": true,
+
+    /* Modules */
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+
+    /* JavaScript Support */
+    "allowJs": false,
+    "checkJs": false,
+
+    /* Emit */
+    "noEmit": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+
+    /* Type Checking */
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": true,
+    "alwaysStrict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+
+    /* Completeness */
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Additional Checks */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/app/tsconfig.node.json b/app/tsconfig.node.json
new file mode 100644
index 0000000..b3e05ae
--- /dev/null
+++ b/app/tsconfig.node.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+
+    /* Strict Type-Checking Options */
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+
+    /* Additional Checks */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+
+    /* Module Resolution Options */
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/app/vite.config.js b/app/vite.config.ts
similarity index 96%
rename from app/vite.config.js
rename to app/vite.config.ts
index 85e6a8d..db02699 100644
--- a/app/vite.config.js
+++ b/app/vite.config.ts
@@ -9,7 +9,7 @@ import { compression } from 'vite-plugin-compression2';
 export default defineConfig(({ mode }) => ({
   plugins: [
     react({
-      include: ['**/*.jsx', '**/*.js'],
+      include: ['**/*.tsx', '**/*.ts', '**/*.jsx', '**/*.js'],
     }),
     compression(),
   ],
@@ -124,7 +124,7 @@ export default defineConfig(({ mode }) => ({
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
   },
 
   // Add performance optimization options
diff --git a/server/internal/app/config.go b/server/internal/app/config.go
index 218b923..3708935 100644
--- a/server/internal/app/config.go
+++ b/server/internal/app/config.go
@@ -35,6 +35,7 @@ type Config struct {
 func DefaultConfig() *Config {
 	return &Config{
 		DBURL:             "sqlite://lemma.db",
+		DBType:            db.DBTypeSQLite,
 		WorkDir:           "./data",
 		StaticPath:        "../app/dist",
 		Port:              "8080",
diff --git a/server/internal/context/middleware.go b/server/internal/context/middleware.go
index 4d0a8d3..a06e946 100644
--- a/server/internal/context/middleware.go
+++ b/server/internal/context/middleware.go
@@ -3,6 +3,7 @@ package context
 import (
 	"lemma/internal/db"
 	"net/http"
+	"net/url"
 
 	"github.com/go-chi/chi/v5"
 )
@@ -42,12 +43,25 @@ func WithWorkspaceContextMiddleware(db db.WorkspaceReader) func(http.Handler) ht
 			}
 
 			workspaceName := chi.URLParam(r, "workspaceName")
-			workspace, err := db.GetWorkspaceByName(ctx.UserID, workspaceName)
+			// URL-decode the workspace name
+			decodedWorkspaceName, err := url.PathUnescape(workspaceName)
+			if err != nil {
+				log.Error("failed to decode workspace name",
+					"error", err,
+					"userID", ctx.UserID,
+					"workspace", workspaceName,
+					"path", r.URL.Path)
+				http.Error(w, "Invalid workspace name", http.StatusBadRequest)
+				return
+			}
+
+			workspace, err := db.GetWorkspaceByName(ctx.UserID, decodedWorkspaceName)
 			if err != nil {
 				log.Error("failed to get workspace",
 					"error", err,
 					"userID", ctx.UserID,
-					"workspace", workspaceName,
+					"workspace", decodedWorkspaceName,
+					"encodedWorkspace", workspaceName,
 					"path", r.URL.Path)
 				http.Error(w, "Failed to get workspace", http.StatusNotFound)
 				return
diff --git a/server/internal/db/migrations/postgres/001_initial_schema.up.sql b/server/internal/db/migrations/postgres/001_initial_schema.up.sql
index 288aec0..fca49c6 100644
--- a/server/internal/db/migrations/postgres/001_initial_schema.up.sql
+++ b/server/internal/db/migrations/postgres/001_initial_schema.up.sql
@@ -55,7 +55,7 @@ CREATE TABLE IF NOT EXISTS system_settings (
 );
 
 -- Create indexes for performance
-CREATE INDEX idx_sessions_user_id ON sessions(user_id);
-CREATE INDEX idx_sessions_expires_at ON sessions(expires_at);
-CREATE INDEX idx_sessions_refresh_token ON sessions(refresh_token);
-CREATE INDEX idx_workspaces_user_id ON workspaces(user_id);
\ No newline at end of file
+CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id);
+CREATE INDEX IF NOT EXISTS idx_sessions_expires_at ON sessions(expires_at);
+CREATE INDEX IF NOT EXISTS idx_sessions_refresh_token ON sessions(refresh_token);
+CREATE INDEX IF NOT EXISTS idx_workspaces_user_id ON workspaces(user_id);
\ No newline at end of file
diff --git a/server/internal/db/migrations/sqlite/001_initial_schema.up.sql b/server/internal/db/migrations/sqlite/001_initial_schema.up.sql
index b632442..40ef090 100644
--- a/server/internal/db/migrations/sqlite/001_initial_schema.up.sql
+++ b/server/internal/db/migrations/sqlite/001_initial_schema.up.sql
@@ -54,7 +54,7 @@ CREATE TABLE IF NOT EXISTS system_settings (
 );
 
 -- Create indexes for performance
-CREATE INDEX idx_sessions_user_id ON sessions(user_id);
-CREATE INDEX idx_sessions_expires_at ON sessions(expires_at);
-CREATE INDEX idx_sessions_refresh_token ON sessions(refresh_token);
-CREATE INDEX idx_workspaces_user_id ON workspaces(user_id);
\ No newline at end of file
+CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id);
+CREATE INDEX IF NOT EXISTS idx_sessions_expires_at ON sessions(expires_at);
+CREATE INDEX IF NOT EXISTS idx_sessions_refresh_token ON sessions(refresh_token);
+CREATE INDEX IF NOT EXISTS idx_workspaces_user_id ON workspaces(user_id);
\ No newline at end of file
diff --git a/server/internal/handlers/file_handlers.go b/server/internal/handlers/file_handlers.go
index 4c2a4c7..538742e 100644
--- a/server/internal/handlers/file_handlers.go
+++ b/server/internal/handlers/file_handlers.go
@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"io"
 	"net/http"
+	"net/url"
 	"os"
 	"time"
 
@@ -110,7 +111,18 @@ func (h *Handler) LookupFileByName() http.HandlerFunc {
 			return
 		}
 
-		filePaths, err := h.Storage.FindFileByName(ctx.UserID, ctx.Workspace.ID, filename)
+		// URL-decode the filename
+		decodedFilename, err := url.PathUnescape(filename)
+		if err != nil {
+			log.Error("failed to decode filename",
+				"filename", filename,
+				"error", err.Error(),
+			)
+			respondError(w, "Invalid filename", http.StatusBadRequest)
+			return
+		}
+
+		filePaths, err := h.Storage.FindFileByName(ctx.UserID, ctx.Workspace.ID, decodedFilename)
 		if err != nil {
 			if !os.IsNotExist(err) {
 				log.Error("failed to lookup file",
@@ -159,11 +171,22 @@ func (h *Handler) GetFileContent() http.HandlerFunc {
 		)
 
 		filePath := chi.URLParam(r, "*")
-		content, err := h.Storage.GetFileContent(ctx.UserID, ctx.Workspace.ID, filePath)
+		// URL-decode the file path
+		decodedPath, err := url.PathUnescape(filePath)
+		if err != nil {
+			log.Error("failed to decode file path",
+				"filePath", filePath,
+				"error", err.Error(),
+			)
+			respondError(w, "Invalid file path", http.StatusBadRequest)
+			return
+		}
+
+		content, err := h.Storage.GetFileContent(ctx.UserID, ctx.Workspace.ID, decodedPath)
 		if err != nil {
 			if storage.IsPathValidationError(err) {
 				log.Error("invalid file path attempted",
-					"filePath", filePath,
+					"filePath", decodedPath,
 					"error", err.Error(),
 				)
 				respondError(w, "Invalid file path", http.StatusBadRequest)
@@ -172,7 +195,7 @@ func (h *Handler) GetFileContent() http.HandlerFunc {
 
 			if os.IsNotExist(err) {
 				log.Debug("file not found",
-					"filePath", filePath,
+					"filePath", decodedPath,
 				)
 				respondError(w, "File not found", http.StatusNotFound)
 				return
@@ -228,21 +251,32 @@ func (h *Handler) SaveFile() http.HandlerFunc {
 		)
 
 		filePath := chi.URLParam(r, "*")
+		// URL-decode the file path
+		decodedPath, err := url.PathUnescape(filePath)
+		if err != nil {
+			log.Error("failed to decode file path",
+				"filePath", filePath,
+				"error", err.Error(),
+			)
+			respondError(w, "Invalid file path", http.StatusBadRequest)
+			return
+		}
+
 		content, err := io.ReadAll(r.Body)
 		if err != nil {
 			log.Error("failed to read request body",
-				"filePath", filePath,
+				"filePath", decodedPath,
 				"error", err.Error(),
 			)
 			respondError(w, "Failed to read request body", http.StatusBadRequest)
 			return
 		}
 
-		err = h.Storage.SaveFile(ctx.UserID, ctx.Workspace.ID, filePath, content)
+		err = h.Storage.SaveFile(ctx.UserID, ctx.Workspace.ID, decodedPath, content)
 		if err != nil {
 			if storage.IsPathValidationError(err) {
 				log.Error("invalid file path attempted",
-					"filePath", filePath,
+					"filePath", decodedPath,
 					"error", err.Error(),
 				)
 				respondError(w, "Invalid file path", http.StatusBadRequest)
@@ -295,11 +329,22 @@ func (h *Handler) DeleteFile() http.HandlerFunc {
 		)
 
 		filePath := chi.URLParam(r, "*")
-		err := h.Storage.DeleteFile(ctx.UserID, ctx.Workspace.ID, filePath)
+		// URL-decode the file path
+		decodedPath, err := url.PathUnescape(filePath)
+		if err != nil {
+			log.Error("failed to decode file path",
+				"filePath", filePath,
+				"error", err.Error(),
+			)
+			respondError(w, "Invalid file path", http.StatusBadRequest)
+			return
+		}
+
+		err = h.Storage.DeleteFile(ctx.UserID, ctx.Workspace.ID, decodedPath)
 		if err != nil {
 			if storage.IsPathValidationError(err) {
 				log.Error("invalid file path attempted",
-					"filePath", filePath,
+					"filePath", decodedPath,
 					"error", err.Error(),
 				)
 				respondError(w, "Invalid file path", http.StatusBadRequest)
@@ -308,7 +353,7 @@ func (h *Handler) DeleteFile() http.HandlerFunc {
 
 			if os.IsNotExist(err) {
 				log.Debug("file not found",
-					"filePath", filePath,
+					"filePath", decodedPath,
 				)
 				respondError(w, "File not found", http.StatusNotFound)
 				return
@@ -413,7 +458,19 @@ func (h *Handler) UpdateLastOpenedFile() http.HandlerFunc {
 
 		// Validate the file path in the workspace
 		if requestBody.FilePath != "" {
-			_, err := h.Storage.GetFileContent(ctx.UserID, ctx.Workspace.ID, requestBody.FilePath)
+			// URL-decode the file path
+			decodedPath, err := url.PathUnescape(requestBody.FilePath)
+			if err != nil {
+				log.Error("failed to decode file path",
+					"filePath", requestBody.FilePath,
+					"error", err.Error(),
+				)
+				respondError(w, "Invalid file path", http.StatusBadRequest)
+				return
+			}
+			requestBody.FilePath = decodedPath
+
+			_, err = h.Storage.GetFileContent(ctx.UserID, ctx.Workspace.ID, requestBody.FilePath)
 			if err != nil {
 				if storage.IsPathValidationError(err) {
 					log.Error("invalid file path attempted",
diff --git a/server/internal/handlers/workspace_handlers.go b/server/internal/handlers/workspace_handlers.go
index 3977a80..663c966 100644
--- a/server/internal/handlers/workspace_handlers.go
+++ b/server/internal/handlers/workspace_handlers.go
@@ -173,19 +173,19 @@ func (h *Handler) GetWorkspace() http.HandlerFunc {
 	}
 }
 
-func gitSettingsChanged(new, old *models.Workspace) bool {
+func gitSettingsChanged(newWorkspace, old *models.Workspace) bool {
 	// Check if Git was enabled/disabled
-	if new.GitEnabled != old.GitEnabled {
+	if newWorkspace.GitEnabled != old.GitEnabled {
 		return true
 	}
 
 	// If Git is enabled, check if any settings changed
-	if new.GitEnabled {
-		return new.GitURL != old.GitURL ||
-			new.GitUser != old.GitUser ||
-			new.GitToken != old.GitToken ||
-			new.GitCommitName != old.GitCommitName ||
-			new.GitCommitEmail != old.GitCommitEmail
+	if newWorkspace.GitEnabled {
+		return newWorkspace.GitURL != old.GitURL ||
+			newWorkspace.GitUser != old.GitUser ||
+			newWorkspace.GitToken != old.GitToken ||
+			newWorkspace.GitCommitName != old.GitCommitName ||
+			newWorkspace.GitCommitEmail != old.GitCommitEmail
 	}
 
 	return false