chore(gamepads): Experimenting with gamepads and such implementations

Signed-off-by: quexeky <git@quexeky.dev>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,31 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: "[BUG]"
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. Arch Linux, Windows]
- - App Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**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**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/workflows/clippy.yml

@@ -1,23 +0,0 @@
-on: push
-name: Clippy check
-jobs:
-  clippy_check:
-    runs-on: ubuntu-24.04
-    permissions:
-      checks: write
-    steps:
-      - uses: actions/checkout@v1
-      - name: install dependencies (ubuntu only)
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev
-
-      - uses: actions-rs/toolchain@v1
-        with:
-            toolchain: nightly
-            components: clippy
-            override: true
-      - uses: actions-rs/clippy-check@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          args: --manifest-path ./src-tauri/Cargo.toml

.github/workflows/release.yml

@@ -1,104 +0,0 @@
-name: 'publish'
-
-on:
-  workflow_dispatch: {}
-  release:
-    types: [published]
-  # This can be used to automatically publish nightlies at UTC nighttime
-#  schedule:
-#    - cron: "0 2 * * *" # run at 2 AM UTC
-
-# This workflow will trigger on each push to the `release` branch to create or update a GitHub release, build your app, and upload the artifacts to the release.
-
-jobs:
-  publish-tauri:
-    permissions:
-      contents: write
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: 'macos-latest' # for Arm based macs (M1 and above).
-            args: '--target aarch64-apple-darwin'
-          - platform: 'macos-latest' # for Intel based macs.
-            args: '--target x86_64-apple-darwin'
-          - platform: 'ubuntu-22.04' # for Tauri v1 you could replace this with ubuntu-20.04.
-            args: ''
-          - platform: 'ubuntu-22.04-arm'
-            args: '--target aarch64-unknown-linux-gnu'
-          - platform: 'windows-latest'
-            args: ''
-
-    runs-on: ${{ matrix.platform }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          submodules: true
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-
-      - name: install Rust nightly
-        uses: dtolnay/rust-toolchain@nightly
-        with:
-          # Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds.
-          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
-
-      - name: install dependencies (ubuntu only)
-        if: matrix.platform == 'ubuntu-22.04' || matrix.platform == 'ubuntu-22.04-arm' # This must match the platform value defined above.
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
-        # webkitgtk 4.0 is for Tauri v1 - webkitgtk 4.1 is for Tauri v2.
-
-
-      - name: Import Apple Developer Certificate
-        if: matrix.platform == 'macos-latest'
-        env:
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          KEYCHAIN_PASSWORD: ${{ secrets.KEYCHAIN_PASSWORD }}
-        run: |
-          echo $APPLE_CERTIFICATE | base64 --decode > certificate.p12
-          security create-keychain -p "$KEYCHAIN_PASSWORD" build.keychain
-          security default-keychain -s build.keychain
-          security unlock-keychain -p "$KEYCHAIN_PASSWORD" build.keychain
-          security set-keychain-settings -t 3600 -u build.keychain
-          
-          curl https://droposs.org/drop.crt --output drop.pem
-          sudo security authorizationdb write com.apple.trust-settings.admin allow
-          sudo security add-trusted-cert -d -r trustRoot -k build.keychain -p codeSign -u -1 drop.pem
-          sudo security authorizationdb remove com.apple.trust-settings.admin
-
-          security import certificate.p12 -k build.keychain -P "$APPLE_CERTIFICATE_PASSWORD" -T /usr/bin/codesign
-          security set-key-partition-list -S apple-tool:,apple:,codesign: -s -k "$KEYCHAIN_PASSWORD" build.keychain
-          security find-identity -v -p codesigning build.keychain
-
-      - name: Verify Certificate
-        if: matrix.platform == 'macos-latest'
-        run: |
-          CERT_INFO=$(security find-identity -v -p codesigning build.keychain | grep "Drop OSS")
-          CERT_ID=$(echo "$CERT_INFO" | awk -F'"' '{print $2}')
-          echo "CERT_ID=$CERT_ID" >> $GITHUB_ENV
-          echo "Certificate imported. Using identity: $CERT_ID"
-
-      - name: install frontend dependencies
-        run: yarn install # change this to npm, pnpm or bun depending on which one you use.
-
-      - uses: tauri-apps/tauri-action@v0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ env.CERT_ID }}
-          NO_STRIP: true
-        with:
-          tagName: v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
-          releaseName: 'Auto-release v__VERSION__'
-          releaseBody: 'See the assets to download this version and install. This release was created automatically.'
-          releaseDraft: false
-          prerelease: true
-          args: ${{ matrix.args }}

.gitignore

@@ -26,7 +26,4 @@ dist-ssr
 .output
 
 src-tauri/flamegraph.svg
-src-tauri/perf*
-
-/*.AppImage
-/squashfs-root
+src-tauri/perf*

.gitlab-ci.yml

@@ -3,7 +3,7 @@ stages:
 
 build-linux:
   stage: build
-  image: ${CI_DEPENDENCY_PROXY_GROUP_IMAGE_PREFIX}/rustlang/rust:nightly
+  image: ${CI_DEPENDENCY_PROXY_GROUP_IMAGE_PREFIX}/rust:1.81.0-bookworm
   script:
     - apt-get update -y
     - apt-get install yarnpkg libsoup-3.0-0 libsoup-3.0-dev libatk-adaptor libgtk-3-dev libjavascriptcoregtk-4.1-dev libwebkit2gtk-4.1-dev -y
@@ -13,10 +13,9 @@ build-linux:
     - yarnpkg tauri build
     - cp src-tauri/target/release/bundle/deb/*.deb .
     - cp src-tauri/target/release/bundle/rpm/*.rpm .
-    - cp src-tauri/target/release/bundle/appimage/*.AppImage .
   artifacts:
     paths:
-      - "*.{deb,rpm,AppImage}"
+      - "*.{deb,rpm}"
 
 build-windows:
   stage: build

.gitmodules

@@ -1,6 +0,0 @@
-[submodule "src-tauri/tailscale/libtailscale"]
-	path = src-tauri/tailscale/libtailscale
-	url = https://github.com/tailscale/libtailscale.git
-[submodule "libs/drop-base"]
-	path = libs/drop-base
-	url = https://github.com/drop-oss/drop-base.git

.nvmrc

@@ -1 +0,0 @@
-23

README.md

@@ -2,19 +2,6 @@
 
 Drop app is the companion app for [Drop](https://github.com/Drop-OSS/drop). It uses a Tauri base with Nuxt 3 + TailwindCSS on top of it, so we can re-use components from the web UI.
 
-## Running
-Before setting up the drop app, be sure that you have a server set up. 
-The instructions for this can be found on the [Drop Docs](https://docs.droposs.org/docs/guides/quickstart)
-
-## Current features
-Currently supported are the following features:
-- Signin (with custom server)
-- Database registering & recovery
-- Dynamic library fetching from server
-- Installing & uninstalling games
-- Download progress monitoring
-- Launching / playing games
-
 ## Development
 
 Install dependencies with `yarn`
@@ -23,7 +10,7 @@ Run the app in development with `yarn tauri dev`. NVIDIA users on Linux, use she
 
 To manually specify the logging level, add the environment variable `RUST_LOG=[debug, info, warn, error]` to `yarn tauri dev`:
 
-e.g. `RUST_LOG=debug yarn tauri dev`
+e.g. `RUST_LOG=debug yarn taudi dev`
 
 ## Contributing
 Check the original [Drop repo](https://github.com/Drop-OSS/drop/blob/main/CONTRIBUTING.md) for contributing guidelines. 

app.vue

@@ -1,15 +1,18 @@
 <template>
-  <LoadingIndicator />
   <NuxtLayout class="select-none w-screen h-screen">
     <NuxtPage />
-    <ModalStack />
   </NuxtLayout>
+  <ModalStack />
 </template>
 
 <script setup lang="ts">
 import "~/composables/downloads.js";
+import "~/plugins"
+import "~/gamepad"
 
 import { invoke } from "@tauri-apps/api/core";
+import { AppStatus } from "~/types";
+import { listen } from "@tauri-apps/api/event";
 import { useAppState } from "./composables/app-state.js";
 import {
   initialNavigation,
@@ -19,26 +22,10 @@ import {
 const router = useRouter();
 
 const state = useAppState();
+state.value = JSON.parse(await invoke("fetch_state"));
 
-async function fetchState() {
-  try {
-    state.value = JSON.parse(await invoke("fetch_state"));
-    if (!state.value)
-      throw createError({
-        statusCode: 500,
-        statusMessage: `App state is: ${state.value}`,
-        fatal: true,
-      });
-  } catch (e) {
-    console.error("failed to parse state", e);
-    throw e;
-  }
-}
-await fetchState();
-
-// This is inefficient but apparently we do it lol
 router.beforeEach(async () => {
-  await fetchState();
+  state.value = JSON.parse(await invoke("fetch_state"));
 });
 
 setupHooks();

assets/main.scss

@@ -60,25 +60,3 @@ $helvetica: (
   src: url("/fonts/inter/InterVariable-Italic.ttf");
   font-style: italic;
 }
-
-/* ===== Scrollbar CSS ===== */
-/* Firefox */
-* {
-  scrollbar-width: 4px;
-  scrollbar-color: #52525b #00000000;
-}
-
-/* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-  width: 4px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: #52525b;
-  border-radius: 10px;
-  border: 3px solid #52525b;
-}

build.mjs

@@ -1,48 +0,0 @@
-import fs from "fs";
-import process from "process";
-import childProcess from "child_process";
-import createLogger from "pino";
-
-const OUTPUT = "./.output";
-const logger = createLogger({ transport: { target: "pino-pretty" } });
-
-async function spawn(exec, opts) {
-  const output = childProcess.spawn(exec, { ...opts, shell: true });
-  output.stdout.on("data", (data) => {
-    process.stdout.write(data);
-  });
-  output.stderr.on("data", (data) => {
-    process.stderr.write(data);
-  });
-
-  return await new Promise((resolve, reject) => {
-    output.on("error", (err) => reject(err));
-    output.on("exit", () => resolve());
-  });
-}
-
-const views = fs.readdirSync(".").filter((view) => {
-  const expectedPath = `./${view}/package.json`;
-  return fs.existsSync(expectedPath);
-});
-
-fs.mkdirSync(OUTPUT, { recursive: true });
-
-for (const view of views) {
-  const loggerChild = logger.child({});
-  process.chdir(`./${view}`);
-
-  loggerChild.info(`Install deps for "${view}"`);
-  await spawn("yarn");
-
-  loggerChild.info(`Building "${view}"`);
-  await spawn("yarn build", {
-    env: { ...process.env, NUXT_APP_BASE_URL: `/${view}/` },
-  });
-
-  process.chdir("..");
-
-  fs.cpSync(`./${view}/.output/public`, `${OUTPUT}/${view}`, {
-    recursive: true,
-  });
-}

changelog.md

@@ -1,292 +1,5 @@
 
 
-## Release 0.2.0-beta
-
-### Fixes
-- Re-enabled killing games #005bab2
-- fixed queue manipulation and waiting for downloads #01260f0
-- fix logic error in detecting dir #04368ff
-- absolute executable invoke #17759c4
-- don't crash download manager if multiple errors come in #21204de
-- clear stale data before requesting new #327628b
-- fixed completed indexes #39f2ebd
-- add file & line to console logs #4d8eadc
-- Games not launching due to string semantics #4ef49cc
-- Added error handling for chunk request errors #4fc0855
-- Chunk counting logic error #5ba151f
-- modal stack doesn't cover whole app #5db9ae5
-- use set_file_name instead of pushing to strings #60d0a48
-- use of completed signal, and pause/resuming #64d7f64
-- add message about nonce expiration #6a8d0af
-- Added "LIbrary Failed to Update" content to recover from library load fail #76bae3d
-- Restored RUST_LOG env functionality #7a0cf4f
-- initialise doesn't recreate default install dir #7a3841b
-- update routes for new server #7ab53f3
-- use vendored flag #7c8089e
-- fix poorly designed parsing for executables with spaces #7c90d2b
-- assorted fixes #89ea34c
-- Added Settings component #8aad64f
-- windows build #8d9234f
-- fix ugly scrollbars on edge webview #95f2174
-- windows shadow #9a8cc59
-- add better error message #9af0d08
-- Broken command invoke logic in settings/downloads.vue #9e29aa7
-- Accidentally was attempting to lock onto something that was already in scope #9e82a0b
-- fix incorrect error assumptions & update types #a17311a
-- Re-enabled uninstalling apps #a56ee25
-- types #af056c0
-- fix other metadata endpoints #c2f54c1
-- Re-enabled deep links #c3f6222
-- added console as an appender #d12bf15
-- remove unnecessary unstable feature #d5ac1b0
-- fix install button #d7b0302
-- stop loading on error #d83aae6
-- use unix timestamp to avoid invalid characters in filename #dafce24
-- Renamed game_id to id #dceaa56
-- use chrono library to generate timestamps #e22e6d8
-- clear stale data before requesting new #e72662c
-- fix scrollbars on edge webview #f09605a
-- update readme instructions #f0c47d8
-- Adding usize to completed_contexts_lock instead of &usize #f508186
-
-
-### Features
-- Game kill tauri command #01e6162
-- add debug page #02f8591
-- Add signout functionality (#16) #0a0d9d6
-- queue and library UIs #0a20139
-- add note about more install dirs #139bc0c
-- Using SerializeDisplay for better error management with Result #170fde5
-- add pre-launch log to file #17f8d76
-- Added option to change root directory #1aa52c0
-- add speed and time remaining information #1f899ec
-- lockless tracking of downloaded chunks #2183585
-- quit button #239b8d5
-- use shift or DEBUG RUST_LOG to show Debug Info #245a84d
-- Added database corruption dialog #25ba200
-- only allow downloads for supported platforms #269dcbb
-- add installed ui in the library menu #2c8164e
-- added file-based logging #2d4a7e8
-- automatically fetch remote data if not available #2dedfbb
-- Added database recovery #32ae7d5
-- ability to add more download dirs #384f7a5
-- re-enable checksums #3ca87fc
-- background processes and close/open menu #3d60fd5
-- launch games with log files #3f71149
-- Download cancelling #450bca9
-- refactoring and error message #469a2d6
-- Added UI to change download threads #4e93eb4
-- Made save button include user feedback & only allow numeric characters #53234d2
-- download widget and queue fix #532d13e
-- Pausing and resuming game downloads #55b7921
-- Allow settings to update UI using fetch_settings command #5bb04da
-- temporary queue ui and flamegraph instructions #5cbeb3b
-- Added DownloadThreadControl struct #5e05e68
-- Added max_download_threads setting and separated settings from db #5ea47d7
-- Added generic download manager #6159319
-- Added AgentInterfaceData to get information about all downloads in queue #63c3cc1
-- debug queue interface #671d45f
-- reduce scope of download agent #6a38ea3
-- Added multi-argument game launch and setup support #6ad3837
-- shared child with stop command #6b96e40
-- Added function to take and set any game state #6bc6482
-- Added line numbers to file logging and highlighting to console #7c3140e
-- Separated chunk updates into individual counters #7d3c601
-- Ensure that any database issues are resolved by standalone functions #7d4651d
-- ui to install games #8670bca
-- Implemented spawning with umu (using umu-wrapper-lib) #88b2505
-- offer manual signin #949acfc
-- better process management, including running state #a135b13
-- Added Download Manager #a1ada07
-- retry connnection on server unavailable #a53d838
-- finish download dir CRUD interface #a580a46
-- better download manager errors + modal #ad92dbe
-- syncs state to disk to persist across reboots #b556842
-- prevent default context menu and emit event on elements #c560656
-- initial creation and logo update #d9a51cf
-- Added manifest.json utility for persistent download progress #d9d0122
-- game uninstalling & partial compat #dd7f567
-- combined db and download interface improvements #de52dac
-- update db state with ui and emit events #e4df4eb
-- Generic function to set download state #f10d92d
-- Convert DownloadThreadControlFlag to AtomicBool #f25bfed
-- add note about more install dirs #f4ac1c8
-- Added rolling progress window #fd30b3e
-
-
-### Other Changes
-- quexeky <git@quexeky.dev> 
-- Convert DATA_ROOT_DIR to Mutex #00b7179
-- Converting DB access to a trait #01b092c
-- Updated changelog #022330b
-- Progress on cleanup and exit #0381b8b
-- library ui #03fa364
-- Scoping changes and removing qualifications #046ba64
-- Moved all files relevant to game downloads to their own directory #06d1e9e
-- SLowly integrating game_download into the FE. Started with using the manifest minimal example in the server (#1) #07379b2
-- Ran cargo clippy & moved DownloadManagerInterface #075d6ec
-- Made logging systems match #0a1dddf
-- Some easy cleanup of the download manager #0a2ac25
-- client now fetches user information from Drop server #0c0cfeb
-- Included in AppStatus (Also trying to link to Issue #1)
-- Accidentally serialized AppStatus and broke everything :/ #10791ed
-- Removed debugging statements #10c8344
-- Wrappers are the bane of my existence. Also here's the download cancelling logic. #13df631
-- Merge branch 'error-handling' #1520471
-- Updated README.md #165a967
-- Removed unnecessary dependencies #1724449
-- merge(download-manager) -> 'main' #172d6b0
-- More refactoring and renaming camelCase struct definitions to snake_case #1742793
-- General cleanup #182361e
-- Delete pages/library.vue #1861659
-- progress on more precise download control #18b9149
-- Allowing some dead code features because they are there for future use (potentially) #191e62c
-- Ensure that Downloadable is also send and sync #1a89135
-- I think that download queuing is working #1ab61c8
-- auth initiate, database and more #22b1aee
-- Update .gitlab-ci.yml" #2307704
-- More fleshing out on how specifically game downloads will work (#1) #23137dd
-- Removed utils.rs #270bc8b
-- Fixing some references to "id" vs "game_id" #27e5a8e
-- More cleanup after cargo clippy #2822b7a
-- Updated contributing link #2aa5b9c
-- More fleshing out on how specifically game downloads will work #2b90de9
-- Cleaning up downloads playing and pausing #2c7b5fb
-- fixed multi-chunk downloads #2ec351f
-- Clippy refactoring #2efe304
-- remove unpacker mod statement #32067c0
-- Progress on adding tools #3299c71
-- Fixed bug with bad initial loading into store instead of auth #3923acf
-- add nvm rc #3ccd444
-- partial download manager #3dbf5ab
-- Update .gitlab-ci.yml with artifacts #3e10f17
-- Removed tools/ #3eda979
-- Downloads should be fixed now #403ca65
-- transient vs synced state now defined #42c0198
-- added adenmgb's autostart feature #472eb1d
-- better download defaults #4779383
-- Progress on downloads. Currently working on parsing functions to be run asynchronously #496c6a5
-- Ran cargo clippy & cargo fmt #4983b25
-- handshakes #4bb33c8
-- Convert DOWNLOAD_MAX_THREADS to const #4fc13a1
-- Merge branch 'downloads' #50ed841
-- Moved generateGameMeta.ts to composables, using PathBuf instead of String for install_dirs #50f37fd
-- Added time debugging and fixed logging formatting #5243694
-- Clippy changes #553bc37
-- Queue is running game downloads sequentially now #5564d23
-- migrate to new droplet ca system #556898f
-- Add LICENSE #57a5737
-- ran cargo clippy & cargo fmt #5e3d26b
-- my own take on some BASED design decisions #5ed0833
-- cleanup and game UI beginnings #5ef6b8e
-- Progress on terminator #5f5cbd0
-- Implement better error system and segregate errors and commands (#23) #604d5b5
-- moved to completed index arr to help serialization #64ebc19
-- Ran cargo clippy & cargo fmt #653717e
-- Removed all references to anything outside of the DownloadManager #6568faa
-- Merge remote-tracking branch 'origin/main' #68ca4a7
-- swap file name and to binary encoding #694f2fd
-- chore(polish & cleanup) #6cc0c67
-- Update .gitlab-ci.yml #6d7630e
-- Moved some variable declarations outside of the spawned download thread #6ea4cf2
-- Encoding game IDs and versions #6ef444e
-- restructing and renaming #7049673
-- Converted to md5 #706f525
-- Merge branch 'main' into downloads #714b968
-- Semantic naming changes #725f16b
-- Abstracted queue system #76b0975
-- Moved manifest and stored_manifest to download_manager" #78149bb
-- README update #78fc668
-- Ensured everything is serializing/deserializing to camelCase #7a95b7f
-- fixed some of quexeky's BASED design decisions #7e3da04
-- Progress checker works #7fec00d
-- Progress on refactoring and abiding by cargo clippy #816b427
-- Added GAME_PAUSE_CHECK_INTERVAL value #8204795
-- Ran cargo clippy & fmt #82804eb
-- update metadata #85a0899
-- Renamed most instances of "game" outside of actual game downloads #881fcc6
-- Debugging & starting work on parsing manifest #89d2814
-- slight ui/ux fixes and updates to auth protocol #8a2d23d
-- Removed Arc requirement for DownloadableMetadata #8be1dd4
-- compliant with new APIs #8f6f184
-- Ran cargo clippy & cargo fmt #9272970
-- Added rolling_progress_updates.rs #9369ff1
-- Add files via upload #93b8b83
-- More refining info!() statements #94cf678
-- fixed windows issues #959dad3
-- Starting p2p progress #97bb1fa
-- Game downloads from the client are working (multithreaded) by parsing in gameID, GameVersion, and maxThreads from FE (#1) #984472e
-- Version bump & appimage build #9897698
-- Some progress on thread terminations #99beca4
-- rename files to what they contain #99c8b39
-- Created separate function to generate requests #9a184a8
-- cleanup of lib and toml #9b1cfa7
-- refactor for generic way to implement cross platform launchers #9ea2aa4
-- Updated logging format #a213765
-- fix(windows build) #a24cc8a
-- Added ToolDownloadAgent #a2e63aa
-- copy direct to disk #a628fc1
-- Moved manifest and stored_manifest to download_manager #a846eed
-- adds nvm rc! #a881d8e
-- Reordered DownloadThreadControlFlag to agree with From<bool> #ab606e8
-- ci/cd and patches for windows builds #ac1c3b6
-- patch for not draggable windows during setup #ac66b20
-- another stage of client authentication #ae4c65b
-- Renamed GameDonwloadError to ApplicationDownloadError and moved #aed58e4
-- Progress on write speeds & added debug statements #b065e10
-- Updated logging #b3963b6
-- Created file settings.rs #b47b7ea
-- Added Downloadable trait and replaced references to GameDownloadAgent #b4d70a3
-- Update .gitlab-ci.yml #b6a54c0
-- Moved download manager to separate directory #b6c64e5
-- Ran cargo fmt #b8cf44c
-- Imported appropriate logging macros #b99ff67
-- Merge branch 'main' into download-manager #bb60942
-- Ran cargo clippy & cargo fmt #bd3deac
-- beginnings of game state management #bf46dec
-- Update Cargo.toml #c1fb39e
-- migrated unpacking to rust zstd to conform with droplet #c46c54b
-- More progress on checksums #c51e761
-- Delete pages/library.vue #c722a54
-- Merge branch 'downloads' (again) #c748aec
-- migrate to nuxt and groundwork #c957744
-- More debugging because apparently checksums are the bane of my existence. But it works and I was just an idiot #c9d9d2e
-- Fully separate & generic download manager #cac612b
-- Progress on rolling progress window #cf19477
-- Ensured that all logs start with lowercase capital and have no trailing punctuation #cfc9d13
-- Validated that loading data works #d21b1d2
-- Mostly finished with checksums. Just merging main in at the same time #d39e7cb
-- Ran cargo clippy #dcb1564
-- Add files via upload #dcb2c0f
-- Theoretically adding queue support and optimistic manifest downloading (#1). Needs tests when actual functions are implemented #dcd8fa8
-- Merge remote-tracking branch 'origin/downloads' into downloads #dd23ca8
-- Debugging line #ddc585d
-- Re-enabled closing the window and some more renaming #defba51
-- drop no longer freaks out if server is unavailable on startup #df88395
-- Apply stashed changes #e0ea8c9
-- Merge remote-tracking branch 'origin/downloads' into downloads #e4e605b
-- convert to more sensible permission schema #e504c00
-- Update on GameDownload #e71e4cf
-- reorganisation, cleanup and new nonce protocol #e828bca
-- rustix fs feature #e9805a8
-- Added manage_go_signal command #ea70ec9
-- Drop will no longer crash when the server goes down #eb3311a
-- Made all errors type-based #ec2f414
-- Added description on how the DownloadManager works #f029cbf
-- Using more appropriate logging statements #f183a9d
-- remove unnecessary compat code (#20) #f1c8bbf
-- Manifests are now being parsed successfully #f28c880
-- Removed tests/ #f29e989
-- I think that downloads are working. Need to test and set decent file locations now #f388237
-- Just debugging tauri's damn Sync command features #f60ca2b
-- fixes and patches for merged changes #f6476bc
-- Added manage_queue_signal #f64782e
-- initial commit #f6cd7c3
-- Update .gitlab-ci.yml #fc6bab9
-
-
-_changelog generated by_ [go-conventional-commits](https://github.com/joselitofilho/go-conventional-commits)
-
 ## Release 0.1.0-beta
 
 ### Fixes

components/GameStatusButton.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="inline-flex divide-x divide-zinc-900">
+    <button type="button" @click="() => buttonActions[props.status.type]()" :class="[
+      styles[props.status.type],
+      showDropdown ? 'rounded-l-md' : 'rounded-md',
+      'inline-flex uppercase font-display items-center gap-x-2 px-4 py-3 text-md font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+    ]">
+      <component :is="buttonIcons[props.status.type]" class="-mr-0.5 size-5" aria-hidden="true" />
+      {{ buttonNames[props.status.type] }}
+    </button>
+    <Menu v-if="showDropdown" as="div" class="relative inline-block text-left grow">
+      <div class="h-full">
+        <MenuButton :class="[
+          styles[props.status.type],
+          'inline-flex w-full h-full justify-center items-center rounded-r-md px-1 py-2 text-sm font-semibold shadow-sm'
+        ]">
+          <ChevronDownIcon class="size-5" aria-hidden="true" />
+        </MenuButton>
+      </div>
+
+      <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+        <MenuItems
+          class="absolute right-0 z-50 mt-2 w-32 origin-top-right rounded-md bg-zinc-900 shadow-lg ring-1 ring-zinc-100/5 focus:outline-none">
+          <div class="py-1">
+            <MenuItem v-slot="{ active }">
+            <button @click="() => emit('uninstall')"
+              :class="[active ? 'bg-zinc-800 text-zinc-100 outline-none' : 'text-zinc-400', 'w-full block px-4 py-2 text-sm inline-flex justify-between']">Uninstall
+              <TrashIcon class="size-5" />
+            </button>
+            </MenuItem>
+          </div>
+        </MenuItems>
+      </transition>
+    </Menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ArrowDownTrayIcon,
+  ChevronDownIcon,
+  PlayIcon,
+  QueueListIcon,
+  TrashIcon,
+  WrenchIcon,
+} from "@heroicons/vue/20/solid";
+
+import type { Component } from "vue";
+import { GameStatusEnum, type GameStatus } from "~/types.js";
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+
+const props = defineProps<{ status: GameStatus }>();
+const emit = defineEmits<{
+  (e: "install"): void;
+  (e: "launch"): void;
+  (e: "queue"): void;
+  (e: "uninstall"): void;
+}>();
+
+const showDropdown = computed(() => props.status.type === GameStatusEnum.Installed || props.status.type === GameStatusEnum.SetupRequired);
+
+const styles: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Remote]: "bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600",
+  [GameStatusEnum.Queued]: "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700",
+  [GameStatusEnum.Downloading]: "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700",
+  [GameStatusEnum.SetupRequired]: "bg-yellow-600 text-white hover:bg-yellow-500 focus-visible:outline-yellow-600",
+  [GameStatusEnum.Installed]: "bg-green-600 text-white hover:bg-green-500 focus-visible:outline-green-600",
+  [GameStatusEnum.Updating]: "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700",
+  [GameStatusEnum.Uninstalling]: "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700",
+  [GameStatusEnum.Running]: "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700"
+};
+
+const buttonNames: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Remote]: "Install",
+  [GameStatusEnum.Queued]: "Queued",
+  [GameStatusEnum.Downloading]: "Downloading",
+  [GameStatusEnum.SetupRequired]: "Setup",
+  [GameStatusEnum.Installed]: "Play",
+  [GameStatusEnum.Updating]: "Updating",
+  [GameStatusEnum.Uninstalling]: "Uninstalling",
+  [GameStatusEnum.Running]: "Running"
+};
+
+const buttonIcons: { [key in GameStatusEnum]: Component } = {
+  [GameStatusEnum.Remote]: ArrowDownTrayIcon,
+  [GameStatusEnum.Queued]: QueueListIcon,
+  [GameStatusEnum.Downloading]: ArrowDownTrayIcon,
+  [GameStatusEnum.SetupRequired]: WrenchIcon,
+  [GameStatusEnum.Installed]: PlayIcon,
+  [GameStatusEnum.Updating]: ArrowDownTrayIcon,
+  [GameStatusEnum.Uninstalling]: TrashIcon,
+  [GameStatusEnum.Running]: PlayIcon
+};
+
+const buttonActions: { [key in GameStatusEnum]: () => void } = {
+  [GameStatusEnum.Remote]: () => emit("install"),
+  [GameStatusEnum.Queued]: () => emit("queue"),
+  [GameStatusEnum.Downloading]: () => emit("queue"),
+  [GameStatusEnum.SetupRequired]: () => emit("launch"),
+  [GameStatusEnum.Installed]: () => emit("launch"),
+  [GameStatusEnum.Updating]: () => emit("queue"),
+  [GameStatusEnum.Uninstalling]: () => { },
+  [GameStatusEnum.Running]: () => { }
+};
+</script>

components/Header.vue

@@ -11,7 +11,7 @@
               v-for="(nav, navIdx) in navigation"
               :class="[
                 'transition  uppercase font-display font-semibold text-md',
-                navIdx === currentNavigation
+                navIdx === currentPageIndex
                   ? 'text-zinc-100'
                   : 'text-zinc-400 hover:text-zinc-200',
               ]"
@@ -28,7 +28,9 @@
       />
       <div class="inline-flex items-center">
         <ol class="inline-flex gap-3">
-          <HeaderQueueWidget :object="currentQueueObject" />
+          <HeaderQueueWidget
+            :object="currentQueueObject"
+          />
           <li v-for="(item, itemIdx) in quickActions">
             <HeaderWidget
               @click="item.action"
@@ -37,23 +39,21 @@
               <component class="h-5" :is="item.icon" />
             </HeaderWidget>
           </li>
-          <OfflineHeaderWidget v-if="state?.status === AppStatus.Offline" />
           <HeaderUserWidget />
         </ol>
       </div>
     </div>
-    <WindowControl  />
+    <WindowControl class="h-16 w-16 p-4" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
-import { AppStatus, type NavigationItem, type QuickActionNav } from "../types";
+import type { NavigationItem, QuickActionNav } from "../types";
 import HeaderWidget from "./HeaderWidget.vue";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
 const window = getCurrentWindow();
-const state = useAppState();
 
 const navigation: Array<NavigationItem> = [
   {
@@ -78,7 +78,7 @@ const navigation: Array<NavigationItem> = [
   },
 ];
 
-const { currentNavigation } = useCurrentNavigationIndex(navigation);
+const currentPageIndex = useCurrentNavigationIndex(navigation);
 
 const quickActions: Array<QuickActionNav> = [
   {

components/HeaderButton.vue

@@ -0,0 +1,5 @@
+<template>
+    <button class="transition h-10 w-10 text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100 p-2">
+        <slot />
+    </button>
+</template>

components/HeaderUserWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <Menu v-if="state?.user" as="div" class="relative inline-block">
+  <Menu v-if="state.user" as="div" class="relative inline-block">
     <MenuButton>
       <HeaderWidget>
         <div class="inline-flex items-center text-zinc-300 hover:text-white">
@@ -23,7 +23,7 @@
       <MenuItems
         class="absolute bg-zinc-900 right-0 top-10 z-50 w-56 origin-top-right focus:outline-none shadow-md"
       >
-        <div class="flex-col gap-y-2">
+        <PanelWidget class="flex-col gap-y-2">
           <NuxtLink
             to="/id/me"
             class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
@@ -49,23 +49,20 @@
                 Admin Dashboard
               </a>
             </MenuItem>
-            <MenuItem
-              v-for="(nav, navIdx) in navigation"
-              v-slot="{ active, close }"
-            >
+            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active, close }">
               <button
-                @click="() => navigate(close, nav)"
+              @click="() => navigate(close, nav)"
                 :href="nav.route"
                 :class="[
                   active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
                   'transition text-left block px-4 py-2 text-sm',
                 ]"
               >
-                {{ nav.label }}
-              </button>
+                {{ nav.label }}</button
+              >
             </MenuItem>
           </div>
-        </div>
+        </PanelWidget>
       </MenuItems>
     </transition>
   </Menu>
@@ -83,22 +80,27 @@ const open = ref(false);
 const router = useRouter();
 router.afterEach(() => {
   open.value = false;
-});
+})
 
 const state = useAppState();
-const profilePictureUrl: string = await useObject(
-  state.value?.user?.profilePictureObjectId ?? ""
-);
+const profilePictureUrl: string = await invoke("gen_drop_url", {
+  path: `/api/v1/object/${state.value.user?.profilePicture}`,
+});
 const adminUrl: string = await invoke("gen_drop_url", {
   path: "/admin",
 });
 
-function navigate(close: () => any, to: NavigationItem) {
+function navigate(close: () => any, to: NavigationItem){
   close();
   router.push(to.route);
 }
 
 const navigation: NavigationItem[] = [
+  {
+    label: "Account settings",
+    route: "/account",
+    prefix: "",
+  },
   {
     label: "App settings",
     route: "/settings",
@@ -108,6 +110,6 @@ const navigation: NavigationItem[] = [
     label: "Quit Drop",
     route: "/quit",
     prefix: "",
-  },
-];
+  }
+]
 </script>

components/InitiateAuthModule.vue

@@ -13,7 +13,11 @@
       <div class="max-w-lg">
         <slot />
         <div class="mt-10">
-          <div>
+          <button
+            @click="() => authWrapper_wrapper()"
+            :disabled="loading"
+            class="text-sm text-left font-semibold leading-7 text-blue-600"
+          >
             <div v-if="loading" role="status">
               <svg
                 aria-hidden="true"
@@ -33,44 +37,10 @@
               </svg>
               <span class="sr-only">Loading...</span>
             </div>
-            <span class="inline-flex gap-x-8 items-center" v-else>
-              <button
-                @click="() => authWrapper_wrapper()"
-                :disabled="loading"
-                class="px-3 py-1 inline-flex items-center gap-x-2 bg-zinc-700 rounded text-sm text-left font-semibold leading-7 text-white"
-              >
-                Sign in with your browser <ArrowTopRightOnSquareIcon class="size-4" />
-              </button>
-              <NuxtLink href="/auth/code" class="text-zinc-100 text-sm hover:text-zinc-300">
-                Use a code &rarr;
-              </NuxtLink>
+            <span v-else>
+              Sign in with your browser <span aria-hidden="true">&rarr;</span>
             </span>
-          </div>
-
-          <div class="mt-5" v-if="offerManual">
-            <h1 class="text-zinc-100 font-semibold">Having trouble?</h1>
-            <p class="mt-1 text-zinc-400 text-sm">
-              You can manually enter the token from your web browser.
-            </p>
-            <div class="inline-flex gap-x-1 mt-2 w-full">
-              <input
-                id="token"
-                name="token"
-                type="text"
-                autocomplete="token"
-                required
-                class="grow block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-                v-model="manualToken"
-              />
-              <LoadingButton
-                :loading="manualLoading"
-                @click="() => continueManual_wrapper()"
-                class="w-fit"
-              >
-                Submit
-              </LoadingButton>
-            </div>
-          </div>
+          </button>
 
           <div v-if="error" class="mt-5 rounded-md bg-red-600/10 p-4">
             <div class="flex">
@@ -126,46 +96,20 @@
 
 <script setup lang="ts">
 import { XCircleIcon } from "@heroicons/vue/16/solid";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/20/solid";
 import { invoke } from "@tauri-apps/api/core";
 
 const loading = ref(false);
 const error = ref<string | undefined>();
 
-let offerManualTimeout: NodeJS.Timeout | undefined;
-const offerManual = ref(false);
-const manualToken = ref("");
-const manualLoading = ref(false);
-
 async function auth() {
   await invoke("auth_initiate");
 }
 
 function authWrapper_wrapper() {
-  error.value = undefined;
   loading.value = true;
   auth().catch((e) => {
     loading.value = false;
     error.value = e;
-    if (offerManualTimeout) clearTimeout(offerManualTimeout);
   });
-  offerManualTimeout = setTimeout(() => {
-    offerManual.value = true;
-  }, 2000);
-}
-
-async function continueManual() {
-  await invoke("manual_recieve_handshake", { token: manualToken.value });
-}
-
-function continueManual_wrapper() {
-  loading.value = true;
-  continueManual()
-    .catch((e) => {
-      error.value = e;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
 }
 </script>

components/MiniHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-16 cursor-pointer flex flex-row items-center justify-between bg-zinc-950"
+    class="h-10 cursor-pointer flex flex-row items-center justify-between bg-zinc-950"
   >
     <div class="px-5 py-3 grow" @mousedown="() => window.startDragging()">
       <Wordmark class="mt-1" />

components/WindowControl.vue

@@ -1,7 +1,4 @@
 <template>
-  <HeaderButton v-if="showMinimise" @click="() => minimise()">
-    <MinusIcon />
-  </HeaderButton>
   <HeaderButton @click="() => close()">
     <XMarkIcon />
   </HeaderButton>
@@ -11,14 +8,11 @@
 import { MinusIcon, XMarkIcon } from "@heroicons/vue/16/solid";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
+async function close(){
+  console.log(window);
+  const result = await window.close();
+  console.log(`closed window: ${result}`);
+}
+
 const window = getCurrentWindow();
-const showMinimise = await window.isMinimizable();
-
-async function close() {
-  await window.close();
-}
-
-async function minimise() {
-  await window.minimize();
-}
 </script>

composables/app-state.ts

@@ -0,0 +1,3 @@
+import type { AppState } from "~/types";
+
+export const useAppState = () => useState<AppState>("state");

composables/current-page-engine.ts

@@ -26,7 +26,5 @@ export const useCurrentNavigationIndex = (
     currentNavigation.value = calculateCurrentNavIndex(to);
   });
 
-  return {currentNavigation, recalculateNavigation: () => {
-    currentNavigation.value = calculateCurrentNavIndex(route);
-  }};
+  return currentNavigation;
 };

composables/downloads.ts

@@ -1,14 +1,7 @@
 import { listen } from "@tauri-apps/api/event";
-import type { DownloadableMetadata } from "~/types";
 
 export type QueueState = {
-  queue: Array<{
-    meta: DownloadableMetadata;
-    status: string;
-    progress: number | null;
-    current: number;
-    max: number;
-  }>;
+  queue: Array<{ id: string; status: string; progress: number | null }>;
   status: string;
 };
 

composables/game.ts

@@ -0,0 +1,55 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import type { Game, GameStatus, GameStatusEnum } from "~/types";
+
+const gameRegistry: { [key: string]: Game } = {};
+
+const gameStatusRegistry: { [key: string]: Ref<GameStatus> } = {};
+
+type OptionGameStatus = { [key in GameStatusEnum]: { version_name?: string } };
+export type SerializedGameStatus = [
+  { type: GameStatusEnum },
+  OptionGameStatus | null
+];
+
+const parseStatus = (status: SerializedGameStatus): GameStatus => {
+  if (status[0]) {
+    return {
+      type: status[0].type,
+    };
+  } else if (status[1]) {
+    const [[gameStatus, options]] = Object.entries(status[1]);
+    return {
+      type: gameStatus as GameStatusEnum,
+      ...options,
+    };
+  } else {
+    throw new Error("No game status");
+  }
+};
+
+export const useGame = async (id: string) => {
+  if (!gameRegistry[id]) {
+    const data: { game: Game; status: SerializedGameStatus } = await invoke(
+      "fetch_game",
+      {
+        id,
+      }
+    );
+    gameRegistry[id] = data.game;
+    if (!gameStatusRegistry[id]) {
+      gameStatusRegistry[id] = ref(parseStatus(data.status));
+
+      listen(`update_game/${id}`, (event) => {
+        const payload: {
+          status: SerializedGameStatus;
+        } = event.payload as any;
+        gameStatusRegistry[id].value = parseStatus(payload.status);
+      });
+    }
+  }
+
+  const game = gameRegistry[id];
+  const status = gameStatusRegistry[id];
+  return { game, status };
+};

composables/state-navigation.ts

@@ -1,11 +1,9 @@
-import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { data } from "autoprefixer";
 import { AppStatus, type AppState } from "~/types";
 
 export function setupHooks() {
   const router = useRouter();
-  const state = useAppState();
 
   listen("auth/processing", (event) => {
     router.push("/auth/processing");
@@ -17,9 +15,8 @@ export function setupHooks() {
     );
   });
 
-  listen("auth/finished", async (event) => {
-    router.push("/library");
-    state.value = JSON.parse(await invoke("fetch_state"));
+  listen("auth/finished", (event) => {
+    router.push("/store");
   });
 
   listen("download_error", (event) => {
@@ -30,31 +27,12 @@ export function setupHooks() {
         description: `Drop encountered an error while downloading your game: "${(
           event.payload as unknown as string
         ).toString()}"`,
-        buttonText: "Close",
+        buttonText: "Close"
       },
       (e, c) => c()
     );
   });
 
-  // This is for errors that (we think) aren't our fault
-  listen("launch_external_error", (event) => {
-    createModal(
-      ModalType.Confirmation,
-      {
-        title: "Did something go wrong?",
-        description:
-          "Drop detected that something might've gone wrong with launching your game. Do you want to open the log directory?",
-        buttonText: "Open",
-      },
-      async (e, c) => {
-        if (e == "confirm") {
-          await invoke("open_process_logs", { gameId: event.payload });
-        }
-        c();
-      }
-    );
-  });
-
   /*
 
   document.addEventListener("contextmenu", (event) => {
@@ -65,18 +43,14 @@ export function setupHooks() {
   */
 }
 
-export function initialNavigation(state: ReturnType<typeof useAppState>) {
-  if (!state.value)
-    throw createError({
-      statusCode: 500,
-      statusMessage: "App state not valid",
-      fatal: true,
-    });
+export function initialNavigation(state: Ref<AppState>) {
   const router = useRouter();
 
   switch (state.value.status) {
     case AppStatus.NotConfigured:
-      router.push({ path: "/setup" });
+      router.push({ path: "/setup" }).then(() => {
+        console.log("Pushed Setup");
+      });
       break;
     case AppStatus.SignedOut:
       router.push("/auth");
@@ -88,6 +62,6 @@ export function initialNavigation(state: ReturnType<typeof useAppState>) {
       router.push("/error/serverunavailable");
       break;
     default:
-      router.push("/library");
+      router.push("/store");
   }
 }

gamepad.ts

@@ -0,0 +1,67 @@
+import gameControl, { XBoxButton, Button, type GCGamepad } from 'esm-gamecontroller.js';
+
+let mainGamepad: Ref<number | undefined>  = ref(undefined);
+
+let buttonIndex = 0;
+const buttons = computed((): any[]  => {
+    let as = document.getElementsByTagName('a');
+    let buttons = document.getElementsByTagName('button');
+    return [].concat(Array.from(as)).concat(Array.from(buttons));
+})
+
+const wrap = (num: number, min: number, max: number) => ((((num - min) % (max - min)) + (max - min)) % (max - min)) + min;
+
+setInterval(() => {
+    mainGamepad.value = navigator.getGamepads().filter(g => g !== null)[0]?.axes[1];
+    console.log(navigator.getGamepads().filter(g => g !== null)[0]?.axes)
+  }, 100);
+
+watch(mainGamepad, (v) => {
+  console.log(v)
+  if (!v || v == 0) return;
+  buttonIndex = wrap(buttonIndex + v > 0 ? 1 : -1, 0, buttons.value.length);
+
+  console.log(`Focusing ${buttonIndex}`)
+  console.log(buttons.value[buttonIndex]);
+  
+  buttons.value[buttonIndex].focus()
+})
+
+
+
+/*
+setInterval(() => {
+    console.log(gamepads[0]);
+    console.log(gamepads[0].checkStatus())
+}, 1000);
+*/
+
+/*
+window.ongamepadconnected = (e) => {
+    console.log("ongamepadconnected", e);
+}
+
+
+function selectButton(index: number) {
+    buttonIndex = (buttonIndex + index) % buttons.value.length; 
+    console.log(`Selecting button ${buttonIndex}`);
+    buttons.value[buttonIndex].focus()
+}
+
+function processGamepads() {
+    while (true) {
+        console.log("Processing gamepads");
+        let gamepad = navigator.getGamepads()[0];
+        if (!gamepad) continue;
+        let direction = gamepad.axes[1];
+        if (direction > 0.1) {
+            selectButton(1)
+            console.log("Selecting button 1")
+        }
+        else if (direction < -0.1) {
+            selectButton(-1)
+            console.log("Selecting button -1")
+        }
+    }
+}
+*/

layouts/default.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col bg-zinc-900 overflow-hidden">
+    <Header class="select-none" />
+    <div class="grow overflow-y-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const queueState = useQueueState();
+</script>

layouts/mini.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex flex-col bg-zinc-950 overflow-hidden">
+    <MiniHeader />
+    <div class="grow overflow-y-auto">
+      <slot />
+    </div>
+  </div>
+</template>

main/components/GameOptions/Launch.vue

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <label for="launch" class="block text-sm/6 font-medium text-zinc-100"
-      >Launch string template</label
-    >
-    <div class="mt-2">
-      <input
-        type="text"
-        name="launch"
-        id="launch"
-        class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline-1 -outline-offset-1 outline-zinc-800 placeholder:text-zinc-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
-        placeholder="{}"
-        aria-describedby="launch-description"
-        v-model="model!!.launchString"
-      />
-    </div>
-    <p class="mt-2 text-sm text-zinc-400" id="launch-description">
-      Override the launch string. Passed to system's default shell, and replaces
-      "{}" with the command to start the game.
-      <span class="font-semibold text-zinc-200"
-        >Leaving it blank will cause the game not to start.</span
-      >
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { FrontendGameConfiguration } from "~/composables/game";
-
-const model = defineModel<FrontendGameConfiguration>();
-</script>

main/components/GameOptionsModal.vue

@@ -1,122 +0,0 @@
-<template>
-  <ModalTemplate size-class="max-w-4xl" v-model="open">
-    <template #default>
-      <div class="flex flex-row gap-x-4">
-        <nav class="flex flex-1 flex-col" aria-label="Sidebar">
-          <ul role="list" class="-mx-2 space-y-1">
-            <li v-for="(tab, tabIdx) in tabs" :key="tab.name">
-              <button
-                @click="() => (currentTabIndex = tabIdx)"
-                :class="[
-                  tabIdx == currentTabIndex
-                    ? 'bg-zinc-800 text-zinc-100'
-                    : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100',
-                  'transition w-full group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold',
-                ]"
-              >
-                <component
-                  :is="tab.icon"
-                  :class="[
-                    tabIdx == currentTabIndex
-                      ? 'text-zinc-100'
-                      : 'text-gray-400 group-hover:text-zinc-100',
-                    'size-6 shrink-0',
-                  ]"
-                  aria-hidden="true"
-                />
-                {{ tab.name }}
-              </button>
-            </li>
-          </ul>
-        </nav>
-        <div class="border-l-2 border-zinc-800 w-full grow pl-4">
-          <component
-            v-model="configuration"
-            :is="tabs[currentTabIndex]?.page"
-          />
-        </div>
-      </div>
-      <div v-if="saveError" class="mt-5 rounded-md bg-red-600/10 p-4">
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
-          </div>
-          <div class="ml-3">
-            <h3 class="text-sm font-medium text-red-600">
-              {{ saveError }}
-            </h3>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #buttons>
-      <LoadingButton
-        @click="() => save()"
-        :loading="saveLoading"
-        type="submit"
-        class="ml-2 w-full sm:w-fit"
-      >
-        Save
-      </LoadingButton>
-      <button
-        @click="() => (open = false)"
-        type="button"
-        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
-        ref="cancelButtonRef"
-      >
-        Cancel
-      </button>
-    </template>
-  </ModalTemplate>
-</template>
-
-<script setup lang="ts">
-import type { Component } from "vue";
-import {
-  RocketLaunchIcon,
-  ServerIcon,
-  TrashIcon,
-  XCircleIcon,
-} from "@heroicons/vue/20/solid";
-import Launch from "./GameOptions/Launch.vue";
-import type { FrontendGameConfiguration } from "~/composables/game";
-import { invoke } from "@tauri-apps/api/core";
-
-const open = defineModel<boolean>();
-const props = defineProps<{ gameId: string }>();
-const game = await useGame(props.gameId);
-
-const configuration: Ref<FrontendGameConfiguration> = ref({
-  launchString: game.version!!.launchCommandTemplate,
-});
-
-const tabs: Array<{ name: string; icon: Component; page: Component }> = [
-  {
-    name: "Launch",
-    icon: RocketLaunchIcon,
-    page: Launch,
-  },
-  {
-    name: "Storage",
-    icon: ServerIcon,
-    page: h("div"),
-  },
-];
-const currentTabIndex = ref(0);
-
-const saveLoading = ref(false);
-const saveError = ref<undefined | string>();
-async function save() {
-  saveLoading.value = true;
-  try {
-    await invoke("update_game_configuration", {
-      gameId: game.game.id,
-      options: configuration.value,
-    });
-    open.value = false;
-  } catch (e) {
-    saveError.value = (e as unknown as string).toString();
-  }
-  saveLoading.value = false;
-}
-</script>

main/components/GameStatusButton.vue

@@ -1,183 +0,0 @@
-<template>
-  <!-- Do not add scale animations to this: https://stackoverflow.com/a/35683068 -->
-  <div class="inline-flex divide-x divide-zinc-900">
-    <button
-      type="button"
-      @click="() => buttonActions[props.status.type]()"
-      :class="[
-        styles[props.status.type],
-        showDropdown ? 'rounded-l-md' : 'rounded-md',
-        'inline-flex uppercase font-display items-center gap-x-2 px-4 py-3 text-md font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
-      ]"
-    >
-      <component
-        :is="buttonIcons[props.status.type]"
-        class="-mr-0.5 size-5"
-        aria-hidden="true"
-      />
-      {{ buttonNames[props.status.type] }}
-    </button>
-    <Menu
-      v-if="showDropdown"
-      as="div"
-      class="relative inline-block text-left grow"
-    >
-      <div class="h-full">
-        <MenuButton
-          :class="[
-            styles[props.status.type],
-            'inline-flex w-full h-full justify-center items-center rounded-r-md px-1 py-2 text-sm font-semibold shadow-sm group',
-            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
-          ]"
-        >
-          <ChevronDownIcon class="size-5" aria-hidden="true" />
-        </MenuButton>
-      </div>
-
-      <transition
-        enter-active-class="transition ease-out duration-100"
-        enter-from-class="transform opacity-0 scale-95"
-        enter-to-class="transform opacity-100 scale-100"
-        leave-active-class="transition ease-in duration-75"
-        leave-from-class="transform opacity-100 scale-100"
-        leave-to-class="transform opacity-0 scale-95"
-      >
-        <MenuItems
-          class="absolute right-0 z-[500] mt-2 w-32 origin-top-right rounded-md bg-zinc-900 shadow-lg ring-1 ring-zinc-100/5 focus:outline-none"
-        >
-          <div class="py-1">
-            <MenuItem v-if="showOptions" v-slot="{ active }">
-              <button
-                @click="() => emit('options')"
-                :class="[
-                  active
-                    ? 'bg-zinc-800 text-zinc-100 outline-none'
-                    : 'text-zinc-400',
-                  'w-full block px-4 py-2 text-sm inline-flex justify-between',
-                ]"
-              >
-                Options
-                <Cog6ToothIcon class="size-5" />
-              </button>
-            </MenuItem>
-            <MenuItem v-slot="{ active }">
-              <button
-                @click="() => emit('uninstall')"
-                :class="[
-                  active
-                    ? 'bg-zinc-800 text-zinc-100 outline-none'
-                    : 'text-zinc-400',
-                  'w-full block px-4 py-2 text-sm inline-flex justify-between',
-                ]"
-              >
-                Uninstall
-                <TrashIcon class="size-5" />
-              </button>
-            </MenuItem>
-          </div>
-        </MenuItems>
-      </transition>
-    </Menu>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  ArrowDownTrayIcon,
-  ChevronDownIcon,
-  PlayIcon,
-  QueueListIcon,
-  ServerIcon,
-  StopIcon,
-  WrenchIcon,
-} from "@heroicons/vue/20/solid";
-
-import type { Component } from "vue";
-import { GameStatusEnum, type GameStatus } from "~/types.js";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import { Cog6ToothIcon, TrashIcon } from "@heroicons/vue/24/outline";
-
-const props = defineProps<{ status: GameStatus }>();
-const emit = defineEmits<{
-  (e: "install"): void;
-  (e: "launch"): void;
-  (e: "queue"): void;
-  (e: "uninstall"): void;
-  (e: "kill"): void;
-  (e: "options"): void;
-  (e: "resume"): void;
-}>();
-
-const showDropdown = computed(
-  () =>
-    props.status.type === GameStatusEnum.Installed ||
-    props.status.type === GameStatusEnum.SetupRequired ||
-    props.status.type === GameStatusEnum.PartiallyInstalled
-);
-
-const showOptions = computed(
-  () => props.status.type === GameStatusEnum.Installed
-);
-
-const styles: { [key in GameStatusEnum]: string } = {
-  [GameStatusEnum.Remote]:
-    "bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 hover:bg-blue-500",
-  [GameStatusEnum.Queued]:
-    "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700 hover:bg-zinc-700",
-  [GameStatusEnum.Downloading]:
-    "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700 hover:bg-zinc-700",
-  [GameStatusEnum.Validating]:
-    "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700 hover:bg-zinc-700",
-  [GameStatusEnum.SetupRequired]:
-    "bg-yellow-600 text-white hover:bg-yellow-500 focus-visible:outline-yellow-600 hover:bg-yellow-500",
-  [GameStatusEnum.Installed]:
-    "bg-green-600 text-white hover:bg-green-500 focus-visible:outline-green-600 hover:bg-green-500",
-  [GameStatusEnum.Updating]:
-    "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700 hover:bg-zinc-700",
-  [GameStatusEnum.Uninstalling]:
-    "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700 hover:bg-zinc-700",
-  [GameStatusEnum.Running]:
-    "bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700 hover:bg-zinc-700",
-  [GameStatusEnum.PartiallyInstalled]:
-    "bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 hover:bg-blue-500",
-};
-
-const buttonNames: { [key in GameStatusEnum]: string } = {
-  [GameStatusEnum.Remote]: "Install",
-  [GameStatusEnum.Queued]: "Queued",
-  [GameStatusEnum.Downloading]: "Downloading",
-  [GameStatusEnum.Validating]: "Validating",
-  [GameStatusEnum.SetupRequired]: "Setup",
-  [GameStatusEnum.Installed]: "Play",
-  [GameStatusEnum.Updating]: "Updating",
-  [GameStatusEnum.Uninstalling]: "Uninstalling",
-  [GameStatusEnum.Running]: "Stop",
-  [GameStatusEnum.PartiallyInstalled]: "Resume",
-};
-
-const buttonIcons: { [key in GameStatusEnum]: Component } = {
-  [GameStatusEnum.Remote]: ArrowDownTrayIcon,
-  [GameStatusEnum.Queued]: QueueListIcon,
-  [GameStatusEnum.Downloading]: ArrowDownTrayIcon,
-  [GameStatusEnum.Validating]: ServerIcon,
-  [GameStatusEnum.SetupRequired]: WrenchIcon,
-  [GameStatusEnum.Installed]: PlayIcon,
-  [GameStatusEnum.Updating]: ArrowDownTrayIcon,
-  [GameStatusEnum.Uninstalling]: TrashIcon,
-  [GameStatusEnum.Running]: StopIcon,
-  [GameStatusEnum.PartiallyInstalled]: ArrowDownTrayIcon,
-};
-
-const buttonActions: { [key in GameStatusEnum]: () => void } = {
-  [GameStatusEnum.Remote]: () => emit("install"),
-  [GameStatusEnum.Queued]: () => emit("queue"),
-  [GameStatusEnum.Downloading]: () => emit("queue"),
-  [GameStatusEnum.Validating]: () => emit("queue"),
-  [GameStatusEnum.SetupRequired]: () => emit("launch"),
-  [GameStatusEnum.Installed]: () => emit("launch"),
-  [GameStatusEnum.Updating]: () => emit("queue"),
-  [GameStatusEnum.Uninstalling]: () => {},
-  [GameStatusEnum.Running]: () => emit("kill"),
-  [GameStatusEnum.PartiallyInstalled]: () => emit("resume"),
-};
-</script>

main/components/HeaderButton.vue

@@ -1,5 +0,0 @@
-<template>
-    <button class="transition h-full aspect-square text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100 p-[1.1rem]">
-        <slot />
-    </button>
-</template>

main/components/LibrarySearch.vue

@@ -1,196 +0,0 @@
-<template>
-  <div>
-    <div class="mb-3 inline-flex gap-x-2">
-      <div
-        class="relative transition-transform duration-300 hover:scale-105 active:scale-95"
-      >
-        <div
-          class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
-        >
-          <MagnifyingGlassIcon
-            class="h-5 w-5 text-zinc-400"
-            aria-hidden="true"
-          />
-        </div>
-        <input
-          type="text"
-          v-model="searchQuery"
-          class="block w-full rounded-lg border-0 bg-zinc-800/50 py-2 pl-10 pr-3 text-zinc-100 placeholder:text-zinc-500 focus:bg-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
-          placeholder="Search library..."
-        />
-      </div>
-      <button
-        @click="() => calculateGames(true)"
-        class="p-1 flex items-center justify-center transition-transform duration-300 size-10 hover:scale-110 active:scale-90 rounded-lg bg-zinc-800/50 text-zinc-100"
-      >
-        <ArrowPathIcon class="size-4" />
-      </button>
-    </div>
-
-    <TransitionGroup name="list" tag="ul" class="flex flex-col gap-y-1.5">
-      <NuxtLink
-        v-for="nav in filteredNavigation"
-        :key="nav.id"
-        :class="[
-          'transition-all duration-300 rounded-lg flex items-center py-2 px-3 hover:scale-105 active:scale-95 hover:shadow-lg hover:shadow-zinc-950/50',
-          nav.index === currentNavigation
-            ? 'bg-zinc-800 text-zinc-100 shadow-md shadow-zinc-950/20'
-            : nav.isInstalled.value
-            ? 'text-zinc-300 hover:bg-zinc-800/90 hover:text-zinc-200'
-            : 'text-zinc-500 hover:bg-zinc-800/70 hover:text-zinc-300',
-        ]"
-        :href="nav.route"
-      >
-        <div class="flex items-center w-full gap-x-3">
-          <div
-            class="flex-none transition-transform duration-300 hover:-rotate-2"
-          >
-            <img
-              class="size-8 object-cover bg-zinc-900 rounded-lg transition-all duration-300 shadow-sm"
-              :src="icons[nav.id]"
-              alt=""
-            />
-          </div>
-          <div class="flex flex-col flex-1">
-            <p
-              class="truncate text-xs font-display leading-5 flex-1 font-semibold"
-            >
-              {{ nav.label }}
-            </p>
-            <p
-              class="text-xs font-medium"
-              :class="[gameStatusTextStyle[games[nav.id].status.value.type]]"
-            >
-              {{ gameStatusText[games[nav.id].status.value.type] }}
-            </p>
-          </div>
-        </div>
-      </NuxtLink>
-    </TransitionGroup>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ArrowPathIcon, MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
-import { invoke } from "@tauri-apps/api/core";
-import { GameStatusEnum, type Game, type GameStatus } from "~/types";
-import { TransitionGroup } from "vue";
-import { listen } from "@tauri-apps/api/event";
-
-// Style information
-const gameStatusTextStyle: { [key in GameStatusEnum]: string } = {
-  [GameStatusEnum.Installed]: "text-green-500",
-  [GameStatusEnum.Downloading]: "text-blue-500",
-  [GameStatusEnum.Validating]: "text-blue-300",
-  [GameStatusEnum.Running]: "text-green-500",
-  [GameStatusEnum.Remote]: "text-zinc-500",
-  [GameStatusEnum.Queued]: "text-blue-500",
-  [GameStatusEnum.Updating]: "text-blue-500",
-  [GameStatusEnum.Uninstalling]: "text-zinc-100",
-  [GameStatusEnum.SetupRequired]: "text-yellow-500",
-  [GameStatusEnum.PartiallyInstalled]: "text-gray-400",
-};
-const gameStatusText: { [key in GameStatusEnum]: string } = {
-  [GameStatusEnum.Remote]: "Not installed",
-  [GameStatusEnum.Queued]: "Queued",
-  [GameStatusEnum.Downloading]: "Downloading...",
-  [GameStatusEnum.Validating]: "Validating...",
-  [GameStatusEnum.Installed]: "Installed",
-  [GameStatusEnum.Updating]: "Updating...",
-  [GameStatusEnum.Uninstalling]: "Uninstalling...",
-  [GameStatusEnum.SetupRequired]: "Setup required",
-  [GameStatusEnum.Running]: "Running",
-  [GameStatusEnum.PartiallyInstalled]: "Partially installed",
-};
-
-const router = useRouter();
-
-const searchQuery = ref("");
-
-const games: {
-  [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
-} = {};
-const icons: { [key: string]: string } = {};
-
-const rawGames: Ref<Game[], Game[]> = ref([]);
-
-async function calculateGames(clearAll = false) {
-  if (clearAll) rawGames.value = [];
-  // If we update immediately, the navigation gets re-rendered before we
-  // add all the necessary state, and it freaks tf out
-  const newGames = await invoke<typeof rawGames.value>("fetch_library");
-  for (const game of newGames) {
-    if (games[game.id]) continue;
-    games[game.id] = await useGame(game.id);
-  }
-  for (const game of newGames) {
-    if (icons[game.id]) continue;
-    icons[game.id] = await useObject(game.mIconObjectId);
-  }
-  rawGames.value = newGames;
-}
-
-await calculateGames();
-
-const navigation = computed(() =>
-  rawGames.value.map((game) => {
-    const status = games[game.id].status;
-
-    const isInstalled = computed(
-      () =>
-        status.value.type == GameStatusEnum.Installed ||
-        status.value.type == GameStatusEnum.SetupRequired
-    );
-
-    const item = {
-      label: game.mName,
-      route: `/library/${game.id}`,
-      prefix: `/library/${game.id}`,
-      isInstalled,
-      id: game.id,
-    };
-    return item;
-  })
-);
-const { currentNavigation, recalculateNavigation } = useCurrentNavigationIndex(
-  navigation.value
-);
-
-const filteredNavigation = computed(() => {
-  if (!searchQuery.value)
-    return navigation.value.map((e, i) => ({ ...e, index: i }));
-  const query = searchQuery.value.toLowerCase();
-  return navigation.value
-    .filter((nav) => nav.label.toLowerCase().includes(query))
-    .map((e, i) => ({ ...e, index: i }));
-});
-
-listen("update_library", async (event) => {
-  console.log("Updating library");
-  let oldNavigation = navigation.value[currentNavigation.value];
-  await calculateGames();
-  recalculateNavigation();
-  if (oldNavigation !== navigation.value[currentNavigation.value]) {
-    console.log("Triggered");
-    router.push("/library");
-  }
-});
-</script>
-
-<style scoped>
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.3s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.list-leave-active {
-  position: absolute;
-}
-</style>

main/components/LoadingIndicator.vue

@@ -1,7 +0,0 @@
-<template></template>
-
-<script setup lang="ts">
-const loading = useLoadingIndicator();
-
-watch(loading.isLoading, console.log);
-</script>

main/components/OfflineHeaderWidget.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { ArrowDownTrayIcon, CloudIcon } from "@heroicons/vue/20/solid";
-</script>
-
-<template>
-  <div
-    class="transition inline-flex items-center rounded-sm px-4 py-1.5 bg-zinc-900 text-sm text-zinc-400 gap-x-2"
-  >
-    <div class="relative">
-      <CloudIcon class="h-5 z-50 text-zinc-500" />
-      <div
-        class="absolute rounded-full left-1/2 top-1/2 -translate-y-[45%] -translate-x-1/2 w-[2px] h-6 rotate-[45deg] bg-zinc-400 z-50"
-      />
-    </div>
-    Offline
-  </div>
-</template>

main/components/PageWidget.vue

@@ -1,7 +0,0 @@
-<template>
-  <NuxtLink
-    class="inline-flex items-center gap-x-2 px-1 py-0.5 rounded bg-blue-900 text-zinc-100 hover:bg-blue-800"
-  >
-    <slot />
-  </NuxtLink>
-</template>

main/composables/app-state.ts

@@ -1,3 +0,0 @@
-import type { AppState } from "~/types";
-
-export const useAppState = () => useState<AppState | undefined>("state");

main/composables/game.ts

@@ -1,73 +0,0 @@
-import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
-import type { Game, GameStatus, GameStatusEnum, GameVersion } from "~/types";
-
-const gameRegistry: { [key: string]: { game: Game; version?: GameVersion } } =
-  {};
-
-const gameStatusRegistry: { [key: string]: Ref<GameStatus> } = {};
-
-type OptionGameStatus = { [key in GameStatusEnum]: { version_name?: string } };
-export type SerializedGameStatus = [
-  { type: GameStatusEnum },
-  OptionGameStatus | null
-];
-
-export const parseStatus = (status: SerializedGameStatus): GameStatus => {
-  if (status[0]) {
-    return {
-      type: status[0].type,
-    };
-  } else if (status[1]) {
-    const [[gameStatus, options]] = Object.entries(status[1]);
-    return {
-      type: gameStatus as GameStatusEnum,
-      ...options,
-    };
-  } else {
-    throw new Error("No game status");
-  }
-};
-
-export const useGame = async (gameId: string) => {
-  if (!gameRegistry[gameId]) {
-    const data: {
-      game: Game;
-      status: SerializedGameStatus;
-      version?: GameVersion;
-    } = await invoke("fetch_game", {
-      gameId,
-    });
-    gameRegistry[gameId] = { game: data.game, version: data.version };
-    if (!gameStatusRegistry[gameId]) {
-      gameStatusRegistry[gameId] = ref(parseStatus(data.status));
-
-      listen(`update_game/${gameId}`, (event) => {
-        const payload: {
-          status: SerializedGameStatus;
-          version?: GameVersion;
-        } = event.payload as any;
-        gameStatusRegistry[gameId].value = parseStatus(payload.status);
-        
-        /**
-         * I am not super happy about this.
-         * 
-         * This will mean that we will still have a version assigned if we have a game installed then uninstall it.
-         * It is necessary because a flag to check if we should overwrite seems excessive, and this function gets called
-         * on transient state updates. 
-         */
-        if (payload.version) {
-          gameRegistry[gameId].version = payload.version;
-        }
-      });
-    }
-  }
-
-  const game = gameRegistry[gameId];
-  const status = gameStatusRegistry[gameId];
-  return { ...game, status };
-};
-
-export type FrontendGameConfiguration = {
-  launchString: string;
-};

main/composables/generateGameMeta.ts

@@ -1,9 +0,0 @@
-import { type DownloadableMetadata, DownloadableType } from '~/types'
-
-export default function generateGameMeta(gameId: string, version: string): DownloadableMetadata {
-    return {
-        id: gameId,
-        version,
-        downloadType: DownloadableType.Game
-    }
-}

main/error.vue

@@ -1,91 +0,0 @@
-<template>
-  <NuxtLayout name="default">
-    <div
-      class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
-    >
-      <header
-        class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
-      >
-        <Logo class="h-10 w-auto sm:h-12" />
-        
-      </header>
-      <main
-        class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
-      >
-        <div class="max-w-lg">
-          <p class="text-base font-semibold leading-8 text-blue-600">
-            {{ error?.statusCode }}
-          </p>
-          <h1
-            class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
-          >
-            Oh no!
-          </h1>
-          <p
-            v-if="message"
-            class="mt-3 font-bold text-base leading-7 text-red-500"
-          >
-            {{ message }}
-          </p>
-          <p class="mt-6 text-base leading-7 text-zinc-400">
-            An error occurred while responding to your request. If you believe
-            this to be a bug, please report it. Try signing in and see if it
-            resolves the issue.
-          </p>
-          <div class="mt-10">
-            <!-- full app reload to fix errors -->
-            <a
-              href="/store"
-              class="text-sm font-semibold leading-7 text-blue-600"
-              ><span aria-hidden="true">&larr;</span> Back to store</a
-            >
-          </div>
-        </div>
-      </main>
-      <footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
-        <div class="border-t border-zinc-700 bg-zinc-900 py-10">
-          <nav
-            class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
-          >
-            <NuxtLink href="/docs">Documentation</NuxtLink>
-            <svg
-              viewBox="0 0 2 2"
-              aria-hidden="true"
-              class="h-0.5 w-0.5 fill-zinc-600"
-            >
-              <circle cx="1" cy="1" r="1" />
-            </svg>
-            <a href="https://discord.gg/NHx46XKJWA" target="_blank"
-              >Support Discord</a
-            >
-          </nav>
-        </div>
-      </footer>
-      <div
-        class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
-      >
-        <img
-          src="@/assets/wallpaper.jpg"
-          alt=""
-          class="absolute inset-0 h-full w-full object-cover"
-        />
-      </div>
-    </div>
-  </NuxtLayout>
-</template>
-
-<script setup lang="ts">
-import type { NuxtError } from "#app";
-
-const props = defineProps({
-  error: Object as () => NuxtError,
-});
-
-const statusCode = props.error?.statusCode;
-const message =
-  props.error?.statusMessage ||
-  props.error?.message ||
-  "An unknown error occurred.";
-
-console.error(props.error);
-</script>

main/layouts/default.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="flex flex-col bg-zinc-900 overflow-hidden h-screen">
-    <NuxtErrorBoundary>
-      <Header class="select-none" />
-      <div class="relative grow overflow-y-auto">
-        <slot />
-      </div>
-      <template #error="{ error }">
-        <MiniHeader />
-        <div class="relative grow overflow-y-auto bg-zinc-950">
-          <div
-            class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
-          >
-            <header
-              class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
-            >
-              <Logo class="h-10 w-auto sm:h-12" />
-            </header>
-            <main
-              class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
-            >
-              <div class="max-w-lg">
-                <h1
-                  class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
-                >
-                  Unrecoverable error
-                </h1>
-                <p class="mt-6 text-base leading-7 text-zinc-400">
-                  Drop encountered an error that it couldn't handle. Please
-                  restart the application and file a bug report.
-                </p>
-                <p class="mt-3 text-sm font-monospace text-zinc-500">
-                  Error: {{ error }}
-                </p>
-              </div>
-            </main>
-            <footer
-              class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3"
-            >
-              <div class="border-t border-blue-600 bg-zinc-900 py-10">
-                <nav
-                  class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
-                >
-                  <a href="#">Documentation</a>
-                  <svg
-                    viewBox="0 0 2 2"
-                    aria-hidden="true"
-                    class="h-0.5 w-0.5 fill-zinc-700"
-                  >
-                    <circle cx="1" cy="1" r="1" />
-                  </svg>
-                  <a href="#">Troubleshooting</a>
-                  <svg
-                    viewBox="0 0 2 2"
-                    aria-hidden="true"
-                    class="h-0.5 w-0.5 fill-zinc-700"
-                  >
-                    <circle cx="1" cy="1" r="1" />
-                  </svg>
-                  <NuxtLink to="/setup/server">Switch instance</NuxtLink>
-                </nav>
-              </div>
-            </footer>
-            <div
-              class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
-            >
-              <img
-                src="@/assets/wallpaper.jpg"
-                alt=""
-                class="absolute inset-0 h-full w-full object-cover"
-              />
-            </div>
-          </div>
-        </div>
-      </template>
-    </NuxtErrorBoundary>
-  </div>
-</template>
-
-<script setup lang="ts">
-const queueState = useQueueState();
-</script>

main/layouts/mini.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="flex flex-col bg-zinc-950 overflow-hidden h-screen">
-    <MiniHeader />
-    <div class="relative grow overflow-y-auto">
-      <slot />
-    </div>
-  </div>
-</template>

main/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "view",
-  "private": true,
-  "version": "0.3.1",
-  "type": "module",
-  "scripts": {
-    "build": "nuxt generate",
-    "dev": "nuxt dev",
-    "postinstall": "nuxt prepare",
-    "tauri": "tauri"
-  },
-  "dependencies": {
-    "@headlessui/vue": "^1.7.23",
-    "@heroicons/vue": "^2.1.5",
-    "@nuxtjs/tailwindcss": "^6.12.2",
-    "@tauri-apps/api": "^2.7.0",
-    "koa": "^2.16.1",
-    "markdown-it": "^14.1.0",
-    "micromark": "^4.0.1",
-    "nuxt": "^3.16.0",
-    "scss": "^0.2.4",
-    "vue-router": "latest",
-    "vuedraggable": "^4.1.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.15",
-    "@types/markdown-it": "^14.1.2",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "sass-embedded": "^1.79.4",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.8.3",
-    "vue-tsc": "^2.2.10"
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}

main/pages/auth/code.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="min-h-full w-full flex items-center justify-center">
-    <div class="flex flex-col items-center">
-      <div class="text-center">
-        <h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
-          Device authorization
-        </h1>
-        <div class="mt-4">
-          <p class="text-sm text-zinc-400 max-w-md mx-auto">
-            Open Drop on another one of your devices, and use your account
-            dropdown to "Authorize client", and enter the code below.
-          </p>
-          <div
-            class="mt-8 flex items-center justify-center gap-x-5 text-8xl font-bold text-zinc-100"
-          >
-            <span v-for="letter in code.split('')">{{ letter }}</span>
-          </div>
-        </div>
-        <div class="mt-10 flex items-center justify-center gap-x-6">
-          <NuxtLink href="/auth" class="text-sm font-semibold text-blue-600"
-            ><span aria-hidden="true">&larr;</span> Use a different method
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
-
-const code = await invoke<string>("auth_initiate_code");
-
-definePageMeta({
-  layout: "mini",
-});
-</script>

main/pages/library.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="flex flex-row h-full">
-    <!-- Sidebar -->
-    <div
-      class="flex-none max-h-full overflow-y-auto w-72 bg-zinc-950/50 backdrop-blur-xl px-4 py-3 border-r border-zinc-800/50"
-    >
-      <LibrarySearch />
-    </div>
-    <div class="grow overflow-y-auto">
-      <NuxtErrorBoundary>
-        <NuxtPage />
-        <template #error="{ error }">
-          <main
-            class="grid min-h-full w-full place-items-center px-6 py-24 sm:py-32 lg:px-8"
-          >
-            <div class="text-center">
-              <p class="text-base font-semibold text-blue-600">Error</p>
-              <h1
-                class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
-              >
-                Failed to load library
-              </h1>
-              <p class="mt-6 text-base leading-7 text-zinc-400">
-                Drop couldn't load your library: "{{ error }}".
-              </p>
-            </div>
-          </main>
-        </template>
-      </NuxtErrorBoundary>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped>
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.3s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.list-leave-active {
-  position: absolute;
-}
-</style>

main/pages/library/[id]/index.vue

@@ -1,650 +0,0 @@
-<template>
-  <div
-    class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
-  >
-    <div class="absolute inset-0 z-0">
-      <img
-        :src="bannerUrl"
-        class="w-full h-[24rem] object-cover blur-sm scale-105"
-      />
-      <div
-        class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90"
-      />
-      <div
-        class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
-      />
-    </div>
-
-    <div class="relative z-10">
-      <div class="px-8 pb-4">
-        <h1
-          class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg mb-8"
-        >
-          {{ game.mName }}
-        </h1>
-
-        <div class="flex flex-row gap-x-4 items-stretch mb-8">
-          <!-- Do not add scale animations to this: https://stackoverflow.com/a/35683068 -->
-          <GameStatusButton
-            @install="() => installFlow()"
-            @launch="() => launch()"
-            @queue="() => queue()"
-            @uninstall="() => uninstall()"
-            @kill="() => kill()"
-            @options="() => (configureModalOpen = true)"
-            @resume="() => resumeDownload()"
-            :status="status"
-          />
-          <a
-            :href="remoteUrl"
-            target="_blank"
-            type="button"
-            class="transition-transform duration-300 hover:scale-105 active:scale-95 inline-flex items-center rounded-md bg-zinc-800/50 px-6 font-semibold text-white shadow-xl backdrop-blur-sm hover:bg-zinc-800/80 uppercase font-display"
-          >
-            <BuildingStorefrontIcon class="mr-2 size-5" aria-hidden="true" />
-            Store
-          </a>
-        </div>
-      </div>
-
-      <!-- Main content -->
-      <div class="w-full bg-zinc-900 px-8 py-6">
-        <div class="grid grid-cols-[2fr,1fr] gap-8">
-          <div class="space-y-6">
-            <div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
-              <div
-                v-html="htmlDescription"
-                class="prose prose-invert prose-blue overflow-y-auto custom-scrollbar max-w-none"
-              ></div>
-            </div>
-          </div>
-
-          <div class="space-y-6">
-            <div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
-              <h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">
-                Game Images
-              </h2>
-              <div class="relative">
-                <div v-if="mediaUrls.length > 0">
-                  <div
-                    class="relative aspect-video rounded-lg overflow-hidden cursor-pointer group"
-                  >
-                    <div
-                      class="absolute inset-0"
-                      @click="fullscreenImage = mediaUrls[currentImageIndex]"
-                    >
-                      <TransitionGroup name="slide" tag="div" class="h-full">
-                        <img
-                          v-for="(url, index) in mediaUrls"
-                          :key="index"
-                          :src="url"
-                          class="absolute inset-0 w-full h-full object-cover"
-                          v-show="index === currentImageIndex"
-                        />
-                      </TransitionGroup>
-                    </div>
-
-                    <div
-                      class="absolute inset-0 flex items-center justify-between px-4 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-                    >
-                      <div class="pointer-events-auto">
-                        <button
-                          v-if="mediaUrls.length > 1"
-                          @click.stop="previousImage()"
-                          class="p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900/80 transition-all duration-300 hover:scale-110"
-                        >
-                          <ChevronLeftIcon class="size-5" />
-                        </button>
-                      </div>
-                      <div class="pointer-events-auto">
-                        <button
-                          v-if="mediaUrls.length > 1"
-                          @click.stop="nextImage()"
-                          class="p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900/80 transition-all duration-300 hover:scale-110"
-                        >
-                          <ChevronRightIcon class="size-5" />
-                        </button>
-                      </div>
-                    </div>
-
-                    <div
-                      class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-                    />
-                    <div
-                      class="absolute bottom-4 right-4 flex items-center gap-x-2 text-white opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-                    >
-                      <ArrowsPointingOutIcon class="size-5" />
-                      <span class="text-sm font-medium">View Fullscreen</span>
-                    </div>
-                  </div>
-
-                  <div
-                    class="absolute -bottom-2 left-1/2 -translate-x-1/2 flex gap-x-2"
-                  >
-                    <button
-                      v-for="(_, index) in mediaUrls"
-                      :key="index"
-                      @click.stop="currentImageIndex = index"
-                      class="w-1.5 h-1.5 rounded-full transition-all"
-                      :class="[
-                        currentImageIndex === index
-                          ? 'bg-zinc-100 scale-125'
-                          : 'bg-zinc-600 hover:bg-zinc-500',
-                      ]"
-                    />
-                  </div>
-                </div>
-
-                <div
-                  v-else
-                  class="aspect-video rounded-lg overflow-hidden bg-zinc-900/50 flex flex-col items-center justify-center text-center px-4"
-                >
-                  <PhotoIcon class="size-12 text-zinc-500 mb-2" />
-                  <p class="text-zinc-400 font-medium">No images available</p>
-                  <p class="text-zinc-500 text-sm">
-                    Game screenshots will appear here when available
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <ModalTemplate v-model="installFlowOpen">
-    <template #default>
-      <div class="sm:flex sm:items-start">
-        <div class="mt-3 text-center sm:mt-0 sm:text-left">
-          <h3 class="text-base font-semibold text-zinc-100">
-            Install {{ game.mName }}?
-          </h3>
-          <div class="mt-2">
-            <p class="text-sm text-zinc-400">
-              Drop will add {{ game.mName }} to the queue to be downloaded.
-              While downloading, Drop may use up a large amount of resources,
-              particularly network bandwidth and CPU utilisation.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <form class="space-y-6">
-        <div v-if="versionOptions && versionOptions.length > 0">
-          <Listbox as="div" v-model="installVersionIndex">
-            <ListboxLabel class="block text-sm/6 font-medium text-zinc-100"
-              >Version</ListboxLabel
-            >
-            <div class="relative mt-2">
-              <ListboxButton
-                class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
-              >
-                <span class="block truncate"
-                  >{{ versionOptions[installVersionIndex].versionName }}
-                  on
-                  {{ versionOptions[installVersionIndex].platform }}</span
-                >
-                <span
-                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-                >
-                  <ChevronUpDownIcon
-                    class="h-5 w-5 text-gray-400"
-                    aria-hidden="true"
-                  />
-                </span>
-              </ListboxButton>
-
-              <transition
-                leave-active-class="transition ease-in duration-100"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-              >
-                <ListboxOptions
-                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                >
-                  <ListboxOption
-                    as="template"
-                    v-for="(version, versionIdx) in versionOptions"
-                    :key="version.versionName"
-                    :value="versionIdx"
-                    v-slot="{ active, selected }"
-                  >
-                    <li
-                      :class="[
-                        active ? 'bg-blue-600 text-white' : 'text-zinc-300',
-                        'relative cursor-default select-none py-2 pl-3 pr-9',
-                      ]"
-                    >
-                      <span
-                        :class="[
-                          selected
-                            ? 'font-semibold text-zinc-100'
-                            : 'font-normal',
-                          'block truncate',
-                        ]"
-                        >{{ version.versionName }} on
-                        {{ version.platform }}</span
-                      >
-
-                      <span
-                        v-if="selected"
-                        :class="[
-                          active ? 'text-white' : 'text-blue-600',
-                          'absolute inset-y-0 right-0 flex items-center pr-4',
-                        ]"
-                      >
-                        <CheckIcon class="h-5 w-5" aria-hidden="true" />
-                      </span>
-                    </li>
-                  </ListboxOption>
-                </ListboxOptions>
-              </transition>
-            </div>
-          </Listbox>
-        </div>
-        <div v-else class="mt-1 rounded-md bg-red-600/10 p-4">
-          <div class="flex">
-            <div class="flex-shrink-0">
-              <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
-            </div>
-            <div class="ml-3">
-              <h3 class="text-sm font-medium text-red-600">
-                There are no supported versions to install. Please contact your
-                server admin or try again later.
-              </h3>
-            </div>
-          </div>
-        </div>
-        <div v-if="installDirs">
-          <Listbox as="div" v-model="installDir">
-            <ListboxLabel class="block text-sm/6 font-medium text-zinc-100"
-              >Install to</ListboxLabel
-            >
-            <div class="relative mt-2">
-              <ListboxButton
-                class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
-              >
-                <span class="block truncate">{{
-                  installDirs[installDir]
-                }}</span>
-                <span
-                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-                >
-                  <ChevronUpDownIcon
-                    class="h-5 w-5 text-gray-400"
-                    aria-hidden="true"
-                  />
-                </span>
-              </ListboxButton>
-
-              <transition
-                leave-active-class="transition ease-in duration-100"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-              >
-                <ListboxOptions
-                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                >
-                  <ListboxOption
-                    as="template"
-                    v-for="(dir, dirIdx) in installDirs"
-                    :key="dir"
-                    :value="dirIdx"
-                    v-slot="{ active, selected }"
-                  >
-                    <li
-                      :class="[
-                        active ? 'bg-blue-600 text-white' : 'text-zinc-300',
-                        'relative cursor-default select-none py-2 pl-3 pr-9',
-                      ]"
-                    >
-                      <span
-                        :class="[
-                          selected
-                            ? 'font-semibold text-zinc-100'
-                            : 'font-normal',
-                          'block truncate',
-                        ]"
-                        >{{ dir }}</span
-                      >
-
-                      <span
-                        v-if="selected"
-                        :class="[
-                          active ? 'text-white' : 'text-blue-600',
-                          'absolute inset-y-0 right-0 flex items-center pr-4',
-                        ]"
-                      >
-                        <CheckIcon class="h-5 w-5" aria-hidden="true" />
-                      </span>
-                    </li>
-                  </ListboxOption>
-                </ListboxOptions>
-              </transition>
-            </div>
-            <div class="text-zinc-400 text-sm mt-2">
-              Add more install directories in
-              <PageWidget to="/settings/downloads">
-                <WrenchIcon class="size-3" />
-                Settings
-              </PageWidget>
-            </div>
-          </Listbox>
-        </div>
-      </form>
-
-      <div v-if="installError" class="mt-1 rounded-md bg-red-600/10 p-4">
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
-          </div>
-          <div class="ml-3">
-            <h3 class="text-sm font-medium text-red-600">
-              {{ installError }}
-            </h3>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #buttons>
-      <LoadingButton
-        @click="() => install()"
-        :disabled="!(versionOptions && versionOptions.length > 0)"
-        :loading="installLoading"
-        type="submit"
-        class="ml-2 w-full sm:w-fit"
-      >
-        Install
-      </LoadingButton>
-      <button
-        type="button"
-        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
-        @click="installFlowOpen = false"
-        ref="cancelButtonRef"
-      >
-        Cancel
-      </button>
-    </template>
-  </ModalTemplate>
-
-  <!-- 
-  Dear future DecDuck,
-  This v-if is necessary for Vue rendering reasons
-  (it tries to access the game version for not installed games)
-  You have already tried to remove it
-  Don't.  
-  -->
-  <GameOptionsModal
-    v-if="status.type === GameStatusEnum.Installed"
-    v-model="configureModalOpen"
-    :game-id="game.id"
-  />
-
-  <Transition
-    enter="transition ease-out duration-300"
-    enter-from="opacity-0"
-    enter-to="opacity-100"
-    leave="transition ease-in duration-200"
-    leave-from="opacity-100"
-    leave-to="opacity-0"
-  >
-    <div
-      v-if="fullscreenImage"
-      class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
-      @click="fullscreenImage = null"
-    >
-      <div
-        class="relative w-full h-full flex items-center justify-center"
-        @click.stop
-      >
-        <button
-          class="absolute top-4 right-4 p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900 transition-colors"
-          @click.stop="fullscreenImage = null"
-        >
-          <XMarkIcon class="size-6" />
-        </button>
-
-        <button
-          v-if="mediaUrls.length > 1"
-          @click.stop="previousImage()"
-          class="absolute left-4 p-3 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900 transition-colors"
-        >
-          <ChevronLeftIcon class="size-6" />
-        </button>
-        <button
-          v-if="mediaUrls.length > 1"
-          @click.stop="nextImage()"
-          class="absolute right-4 p-3 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900 transition-colors"
-        >
-          <ChevronRightIcon class="size-6" />
-        </button>
-
-        <TransitionGroup
-          name="slide"
-          tag="div"
-          class="w-full h-full flex items-center justify-center"
-          @click.stop
-        >
-          <img
-            v-for="(url, index) in mediaUrls"
-            v-show="currentImageIndex === index"
-            :key="index"
-            :src="url"
-            class="max-h-[90vh] max-w-[90vw] object-contain"
-            :alt="`${game.mName} screenshot ${index + 1}`"
-          />
-        </TransitionGroup>
-
-        <div
-          class="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-zinc-900/50 backdrop-blur-sm"
-        >
-          <p class="text-zinc-100 text-sm font-medium">
-            {{ currentImageIndex + 1 }} / {{ mediaUrls.length }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import {
-  Listbox,
-  ListboxButton,
-  ListboxLabel,
-  ListboxOption,
-  ListboxOptions,
-} from "@headlessui/vue";
-import {
-  CheckIcon,
-  ChevronUpDownIcon,
-  WrenchIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  XMarkIcon,
-  ArrowsPointingOutIcon,
-  PhotoIcon,
-} from "@heroicons/vue/20/solid";
-import { BuildingStorefrontIcon } from "@heroicons/vue/24/outline";
-import { XCircleIcon } from "@heroicons/vue/24/solid";
-import { invoke } from "@tauri-apps/api/core";
-import { micromark } from "micromark";
-import { GameStatusEnum } from "~/types";
-
-const route = useRoute();
-const router = useRouter();
-const id = route.params.id.toString();
-
-const { game: rawGame, status } = await useGame(id);
-const game = ref(rawGame);
-
-const remoteUrl: string = await invoke("gen_drop_url", {
-  path: `/store/${game.value.id}`,
-});
-
-const bannerUrl = await useObject(game.value.mBannerObjectId);
-
-// Get all available images
-const mediaUrls = await Promise.all(
-  game.value.mImageCarouselObjectIds.map(async (v) => {
-    const src = await useObject(v);
-    return src;
-  })
-);
-
-const htmlDescription = micromark(game.value.mDescription);
-
-const installFlowOpen = ref(false);
-const versionOptions = ref<
-  undefined | Array<{ versionName: string; platform: string }>
->();
-const installDirs = ref<undefined | Array<string>>();
-const currentImageIndex = ref(0);
-
-const configureModalOpen = ref(false);
-
-async function installFlow() {
-  installFlowOpen.value = true;
-  versionOptions.value = undefined;
-  installDirs.value = undefined;
-
-  try {
-    versionOptions.value = await invoke("fetch_game_verion_options", {
-      gameId: game.value.id,
-    });
-    console.log(versionOptions.value);
-    installDirs.value = await invoke("fetch_download_dir_stats");
-  } catch (error) {
-    installError.value = (error as string).toString();
-  }
-}
-
-const installLoading = ref(false);
-const installError = ref<string | undefined>();
-const installVersionIndex = ref(0);
-const installDir = ref(0);
-async function install() {
-  try {
-    if (!versionOptions.value) throw new Error("Versions have not been loaded");
-    installLoading.value = true;
-    await invoke("download_game", {
-      gameId: game.value.id,
-      gameVersion: versionOptions.value[installVersionIndex.value].versionName,
-      installDir: installDir.value,
-    });
-    installFlowOpen.value = false;
-  } catch (error) {
-    installError.value = (error as string).toString();
-  }
-
-  installLoading.value = false;
-}
-
-async function resumeDownload() {
-  try {
-    await invoke("resume_download", { gameId: game.value.id });
-  } catch (e) {
-    console.error(e);
-  }
-}
-
-async function launch() {
-  try {
-    await invoke("launch_game", { id: game.value.id });
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: `Couldn't run "${game.value.mName}"`,
-        description: `Drop failed to launch "${game.value.mName}": ${e}`,
-        buttonText: "Close",
-      },
-      (e, c) => c()
-    );
-    console.error(e);
-  }
-}
-
-async function queue() {
-  router.push("/queue");
-}
-
-async function uninstall() {
-  await invoke("uninstall_game", { gameId: game.value.id });
-}
-
-async function kill() {
-  try {
-    await invoke("kill_game", { gameId: game.value.id });
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: `Couldn't stop "${game.value.mName}"`,
-        description: `Drop failed to stop "${game.value.mName}": ${e}`,
-        buttonText: "Close",
-      },
-      (e, c) => c()
-    );
-    console.error(e);
-  }
-}
-
-function nextImage() {
-  currentImageIndex.value = (currentImageIndex.value + 1) % mediaUrls.length;
-}
-
-function previousImage() {
-  currentImageIndex.value =
-    (currentImageIndex.value - 1 + mediaUrls.length) % mediaUrls.length;
-}
-
-const fullscreenImage = ref<string | null>(null);
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-  position: absolute;
-}
-
-.slide-enter-from {
-  opacity: 0;
-  transform: translateX(100%);
-}
-
-.slide-leave-to {
-  opacity: 0;
-  transform: translateX(-100%);
-}
-
-.custom-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: rgb(82 82 91) transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgb(82 82 91);
-  border-radius: 3px;
-}
-</style>

main/pages/library/index.vue

@@ -1,19 +0,0 @@
-<template>
-
-    <div class="h-full flex flex-col items-center justify-center">
-        <div class="text-center">
-            <div class="flex flex-col items-center gap-y-4">
-                <div class="p-4 rounded-xl bg-zinc-700/50 backdrop-blur-sm">
-                    <RocketLaunchIcon class="size-12 text-zinc-400" />
-                </div>
-                <div>
-                    <h3 class="text-xl font-display font-semibold text-zinc-100">Select a game</h3>
-                    <p class="mt-1 text-sm text-zinc-400">Choose a game from your library to view details</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { RocketLaunchIcon } from '@heroicons/vue/24/outline';
-</script>

main/pages/settings/account.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="border-b border-zinc-700 py-5">
-    <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
-      General
-    </h3>
-  </div>
-
-  <div class="mt-5 flex flex-col gap-4">
-    <div class="flex flex-row items-center justify-between">
-      <div>
-        <h3 class="text-sm font-medium leading-6 text-zinc-100">Sign out</h3>
-        <p class="mt-1 text-sm leading-6 text-zinc-400">
-          Sign out of your Drop account on this device
-        </p>
-      </div>
-      <button
-        @click="signOut"
-        type="button"
-        class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
-      >
-        Sign out
-      </button>
-    </div>
-
-    <div v-if="error" class="rounded-md bg-red-600/10 p-4">
-      <div class="flex">
-        <div class="flex-shrink-0">
-          <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
-        </div>
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-red-600">
-            {{ error }}
-          </h3>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
-import { useRouter } from "#imports";
-import { XCircleIcon } from "@heroicons/vue/16/solid";
-
-const router = useRouter();
-const error = ref<string | null>(null);
-
-// Listen for auth events
-onMounted(async () => {
-  await listen("auth/signedout", () => {
-    router.push("/auth/signedout");
-  });
-});
-
-async function signOut() {
-  try {
-    error.value = null;
-    await invoke("sign_out");
-  } catch (e) {
-    error.value = `Failed to sign out: ${e}`;
-  }
-}
-</script>

main/pages/settings/debug.vue

@@ -1,134 +0,0 @@
-<template>
-  <div class="divide-y divide-zinc-700">
-    <div class="py-6">
-      <h2 class="text-base font-semibold font-display leading-7 text-zinc-100">
-        Debug Information
-      </h2>
-      <p class="mt-1 text-sm leading-6 text-zinc-400">
-        Technical information about your Drop client installation, helpful for
-        debugging.
-      </p>
-
-      <div class="mt-10 space-y-8">
-        <div>
-          <div class="flex items-center gap-x-3">
-            <FingerPrintIcon class="h-5 w-5 text-zinc-400" />
-            <h3 class="text-sm font-medium leading-6 text-zinc-100">
-              Client ID
-            </h3>
-          </div>
-          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
-            {{ clientId || "Not signed in" }}
-          </p>
-        </div>
-
-        <div>
-          <div class="flex items-center gap-x-3">
-            <ComputerDesktopIcon class="h-5 w-5 text-zinc-400" />
-            <h3 class="text-sm font-medium leading-6 text-zinc-100">
-              Platform
-            </h3>
-          </div>
-          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
-            {{ platformInfo }}
-          </p>
-        </div>
-
-        <div>
-          <div class="flex items-center gap-x-3">
-            <ServerIcon class="h-5 w-5 text-zinc-400" />
-            <h3 class="text-sm font-medium leading-6 text-zinc-100">
-              Server URL
-            </h3>
-          </div>
-          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
-            {{ baseUrl || "Not connected" }}
-          </p>
-        </div>
-
-        <div>
-          <div class="flex items-center gap-x-3">
-            <FolderIcon class="h-5 w-5 text-zinc-400" />
-            <h3 class="text-sm font-medium leading-6 text-zinc-100">
-              Data Directory
-            </h3>
-          </div>
-          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
-            {{ dataDir || "Unknown" }}
-          </p>
-        </div>
-
-        <div class="pt-6 flex gap-x-4">
-          <button
-            @click="() => openDataDir()"
-            type="button"
-            class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-          >
-            <FolderIcon class="h-5 w-5" aria-hidden="true" />
-            Open Data Directory
-          </button>
-          <button
-            @click="() => openLogFile()"
-            type="button"
-            class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-          >
-            <DocumentTextIcon class="h-5 w-5" aria-hidden="true" />
-            Open Log File
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
-import { platform, type } from "@tauri-apps/plugin-os";
-import {
-  FingerPrintIcon,
-  TagIcon,
-  ComputerDesktopIcon,
-  ServerIcon,
-  FolderIcon,
-  CubeIcon,
-  DocumentTextIcon,
-} from "@heroicons/vue/24/outline";
-import { open } from "@tauri-apps/plugin-shell";
-
-const clientId = ref<string | null>(null);
-const platformInfo = ref("Loading...");
-const baseUrl = ref<string | null>(null);
-const dataDir = ref<string | null>(null);
-
-const systemData = await invoke<{
-  clientId: string;
-  baseUrl: string;
-  dataDir: string;
-}>("fetch_system_data");
-
-clientId.value = systemData.clientId;
-baseUrl.value = systemData.baseUrl;
-dataDir.value = systemData.dataDir;
-
-const currentPlatform = await platform();
-platformInfo.value = currentPlatform;
-
-async function openDataDir() {
-  if (!dataDir.value) return;
-  try {
-    await open(dataDir.value);
-  } catch (error) {
-    console.error("Failed to open data dir:", error);
-  }
-}
-
-async function openLogFile() {
-  if (!dataDir.value) return;
-  try {
-    const logPath = `${dataDir.value}/drop.log`;
-    await open(logPath);
-  } catch (error) {
-    console.error("Failed to open log file:", error);
-  }
-}
-</script>

main/pages/settings/downloads.vue

@@ -1,300 +0,0 @@
-<template>
-  <div class="border-b border-zinc-700 py-5">
-    <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
-      Downloads
-    </h3>
-  </div>
-
-
-  <div class="mt-5">
-    <div class="border-b border-zinc-600">
-      <div class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap">
-        <div class="ml-4 mt-2 pb-4">
-          <h3 class="text-base font-display font-semibold text-zinc-100">
-            Install directories
-          </h3>
-          <p class="mt-1 text-sm text-zinc-400 max-w-xl">
-            This is where Drop will download game files to, and store them
-            indefinitely while you play. Drop and games may store other
-            information elsewhere, like saves or mods.
-          </p>
-        </div>
-        <div class="ml-4 mt-2 shrink-0">
-          <button @click="() => (open = true)" type="button"
-            class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
-            Add new directory
-          </button>
-        </div>
-      </div>
-    </div>
-    <ul role="list" class="divide-y divide-gray-800">
-      <li v-for="(dir, dirIdx) in dirs" :key="dir" class="flex justify-between gap-x-6 py-5">
-        <div class="flex min-w-0 gap-x-4">
-          <FolderIcon class="h-6 w-6 text-blue-600 flex-none rounded-full" alt="" />
-          <div class="min-w-0 flex-auto">
-            <p class="text-sm/6 text-zinc-100">
-              {{ dir }}
-            </p>
-          </div>
-        </div>
-        <div class="flex shrink-0 items-center gap-x-6">
-          <button @click="() => deleteDirectory(dirIdx)" :disabled="dirs.length <= 1" :class="[
-            dirs.length <= 1
-              ? 'text-zinc-700'
-              : 'text-zinc-400 hover:text-zinc-100',
-            '-m-2.5 block p-2.5',
-          ]">
-            <span class="sr-only">Open options</span>
-            <TrashIcon class="size-5" aria-hidden="true" />
-          </button>
-        </div>
-      </li>
-    </ul>
-    <div class="border-t border-zinc-600 py-6">
-      <h3 class="text-base font-display font-semibold text-zinc-100">
-        Download Settings
-      </h3>
-      <p class="mt-1 text-sm text-zinc-400 max-w-xl">
-        Configure how Drop downloads games and other content.
-      </p>
-
-      <div class="mt-6 max-w-xl">
-        <label for="threads" class="block text-sm font-medium text-zinc-100">
-          Maximum Download Threads
-        </label>
-        <div class="mt-2">
-          <input type="number" name="threads" id="threads" min="1" max="32" v-model="downloadThreads"
-            @keypress="validateNumberInput" @paste="validatePaste"
-            class="block w-full rounded-md border-0 py-1.5 text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 bg-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" />
-        </div>
-        <p class="mt-2 text-sm text-zinc-400">
-          The maximum number of concurrent download threads. Higher values may
-          download faster but use more system resources. Default is 4.
-        </p>
-      </div>
-      <div class="mt-10 space-y-8">
-        <div class="flex flex-row items-center justify-between">
-          <div>
-            <h3 class="text-sm font-medium leading-6 text-zinc-100">Force Offline</h3>
-            <p class="mt-1 text-sm leading-6 text-zinc-400">
-              Drop will not make any external connections
-            </p>
-          </div>
-          <Switch v-model="forceOffline" :class="[
-            forceOffline ? 'bg-blue-600' : 'bg-zinc-700',
-            'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out'
-          ]">
-            <span :class="[
-              forceOffline ? 'translate-x-5' : 'translate-x-0',
-              'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
-            ]" />
-          </Switch>
-        </div>
-      </div>
-
-
-      <div class="mt-6">
-        <button type="button" @click="saveSettings" :disabled="saveState.loading" :class="[
-          'inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-300',
-          saveState.success
-            ? 'bg-green-600 hover:bg-green-500 focus-visible:outline-green-600'
-            : 'bg-blue-600 hover:bg-blue-500 focus-visible:outline-blue-600',
-          'disabled:bg-blue-600/50 disabled:cursor-not-allowed'
-        ]">
-          {{ saveState.success ? 'Saved' : 'Save Changes' }}
-        </button>
-      </div>
-    </div>
-  </div>
-  <TransitionRoot as="template" :show="open">
-    <Dialog class="relative z-50" @close="open = false">
-      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
-        leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
-        <div class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity" />
-      </TransitionChild>
-
-      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-          <TransitionChild as="template" enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-            <DialogPanel
-              class="relative transform overflow-hidden rounded-lg bg-zinc-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-              <div class="sm:flex sm:items-start">
-                <div class="mt-3 w-full sm:ml-4 sm:mt-0">
-                  <div>
-                    <label for="dir" class="block text-sm/6 font-medium text-zinc-100">Select game directory</label>
-                    <div class="mt-2">
-                      <button @click="() => selectDirectory()"
-                        class="block text-left w-full rounded-md border-0 px-3 py-1.5 text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 bg-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm/6">
-                        {{
-                          currentDirectory ?? "Click to select a directory..."
-                        }}
-                      </button>
-                    </div>
-                    <p class="mt-2 text-sm text-zinc-400" id="dir-description">
-                      Select an empty directory to add.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                <LoadingButton :disabled="currentDirectory == undefined" type="button" :loading="createDirectoryLoading"
-                  @click="() => submitDirectory()" :class="[
-                    'inline-flex w-full shadow-sm sm:ml-3 sm:w-auto',
-                    currentDirectory === undefined
-                      ? 'text-zinc-400 bg-blue-600/10 hover:bg-blue-600/10'
-                      : 'text-white bg-blue-600 hover:bg-blue-500',
-                  ]">
-                  Add
-                </LoadingButton>
-                <button type="button"
-                  class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
-                  @click="() => cancelDirectory()" ref="cancelButtonRef">
-                  Cancel
-                </button>
-              </div>
-              <div v-if="error" class="mt-3 rounded-md bg-red-600/10 p-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-red-600">
-                      {{ error }}
-                    </h3>
-                  </div>
-                </div>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup lang="ts">
-import {
-  Dialog,
-  DialogPanel,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { FolderIcon, TrashIcon, XCircleIcon } from "@heroicons/vue/16/solid";
-import { invoke } from "@tauri-apps/api/core";
-import { Switch } from '@headlessui/vue'
-import { type Settings } from "~/types";
-
-const open = ref(false);
-const currentDirectory = ref<string | undefined>(undefined);
-const error = ref<string | undefined>(undefined);
-const createDirectoryLoading = ref(false);
-
-const dirs = ref<Array<string>>([]);
-
-const settings = await invoke<Settings>("fetch_settings");
-const downloadThreads = ref(settings?.maxDownloadThreads ?? 4);
-const forceOffline = ref(settings?.forceOffline ?? false);
-
-const saveState = reactive({
-  loading: false,
-  success: false
-});
-
-async function updateDirs() {
-  const newDirs = await invoke<Array<string>>("fetch_download_dir_stats");
-  dirs.value = newDirs;
-}
-
-await updateDirs();
-
-async function selectDirectoryDialog(): Promise<string> {
-  const res = await invoke("plugin:dialog|open", {
-    options: { directory: true },
-  });
-
-  return res as string;
-}
-
-async function selectDirectory() {
-  try {
-    const dir = await selectDirectoryDialog();
-    currentDirectory.value = dir;
-  } catch (e) {
-    error.value = e as string;
-  }
-}
-
-function cancelDirectory() {
-  open.value = false;
-  currentDirectory.value = undefined;
-}
-
-async function submitDirectory() {
-  try {
-    error.value = undefined;
-    if (!currentDirectory.value)
-      throw new Error("Please select a directory first");
-    createDirectoryLoading.value = true;
-
-    // Add directory
-    await invoke("add_download_dir", { newDir: currentDirectory.value });
-
-    // Update list
-    await updateDirs();
-
-    currentDirectory.value = undefined;
-    createDirectoryLoading.value = false;
-    open.value = false;
-  } catch (e) {
-    error.value = e as string;
-    createDirectoryLoading.value = false;
-  }
-}
-
-async function deleteDirectory(index: number) {
-  await invoke("delete_download_dir", { index });
-  await updateDirs();
-}
-
-async function saveSettings() {
-  try {
-    saveState.loading = true;
-    await invoke("update_settings", {
-      newSettings: { maxDownloadThreads: downloadThreads.value, forceOffline: forceOffline.value },
-    });
-
-    // Show success state
-    saveState.success = true;
-
-    // Reset back to normal state after 2 seconds
-    setTimeout(() => {
-      saveState.success = false;
-    }, 2000);
-
-  } catch (error) {
-    console.error('Failed to save settings:', error);
-  } finally {
-    saveState.loading = false;
-  }
-}
-
-function validateNumberInput(event: KeyboardEvent) {
-  // Allow only numbers and basic control keys
-  if (!/^\d$/.test(event.key) &&
-    !['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-    event.preventDefault();
-  }
-}
-
-function validatePaste(event: ClipboardEvent) {
-  // Prevent paste if content contains non-numeric characters
-  const pastedData = event.clipboardData?.getData('text');
-  if (pastedData && !/^\d+$/.test(pastedData)) {
-    event.preventDefault();
-  }
-}
-</script>

main/pages/settings/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="border-b border-zinc-700 py-5">
-    <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
-      General
-    </h3>
-  </div>
-
-  <div class="mt-5 space-y-8">
-    <div class="flex flex-row items-center justify-between">
-      <div>
-        <h3 class="text-sm font-medium leading-6 text-zinc-100">
-          Start with system
-        </h3>
-        <p class="mt-1 text-sm leading-6 text-zinc-400">
-          Drop will automatically start when you log into your computer
-        </p>
-      </div>
-      <Switch
-        v-model="autostartEnabled"
-        :class="[
-          autostartEnabled ? 'bg-blue-600' : 'bg-zinc-700',
-          'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
-        ]"
-      >
-        <span
-          :class="[
-            autostartEnabled ? 'translate-x-5' : 'translate-x-0',
-            'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
-          ]"
-        />
-      </Switch>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Switch } from "@headlessui/vue";
-import { invoke } from "@tauri-apps/api/core";
-
-defineProps<{}>();
-
-const autostartEnabled = ref<boolean>(false);
-
-// Load initial state
-invoke("get_autostart_enabled").then((enabled) => {
-  autostartEnabled.value = enabled as boolean;
-});
-
-// Watch for changes and update autostart
-watch(autostartEnabled, async (newValue: boolean) => {
-  try {
-    await invoke("toggle_autostart", { enabled: newValue });
-  } catch (error) {
-    console.error("Failed to toggle autostart:", error);
-    // Revert the toggle if it failed
-    autostartEnabled.value = !newValue;
-  }
-});
-</script>

main/pages/settings/interface.vue

@@ -1,7 +0,0 @@
-<template>
-    
-</template>
-
-<script setup lang="ts">
-
-</script>

main/pages/store/index.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="grow w-full h-full flex items-center justify-center">
-    <div class="flex flex-col items-center">
-      <BuildingStorefrontIcon
-        class="h-12 w-12 text-blue-600"
-        aria-hidden="true"
-      />
-      <div class="mt-3 text-center sm:mt-5">
-        <h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
-          Store not supported in client
-        </h1>
-        <div class="mt-4">
-          <p class="text-sm text-zinc-400 max-w-lg">
-            Currently, Drop requires you to view the store in your browser.
-            Please click the button below to open it in your default browser.
-          </p>
-          <NuxtLink
-            :href="storeUrl"
-            target="_blank"
-            class="mt-6 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
-          >
-            Open Store <ArrowTopRightOnSquareIcon class="size-4" />
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import {
-  ArrowTopRightOnSquareIcon,
-  BuildingStorefrontIcon,
-} from "@heroicons/vue/20/solid";
-import { invoke } from "@tauri-apps/api/core";
-
-const storeUrl = await invoke<string>("gen_drop_url", { path: "/store" });
-</script>

main/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json",
-  "exclude": ["src-tauri/**/*"]
-}

nuxt.config.ts

@@ -13,9 +13,5 @@ export default defineNuxtConfig({
 
   ssr: false,
 
-  extends: [["../libs/drop-base"]],
-
-  app: {
-    baseURL: "/main",
-  }
+  extends: [["github:drop-oss/drop-base"]],
 });

optimize-appimage.sh

@@ -1,22 +0,0 @@
-## This script is largely useless, because there's not much we can do about AppImage size
-
-ARCH=$(uname -m)
-
-# build tauri apps
-# NO_STRIP=true yarn tauri build -- --verbose
-
-# unpack appimage
-APPIMAGE=$(ls ./src-tauri/target/release/bundle/appimage/*.AppImage)
-"$APPIMAGE" --appimage-extract
-
-# strip binary
-APPIMAGE_UNPACK="./squashfs-root"
-find $APPIMAGE_UNPACK -type f -exec strip -s {} \;
-
-APPIMAGETOOL=$(echo "obsolete-appimagetool-$ARCH.AppImage")
-wget -O $APPIMAGETOOL "https://github.com/AppImage/AppImageKit/releases/download/13/$APPIMAGETOOL"
-chmod +x $APPIMAGETOOL
-
-APPIMAGE_OUTPUT=$(./$APPIMAGETOOL $APPIMAGE_UNPACK | grep ".AppImage" | grep squashfs-root | awk '{ print $6 }')
-
-mv $APPIMAGE_OUTPUT "$APPIMAGE"

package.json

@@ -1,22 +1,45 @@
 {
   "name": "drop-app",
   "private": true,
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
-    "build": "node ./build.mjs",
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
     "tauri": "tauri"
   },
   "dependencies": {
-    "@tauri-apps/api": "^2.7.0",
-    "@tauri-apps/plugin-deep-link": "^2.4.1",
-    "@tauri-apps/plugin-dialog": "^2.3.2",
-    "@tauri-apps/plugin-opener": "^2.4.0",
-    "@tauri-apps/plugin-os": "^2.3.0",
-    "@tauri-apps/plugin-shell": "^2.3.0",
-    "pino": "^9.7.0",
-    "pino-pretty": "^13.1.1"
+    "@headlessui/vue": "^1.7.23",
+    "@heroicons/vue": "^2.1.5",
+    "@maulingmonkey/gamepad": "^0.0.5",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@tauri-apps/api": ">=2.0.0",
+    "@tauri-apps/plugin-deep-link": "~2",
+    "@tauri-apps/plugin-dialog": "^2.0.1",
+    "@tauri-apps/plugin-os": "~2",
+    "@tauri-apps/plugin-shell": ">=2.0.0",
+    "esm-gamecontroller.js": "^1.0.4",
+    "gamepad-events": "^0.7.0",
+    "markdown-it": "^14.1.0",
+    "nuxt": "^3.13.0",
+    "scss": "^0.2.4",
+    "tauri-plugin-gamepad-api": "^0.0.5",
+    "vue": "latest",
+    "vue-router": "latest",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^2.7.1"
-  }
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tauri-apps/cli": ">=2.0.0",
+    "@types/markdown-it": "^14.1.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "sass-embedded": "^1.79.4",
+    "tailwindcss": "^3.4.13"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

pages/auth/failed.vue

@@ -26,7 +26,7 @@
 import { XCircleIcon } from "@heroicons/vue/16/solid";
 
 const route = useRoute();
-const message = route.query.error ?? "An unknown error occurred";
+const message = route.query.error ?? "An unknown error occurred.";
 
 definePageMeta({
   layout: "mini",

pages/error/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
+  >
+    <header
+      class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
+    >
+      <Logo class="h-10 w-auto sm:h-12" />
+    </header>
+    <main
+      class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
+    >
+      <div class="max-w-lg">
+        <h1
+          class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
+        >
+          Unrecoverable error
+        </h1>
+        <p class="mt-6 text-base leading-7 text-zinc-400">
+          Drop encountered an error that it couldn't handle. Please restart the
+          application and file a bug report.
+        </p>
+      </div>
+    </main>
+    <footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
+      <div class="border-t border-blue-600 bg-zinc-900 py-10">
+        <nav
+          class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
+        >
+          <a href="#">Documentation</a>
+          <svg
+            viewBox="0 0 2 2"
+            aria-hidden="true"
+            class="h-0.5 w-0.5 fill-zinc-700"
+          >
+            <circle cx="1" cy="1" r="1" />
+          </svg>
+          <a href="#">Troubleshooting</a>
+          <svg
+            viewBox="0 0 2 2"
+            aria-hidden="true"
+            class="h-0.5 w-0.5 fill-zinc-700"
+          >
+            <circle cx="1" cy="1" r="1" />
+          </svg>
+          <NuxtLink to="/setup/server">Switch instance</NuxtLink>
+        </nav>
+      </div>
+    </footer>
+    <div
+      class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
+    >
+      <img
+        src="@/assets/wallpaper.jpg"
+        alt=""
+        class="absolute inset-0 h-full w-full object-cover"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "mini",
+});
+</script>

pages/index.vue

@@ -1,7 +1,4 @@
 <template />
 
 <script setup lang="ts">
-definePageMeta({
-    layout: false
-})
 </script>

pages/library.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex flex-row h-full">
+    <div class="flex-none max-h-full overflow-y-auto w-64 bg-zinc-950 px-2 py-1">
+      <ul class="flex flex-col gap-y-1">
+        <NuxtLink
+          v-for="(nav, navIdx) in navigation"
+          :key="nav.route"
+          :class="[
+            'transition group rounded flex justify-between gap-x-6 py-2 px-3',
+            navIdx === currentNavigationIndex ? 'bg-zinc-900' : '',
+          ]"
+          :href="nav.route"
+        >
+          <div class="flex items-center min-w-0 gap-x-2">
+            <img
+              class="h-5 w-auto flex-none object-cover rounded-sm bg-zinc-900"
+              :src="icons[navIdx]"
+              alt=""
+            />
+            <div class="min-w-0 flex-auto">
+              <p
+                :class="[
+                  navIdx === currentNavigationIndex
+                    ? 'text-zinc-100'
+                    : 'text-zinc-400 group-hover:text-zinc-300',
+                  'truncate transition text-sm font-display leading-6',
+                ]"
+              >
+                {{ nav.label }}
+              </p>
+            </div>
+          </div>
+        </NuxtLink>
+      </ul>
+    </div>
+    <div class="grow overflow-y-auto">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import type { Game, NavigationItem } from "~/types";
+
+const games: Array<Game> = await invoke("fetch_library");
+const icons = await Promise.all(games.map((e) => useObject(e.mIconId)));
+
+const navigation = games.map((e) => {
+  const item: NavigationItem = {
+    label: e.mName,
+    route: `/library/${e.id}`,
+    prefix: `/library/${e.id}`,
+  };
+  return item;
+});
+
+const currentNavigationIndex = useCurrentNavigationIndex(navigation);
+</script>

pages/library/[id]/index.vue

@@ -0,0 +1,417 @@
+<template>
+  <div
+    class="mx-auto w-full relative flex flex-col justify-center pt-64 z-10 overflow-hidden"
+  >
+    <!-- banner image -->
+    <div class="absolute flex top-0 h-fit inset-x-0 z-[-20]">
+      <img :src="bannerUrl" class="w-full h-auto object-cover" />
+      <h1
+        class="absolute inset-x-0 w-fit mx-auto text-center top-32 -translate-y-[50%] text-4xl text-zinc-100 font-bold font-display z-50 p-4 shadow-xl bg-zinc-900/80 rounded-xl"
+      >
+        {{ game.mName }}
+      </h1>
+      <div
+        class="absolute inset-0 bg-gradient-to-b from-transparent to-50% to-zinc-900"
+      />
+    </div>
+    <!-- main page -->
+    <div class="w-full min-h-screen mx-auto bg-zinc-900 px-5 py-6">
+      <!-- game toolbar -->
+      <div class="h-full flex flex-row gap-x-4 items-stretch">
+        <GameStatusButton
+          @install="() => installFlow()"
+          @launch="() => launch()"
+          @queue="() => queue()"
+          @uninstall="() => uninstall()"
+          :status="status"
+        />
+        <a
+          :href="remoteUrl"
+          target="_blank"
+          type="button"
+          class="inline-flex items-center rounded-md bg-zinc-800/50 px-4 font-semibold text-white shadow-sm hover:bg-zinc-800/80 uppercase font-display"
+        >
+          <BuildingStorefrontIcon class="mr-2 size-5" aria-hidden="true" />
+
+          Store
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <TransitionRoot as="template" :show="installFlowOpen">
+    <Dialog class="relative z-50" @close="installFlowOpen = false">
+      <TransitionChild
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div
+          class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
+        />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div
+          class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <form
+              @submit.prevent="() => install()"
+              class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+            >
+              <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
+                <div class="sm:flex sm:items-start">
+                  <div class="mt-3 text-center sm:mt-0 sm:text-left">
+                    <DialogTitle
+                      as="h3"
+                      class="text-base font-semibold text-zinc-100"
+                      >Install {{ game.mName }}?
+                    </DialogTitle>
+                    <div class="mt-2">
+                      <p class="text-sm text-zinc-400">
+                        Drop will add {{ game.mName }} to the queue to be
+                        downloaded. While downloading, Drop may use up a large
+                        amount of resources, particularly network bandwidth and
+                        CPU utilisation.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="space-y-6">
+                  <div v-if="versionOptions && versionOptions.length > 0">
+                    <Listbox as="div" v-model="installVersionIndex">
+                      <ListboxLabel
+                        class="block text-sm/6 font-medium text-zinc-100"
+                        >Version</ListboxLabel
+                      >
+                      <div class="relative mt-2">
+                        <ListboxButton
+                          class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
+                        >
+                          <span class="block truncate"
+                            >{{
+                              versionOptions[installVersionIndex].versionName
+                            }}
+                            on
+                            {{
+                              versionOptions[installVersionIndex].platform
+                            }}</span
+                          >
+                          <span
+                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                          >
+                            <ChevronUpDownIcon
+                              class="h-5 w-5 text-gray-400"
+                              aria-hidden="true"
+                            />
+                          </span>
+                        </ListboxButton>
+
+                        <transition
+                          leave-active-class="transition ease-in duration-100"
+                          leave-from-class="opacity-100"
+                          leave-to-class="opacity-0"
+                        >
+                          <ListboxOptions
+                            class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                          >
+                            <ListboxOption
+                              as="template"
+                              v-for="(version, versionIdx) in versionOptions"
+                              :key="version.versionName"
+                              :value="versionIdx"
+                              v-slot="{ active, selected }"
+                            >
+                              <li
+                                :class="[
+                                  active
+                                    ? 'bg-blue-600 text-white'
+                                    : 'text-zinc-300',
+                                  'relative cursor-default select-none py-2 pl-3 pr-9',
+                                ]"
+                              >
+                                <span
+                                  :class="[
+                                    selected
+                                      ? 'font-semibold text-zinc-100'
+                                      : 'font-normal',
+                                    'block truncate',
+                                  ]"
+                                  >{{ version.versionName }} on
+                                  {{ version.platform }}</span
+                                >
+
+                                <span
+                                  v-if="selected"
+                                  :class="[
+                                    active ? 'text-white' : 'text-blue-600',
+                                    'absolute inset-y-0 right-0 flex items-center pr-4',
+                                  ]"
+                                >
+                                  <CheckIcon
+                                    class="h-5 w-5"
+                                    aria-hidden="true"
+                                  />
+                                </span>
+                              </li>
+                            </ListboxOption>
+                          </ListboxOptions>
+                        </transition>
+                      </div>
+                    </Listbox>
+                  </div>
+                  <div v-else class="mt-1 rounded-md bg-red-600/10 p-4">
+                    <div class="flex">
+                      <div class="flex-shrink-0">
+                        <XCircleIcon
+                          class="h-5 w-5 text-red-600"
+                          aria-hidden="true"
+                        />
+                      </div>
+                      <div class="ml-3">
+                        <h3 class="text-sm font-medium text-red-600">
+                          There are no supported versions to install. Please
+                          contact your server admin or try again later.
+                        </h3>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="installDirs">
+                    <Listbox as="div" v-model="installDir">
+                      <ListboxLabel
+                        class="block text-sm/6 font-medium text-zinc-100"
+                        >Install to</ListboxLabel
+                      >
+                      <div class="relative mt-2">
+                        <ListboxButton
+                          class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
+                        >
+                          <span class="block truncate">{{
+                            installDirs[installDir]
+                          }}</span>
+                          <span
+                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                          >
+                            <ChevronUpDownIcon
+                              class="h-5 w-5 text-gray-400"
+                              aria-hidden="true"
+                            />
+                          </span>
+                        </ListboxButton>
+
+                        <transition
+                          leave-active-class="transition ease-in duration-100"
+                          leave-from-class="opacity-100"
+                          leave-to-class="opacity-0"
+                        >
+                          <ListboxOptions
+                            class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                          >
+                            <ListboxOption
+                              as="template"
+                              v-for="(dir, dirIdx) in installDirs"
+                              :key="dir"
+                              :value="dirIdx"
+                              v-slot="{ active, selected }"
+                            >
+                              <li
+                                :class="[
+                                  active
+                                    ? 'bg-blue-600 text-white'
+                                    : 'text-zinc-300',
+                                  'relative cursor-default select-none py-2 pl-3 pr-9',
+                                ]"
+                              >
+                                <span
+                                  :class="[
+                                    selected
+                                      ? 'font-semibold text-zinc-100'
+                                      : 'font-normal',
+                                    'block truncate',
+                                  ]"
+                                  >{{ dir }}</span
+                                >
+
+                                <span
+                                  v-if="selected"
+                                  :class="[
+                                    active ? 'text-white' : 'text-blue-600',
+                                    'absolute inset-y-0 right-0 flex items-center pr-4',
+                                  ]"
+                                >
+                                  <CheckIcon
+                                    class="h-5 w-5"
+                                    aria-hidden="true"
+                                  />
+                                </span>
+                              </li>
+                            </ListboxOption>
+                          </ListboxOptions>
+                        </transition>
+                      </div>
+                    </Listbox>
+                  </div>
+                </div>
+
+                <div
+                  v-if="installError"
+                  class="mt-1 rounded-md bg-red-600/10 p-4"
+                >
+                  <div class="flex">
+                    <div class="flex-shrink-0">
+                      <XCircleIcon
+                        class="h-5 w-5 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div class="ml-3">
+                      <h3 class="text-sm font-medium text-red-600">
+                        {{ installError }}
+                      </h3>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
+              >
+                <LoadingButton
+                  :disabled="
+                    !(
+                      versionOptions &&
+                      versionOptions.length > 0 &&
+                      !installDir
+                    )
+                  "
+                  :loading="installLoading"
+                  type="submit"
+                  class="w-full sm:w-fit"
+                >
+                  Install
+                </LoadingButton>
+                <button
+                  type="button"
+                  class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
+                  @click="installFlowOpen = false"
+                  ref="cancelButtonRef"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { BuildingStorefrontIcon } from "@heroicons/vue/24/outline";
+import { XCircleIcon } from "@heroicons/vue/24/solid";
+import { invoke } from "@tauri-apps/api/core";
+
+const route = useRoute();
+const router = useRouter();
+const id = route.params.id.toString();
+
+const { game: rawGame, status } = await useGame(id);
+const game = ref(rawGame);
+
+const remoteUrl: string = await invoke("gen_drop_url", {
+  path: `/store/${game.value.id}`,
+});
+
+const bannerUrl = await useObject(game.value.mBannerId);
+
+const installFlowOpen = ref(false);
+const versionOptions = ref<
+  undefined | Array<{ versionName: string; platform: string }>
+>();
+const installDirs = ref<undefined | Array<string>>();
+async function installFlow() {
+  installFlowOpen.value = true;
+
+  try {
+    versionOptions.value = await invoke("fetch_game_verion_options", {
+      gameId: game.value.id,
+    });
+    installDirs.value = await invoke("fetch_download_dir_stats");
+  } catch (error) {
+    installError.value = (error as string).toString();
+  }
+}
+
+const installLoading = ref(false);
+const installError = ref<string | undefined>();
+const installVersionIndex = ref(0);
+const installDir = ref(0);
+async function install() {
+  try {
+    if (!versionOptions.value)
+      throw new Error("Versions have not been loaded.");
+    installLoading.value = true;
+    await invoke("download_game", {
+      gameId: game.value.id,
+      gameVersion: versionOptions.value[installVersionIndex.value].versionName,
+      installDir: installDir.value,
+    });
+    installLoading.value = false;
+
+    installFlowOpen.value = false;
+  } catch (error) {
+    installError.value = (error as string).toString();
+  }
+}
+
+async function launch() {
+  try {
+    await invoke("launch_game", { gameId: game.value.id });
+  } catch (e) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: `Couldn't run "${game.value.mName}"`,
+        description: `Drop failed to launch "${game.value.mName}": ${e}`,
+        buttonText: "Close",
+      },
+      (e, c) => c()
+    );
+    console.error(e);
+  }
+}
+
+async function queue() {
+  router.push("/queue");
+}
+
+async function uninstall() {
+  await invoke("uninstall_game", {gameId: game.value.id});
+}
+</script>

pages/library/index.vue

@@ -0,0 +1,3 @@
+<template>
+  
+</template>

pages/queue.vue

@@ -1,46 +1,30 @@
 <template>
   <div class="bg-zinc-950 p-4 min-h-full space-y-4">
-    <div
-      class="h-16 overflow-hidden relative rounded-xl flex flex-row border border-zinc-900"
-    >
-      <div
-        class="bg-zinc-900 z-10 w-32 flex flex-col gap-x-2 text-blue-400 font-display items-left justify-center pl-2"
-      >
-        <span class="font-semibold">{{ formatKilobytes(stats.speed) }}/s</span>
-        <span v-if="stats.time > 0" class="text-sm"
-          >{{ formatTime(stats.time) }} left</span
-        >
+    <div class="h-16 overflow-hidden relative rounded-xl flex flex-row border border-zinc-900">
+      <div class="bg-zinc-900 z-10 w-32 flex flex-col gap-x-2 text-blue-400 font-display items-left justify-center pl-2">
+        <span class="font-semibold">{{ formatKilobytes(stats.speed) }}</span>
+        <span v-if="stats.time > 0" class="text-sm">{{ formatTime(stats.time) }} left</span>
+
       </div>
       <div class="absolute inset-0 h-full flex flex-row items-end justify-end">
-        <div
-          v-for="bar in speedHistory"
-          :style="{ height: `${(bar / speedMax) * 100}%` }"
-          class="w-[8px] bg-blue-600/40"
-        />
+        <div v-for="bar in speedHistory" :style="{ height: `${bar / speedMax * 100}%` }" class="w-[8px] bg-blue-600/40" />
       </div>
     </div>
     <draggable v-model="queue.queue" @end="onEnd">
       <template #item="{ element }: { element: (typeof queue.value.queue)[0] }">
-        <li
-          v-if="games[element.meta.id]"
-          :key="element.meta.id"
-          class="mb-4 bg-zinc-900 rounded-lg flex flex-row justify-between gap-x-6 py-5 px-4"
-        >
+        <li v-if="games[element.id]" :key="element.id"
+          class="mb-4 bg-zinc-900 rounded-lg flex flex-row justify-between gap-x-6 py-5 px-4">
           <div class="w-full flex items-center max-w-md gap-x-4 relative">
-            <img
-              class="size-24 flex-none bg-zinc-800 object-cover rounded"
-              :src="games[element.meta.id].cover"
-              alt=""
-            />
+            <img class="size-24 flex-none bg-zinc-800 object-cover rounded" :src="games[element.id].cover" alt="" />
             <div class="min-w-0 flex-auto">
               <p class="text-xl font-semibold text-zinc-100">
-                <NuxtLink :href="`/library/${element.meta.id}`" class="">
+                <NuxtLink :href="`/library/${element.id}`" class="">
                   <span class="absolute inset-x-0 -top-px bottom-0" />
-                  {{ games[element.meta.id].game.mName }}
+                  {{ games[element.id].game.mName }}
                 </NuxtLink>
               </p>
               <p class="mt-1 flex text-xs/5 text-gray-500">
-                {{ games[element.meta.id].game.mShortDescription }}
+                {{ games[element.id].game.mShortDescription }}
               </p>
             </div>
           </div>
@@ -49,79 +33,53 @@
               <p class="text-md text-zinc-500 uppercase font-display font-bold">
                 {{ element.status }}
               </p>
-              <div
-                v-if="element.progress"
-                class="mt-1 w-96 bg-zinc-800 rounded-lg overflow-hidden"
-              >
-                <div
-                  class="h-2 bg-blue-600"
-                  :style="{ width: `${element.progress * 100}%` }"
-                />
+              <div v-if="element.progress" class="mt-1 w-96 bg-zinc-800 rounded-lg overflow-hidden">
+                <div class="h-2 bg-blue-600" :style="{ width: `${element.progress * 100}%` }" />
               </div>
-              <span
-                class="mt-2 inline-flex items-center gap-x-1 text-zinc-400 text-sm font-display"
-                ><span class="text-zinc-300">{{
-                  formatKilobytes(element.current / 1000)
-                }}</span>
-                /
-                <span class="">{{ formatKilobytes(element.max / 1000) }}</span
-                ><ServerIcon class="size-5"
-              /></span>
             </div>
-            <button @click="() => cancelGame(element.meta)" class="group">
-              <XMarkIcon
-                class="transition size-8 flex-none text-zinc-600 group-hover:text-zinc-300"
-                aria-hidden="true"
-              />
+            <button @click="() => cancelGame(element.id)" class="group">
+              <XMarkIcon class="transition size-8 flex-none text-zinc-600 group-hover:text-zinc-300" aria-hidden="true" />
             </button>
           </div>
         </li>
         <p v-else>Loading...</p>
       </template>
     </draggable>
-    <div
-      class="text-zinc-600 uppercase font-semibold font-display w-full text-center"
-      v-if="queue.queue.length == 0"
-    >
+    <div class="text-zinc-600 uppercase font-semibold font-display w-full text-center" v-if="queue.queue.length == 0">
       No items in the queue
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ServerIcon, XMarkIcon } from "@heroicons/vue/20/solid";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
 import { invoke } from "@tauri-apps/api/core";
-import { GameStatusEnum, type DownloadableMetadata, type Game, type GameStatus } from "~/types";
-
-// const actionNames = {
-//   [GameStatusEnum.Downloading]: "downloading",
-//   [GameStatusEnum.Verifying]: "verifying",
-// }
+import gameControl, { type GCGamepad } from "esm-gamecontroller.js";
+import type { Game, GameStatus } from "~/types";
 
 const windowWidth = ref(window.innerWidth);
-window.addEventListener("resize", (event) => {
+window.addEventListener('resize', (event) => {
   windowWidth.value = window.innerWidth;
-});
+})
 
 const queue = useQueueState();
 const stats = useStatsState();
 const speedHistory = useState<Array<number>>(() => []);
 const speedHistoryMax = computed(() => windowWidth.value / 8);
-const speedMax = computed(
-  () => speedHistory.value.reduce((a, b) => (a > b ? a : b)) * 1.3
-);
+const speedMax = computed(() => speedHistory.value.reduce((a, b) => a > b ? a : b) * 1.3);
 const previousGameId = ref<string | undefined>();
 
 const games: Ref<{
   [key: string]: { game: Game; status: Ref<GameStatus>; cover: string };
 }> = ref({});
 
+
 function resetHistoryGraph() {
   speedHistory.value = [];
   stats.value = { time: 0, speed: 0 };
 }
 function checkReset(v: QueueState) {
-  const currentGame = v.queue.at(0)?.meta.id;
+  const currentGame = v.queue.at(0);
   // If we're finished
   if (!currentGame && previousGameId.value) {
     previousGameId.value = undefined;
@@ -132,13 +90,14 @@ function checkReset(v: QueueState) {
   if (!currentGame) return;
   // If we started a new download
   if (currentGame && !previousGameId.value) {
-    previousGameId.value = currentGame;
+    previousGameId.value = currentGame.id;
     resetHistoryGraph();
     return;
   }
   // If it's a different game now
-  if (currentGame != previousGameId.value) {
-    previousGameId.value = currentGame;
+  if (currentGame.id != previousGameId.value
+  ) {
+    previousGameId.value = currentGame.id;
     resetHistoryGraph();
     return;
   }
@@ -154,16 +113,14 @@ watch(stats, (v) => {
     speedHistory.value.splice(0, 1);
   }
   checkReset(queue.value);
-});
+})
 
 function loadGamesForQueue(v: typeof queue.value) {
-  for (const {
-    meta: { id },
-  } of v.queue) {
+  for (const { id } of v.queue) {
     if (games.value[id]) return;
     (async () => {
       const gameData = await useGame(id);
-      const cover = await useObject(gameData.game.mCoverObjectId);
+      const cover = await useObject(gameData.game.mCoverId);
       games.value[id] = { ...gameData, cover };
     })();
   }
@@ -172,14 +129,14 @@ function loadGamesForQueue(v: typeof queue.value) {
 loadGamesForQueue(queue.value);
 
 async function onEnd(event: { oldIndex: number; newIndex: number }) {
-  await invoke("move_download_in_queue", {
+  await invoke("move_game_in_queue", {
     oldIndex: event.oldIndex,
     newIndex: event.newIndex,
   });
 }
 
-async function cancelGame(meta: DownloadableMetadata) {
-  await invoke("cancel_game", { meta });
+async function cancelGame(id: string) {
+  await invoke("cancel_game", { gameId: id });
 }
 
 function formatKilobytes(bytes: number): string {
@@ -193,7 +150,7 @@ function formatKilobytes(bytes: number): string {
     unitIndex++;
   }
 
-  return `${value.toFixed(1)} ${units[unitIndex]}`;
+  return `${value.toFixed(1)} ${units[unitIndex]}/s`;
 }
 
 function formatTime(seconds: number): string {
@@ -203,7 +160,7 @@ function formatTime(seconds: number): string {
 
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) {
-    return `${minutes}m ${Math.round(seconds % 60)}s`;
+    return `${minutes}m ${Math.round(seconds % 60)}s`
   }
 
   const hours = Math.floor(minutes / 60);

pages/settings.vue

@@ -10,13 +10,13 @@
         <ul role="list" class="-mx-2 space-y-1">
           <li v-for="(item, itemIdx) in navigation" :key="item.prefix">
             <NuxtLink :href="item.route" :class="[
-              itemIdx === currentNavigation
+              itemIdx === currentPageIndex
                 ? 'bg-zinc-800/50 text-zinc-100'
                 : 'text-zinc-400 hover:bg-zinc-800/30 hover:text-zinc-200',
               'transition group flex gap-x-3 rounded-md p-2 pr-12 text-sm font-semibold leading-6',
             ]">
               <component :is="item.icon" :class="[
-                itemIdx === currentNavigation
+                itemIdx === currentPageIndex
                   ? 'text-zinc-100'
                   : 'text-zinc-400 group-hover:text-zinc-200',
                 'transition h-6 w-6 shrink-0',
@@ -39,51 +39,12 @@ import {
   CubeIcon,
   HomeIcon,
   RectangleGroupIcon,
-  BugAntIcon,
 } from "@heroicons/vue/16/solid";
 import type { Component } from "vue";
 import type { NavigationItem } from "~/types";
 import { platform } from '@tauri-apps/plugin-os';
-import { invoke } from "@tauri-apps/api/core";
-import { UserIcon } from "@heroicons/vue/20/solid";
 
-const systemData = await invoke<{
-  clientId: string;
-  baseUrl: string;
-  dataDir: string;
-  logLevel: string;
-}>("fetch_system_data");
-
-const isDebugMode = ref(systemData.logLevel.toLowerCase() === "debug");
-const debugRevealed = ref(false);
-
-// Track shift key state and debug reveal
-onMounted(() => {
-  window.addEventListener('keydown', (e) => {
-    if (e.key === 'Shift') {
-      isDebugMode.value = true;
-      debugRevealed.value = true;
-    }
-  });
-  
-  window.addEventListener('keyup', (e) => {
-    if (e.key === 'Shift') {
-      isDebugMode.value = debugRevealed.value || systemData.logLevel.toLowerCase() === "debug";
-    }
-  });
-
-  // Reset debug reveal when leaving the settings page
-  const router = useRouter();
-  router.beforeEach((to) => {
-    if (!to.path.startsWith('/settings')) {
-      debugRevealed.value = false;
-      isDebugMode.value = systemData.logLevel.toLowerCase() === "debug";
-    }
-  });
-});
-
-// Make navigation reactive by wrapping in computed
-const navigation = computed(() => [
+const navigation: Array<NavigationItem & { icon: Component }> = [
   {
     label: "Home",
     route: "/settings",
@@ -91,7 +52,7 @@ const navigation = computed(() => [
     icon: HomeIcon,
   },
   {
-    label: "Interface", 
+    label: "Interface",
     route: "/settings/interface",
     prefix: "/settings/interface",
     icon: RectangleGroupIcon,
@@ -102,27 +63,14 @@ const navigation = computed(() => [
     prefix: "/settings/downloads",
     icon: ArrowDownTrayIcon,
   },
-  {
-    label: "Account",
-    route: "/settings/account",
-    prefix: "/settings/account",
-    icon: UserIcon
-  },
-  ...(isDebugMode.value ? [{
-    label: "Debug Info",
-    route: "/settings/debug", 
-    prefix: "/settings/debug",
-    icon: BugAntIcon,
-  }] : []),
-]);
+];
 
 const currentPlatform = platform();
+switch (currentPlatform) {
+  case "linux":
+    navigation.splice(2, 0, { label: "Compatibility", route: "/settings/compatibility", prefix: "/settings/compatibility", icon: CubeIcon });
+    break;
+}
 
-// Use .value to unwrap the computed ref
-const {currentNavigation} = useCurrentNavigationIndex(navigation.value);
-
-// Watch for navigation changes and update currentPageIndex
-watch(navigation, (newNav) => {
-  currentNavigation.value = useCurrentNavigationIndex(newNav).currentNavigation.value;
-});
+const currentPageIndex = useCurrentNavigationIndex(navigation);
 </script>

pages/settings/compatibility.vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

pages/settings/downloads.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <div class="border-b border-zinc-600 py-2 px-1">
+      <div
+        class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap"
+      >
+        <div class="ml-4 mt-2">
+          <h3 class="text-base font-display font-semibold text-zinc-100">
+            Install directories
+          </h3>
+          <p class="mt-1 text-sm text-zinc-400 max-w-xl">
+            This is where Drop will download game files to, and store them
+            indefinitely while you play. Drop and games may store other
+            information elsewhere, like saves or mods.
+          </p>
+        </div>
+        <div class="ml-4 mt-2 shrink-0">
+          <button
+            @click="() => (open = true)"
+            type="button"
+            class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          >
+            Add new directory
+          </button>
+        </div>
+      </div>
+    </div>
+    <ul role="list" class="divide-y divide-gray-800">
+      <li
+        v-for="(dir, dirIdx) in dirs"
+        :key="dir"
+        class="flex justify-between gap-x-6 py-5"
+      >
+        <div class="flex min-w-0 gap-x-4">
+          <FolderIcon
+            class="h-6 w-6 text-blue-600 flex-none rounded-full"
+            alt=""
+          />
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm/6 text-zinc-100">
+              {{ dir }}
+            </p>
+          </div>
+        </div>
+        <div class="flex shrink-0 items-center gap-x-6">
+          <button
+            @click="() => deleteDirectory(dirIdx)"
+            :disabled="dirs.length <= 1"
+            :class="[
+              dirs.length <= 1
+                ? 'text-zinc-700'
+                : 'text-zinc-400 hover:text-zinc-100',
+              '-m-2.5 block p-2.5',
+            ]"
+          >
+            <span class="sr-only">Open options</span>
+            <TrashIcon class="size-5" aria-hidden="true" />
+          </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <TransitionRoot as="template" :show="open">
+    <Dialog class="relative z-50" @close="open = false">
+      <TransitionChild
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div
+          class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
+        />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel
+              class="relative transform overflow-hidden rounded-lg bg-zinc-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+            >
+              <div class="sm:flex sm:items-start">
+                <div class="mt-3 w-full sm:ml-4 sm:mt-0">
+                  <div>
+                    <label
+                      for="dir"
+                      class="block text-sm/6 font-medium text-zinc-100"
+                      >Select game directory</label
+                    >
+                    <div class="mt-2">
+                      <button
+                        @click="() => selectDirectory()"
+                        class="block text-left w-full rounded-md border-0 px-3 py-1.5 text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 bg-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm/6"
+                      >
+                        {{
+                          currentDirectory ?? "Click to select a directory..."
+                        }}
+                      </button>
+                    </div>
+                    <p class="mt-2 text-sm text-zinc-400" id="dir-description">
+                      Select an empty directory to add.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                <LoadingButton
+                  :disabled="currentDirectory == undefined"
+                  type="button"
+                  :loading="createDirectoryLoading"
+                  @click="() => submitDirectory()"
+                  :class="[
+                    'inline-flex w-full shadow-sm sm:ml-3 sm:w-auto',
+                    currentDirectory === undefined
+                      ? 'text-zinc-400 bg-blue-600/10 hover:bg-blue-600/10'
+                      : 'text-white bg-blue-600 hover:bg-blue-500',
+                  ]"
+                >
+                  Add
+                </LoadingButton>
+                <button
+                  type="button"
+                  class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
+                  @click="() => cancelDirectory()"
+                  ref="cancelButtonRef"
+                >
+                  Cancel
+                </button>
+              </div>
+              <div v-if="error" class="mt-3 rounded-md bg-red-600/10 p-4">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <XCircleIcon
+                      class="h-5 w-5 text-red-600"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-red-600">
+                      {{ error }}
+                    </h3>
+                  </div>
+                </div>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { FolderIcon, TrashIcon, XCircleIcon } from "@heroicons/vue/16/solid";
+import { invoke } from "@tauri-apps/api/core";
+
+const open = ref(false);
+const currentDirectory = ref<string | undefined>(undefined);
+const error = ref<string | undefined>(undefined);
+const createDirectoryLoading = ref(false);
+
+const dirs = ref<Array<string>>([]);
+
+async function updateDirs() {
+  const newDirs = await invoke<Array<string>>("fetch_download_dir_stats");
+  dirs.value = newDirs;
+}
+
+await updateDirs();
+
+async function selectDirectoryDialog(): Promise<string> {
+  const res = await invoke("plugin:dialog|open", {
+    options: { directory: true },
+  });
+
+  return res as string;
+}
+
+async function selectDirectory() {
+  try {
+    const dir = await selectDirectoryDialog();
+    currentDirectory.value = dir;
+  } catch (e) {
+    error.value = e as string;
+  }
+}
+
+function cancelDirectory() {
+  open.value = false;
+  currentDirectory.value = undefined;
+}
+
+async function submitDirectory() {
+  try {
+    error.value = undefined;
+    if (!currentDirectory.value)
+      throw new Error("Please select a directory first.");
+    createDirectoryLoading.value = true;
+
+    // Add directory
+    await invoke("add_download_dir", { newDir: currentDirectory.value });
+
+    // Update list
+    await updateDirs();
+
+    currentDirectory.value = undefined;
+    createDirectoryLoading.value = false;
+    open.value = false;
+  } catch (e) {
+    error.value = e as string;
+    createDirectoryLoading.value = false;
+  }
+}
+
+async function deleteDirectory(index: number) {
+  await invoke("delete_download_dir", { index });
+  await updateDirs();
+}
+</script>

pages/settings/index.vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

pages/settings/interface.vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

pages/store/index.vue

@@ -0,0 +1,2 @@
+<template></template>
+<script setup lang="ts"></script>

plugins.ts

@@ -0,0 +1 @@
+import 'tauri-plugin-gamepad-api'

plugins/global-error-handler.ts

@@ -1,11 +1,8 @@
 export default defineNuxtPlugin((nuxtApp) => {
   // Also possible
-  /*
   nuxtApp.hook("vue:error", (error, instance, info) => {
-    
-    console.error(error, info);
+    console.log(error);
     const router = useRouter();
     router.replace(`/error`);
   });
-  */
 });