Bump version to v0.3.3

* feat: add placeholders for community & news pages

* feat: add placeholder to interface in settings menu

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,31 @@
+---
+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

@@ -0,0 +1,20 @@
+---
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,104 @@
+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 xdg-utils
+        # 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.user allow
+          security add-trusted-cert -r trustRoot -k build.keychain -p codeSign -u -1 drop.pem
+          sudo security authorizationdb remove com.apple.trust-settings.user
+
+          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,4 +26,7 @@ dist-ssr
 .output
 
 src-tauri/flamegraph.svg
-src-tauri/perf*
+src-tauri/perf*
+
+/*.AppImage
+/squashfs-root

.gitlab-ci.yml

@@ -3,7 +3,7 @@ stages:
 
 build-linux:
   stage: build
-  image: ${CI_DEPENDENCY_PROXY_GROUP_IMAGE_PREFIX}/rust:1.81.0-bookworm
+  image: ${CI_DEPENDENCY_PROXY_GROUP_IMAGE_PREFIX}/rustlang/rust:nightly
   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,9 +13,10 @@ 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}"
+      - "*.{deb,rpm,AppImage}"
 
 build-windows:
   stage: build

.gitmodules

@@ -0,0 +1,6 @@
+[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

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

README.md

@@ -2,6 +2,19 @@
 
 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`
@@ -10,7 +23,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 taudi dev`
+e.g. `RUST_LOG=debug yarn tauri dev`
 
 ## Contributing
 Check the original [Drop repo](https://github.com/Drop-OSS/drop/blob/main/CONTRIBUTING.md) for contributing guidelines. 

app.vue

@@ -1,35 +0,0 @@
-<template>
-  <NuxtLayout class="select-none w-screen h-screen">
-    <NuxtPage />
-  </NuxtLayout>
-  <ModalStack />
-</template>
-
-<script setup lang="ts">
-import "~/composables/queue";
-
-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,
-  setupHooks,
-} from "./composables/state-navigation.js";
-
-const router = useRouter();
-
-const state = useAppState();
-state.value = await invoke("fetch_state");
-
-router.beforeEach(async () => {
-  state.value = await invoke("fetch_state");
-});
-
-setupHooks();
-initialNavigation(state);
-
-useHead({
-  title: "Drop",
-});
-</script>

build.mjs

@@ -0,0 +1,48 @@
+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,5 +1,292 @@
 
 
+## 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

@@ -1,81 +0,0 @@
-<template>
-  <button
-    type="button"
-    @click="() => buttonActions[props.status.type]()"
-    :class="[
-      styles[props.status.type],
-      'inline-flex uppercase font-display items-center gap-x-2 rounded-md 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>
-</template>
-
-<script setup lang="ts">
-import {
-  ArrowDownTrayIcon,
-  PlayIcon,
-  QueueListIcon,
-  TrashIcon,
-  WrenchIcon,
-} from "@heroicons/vue/20/solid";
-import type { Component } from "vue";
-import { GameStatusEnum, type GameStatus } from "~/types.js";
-
-const props = defineProps<{ status: GameStatus }>();
-const emit = defineEmits<{
-  (e: "install"): void;
-  (e: "play"): void;
-  (e: "queue"): void;
-}>();
-
-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]: "",
-  [GameStatusEnum.Uninstalling]: "",
-};
-
-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",
-};
-
-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,
-};
-
-const buttonActions: { [key in GameStatusEnum]: () => void } = {
-  [GameStatusEnum.Remote]: () => emit("install"),
-  [GameStatusEnum.Queued]: () => emit("queue"),
-  [GameStatusEnum.Downloading]: () => emit("queue"),
-  [GameStatusEnum.SetupRequired]: () => {},
-  [GameStatusEnum.Installed]: () => emit("play"),
-  [GameStatusEnum.Updating]: () => emit("queue"),
-  [GameStatusEnum.Uninstalling]: () => {},
-};
-</script>

components/HeaderButton.vue

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

composables/app-state.ts

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

composables/game.ts

@@ -1,55 +0,0 @@
-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/queue.ts

@@ -1,13 +0,0 @@
-import { listen } from "@tauri-apps/api/event";
-
-export type QueueState = {
-  queue: Array<{ id: string; status: string, progress: number | null }>;
-};
-
-export const useQueueState = () =>
-  useState<QueueState>("queue", () => ({ queue: [] }));
-
-listen("update_queue", (event) => {
-  const queue = useQueueState();
-  queue.value = event.payload as QueueState;
-});

composables/state-navigation.ts

@@ -1,52 +0,0 @@
-import { listen } from "@tauri-apps/api/event";
-import { AppStatus, type AppState } from "~/types";
-
-export function setupHooks() {
-  const router = useRouter();
-
-  listen("auth/processing", (event) => {
-    router.push("/auth/processing");
-  });
-
-  listen("auth/failed", (event) => {
-    router.push(
-      `/auth/failed?error=${encodeURIComponent(event.payload as string)}`
-    );
-  });
-
-  listen("auth/finished", (event) => {
-    router.push("/store");
-  });
-
-  /*
-
-  document.addEventListener("contextmenu", (event) => {
-    event.target?.dispatchEvent(new Event("contextmenu"));
-    event.preventDefault();
-  });
-
-  */
-}
-
-export function initialNavigation(state: Ref<AppState>) {
-  const router = useRouter();
-
-  switch (state.value.status) {
-    case AppStatus.NotConfigured:
-      router.push({ path: "/setup" }).then(() => {
-        console.log("Pushed Setup");
-      });
-      break;
-    case AppStatus.SignedOut:
-      router.push("/auth");
-      break;
-    case AppStatus.SignedInNeedsReauth:
-      router.push("/auth/signedout");
-      break;
-    case AppStatus.ServerUnavailable:
-      router.push("/error/serverunavailable");
-      break;
-    default:
-      router.push("/store");
-  }
-}

layouts/default.vue

@@ -1,12 +0,0 @@
-<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

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

main/app.vue

@@ -0,0 +1,50 @@
+<template>
+  <LoadingIndicator />
+  <NuxtLayout class="select-none w-screen h-screen">
+    <NuxtPage />
+    <ModalStack />
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import "~/composables/downloads.js";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useAppState } from "./composables/app-state.js";
+import {
+  initialNavigation,
+  setupHooks,
+} from "./composables/state-navigation.js";
+
+const router = useRouter();
+
+const state = useAppState();
+
+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();
+});
+
+setupHooks();
+initialNavigation(state);
+
+useHead({
+  title: "Drop",
+});
+</script>

main/assets/main.scss

@@ -60,3 +60,25 @@ $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;
+}

main/components/GameOptions/Launch.vue

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,122 @@
+<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

@@ -0,0 +1,183 @@
+<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/Header.vue

@@ -11,7 +11,7 @@
               v-for="(nav, navIdx) in navigation"
               :class="[
                 'transition  uppercase font-display font-semibold text-md',
-                navIdx === currentPageIndex
+                navIdx === currentNavigation
                   ? 'text-zinc-100'
                   : 'text-zinc-400 hover:text-zinc-200',
               ]"
@@ -28,9 +28,7 @@
       />
       <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"
@@ -39,21 +37,23 @@
               <component class="h-5" :is="item.icon" />
             </HeaderWidget>
           </li>
+          <OfflineHeaderWidget v-if="state?.status === AppStatus.Offline" />
           <HeaderUserWidget />
         </ol>
       </div>
     </div>
-    <WindowControl class="h-16 w-16 p-4" />
+    <WindowControl  />
   </div>
 </template>
 
 <script setup lang="ts">
 import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
-import type { NavigationItem, QuickActionNav } from "../types";
+import { AppStatus, type NavigationItem, type 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 currentPageIndex = useCurrentNavigationIndex(navigation);
+const { currentNavigation } = useCurrentNavigationIndex(navigation);
 
 const quickActions: Array<QuickActionNav> = [
   {

main/components/HeaderButton.vue

@@ -0,0 +1,5 @@
+<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/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"
       >
-        <PanelWidget class="flex-col gap-y-2">
+        <div 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,20 +49,23 @@
                 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>
-        </PanelWidget>
+        </div>
       </MenuItems>
     </transition>
   </Menu>
@@ -80,27 +83,22 @@ const open = ref(false);
 const router = useRouter();
 router.afterEach(() => {
   open.value = false;
-})
+});
 
 const state = useAppState();
-const profilePictureUrl: string = await invoke("gen_drop_url", {
-  path: `/api/v1/object/${state.value.user?.profilePicture}`,
-});
+const profilePictureUrl: string = await useObject(
+  state.value?.user?.profilePictureObjectId ?? ""
+);
 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",
@@ -110,6 +108,6 @@ const navigation: NavigationItem[] = [
     label: "Quit Drop",
     route: "/quit",
     prefix: "",
-  }
-]
+  },
+];
 </script>

main/components/InitiateAuthModule.vue

@@ -13,11 +13,7 @@
       <div class="max-w-lg">
         <slot />
         <div class="mt-10">
-          <button
-            @click="() => authWrapper_wrapper()"
-            :disabled="loading"
-            class="text-sm text-left font-semibold leading-7 text-blue-600"
-          >
+          <div>
             <div v-if="loading" role="status">
               <svg
                 aria-hidden="true"
@@ -37,10 +33,44 @@
               </svg>
               <span class="sr-only">Loading...</span>
             </div>
-            <span v-else>
-              Sign in with your browser <span aria-hidden="true">&rarr;</span>
+            <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>
-          </button>
+          </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>
 
           <div v-if="error" class="mt-5 rounded-md bg-red-600/10 p-4">
             <div class="flex">
@@ -96,20 +126,46 @@
 
 <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>

main/components/LibrarySearch.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="flex flex-col h-full">
+    <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, navIndex) 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',
+        navIndex === 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 v-if="loading" class="h-full grow flex p-8 justify-center text-zinc-100">
+      <div role="status">
+        <svg aria-hidden="true" class="w-6 h-6 text-transparent animate-spin fill-zinc-600" viewBox="0 0 100 101"
+          fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor" />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill" />
+        </svg>
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+  </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-zinc-400",
+  [GameStatusEnum.Validating]: "text-blue-300",
+  [GameStatusEnum.Running]: "text-green-500",
+  [GameStatusEnum.Remote]: "text-zinc-500",
+  [GameStatusEnum.Queued]: "text-zinc-400",
+  [GameStatusEnum.Updating]: "text-zinc-400",
+  [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 loading = ref(false);
+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 = [];
+    loading.value = true;
+  }
+  // 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);
+  }
+  loading.value = false;
+  rawGames.value = newGames;
+}
+
+// Wait up to 300 ms for the library to load, otherwise
+// show the loading state while we while
+await new Promise<void>((r) => {
+  let hasResolved = false;
+  const resolveFunc = () => {
+    if (!hasResolved) r();
+    hasResolved = true
+
+  }
+  calculateGames(true).then(resolveFunc);
+  setTimeout(resolveFunc, 300);
+})
+
+const navigation = computed(() =>
+  rawGames.value.map((game) => {
+    const status = games[game.id].status;
+
+    const isInstalled = computed(
+      () =>
+        status.value.type != GameStatusEnum.Remote
+    );
+
+    const item = {
+      label: game.mName,
+      route: `/library/${game.id}`,
+      prefix: `/library/${game.id}`,
+      isInstalled,
+      id: game.id,
+    };
+    return item;
+  })
+);
+
+const route = useRoute();
+const currentNavigation = computed(() => {
+  return navigation.value.findIndex((e) => e.route == route.path)
+});
+
+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();
+  if (oldNavigation.route !== navigation.value[currentNavigation.value].route) {
+    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

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

main/components/MiniHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-10 cursor-pointer flex flex-row items-center justify-between bg-zinc-950"
+    class="h-16 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" />

main/components/OfflineHeaderWidget.vue

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,7 @@
+<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/components/WindowControl.vue

@@ -1,4 +1,7 @@
 <template>
+  <HeaderButton v-if="showMinimise" @click="() => minimise()">
+    <MinusIcon />
+  </HeaderButton>
   <HeaderButton @click="() => close()">
     <XMarkIcon />
   </HeaderButton>
@@ -8,11 +11,14 @@
 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();
 }
 
-const window = getCurrentWindow();
+async function minimise() {
+  await window.minimize();
+}
 </script>

main/composables/app-state.ts

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

main/composables/current-page-engine.ts

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

main/composables/downloads.ts

@@ -0,0 +1,34 @@
+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;
+  }>;
+  status: string;
+};
+
+export type StatsState = {
+  speed: number; // Bytes per second
+  time: number; // Seconds,
+};
+
+export const useQueueState = () =>
+  useState<QueueState>("queue", () => ({ queue: [], status: "Unknown" }));
+
+export const useStatsState = () =>
+  useState<StatsState>("stats", () => ({ speed: 0, time: 0 }));
+
+listen("update_queue", (event) => {
+  const queue = useQueueState();
+  queue.value = event.payload as QueueState;
+});
+
+listen("update_stats", (event) => {
+  const stats = useStatsState();
+  stats.value = event.payload as StatsState;
+});

main/composables/game.ts

@@ -0,0 +1,74 @@
+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) => {
+        console.log(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

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

main/composables/state-navigation.ts

@@ -0,0 +1,93 @@
+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");
+  });
+
+  listen("auth/failed", (event) => {
+    router.push(
+      `/auth/failed?error=${encodeURIComponent(event.payload as string)}`
+    );
+  });
+
+  listen("auth/finished", async (event) => {
+    router.push("/library");
+    state.value = JSON.parse(await invoke("fetch_state"));
+  });
+
+  listen("download_error", (event) => {
+    createModal(
+      ModalType.Notification,
+      {
+        title: "Drop encountered an error while downloading",
+        description: `Drop encountered an error while downloading your game: "${(
+          event.payload as unknown as string
+        ).toString()}"`,
+        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) => {
+    event.target?.dispatchEvent(new Event("contextmenu"));
+    event.preventDefault();
+  });
+
+  */
+}
+
+export function initialNavigation(state: ReturnType<typeof useAppState>) {
+  if (!state.value)
+    throw createError({
+      statusCode: 500,
+      statusMessage: "App state not valid",
+      fatal: true,
+    });
+  const router = useRouter();
+
+  switch (state.value.status) {
+    case AppStatus.NotConfigured:
+      router.push({ path: "/setup" });
+      break;
+    case AppStatus.SignedOut:
+      router.push("/auth");
+      break;
+    case AppStatus.SignedInNeedsReauth:
+      router.push("/auth/signedout");
+      break;
+    case AppStatus.ServerUnavailable:
+      router.push("/error/serverunavailable");
+      break;
+    default:
+      router.push("/library");
+  }
+}

main/error.vue

@@ -0,0 +1,91 @@
+<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

@@ -0,0 +1,82 @@
+<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

@@ -0,0 +1,8 @@
+<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/nuxt.config.ts

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

main/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "view",
+  "private": true,
+  "version": "0.3.3",
+  "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

@@ -0,0 +1,37 @@
+<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/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",

main/pages/community.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="grow w-full h-full flex items-center justify-center">
+    <div class="flex flex-col items-center">
+      <WrenchScrewdriverIcon
+        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">
+          Under construction
+        </h1>
+        <div class="mt-4">
+          <p class="text-sm text-zinc-400 max-w-lg">
+            This page hasn't been implemented yet.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  WrenchScrewdriverIcon,
+} from "@heroicons/vue/20/solid";
+</script>

main/pages/index.vue

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

main/pages/library.vue

@@ -0,0 +1,52 @@
+<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

@@ -0,0 +1,674 @@
+<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-if="versionOptions === null || versionOptions?.length == 0"
+          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-else class="w-full flex items-center justify-center p-4">
+          <div role="status">
+            <svg
+              aria-hidden="true"
+              class="w-7 h-7 text-transparent animate-spin fill-white"
+              viewBox="0 0 100 101"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor"
+              />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill"
+              />
+            </svg>
+            <span class="sr-only">Loading...</span>
+          </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_version_options", {
+      gameId: game.value.id,
+    });
+    installDirs.value = await invoke("fetch_download_dir_stats");
+  } catch (error) {
+    installError.value = (error as string).toString();
+    versionOptions.value = undefined;
+  }
+}
+
+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

@@ -0,0 +1,19 @@
+<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/news.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="grow w-full h-full flex items-center justify-center">
+    <div class="flex flex-col items-center">
+      <WrenchScrewdriverIcon
+        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">
+          Under construction
+        </h1>
+        <div class="mt-4">
+          <p class="text-sm text-zinc-400 max-w-lg">
+            This page hasn't been implemented yet.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  WrenchScrewdriverIcon,
+} from "@heroicons/vue/20/solid";
+</script>

main/pages/queue.vue

@@ -0,0 +1,212 @@
+<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>
+      <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>
+    </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"
+        >
+          <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=""
+            />
+            <div class="min-w-0 flex-auto">
+              <p class="text-xl font-semibold text-zinc-100">
+                <NuxtLink :href="`/library/${element.meta.id}`" class="">
+                  <span class="absolute inset-x-0 -top-px bottom-0" />
+                  {{ games[element.meta.id].game.mName }}
+                </NuxtLink>
+              </p>
+              <p class="mt-1 flex text-xs/5 text-gray-500">
+                {{ games[element.meta.id].game.mShortDescription }}
+              </p>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-x-4">
+            <div class="hidden sm:flex sm:flex-col sm:items-end">
+              <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>
+              <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>
+          </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"
+    >
+      No items in the queue
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ServerIcon, 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",
+// }
+
+const windowWidth = ref(window.innerWidth);
+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 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;
+  // If we're finished
+  if (!currentGame && previousGameId.value) {
+    previousGameId.value = undefined;
+    resetHistoryGraph();
+    return;
+  }
+  // If we don't have a game
+  if (!currentGame) return;
+  // If we started a new download
+  if (currentGame && !previousGameId.value) {
+    previousGameId.value = currentGame;
+    resetHistoryGraph();
+    return;
+  }
+  // If it's a different game now
+  if (currentGame != previousGameId.value) {
+    previousGameId.value = currentGame;
+    resetHistoryGraph();
+    return;
+  }
+}
+watch(queue, (v) => {
+  loadGamesForQueue(v);
+  checkReset(v);
+});
+
+watch(stats, (v) => {
+  const newLength = speedHistory.value.push(v.speed);
+  if (newLength > speedHistoryMax.value) {
+    speedHistory.value.splice(0, 1);
+  }
+  checkReset(queue.value);
+});
+
+function loadGamesForQueue(v: typeof queue.value) {
+  for (const {
+    meta: { id },
+  } of v.queue) {
+    if (games.value[id]) return;
+    (async () => {
+      const gameData = await useGame(id);
+      const cover = await useObject(gameData.game.mCoverObjectId);
+      games.value[id] = { ...gameData, cover };
+    })();
+  }
+}
+
+loadGamesForQueue(queue.value);
+
+async function onEnd(event: { oldIndex: number; newIndex: number }) {
+  await invoke("move_download_in_queue", {
+    oldIndex: event.oldIndex,
+    newIndex: event.newIndex,
+  });
+}
+
+async function cancelGame(meta: DownloadableMetadata) {
+  await invoke("cancel_game", { meta });
+}
+
+function formatKilobytes(bytes: number): string {
+  const units = ["KB", "MB", "GB", "TB", "PB"];
+  let value = bytes;
+  let unitIndex = 0;
+  const scalar = 1000;
+
+  while (value >= scalar && unitIndex < units.length - 1) {
+    value /= scalar;
+    unitIndex++;
+  }
+
+  return `${value.toFixed(1)} ${units[unitIndex]}`;
+}
+
+function formatTime(seconds: number): string {
+  if (seconds < 60) {
+    return `${Math.round(seconds)}s`;
+  }
+
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m ${Math.round(seconds % 60)}s`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}
+</script>

main/pages/settings.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="mx-auto max-w-7xl px-8">
+    <div class="border-b border-zinc-700 py-5">
+      <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
+        Settings
+      </h3>
+    </div>
+    <div class="mt-5 flex flex-row gap-12">
+      <nav class="flex flex-col" aria-label="Sidebar">
+        <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
+                ? '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
+                  ? 'text-zinc-100'
+                  : 'text-zinc-400 group-hover:text-zinc-200',
+                'transition h-6 w-6 shrink-0',
+              ]" aria-hidden="true" />
+              {{ item.label }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </nav>
+      <div class="grow">
+        <NuxtPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ArrowDownTrayIcon,
+  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(() => [
+  {
+    label: "Home",
+    route: "/settings",
+    prefix: "/settings",
+    icon: HomeIcon,
+  },
+  {
+    label: "Interface", 
+    route: "/settings/interface",
+    prefix: "/settings/interface",
+    icon: RectangleGroupIcon,
+  },
+  {
+    label: "Downloads",
+    route: "/settings/downloads",
+    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();
+
+// 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;
+});
+</script>

main/pages/settings/account.vue

@@ -0,0 +1,64 @@
+<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

@@ -0,0 +1,134 @@
+<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

@@ -0,0 +1,300 @@
+<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

@@ -0,0 +1,59 @@
+<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

@@ -0,0 +1,23 @@
+<template>
+  <div class="grow w-full h-full flex items-center justify-center">
+    <div class="flex flex-col items-center">
+      <WrenchScrewdriverIcon
+        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">
+          Under construction
+        </h1>
+        <div class="mt-4">
+          <p class="text-sm text-zinc-400 max-w-lg">
+            This page hasn't been implemented yet.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { WrenchScrewdriverIcon } from "@heroicons/vue/20/solid";
+</script>

main/pages/store/index.vue

@@ -0,0 +1,37 @@
+<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/plugins/global-error-handler.ts

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

main/tsconfig.json

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

main/types.ts

@@ -17,7 +17,7 @@ export type User = {
   username: string;
   admin: boolean;
   displayName: string;
-  profilePicture: string;
+  profilePictureObjectId: string;
 };
 
 export type AppState = {
@@ -30,14 +30,20 @@ export type Game = {
   mName: string;
   mShortDescription: string;
   mDescription: string;
-  mIconId: string;
-  mBannerId: string;
-  mCoverId: string;
-  mImageLibrary: string[];
+  mIconObjectId: string;
+  mBannerObjectId: string;
+  mCoverObjectId: string;
+  mImageLibraryObjectIds: string[];
+  mImageCarouselObjectIds: string[];
+};
+
+export type GameVersion = {
+  launchCommandTemplate: string;
 };
 
 export enum AppStatus {
   NotConfigured = "NotConfigured",
+  Offline = "Offline",
   SignedOut = "SignedOut",
   SignedIn = "SignedIn",
   SignedInNeedsReauth = "SignedInNeedsReauth",
@@ -48,13 +54,36 @@ export enum GameStatusEnum {
   Remote = "Remote",
   Queued = "Queued",
   Downloading = "Downloading",
+  Validating = "Validating",
   Installed = "Installed",
   Updating = "Updating",
   Uninstalling = "Uninstalling",
   SetupRequired = "SetupRequired",
+  Running = "Running",
+  PartiallyInstalled = "PartiallyInstalled",
 }
 
 export type GameStatus = {
   type: GameStatusEnum;
   version_name?: string;
+  install_dir?: string;
+};
+
+export enum DownloadableType {
+  Game = "Game",
+  Tool = "Tool",
+  DLC = "DLC",
+  Mod = "Mod",
+}
+
+export type DownloadableMetadata = {
+  id: string;
+  version: string;
+  downloadType: DownloadableType;
+};
+
+export type Settings = {
+  autostart: boolean;
+  maxDownloadThreads: number;
+  forceOffline: boolean;
 };

optimize-appimage.sh

@@ -0,0 +1,22 @@
+## 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"