fix: add back pnpm lockfile

* 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

.eslintrc.yml

@@ -1,21 +0,0 @@
-env:
-  browser: true
-  es2021: true
-  node: true
-extends: eslint:recommended
-parserOptions:
-  ecmaVersion: latest
-  sourceType: module
-rules:
-  indent:
-    - error
-    - tab
-  linebreak-style:
-    - error
-    - unix
-  quotes:
-    - error
-    - double
-  semi:
-    - error
-    - never

.github/FUNDING.yml

@@ -1 +1 @@
-liberapay: barbapapa
+custom: https://paypal.me/onderkin

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,20 @@
+---
+name: Bug report
+about: Report a bug in this project
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**  
+A clear and concise description of the bug.
+
+**Is your bug report related to another bug report? Please describe.**  
+If yes, the issue number and an explanation of why the bug is related to this one.
+
+**Describe the solution you'd like**  
+A clear and concise description of what you want to happen.
+
+**Additional context**  
+Add any other context or screenshots about the bug report here.

.github/ISSUE_TEMPLATE/download_problem.md

@@ -0,0 +1,23 @@
+---
+name: Download problem
+about: Report a difficulty in downloading a game
+title: ''
+labels: question
+assignees: ''
+
+---
+
+**Describe the game you are trying to download**  
+A clear and concise description of the bug.
+**App ID:** <app id>
+**Depot ID:** <depot id>
+**Manifest ID:** <manifest id>
+
+**Show the error that DepotDownloader produces**  
+A screenshot or a copy-paste wrapped in a code-block (` ``` `) of the DepotDownloader terminal output
+
+**Do you own the game?**  
+If no, you probably can't download the game. You must own the game on Steam to be able to download it.
+
+**Additional context**  
+Add any other context or screenshots about the issue here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,19 +2,19 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
-labels: ''
+labels: feature
 assignees: ''
 
 ---
 
-**Is your feature request related to a problem? Please describe.**
+**Is your feature request related to a problem? Please describe.**  
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe the solution you'd like**
+**Describe the solution you'd like**  
 A clear and concise description of what you want to happen.
 
-**Describe alternatives you've considered**
+**Describe alternatives you've considered**  
 A clear and concise description of any alternative solutions or features you've considered.
 
-**Additional context**
+**Additional context**  
 Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -3,4 +3,23 @@ updates:
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "daily"
+      interval: "monthly"
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+    groups:
+      npm-deps:
+        patterns:
+          - "*"
+
+  - package-ecosystem: "cargo"
+    directory: "src-tauri/"
+    schedule:
+      interval: "monthly"
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+    groups:
+      cargo-deps:
+        patterns:
+          - "*"

.github/workflows/build.yml

@@ -1,45 +0,0 @@
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-  workflow_dispatch:
-
-jobs:
-  build:
-    runs-on: macos-latest
-    steps:
-      - name: Check out repositoty
-        uses: actions/checkout@v3
-
-      - name: Set up nodejs
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Set up npm project
-        run: npm install
-
-      - name: Build project
-        run: npm run buildall
-
-      - name: Move x64 exe
-        run: cp ./dist/SteamDepotDownloaderGUI*.exe ./SteamDepotDownloaderGUI-${{ github.run_number }}.exe
-
-      - name: Move x64 AppImage
-        run: cp `ls -d1 dist/* | grep -E "SteamDepotDownloaderGUI-[0-9]+\.[0-9]+\.[0-9]+\.AppImage"` ./SteamDepotDownloaderGUI-${{ github.run_number }}.AppImage
-
-      - name: Move x64 zip
-        run: cp `ls -d1 dist/* | grep -E "steamdepotdownloadergui-[0-9]+\.[0-9]+\.[0-9]+\.zip"` ./SteamDepotDownloaderGUI-${{ github.run_number }}.zip
-
-      - name: Move arm64 AppImage
-        run: cp `ls -d1 dist/* | grep -E "SteamDepotDownloaderGUI-[0-9]+\.[0-9]+\.[0-9]+\-arm64.AppImage"` ./SteamDepotDownloaderGUI-${{ github.run_number }}.AppImage
-
-      - name: Move arm64 zip
-        run: cp `ls -d1 dist/* | grep -E "steamdepotdownloadergui-[0-9]+\.[0-9]+\.[0-9]+\-arm64.zip"` ./SteamDepotDownloaderGUI-${{ github.run_number }}-arm64.zip
-
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: SteamDepotDownloaderGUI-${{ github.run_number }}
-          path: SteamDepotDownloaderGUI-${{ github.run_number }}*.*

.github/workflows/build_debug.yml

@@ -0,0 +1,101 @@
+name: 'build_debug'
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-tauri:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: 'macos-latest'
+            arch: 'aarch64'
+            args: '--target aarch64-apple-darwin --bundles dmg'
+          - platform: 'macos-latest'
+            arch: 'x86_64'
+            args: '--target x86_64-apple-darwin --bundles dmg'
+          - platform: 'ubuntu-22.04'
+            args: '--bundles appimage'
+          - platform: 'windows-latest'
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: './src-tauri -> target'
+
+      - name: install frontend dependencies
+        # If you don't have `beforeBuildCommand` configured you may want to build your frontend here too.
+        run: pnpm install # change this to npm or pnpm depending on which one you use.
+
+      - uses: tauri-apps/tauri-action@v0
+        id: build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: ${{ matrix.args }}
+          includeUpdaterJson: false
+          includeRelease: 'false'
+          includeDebug: 'true'
+
+      - name: fix JSON
+        if: matrix.platform != 'windows-latest'
+        id: truncate_paths
+        run: echo "paths=$(echo '${{ steps.build.outputs.artifactPaths }}' | sed 's/^..//' | sed 's/..$//')" >> $GITHUB_OUTPUT
+
+      - name: upload macos artifacts (M1)
+        if: matrix.platform == 'macos-latest' && matrix.arch == 'aarch64'
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-m1-artifacts
+          path: ${{ steps.truncate_paths.outputs.paths }}
+      
+      - name: upload macos artifacts (Intel)
+        if: matrix.platform == 'macos-latest' && matrix.arch == 'x86_64'
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-intel-artifacts
+          path: ${{ steps.truncate_paths.outputs.paths }}
+
+      - name: upload linux artifacts
+        if: matrix.platform == 'ubuntu-22.04'
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux-artifacts
+          path: ${{ steps.truncate_paths.outputs.paths }}
+
+      - name: upload windows artifacts
+        if: matrix.platform == 'windows-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows-artifacts
+          path: "./src-tauri/target/debug/bundle/*" # fck windows
+
+          

.github/workflows/build_release.yml

@@ -0,0 +1,99 @@
+name: 'build_release'
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-tauri:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: 'macos-latest'
+            arch: 'aarch64'
+            args: '--target aarch64-apple-darwin --bundles dmg'
+          - platform: 'macos-latest'
+            arch: 'x86_64'
+            args: '--target x86_64-apple-darwin --bundles dmg'
+          - platform: 'ubuntu-22.04'
+            args: '--bundles appimage'
+          - platform: 'windows-latest'
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: './src-tauri -> target'
+
+      - name: install frontend dependencies
+        # If you don't have `beforeBuildCommand` configured you may want to build your frontend here too.
+        run: pnpm install # change this to npm or pnpm depending on which one you use.
+
+      - uses: tauri-apps/tauri-action@v0
+        id: build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: ${{ matrix.args }}
+          includeUpdaterJson: false
+      
+      - name: fix JSON
+        if: matrix.platform != 'windows-latest'
+        id: truncate_paths
+        run: echo "paths=$(echo '${{ steps.build.outputs.artifactPaths }}' | sed 's/^..//' | sed 's/..$//')" >> $GITHUB_OUTPUT
+
+      - name: upload macos artifacts (M1)
+        if: matrix.platform == 'macos-latest' && matrix.arch == 'aarch64'
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-m1-artifacts
+          path: ${{ steps.truncate_paths.outputs.paths }}
+      
+      - name: upload macos artifacts (Intel)
+        if: matrix.platform == 'macos-latest' && matrix.arch == 'x86_64'
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-intel-artifacts
+          path: ${{ steps.truncate_paths.outputs.paths }}
+
+      - name: upload linux artifacts
+        if: matrix.platform == 'ubuntu-22.04'
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux-artifacts
+          path: ${{ steps.truncate_paths.outputs.paths }}
+
+      - name: upload windows artifacts
+        if: matrix.platform == 'windows-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows-artifacts
+          path: "./src-tauri/target/release/bundle/*" # fck windows
+
+          

.gitignore

@@ -4,138 +4,29 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
-.pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
+node_modules
 dist
+dist-ssr
+*.local
 
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.iml
 
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# VSCode directory for storing user settings
-.vscode
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-# IntelliJ
-.idea/
-
-# SteamDepotDownloaderGUI specific directories
-/depotdownloader/
-/games/
-*.zip
+# SteamDepotDownloaderGUI files
+src-tauri/depotdownloader
+src-tauri/*.zip
+src-tauri/*.exe
+**/DepotDownloader
+**/DepotDownloader.xml

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}

README.md

@@ -1,39 +1,74 @@
-<h1 align="center">SteamDepotDownloaderGUI</h1>
+<div align="center">
+<h1>SteamDepotDownloaderGUI</h1>
+<h4>A graphical wrapper for DepotDownloader, designed to make downloading older versions of Steam games easy.</h4>
 
-<p align="center">
-  <img alt="Project Status" src="https://img.shields.io/badge/status-maintained-blue" />
-  <img alt="GitHub all releases" src="https://img.shields.io/github/downloads/mmvanheusden/SteamDepotDownloaderGUI/total?color=orange&label=downloads">
-  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/mmvanheusden/SteamDepotDownloaderGUI?color=crimson">
-  <img alt="Visitor Count" src="https://visitor-badge.glitch.me/badge?page_id=mmvanheusden.SteamDepotDownloaderGUI">
-  <a href="https://www.codefactor.io/repository/github/mmvanheusden/steamdepotdownloadergui/overview/master"><img src="https://www.codefactor.io/repository/github/mmvanheusden/steamdepotdownloadergui/badge/master" alt="CodeFactor" /></a>
-</p>
-<p align="center">
-  <img alt="Screenshot" src="screenshot.png" />
-</p>
+→ <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>Downgrade Subnautica</b></a> ←
+</h4>
 
-<p align="center">SteamDepotDownloaderGUI is a graphical user interface for DepotDownloader.</p>
-<p align="center">You can download older versions of Steam games, useful for testing and speedrunners.</p>
+
+<a href="https://img.shields.io/github/last-commit/mmvanheusden/SteamDepotDownloaderGUI?color=crimson"><img src="https://img.shields.io/github/last-commit/mmvanheusden/SteamDepotDownloaderGUI?color=crimson" alt="Last contribution badge"></a>
+<a href="https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest"><img src="https://img.shields.io/badge/Download -ffbd03?style=for-the-badge&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAABd0lEQVRoge2XwUrDQBCGPz3Ee++2UBSvdsGbeLHeFX0lPQhei+8g2AfwSVREK+LJ1oqHUGjRQ7Z0laRJNtldKPPBwoTM7D9/sks2IAiCsKrsAK/AC7DtSmTd1cTAKbAJtIAzVyIuDURGvOFKxKUBL4iB0IiB0IiB0IiB0IiB0IiB0IiB0IgBoA08Ak+AKpCvdO6AGn416zBwDGyRGLljuQmlc9pAEzipKl6HgVtgpOMGSYOdlLyOvtfQ1yPgpgb9WlDAEPjRYwj0jet+yv0iy80ru8AHiyazxiewF6jHXPJMeG3+CoiBy5J1/5dTlWVzAXwD5yXrAJho4YlFbdqesFnzsa6PLWr/PD0bFPAA3GO/YXN7WMspLpLnktweVvooMTPiKDPLHabmLCtpmYF3I96v3E55Doz4zWaCaxYb6Bno4udNRMCR1pzr92wmagFfZH+UfI0xycHPim5gE2Pg0Lb5OU2SVzgAph6anmqtHhWevCAIgh9+AdLMtu/CZhHJAAAAAElFTkSuQmCC" alt="Download latest release badge"></a>
+<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/e2de938d-e54d-4f30-a405-b0d9d2d8e4d9" alt="Steam downgrader interface" />
+</div>
+
+## Features
+> ↓ *The downloader in action:*<br>
+> <img src="https://github.com/user-attachments/assets/7d8a97b8-79df-4c54-a74b-fb7b4b85913c" alt="Steam downgrader process" style="width: 25svw;"/>
+
+
+### Cross-platform support
+| 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]  
+> This GitHub repository is the only official place to download this software.  
+> If you have paid for this software, or downloaded this from a different place than here, **you are an idiot and at risk**.
 
-Download the latest release for your operating system
-from [GitHub](https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest).
 
-## Support
-If you need help, please open an issue.
+### Windows
+Download the [latest Windows release](https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest). There are multiple variants to choose from, but you are probably looking for the file that ends with **`.exe`**.
 
-**⚠️ No support will be provided for binaries downloaded from unofficial mirrors like softpedia. ⚠️**
 
-## Usage
+### Linux
+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.
 
-Enter everything you normally would in the DepotDownloader console.
+## Credits
+This software makes use of the following projects:
+- [**DepotDownloader**](https://github.com/SteamRE/DepotDownloader)
+- [Tauri](https://tauri.app)
+- [Preact](https://preactjs.com)
+- [Hubut Sans](https://github.com/github/hubot-sans) under [license](https://github.com/github/hubot-sans/blob/05d5ea150c20e6434485db8ffd2277ed18a9e911/LICENSE) 
 
-## Contributing
 
-If you want to contribute to SteamDepotDownloaderGUI, please make sure to follow
-the [contributing instructions and guidelines](contributing.md).
+## Donate
+You can donate [here](paypal.me/onderkin) or through the **donate** button in the interface.
 
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 
-Please make sure to keep code consistent and cross-platform compatible.
+## Contribute
+Every pull request is welcome! ;)  
+Please cleanup the code using:
+```console
+$ pnpm eslint --fix src/
+```
+Please also sort Tailwind classes using [RustyWind](https://github.com/avencera/rustywind).
 
+
+<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>

contributing.md

@@ -1,61 +0,0 @@
-# SteamDepotDownloaderGUI development information
-
-SteamDepotDownloaderGUI is a graphical user interface for DepotDownloader.
-
-It is written in Node.js and uses the [electron](https://electronjs.org/) framework.
-The CSS framework is [Primer](https://primer.style).
-
-## Setup development environment
-
-**Note that these instructions may differ from operating system to operating system.**
-
-* Install node.js, npm, and git on your computer.
-
-* Clone the repository.
-
-```bash
-git clone https://github.com/mmvanheusden/SteamDepotDownloaderGUI
-```
-
-* Move into the directory and install npm dependencies.
-
-```bash
-cd SteamDepotDownloaderGUI
-npm install
-```
-
-* **You are now ready to contribute**
-
-## Testing the application
-
-```bash
-npm start
-```
-
-## Building the application
-
-```bash
-npm run build
-```
-
-* If you are using macOS, you may build using the following command:
-
-```bash
-npm run buildall
-```
-
-This will build the application for all supported operating systems.
-
-## Contributing Guidelines
-
-Please make sure to keep code consistent and cross-platform compatible.
-
-After you made a change, clean-up the code using your favorite code editor and run the following command:
-
-```bash
-npx eslint *.js --fix
-```
-
-Please make sure your git commit message is descriptive and contains the changes you made.
-
-**Happy coding!**

downloader.js

@@ -1,84 +0,0 @@
-const {
-	preDownloadCheck,
-	download,
-	createCommand,
-	runCommand,
-	removeDir,
-	removeFile,
-	unzip
-} = require("./utils")
-
-function submitForm() {
-	// Check if the form is filled in and if dotnet is installed
-	preDownloadCheck().then(async function () {
-		document.getElementById("dotnetwarning").hidden = true
-		document.getElementById("emptywarning").hidden = true
-		console.info("dotnet found in PATH")
-
-		// Remove the old depotdownloader directory
-		await removeDir("depotdownloader")
-
-		// Download the DepotDownloader binary, so it doesn't have to be included in the source code
-		await download("https://github.com/SteamRE/DepotDownloader/releases/download/DepotDownloader_2.4.7/depotdownloader-2.4.7.zip")
-
-		// Unzip the DepotDownloader binary
-		await unzip("depotdownloader-2.4.7.zip", "depotdownloader")
-
-		// Clean up the old files
-		await removeFile("depotdownloader-2.4.7.zip")
-
-		// Run the final command
-		await runCommand(createCommand())
-	}).catch(function (error) {
-		if (error === "noDotnet") {
-			console.error("Dotnet not found in PATH")
-			document.getElementById("emptywarning").hidden = true
-			document.getElementById("dotnetwarning").hidden = false
-		} else if (error === "emptyField") {
-			console.error("Fill in all required fields")
-			document.getElementById("dotnetwarning").hidden = true
-			document.getElementById("emptywarning").hidden = false
-		}
-	})
-}
-
-function submitDotnet() {
-	const electron = require("electron")
-	const os = process.platform.toString()
-	document.getElementById("dotnetwarning").hidden = true
-	if (os.includes("win")) {
-		console.debug("Opened .NET download page for " + os.charAt(0).toUpperCase() + os.slice(1))
-		void electron.shell.openExternal("https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/sdk-6.0.301-windows-x64-installer")
-	}
-	if (os.includes("linux")) {
-		console.debug("Opened .NET download page for " + os.charAt(0).toUpperCase() + os.slice(1))
-		void electron.shell.openExternal("https://docs.microsoft.com/en-us/dotnet/core/install/linux")
-	}
-	if (os.includes("darwin")) {
-		console.debug("Opened .NET download page for" + os)
-		//TODO: Apple Silicon(ARM64) URL
-		void electron.shell.openExternal("https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/sdk-6.0.301-macos-x64-installer")
-	}
-}
-
-function openGitHubIssues() {
-	const electron = require("electron")
-	console.debug("Opened GitHub issues page")
-	void electron.shell.openExternal("https://github.com/mmvanheusden/SteamDepotDownloaderGUI/issues/new")
-}
-
-function openSteamDB() {
-	const electron = require("electron")
-	console.debug("Opened SteamDB instant search page")
-	void electron.shell.openExternal("https://steamdb.info/instantsearch/")
-}
-
-/* Everything below this line runs when the page is loaded */
-
-// Add event listeners to the buttons
-window.addEventListener("DOMContentLoaded", () => {
-	document.getElementById("dotnetalertbtn").addEventListener("click", submitDotnet)
-	document.getElementById("downloadbtn").addEventListener("click", submitForm)
-	document.getElementById("smbtn1").addEventListener("click", openGitHubIssues)
-	document.getElementById("smbtn2").addEventListener("click", openSteamDB)
-})

electron-builder.yml

@@ -1,32 +0,0 @@
-appId: steam.depot.downloader.gui
-productName: SteamDepotDownloaderGUI
-copyright: Copyright © 2022 mmvanheusden | This work is free. Licensed under the Do What The Fuck You Want To Public License
-
-linux:
-  executableName: SteamDepotDownloaderGUI
-  category: Utility;FileTools;
-  maintainer: mmvanheusden
-  target:
-    - target: AppImage
-      arch:
-        - x64
-        - arm64
-    - target: zip
-      arch:
-        - x64
-        - arm64
-
-# lmao mac building only works on mac
-mac:
-  category: public.app-category.utilities
-  target:
-    - target: dmg
-      arch:
-        - x64
-
-win:
-  legalTrademarks: Copyright © 2022 mmvanheusden | This work is free. Licensed under the Do What The Fuck You Want To Public License
-  target:
-    - target: portable
-      arch:
-        - x64

eslint.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+
+export default defineConfig(
+	tseslint.configs.recommendedTypeChecked,
+    tseslint.configs.stylisticTypeChecked,
+    {
+        languageOptions: {
+            parserOptions: {
+				project: 'tsconfig.json',
+			},
+        },
+        files: ["src/**"],
+        rules: {
+            "semi": ["error", "always"], // semicolons
+            "indent": ["error", "tab"], // tabs indents
+            "linebreak-style": ["error", "unix"],
+            "quotes": ["error", "double"],
+        },
+    },
+);

index.html

@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<!--  automatic dark mode :) -->
-<html class="anim-fade-in" data-color-mode="auto" data-dark-theme="dark" data-light-theme="light" lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta content="width=device-width, initial-scale=1" name="viewport"/>
-	<link href="https://unpkg.com/@primer/css@20.4.7/dist/primer.css" rel="stylesheet"/>
-	<title>SteamDepotDownloaderGUI</title>
-</head>
-<body>
-<script src="downloader.js"></script>
-<div class="mx-auto">
-	<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 class="f0-light text-center">Steam Depot Downloader</div>
-
-	<form id="theform">
-		<div class="form-group mx-3 mt-1">
-			<div class="form-group-header">
-				<label for="username">Username</label>
-			</div>
-			<input class="form-control input-block" id="username" type="text" placeholder="Leave empty for anonymous login"/>
-		</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" type="password" placeholder="Leave empty for anonymous login"/>
-		</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="form-group mx-3 mt-1 required">
-			<div class="form-group-header ">
-				<label for="osdropdown">Operating system</label>
-			</div>
-
-			<div aria-label="Select your OS/terminal here." class="form-group-body tooltipped tooltipped-n">
-				<select aria-label="Preference" class="form-select width-full" id="osdropdown">
-					<option disabled>Choose your OS</option>
-					<option>Windows</option>
-					<option disabled>macOS (NOT YET IMPLEMENTED)</option>
-					<option disabled>If you are using Linux</option>
-					<option disabled>Select your terminal</option>
-					<option>KDE Konsole</option>
-					<option>Gnome Terminal</option>
-					<option>Xfce Terminal</option>
-					<option>Terminator</option>
-					<option>Print command in console (CTRL-SHIFT-I)</option>
-				</select>
-			</div>
-		</div>
-	</form>
-
-	<div class="form-group mt-3 ml-3 mr-3">
-		<button class="btn btn-block btn-primary" id="downloadbtn">
-			<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>
-			Download
-		</button>
-	</div>
-
-	<div aria-label="Visit the GitHub issues website." class="btn btn-sm ml-3 tooltipped tooltipped-ne mb-1" id="smbtn1">
-		<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="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zM6.92 6.085c.081-.16.19-.299.34-.398.145-.097.371-.187.74-.187.28 0 .553.087.738.225A.613.613 0 019 6.25c0 .177-.04.264-.077.318a.956.956 0 01-.277.245c-.076.051-.158.1-.258.161l-.007.004a7.728 7.728 0 00-.313.195 2.416 2.416 0 00-.692.661.75.75 0 001.248.832.956.956 0 01.276-.245 6.3 6.3 0 01.26-.16l.006-.004c.093-.057.204-.123.313-.195.222-.149.487-.355.692-.662.214-.32.329-.702.329-1.15 0-.76-.36-1.348-.863-1.725A2.76 2.76 0 008 4c-.631 0-1.155.16-1.572.438-.413.276-.68.638-.849.977a.75.75 0 101.342.67z"
-				  fill-rule="evenodd"></path>
-		</svg>
-		Support
-	</div>
-
-	<div aria-label="Visit the SteamDB instant search website." class="btn btn-sm ml-1 tooltipped tooltipped-n mb-1"
-		 id="smbtn2">
-		<svg aria-hidden="true" class="octicon" height="14" viewBox="0 0 128 128" width="14"
-			 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>
-</body>
-</html>

main.js

@@ -1,45 +0,0 @@
-const {app, BrowserWindow} = require("electron")
-
-const createWindow = () => {
-	// Create the browser window.
-	const mainWindow = new BrowserWindow({
-		autoHideMenuBar: true,
-		resizable: false,
-		width: 430,
-		height: 590,
-		useContentSize: true,
-		maximizable: false,
-		webPreferences: {
-			nodeIntegration: true,
-			contextIsolation: false
-		}
-	})
-
-	// and load the index.html of the app.
-	mainWindow.loadFile("index.html")
-
-	// Open the DevTools for debugging, only if not in production.
-	if (!app.isPackaged) {
-		mainWindow.webContents.openDevTools({mode: "detach"})
-	}
-}
-
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-	createWindow()
-
-	app.on("activate", () => {
-		// On macOS it's common to re-create a window in the app when the
-		// dock icon is clicked and there are no other windows open.
-		if (BrowserWindow.getAllWindows().length === 0) createWindow()
-	})
-})
-
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on("window-all-closed", () => {
-	if (process.platform !== "darwin") app.quit()
-})

package.json

@@ -1,41 +1,34 @@
 {
-  "name": "steamdepotdownloadergui",
-  "version": "2.1.0",
-  "description": "DepotDownloader Electron frontend",
-  "main": "main.js",
+  "name": "vectum",
+  "private": true,
+  "version": "3.2.0",
+  "type": "module",
+  "license": "GPL-3.0-only",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "electron .",
-    "build": "electron-builder -c electron-builder.yml -wl -p never",
-    "buildall": "electron-builder -c electron-builder.yml -mwl -p never",
-    "buildlinux": "electron-builder -c electron-builder.yml -l -p never",
-    "buildwin": "electron-builder -c electron-builder.yml -w -p never",
-    "buildmacos": "electron-builder -c electron-builder.yml -m -p never"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mmvanheusden/SteamDepotDownloaderGUI.git"
-  },
-  "keywords": [
-    "electron",
-    "steam",
-    "depotdownloader",
-    "electron",
-    "gui"
-  ],
-  "author": "mmvanheusden",
-  "license": "GPL-3.0",
-  "bugs": {
-    "url": "https://github.com/mmvanheusden/SteamDepotDownloaderGUI/issues"
-  },
-  "homepage": "https://github.com/mmvanheusden/SteamDepotDownloaderGUI#readme",
-  "devDependencies": {
-    "electron": "^21.2.0",
-    "electron-builder": "^23.6.0",
-    "eslint": "^8.25.0"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
   },
   "dependencies": {
-    "elecron": "^0.0.1-security",
-    "follow-redirects": "^1.15.2"
-  }
+    "@tailwindcss/vite": "^4.1.18",
+    "@tauri-apps/api": "2.9.1",
+    "@tauri-apps/plugin-dialog": "2.6.0",
+    "@tauri-apps/plugin-opener": "~2.5.3",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.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",
+    "eslint": "^9.39.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1"
+  },
+  "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264"
 }

src-tauri/.gitignore

@@ -0,0 +1,16 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas
+
+
+# DepotDownloader
+depot/
+downloads/
+.DepotDownloader/
+Games/
+Depots/
+**/*.sh

src-tauri/Cargo.toml

@@ -0,0 +1,44 @@
+[package]
+name = "vectum"
+version = "3.2.0"
+description = "Download older versions of Steam games with DepotDownloader"
+authors = ["mmvanheusden"]
+edition = "2021"
+license = "GPL-3.0-only"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[build-dependencies]
+tauri-build = { version = "2.4.1", features = [] }
+
+[dependencies]
+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-dialog = "2.4.0"
+serde = { version = "1.0.219", features = ["derive"] }
+derive-getters = "0.5.0"
+reqwest = { version = "0.13.1",features = ["blocking"] }
+zip = "7.2.0"
+tauri-plugin-opener = "2"
+portable-pty = "0.9.0"
+
+
+
+# Bacon - https://dystroy.org/bacon/
+# Mold - https://github.com/rui314/mold#how-to-use
+# https://discord.com/channels/616186924390023171/731495028677148753/1254902668376150149
+[profile.dev]
+incremental = true
+opt-level = 1
+debug = 0
+
+[profile.dev.package."*"]
+opt-level = 2
+
+[profile.release]
+codegen-units = 1 # Allows LLVM to perform better optimization.
+lto = true # Enables link-time-optimizations.
+opt-level = 3 # Prioritizes small binary size. Use `3` if you prefer speed.
+panic = "abort" # Higher performance by disabling panic handlers.
+strip = true # Ensures debug symbols are removed.

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "dialog:default",
+    {
+      "identifier": "opener:allow-open-path",
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
+    },
+    {
+      "identifier": "opener:allow-open-url",
+      "allow": [
+        {
+          "url": "**"
+        }
+      ]
+    }
+  ]
+}

src-tauri/src/depotdownloader.rs

@@ -0,0 +1,111 @@
+use crate::get_os;
+use std::fs::File;
+use std::io::ErrorKind::AlreadyExists;
+use std::path::PathBuf;
+use std::{fs, io};
+use std::{io::Write, path::Path};
+
+pub static DEPOTDOWNLOADER_VERSION: &str = "3.4.0";
+
+
+/**
+See: [`test_get_depotdownloader_url()`]
+*/
+pub fn get_depotdownloader_url() -> String {
+    let arch = match std::env::consts::ARCH {
+        "x86_64" => "x64",
+        "aarch64" => "arm64",
+        "arm" => "arm",
+        _ => "x86_64",
+    };
+
+    format!("https://github.com/SteamRE/DepotDownloader/releases/download/DepotDownloader_{}/DepotDownloader-{}-{}.zip", DEPOTDOWNLOADER_VERSION, get_os(), arch)
+}
+
+/// Downloads a file. The file will be saved to the [`filename`] provided.
+pub async fn download_file(url: &str, filename: &Path) -> io::Result<()> {
+    if filename.exists() {
+        println!("DEBUG: Not downloading. File already exists.");
+        return Err(io::Error::from(AlreadyExists));
+    }
+
+    // Create any missing directories.
+    if let Some(p) = filename.parent() {
+        if !p.exists() {
+            fs::create_dir_all(p)?;
+        }
+    }
+
+    let mut file = File::create(filename)?;
+    let response = reqwest::get(url)
+        .await
+        .expect("Failed to contact internet.");
+
+    let content = response.bytes().await.unwrap();
+
+    file.write_all(&content)?;
+    Ok(())
+}
+
+/// Unzips DepotDownloader zips
+pub fn unzip(zip_file: &Path, working_dir: &PathBuf) -> io::Result<()> {
+    let file = File::open(zip_file)?;
+    let mut archive = zip::ZipArchive::new(file)?;
+
+    for i in 0..archive.len() {
+        let mut file = archive.by_index(i)?;
+        let outpath = match file.enclosed_name() {
+            Some(path) => working_dir.join(path),
+            None => continue,
+        };
+
+        println!("Extracted {} from archive.", outpath.display());
+
+        if let Some(p) = outpath.parent() {
+            if !p.exists() {
+                fs::create_dir_all(p)?;
+            }
+        }
+        let mut outfile = File::create(&outpath)?;
+        io::copy(&mut file, &mut outfile)?;
+
+        // Copy over permissions from enclosed file to extracted file on UNIX systems.
+        #[cfg(unix)]
+        {
+            use std::os::unix::fs::PermissionsExt;
+
+            // If the mode `file.unix_mode()` is something (not None), copy it over to the extracted file.
+            if let Some(mode) = file.unix_mode() {
+                fs::set_permissions(&outpath, fs::Permissions::from_mode(mode))?;
+            }
+
+            // Set executable permission.
+            if outpath.file_name().unwrap() == "DepotDownloader" {
+                fs::set_permissions(&outpath, fs::Permissions::from_mode(0o755))?;
+            }
+        }
+    }
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use reqwest::blocking;
+
+    #[test]
+    /// checks if all possible DepotDownloader URLs exist.
+    fn test_get_depotdownloader_url() {
+        for os in ["windows", "linux", "macos"].iter() {
+            for arch in ["x64", "arm64", "arm"].iter() {
+                if arch.eq(&"arm") && !os.eq(&"linux") {
+                    continue;
+                }
+                let url = format!("https://github.com/SteamRE/DepotDownloader/releases/download/DepotDownloader_{}/DepotDownloader-{}-{}.zip", DEPOTDOWNLOADER_VERSION, os, arch);
+                println!("Testing DepotDownloader URL: {}", url);
+
+                assert!(blocking::get(url).unwrap().status().is_success());
+            }
+        }
+    }
+}

src-tauri/src/main.rs

@@ -0,0 +1,167 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+mod depotdownloader;
+mod steam;
+mod terminal;
+
+use crate::depotdownloader::{get_depotdownloader_url, DEPOTDOWNLOADER_VERSION};
+use crate::terminal::{async_read_from_pty, async_resize_pty, async_write_to_pty};
+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};
+use std::time::Duration;
+use std::{env, thread};
+use tauri::async_runtime::Mutex;
+use tauri::{AppHandle, Emitter, Manager, State};
+
+struct AppState {
+    pty_pair: Arc<Mutex<PtyPair>>,
+    writer: Arc<Mutex<Box<dyn Write + Send>>>,
+    reader: Arc<Mutex<BufReader<Box<dyn Read + Send>>>>,
+}
+
+#[tauri::command]
+async fn start_download(steam_download: steam::SteamDownload, app: AppHandle, state: State<'_, AppState>) -> Result<(), String> {
+    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:");
+    println!("\t- Username: {}", steam_download.username().as_ref().unwrap_or(&String::from("Not provided")));
+    // println!("\t- Password: {}", steam_download.password().as_ref().unwrap_or(&String::from("Not provided"))); Don't log in prod lol
+    println!("\t- App ID: {}", steam_download.app_id());
+    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.display());
+    println!("----------------------------------------------------------\n");
+
+    /* Build the command and spawn it in our terminal */
+    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")]
+    cmd.env("TERM", "cygwin");
+    #[cfg(not(target_os = "windows"))]
+    cmd.env("TERM", "xterm-256color");
+
+    let mut child = state
+        .pty_pair
+        .lock()
+        .await
+        .slave
+        .spawn_command(cmd)
+        .map_err(|err| err.to_string())?;
+
+    thread::spawn(move || {
+        let status = child.wait().unwrap();
+        println!("Command exited with status: {status}");
+        app.emit("command-exited", {}).unwrap();
+        // exit(status.exit_code() as i32)
+    });
+    Ok(())
+}
+
+/// Downloads the DepotDownloader zip file from the internet based on the OS.
+#[tauri::command]
+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, Path::new(&zip_filename));
+
+
+    if let Err(e) = depotdownloader::download_file(url.as_str(), depotdownloader_zip.as_path()).await {
+        if e.kind() == AlreadyExists {
+            println!("DepotDownloader already exists. Skipping download.");
+        } else {
+            println!("Failed to download DepotDownloader: {}", e);
+        }
+        return;
+    } else {
+        println!("Downloaded DepotDownloader for {} to {}", env::consts::OS, depotdownloader_zip.display());
+    }
+
+    depotdownloader::unzip(depotdownloader_zip.as_path(), &working_dir).unwrap();
+    println!("Succesfully extracted DepotDownloader zip.");
+}
+
+/// Checks internet connectivity using Google
+#[tauri::command]
+async fn internet_connection() -> bool {
+    let client = reqwest::Client::builder().timeout(Duration::from_secs(5)).build().unwrap();
+
+    client.get("https://connectivitycheck.android.com/generate_204").send().await.is_ok()
+}
+
+
+pub fn get_os() -> &'static str {
+    match env::consts::OS {
+        "linux" => "linux",
+        "macos" => "macos",
+        "windows" => "windows",
+        _ => "unknown",
+    }
+}
+
+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 ??
+/*    if get_os() == "macos" {
+        let _ = fix_path_env::fix();
+        // let documents_dir = format!(
+        //     "{}/Documents/SteamDepotDownloaderGUI",
+        //     std::env::var_os("HOME").unwrap().to_str().unwrap()
+        // );
+        // let documents_dir = Path::new(&documents_dir);
+        // // println!("{}", documents_dir.display());
+
+        // std::fs::create_dir_all(documents_dir).unwrap();
+        // env::set_current_dir(documents_dir).unwrap();
+    }*/
+
+    /* Initialize the pty system */
+    let pty_system = native_pty_system();
+
+    let pty_pair = pty_system
+        .openpty(PtySize {
+            rows: 24,
+            cols: 80,
+            pixel_width: 0,
+            pixel_height: 0,
+        })
+        .unwrap();
+
+    let reader = pty_pair.master.try_clone_reader().unwrap();
+    let writer = pty_pair.master.take_writer().unwrap();
+
+    println!();
+    tauri::Builder::default()
+        .manage(AppState {
+            pty_pair: Arc::new(Mutex::new(pty_pair)),
+            writer: Arc::new(Mutex::new(writer)),
+            reader: Arc::new(Mutex::new(BufReader::new(reader))),
+        })
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_dialog::init())
+        .invoke_handler(tauri::generate_handler![
+            start_download,
+            download_depotdownloader,
+            internet_connection,
+            async_write_to_pty,
+            async_read_from_pty,
+            async_resize_pty,
+        ]).run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

src-tauri/src/steam.rs

@@ -0,0 +1,36 @@
+use derive_getters::Getters;
+use serde::Deserialize;
+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,
+    output_location: Option<PathBuf>,
+    output_directory_name: Option<String>
+}
+
+
+impl SteamDownload {
+    /// If a username or password are not provided, the download is considered anonymous
+    pub fn is_anonymous(&self) -> bool {
+        self.username.is_none() || self.password.is_none()
+    }
+
+    /// The directory where the download should happen
+    pub fn output_path(&self) -> String {
+        let sep = std::path::MAIN_SEPARATOR.to_string();
+        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),
+            (None, None) => format!(".{}{}", sep, &self.manifest_id)
+        }
+    }
+}

src-tauri/src/terminal.rs

@@ -0,0 +1,79 @@
+use std::io::BufRead;
+use std::path::PathBuf;
+use portable_pty::{CommandBuilder, PtySize};
+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(|_| ())
+}
+
+#[tauri::command]
+pub async fn async_read_from_pty(state: State<'_, AppState>) -> Result<Option<String>, ()> {
+    let mut reader = state.reader.lock().await;
+    let data = {
+        // Read all available text
+        let data = reader.fill_buf().map_err(|_| ())?;
+
+        // Send the data to the webview if necessary
+        if !data.is_empty() {
+            std::str::from_utf8(data)
+                .map(|v| Some(v.to_string()))
+                .map_err(|_| ())?
+        } else {
+            None
+        }
+    };
+
+    if let Some(data) = &data {
+        reader.consume(data.len());
+    }
+
+    Ok(data)
+}
+
+#[tauri::command]
+pub async fn async_resize_pty(rows: u16, cols: u16, state: State<'_, AppState>) -> Result<(), ()> {
+    state
+        .pty_pair
+        .lock()
+        .await
+        .master
+        .resize(PtySize {
+            rows,
+            cols,
+            ..Default::default()
+        })
+        .map_err(|_| ())
+}
+
+
+/// Creates the DepotDownloader command necessary to download the requested manifest.
+pub fn create_depotdownloader_command(steam_download: &SteamDownload, cwd: &PathBuf) -> CommandBuilder {
+    let depotdownloader_binary = if cfg!(windows) {
+        "DepotDownloader.exe"
+    } else {
+        "DepotDownloader"
+    };
+    
+    let program = cwd.join(depotdownloader_binary);
+    let mut command = CommandBuilder::new(program);
+    
+    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(["-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
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,37 @@
+{
+  "productName": "SteamDepotDownloaderGUI",
+  "version": "3.2.0",
+  "identifier": "net.oopium.depotdownloader",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "pnpm build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "withGlobalTauri": true,
+    "windows": [
+      {
+        "title": "SteamDepotDownloaderGUI",
+        "width": 900,
+        "height": 720,
+        "resizable": false,
+        "maximizable": false
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

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
+}

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>
+	);
+}

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;
+};
+

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>
+		</>
+
+	);
+}

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>
+		</>
+	);
+}

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>>({});

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;
+}

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1" name="viewport"/>
+    <title>SteamDepotDownloaderGUI</title>
+</head>
+
+<body>
+<div id="root"></div>
+<script src="main.tsx" type="module"></script>
+</body>
+</html>

src/main.tsx

@@ -0,0 +1,4 @@
+import { render } from "preact";
+import App from "./App";
+
+render(<App />, document.getElementById("root")!);

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "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": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

utils.js

@@ -1,218 +0,0 @@
-/**
- * Checks if dotnet is installed in the system path
- * @returns {Promise<unknown>} A promise that resolves to true if dotnet is installed, false otherwise
- */
-function preDownloadCheck() {
-	return new Promise((resolve, reject) => {
-		// Check if all fields are filled
-		const formInputs = document.forms["theform"]
-
-		let unfilledFields = 0
-		for (const input of formInputs) {
-			const isInvalid = input.value === "" && input.parentElement.classList.contains("required")
-			input.parentElement.classList.toggle("errored", isInvalid) // toggle the 'errored' class depending on if isInvalid is true or false.
-			if (isInvalid) unfilledFields++
-		}
-		if (unfilledFields > 0) {
-			reject("emptyField")
-			return
-		}
-
-		// Check if dotnet is installed, depending on the platform
-		if (process.platform.toString().includes("win")) {
-			// Windows
-			const {exec} = require("child_process")
-			const command = "dotnet.exe --version"
-			exec(command, function (error) {
-				if (error) {
-					reject("noDotnet")
-				} else {
-					resolve(true)
-				}
-			})
-		} else {
-			// Linux
-			const {exec} = require("child_process")
-			const command = "dotnet --version"
-			exec(command, function (error) {
-				if (error) {
-					reject("noDotnet")
-				} else {
-					resolve(true)
-				}
-			})
-		}
-	})
-}
-
-/**
- * Download a file from a url, saving it to the current directory (__dirname)
- * @param url The url to download from
- * @returns {Promise<unknown>} A promise that resolves when the download is finished, or rejects if something fails
- */
-function download(url) {
-	return new Promise((resolve, reject) => {
-		const {https} = require("follow-redirects") /* Using follow-redirects to follow redirects */
-		const fs = require("fs")
-		const path = require("path")
-		const file = fs.createWriteStream(platformpath() + path.sep + url.split("/").pop())
-		https.get(url, function (response) {
-			response.pipe(file)
-			file.on("finish", function () {
-				file.close()
-				resolve()
-			})
-			file.on("error", function (error) {
-				console.error(error)
-				reject(error)
-			})
-		})
-	})
-}
-
-/**
- * Removes a file from the current directory
- * @param file The filename to remove
- * @returns {Promise<unknown>} A promise that resolves when the file is removed, or rejects if something fails
- */
-function removeFile(file) {
-	return new Promise((resolve, reject) => {
-		const fs = require("fs")
-		const path = require("path")
-		fs.unlink(platformpath() + path.sep + file, function (error) {
-			if (error) {
-				reject(error)
-				console.error(error)
-			} else resolve()
-		})
-	})
-}
-
-/**
- * Removes a directory from the current directory
- * @param dir The directory to remove
- * @returns {Promise<unknown>} A promise that resolves when the directory is removed, or rejects if something fails
- */
-function removeDir(dir,) {
-	return new Promise((resolve, reject) => {
-		const fs = require("fs")
-		const path = require("path")
-		fs.rm(platformpath() + path.sep + dir, {recursive: true, force: true}, function (error) {
-			if (error) {
-				reject(error)
-				console.error(error)
-			} else resolve()
-		})
-	})
-}
-
-/**
- * Unzip a file to the current directory
- * @param file The file to unzip, preferably a .zip file
- * @param target The target directory to unzip to
- * @returns {Promise<unknown>} A promise that resolves when the unzip is complete, or rejects if something fails
- */
-function unzip(file, target) {
-	const {exec} = require("child_process")
-	const path = require("path")
-
-	return new Promise((resolve, reject) => {
-		if (process.platform.toString().includes("win")) {
-			const command = "powershell.exe -Command Expand-Archive -Path " + platformpath() + path.sep + file + " -Destination " + platformpath() + path.sep + target
-			exec(command, function (error) {
-				if (error) {
-					reject(error)
-					console.error(error)
-				} else resolve()
-			})
-		} else {
-			const command = "unzip -o " + file + " -d ./" + target + "/"
-			exec(command, function (error) {
-				if (error) {
-					reject(error)
-					console.error(error)
-				} else resolve()
-			})
-		}
-	})
-}
-
-/**
- * Creates a command based on the operating system/terminal being selected and the form values
- * @returns {string} The final command to run
- */
-const createCommand = () => {
-	// Import path so \ can be put in a string
-	const path = require("path")
-
-	// The values inputted by the user in the form
-	let username = document.forms["theform"]["username"].value
-	let password = document.forms["theform"]["password"].value
-	let appid = document.forms["theform"]["appid"].value
-	let depotid = document.forms["theform"]["depotid"].value
-	let manifestid = document.forms["theform"]["manifestid"].value
-	let osdropdown = document.getElementById("osdropdown")
-
-	// if either the username or password fields are empty, anonymous login is used
-	let anonymous = username === "" || password === ""
-
-	// build the username and password flags into one string, allowing for anonymous login
-	let userpass = anonymous ? "" : `-username ${username} -password ${password}`
-
-	const finalPath = platformpath() + path.sep + "games" + path.sep + appid
-
-	// The final command to run, returned by this function
-	if (osdropdown.options[osdropdown.selectedIndex].text.includes("Gnome")) {
-		return `gnome-terminal -e 'bash -c "dotnet ./depotdownloader/DepotDownloader.dll ${userpass} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${finalPath}/ -max-servers 50 -max-downloads 16";bash'`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Windows")) {
-		return `start cmd.exe /k dotnet ${platformpath()}${path.sep}depotdownloader${path.sep}DepotDownloader.dll ${userpass} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${finalPath}/ -max-servers 50 -max-downloads 16`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("macOS")) {
-		return `osascript -c 'tell application "Terminal" to do script 'dotnet ./depotdownloader/DepotDownloader.dll ${userpass} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${finalPath}/ -max-servers 50 -max-downloads 16'`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Konsole")) {
-		return `konsole --hold -e "dotnet ./depotdownloader/DepotDownloader.dll ${userpass} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${finalPath}/ -max-servers 50 -max-downloads 16"`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Xfce")) {
-		return `xfce4-terminal -H -e "dotnet ./depotdownloader/DepotDownloader.dll ${userpass} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${finalPath}/ -max-servers 50 -max-downloads 16"`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Terminator")) {
-		return `terminator -e 'bash -c "dotnet ./depotdownloader/DepotDownloader.dll ${userpass} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${finalPath}/ -max-servers 50 -max-downloads 16";bash'`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Print command")) {
-		console.log(`COPY-PASTE THE FOLLOWING INTO YOUR TERMINAL OF CHOICE:\n\ndotnet ${platformpath()}/depotdownloader/DepotDownloader.dll ${userpass} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${finalPath} -max-servers 50 -max-downloads 16`)
-		return "echo hello"
-	}
-}
-
-/**
- * Runs a command in a separate process, printing errors and debugging info to the console
- * @param command The command to run
- * @returns {Promise<unknown>} A promise that resolves when the command is complete or rejects if something fails
- */
-function runCommand(command) {
-	return new Promise((resolve, reject) => {
-		const {exec} = require("child_process")
-		exec(command, function (error) {
-			if (error) {
-				const msg = "Running command failed with error:\n" + error
-				reject(msg)
-			} else resolve()
-		})
-	})
-}
-
-/**
- * Returns the path where the actual program is being run from, depending on the operating system.
- * Because __dirname is inconsistent across operating systems, this function is used to get the correct path
- * @returns {string} The absolute path
- */
-const platformpath = () => {
-	if ((__dirname.includes("AppData") || __dirname.includes("Temp")) && process.platform.toString().includes("win")) {
-		// Windows portable exe
-		return process.env.PORTABLE_EXECUTABLE_DIR
-	} else if (__dirname.includes("/tmp/") && process.platform.toString().includes("linux")) {
-		// Linux AppImage
-		return process.cwd()
-	} else {
-		// .zip binary
-		return __dirname
-	}
-}
-
-module.exports = {preDownloadCheck, download, createCommand, runCommand, removeDir, removeFile, unzip, platformpath}

vite.config.ts

@@ -0,0 +1,41 @@
+import {defineConfig} from "vite";
+import preact from "@preact/preset-vite";
+import tailwindcss from '@tailwindcss/vite'
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => ({
+
+    // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+    //
+    // 1. prevent vite from obscuring rust errors
+    clearScreen: false,
+    // 2. tauri expects a fixed port, fail if that port is not available
+    server: {
+        port: 1420,
+        strictPort: true,
+        host: host || false,
+        hmr: host
+            ? {
+                protocol: "ws",
+                host,
+                port: 1421,
+            }
+            : undefined,
+        watch: {
+            // 3. tell vite to ignore watching `src-tauri`
+            ignored: ["**/src-tauri/**"],
+        }
+    },
+    root: "src",
+    build: {
+        outDir: '../dist',
+        emptyOutDir: true,
+    },
+    plugins: [
+        tailwindcss(),
+        preact(),
+    ]
+}));