fix: add back pnpm lockfile

feat: rewrite frontend w/ preact & tailwind (#305 )
* feat!: migrate to preact & tailwind * fix: eslint * feat: expand form * feat: implement terminal * feat: implement settings menu * refactor: colors and UX * fix: add Settings.tsx * refactor: color consistency * refactor: sort tailwind classes using rustywind * refactor: settings screen * refactor: more styling, expand conditionals * refactor: organize imports * docs: update with new image and gif * chore: set version to 3.2.0
2026-02-04 21:51:17 +01:00 · 2026-02-04 21:12:13 +01:00 · 2026-02-04 21:09:00 +01:00 · 2026-02-02 09:50:00 +01:00 · 2026-02-02 09:44:33 +01:00 · 2026-02-01 17:42:22 +01:00
29 changed files with 1173 additions and 901 deletions
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@

 → <a href="https://www.youtube.com/watch?v=H2COwT5OUOo" target="_blank"><b>Tutorial</b></a> ~ 
 <a href="https://depotdownloader.aphex.cc/" target="_blank"><b>Website</b></a> ~ 
-<a href="https://www.youtube.com/watch?v=ogiDAuH3VdY" target="_blank"><b>Example usage</b></a> ←
+<a href="https://www.youtube.com/watch?v=ogiDAuH3VdY" target="_blank"><b>Downgrade Subnautica</b></a> ←
 </h4>


@@ -13,19 +13,26 @@
 <a href="https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest"><img src="https://img.shields.io/github/downloads/mmvanheusden/SteamDepotDownloaderGUI/total?color=orange&label=downloads" alt="Download count badge"></a>


-<img src="https://github.com/user-attachments/assets/0a2debcc-617a-449d-971f-9e1cf1d5cb0b" alt="Steam downgrader interface" />
+<img src="https://github.com/user-attachments/assets/e2de938d-e54d-4f30-a405-b0d9d2d8e4d9" alt="Steam downgrader interface" />
 </div>

 ## Features
 > ↓ *The downloader in action:*<br>
-> <img src="https://github.com/user-attachments/assets/8739f06e-a258-48b2-a684-ca8fcf84dd7e" alt="Steam downgrader process" style="width: 25svw;"/>
+> <img src="https://github.com/user-attachments/assets/7d8a97b8-79df-4c54-a74b-fb7b4b85913c" alt="Steam downgrader process" style="width: 25svw;"/>
+

 ### Cross-platform support
-| OS      | Supported |
-|---------|-----------|
-| Windows | ✅         |
-| Linux   | ✅         |
-| macOS   | ✅         |
+| OS      | Support |
+|---------|---------|
+| Windows | ✅      |
+| Linux   | ✅      |
+| macOS   | ✅      |
+
+
+> [!TIP]
+> ## Tutorials
+> * https://www.youtube.com/watch?v=H2COwT5OUOo How to download older versions of Steam games tutorial
+> * https://www.youtube.com/watch?v=ogiDAuH3VdY How to download older versions of Subnautica tutorial

 ## Installation
 > [!CAUTION]  
@@ -41,18 +48,11 @@ Download the [latest Windows release](https://github.com/mmvanheusden/SteamDepot
 You'll need at least one of the supported terminal emulators. You most likely already have one of these.
 Download the [latest Linux release](https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest). There are multiple formats to choose from.

-## Tutorials
-* https://www.youtube.com/watch?v=H2COwT5OUOo How to download older versions of Steam games tutorial
-
-* https://www.youtube.com/watch?v=ogiDAuH3VdY How to download older versions of Subnautica tutorial
-
-
 ## Credits
 This software makes use of the following projects:
- [**DepotDownloader**](https://github.com/SteamRE/DepotDownloader/)
+- [**DepotDownloader**](https://github.com/SteamRE/DepotDownloader)
 - [Tauri](https://tauri.app)
- [Primer CSS](https://primer.style/css/)
- [async-process](https://github.com/smol-rs/async-process)
+- [Preact](https://preactjs.com)
 - [Hubut Sans](https://github.com/github/hubot-sans) under [license](https://github.com/github/hubot-sans/blob/05d5ea150c20e6434485db8ffd2277ed18a9e911/LICENSE) 


@@ -66,13 +66,9 @@ Please cleanup the code using:
 ```console
 $ pnpm eslint --fix src/
 ```
+Please also sort Tailwind classes using [RustyWind](https://github.com/avencera/rustywind).


-<p align="center">
-  <a href="https://www.gnu.org/licenses/gpl-3.0" target="_blank">
-    <img src="https://github.com/mmvanheusden/SteamDepotDownloaderGUI/assets/50550545/b5649b7f-ea49-45c4-b0cd-5f3788dcd6ca" height="40px">
-  </a>
-  <a href="https://aphex.cc" target="_blank">
-    <img src="https://github.com/mmvanheusden/SteamDepotDownloaderGUI/assets/50550545/83f5f3b2-2bf9-41aa-ab87-880466f785fe" height="40px">
-  </a>
-</p>
+<a href="https://www.gnu.org/licenses/gpl-3.0" target="_blank">
+  <img src="https://github.com/mmvanheusden/SteamDepotDownloaderGUI/assets/50550545/b5649b7f-ea49-45c4-b0cd-5f3788dcd6ca" height="40px" alt="GPL v3">
+</a>
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,20 +1,15 @@
-// @ts-check
-
-import eslint from '@eslint/js';
-import {defineConfig} from 'eslint/config';
+import { defineConfig } from 'eslint/config';
 import tseslint from 'typescript-eslint';

 export default defineConfig(
-    eslint.configs.recommended,
+	tseslint.configs.recommendedTypeChecked,
    tseslint.configs.stylisticTypeChecked,
    {
        languageOptions: {
            parserOptions: {
-                project: 'tsconfig.json',
-            },
+				project: 'tsconfig.json',
+			},
        },
-    },
-    {
        files: ["src/**"],
        rules: {
            "semi": ["error", "always"], // semicolons
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "vectum",
  "private": true,
-  "version": "3.0.1",
+  "version": "3.2.0",
  "type": "module",
  "license": "GPL-3.0-only",
  "scripts": {
@@ -15,16 +15,16 @@
    "@tauri-apps/api": "2.9.1",
    "@tauri-apps/plugin-dialog": "2.6.0",
    "@tauri-apps/plugin-opener": "~2.5.3",
-    "@tauri-apps/plugin-shell": "2.3.4",
    "@xterm/addon-fit": "^0.11.0",
    "@xterm/xterm": "^6.0.0",
-    "jquery": "^4.0.0",
+    "preact": "^10.25.1",
    "tailwindcss": "^4.1.18"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.2",
+    "@iconify-icon/react": "^3.0.3",
+    "@preact/preset-vite": "^2.9.3",
    "@tauri-apps/cli": "2.9.6",
-    "@types/jquery": "^3.5.33",
    "eslint": "^9.39.2",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.54.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,18 +20,15 @@ importers:
      '@tauri-apps/plugin-opener':
        specifier: ~2.5.3
        version: 2.5.3
-      '@tauri-apps/plugin-shell':
-        specifier: 2.3.4
-        version: 2.3.4
      '@xterm/addon-fit':
        specifier: ^0.11.0
        version: 0.11.0
      '@xterm/xterm':
        specifier: ^6.0.0
        version: 6.0.0
-      jquery:
-        specifier: ^4.0.0
-        version: 4.0.0
+      preact:
+        specifier: ^10.25.1
+        version: 10.28.3
      tailwindcss:
        specifier: ^4.1.18
        version: 4.1.18
@@ -39,12 +36,15 @@ importers:
      '@eslint/js':
        specifier: ^9.39.2
        version: 9.39.2
+      '@iconify-icon/react':
+        specifier: ^3.0.3
+        version: 3.0.3(react@19.2.4)
+      '@preact/preset-vite':
+        specifier: ^2.9.3
+        version: 2.10.3(@babel/core@7.29.0)(preact@10.28.3)(rollup@4.57.1)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2))
      '@tauri-apps/cli':
        specifier: 2.9.6
        version: 2.9.6
-      '@types/jquery':
-        specifier: ^3.5.33
-        version: 3.5.33
      eslint:
        specifier: ^9.39.2
        version: 9.39.2(jiti@2.6.1)
@@ -60,6 +60,99 @@ importers:

 packages:

+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.0':
+    resolution: {integrity: sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.6':
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.28.6':
+    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-development@7.27.1':
+    resolution: {integrity: sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx@7.28.6':
+    resolution: {integrity: sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
  '@esbuild/aix-ppc64@0.27.2':
    resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
    engines: {node: '>=18'}
@@ -270,6 +363,14 @@ packages:
    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
    engines: {node: '>=18.18'}

+  '@iconify-icon/react@3.0.3':
+    resolution: {integrity: sha512-i4N/J0+UZWQu5Ty9Z+SxsNsuNdY7w2TnSuI65Qw9UrWudvnRodKfTUMvyg0hvxSZolqAE1YJVZu1HqgfpgPX9w==}
+    peerDependencies:
+      react: '>=18.0.0'
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
  '@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

@@ -286,6 +387,42 @@ packages:
  '@jridgewell/trace-mapping@0.3.31':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

+  '@preact/preset-vite@2.10.3':
+    resolution: {integrity: sha512-1SiS+vFItpkNdBs7q585PSAIln0wBeBdcpJYbzPs1qipsb/FssnkUioNXuRsb8ZnU8YEQHr+3v8+/mzWSnTQmg==}
+    peerDependencies:
+      '@babel/core': 7.x
+      vite: 2.x || 3.x || 4.x || 5.x || 6.x || 7.x
+
+  '@prefresh/babel-plugin@0.5.2':
+    resolution: {integrity: sha512-AOl4HG6dAxWkJ5ndPHBgBa49oo/9bOiJuRDKHLSTyH+Fd9x00shTXpdiTj1W41l6oQIwUOAgJeHMn4QwIDpHkA==}
+
+  '@prefresh/core@1.5.9':
+    resolution: {integrity: sha512-IKBKCPaz34OFVC+adiQ2qaTF5qdztO2/4ZPf4KsRTgjKosWqxVXmEbxCiUydYZRY8GVie+DQlKzQr9gt6HQ+EQ==}
+    peerDependencies:
+      preact: ^10.0.0 || ^11.0.0-0
+
+  '@prefresh/utils@1.2.1':
+    resolution: {integrity: sha512-vq/sIuN5nYfYzvyayXI4C2QkprfNaHUQ9ZX+3xLD8nL3rWyzpxOm1+K7RtMbhd+66QcaISViK7amjnheQ/4WZw==}
+
+  '@prefresh/vite@2.4.11':
+    resolution: {integrity: sha512-/XjURQqdRiCG3NpMmWqE9kJwrg9IchIOWHzulCfqg2sRe/8oQ1g5De7xrk9lbqPIQLn7ntBkKdqWXIj4E9YXyg==}
+    peerDependencies:
+      preact: ^10.4.0 || ^11.0.0-0
+      vite: '>=2.0.0'
+
+  '@rollup/pluginutils@4.2.1':
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
  '@rollup/rollup-android-arm-eabi@4.57.1':
    resolution: {integrity: sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==}
    cpu: [arm]
@@ -603,21 +740,12 @@ packages:
  '@tauri-apps/plugin-opener@2.5.3':
    resolution: {integrity: sha512-CCcUltXMOfUEArbf3db3kCE7Ggy1ExBEBl51Ko2ODJ6GDYHRp1nSNlQm5uNCFY5k7/ufaK5Ib3Du/Zir19IYQQ==}

-  '@tauri-apps/plugin-shell@2.3.4':
-    resolution: {integrity: sha512-ktsRWf8wHLD17aZEyqE8c5x98eNAuTizR1FSX475zQ4TxaiJnhwksLygQz+AGwckJL5bfEP13nWrlTNQJUpKpA==}
-
  '@types/estree@1.0.8':
    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}

-  '@types/jquery@3.5.33':
-    resolution: {integrity: sha512-SeyVJXlCZpEki5F0ghuYe+L+PprQta6nRZqhONt9F13dWBtR/ftoaIbdRQ7cis7womE+X2LKhsDdDtkkDhJS6g==}
-
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

-  '@types/sizzle@2.3.10':
-    resolution: {integrity: sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==}
-
  '@typescript-eslint/eslint-plugin@8.54.0':
    resolution: {integrity: sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -703,19 +831,39 @@ packages:
  argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

+  babel-plugin-transform-hook-names@1.0.2:
+    resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==}
+    peerDependencies:
+      '@babel/core': ^7.12.10
+
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

+  baseline-browser-mapping@2.9.19:
+    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
+    hasBin: true
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
  brace-expansion@1.1.12:
    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}

  brace-expansion@2.0.2:
    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}

+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
  callsites@3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}

+  caniuse-lite@1.0.30001767:
+    resolution: {integrity: sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==}
+
  chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
@@ -730,10 +878,20 @@ packages:
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}

+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
  cross-spawn@7.0.6:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}

+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
  debug@4.4.3:
    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
    engines: {node: '>=6.0'}
@@ -750,15 +908,39 @@ packages:
    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}

+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  electron-to-chromium@1.5.286:
+    resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
+
  enhanced-resolve@5.18.4:
    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
    engines: {node: '>=10.13.0'}

+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
  esbuild@0.27.2:
    resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
    engines: {node: '>=18'}
    hasBin: true

+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
  escape-string-regexp@4.0.0:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
    engines: {node: '>=10'}
@@ -801,6 +983,9 @@ packages:
    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
    engines: {node: '>=4.0'}

+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
  esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}
@@ -843,6 +1028,10 @@ packages:
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]

+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
  glob-parent@6.0.2:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
    engines: {node: '>=10.13.0'}
@@ -858,6 +1047,13 @@ packages:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}

+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  iconify-icon@3.0.2:
+    resolution: {integrity: sha512-DYPAumiUeUeT/GHT8x2wrAVKn1FqZJqFH0Y5pBefapWRreV1BBvqBVMb0020YQ2njmbR59r/IathL2d2OrDrxA==}
+
  ignore@5.3.2:
    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
    engines: {node: '>= 4'}
@@ -889,13 +1085,18 @@ packages:
    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
    hasBin: true

-  jquery@4.0.0:
-    resolution: {integrity: sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==}
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

  js-yaml@4.1.1:
    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
    hasBin: true

+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
  json-buffer@3.0.1:
    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}

@@ -905,9 +1106,17 @@ packages:
  json-stable-stringify-without-jsonify@1.0.1:
    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}

+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
  keyv@4.5.4:
    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}

+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
  levn@0.4.1:
    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
    engines: {node: '>= 0.8.0'}
@@ -993,6 +1202,9 @@ packages:
  lodash.merge@4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}

+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
  magic-string@0.30.21:
    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}

@@ -1014,6 +1226,15 @@ packages:
  natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}

+  node-html-parser@6.1.13:
+    resolution: {integrity: sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
  optionator@0.9.4:
    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
    engines: {node: '>= 0.8.0'}
@@ -1041,6 +1262,10 @@ packages:
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
  picomatch@4.0.3:
    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
    engines: {node: '>=12'}
@@ -1049,6 +1274,9 @@ packages:
    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
    engines: {node: ^10 || ^12 || >=14}

+  preact@10.28.3:
+    resolution: {integrity: sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==}
+
  prelude-ls@1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}
@@ -1057,6 +1285,10 @@ packages:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}

+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
  resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@@ -1066,6 +1298,10 @@ packages:
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
    hasBin: true

+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
  semver@7.7.3:
    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
    engines: {node: '>=10'}
@@ -1079,10 +1315,21 @@ packages:
    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
    engines: {node: '>=8'}

+  simple-code-frame@1.3.0:
+    resolution: {integrity: sha512-MB4pQmETUBlNs62BBeRjIFGeuy/x6gGKh7+eRUemn1rCFhqo7K+4slPqsyizCbcbYLnaYqaoZ2FWsZ/jN06D8w==}
+
  source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}

+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  stack-trace@1.0.0-pre2:
+    resolution: {integrity: sha512-2ztBJRek8IVofG9DBJqdy2N5kulaacX30Nz7xmkYF6ale9WBVmIy6mFBchvGX7Vx/MyjBhx+Rcxqrj+dbOnQ6A==}
+    engines: {node: '>=16'}
+
  strip-json-comments@3.1.1:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
    engines: {node: '>=8'}
@@ -1124,9 +1371,20 @@ packages:
    engines: {node: '>=14.17'}
    hasBin: true

+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}

+  vite-prerender-plugin@0.5.12:
+    resolution: {integrity: sha512-EiwhbMn+flg14EysbLTmZSzq8NGTxhytgK3bf4aGRF1evWLGwZiHiUJ1KZDvbxgKbMf2pG6fJWGEa3UZXOnR1g==}
+    peerDependencies:
+      vite: 5.x || 6.x || 7.x
+
  vite@7.3.1:
    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -1176,12 +1434,144 @@ packages:
    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
    engines: {node: '>=0.10.0'}

+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
  yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}

 snapshots:

+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.0
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.0':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx': 7.28.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-react-jsx@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.0
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
  '@esbuild/aix-ppc64@0.27.2':
    optional: true

@@ -1317,6 +1707,13 @@ snapshots:

  '@humanwhocodes/retry@0.4.3': {}

+  '@iconify-icon/react@3.0.3(react@19.2.4)':
+    dependencies:
+      iconify-icon: 3.0.2
+      react: 19.2.4
+
+  '@iconify/types@2.0.0': {}
+
  '@jridgewell/gen-mapping@0.3.13':
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -1336,6 +1733,56 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

+  '@preact/preset-vite@2.10.3(@babel/core@7.29.0)(preact@10.28.3)(rollup@4.57.1)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.29.0)
+      '@prefresh/vite': 2.4.11(preact@10.28.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2))
+      '@rollup/pluginutils': 5.3.0(rollup@4.57.1)
+      babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.29.0)
+      debug: 4.4.3
+      picocolors: 1.1.1
+      vite: 7.3.1(jiti@2.6.1)(lightningcss@1.30.2)
+      vite-prerender-plugin: 0.5.12(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2))
+    transitivePeerDependencies:
+      - preact
+      - rollup
+      - supports-color
+
+  '@prefresh/babel-plugin@0.5.2': {}
+
+  '@prefresh/core@1.5.9(preact@10.28.3)':
+    dependencies:
+      preact: 10.28.3
+
+  '@prefresh/utils@1.2.1': {}
+
+  '@prefresh/vite@2.4.11(preact@10.28.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@prefresh/babel-plugin': 0.5.2
+      '@prefresh/core': 1.5.9(preact@10.28.3)
+      '@prefresh/utils': 1.2.1
+      '@rollup/pluginutils': 4.2.1
+      preact: 10.28.3
+      vite: 7.3.1(jiti@2.6.1)(lightningcss@1.30.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@rollup/pluginutils@4.2.1':
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+
+  '@rollup/pluginutils@5.3.0(rollup@4.57.1)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.57.1
+
  '@rollup/rollup-android-arm-eabi@4.57.1':
    optional: true

@@ -1536,20 +1983,10 @@ snapshots:
    dependencies:
      '@tauri-apps/api': 2.9.1

-  '@tauri-apps/plugin-shell@2.3.4':
-    dependencies:
-      '@tauri-apps/api': 2.9.1
-
  '@types/estree@1.0.8': {}

-  '@types/jquery@3.5.33':
-    dependencies:
-      '@types/sizzle': 2.3.10
-
  '@types/json-schema@7.0.15': {}

-  '@types/sizzle@2.3.10': {}
-
  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.2
@@ -1664,8 +2101,16 @@ snapshots:

  argparse@2.0.1: {}

+  babel-plugin-transform-hook-names@1.0.2(@babel/core@7.29.0):
+    dependencies:
+      '@babel/core': 7.29.0
+
  balanced-match@1.0.2: {}

+  baseline-browser-mapping@2.9.19: {}
+
+  boolbase@1.0.0: {}
+
  brace-expansion@1.1.12:
    dependencies:
      balanced-match: 1.0.2
@@ -1675,8 +2120,18 @@ snapshots:
    dependencies:
      balanced-match: 1.0.2

+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.19
+      caniuse-lite: 1.0.30001767
+      electron-to-chromium: 1.5.286
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
  callsites@3.1.0: {}

+  caniuse-lite@1.0.30001767: {}
+
  chalk@4.1.2:
    dependencies:
      ansi-styles: 4.3.0
@@ -1690,12 +2145,24 @@ snapshots:

  concat-map@0.0.1: {}

+  convert-source-map@2.0.0: {}
+
  cross-spawn@7.0.6:
    dependencies:
      path-key: 3.1.1
      shebang-command: 2.0.0
      which: 2.0.2

+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-what@6.2.2: {}
+
  debug@4.4.3:
    dependencies:
      ms: 2.1.3
@@ -1704,11 +2171,33 @@ snapshots:

  detect-libc@2.1.2: {}

+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  electron-to-chromium@1.5.286: {}
+
  enhanced-resolve@5.18.4:
    dependencies:
      graceful-fs: 4.2.11
      tapable: 2.3.0

+  entities@4.5.0: {}
+
  esbuild@0.27.2:
    optionalDependencies:
      '@esbuild/aix-ppc64': 0.27.2
@@ -1738,6 +2227,8 @@ snapshots:
      '@esbuild/win32-ia32': 0.27.2
      '@esbuild/win32-x64': 0.27.2

+  escalade@3.2.0: {}
+
  escape-string-regexp@4.0.0: {}

  eslint-scope@8.4.0:
@@ -1806,6 +2297,8 @@ snapshots:

  estraverse@5.3.0: {}

+  estree-walker@2.0.2: {}
+
  esutils@2.0.3: {}

  fast-deep-equal@3.1.3: {}
@@ -1837,6 +2330,8 @@ snapshots:
  fsevents@2.3.3:
    optional: true

+  gensync@1.0.0-beta.2: {}
+
  glob-parent@6.0.2:
    dependencies:
      is-glob: 4.0.3
@@ -1847,6 +2342,12 @@ snapshots:

  has-flag@4.0.0: {}

+  he@1.2.0: {}
+
+  iconify-icon@3.0.2:
+    dependencies:
+      '@iconify/types': 2.0.0
+
  ignore@5.3.2: {}

  ignore@7.0.5: {}
@@ -1868,22 +2369,28 @@ snapshots:

  jiti@2.6.1: {}

-  jquery@4.0.0: {}
+  js-tokens@4.0.0: {}

  js-yaml@4.1.1:
    dependencies:
      argparse: 2.0.1

+  jsesc@3.1.0: {}
+
  json-buffer@3.0.1: {}

  json-schema-traverse@0.4.1: {}

  json-stable-stringify-without-jsonify@1.0.1: {}

+  json5@2.2.3: {}
+
  keyv@4.5.4:
    dependencies:
      json-buffer: 3.0.1

+  kolorist@1.8.0: {}
+
  levn@0.4.1:
    dependencies:
      prelude-ls: 1.2.1
@@ -1944,6 +2451,10 @@ snapshots:

  lodash.merge@4.6.2: {}

+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
  magic-string@0.30.21:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -1962,6 +2473,17 @@ snapshots:

  natural-compare@1.4.0: {}

+  node-html-parser@6.1.13:
+    dependencies:
+      css-select: 5.2.2
+      he: 1.2.0
+
+  node-releases@2.0.27: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
  optionator@0.9.4:
    dependencies:
      deep-is: 0.1.4
@@ -1989,6 +2511,8 @@ snapshots:

  picocolors@1.1.1: {}

+  picomatch@2.3.1: {}
+
  picomatch@4.0.3: {}

  postcss@8.5.6:
@@ -1997,10 +2521,14 @@ snapshots:
      picocolors: 1.1.1
      source-map-js: 1.2.1

+  preact@10.28.3: {}
+
  prelude-ls@1.2.1: {}

  punycode@2.3.1: {}

+  react@19.2.4: {}
+
  resolve-from@4.0.0: {}

  rollup@4.57.1:
@@ -2034,6 +2562,8 @@ snapshots:
      '@rollup/rollup-win32-x64-msvc': 4.57.1
      fsevents: 2.3.3

+  semver@6.3.1: {}
+
  semver@7.7.3: {}

  shebang-command@2.0.0:
@@ -2042,8 +2572,16 @@ snapshots:

  shebang-regex@3.0.0: {}

+  simple-code-frame@1.3.0:
+    dependencies:
+      kolorist: 1.8.0
+
  source-map-js@1.2.1: {}

+  source-map@0.7.6: {}
+
+  stack-trace@1.0.0-pre2: {}
+
  strip-json-comments@3.1.1: {}

  supports-color@7.2.0:
@@ -2080,10 +2618,26 @@ snapshots:

  typescript@5.9.3: {}

+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
  uri-js@4.4.1:
    dependencies:
      punycode: 2.3.1

+  vite-prerender-plugin@0.5.12(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)):
+    dependencies:
+      kolorist: 1.8.0
+      magic-string: 0.30.21
+      node-html-parser: 6.1.13
+      simple-code-frame: 1.3.0
+      source-map: 0.7.6
+      stack-trace: 1.0.0-pre2
+      vite: 7.3.1(jiti@2.6.1)(lightningcss@1.30.2)
+
  vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2):
    dependencies:
      esbuild: 0.27.2
@@ -2103,4 +2657,6 @@ snapshots:

  word-wrap@1.2.5: {}

+  yallist@3.1.1: {}
+
  yocto-queue@0.1.0: {}
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2588,16 +2588,6 @@ dependencies = [
 "pin-project-lite",
 ]

-[[package]]
-name = "os_pipe"
-version = "1.2.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7d8fae84b431384b68627d0f9b3b1245fcf9f46f6c0e3dc902e9dce64edd1967"
-dependencies = [
- "libc",
- "windows-sys 0.61.2",
-]
-
 [[package]]
 name = "pango"
 version = "0.18.3"
@@ -3824,17 +3814,6 @@ dependencies = [
 "digest",
 ]

-[[package]]
-name = "shared_child"
-version = "1.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e362d9935bc50f019969e2f9ecd66786612daae13e8f277be7bfb66e8bed3f7"
-dependencies = [
- "libc",
- "sigchld",
- "windows-sys 0.60.2",
-]
-
 [[package]]
 name = "shared_library"
 version = "0.1.9"
@@ -3857,27 +3836,6 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"

-[[package]]
-name = "sigchld"
-version = "0.2.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "47106eded3c154e70176fc83df9737335c94ce22f821c32d17ed1db1f83badb1"
-dependencies = [
- "libc",
- "os_pipe",
- "signal-hook",
-]
-
-[[package]]
-name = "signal-hook"
-version = "0.3.18"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d881a16cf4426aa584979d30bd82cb33429027e42122b169753d6ef1085ed6e2"
-dependencies = [
- "libc",
- "signal-hook-registry",
-]
-
 [[package]]
 name = "signal-hook-registry"
 version = "1.4.8"
@@ -4365,27 +4323,6 @@ dependencies = [
 "zbus",
 ]

-[[package]]
-name = "tauri-plugin-shell"
-version = "2.3.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "39b76f884a3937e04b631ffdc3be506088fa979369d25147361352f2f352e5ed"
-dependencies = [
- "encoding_rs",
- "log",
- "open",
- "os_pipe",
- "regex",
- "schemars 0.8.22",
- "serde",
- "serde_json",
- "shared_child",
- "tauri",
- "tauri-plugin",
- "thiserror 2.0.18",
- "tokio",
-]
-
 [[package]]
 name = "tauri-runtime"
 version = "2.9.2"
@@ -4984,7 +4921,7 @@ dependencies = [

 [[package]]
 name = "vectum"
-version = "3.0.1"
+version = "3.2.0"
 dependencies = [
 "derive-getters",
 "fix-path-env",
@@ -4996,7 +4933,6 @@ dependencies = [
 "tauri-build",
 "tauri-plugin-dialog",
 "tauri-plugin-opener",
- "tauri-plugin-shell",
 "zip",
 ]

--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "vectum"
-version = "3.0.1"
+version = "3.2.0"
 description = "Download older versions of Steam games with DepotDownloader"
 authors = ["mmvanheusden"]
 edition = "2021"
@@ -15,7 +15,6 @@ tauri-build = { version = "2.4.1", features = [] }
 fix-path-env = { git = "https://github.com/tauri-apps/fix-path-env-rs", rev = "c4c45d503ea115a839aae718d02f79e7c7f0f673" }
 serde_json = "1.0.143"
 tauri = { version = "2.8.5", features = [] }
-tauri-plugin-shell = "2.3.1"
 tauri-plugin-dialog = "2.4.0"
 serde = { version = "1.0.219", features = ["derive"] }
 derive-getters = "0.5.0"
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -7,10 +7,7 @@
  ],
  "permissions": [
    "core:default",
-    "shell:allow-open",
    "dialog:default",
-    "shell:allow-execute",
-    "shell:allow-spawn",
    {
      "identifier": "opener:allow-open-path",
      "allow": [
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -11,7 +11,7 @@ use portable_pty::{native_pty_system, PtyPair, PtySize};
 use std::io::ErrorKind::AlreadyExists;
 use std::io::{BufReader, Read, Write};
 use std::path::{Path, PathBuf};
-use std::sync::{Arc, OnceLock};
+use std::sync::{Arc};
 use std::time::Duration;
 use std::{env, thread};
 use tauri::async_runtime::Mutex;
@@ -23,24 +23,12 @@ struct AppState {
    reader: Arc<Mutex<BufReader<Box<dyn Read + Send>>>>,
 }

-
-/// The first terminal found. Used as default terminal.
-static WORKING_DIR: OnceLock<PathBuf> = OnceLock::new();
-
-/// This function is called every time the app is reloaded/started. It quickly populates the [`TERMINAL`] variable with a working terminal.
-#[tauri::command]
-async fn preload_vectum(app: AppHandle) {
-    // Only fill these variables once.
-
-    if WORKING_DIR.get().is_none() {
-        WORKING_DIR.set(Path::join(&app.path().local_data_dir().unwrap(), "SteamDepotDownloaderGUI")).expect("Failed to configure working directory")
-    }
-}
-
 #[tauri::command]
 async fn start_download(steam_download: steam::SteamDownload, app: AppHandle, state: State<'_, AppState>) -> Result<(), String> {
-    // Also change working directory
+    let working_dir: PathBuf = get_working_dir(&app);
+
    // std::env::set_current_dir(&WORKING_DIR.get().unwrap()).unwrap();
+    dbg!(&steam_download);

    println!("\n-------------------------DEBUG INFO------------------------");
    println!("received these values from frontend:");
@@ -50,11 +38,11 @@ async fn start_download(steam_download: steam::SteamDownload, app: AppHandle, st
    println!("\t- Depot ID: {}", steam_download.depot_id());
    println!("\t- Manifest ID: {}", steam_download.manifest_id());
    println!("\t- Output Path: {}", steam_download.output_path());
-    println!("\t- Working directory: {}", &WORKING_DIR.get().unwrap().display());
+    println!("\t- Working directory: {}", &working_dir.display());
    println!("----------------------------------------------------------\n");

    /* Build the command and spawn it in our terminal */
-    let mut cmd = terminal::create_depotdownloader_command(&steam_download, WORKING_DIR.get().unwrap());
+    let mut cmd = terminal::create_depotdownloader_command(&steam_download, &working_dir);

    // add the $TERM env variable so we can use clear and other commands
    #[cfg(target_os = "windows")]
@@ -81,12 +69,13 @@ async fn start_download(steam_download: steam::SteamDownload, app: AppHandle, st

 /// Downloads the DepotDownloader zip file from the internet based on the OS.
 #[tauri::command]
-async fn download_depotdownloader() {
+async fn download_depotdownloader(app: AppHandle) {
+    let working_dir: PathBuf = get_working_dir(&app);
    let url = get_depotdownloader_url();

    // Where we store the DepotDownloader zip.
    let zip_filename = format!("DepotDownloader-v{}-{}.zip", DEPOTDOWNLOADER_VERSION, env::consts::OS);
-    let depotdownloader_zip = Path::join(WORKING_DIR.get().unwrap(), Path::new(&zip_filename));
+    let depotdownloader_zip = Path::join(&working_dir, Path::new(&zip_filename));


    if let Err(e) = depotdownloader::download_file(url.as_str(), depotdownloader_zip.as_path()).await {
@@ -100,7 +89,7 @@ async fn download_depotdownloader() {
        println!("Downloaded DepotDownloader for {} to {}", env::consts::OS, depotdownloader_zip.display());
    }

-    depotdownloader::unzip(depotdownloader_zip.as_path(), WORKING_DIR.get().unwrap()).unwrap();
+    depotdownloader::unzip(depotdownloader_zip.as_path(), &working_dir).unwrap();
    println!("Succesfully extracted DepotDownloader zip.");
 }

@@ -122,6 +111,10 @@ pub fn get_os() -> &'static str {
    }
 }

+pub fn get_working_dir(app: &AppHandle) -> PathBuf {
+    Path::join(&app.path().local_data_dir().unwrap(), "SteamDepotDownloaderGUI")
+}
+
 fn main() {
    // macOS: change dir to documents because upon opening, our current dir by default is "/".
    // todo: Is this still needed ??
@@ -162,15 +155,13 @@ fn main() {
        })
        .plugin(tauri_plugin_opener::init())
        .plugin(tauri_plugin_dialog::init())
-        .plugin(tauri_plugin_shell::init())
        .invoke_handler(tauri::generate_handler![
            start_download,
            download_depotdownloader,
            internet_connection,
-            preload_vectum,
            async_write_to_pty,
            async_read_from_pty,
            async_resize_pty,
        ]).run(tauri::generate_context!())
        .expect("error while running tauri application");
-}
+}
--- a/src-tauri/src/steam.rs
+++ b/src-tauri/src/steam.rs
@@ -5,19 +5,15 @@ use std::path::PathBuf;

 /// Represents the data required to download a Steam depot.
 #[derive(Deserialize, Debug, Getters)]
+#[serde(rename_all = "camelCase")]
 pub struct SteamDownload {
    username: Option<String>,
    password: Option<String>,
    app_id: String,
    depot_id: String,
    manifest_id: String,
-    options: VectumOptions
-}
-
-#[derive(Debug, Deserialize, Getters)]
-pub struct VectumOptions {
-    output_directory: Option<PathBuf>,
-    directory_name: Option<String>
+    output_location: Option<PathBuf>,
+    output_directory_name: Option<String>
 }


@@ -30,7 +26,7 @@ impl SteamDownload {
    /// The directory where the download should happen
    pub fn output_path(&self) -> String {
        let sep = std::path::MAIN_SEPARATOR.to_string();
-        match (&self.options.output_directory, &self.options.directory_name) {
+        match (&self.output_location, &self.output_directory_name) {
            (Some(output_dir), Some(dir_name)) => format!("{}{}{}", output_dir.display(), sep, dir_name),
            (Some(output_dir), None) => format!("{}{}{}", output_dir.display(), sep, &self.manifest_id),
            (None, Some(dir_name)) => format!(".{}{}", sep, dir_name),
--- a/src-tauri/src/terminal.rs
+++ b/src-tauri/src/terminal.rs
@@ -5,6 +5,8 @@ use tauri::State;
 use crate::AppState;
 use crate::steam::SteamDownload;

+/* Parts of this file are derived from https://github.com/cablehead/tauri-xtermjs-nushell/blob/0bdd4a27ee2874de12e99bccd6c91d6ec5d28fbc/src-tauri/src/main.rs */
+
 #[tauri::command]
 pub async fn async_write_to_pty(data: &str, state: State<'_, AppState>) -> Result<(), ()> {
    write!(state.writer.lock().await, "{}", data).map_err(|_| ())
@@ -18,7 +20,7 @@ pub async fn async_read_from_pty(state: State<'_, AppState>) -> Result<Option<St
        let data = reader.fill_buf().map_err(|_| ())?;

        // Send the data to the webview if necessary
-        if data.len() > 0 {
+        if !data.is_empty() {
            std::str::from_utf8(data)
                .map(|v| Some(v.to_string()))
                .map_err(|_| ())?
@@ -64,14 +66,14 @@ pub fn create_depotdownloader_command(steam_download: &SteamDownload, cwd: &Path
    command.cwd(cwd);

    if !steam_download.is_anonymous() {
-        command.args(["-username", &*steam_download.username().clone().unwrap()]);
-        command.args(["-password", &*steam_download.password().clone().unwrap()]);
+        command.args(["-username", &steam_download.username().clone().unwrap()]);
+        command.args(["-password", &steam_download.password().clone().unwrap()]);
    }

-    command.args(["-app", &*steam_download.app_id()]);
-    command.args(["-depot", &*steam_download.depot_id()]);
-    command.args(["-manifest", &*steam_download.manifest_id()]);
-    command.args(["-dir", &*steam_download.output_path()]);
+    command.args(["-app", &steam_download.app_id().to_string()]);
+    command.args(["-depot", &steam_download.depot_id().to_string()]);
+    command.args(["-manifest", &steam_download.manifest_id().to_string()]);
+    command.args(["-dir", &steam_download.output_path()]);

    command
 }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,6 +1,6 @@
 {
  "productName": "SteamDepotDownloaderGUI",
-  "version": "3.0.1",
+  "version": "3.2.0",
  "identifier": "net.oopium.depotdownloader",
  "build": {
    "beforeDevCommand": "pnpm dev",
@@ -13,9 +13,10 @@
    "windows": [
      {
        "title": "SteamDepotDownloaderGUI",
-        "width": 890,
-        "height": 650,
-        "resizable": false
+        "width": 900,
+        "height": 720,
+        "resizable": false,
+        "maximizable": false
      }
    ],
    "security": {
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,92 @@
+import { getVersion } from "@tauri-apps/api/app";
+import { invoke } from "@tauri-apps/api/core";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { useState } from "preact/hooks";
+import { DownloaderForm } from "./components/DownloaderForm.tsx";
+import { DownloaderOutput } from "./components/DownloaderOutput.tsx";
+import { Settings } from "./components/Settings.tsx";
+import { AppContext, AppSettings } from "./context.ts";
+import "./css/App.css";
+
+const appVersion = await getVersion();
+
+
+// Settings defaults are defined here.
+const DEFAULT_APP_SETTINGS: AppSettings = {
+	outputDirectoryMode: "Manifest ID"
+};
+
+
+function App() {
+	const username = useState<string>();
+	const password = useState<string>();
+	const appId = useState<string>();
+	const depotId = useState<string>();
+	const manifestId = useState<string>();
+	const outputLocation = useState<string>();
+	const outputFolderName = useState<string>();
+	const downloading = useState<boolean>();
+	const showSettings = useState<boolean>();
+	const appSettings = useState<AppSettings>(DEFAULT_APP_SETTINGS);
+	
+	
+	return (
+		<AppContext.Provider
+			value={{
+				username,
+				password,
+				appId,
+				depotId,
+				manifestId,
+				outputLocation,
+				downloading,
+				showSettings,
+				outputFolderName,
+				appSettings,
+			}}
+		>
+			<main class="absolute top-0 right-0 bottom-0 left-0 p-px select-none bg-[#0d1117]">
+				{showSettings[0]
+					?<Settings />
+					: <>
+						<div class="mb-1 text-4xl font-bold text-center text-white font-['Hubot_Sans']">
+							Steam Depot Downloader
+						</div>
+
+						<div class="flex gap-5 justify-between max-h-screen">
+							<div class="pl-3 w-full max-w-1/2">
+								<DownloaderForm />
+							</div>
+							<div class="pr-3 w-full max-w-1/2">
+								<DownloaderOutput />
+							</div>
+						</div>
+					</>
+				}
+				<button tabIndex={-1} type="button" onClick={() => { openUrl(`https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/v${appVersion}`).catch((e) => console.error(e)); }} class="absolute right-0 bottom-0 text-white hover:underline">{`v${appVersion}`}</button>
+			</main>
+		</AppContext.Provider>
+	);
+}
+
+export default App;
+
+export async function startDownload(options: {
+	username?: string;
+	password?: string;
+	appId: string;
+	depotId: string;
+	manifestId: string;
+	outputLocation?: string;
+	outputDirectoryName?: string;
+}) {
+	
+	await invoke("download_depotdownloader"); // First make backend download DepotDownloader
+	
+	await invoke("start_download", {
+		steamDownload: {
+			...options,
+			outputDirectoryName: options.outputDirectoryName == "" ? null : options.outputDirectoryName, // empty string becomes null.
+		}
+	}); // First make backend download DepotDownloader
+}
--- a/src/assets/Windows.woff
+++ b/src/assets/Windows.woff
--- a/src/components/DownloaderForm.tsx
+++ b/src/components/DownloaderForm.tsx
@@ -0,0 +1,108 @@
+import { Icon } from "@iconify-icon/react";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { useContext } from "preact/hooks";
+import { startDownload } from "../App";
+import { AppContext } from "../context";
+import "../css/App.css";
+import { BooleanUseState, FileInput, NumberInput, TextInput } from "./FormInput";
+
+export function DownloaderForm() {
+	const context = useContext(AppContext);
+	
+	return (
+		<>
+			<form class="mb-1">
+				<div class="flex flex-col gap-0.5 mb-8">
+					<TextInput id="username" label="Username" valueState={context.username!} placeholder="Leave empty for anonymous download" disabled={context.downloading![0]} />
+					<TextInput id="password" label="Password" valueState={context.password!} placeholder="Leave empty for anonymous download" disabled={context.downloading![0]} password={true} />
+					<div class="h-5" />
+					<NumberInput id="appId" label="App ID" valueState={context.appId!} required={true} disabled={context.downloading![0]} />
+					<NumberInput id="depotId" label="Depot ID" valueState={context.depotId!} required={true} disabled={context.downloading![0]} />
+					<NumberInput id="manifestId" label="Manifest ID" valueState={context.manifestId!} required={true} disabled={context.downloading![0]} />
+					<div class="h-1" />
+					<FileInput required={true} pathState={context.outputLocation!} disabled={context.downloading![0]} />
+				</div>
+				<DownloadButton disabled={context.downloading![0]} downloadingState={context.downloading!} />
+			</form>
+			<div class="flex gap-1 justify-between">
+				<InternetButton icon={"ic:sharp-discord"} title="Discord" href="https://discord.com/invite/3qCt4DT5qe" />
+				<InternetButton icon={"simple-icons:steamdb"} title="SteamDB" href="https://steamdb.info/instantsearch" />
+				<InternetButton icon={"mdi:youtube"} title="Tutorials" href="https://youtube.com/playlist?list=PLRAjc5plLScj967hnsYX-I3Vjw9C1v7Ca"/>
+				<InternetButton icon={"bx:donate-heart"} title="Donate" href="https://paypal.me/onderkin"/>
+			</div>
+		</>
+	);
+}
+
+
+function DownloadButton(
+	{disabled, downloadingState}: {disabled?: boolean, downloadingState: BooleanUseState}
+) {
+	const [downloading, setDownloading] = downloadingState;
+	const context = useContext(AppContext);
+	const onClick = (e: MouseEvent) => {
+		if (downloading) {
+			console.warn("Already downloading!");
+			return;
+		}
+		const form: HTMLFormElement = (e.target as HTMLButtonElement).closest("form")!;
+    
+		e.preventDefault(); // Block refreshing the page
+    
+		form.reportValidity(); // Display native form validation
+    
+		if (!form.checkValidity()) {
+			console.warn("Form invalid!");
+			return;
+		}
+		setDownloading(true);
+		startDownload({
+			username: context.username![0],
+			password: context.password![0],
+			appId: context.appId![0]!,
+			depotId: context.depotId![0]!,
+			manifestId: context.manifestId![0]!,
+			outputLocation: context.outputLocation![0],
+			outputDirectoryName: context.outputFolderName![0],
+		}).catch((e) => console.error(e));
+		// setDownloading(false)
+	};
+  
+	return (
+		<div class={`flex transition-transform ${disabled ? "cursor-not-allowed" :"active:scale-102"}`}>
+			<button disabled={disabled} onClick={onClick} type="submit" class="inline-flex justify-between items-center py-1 w-full text-2xl font-bold text-white bg-green-600 rounded-l-md border-2 border-black hover:bg-green-700 active:bg-green-800 disabled:bg-red-500/70">
+				{downloading
+					? <>
+						<div class="flex absolute ml-2">
+							<Icon icon="line-md:downloading-loop" width="35" height="35" />
+						</div>
+						<span class="w-full">Downloading...</span>
+					</> :
+					<>
+						<div class="flex absolute ml-2">
+							<Icon icon="material-symbols:downloading-rounded" width="35" height="35" />
+						</div>
+						<span class="w-full">Download</span>
+					</>
+				}
+			</button>
+			<button disabled={disabled} onClick={() => context.showSettings![1](s => !s)} type="button" class="inline-flex justify-center items-center py-1 text-2xl font-bold text-center text-white bg-green-600 rounded-r-md border-2 border-l-0 border-black hover:bg-green-700 active:bg-green-800 group w-15 ring-l-gray-800 disabled:bg-red-500/70">
+				<Icon icon="heroicons:cog" width="30" height="30" class={`animate-spin [animation-play-state:paused] ${!disabled && "group-hover:[animation-play-state:running]"}`}/>
+			</button>
+		</div>
+	);
+}
+
+function InternetButton(
+	{title, icon, href, disabled}: {title: string, icon: string, href?: string, disabled?: boolean}
+) {
+	const onClick = () => {
+		if (href) openUrl(href).catch((e) => console.error(e));
+	};
+  
+	return (
+		<button disabled={disabled} onClick={onClick} type="button" class="inline-flex gap-0.5 justify-center items-center py-0.5 px-1 font-medium text-white rounded-md border border-black transition-transform disabled:pointer-events-none grow bg-blue-900/90 text-md hover:bg-blue-900/65 active:bg-blue-900/40 active:scale-103 disabled:bg-red-500/70">
+			<Icon icon={icon} height="20"/>{title}
+		</button>
+	);
+}
--- a/src/components/DownloaderOutput.tsx
+++ b/src/components/DownloaderOutput.tsx
@@ -0,0 +1,98 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { FitAddon } from "@xterm/addon-fit";
+import { Terminal } from "@xterm/xterm";
+import "@xterm/xterm/css/xterm.css";
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
+import { AppContext } from "../context";
+
+/* Parts of this file are derived from https://github.com/cablehead/tauri-xtermjs-nushell/blob/0bdd4a27ee2874de12e99bccd6c91d6ec5d28fbc/src/main.ts */
+
+export function DownloaderOutput() {
+	const context = useContext(AppContext);
+	const [terminal, setTerminal] = useState<Terminal | undefined>();
+	
+	// Hook on the "command-exited" Tauri emitter, and wait for it to emit, so we can flip the downloading state.
+	listen("command-exited", () => {
+	  context.downloading?.[1]?.(false);
+	}).catch(console.error);
+	
+	const terminalWindowRef = useRef(null);
+	
+	useEffect(() => {
+		setTerminal(registerTerminal(terminalWindowRef.current!));
+	}, []);
+	
+	return (
+		<div class="mx-auto mt-2 w-full h-full">
+			<div class="text-white bg-gray-900 rounded-md border border-gray-300 shadow shadow-blue-200">
+				<div class="inline-flex items-center my-px w-full font-semibold text-md">
+					<span class="w-full text-center">Download output</span>
+					{terminal &&
+						<button onClick={() => { if (!context.downloading![0]) terminal.reset(); }} type="button" disabled={context.downloading![0] ?? false} class="py-px px-2 my-1 mr-2 ml-auto font-normal border-2 disabled:text-gray-300 disabled:line-through disabled:cursor-not-allowed rounded-xs border-red-500/75 enabled:hover:bg-red-200/30 enabled:active:bg-red-200/50">
+							Clear
+						</button>
+					}
+					
+				</div>
+				<div ref={terminalWindowRef} class="max-h-[74vh]"></div>
+			</div>
+		</div>
+		
+	);
+}
+
+const registerTerminal: (terminalElement: HTMLElement) => Terminal = (terminalElement: HTMLElement) => {
+	/* eslint-disable @typescript-eslint/no-misused-promises */
+	const fitAddon = new FitAddon();
+	const term = new Terminal({
+		fontSize: 10,
+		cursorBlink: true,
+		rows: 100,
+		cols: 100,
+		theme: {
+			background: "rgb(30,33,46)",
+		},
+	});
+	term.loadAddon(fitAddon);
+	term.open(terminalElement);
+	function fitTerminal() {
+		fitAddon.fit();
+		void invoke<string>("async_resize_pty", {
+			rows: term.rows,
+			cols: term.cols,
+		});
+	}
+
+	// Write data from pty into the terminal
+	function writeToTerminal(data: string) {
+		return new Promise<void>((r) => {
+			term.write(data, () => r());
+		});
+	}
+
+	// Write data from the terminal to the pty
+	function writeToPty(data: string) {
+		void invoke("async_write_to_pty", {
+			data,
+		});
+	}
+	term.onData(writeToPty);
+	addEventListener("resize", fitTerminal);
+	fitTerminal();
+
+	async function readFromPty() {
+		const data = await invoke<string>("async_read_from_pty");
+
+		if (data) {
+			await writeToTerminal(data);
+		}
+		
+		window.requestAnimationFrame(readFromPty);
+	}
+
+	window.requestAnimationFrame(readFromPty);
+
+	return term;
+};
+
--- a/src/components/FormInput.tsx
+++ b/src/components/FormInput.tsx
@@ -0,0 +1,95 @@
+import { Icon } from "@iconify-icon/react";
+import { open as openDialog } from "@tauri-apps/plugin-dialog";
+import { openPath } from "@tauri-apps/plugin-opener";
+import { useState } from "preact/hooks";
+import "../css/App.css";
+
+export type StringUseState = ReturnType<typeof useState<string>>;
+export type NumberUseState = ReturnType<typeof useState<number>>;
+export type BooleanUseState = ReturnType<typeof useState<boolean>>;
+
+export function Label({ forId, text, required }: { forId?: string, text: string, required?: boolean }) {
+	return (
+		<label for={forId} class={`text-md font-medium text-white ${required && "after:content-['*'] after:ml-1 after:text-xl  after:text-red-500"}`}>
+			{text}
+		</label>
+	);
+}
+
+
+export function TextInput({ id, label, placeholder, valueState, required, password, disabled, className }: { id: string, label?: string, placeholder?: string, valueState: StringUseState, required?: boolean, password?: boolean, disabled?: boolean, className?: string }) {
+	const [value, setValue] = valueState;
+	const onInput = (e: InputEvent) => setValue((e.currentTarget as HTMLInputElement).value);
+  
+	return (
+		<>
+			{label && <Label forId={id} text={label} required={required} />}
+			<input disabled={disabled} id={id} required={required} value={value} onInput={onInput} placeholder={placeholder} type={password ? "password" : "text"} class={`block py-2 px-3 w-full text-sm placeholder-gray-400 text-white rounded-lg border border-gray-600 transition duration-300 focus:border-blue-500 disabled:placeholder-white disabled:bg-gray-700 bg-[#161b22] focus:shadow-[0px_0px_29px_1px_rgba(59,130,246,0.5)] ${className} `} />
+		</>
+	);
+}
+
+export function NumberInput({ id, label, placeholder, valueState, required, min, max, step, disabled }: { id: string, label: string, placeholder?: string, valueState: StringUseState, required?: boolean, min?: number, max?: number, step?: number, disabled?: boolean }) {
+	const [value, setValue] = valueState;
+	const onInput = (e: Event) => {
+		const newVal: string = (e.currentTarget as HTMLInputElement).value;
+		// // https://stackoverflow.com/a/73143643
+		// if (!(!isNaN(parseFloat(newVal)) && !isNaN(+newVal))) { // Check if new value is a number
+		// 	console.warn("Not a number!")
+		// 	e.preventDefault();
+		// 	return;
+		// }
+		
+		setValue(newVal);
+	};
+  
+	return (
+		<>
+			<Label forId={id} text={label} required={required} />
+			<input disabled={disabled} id={id} required={required} value={value} onInput={onInput} min={min ?? 1} max={max} step={step} placeholder={placeholder} type="number" pattern="[0-9]" class="block py-2 px-3 w-full text-sm placeholder-gray-400 text-white rounded-lg border border-gray-600 transition duration-300 focus:border-blue-500 disabled:placeholder-white disabled:bg-gray-700 bg-[#161b22] focus:shadow-[0px_0px_29px_1px_rgba(59,130,246,0.5)]" />
+		</>
+	);
+}
+
+export function FileInput({ required, pathState, disabled }: { required?: boolean, pathState: StringUseState, disabled?: boolean }) {
+	const [path, setPath] = pathState;
+	const selectPath = () => {
+		openDialog({
+			title: "Choose where to save the game download.",
+			multiple: false,
+			directory: true,
+			canCreateDirectories: true,
+		})
+			.then((selectedPath) => {
+				if (!selectedPath) {
+					console.warn("Nothing selected, doing nothing.");
+					return;
+				}
+				setPath(selectedPath);
+			})
+			.catch((e) => console.error(e));	
+	};
+	const previewPath = () => {
+		openPath(path!).catch((e) => console.error(e));
+	};
+	
+	
+	return (
+		<>
+			<Label text="Output directory" required={required} />
+			<div className="flex gap-2 justify-start w-2/3">
+				<button disabled={disabled} type="button" onClick={selectPath}
+					className="inline-flex gap-2 justify-center items-center py-1 px-2 font-medium text-white rounded-md border border-gray-600 shadow-2xl transition-transform disabled:cursor-not-allowed grow bg-blue-900/90 text-md enabled:active:scale-103 hover:bg-blue-900/65 active:bg-blue-900/40 disabled:bg-red-500/70">
+					<Icon icon="subway:folder-2" height="25" width="25" />Choose
+				</button>
+				<input required={required} type="text" hidden
+					   value={path}></input> {/* A hidden text input which holds the path useState value, so the form will be invalid when no path is selected. */}
+				<button type="button" disabled={!path} onClick={() => {if (path) previewPath(); }}
+					className="inline-flex gap-2 justify-center items-center py-1 px-2 font-medium text-white rounded-md border border-gray-600 shadow-2xl transition-transform disabled:cursor-not-allowed grow bg-blue-900/90 text-md enabled:active:scale-103 hover:bg-blue-900/65 active:bg-blue-900/40 disabled:bg-red-500/70">
+					<Icon icon="material-symbols:folder-eye" height="25" width="25" />Preview
+				</button>
+			</div>
+		</>
+
+	);
+}
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -0,0 +1,46 @@
+import { Icon } from "@iconify-icon/react";
+import { useContext } from "preact/hooks";
+import { AppContext } from "../context";
+import { TextInput } from "./FormInput";
+
+export function Settings() {
+	const context = useContext(AppContext);
+	const [settings, setSettings] = context.appSettings!;
+	
+	return (
+		<>
+			<div class="flex justify-center w-full">
+				<button onClick={() => context.showSettings![1](s => !s)} type="button" class="inline-flex absolute left-0 items-center py-1 px-2 text-xl font-semibold text-white bg-green-600 rounded translate-x-1 translate-y-1 hover:bg-green-700 active:bg-green-800">
+					<Icon icon="icon-park-solid:back" width="20" height="20"/>Back
+				</button>
+				<div class="mb-1 text-4xl font-bold text-center text-white font-['Hubot_Sans']">
+					Settings
+				</div>
+			</div>
+			<div class="px-[10%]">
+				<div class="text-2xl font-semibold text-white">
+					Directory name
+				</div>
+				<p class="mb-3 text-white">
+					This is the name the folder DepotDownloader will download the game in.<br />
+					It will be located in the chosen output directory.
+				</p>
+				<div class="flex gap-px mb-2 rounded-md shadow-xs">
+					<button
+						onClick={() => setSettings(oldSettings => { context.outputFolderName![1](""); return ({ ...oldSettings, outputDirectoryMode: "Manifest ID" }); })}
+						type="button"
+						class={`border-black px-3 py-2  border border-r-0 font-medium text-md disabled:bg-red-500/70 disabled:pointer-events-none inline-flex items-center justify-center rounded-s-lg focus:z-10 focus:ring-2 text-white hover:text-white focus:ring-blue-500 focus:text-white ${settings?.outputDirectoryMode === "Manifest ID" ? "bg-blue-500 underline border-0 outline-gray-300 outline shadow-[0px_0px_29px_-8px_cornflowerblue] hover:bg-blue-600 active:bg-blue-700" : "hover:bg-blue-800 active:bg-blue-900 bg-blue-700"}`}>
+						Manifest ID
+				  </button>
+					<button
+						onClick={() => setSettings(oldSettings => ({ ...oldSettings, outputDirectoryMode: "Custom" }))}
+						type="button"
+						class={`border-black px-3 py-2  border border-l-0 font-medium text-md disabled:bg-red-500/70 disabled:pointer-events-none inline-flex items-center justify-center rounded-e-lg focus:z-10 focus:ring-2 text-white hover:text-white focus:ring-blue-500 focus:text-white ${settings?.outputDirectoryMode === "Custom" ? "bg-blue-500 underline border-0 outline-gray-300 outline shadow-[0px_0px_29px_-8px_cornflowerblue] hover:bg-blue-600 active:bg-blue-700" : "hover:bg-blue-800 active:bg-blue-900 bg-blue-700"}`}>
+						Custom
+				  </button>
+				</div>
+				<TextInput className="max-w-1/2" disabled={settings?.outputDirectoryMode === "Manifest ID"} id="directoryName" placeholder="DepotDownloader output directory name" valueState={context.outputFolderName!} />
+			</div>
+		</>
+	);
+}
--- a/src/context.ts
+++ b/src/context.ts
@@ -0,0 +1,31 @@
+import { createContext } from "preact";
+import { SetStateAction } from "preact/compat";
+import { Dispatch, useState } from "preact/hooks";
+import { BooleanUseState, StringUseState } from "./components/FormInput";
+
+
+// Source: https://stackoverflow.com/a/75420688
+type NoUndefinedState<T> =
+    T extends [infer S | undefined, Dispatch<SetStateAction<infer S | undefined>>]
+    ? [S, Dispatch<SetStateAction<S>>]
+	: never;
+
+export interface AppSettings {
+	outputDirectoryMode: "Manifest ID" | "Custom"	
+}
+
+
+interface AppContext {
+	username: StringUseState;
+	password: StringUseState;
+	appId: StringUseState;
+	depotId: StringUseState;
+	manifestId: StringUseState;
+	outputLocation: StringUseState;
+	outputFolderName: StringUseState;
+	downloading: BooleanUseState;
+	showSettings: BooleanUseState;
+	appSettings: NoUndefinedState<ReturnType<typeof useState<AppSettings>>>
+}
+
+export const AppContext = createContext<Partial<AppContext>>({});
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@font-face {
+    font-family: 'Hubot Sans';
+    src: url('../assets/Hubot-Sans.woff2') format('woff2 supports variations'),
+    url('../assets/Hubot-Sans.woff2') format('woff2-variations');
+    font-weight: 700;
+    font-stretch: expanded;
+}
+
+/* Disable + and - buttons for number input */
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+button:enabled {
+	cursor: pointer;
+}
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,139 +0,0 @@
-@import "tailwindcss";
-
-@font-face {
-    font-family: 'Hubot Sans';
-    src: url('../assets/Hubot-Sans.woff2') format('woff2 supports variations'),
-    url('../assets/Hubot-Sans.woff2') format('woff2-variations');
-    font-weight: 700;
-    font-stretch: expanded;
-}
-
-@font-face {
-    font-family: 'Windows';
-    src: url('../assets/Windows.woff') format('woff2 supports variations'),
-    url('../assets/Windows.woff') format('woff2-variations');
-    font-weight: 700;
-    font-stretch: expanded;
-}
-
-.f1-light {
-    font-family: 'Hubot Sans', sans-serif;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.f2-light {
-    font-family: 'Hubot Sans', sans-serif;
-}
-
-/* The grey part */
-.settings-surrounding {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background-color: rgba(0, 0, 0, 0.33);
-}
-
-.settings-content {
-    position: relative;
-    border-radius: 10px;
-    overflow: auto;
-    /*noinspection CssUnresolvedCustomProperty*/
-    background-color: var(--bgColor-default, var(--color-canvas-default));
-    margin: 1%;
-    padding: 25px;
-    border: 1.5px solid white;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
-}
-
-[data-color-mode="light"] .settings-content {
-    border: 1.5px solid black;
-}
-
-@media (prefers-color-scheme: light) {
-    [data-color-mode="auto"] .settings-content {
-        border: 1.5px solid black;
-    }
-}
-
-.hide {
-    display: none;
-}
-
-hr {
-    border: 0;
-    height: 1px;
-    background: black linear-gradient(to right, #0c1016, #ccc, #0c1016);
-}
-
-[data-color-mode="light"] hr {
-    filter: invert(1);
-}
-
-@media (prefers-color-scheme: light) {
-    [data-color-mode="auto"] hr {
-        filter: invert(1);
-    }
-}
-
-.version-info {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    font-size: 0.9em;
-    padding: 5px 10px;
-    font-family: monospace;
-    cursor: pointer;
-}
-
-.AnimatedEllipsis {
-    display: inline-block;
-    overflow: hidden;
-    vertical-align: bottom
-}
-
-.AnimatedEllipsis::after {
-    display: inline-block;
-    content: "...";
-    animation: AnimatedEllipsis-keyframes 1s steps(4, jump-none) infinite
-}
-
-@keyframes AnimatedEllipsis-keyframes {
-    0% {
-        transform: translateX(-100%)
-    }
-}
-
-.opium-button {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    cursor: pointer;
-    margin-left: 5px;
-    margin-bottom: 4px;
-
-    border: 1px solid #000;
-    background: linear-gradient(180deg, #8C8C8C 25%, #434343 75%);
-    display: inline-block;
-    font: 16px "Windows", monospace;
-    padding: 2px 5px;
-    color: darkred;
-    text-decoration: none;
-
-}
-
-.opium-button:hover {
-    cursor: zoom-in;
-    background: linear-gradient(180deg, #b0b0b0 25%, #504f4f 75%);
-}
-
-.opium-button:active {
-    cursor: crosshair;
-    border: 1px inset black;
-    background: linear-gradient(180deg, #333232 25%, #504f4f 75%);
-}
--- a/src/index.html
+++ b/src/index.html
@@ -1,263 +1,13 @@
-<!DOCTYPE html>
-<html data-color-mode="auto" data-dark-theme="dark" data-light-theme="light" id="theme" lang="en">
-
+<!doctype html>
+<html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <title>SteamDepotDownloaderGUI</title>
-    <link href="https://unpkg.com/@primer/css@21.3.6/dist/primer.css" rel="stylesheet"/>
-    <link href="css/style.css" rel="stylesheet">
-    <script defer src="./ts/preload.ts" type="module"></script>
-    <script src="./ts/main.ts" type="module"></script>
-    <script src="./ts/settings.ts" type="module"></script>
-    <script src="../node_modules/@xterm/xterm/lib/xterm.js"></script>
-    <link rel="stylesheet" href="../node_modules/@xterm/xterm/css/xterm.css" />
 </head>

-<body class="select-none">
-<div class="f1-light text-center mb-1">Steam Depot Downloader</div>
-<div class="flex justify-between gap-2 w-svw flex-row">
-    <div class="w-1/2 h-full">
-        <div class="mx-auto">
-            <form id="theform">
-                <div class="form-group mx-3 mt-1">
-                    <div class="form-group-header">
-                        <label for="username">Username</label>
-                    </div>
-                    <input spellcheck="false" class="form-control input-block" id="username" placeholder="Leave empty for anonymous download"
-                           type="text"/>
-                </div>
-
-                <div class="form-group mx-3 mt-1">
-                    <div class="form-group-header">
-                        <label for="password">Password</label>
-                    </div>
-                    <input class="form-control input-block" id="password" placeholder="Leave empty for anonymous download"
-                           type="password"/>
-                </div>
-
-                <div class="form-group mx-3 mt-1 required">
-                    <div class="form-group-header">
-                        <label for="appid">App ID</label>
-                    </div>
-                    <input class="form-control input-block" id="appid" type="number"/>
-                </div>
-
-                <div class="form-group mx-3 mt-1 required">
-                    <div class="form-group-header">
-                        <label for="depotid">Depot ID</label>
-                    </div>
-                    <input class="form-control input-block" id="depotid" type="number"/>
-                </div>
-
-                <div class="form-group mx-3 mt-1 required">
-                    <div class="form-group-header">
-                        <label for="manifestid">Manifest ID</label>
-                    </div>
-                    <input class="form-control input-block" id="manifestid" type="number"/>
-                </div>
-
-                <div class="mx-3 mt-1 required">
-                    <div class="form-group-header">
-                        <label>Download Location</label>
-                    </div>
-                    <div aria-label="Pick the path/location where the game will be downloaded to."
-                         class="form-control btn btn-sm tooltipped tooltipped-ne" id="pickpath">
-                        Set location
-                    </div>
-
-                    <div aria-disabled="true" aria-label="Check the location that has been selected."
-                         class="form-control btn btn-sm ml-2 tooltipped tooltipped-ne" id="checkpath">
-                        Open location
-                    </div>
-
-                    <span class="Label mt-1 ml-3 Label--warning" id="busy">
-							<span aria-label="Application is executing a task. Please be patient."
-                                  class="tooltipped tooltipped-n">Busy<span class="AnimatedEllipsis"></span>
-						</span>
-                </span>
-                </div>
-            </form>
-
-            <div class="mt-2" id="warning-banners">
-                <div hidden id="dotnetwarning">
-                    <div class="flash flash-error mx-2 mt-2 color-shadow-medium" id="dotnetalert">
-                        <svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                    d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
-                                    fill-rule="evenodd"></path>
-                        </svg>
-                        <code><span class="text-italic">dotnet</span></code> was not found.
-                        <button class="btn btn-sm flash-action" id="dotnetalertbtn">
-                            <svg class="octicon" height="16" viewBox="0 0 16 16" width="16"
-                                 xmlns="http://www.w3.org/2000/svg">
-                                <path d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5
-					 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"
-                                      fill-rule="evenodd"></path>
-                            </svg>
-                            <span class="text-bold">Download</span>
-                        </button>
-                    </div>
-                </div>
-
-                <div hidden id="emptywarning">
-                    <div class="flash flash-warn mx-2 mt-2 color-shadow-medium" id="emptyalert">
-                        <svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                    d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
-                                    fill-rule="evenodd"></path>
-                        </svg>
-                        Please fill in all required fields.
-                    </div>
-                </div>
-                <div id="internet-btns">
-                    <div class="form-group mt-3 ml-3 mr-3">
-                        <div class="BtnGroup d-flex">
-                            <button class="BtnGroup-item btn btn-block btn-primary flex-1" id="downloadbtn">
-                                <svg class="octicon filter-red" height="16"
-                                     style="display: inline-block; user-select: none; vertical-align: text-bottom;"
-                                     viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                            d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"
-                                            fill-rule="evenodd"></path>
-                                </svg>
-                                Download
-                            </button>
-                            <button class="BtnGroup-item btn flex-0" id="settings-button">
-                                <svg fill="#8B949E" height="16"
-                                     style="display: inline-block; user-select: none; vertical-align: text-bottom;"
-                                     viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                            d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z">
-                                    </path>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-
-                <div hidden id="nopathwarning">
-                    <div class="flash flash-warn mx-2 mt-2 color-shadow-medium" id="emptyalert">
-                        <svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                    d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
-                                    fill-rule="evenodd"></path>
-                        </svg>
-                        Please choose a download location.
-                    </div>
-                </div>
-
-                <div class="flash mx-2 mt-2 color-shadow-medium" hidden id="downloadingnotice">
-                    <svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                                d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
-                                fill-rule="evenodd"></path>
-                    </svg>
-                    Downloading and extracting DepotDownloader<span class="AnimatedEllipsis"></span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="w-1/2 h-full px-2">
-        <div class="mt-2 h-full w-full mx-auto">
-            <div class="border border-gray-300 rounded-md bg-gray-900 text-white shadow shadow-blue-200">
-                <span class="text-md font-semibold block text-center">Download output</span>
-                <div class="max-h-[70vh]" id="xtermjs"></div>
-            </div>
-            <div class="mt-3 justify-between flex flex-row gap-3">
-                <div aria-label="Join the Discord server for rapid support." class="btn btn-sm tooltipped tooltipped-ne mb-1 w-full text-center items-center"
-                     id="smbtn1">
-
-                    <svg fill="#8B949E" height="16" style="display: inline-block; vertical-align: text-bottom;" viewBox="0 0 16 16">
-                        <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
-                    </svg>
-                    Discord
-                </div>
-
-                <div aria-label="Visit the SteamDB instant search website."
-                     class="btn btn-sm tooltipped tooltipped-n mb-1 w-full text-center items-center" id="smbtn2">
-                    <svg aria-hidden="true" class="octicon" fill="#8B949E" height="16" viewBox="0 0 128 128" width="16"
-                         xmlns="http://www.w3.org/2000/svg">
-                        <path
-                                d="M63.9 0C30.5 0 3.1 11.9.1 27.1l35.6 6.7c2.9-.9 6.2-1.3 9.6-1.3l16.7-10c-.2-2.5 1.3-5.1 4.7-7.2 4.8-3.1 12.3-4.8 19.9-4.8 5.2-.1 10.5.7 15 2.2 11.2 3.8 13.7 11.1 5.7 16.3-5.1 3.3-13.3 5-21.4 4.8l-22 7.9c-.2 1.6-1.3 3.1-3.4 4.5-5.9 3.8-17.4 4.7-25.6 1.9-3.6-1.2-6-3-7-4.8L2.5 38.4c2.3 3.6 6 6.9 10.8 9.8C5 53 0 59 0 65.5c0 6.4 4.8 12.3 12.9 17.1C4.8 87.3 0 93.2 0 99.6 0 115.3 28.6 128 64 128c35.3 0 64-12.7 64-28.4 0-6.4-4.8-12.3-12.9-17 8.1-4.8 12.9-10.7 12.9-17.1 0-6.5-5-12.6-13.4-17.4 8.3-5.1 13.3-11.4 13.3-18.2 0-16.5-28.7-29.9-64-29.9zm22.8 14.2c-5.2.1-10.2 1.2-13.4 3.3-5.5 3.6-3.8 8.5 3.8 11.1 7.6 2.6 18.1 1.8 23.6-1.8s3.8-8.5-3.8-11c-3.1-1-6.7-1.5-10.2-1.5zm.3 1.7c7.4 0 13.3 2.8 13.3 6.2 0 3.4-5.9 6.2-13.3 6.2s-13.3-2.8-13.3-6.2c0-3.4 5.9-6.2 13.3-6.2zM45.3 34.4c-1.6.1-3.1.2-4.6.4l9.1 1.7a10.8 5 0 1 1-8.1 9.3l-8.9-1.7c1 .9 2.4 1.7 4.3 2.4 6.4 2.2 15.4 1.5 20-1.5s3.2-7.2-3.2-9.3c-2.6-.9-5.7-1.3-8.6-1.3zM109 51v9.3c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-9.2c11.5 5.3 27.4 8.6 44.9 8.6 17.6 0 33.6-3.3 45.2-8.7zm0 34.6v8.8c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-8.8c11.6 5.1 27.4 8.2 45 8.2s33.5-3.1 45-8.2z"
-                                fill-rule="evenodd"></path>
-                    </svg>
-                    SteamDB
-                </div>
-
-                <div aria-label="Donate to the author of SteamDepotDownloaderGUI."
-                     class="btn btn-sm tooltipped tooltipped-n mb-1 w-full text-center items-center" id="smbtn3">
-                    <svg fill="#8B949E" height="16" style="display: inline-block; vertical-align: text-bottom;"
-                         viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                                d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"
-                                fill-rule="evenodd"></path>
-                    </svg>
-                    Donate
-                </div>
-
-                <div aria-label="View the official SteamDepotDownloaderGUI tutorials."
-                     class="btn btn-sm tooltipped tooltipped-nw mb-1 w-full text-center items-center" id="smbtn4">
-                    <svg fill="#8B949E" style="display: inline-block; vertical-align: text-bottom;" height="16" width="16">
-                        <path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25Z"></path>
-                        <path d="M6 10.559V5.442a.25.25 0 0 1 .379-.215l4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559Z"></path>
-                    </svg>
-                    Tutorial
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="settings-surrounding" id="settings-surrounding">
-    <div class="settings-content mx-auto max-w-2/3 h-[85vh] mt-4" id="settings-content">
-        <label class="version-info" id="version-info">UNKNOWN</label>
-        <button class="opium-button" id="opium-btn">aphex</button>
-        <h2><b>Settings</b></h2>
-        <h4><b>Appearance</b></h4>
-        <div class="form-group">
-            <div class="form-group-header">
-                <label>Theme</label>
-            </div>
-            <div class="form-group-body">
-                <div class="BtnGroup">
-                    <button aria-selected="true" class="BtnGroup-item btn btn-sm" id="theme-auto" type="button">
-                        Auto
-                    </button>
-                    <button class="BtnGroup-item btn btn-sm" id="theme-light" type="button">
-                        Light
-                    </button>
-                    <button class="BtnGroup-item btn btn-sm" id="theme-dark" type="button">
-                        Dark
-                    </button>
-                </div>
-            </div>
-        </div>
-        <h4><b>Output</b></h4>
-        <form>
-            <div class="form-group">
-                <div class="form-group-header">
-                    <label for="folder-name-custom-input">Game directory name</label>
-                </div>
-                <div class="form-group-body">
-                    <div class="BtnGroup">
-                        <button aria-selected="true" class="BtnGroup-item btn btn-sm" id="folder-name-appid"
-                                type="button">
-                            Manifest ID
-                        </button>
-                        <button class="BtnGroup-item btn btn-sm" id="folder-name-custom" type="button">
-                            Custom
-                        </button>
-                    </div>
-                    <br>
-                    <input class="form-control input-block mt-2" disabled
-                           id="folder-name-custom-input" placeholder="DepotDownloader output directory name"
-                           type="text">
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
+<body>
+<div id="root"></div>
+<script src="main.tsx" type="module"></script>
 </body>
-
 </html>
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,4 @@
+import { render } from "preact";
+import App from "./App";
+
+render(<App />, document.getElementById("root")!);
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -1,233 +0,0 @@
-import $ from "jquery";
-import {invoke} from "@tauri-apps/api/core";
-import {open as openDialog} from "@tauri-apps/plugin-dialog";
-import {openPath, openUrl} from "@tauri-apps/plugin-opener";
-import "@xterm/xterm/css/xterm.css";
-import {Terminal} from "@xterm/xterm";
-import { FitAddon } from "@xterm/addon-fit";
-import { listen } from "@tauri-apps/api/event";
-
-function setLoader(state: boolean) {
-	$("#busy").prop("hidden", !state);
-}
-
-
-function setLoadingState(state: boolean) {
-	$("#busy").prop("hidden", !state);
-
-	// loop through all buttons and input fields and disable them
-	for (const element of document.querySelectorAll("button, input")) {
-		if (element.closest("#settings-content")) continue;
-		(element as any).disabled = state;
-	}
-
-	// These elements need additional properties to be properly disabled
-	$("#pickpath").prop("ariaDisabled", state);
-	$("#downloadbtn").prop("ariaDisabled", state);
-
-	// disable internet buttons
-	for (const element of document.querySelectorAll("#internet-btns div")) {
-		element.ariaDisabled = String(state);
-	}
-}
-
-
-/// Returns list of IDs of invalid form fields
-const invalidFields = () => {
-	const form = document.forms[0];
-
-	const invalidFields: string[] = [];
-	for (const input of form) {
-		const inputElement = input as HTMLInputElement;
-		const valid = !(inputElement.value === "" && inputElement?.parentElement?.classList.contains("required"));
-		if (!valid) {
-			invalidFields.push(inputElement.id);
-		}
-	}
-	// console.debug(`[${invalidFields.join(", ")}] fields invalid/empty`);
-
-	return invalidFields;
-};
-
-const registerTerminal = async (terminalElement: HTMLElement) => {
-	const fitAddon = new FitAddon();
-	const term = new Terminal({
-		fontSize: 10,
-		cursorBlink: true,
-		rows: 100,
-		cols: 100,
-		theme: {
-			background: "rgb(47, 47, 47)",
-		},
-	});
-	term.loadAddon(fitAddon);
-	term.open(terminalElement);
-	async function fitTerminal() {
-		fitAddon.fit();
-		void invoke<string>("async_resize_pty", {
-			rows: term.rows,
-			cols: term.cols,
-		});
-	}
-
-	// Write data from pty into the terminal
-	function writeToTerminal(data: string) {
-		return new Promise<void>((r) => {
-			term.write(data, () => r());
-		});
-	}
-
-	// Write data from the terminal to the pty
-	function writeToPty(data: string) {
-		void invoke("async_write_to_pty", {
-			data,
-		});
-	}
-	term.onData(writeToPty);
-	addEventListener("resize", fitTerminal);
-	await fitTerminal();
-
-	async function readFromPty() {
-		const data = await invoke<string>("async_read_from_pty");
-
-		if (data) {
-			await writeToTerminal(data);
-		}
-		window.requestAnimationFrame(readFromPty);
-	}
-
-	window.requestAnimationFrame(readFromPty);
-};
-
-
-$(async () => {
-	await registerTerminal($("#xtermjs")[0]);
-	let downloadDirectory: string | null;
-
-	// Startup logic
-	setLoadingState(true);
-	await invoke("preload_vectum");
-	setLoadingState(false);
-
-
-	$("#pickpath").on("click", async () => {
-		// Open a dialog
-		downloadDirectory = await openDialog({
-			title: "Choose where to save the game download.",
-			multiple: false,
-			directory: true,
-			canCreateDirectories: true
-		});
-
-		if (downloadDirectory == null) {
-			// user cancelled
-			$("#checkpath").prop("ariaDisabled", true);
-			$("#checkpath").prop("disabled", true);
-			return;
-		}
-
-		$("#checkpath").prop("ariaDisabled", false);
-		$("#checkpath").prop("disabled", false);
-		$("#downloadbtn").prop("ariaDisabled", false);
-		$("#nopathwarning").prop("hidden", true);
-
-
-		console.log(downloadDirectory);
-	});
-
-	$("#checkpath").on("click", async () => {
-		console.log(`Checking path: ${downloadDirectory}`);
-
-		if (downloadDirectory != null) {
-			await openPath(downloadDirectory);
-		} else {
-			$("#checkpath").prop("ariaDisabled", true);
-		}
-	});
-
-	$("#downloadbtn").on("click", async () => {
-		console.log("download button clicked");
-
-		if (invalidFields().length > 0) {
-			// Loop through invalid fields. If there are any, make those "errored" and block the download button.
-			for (const id of invalidFields()) {
-				document.getElementById(id)?.parentElement?.classList.toggle("errored", true);
-			}
-			$("#emptywarning").prop("hidden", false);
-			$("#downloadbtn").prop("ariaDisabled", true);
-			return;
-		}
-
-		if (downloadDirectory == null) {
-			$("#nopathwarning").prop("hidden", false);
-			$("#downloadbtn").prop("ariaDisabled", true);
-			return;
-		}
-
-		setLoadingState(true);
-		$("#downloadingnotice").prop("hidden", false);
-		$("#busy").prop("hidden", true); // Don't show the loader this time.
-
-		const directoryNameChoice = $("#folder-name-custom-input").val();
-
-		// Output path w/ directories chosen is: {downloadDirectory}/{directoryNameChoice}
-		const vectumOptions = {
-			output_directory: downloadDirectory || null, // if not specified let backend choose a path.
-			directory_name: directoryNameChoice || null,
-		};
-
-		const steamDownload = {
-			// String || null translate to Some(String) || None
-			username: String($("#username").val()).trim() || null,
-			password: String($("#password").val()).trim() || null,
-			app_id: $("#appid").val(),
-			depot_id: $("#depotid").val(),
-			manifest_id: $("#manifestid").val(),
-			options: vectumOptions
-		};
-
-		// console.debug(steamDownload);
-		await invoke("download_depotdownloader");
-
-		$("#downloadingnotice").prop("hidden", true);
-		setLoadingState(false);
-
-		console.debug("DepotDownloader download process completed. Starting game download...");
-
-		setLoadingState(true);
-		await invoke("start_download", {steamDownload: steamDownload});
-		console.log("Send frontend data over to backend. Ready for next download.");
-	});
-
-	$("#settings-button").on("click", async () => {
-		$("#settings-surrounding").toggle();
-	});
-
-	$("#settings-surrounding").on("click", (event) => {
-		if (event.target === document.getElementById("settings-surrounding")) {
-			$("#settings-surrounding").toggle();
-		}
-	});
-
-	$("#opium-btn").on("click", () => {
-		openUrl("https://aphex.cc/index.html");
-	});
-
-
-	document.forms[0].addEventListener("input", (event) => {
-		// Remove errored class. This is a bad way to do it, but it works for now.
-		const target = event.target as HTMLElement;
-		target?.parentElement?.classList.toggle("errored", false);
-
-		// If there are no more invalid fields, hide the warning and enable the download button again
-		if (invalidFields().length === 0) {
-			$("#emptywarning").prop("hidden", true);
-			$("#downloadbtn").prop("ariaDisabled", false);
-		}
-	});
-});
-
-
-listen<string>("command-exited", () => {
-	setLoadingState(false);
-});
--- a/src/ts/preload.ts
+++ b/src/ts/preload.ts
@@ -1,34 +0,0 @@
-import {message} from "@tauri-apps/plugin-dialog";
-import {invoke} from "@tauri-apps/api/core";
-import $ from "jquery";
-import {openUrl} from "@tauri-apps/plugin-opener";
-
-
-$(async () => {
-	/* eslint-disable indent */
-	switch (await invoke("internet_connection")) {
-		case false: {
-			await message("No internet connection! Can't proceed.", {
-				title: "SteamDepotDownloaderGUI", kind: "error", okLabel: "Close"
-			});
-		}
-	}
-	/* eslint-enable indent */
-
-	// discord
-	$("#smbtn1").on("click", () => {
-		openUrl("https://discord.com/invite/3qCt4DT5qe");
-	});
-	// steamdb
-	$("#smbtn2").on("click", () => {
-		openUrl("https://steamdb.info/instantsearch");
-	});
-	// donate
-	$("#smbtn3").on("click", () => {
-		openUrl("https://paypal.me/onderkin");
-	});
-	// tutorial
-	$("#smbtn4").on("click", () => {
-		openUrl("https://youtube.com/playlist?list=PLRAjc5plLScj967hnsYX-I3Vjw9C1v7Ca");
-	});
-});
--- a/src/ts/settings.ts
+++ b/src/ts/settings.ts
@@ -1,47 +0,0 @@
-import {getVersion} from "@tauri-apps/api/app";
-import $ from "jquery";
-import {openUrl} from "@tauri-apps/plugin-opener";
-
-
-$(async () => {
-	$("#version-info").text(`v${await getVersion()}`);
-
-	$("#theme-auto").on("click", () => {
-		setTheme("auto");
-	});
-	$("#theme-light").on("click", () => {
-		setTheme("light");
-	});
-	$("#theme-dark").on("click", () => {
-		setTheme("dark");
-	});
-
-	$("#folder-name-appid").on("click", () => {
-		$("#folder-name-custom").attr("aria-selected", "false");
-		$("#folder-name-appid").attr("aria-selected", "true");
-		$("#folder-name-custom-input").prop("disabled", true);
-		$("#folder-name-custom-input").val("");
-	});
-
-	// todo: fix folder-name-custom-input not disabled on untouched app state
-
-	$("#folder-name-custom").on("click", () => {
-		$("#folder-name-appid").attr("aria-selected", "false");
-		$("#folder-name-custom").attr("aria-selected", "true");
-		$("#folder-name-custom-input").prop("disabled", false);
-	});
-
-	console.log(await getVersion());
-
-	$("#version-info").on("click", async () => {
-		await openUrl(`https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/v${await getVersion()}`);
-	});
-});
-
-function setTheme(theme: string) {
-	$("#theme-auto").attr("aria-selected", String(theme === "auto"));
-	$("#theme-light").attr("aria-selected", String(theme === "light"));
-	$("#theme-dark").attr("aria-selected", String(theme === "dark"));
-	$("#theme").attr("data-color-mode", theme);
-	localStorage.theme = theme;
-}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,25 +3,24 @@
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
+
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+
    /* Linting */
    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import {defineConfig} from "vite";
+import preact from "@preact/preset-vite";
 import tailwindcss from '@tailwindcss/vite'

 // @ts-expect-error process is a nodejs global
@@ -35,5 +36,6 @@ export default defineConfig(async () => ({
    },
    plugins: [
        tailwindcss(),
+        preact(),
    ]
 }));
Author	SHA1	Message	Date
Maarten van Heusden	e1cd216299	fix: add back pnpm lockfile	2026-02-04 21:12:13 +01:00
Maarten	6f112d0d42	feat: rewrite frontend w/ preact & tailwind (#305 ) * feat!: migrate to preact & tailwind * fix: eslint * feat: expand form * feat: implement terminal * feat: implement settings menu * refactor: colors and UX * fix: add Settings.tsx * refactor: color consistency * refactor: sort tailwind classes using rustywind * refactor: settings screen * refactor: more styling, expand conditionals * refactor: organize imports * docs: update with new image and gif * chore: set version to 3.2.0	2026-02-04 21:09:00 +01:00
Maarten van Heusden	855d31f6df	chore: set version to v3.1.0, disable maximizing	2026-02-02 09:50:00 +01:00
Maarten van Heusden	2995a28d5c	feat: clear terminal button, cleanup styling	2026-02-02 09:44:33 +01:00
Maarten	f12000df52	feat: integrated terminal (#303 ) * feat: integrated terminal * fix: settings modal * chore: make compatible for windows * feat: block app when downloading * docs: update README with new interface * refactor: cleanup main.ts styling	2026-02-01 17:42:22 +01:00