Tag connect & disconnect fix (#360)

* fix: tag connect/disconnect

* fix: lint

* fix: oidc typo fix

.dockerignore

@@ -1,3 +1,9 @@
+Dockerfile
+.github
+.vscode
+*.md
+
+#### gitignore below
 # Nuxt dev/build outputs
 .output
 .data
@@ -8,6 +14,7 @@ dist
 
 # Node dependencies
 node_modules
+.yarn
 
 # Logs
 logs
@@ -24,3 +31,13 @@ logs
 !.env.example
 
 .data
+
+
+# deploy template
+deploy-template/*
+
+!deploy-template/compose.yml
+
+# generated prisma client
+/prisma/client
+/prisma/validate

.env.example

@@ -1,8 +1,7 @@
 DATABASE_URL="postgres://drop:drop@127.0.0.1:5432/drop"
 
-CLIENT_CERTIFICATES="./.data/ca"
-
-FS_BACKEND_PATH="./.data/objects"
-
 GIANT_BOMB_API_KEY=""
 
+EXTERNAL_URL="http://localhost:3000"
+
+NUXT_PORT=4000

.github/workflows/ci.yml

@@ -1,6 +1,15 @@
 name: CI
 
-on: [pull_request, push]
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+
+permissions:
+  contents: read
 
 jobs:
   typecheck:
@@ -12,17 +21,20 @@ jobs:
         with:
           submodules: true
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-          cache: "yarn"
+          cache: "pnpm"
 
       - name: Install dependencies
-        run: yarn install --immutable --network-timeout 1000000
+        run: pnpm install
 
       - name: Typecheck
-        run: yarn typecheck
+        run: pnpm run typecheck
 
   lint:
     name: Lint
@@ -33,14 +45,17 @@ jobs:
         with:
           submodules: true
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-          cache: "yarn"
+          cache: "pnpm"
 
       - name: Install dependencies
-        run: yarn install --immutable --network-timeout 1000000
+        run: pnpm install
 
       - name: Lint
-        run: yarn lint
+        run: pnpm run lint

.github/workflows/release.yml

@@ -8,10 +8,20 @@ on:
   schedule:
     - cron: "0 2 * * *" # run at 2 AM UTC
 
+env:
+  REGISTRY_IMAGE: ghcr.io/drop-oss/drop
+
 jobs:
-  web:
-    name: Push website Docker image to registry
-    runs-on: ubuntu-latest
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    runs-on: ${{ matrix.runner }}
     permissions:
       packages: write
       contents: read
@@ -20,24 +30,105 @@ jobs:
         uses: actions/checkout@v4
         with:
           submodules: true
+          fetch-depth: 3 # fix for when this gets triggered by tag
+          fetch-tags: true
+          ref: ${{ github.ref }}
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
 
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v3
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
         with:
-          buildkitd-flags: --debug
+          images: ${{ env.REGISTRY_IMAGE }}
 
-      - name: Log in to the Container registry
+      - name: Login to Docker Hub
         uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Determine final version
+        id: get_final_ver
+        run: |
+          BASE_VER=v$(jq -r '.version' package.json)
+          TODAY=$(date +'%Y.%m.%d')
+
+          echo "Today will be: $TODAY"
+          echo "today=$TODAY" >> $GITHUB_OUTPUT
+
+          if [[ "${{ github.event_name }}" == "release" ]]; then
+            FINAL_VER="$BASE_VER"
+          else
+            FINAL_VER="${BASE_VER}-nightly.$TODAY"
+          fi
+
+          echo "Drop's release tag will be: $FINAL_VER"
+          echo "final_ver=$FINAL_VER" >> $GITHUB_OUTPUT
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          platforms: ${{ matrix.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ env.REGISTRY_IMAGE }}
+          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
+          provenance: mode=max
+          sbom: true
+          build-args: |
+            BUILD_DROP_VERSION=${{ steps.get_final_ver.outputs.final_ver }}
+            BUILD_GIT_REF=${{ github.sha }}
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       - name: Extract metadata (tags, labels) for Docker
         id: meta
         uses: docker/metadata-action@v5
@@ -46,6 +137,7 @@ jobs:
             ghcr.io/drop-OSS/drop
           tags: |
             type=schedule,pattern=nightly
+            type=schedule,pattern=nightly.${{ steps.get_final_ver.outputs.today }}
             type=semver,pattern=v{{version}}
             type=semver,pattern=v{{major}}.{{minor}}
             type=semver,pattern=v{{major}}
@@ -55,14 +147,12 @@ jobs:
             # set latest tag for stable releases
             type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
 
-      - name: Build and push image
-        id: build-and-push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}

.gitignore

@@ -33,4 +33,7 @@ deploy-template/*
 !deploy-template/compose.yml
 
 # generated prisma client
-/prisma/client
+/prisma/client
+/prisma/validate
+
+/server/internal/proto

.gitlab-ci.yml

@@ -1,54 +0,0 @@
-variables:
-  GIT_SUBMODULE_STRATEGY: recursive
-
-stages:
-  - build
-
-services:
-  - docker:24.0.5-dind
-
-before_script:
-  - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" "$CI_REGISTRY"
-
-build:
-  stage: build
-  image: docker:latest
-  variables:
-    IMAGE_NAME: $CI_REGISTRY_IMAGE/$CI_COMMIT_REF_NAME:$CI_COMMIT_SHORT_SHA
-    LATEST_IMAGE_NAME: $CI_REGISTRY_IMAGE/$CI_COMMIT_REF_NAME:latest
-    PUBLISH_IMAGE_NAME: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
-    PUBLISH_LATEST_IMAGE_NAME: $CI_REGISTRY_IMAGE:latest
-  script:
-    - docker build -t $IMAGE_NAME .
-    - docker image tag $IMAGE_NAME $LATEST_IMAGE_NAME
-    - docker push $IMAGE_NAME
-    - docker push $LATEST_IMAGE_NAME
-    - |
-      if [ $CI_COMMIT_TAG ]; then
-        docker image tag $IMAGE_NAME $PUBLISH_IMAGE_NAME
-        docker image tag $IMAGE_NAME $PUBLISH_LATEST_IMAGE_NAME
-        docker push $PUBLISH_IMAGE_NAME $PUBLISH_LATEST_IMAGE_NAME
-      fi
-
-build-arm64:
-  stage: build
-  image: arm64v8/docker:latest
-  tags:
-    - aarch64
-  variables:
-    IMAGE_NAME: $CI_REGISTRY_IMAGE/$CI_COMMIT_REF_NAME:$CI_COMMIT_SHORT_SHA-arm64
-    LATEST_IMAGE_NAME: $CI_REGISTRY_IMAGE/$CI_COMMIT_REF_NAME:latest-arm64
-    PUBLISH_IMAGE_NAME: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG-arm64
-    PUBLISH_LATEST_IMAGE_NAME: $CI_REGISTRY_IMAGE:latest-arm64
-  script:
-    - docker build -t $IMAGE_NAME . --platform=linux/arm64
-    - docker image tag $IMAGE_NAME $LATEST_IMAGE_NAME
-    - docker push $IMAGE_NAME
-    - docker push $LATEST_IMAGE_NAME
-    - |
-      if [ $CI_COMMIT_TAG ]; then
-        docker image tag $IMAGE_NAME $PUBLISH_IMAGE_NAME
-        docker image tag $IMAGE_NAME $PUBLISH_LATEST_IMAGE_NAME
-        docker push $PUBLISH_IMAGE_NAME
-        docker push $PUBLISH_LATEST_IMAGE_NAME
-      fi

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "drop-base"]
 	path = drop-base
-	url = https://github.com/Drop-OSS/drop-base.git
+	url = https://github.com/Drop-OSS/drop-base.git
+[submodule "torrential"]
+	path = torrential
+	url = https://github.com/Drop-OSS/torrential.git

.prettierignore

@@ -1 +1,7 @@
 drop-base/
+# file is fully managed by pnpm, no reason to break it
+pnpm-lock.yaml
+
+/torrential/
+.data/**
+**/.data/**

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "jsonRecursiveSort": true,
+  "jsonSortOrder": "{\"/.*/\": \"lexical\"}",
+  "plugins": ["prettier-plugin-sort-json"]
+}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "lokalise.i18n-ally",
+    "esbenp.prettier-vscode",
+    "Prisma.prisma",
+    "bradlc.vscode-tailwindcss",
+    "Vue.volar",
+    "arktypeio.arkdark",
+    "EditorConfig.EditorConfig",
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -1,21 +1,35 @@
 {
-  "spellchecker.ignoreWordsList": ["mTLS", "Wireguard"],
-  "sqltools.connections": [
-    {
-      "previewLimit": 50,
-      "server": "localhost",
-      "port": 5432,
-      "driver": "PostgreSQL",
-      "name": "drop",
-      "database": "drop",
-      "username": "drop",
-      "password": "drop"
-    }
-  ],
   // allow autocomplete for ArkType expressions like "string | num"
   "editor.quickSuggestions": {
     "strings": "on"
   },
+  "i18n-ally.extract.autoDetect": true,
+  "i18n-ally.extract.ignored": ["string >= 14", "string.alphanumeric >= 5"],
+  "i18n-ally.extract.ignoredByFiles": {
+    "components/NewsArticleCreateButton.vue": ["[", "`", "Enter"],
+    "pages/admin/library/sources/index.vue": ["Filesystem"],
+    "server/api/v1/auth/signin/simple.post.ts": ["boolean | undefined"]
+  },
+  "i18n-ally.keepFulfilled": true,
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": ["i18n", "i18n/locales"],
+  // i18n Ally settings
+  "i18n-ally.sortKeys": true,
+  "prisma.pinToPrisma6": false,
+  "spellchecker.ignoreWordsList": ["mTLS", "Wireguard"],
+  "sqltools.connections": [
+    {
+      "database": "drop",
+      "driver": "PostgreSQL",
+      "name": "drop",
+      "password": "drop",
+      "port": 5432,
+      "previewLimit": 50,
+      "server": "localhost",
+      "username": "drop"
+    }
+  ],
+  "typescript.experimental.useTsgo": false,
   // prioritize ArkType's "type" for autoimports
   "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"]
 }

CONTRIBUTING.md

@@ -1,242 +1,3 @@
-# CONTRIBUTING GUIDELINES
+# Contributing
 
-Drop is a community-driven project. Contribution is welcome, encouraged, and appreciated.
-It is also essential for the development of the project.
-
-First, please take a moment to review our [code of conduct](CODE_OF_CONDUCT.md).
-
-These guidelines are an attempt at better addressing pending
-issues and pull requests. Please read them closely.
-
-Foremost, be so kind as to [search](#use-the-search-luke). This ensures any contribution
-you would make is not already covered.
-
-<!-- TOC updateonsave:true depthfrom:2 -->
-
-- [Reporting Issues](#reporting-issues)
-  - [You have a problem](#you-have-a-problem)
-  - [You have a suggestion](#you-have-a-suggestion)
-- [Submitting Pull Requests](#submitting-pull-requests)
-  - [Getting started](#getting-started)
-  - [You have a solution](#you-have-a-solution)
-  - [You have an addition](#you-have-an-addition)
-- [Use the Search, Luke](#use-the-search-luke)
-- [Commit Guidelines](#commit-guidelines)
-  - [Format](#format)
-  - [Style](#style)
-
-<!-- /TOC -->
-
-## Reporting Issues
-
-### You have a problem
-
-Please be so kind as to [search](#use-the-search-luke) for any open issue already covering
-your problem.
-
-If you find one, comment on it, so we know more people are experiencing it.
-
-<!--
-TODO: Add Troubleshooting
-If not, look at the [Troubleshooting](https://github.com/Drop-OSS/docs/Troubleshooting)
-page for instructions on how to gather data to better debug your problem.
--->
-
-If you cannot find an existing issue, you can go ahead and create an issue with as much
-detail as you can provide.
-It should include the data gathered as indicated above, along with the following:
-
-1. How to reproduce the problem
-2. What the correct behavior should be
-3. What the actual behavior is
-
-Please copy to anyone relevant (e.g. plugin maintainers) by mentioning their GitHub handle
-(starting with `@`) in your message.
-
-We will do our very best to help you.
-
-### You have a suggestion
-
-Please be so kind as to [search](#use-the-search-luke) for any open issue already covering
-your suggestion.
-
-If you find one, comment on it, so we know more people are supporting it.
-
-If not, you can go ahead and create an issue. Please copy to anyone relevant (e.g. plugin
-maintainers) by mentioning their GitHub handle (starting with `@`) in your message.
-
-## Submitting Pull Requests
-
-### Getting started
-
-You should be familiar with the basics of
-[contributing on GitHub](https://help.github.com/articles/using-pull-requests)
-
-<!--and have a fork
-[properly set up](https://github.com/drop/docs/Contribution-Technical-Practices).
--->
-
-You MUST always create PRs with _a dedicated branch_ based on the latest upstream tree.
-
-If you create your own PR, please make sure you do it right. Also be so kind as to reference
-any issue that would be solved in the PR description body,
-[for instance](https://help.github.com/articles/closing-issues-via-commit-messages/)
-_"Fixes #XXXX"_ for issue number XXXX.
-
-### You have a solution
-
-Please be so kind as to [search](#use-the-search-luke) for any open issue already covering
-your [problem](#you-have-a-problem), and any pending/merged/rejected PR covering your solution.
-
-If the solution is already reported, try it out and +1 the pull request if the
-solution works ok. On the other hand, if you think your solution is better, post
-it with reference to the other one so we can have both solutions to compare.
-
-If not, then go ahead and submit a PR. Please copy to anyone relevant (e.g. plugin
-maintainers) by mentioning their GitHub handle (starting with `@`) in your message.
-
-### You have an addition
-
-We are absolutely accepting more contributions or features to drop, but please, make sure
-that it is reasonable. Contributions that only cover a very small niche are likely to not
-be added.
-
-Please be so kind as to [search](#use-the-search-luke) for any pending, merged or rejected Pull Requests
-covering or related to what you want to add.
-
-If you find one, try it out and work with the author on a common solution.
-
-If not, then go ahead and submit a PR. Please copy to anyone relevant (e.g. plugin
-maintainers) by mentioning their GitHub handle (starting with `@`) in your message.
-
-For any extensive change, such as API changes, you will have to find testers to +1 your PR.
-
----
-
-## Use the Search, Luke
-
-_May the Force (of past experiences) be with you_
-
-GitHub offers [many search features](https://help.github.com/articles/searching-github/)
-to help you check whether a similar contribution to yours already exists. Please search
-before making any contribution, it avoids duplicates and eases maintenance. Trust me,
-that works 90% of the time.
-
-You can also take a look at the [FAQ](https://github.com/Drop-OSS/docs/wiki/FAQ)
-to be sure your contribution has not already come up.
-
-If all fails, your thing has probably not been reported yet, so you can go ahead
-and [create an issue](#reporting-issues) or [submit a PR](#submitting-pull-requests).
-
----
-
-## Commit Guidelines
-
-Drop uses the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
-specification. The automatic changelog tool uses these to automatically generate
-a changelog based on the commit messages. Here's a guide to writing a commit message
-to allow this:
-
-### Format
-
-```
-type(scope)!: subject
-```
-
-- `type`: the type of the commit is one of the following:
-
-  - `feat`: new features.
-  - `fix`: bug fixes.
-  - `docs`: documentation changes.
-  - `refactor`: refactor of a particular code section without introducing
-    new features or bug fixes.
-  - `style`: code style improvements.
-  - `perf`: performance improvements.
-  - `test`: changes to the test suite.
-  - `ci`: changes to the CI system.
-  - `build`: changes to the build system.
-  - `chore`: for other changes that don't match previous types. This doesn't appear
-    in the changelog.
-
-- `scope`: section of the codebase that the commit makes changes to. If it makes changes to
-  many sections, or if no section in particular is modified, leave blank without the parentheses.
-  Examples:
-
-  - Commit that changes the `git` plugin:
-
-  ```
-  feat(git): add alias for `git commit`
-  ```
-
-  - Commit that changes many plugins:
-
-  ```
-  style: fix inline declaration of arrays
-  ```
-
-  For changes to plugins or themes, the scope should be the plugin or theme name:
-
-  - ✅ `fix(agnoster): commit subject`
-  - ❌ `fix(theme/agnoster): commit subject`
-
-- `!`: this goes after the `scope` (or the `type` if scope is empty), to indicate that the commit
-  introduces breaking changes.
-
-  Optionally, you can specify a message that the changelog tool will display to the user to indicate
-  what's changed and what they can do to deal with it. You can use multiple lines to type this message;
-  the changelog parser will keep reading until the end of the commit message or until it finds an empty
-  line.
-
-  Example (made up):
-
-  ```
-  style(agnoster)!: change dirty git repo glyph
-
-  BREAKING CHANGE: the glyph to indicate when a git repository is dirty has
-  changed from a Powerline character to a standard UTF-8 emoji. You can
-  change it back by setting `ZSH_THEME_DIRTY_GLYPH`.
-
-  Fixes #420
-
-  Co-authored-by: Username <email>
-  ```
-
-- `subject`: a brief description of the changes. This will be displayed in the changelog. If you need
-  to specify other details, you can use the commit body, but it won't be visible.
-
-  Formatting tricks: the commit subject may contain:
-
-  - Links to related issues or PRs by writing `#issue`. This will be highlighted by the changelog tool:
-
-    ```
-    feat(archlinux): add support for aura AUR helper (#9467)
-    ```
-
-  - Formatted inline code by using backticks: the text between backticks will also be highlighted by
-    the changelog tool:
-    ```
-    feat(shell-proxy): enable unexported `DEFAULT_PROXY` setting (#9774)
-    ```
-
-### Style
-
-Try to keep the first commit line short. It's harder to do using this commit style but try to be
-concise, and if you need more space, you can use the commit body. Try to make sure that the commit
-subject is clear and precise enough that users will know what changed by just looking at the changelog.
-
----
-
-<!--
-## Volunteer
-
-Very nice!! :)
-
-Please have a look at the [Volunteer](https://github.com/ohmyzsh/ohmyzsh/wiki/Volunteers)
-page for instructions on where to start and more.
--->
-
-## Reference
-
-This contributing guide is adapted from the
-[oh-my-zsh contribution guide](https://github.com/ohmyzsh/ohmyzsh/blob/master/CONTRIBUTING.md).
-If there are any issues with this, please email admin@deepcore.dev.
+Check out our contributing guidelines on our developer docs: [https://developer.droposs.org/contributing](https://developer.droposs.org/contributing).

Dockerfile

@@ -1,30 +1,75 @@
-# pull pre-configured and updated build environment
-FROM debian:testing-20250317-slim AS build-system
+# syntax=docker/dockerfile:1
 
-# setup workdir - has to be the same filepath as app because fuckin' Prisma
+FROM node:lts-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 WORKDIR /app
 
-# install dependencies and build
-RUN apt-get update -y
-RUN apt-get install node-corepack -y
-RUN corepack enable
+## so corepack knows pnpm's version
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+## prevent prompt to download
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+## setup for offline
+RUN corepack pack
+## don't call out to network anymore
+ENV COREPACK_ENABLE_NETWORK=0
+
+### INSTALL DEPS ONCE
+FROM base AS deps
+RUN pnpm install --frozen-lockfile --ignore-scripts
+
+### BUILD TORRENTIAL
+FROM rustlang/rust:nightly-alpine AS torrential-build
+RUN apk add musl-dev
+WORKDIR /build
+COPY torrential .
+RUN apk add protoc
+RUN cargo build --release
+
+### BUILD APP
+FROM base AS build-system
+
+ENV NODE_ENV=production
+ENV NUXT_TELEMETRY_DISABLED=1
+
+## add git so drop can determine its git ref at build
+RUN apk add --no-cache git
+
+## copy deps and rest of project files
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-RUN NUXT_TELEMETRY_DISABLED=1 yarn install --network-timeout 1000000
-RUN NUXT_TELEMETRY_DISABLED=1 yarn prisma generate
-RUN NUXT_TELEMETRY_DISABLED=1 yarn build
+
+ARG BUILD_DROP_VERSION
+ARG BUILD_GIT_REF
+
+## build
+RUN pnpm run postinstall && pnpm run build
+
 
 # create run environment for Drop
-FROM node:lts-slim AS run-system
+FROM base AS run-system
 
-WORKDIR /app
+ENV NODE_ENV=production
+ENV NUXT_TELEMETRY_DISABLED=1
 
+# RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn add --network-timeout 1000000 --no-lockfile --ignore-scripts prisma@6.11.1
+RUN apk add --no-cache pnpm 7zip nginx
+RUN pnpm install prisma@7.3.0
+# init prisma to download all required files
+RUN pnpm prisma init
+
+COPY --from=build-system /app/prisma.config.ts ./
 COPY --from=build-system /app/.output ./app
 COPY --from=build-system /app/prisma ./prisma
-COPY --from=build-system /app/package.json ./
 COPY --from=build-system /app/build ./startup
+COPY --from=build-system /app/build/nginx.conf /nginx.conf
+COPY --from=torrential-build /build/target/release/torrential /usr/bin/
 
-# OpenSSL as a dependency for Drop (TODO: seperate build environment)
-RUN apt-get update -y && apt-get install -y openssl
-RUN yarn global add prisma@6.7.0
+ENV LIBRARY="/library"
+ENV DATA="/data"
+ENV NGINX_CONFIG="/nginx.conf"
+# NGINX's port
+ENV PORT=4000
 
-CMD ["/app/startup/launch.sh"]
+CMD ["sh", "/app/startup/launch.sh"]

README.md

@@ -6,72 +6,32 @@
 # Drop
 
 [![Website](https://img.shields.io/badge/website-000000?style=for-the-badge&logo=About.me&logoColor=white)](https://droposs.org)
+[![Docs](https://img.shields.io/badge/DOCS-black?style=for-the-badge&logo=docusaurus)](https://docs.droposs.org/)
+[![Static Badge](https://img.shields.io/badge/FORUM-blue?style=for-the-badge)](https://forum.droposs.org)
 [![GitHub License](https://img.shields.io/badge/AGPL--3.0-red?style=for-the-badge)](LICENSE)
 [![Discord](https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/ACq4qZp4a9)
 [![Open Collective](https://img.shields.io/badge/OpenCollective-1F87FF?style=for-the-badge&logo=OpenCollective&logoColor=white)](https://opencollective.com/drop-oss)
+[![Weblate project translated](https://img.shields.io/weblate/progress/drop?server=https%3A%2F%2Ftranslate.droposs.org&style=for-the-badge&logo=weblate)
+](https://translate.droposs.org/engage/drop/)
 
-Drop is an open-source game distribution platform, like GameVault or Steam. It's designed to distribute and shared DRM-free game quickly, all while being incredibly flexible, beautiful and fast.
+Drop is an open-source game distribution platform, similar to GameVault or Steam. It's designed to distribute and share DRM-free games quickly, all while being incredibly flexible, beautiful, and fast.
+
+<div align="center">
+<img src="https://droposs.org/_ipx/f_webp&q_80/images/carousel/store.png" alt="Drop Screenshot" width="900rem"/>
+</div>
 
 ## Philosophy
 
-1. Drop is flexible. While abstractions and interfaces can make the codebase more complicated, the flexibility is worth it.
-2. Drop is secure. The nature of Drop means an instance can never be accessible without authentication. In line with #1, Drop also supports a huge variety of authentication mechanisms, from a username/password to SSO.
-3. Drop is user-friendly. The interface is designed to be clean and simple to use, with complexity available to the users who want it.
+1. Drop is flexible. While abstractions and interfaces can complicate the codebase, the flexibility is worth it.
+2. Drop is secure. The nature of Drop means an instance can never be accessible without authentication. In line with #1, Drop also supports a huge variety of authentication mechanisms, from username/password to SSO.
+3. Drop is user-friendly. The interface is designed to be clean and simple to use, with advanced features available to users who want them.
 
 ## Deployment
 
-To just deploy Drop, we've set up a simple docker compose file in deploy-template.
-
-1. Generate a [GiantBomb API Key](https://www.giantbomb.com/api/)
-2. Navigate to the deploy-template directory in your terminal (`cd deploy-template`)
-3. Edit the compose.yml file (`nano compose.yml`) and copy your GiamtBomb API Key into the GIANT_BOMB_API_KEY environment variable
-4. Run `docker compose up -d`
-
-Your drop server should now be running. To register the admin user, navigate to http://your.drop.server.ip:3000/register?id=admin
-and fill in the required forms
-
-### Adding a game
-
-To add a game to the drop library, do as follows:
-
-1. Ensure that the current user owns the library folder with `sudo chown -R $(id -u $(whoami)) library`
-2. `cd library`
-3. `mkdir <GAME_NAME>` with the name of the game which you would like to register
-4. `cd <GAME_NAME>`
-5. `mkdir <VERSION_NAME>` Upload files for the specific game version to this folder
-6. Navigate to http://your.drop.server.ip:3000/
-7. Import game metadata (uses GiantBomb API Key) by selecting the game and specifying which entry to import
-8. Navigate to http://your.drop.server.ip:3000/admin/library
-9. You should see the game which you have just imported listed in this menu. There should be a notification that "Drop has detected you have new verions of this game to import". Select import here.
-10. Select the game version to import and thus fill in fields as required.
-
-## Tech Stack
-
-This repo uses the Nuxt 3 + TailwindCSS stack, with the `yarn` package manager.
-
-For the database, Drop uses Prisma connected to PostgreSQL.
-
-## Development
-
-To get started with development, you need `yarn --optional` and `docker compose` installed (or know how to set up a PostgreSQL database).
-
-### Note: `--optional` flag is **REQUIRED**
-
-Drop uses a utility package called droplet that's written in Rust. It has builts for Linux (GNU) and Windows, and they are set up as optional packages. `npm` installs these by default, but `yarn` needs the `--optional` flag.
-
-Steps:
-
-1. Run `git submodule update --init --recursive` to setup submodules
-1. Copy the `.env.example` to `.env` and add your GiantBomb metadata key (more metadata providers coming)
-1. Create the `.data` directory with `mkdir .data`
-1. Ensure that your user owns the `.data` directory with `sudo chown -R $(id -u $(whoami))`
-1. Open up a terminal and navigate to `dev-tools`, and run `docker compose up`
-1. Open up another terminal in the root directory of the project and run `yarn` and then `yarn dev` to start the dev server
-
-As part of the first-time bootstrap, Drop creates an invitation with the fixed id of 'admin'. So, to create an admin account, go to:
-
-http://localhost:3000/auth/register?id=admin
+See our documentation on how to [deploy Drop](https://docs.droposs.org/docs/guides/quickstart) for more information.
 
 ## Contributing
 
-Please see the [in-depth contributing guide](CONTRIBUTING.md)
+Please see the [in-depth contributing guide](CONTRIBUTING.md). The guide includes information on how to set up the project, how to contribute code, how to report issues, and even how to effectively translate Drop.
+
+[![Drop Translation Progress](https://translate.droposs.org/widget/drop/horizontal-auto.svg)](https://translate.droposs.org/engage/drop/)

app.vue

@@ -4,20 +4,51 @@
     <NuxtPage />
   </NuxtLayout>
   <ModalStack />
+  <div
+    v-if="showExternalUrlWarning"
+    class="fixed flex flex-row gap-x-2 right-0 bottom-0 m-2 px-2 py-2 z-50 text-right bg-red-700/90 rounded-lg"
+  >
+    <div class="flex flex-col">
+      <span class="text-sm text-zinc-200 font-bold font-display">{{
+        $t("errors.externalUrl.title")
+      }}</span>
+      <span class="text-xs text-red-400">{{
+        $t("errors.externalUrl.subtitle")
+      }}</span>
+    </div>
+    <button class="text-red-200" @click="() => hideExternalURL()">
+      <XMarkIcon class="size-5" />
+    </button>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+
 await updateUser();
+
+const user = useUser();
+const apiDetails = await $dropFetch("/api/v1");
+const clientMode = isClientRequest();
+
+const showExternalUrlWarning = ref(false);
+function checkExternalUrl() {
+  if (!import.meta.client || clientMode) return;
+  const realOrigin = window.location.origin.trim();
+  const chosenOrigin = apiDetails.external.trim();
+  const ignore = window.localStorage.getItem("ignoreExternalUrl");
+  if (ignore && ignore == "true") return;
+  showExternalUrlWarning.value = !(realOrigin == chosenOrigin);
+}
+
+function hideExternalURL() {
+  window.localStorage.setItem("ignoreExternalUrl", "true");
+  showExternalUrlWarning.value = false;
+}
+
+if (user.value?.admin) {
+  onMounted(() => {
+    checkExternalUrl();
+  });
+}
 </script>
-
-<style scoped>
-/* You can customise the default animation here. */
-
-::view-transition-old(root) {
-  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
-}
-
-::view-transition-new(root) {
-  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
-}
-</style>

assets/tailwindcss.css

@@ -2,3 +2,12 @@
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 @config "../tailwind.config.js";
+
+@layer base {
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"] {
+    -webkit-appearance: none;
+    -moz-appearance: textfield !important;
+  }
+}

buf.gen.yaml

@@ -0,0 +1,5 @@
+version: v2
+plugins:
+  - local: protoc-gen-es
+    out: server/internal/proto
+    opt: target=ts

build/launch.sh

@@ -2,8 +2,7 @@
 
 # This file starts up the Drop server by running migrations and then starting the executable
 echo "[Drop] performing migrations..."
-ls ./prisma/migrations/
-prisma migrate deploy
+pnpm prisma migrate deploy
 
 # Actually start the application
-node /app/app/server/index.mjs
+node /app/app/server/index.mjs

build/nginx.conf

@@ -0,0 +1,41 @@
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+pid nginx.pid;
+error_log stderr;
+daemon off;
+
+http {
+    default_type  application/octet-stream;
+
+    sendfile        on;
+    server_tokens off;
+    
+    access_log nginx_host.access.log;
+    client_body_temp_path client_body;
+    fastcgi_temp_path fastcgi_temp;
+    proxy_temp_path proxy_temp;
+    scgi_temp_path scgi_temp;
+    uwsgi_temp_path uwsgi_temp;
+
+    server {
+        listen       3000;
+        server_name  localhost;
+
+        location / {
+                proxy_pass http://localhost:4000;
+                proxy_http_version 1.1;
+                proxy_set_header Upgrade $http_upgrade;
+                proxy_set_header Connection "upgrade";
+        }
+
+        location /api/v1/depot/ {
+                proxy_pass http://localhost:5000;
+                proxy_read_timeout 300s;
+                proxy_connect_timeout 75s;
+        }
+    }
+}

changelog.md

@@ -190,6 +190,198 @@
 
 _changelog generated by_ [go-conventional-commits](https://github.com/joselitofilho/go-conventional-commits)
 
+## Release 0.2.0-beta
+
+### Fixes
+
+- fix recursive dirs util #02d6346
+- Fix username length requirement #0a5a649
+- remove dynamic imports #0f10626
+- fix for missing developers or publishers #25fc957
+- split prisma schemas #2859005
+- results are returned alphabetically #33d3770
+- update prisma schemas #36776cc
+- removed global flag #43e32b4
+- properly disconnect websockets from task handler #5358f1f
+- follow best practices #54c5d55
+- future lenience #5c78b20
+- fix width of token breaking things #61d88c3
+- fixed websocket authentication #62ea9a1
+- fix delta manifest generation #6df560c
+- admin invitation w/ system user #8463e35
+- properly import icons #8945196
+- prisma create footprint #952ece8
+- game panel now always shows 3 lines exactly #9c2249e
+- remove unnecessary import #a361c38
+- fix disconnect code #a8f2106
+- fix types #b511b40
+- add drop-base as git submodule #b75ebd1
+- Update README.md with discord link #c6bb21d
+- fix expires requirement in the admin endpoint #c7b675f
+- fix always being created as admin #c7eb11a
+- moved icons and created PlatformClient so we can use the enum on the frontend #cada630
+- recurse submodules #db103de
+- fix FATAL: "root"... message #dbb315a
+- only show versions that are directories #ef8f3ae
+
+### Features
+
+- update prisma & delete games #089c3e0
+- manual handshake #12e3125
+- fetch game endpoint #1f4d075
+- under the hood organisation and consolidation #26a31f6
+- 'no images' slide on image carousel #28baabc
+- improve feedback when metadata fails #2c19e13
+- introduction of 'system user' #2c21a23
+- change name, description and icon #2cfe75a
+- 'manual' metadata provider #2f52a16
+- add disabled state #38fc6b8
+- overhauled version importing #39d7ce7
+- automatically create library folder if it doesn't exist #39fe9d5
+- smoother bar in admin task ui #4488ae2
+- add noWrapper option #4f9b949
+- add version metadata route #5393db3
+- completed admin UI, with minor changes to backend #599da0e
+- adjust gradient #5a1f841
+- keep track of last connected #69e4c25
+- added notification system w/ interwoven refactoring #6e6f09d
+- content length header for chunk downloads #76bceb1
+- add title to tab #7b0756c
+- add button to open in admin panel #7b3b919
+- client capability framework + peer API configuration #7d72a86
+- customisable image carousel and new layout #937954f
+- support more types #9b12d45
+- generate a server certificate for mtls APIs #9c4b6f3
+- new endpoints, ui and beginnings of main store page #9cbdcbc
+- backend #a309651
+- more subtle design improvements #a815542
+- add aden's carousel pagination design #a86045c
+- add header #a8a152e
+- client side search #b50e27f
+- new ws handler #bc0c47c
+- user widget now redirects to actual page #bfafe02
+- require lowercase usernames #d7160ab
+- more ui improvements #e408ac5
+- add modifying game descriptions #e505e58
+- mobile nav #e5cf13f
+- slightly improved game page #e796b46
+- game carousel #ecc819e
+- add enum dictionary type #f2e0182
+- improved ux #f3ed0f6
+- cleanup and raw accessors #f7d767d
+- add support for overriding UMU id #fd4a7d1
+- add .sh for linux #fe9373a
+
+### Other Changes
+
+- quexeky <git@quexeky.dev>
+- fixed manifest generation #03a37f7
+- manual ci/cd #03b0b0c
+- ability to fetch client certs for p2p #0a715fe
+- disable tls in build #0f80fcd
+- Updated README.md #17971e0
+- Merge pull request #18 from Drop-OSS/develop
+- initial work on metadata system #196f87c
+- more ui #1bd19ad
+- remove log statements #1d5e1bd
+- small fixes & SSR disabled #1f575b2
+- update information and setup guide #2236622
+- metadata engine #22ac7f6
+- Update CONTRIBUTING.md #2309407
+- slight bug fixes and clean up #24a0d11
+- almst complete admin ui and initial store designs #27070b6
+- handshakes #2b4382d
+- user mobile header #2e44ef3
+- more consistent naming for globals #305de9f
+- replaced markdown-it with micromark #31e8359
+- fixes to store page for mobile clients #328b9ba
+- game version re-ordering #329c74d
+- verbose yarn install #36568c3
+- patch for no version check in manifest generation #395219d
+- migrate bcrypt to bcryptjs #3a51c9c
+- added download chunk endpoint #3dd6062
+- Update README.md #425934d
+- build only ci #4273a20
+- object storage + full permission system + testing #435551c
+- rename admin socket session map #44c6028
+- bump droplet and add vue carousel #46551f9
+- version importing #46c8f0c
+- back to yarn, with nuxt telemetry force disabled #46d35ad
+- finished object endpoints #486bce8
+- update dependencies and add note about optional dependencies #4fa771a
+- use configuration from docs for ci/cd #52315d0
+- slight fixes to register logic #583301f
+- removed yarn.lock #584bcf1
+- Version bump #5f29c28
+- immutable application settings framework #5fe2036
+- fixed docker daemon location #62a111b
+- copy autodevops configuration #6328c24
+- Delete .gitlab-ci.yml #69f341b
+- admin ui shell #6b5e48d
+- bump @drop/droplet version for windows developers #6ba5cdd
+- Add LICENSE #6e2dc89
+- custom dind #716eac7
+- task API #718f5ba
+- use gitlab ci variable declaration #7194d35
+- move icons into dedicated folder #74fa671
+- another stage of client authentication #7523e53
+- refactoring #7869043
+- moved windows logo into logos dir #789d3ba
+- updated text colours across app #7a88f4c
+- starting docs infra #7d2a1c6
+- more cleaning #7e17626
+- slight patch to rename query to be more consistent #7f4db0c
+- move to raw docker #803752e
+- server side and user client side completed for registration #848a611
+- beginnings of download implementation #8674ac7
+- more consistent naming for object handler #87230fb
+- use autodevops build stage #886beb6
+- Updated tailwind config #88c95d6
+- change name of store file #8999303
+- split prisma schemas #9011cf5
+- client initiate #909432a
+- more client routes to support Drop app update #91b7e10
+- additional polish and QoL features #93bc143
+- upload images to games #9b7ee4e
+- migrate to pnpm due to ci/cd issues with yarn #9cb2d6d
+- run yarn install in CI/CD non interactively #a208fbe
+- completed game importing; partial work on version importing #a7c33e7
+- remove canvas from dependencies #a8f58eb
+- fix registry authentication #ad25d3e
+- consolidate type utils #adb4b73
+- Updated README.md #b0ef675
+- add proper carousel to store page #b2ab827
+- move to yarn v2 #b744671
+- remove client API deadweight #b9ae26c
+- add expires field #be6c30d
+- ca groundwork #bfafd2a
+- cleanup & polish #c355f6f
+- remove bcrypt (debug) #c3914cc
+- non rounded bottom #c4391d3
+- failed gracefully on invalid chunk index #c4a3e4e
+- update deploy template #c4a419f
+- migrate to new droplet ca system #c4d8113
+- docker based deployment #c5d00b4
+- updated CONTRIBUTING.md #cd0d2bf
+- update prisma version #ce0a9ab
+- README update #ceacd84
+- patch metadata handler #cf578bd
+- Added SECURITY.md #d3d93b0
+- finalised client APIs and authentication method #d4e2dc8
+- Update README.md #db916bf
+- object storage interface + utility functions #de388a9
+- initial commit #e1a789f
+- fixed task system #e1c1d7e
+- Update file chunk.get.ts #e4339c3
+- ui groundwork #e52f072
+- Update changelog #eadcaa1
+- check for no version in manifest generation #eb3f9f9
+- break into single column store on lg devices #ecb381e
+- better server side signin redirects #ef13b68
+- patch signin #f3672f8
+
+_changelog generated by_ [go-conventional-commits](https://github.com/joselitofilho/go-conventional-commits)
+
 ## Release 0.1.0-beta
 
 ### Fixes

components/AccountSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex grow flex-col gap-y-5 overflow-y-auto px-6 py-4">
     <span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
-      <UserIcon class="size-5" /> Account Settings
+      <UserIcon class="size-5" /> {{ $t("account.title") }}
     </span>
     <nav class="flex flex-1 flex-col">
       <ul role="list" class="flex flex-1 flex-col gap-y-7">
@@ -45,40 +45,55 @@ import {
   LockClosedIcon,
   DevicePhoneMobileIcon,
   WrenchScrewdriverIcon,
+  CodeBracketIcon,
 } from "@heroicons/vue/24/outline";
 import { UserIcon } from "@heroicons/vue/24/solid";
 import type { Component } from "vue";
 
 const notifications = useNotifications();
+const { t } = useI18n();
 
-const navigation: (NavigationItem & { icon: Component; count?: number })[] = [
-  { label: "Home", route: "/account", icon: HomeIcon, prefix: "/account" },
+const navigation: Ref<
+  (NavigationItem & { icon: Component; count?: number })[]
+> = computed(() => [
   {
-    label: "Security",
+    label: t("account.home.title"),
+    route: "/account",
+    icon: HomeIcon,
+    prefix: "/account",
+  },
+  {
+    label: t("account.security.title"),
     route: "/account/security",
     prefix: "/account/security",
     icon: LockClosedIcon,
   },
   {
-    label: "Devices",
+    label: t("account.devices.title"),
     route: "/account/devices",
     prefix: "/account/devices",
     icon: DevicePhoneMobileIcon,
   },
   {
-    label: "Notifications",
+    label: t("account.token.title"),
+    route: "/account/tokens",
+    prefix: "/account/tokens",
+    icon: CodeBracketIcon,
+  },
+  {
+    label: t("account.notifications.notifications"),
     route: "/account/notifications",
     prefix: "/account/notifications",
     icon: BellIcon,
     count: notifications.value.length,
   },
   {
-    label: "Settings",
+    label: t("account.settings"),
     route: "/account/settings",
     prefix: "/account/settings",
     icon: WrenchScrewdriverIcon,
   },
-];
+]);
 
-const currentPageIndex = useCurrentNavigationIndex(navigation);
+const currentPageIndex = useCurrentNavigationIndex(navigation.value);
 </script>

components/AddLibraryButton.vue

@@ -8,7 +8,7 @@
       class="transition w-full inline-flex items-center justify-center h-full gap-x-2 rounded-none rounded-l-md bg-white/10 hover:bg-white/20 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
       @click="() => toggleLibrary()"
     >
-      {{ inLibrary ? "In Library" : "Add to Library" }}
+      {{ inLibrary ? $t("library.inLib") : $t("library.addToLib") }}
       <CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
       <PlusIcon v-else class="-mr-0.5 h-5 w-5" aria-hidden="true" />
     </LoadingButton>
@@ -36,7 +36,7 @@
             <div
               class="font-display uppercase px-3 py-2 text-sm font-semibold text-zinc-500"
             >
-              Collections
+              {{ $t("library.collection.collections") }}
             </div>
             <div
               class="flex flex-col gap-y-2 py-1 max-h-[150px] overflow-y-auto"
@@ -45,7 +45,7 @@
                 v-if="collections.length === 0"
                 class="px-3 py-2 text-sm text-zinc-500"
               >
-                No collections
+                {{ $t("library.collection.noCollections") }}
               </div>
               <MenuItem
                 v-for="(collection, collectionIdx) in collections"
@@ -75,7 +75,7 @@
                 @click="createCollectionModal = true"
               >
                 <PlusIcon class="mr-2 h-4 w-4" />
-                Add to new collection
+                {{ $t("library.collection.addToNew") }}
               </LoadingButton>
             </div>
           </div>
@@ -84,7 +84,7 @@
     </Menu>
   </div>
 
-  <CreateCollectionModal
+  <ModalCreateCollection
     v-model="createCollectionModal"
     :game-id="props.gameId"
   />
@@ -100,6 +100,7 @@ const props = defineProps<{
 
 const isLibraryLoading = ref(false);
 
+const { t } = useI18n();
 const createCollectionModal = ref(false);
 const collections = await useCollections();
 const library = await useLibrary();
@@ -121,18 +122,9 @@ async function toggleLibrary() {
       body: {
         id: props.gameId,
       },
+      failTitle: t("errors.library.add.title"),
     });
     await refreshLibrary();
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: "Failed to add game to library",
-        // @ts-expect-error attempt to display statusMessage on error
-        description: `Drop couldn't add this game to your library: ${e?.statusMessage}`,
-      },
-      (_, c) => c(),
-    );
   } finally {
     isLibraryLoading.value = false;
   }
@@ -144,24 +136,18 @@ async function toggleCollection(id: string) {
     if (!collection) return;
     const index = collection.entries.findIndex((e) => e.gameId == props.gameId);
 
-    await $dropFetch(`/api/v1/collection/${id}/entry`, {
+    await $dropFetch(`/api/v1/collection/:id/entry`, {
       method: index == -1 ? "POST" : "DELETE",
+      params: { id },
       body: {
         id: props.gameId,
       },
+      failTitle: t("errors.library.add.title"),
     });
 
     await refreshCollection(id);
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: "Failed to add game to library",
-        // @ts-expect-error attempt to display statusMessage on error
-        description: `Drop couldn't add this game to your library: ${e?.statusMessage}`,
-      },
-      (_, c) => c(),
-    );
+  } finally {
+    /* empty */
   }
 }
 </script>

components/ApplicationLogo.vue

@@ -0,0 +1,12 @@
+<template>
+  <template v-if="!mLogoObjectId">
+    <DropLogo />
+  </template>
+  <template v-else>
+    <img :src="useObject(mLogoObjectId)" :alt="`${serverName} logo`" />
+  </template>
+</template>
+
+<script setup lang="ts">
+const { serverName, mLogoObjectId } = await $dropFetch("/api/v1");
+</script>

components/Auth/OpenID.vue

@@ -1,10 +1,27 @@
 <template>
   <div class="flex">
     <a
-      href="/auth/oidc"
+      :href="`/auth/oidc?redirect=${route.query.redirect ?? '/'}`"
       class="transition rounded-md grow inline-flex items-center justify-center bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
     >
-      Sign in with external provider &rarr;
+      <i18n-t
+        keypath="auth.signin.signinWithExternalProvider"
+        tag="span"
+        scope="global"
+      >
+        <template #externalProvider>{{
+          providerName || $t("auth.signin.externalProvider")
+        }}</template>
+        <template #arrow>
+          <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+        </template>
+      </i18n-t>
     </a>
   </div>
 </template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const { providerName = undefined } = defineProps<{ providerName?: string }>();
+</script>

components/Auth/Simple.vue

@@ -4,7 +4,7 @@
       <label
         for="username"
         class="block text-sm font-medium leading-6 text-zinc-300"
-        >Username</label
+        >{{ $t("auth.username") }}</label
       >
       <div class="mt-2">
         <input
@@ -12,7 +12,7 @@
           v-model="username"
           name="username"
           type="username"
-          autocomplete="username"
+          autocomplete="username webauthn"
           required
           class="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"
         />
@@ -23,7 +23,7 @@
       <label
         for="password"
         class="block text-sm font-medium leading-6 text-zinc-300"
-        >Password</label
+        >{{ $t("auth.password") }}</label
       >
       <div class="mt-2">
         <input
@@ -50,19 +50,23 @@
         <label
           for="remember-me"
           class="ml-3 block text-sm leading-6 text-zinc-400"
-          >Remember me</label
+          >{{ $t("auth.signin.rememberMe") }}</label
         >
       </div>
 
       <div class="text-sm leading-6">
-        <NuxtLink to="#" class="font-semibold text-blue-600 hover:text-blue-500"
-          >Forgot password?</NuxtLink
+        <NuxtLink
+          to="#"
+          class="font-semibold text-blue-600 hover:text-blue-500"
+          >{{ $t("auth.signin.forgot") }}</NuxtLink
         >
       </div>
     </div>
 
     <div>
-      <LoadingButton class="w-full" :loading="loading"> Sign in</LoadingButton>
+      <LoadingButton class="w-full" :loading="loading">{{
+        $t("auth.signin.signin")
+      }}</LoadingButton>
     </div>
 
     <div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
@@ -82,35 +86,78 @@
 
 <script setup lang="ts">
 import { XCircleIcon } from "@heroicons/vue/20/solid";
-import type { User } from "~/prisma/client";
+import {
+  startAuthentication,
+  browserSupportsWebAuthn,
+} from "@simplewebauthn/browser";
+import { FetchError } from "ofetch";
 
 const username = ref("");
 const password = ref("");
 const rememberMe = ref(false);
 const loading = ref(false);
 
+async function passkeyAutofill() {
+  let silentWebauthnOptions;
+  try {
+    silentWebauthnOptions = await $dropFetch("/api/v1/auth/passkey/start", {
+      method: "POST",
+    });
+  } catch {
+    return;
+  }
+
+  const result = await startAuthentication({
+    optionsJSON: silentWebauthnOptions,
+    useBrowserAutofill: true,
+  });
+
+  loading.value = true;
+
+  await $dropFetch("/api/v1/auth/passkey/finish", {
+    method: "POST",
+    body: result,
+  });
+
+  await completeSignin();
+}
+
+onMounted(async () => {
+  if (browserSupportsWebAuthn()) {
+    try {
+      await passkeyAutofill();
+    } catch (response) {
+      const message = (response as FetchError).message || t("errors.unknown");
+      error.value = message;
+    } finally {
+      loading.value = false;
+    }
+  }
+});
+
 const error = ref<string | undefined>();
 
-const route = useRoute();
 const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
 
-function signin_wrapper() {
+async function signin_wrapper() {
   loading.value = true;
-  signin()
-    .then(() => {
-      router.push(route.query.redirect?.toString() ?? "/");
-    })
-    .catch((response) => {
-      const message = response.statusMessage || "An unknown error occurred";
-      error.value = message;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
+  try {
+    await signin();
+  } catch (e) {
+    if (e instanceof FetchError) {
+      error.value = e.data.message || t("errors.unknown");
+    } else {
+      error.value = e as string;
+    }
+  } finally {
+    loading.value = false;
+  }
 }
 
 async function signin() {
-  await $dropFetch("/api/v1/auth/signin/simple", {
+  const { result } = await $dropFetch("/api/v1/auth/signin/simple", {
     method: "POST",
     body: {
       username: username.value,
@@ -118,7 +165,11 @@ async function signin() {
       rememberMe: rememberMe.value,
     },
   });
-  const user = useUser();
-  user.value = await $dropFetch<User | null>("/api/v1/user");
+  if (result == "2fa") {
+    router.push({ query: route.query, path: "/auth/mfa" });
+    return;
+  }
+
+  await completeSignin();
 }
 </script>

components/CarouselPagination.vue

@@ -4,9 +4,10 @@
       v-for="(_, i) in amount"
       :key="i"
       :class="[
-        carousel.currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
+        carousel.currentSlide === i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
         'transition-all cursor-pointer h-2 rounded-full',
       ]"
+      @click="slideTo(i)"
     />
   </div>
 </template>
@@ -18,8 +19,8 @@ const carousel = inject(injectCarousel)!;
 
 const amount = carousel.maxSlide - carousel.minSlide + 1;
 
-// function slideTo(index: number) {
-//   const offsetIndex = index + carousel.minSlide;
-//   carousel.nav.slideTo(offsetIndex);
-// }
+function slideTo(index: number) {
+  const offsetIndex = index + carousel.minSlide;
+  carousel.nav.slideTo(offsetIndex);
+}
 </script>

components/CodeInput.vue

@@ -0,0 +1,86 @@
+<template>
+  <input
+    v-for="i in length"
+    ref="codeElements"
+    :key="i"
+    v-model="code[i - 1]"
+    :class="[
+      size,
+      'uppercase appearance-none text-center bg-zinc-900 rounded-xl border-zinc-700 focus:border-blue-600 text-bold font-display text-zinc-100',
+    ]"
+    type="text"
+    pattern="\d*"
+    :placeholder="placeholder[i - 1]"
+    @keydown="(v) => keydown(i - 1, v)"
+    @input="() => input(i - 1)"
+    @focusin="() => select(i - 1)"
+    @paste="(v) => paste(i - 1, v)"
+  />
+</template>
+
+<script setup lang="ts">
+const {
+  length = 7,
+  placeholder = "1A2B3C4",
+  size = "w-16 h-16 text-2xl",
+} = defineProps<{
+  length?: number;
+  placeholder?: string;
+  size?: string;
+}>();
+const emit = defineEmits<{
+  (e: "complete", code: string): void;
+}>();
+
+const codeElements = useTemplateRef("codeElements");
+const code = ref<string[]>([]);
+
+function keydown(index: number, event: KeyboardEvent) {
+  if (event.key === "Backspace" && !code.value[index] && index > 0) {
+    codeElements.value![index - 1].focus();
+  }
+}
+
+function input(index: number) {
+  if (codeElements.value === null) return;
+  const v = code.value[index] ?? "";
+  if (v.length > 1) code.value[index] = v[0];
+
+  if (!(index + 1 >= codeElements.value.length) && v) {
+    codeElements.value[index + 1].focus();
+  }
+
+  if (!(index - 1 < 0) && !v) {
+    codeElements.value[index - 1].focus();
+  }
+
+  if (index == length - 1) {
+    const assembledCode = code.value.join("");
+    if (assembledCode.length == length) {
+      complete(assembledCode);
+    }
+  }
+}
+
+function select(index: number) {
+  if (!codeElements.value) return;
+  if (index >= codeElements.value.length) return;
+  codeElements.value[index].select();
+}
+
+function paste(index: number, event: ClipboardEvent) {
+  const newCode = event.clipboardData!.getData("text/plain");
+  for (let i = 0; i < newCode.length && i < length; i++) {
+    code.value[i] = newCode[i];
+    codeElements.value![i].focus();
+    if (i + 1 == length) {
+      complete(code.value.join(""));
+    }
+  }
+  event.preventDefault();
+}
+
+async function complete(completedCode: string) {
+  emit("complete", completedCode);
+}
+</script>

components/Directory/Library.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex grow flex-col overflow-y-auto px-6 py-4">
     <span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
-      <Bars3Icon class="size-6" /> Library
+      <Bars3Icon class="size-6" /> {{ $t("userHeader.links.library") }}
     </span>
 
     <!-- Search bar -->
@@ -13,7 +13,7 @@
         name="search"
         autocomplete="off"
         class="block w-full rounded-md bg-zinc-900 py-2 pl-9 pr-2 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600"
-        placeholder="Search library..."
+        :placeholder="$t('library.search')"
       />
       <MagnifyingGlassIcon
         class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400"
@@ -31,11 +31,11 @@
       <li v-for="game in filteredLibrary" :key="game.id" class="flex">
         <NuxtLink
           :to="`/library/game/${game.id}`"
-          class="flex flex-row items-center w-full p-1 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
+          class="flex flex-row items-center w-full p-2 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
         >
           <img
-            :src="useObject(game.mCoverObjectId)"
-            class="h-9 w-9 flex-shrink-0 rounded transition-all duration-300 group-hover:scale-105 hover:rotate-[-2deg] hover:shadow-lg"
+            :src="useObject(game.mIconObjectId)"
+            class="h-5 flex-shrink-0 rounded transition-all duration-300 group-hover:scale-105 hover:rotate-[-2deg] hover:shadow-lg"
             alt=""
           />
           <div class="min-w-0 flex-1 pl-2.5">
@@ -53,7 +53,7 @@
       v-else
       class="text-zinc-600 text-sm font-display font-bold uppercase text-center mt-8"
     >
-      {{ !!searchQuery ? "No results" : "No games in library" }}
+      {{ !!searchQuery ? $t("common.noResults") : $t("library.noGames") }}
     </p>
   </div>
 </template>

components/Directory/News.vue

@@ -6,7 +6,7 @@
     <!-- Search and filters -->
     <div class="space-y-6">
       <div>
-        <label for="search" class="sr-only">Search articles</label>
+        <label for="search" class="sr-only">{{ $t("news.search") }}</label>
         <div class="relative">
           <div
             class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
@@ -21,31 +21,35 @@
             v-model="searchQuery"
             type="text"
             class="block w-full rounded-md border-0 bg-zinc-800 py-2.5 pl-10 pr-3 text-zinc-100 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
-            placeholder="Search articles..."
+            :placeholder="$t('news.searchPlaceholder')"
           />
         </div>
       </div>
 
       <div class="pt-2">
-        <label for="date" class="block text-sm font-medium text-zinc-400 mb-2"
-          >Date</label
+        <label
+          for="date"
+          class="block text-sm font-medium text-zinc-400 mb-2"
+          >{{ $t("common.date") }}</label
         >
         <select
           id="date"
           v-model="dateFilter"
           class="mt-1 block w-full rounded-md border-0 bg-zinc-800 py-2 pl-3 pr-10 text-zinc-100 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
         >
-          <option value="all">All time</option>
-          <option value="today">Today</option>
-          <option value="week">This week</option>
-          <option value="month">This month</option>
-          <option value="year">This year</option>
+          <option value="all">{{ $t("news.filter.all") }}</option>
+          <option value="today">{{ $t("common.today") }}</option>
+          <option value="week">{{ $t("news.filter.week") }}</option>
+          <option value="month">{{ $t("news.filter.month") }}</option>
+          <option value="year">{{ $t("news.filter.year") }}</option>
         </select>
       </div>
 
       <!-- Tags -->
       <div>
-        <label class="block text-sm font-medium text-zinc-400 mb-2">Tags</label>
+        <label class="block text-sm font-medium text-zinc-400 mb-2">
+          {{ $t("common.tags") }}
+        </label>
         <div class="flex flex-wrap gap-2">
           <button
             v-for="tag in availableTags"
@@ -87,9 +91,7 @@
               :src="useObject(article.imageObjectId)"
               class="absolute blur-sm inset-0 w-full h-full object-cover transition-all duration-200 group-hover:scale-110"
             />
-            <div
-              class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-800 transition-all duration-200"
-            />
+            <div class="absolute inset-0 bg-zinc-900/50" />
           </div>
 
           <h3 class="relative text-sm font-medium text-zinc-100">
@@ -102,9 +104,9 @@
           <div
             class="relative mt-2 flex items-center gap-x-2 text-xs text-zinc-500"
           >
-            <time :datetime="article.publishedAt">{{
-              formatDate(article.publishedAt)
-            }}</time>
+            <time :datetime="article.publishedAt">
+              {{ $d(new Date(article.publishedAt), "short") }}
+            </time>
           </div>
         </div>
       </NuxtLink>
@@ -146,20 +148,9 @@ const toggleTag = (tag: string) => {
   }
 };
 
-const formatDate = (date: string) => {
-  return new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
-};
-
 const formatExcerpt = (excerpt: string) => {
-  // TODO: same as one in NewsArticleCreateButton
-  // Convert markdown to HTML
-  const html = micromark(excerpt);
-  // Strip HTML tags using regex
-  return html.replace(/<[^>]*>/g, "");
+  // Convert markdown to HTML, micromark is safe
+  return micromark(excerpt);
 };
 
 const filteredArticles = computed(() => {

components/DropLogo.vue

@@ -1,5 +1,6 @@
 <template>
   <svg
+    aria-label="Drop Logo"
     class="text-blue-400"
     viewBox="0 0 24 24"
     fill="none"
@@ -9,6 +10,16 @@
       d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
       stroke="currentColor"
       stroke-width="2"
+      stroke-dasharray="100"
+      :stroke-dashoffset="dashArray"
     />
   </svg>
 </template>
+
+<script setup lang="ts">
+const props = defineProps<{ progress?: number }>();
+
+const dashArray = computed(() =>
+  props.progress === undefined ? 0 : ((100 - props.progress) / 100) * 50 + 50,
+);
+</script>

components/DropWordmark.vue

@@ -10,9 +10,18 @@
         d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"
       />
     </svg>
-    <DropLogo class="h-6" />
-    <span class="text-blue-400 font-display font-bold text-xl uppercase"
-      >Drop</span
-    >
+    <ApplicationLogo aria-hidden="true" class="h-6" />
+    <span class="text-blue-400 font-display font-bold text-xl uppercase">
+      <template v-if="serverName">
+        {{ serverName }}
+      </template>
+      <template v-else>
+        {{ $t("drop.drop") }}
+      </template>
+    </span>
   </div>
 </template>
+
+<script setup lang="ts">
+const { serverName } = await $dropFetch("/api/v1");
+</script>

components/EmojiText.vue

@@ -0,0 +1,15 @@
+<template>
+  <img ref="emojiEl" class="inline-block emoji" :src="url" :alt="emoji" />
+</template>
+
+<script lang="ts" setup>
+import twemoji from "@discordapp/twemoji";
+
+const props = defineProps<{
+  emoji: string;
+}>();
+
+const url = computed(() => {
+  return `/api/v1/emoji/${twemoji.convert.toCodePoint(props.emoji)}`;
+});
+</script>

components/EmulatorWidget.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    v-if="emulator"
+    class="flex space-x-4 rounded-md bg-zinc-900/50 px-6 outline -outline-offset-1 outline-white/10 w-fit text-xs font-bold text-zinc-100"
+  >
+    <div class="inline-flex gap-x-2 items-center">
+      <img :src="useObject(emulator.gameIcon)" class="size-6" />
+      <span>{{ emulator.gameName }}</span>
+    </div>
+    <div class="flex items-center">
+      <svg
+        class="h-full w-6 shrink-0 text-white/10"
+        viewBox="0 0 24 44"
+        preserveAspectRatio="none"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+      </svg>
+      <span class="ml-4">{{ emulator.versionName }}</span>
+    </div>
+    <div class="flex items-center">
+      <svg
+        class="h-full w-6 shrink-0 text-white/10"
+        viewBox="0 0 24 44"
+        preserveAspectRatio="none"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+      </svg>
+      <span class="ml-4 truncate">{{ emulator.launchName }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { EmulatorLaunchObject } from "~/composables/frontend";
+
+defineProps<{ emulator: EmulatorLaunchObject }>();
+</script>

components/GameCarousel.vue

@@ -7,7 +7,11 @@
           :key="gameIdx"
           class="justify-start"
         >
-          <GamePanel :game="game" />
+          <GamePanel
+            :game="game"
+            :href="game ? `/store/${game.id}` : undefined"
+            :show-title-description="showGamePanelTextDecoration"
+          />
         </VueSlide>
 
         <template #addons>
@@ -31,19 +35,23 @@
 </template>
 
 <script setup lang="ts">
-import type { Game } from "~/prisma/client";
+import type { GameModel } from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
-  items: Array<SerializeObject<Game>>;
+  items: Array<SerializeObject<GameModel>>;
   min?: number;
   width?: number;
 }>();
 
+const {
+  store: { showGamePanelTextDecoration },
+} = await $dropFetch(`/api/v1/settings`);
+
 const currentComponent = ref<HTMLDivElement>();
 
 const min = computed(() => Math.max(props.min ?? 8, props.items.length));
-const games: Ref<Array<SerializeObject<Game> | undefined>> = computed(() =>
+const games: Ref<Array<SerializeObject<GameModel> | undefined>> = computed(() =>
   Array(min.value)
     .fill(0)
     .map((_, i) => props.items[i]),

components/GameEditor/Metadata.vue

@@ -1,21 +1,21 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div>
-    <div
-      v-if="game && unimportedVersions !== undefined"
-      class="grow flex flex-col gap-y-8"
-    >
-      <div class="grow w-full h-full lg:pr-[30vw] px-6 py-4 flex flex-col">
+  <div v-if="game!">
+    <div class="grow flex flex-col xl:flex-row gap-y-8">
+      <div class="grow w-full h-full px-6 py-4 flex flex-col">
         <div
           class="flex flex-col lg:flex-row lg:justify-between items-start lg:items-center gap-2"
         >
           <div class="inline-flex items-center gap-4">
-            <img :src="useObject(game.mIconObjectId)" class="size-20" />
+            <!-- icon image -->
+            <img :src="coreMetadataIconUrl" class="size-20" />
             <div>
-              <h1 class="text-5xl font-bold font-display text-zinc-100">
+              <h1
+                class="text-2xl xl:text-5xl font-bold font-display text-zinc-100"
+              >
                 {{ game.mName }}
               </h1>
-              <p class="mt-1 text-lg text-zinc-400">
+              <p class="mt-1 text-sm xl:text-lg text-zinc-400">
                 {{ game.mShortDescription }}
               </p>
             </div>
@@ -25,10 +25,35 @@
             class="relative inline-flex gap-x-3 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"
             @click="() => (showEditCoreMetadata = true)"
           >
-            Edit <PencilIcon class="size-4" />
+            {{ $t("common.edit") }} <PencilIcon class="size-4" />
           </button>
         </div>
 
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-8">
+          <SelectorMultiItem
+            v-model="currentTags"
+            :items="tags"
+            :create="createTag"
+          />
+          <div class="flex flex-col">
+            <label
+              for="releaseDate"
+              class="text-sm/6 font-medium text-zinc-100"
+            >
+              {{ $t("library.admin.game.editReleaseDate") }}
+            </label>
+            <div class="mt-2">
+              <input
+                id="releaseDate"
+                v-model="releaseDate"
+                type="date"
+                name="releaseDate"
+                class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- image carousel pick -->
         <div class="border-b border-zinc-700">
           <div class="border-b border-zinc-700 py-4">
@@ -37,11 +62,10 @@
             >
               <div class="ml-4 mt-4">
                 <h3 class="text-base font-semibold text-zinc-100">
-                  Image Carousel
+                  {{ $t("library.admin.game.imageCarousel") }}
                 </h3>
                 <p class="mt-1 text-sm text-zinc-400 max-w-lg">
-                  Customise what images and what order are shown on the store
-                  page.
+                  {{ $t("library.admin.game.imageCarouselDescription") }}
                 </p>
               </div>
               <div class="ml-4 mt-4 shrink-0">
@@ -50,7 +74,7 @@
                   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"
                   @click="() => (showAddCarouselModal = true)"
                 >
-                  Add from image library
+                  {{ $t("library.admin.game.addImageCarousel") }}
                 </button>
               </div>
             </div>
@@ -59,7 +83,7 @@
             v-if="game.mImageCarouselObjectIds.length == 0"
             class="text-zinc-400 text-center py-8"
           >
-            No images added to the carousel yet.
+            {{ $t("library.admin.game.imageCarouselEmpty") }}
           </div>
 
           <draggable
@@ -76,10 +100,10 @@
                 >
                   <button
                     type="button"
-                    class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
+                    class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                     @click="() => removeImageFromCarousel(element)"
                   >
-                    Remove image
+                    {{ $t("library.admin.game.removeImageCarousel") }}
                   </button>
                 </div>
               </div>
@@ -97,13 +121,18 @@
           >
             <div>
               <CheckIcon
-                v-if="descriptionSaving == 0"
+                v-if="descriptionSaving == DescriptionSavingState.NotLoading"
                 class="size-5 text-zinc-100"
               />
-              <div v-else-if="descriptionSaving == 1">
+              <div
+                v-else-if="descriptionSaving == DescriptionSavingState.Waiting"
+              >
                 <PencilIcon class="animate-pulse size-5 text-zinc-100" />
               </div>
-              <div v-else-if="descriptionSaving == 2" role="status">
+              <div
+                v-else-if="descriptionSaving == DescriptionSavingState.Loading"
+                role="status"
+              >
                 <svg
                   aria-hidden="true"
                   class="w-5 h-5 text-transparent animate-spin fill-white"
@@ -120,7 +149,7 @@
                     fill="currentFill"
                   />
                 </svg>
-                <span class="sr-only">Loading...</span>
+                <span class="sr-only">{{ $t("common.srLoading") }}</span>
               </div>
             </div>
 
@@ -173,36 +202,8 @@
         </div>
       </div>
       <div
-        class="lg:overflow-y-auto lg:border-l lg:border-zinc-800 lg:fixed lg:inset-y-0 lg:z-50 lg:w-[30vw] flex flex-col lg:right-0 gap-y-8 px-6 py-4"
+        class="lg:overflow-y-auto lg:border-l lg:border-zinc-800 lg:block lg:inset-y-0 lg:z-50 lg:w-[30vw] flex flex-col gap-y-8 px-6 py-4"
       >
-        <!-- toolbar -->
-        <div class="inline-flex justify-end items-stretch gap-x-4">
-          <!-- open in library button -->
-          <NuxtLink
-            :href="`/admin/library/${game.id}`"
-            type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-          >
-            Open in Library &rarr;
-            <ArrowTopRightOnSquareIcon
-              class="-mr-0.5 h-7 w-7 p-1"
-              aria-hidden="true"
-            />
-          </NuxtLink>
-          <!-- open in store button -->
-          <NuxtLink
-            :href="`/store/${game.id}`"
-            type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-          >
-            Open in Store
-            <ArrowTopRightOnSquareIcon
-              class="-mr-0.5 h-7 w-7 p-1"
-              aria-hidden="true"
-            />
-          </NuxtLink>
-        </div>
-
         <!-- image library -->
         <div>
           <div class="border-b border-zinc-800 pb-3">
@@ -213,11 +214,10 @@
                 <h3
                   class="text-base font-semibold font-display leading-6 text-zinc-100"
                 >
-                  Image library
+                  {{ $t("library.admin.game.imageLibrary") }}
                 </h3>
                 <p class="mt-1 text-sm text-zinc-400 max-w-lg">
-                  Please note all images uploaded are accessible to all users
-                  through browser dev-tools.
+                  {{ $t("library.admin.game.imageLibraryDescription") }}
                 </p>
               </div>
               <div class="flex-shrink-0">
@@ -226,7 +226,7 @@
                   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"
                   @click="() => (showUploadModal = true)"
                 >
-                  Upload
+                  {{ $t("upload") }}
                 </button>
               </div>
             </div>
@@ -244,25 +244,25 @@
                 <button
                   v-if="image !== game.mBannerObjectId"
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                   @click="() => updateBannerImage(image)"
                 >
-                  Set as banner
+                  {{ $t("library.admin.game.setBanner") }}
                 </button>
                 <button
                   v-if="image !== game.mCoverObjectId"
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                   @click="() => updateCoverImage(image)"
                 >
-                  Set as cover
+                  {{ $t("library.admin.game.setCover") }}
                 </button>
                 <button
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 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"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                   @click="() => deleteImage(image)"
                 >
-                  Delete image
+                  {{ $t("library.admin.game.deleteImage") }}
                 </button>
               </div>
               <div
@@ -270,34 +270,44 @@
                   image === game.mBannerObjectId ||
                   image === game.mCoverObjectId
                 "
-                class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
+                class="absolute bottom-0 left-0 flex flex-row gap-x-1 p-1"
               >
-                current
-                {{
-                  [
-                    image === game.mBannerObjectId ? "banner" : undefined,
-                    image === game.mCoverObjectId ? "cover" : undefined,
-                  ]
-                    .filter((e) => e)
-                    .join(" & ")
-                }}
+                <span
+                  v-for="[key] of (
+                    [
+                      [
+                        $t('library.admin.game.currentBanner'),
+                        image === game.mBannerObjectId,
+                      ],
+                      [
+                        $t('library.admin.game.currentCover'),
+                        image === game.mCoverObjectId,
+                      ],
+                    ] as const
+                  ).filter((e) => e[1])"
+                  :key="key"
+                  class="inline-flex items-center rounded-full bg-blue-900 px-2 py-1 text-xs font-medium text-blue-100"
+                  >{{ key }}</span
+                >
               </div>
             </div>
           </div>
         </div>
-        
       </div>
     </div>
-    <UploadFileDialog
+    <ModalUploadFile
       v-model="showUploadModal"
       :options="{ id: game.id }"
       accept="image/*"
       endpoint="/api/v1/admin/game/image"
-      @upload="(result: Game) => uploadAfterImageUpload(result)"
+      :multiple="true"
+      @upload="(result: GameModel) => uploadAfterImageUpload(result)"
     />
     <ModalTemplate v-model="showAddCarouselModal">
       <template #default>
-        <div class="grid grid-cols-2 grid-flow-dense gap-4">
+        <div
+          class="grid grid-cols-2 grid-flow-dense gap-4 max-h-[70vh] overflow-y-auto p-4"
+        >
           <div
             v-for="(image, imageIdx) in validAddCarouselImages"
             :key="imageIdx"
@@ -309,10 +319,10 @@
             >
               <button
                 type="button"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                 @click="() => addImageToCarousel(image)"
               >
-                Add
+                {{ $t("add") }}
               </button>
             </div>
           </div>
@@ -320,7 +330,7 @@
             v-if="validAddCarouselImages.length == 0"
             class="text-zinc-400 col-span-2"
           >
-            No images to add.
+            {{ $t("library.admin.game.addCarouselNoImages") }}
           </div>
         </div>
       </template>
@@ -328,10 +338,10 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showAddCarouselModal = false"
         >
-          Cancel
+          {{ $t("common.close") }}
         </button>
       </template>
     </ModalTemplate>
@@ -349,10 +359,10 @@
             >
               <button
                 type="button"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                 @click="() => insertImageAtCursor(image)"
               >
-                Insert
+                {{ $t("common.insert") }}
               </button>
             </div>
           </div>
@@ -360,7 +370,7 @@
             v-if="game.mImageLibraryObjectIds.length == 0"
             class="text-zinc-400 col-span-2"
           >
-            No images to add.
+            {{ $t("library.admin.game.addDescriptionNoImages") }}
           </div>
         </div>
       </template>
@@ -368,10 +378,10 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
-          @click="showAddCarouselModal = false"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
+          @click="showAddImageDescriptionModal = false"
         >
-          Cancel
+          {{ $t("cancel") }}
         </button>
       </template>
     </ModalTemplate>
@@ -386,14 +396,14 @@
                 type="button"
                 class="cursor-pointer 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"
               >
-                Upload
+                {{ $t("upload") }}
               </span>
               <input
                 id="file-upload"
                 accept="image/*"
                 class="hidden"
                 type="file"
-                @change="(e) => coreMetadataUploadFiles(e as any)"
+                @change="(e: Event) => coreMetadataUploadFiles(e as any)"
               />
             </label>
           </div>
@@ -403,7 +413,7 @@
               <label
                 for="name"
                 class="block text-sm/6 font-medium text-zinc-100"
-                >Game Name</label
+                >{{ $t("library.admin.game.editGameName") }}</label
               >
               <div class="mt-2">
                 <input
@@ -419,7 +429,7 @@
               <label
                 for="description"
                 class="block text-sm/6 font-medium text-zinc-100"
-                >Game Description</label
+                >{{ $t("library.admin.game.editGameDescription") }}</label
               >
               <div class="mt-2">
                 <input
@@ -441,15 +451,15 @@
           :class="['inline-flex w-full shadow-sm sm:ml-3 sm:w-auto']"
           @click="() => coreMetadataUpdate_wrapper()"
         >
-          Save
+          {{ $t("common.save") }}
         </LoadingButton>
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showEditCoreMetadata = false"
         >
-          Cancel
+          {{ $t("cancel") }}
         </button>
       </template>
     </ModalTemplate>
@@ -457,19 +467,17 @@
 </template>
 
 <script setup lang="ts">
-import type { Game } from "~/prisma/client";
+import type { GameModel } from "~/prisma/client/models";
 import { micromark } from "micromark";
 import {
-  ArrowTopRightOnSquareIcon,
   CheckIcon,
   DocumentIcon,
   PencilIcon,
   PhotoIcon,
 } from "@heroicons/vue/24/solid";
-
-definePageMeta({
-  layout: "admin",
-});
+import type { SerializeObject } from "nitropack";
+import type { H3Error } from "h3";
+import type { AdminFetchGameType } from "~/server/api/v1/admin/game/[id]/index.get";
 
 const showUploadModal = ref(false);
 const showAddCarouselModal = ref(false);
@@ -477,22 +485,80 @@ const showAddImageDescriptionModal = ref(false);
 const showEditCoreMetadata = ref(false);
 const mobileShowFinalDescription = ref(true);
 
-const route = useRoute();
-const gameId = route.params.id.toString();
-const { game: rawGame, unimportedVersions } = await $dropFetch(
-  `/api/v1/admin/game?id=${encodeURIComponent(gameId)}`,
-);
-const game = ref(rawGame);
+const game = defineModel<SerializeObject<AdminFetchGameType>>({
+  required: true,
+});
+if (!game.value)
+  throw createError({
+    statusCode: 500,
+    statusMessage: "Game not provided to editor component",
+  });
 
+const currentTags = ref<{ [key: string]: boolean }>(
+  Object.fromEntries(game.value.tags.map((e) => [e.id, true])),
+);
+const rawTags = await $dropFetch("/api/v1/admin/tags");
+const tags = ref(
+  rawTags.map((e) => ({ name: e.name, param: e.id }) satisfies StoreSortOption),
+);
+
+watch(
+  currentTags,
+  async (v) => {
+    await $dropFetch(`/api/v1/admin/game/:id/tags`, {
+      method: "PATCH",
+      params: {
+        id: game.value.id,
+      },
+      body: {
+        tags: Object.entries(v)
+          .filter((v) => v[1])
+          .map((v) => v[0]),
+      },
+      failTitle: "Failed to update game tags",
+    });
+  },
+  { deep: true },
+);
+
+const releaseDate = ref(
+  game.value.mReleased
+    ? new Date(game.value.mReleased).toISOString().substring(0, 10)
+    : "",
+);
+
+watch(releaseDate, async (newDate) => {
+  const body: PatchGameBody = {};
+
+  if (newDate) {
+    const parsed = new Date(newDate);
+    if (!isNaN(parsed.getTime())) {
+      body.mReleased = parsed;
+    }
+  }
+
+  await $dropFetch(`/api/v1/admin/game/:id`, {
+    method: "PATCH",
+    params: {
+      id: game.value.id,
+    },
+    body,
+    failTitle: "Failed to update release date",
+  });
+});
+
+const { t } = useI18n();
+
+// I don't know why I split these fields off.
 const coreMetadataName = ref(game.value.mName);
 const coreMetadataDescription = ref(game.value.mShortDescription);
+
 const coreMetadataIconUrl = ref(useObject(game.value.mIconObjectId));
 const coreMetadataIconFileUpload = ref<FileList | undefined>();
 const coreMetadataLoading = ref(false);
 
 function coreMetadataUploadFiles(e: InputEvent) {
   if (coreMetadataIconUrl.value.startsWith("blob")) {
-    console.log("freed object URL");
     URL.revokeObjectURL(coreMetadataIconUrl.value);
   }
 
@@ -503,9 +569,9 @@ function coreMetadataUploadFiles(e: InputEvent) {
     createModal(
       ModalType.Notification,
       {
-        title: "Failed to upload file",
-        description: "Drop couldn't upload this file.",
-        buttonText: "Close",
+        title: t("errors.upload.title"),
+        description: t("errors.upload.description", [t("errors.unknown")]),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -522,14 +588,16 @@ async function coreMetadataUpdate() {
     formData.append("icon", newIcon);
   }
 
-  formData.append("id", game.value.id);
   formData.append("name", coreMetadataName.value);
   formData.append("description", coreMetadataDescription.value);
 
-  const result = await $dropFetch(`/api/v1/admin/game/metadata`, {
-    method: "POST",
-    body: formData,
-  });
+  const result = await $dropFetch(
+    `/api/v1/admin/game/${game.value.id}/metadata`,
+    {
+      method: "POST",
+      body: formData,
+    },
+  );
   return result;
 }
 
@@ -540,11 +608,11 @@ function coreMetadataUpdate_wrapper() {
       createModal(
         ModalType.Notification,
         {
-          title: "Failed to update metadata",
-          description: `Drop failed to update the game's metadata: ${
-            e?.statusMessage || "An unknown error occurred. "
-          }`,
-          buttonText: "Close",
+          title: t("errors.game.metadata.title"),
+          description: t("errors.game.metadata.description", [
+            (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+          ]),
+          buttonText: t("common.close"),
         },
         (e, c) => c(),
       );
@@ -552,6 +620,7 @@ function coreMetadataUpdate_wrapper() {
     .then((newGame) => {
       if (!newGame) return;
       Object.assign(game.value, newGame);
+      coreMetadataIconUrl.value = useObject(newGame.mIconObjectId);
     })
     .finally(() => {
       coreMetadataLoading.value = false;
@@ -566,35 +635,44 @@ const descriptionEditor = ref<HTMLTextAreaElement | undefined>();
 // 0 is not loading
 // 1 is waiting for stop
 // 2 is loading
-const descriptionSaving = ref<number>(0);
+enum DescriptionSavingState {
+  NotLoading,
+  Waiting,
+  Loading,
+}
+const descriptionSaving = ref<DescriptionSavingState>(
+  DescriptionSavingState.NotLoading,
+);
 
 let savingTimeout: undefined | NodeJS.Timeout;
 
+type PatchGameBody = Partial<GameModel>;
+
 watch(descriptionHTML, (_v) => {
-  console.log(game.value.mDescription);
-  descriptionSaving.value = 1;
+  descriptionSaving.value = DescriptionSavingState.Waiting;
   if (savingTimeout) clearTimeout(savingTimeout);
   savingTimeout = setTimeout(async () => {
     try {
-      descriptionSaving.value = 2;
-      await $dropFetch("/api/v1/admin/game", {
+      descriptionSaving.value = DescriptionSavingState.Loading;
+      await $dropFetch(`/api/v1/admin/game/:id`, {
         method: "PATCH",
-        body: {
-          id: gameId,
-          mDescription: game.value.mDescription,
+        params: {
+          id: game.value.id,
         },
+        body: {
+          mDescription: game.value.mDescription,
+        } satisfies PatchGameBody,
       });
-      descriptionSaving.value = 0;
+      descriptionSaving.value = DescriptionSavingState.NotLoading;
     } catch (e) {
       createModal(
         ModalType.Notification,
         {
-          title: "Failed to update game description",
-          description: `Drop failed to update the game description: ${
-            // @ts-expect-error attempt to get statusMessage on error
-            e?.statusMessage ?? "An unknown error occurred."
-          }`,
-          buttonText: "Close",
+          title: t("errors.game.description.title"),
+          description: t("errors.game.description.description", [
+            (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+          ]),
+          buttonText: t("common.close"),
         },
         (e, c) => c(),
       );
@@ -622,24 +700,25 @@ function insertImageAtCursor(id: string) {
 async function updateBannerImage(id: string) {
   try {
     if (game.value.mBannerObjectId == id) return;
-    const { mBannerObjectId } = await $dropFetch("/api/v1/admin/game", {
+    const { mBannerObjectId } = await $dropFetch(`/api/v1/admin/game/:id`, {
       method: "PATCH",
-      body: {
-        id: gameId,
-        mBannerId: id,
+      params: {
+        id: game.value.id,
       },
+      body: {
+        mBannerObjectId: id,
+      } satisfies PatchGameBody,
     });
     game.value.mBannerObjectId = mBannerObjectId;
   } catch (e) {
     createModal(
       ModalType.Notification,
       {
-        title: "There an error while updating the banner image",
-        description: `Drop encountered an error while updating the banner image: ${
-          // @ts-expect-error attempt to get statusMessage on error
-          e?.statusMessage ?? "An unknown error occurred"
-        }`,
-        buttonText: "Close",
+        title: t("errors.game.banner.title"),
+        description: t("errors.game.banner.description", [
+          (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        ]),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -649,24 +728,25 @@ async function updateBannerImage(id: string) {
 async function updateCoverImage(id: string) {
   try {
     if (game.value.mCoverObjectId == id) return;
-    const { mCoverObjectId } = await $dropFetch("/api/v1/admin/game", {
+    const { mCoverObjectId } = await $dropFetch(`/api/v1/admin/game/:id`, {
       method: "PATCH",
-      body: {
-        id: gameId,
-        mCoverId: id,
+      params: {
+        id: game.value.id,
       },
+      body: {
+        mCoverObjectId: id,
+      } satisfies PatchGameBody,
     });
     game.value.mCoverObjectId = mCoverObjectId;
   } catch (e) {
     createModal(
       ModalType.Notification,
       {
-        title: "There an error while updating the cover image",
-        description: `Drop encountered an error while updating the cover image: ${
-          // @ts-expect-error attempt to get statusMessage on error
-          e?.statusMessage ?? "An unknown error occurred"
-        }`,
-        buttonText: "Close",
+        title: t("errors.game.cover.title"),
+        description: t("errors.game.cover.description", [
+          (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        ]),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -691,27 +771,23 @@ async function deleteImage(id: string) {
     createModal(
       ModalType.Notification,
       {
-        title: "There an error while deleting the image",
-        description: `Drop encountered an error while deleting the image: ${
-          // @ts-expect-error attempt to get statusMessage on error
-          e?.statusMessage ?? "An unknown error occurred"
-        }`,
-        buttonText: "Close",
+        title: t("errors.game.deleteImage.title"),
+        description: t("errors.game.deleteImage.description", [
+          (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        ]),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
   }
 }
 
-async function uploadAfterImageUpload(result: Game) {
+async function uploadAfterImageUpload(result: GameModel) {
   if (!game.value) return;
   game.value.mImageLibraryObjectIds = result.mImageLibraryObjectIds;
 }
 
-
-
 function addImageToCarousel(id: string) {
-  showAddCarouselModal.value = false;
   game.value.mImageCarouselObjectIds.push(id);
   updateImageCarousel();
 }
@@ -726,26 +802,38 @@ function removeImageFromCarousel(id: string) {
 
 async function updateImageCarousel() {
   try {
-    await $dropFetch("/api/v1/admin/game", {
+    await $dropFetch(`/api/v1/admin/game/:id`, {
       method: "PATCH",
-      body: {
-        id: gameId,
-        mImageCarousel: game.value.mImageCarouselObjectIds,
+      params: {
+        id: game.value.id,
       },
+      body: {
+        mImageCarouselObjectIds: game.value.mImageCarouselObjectIds,
+      } satisfies PatchGameBody,
     });
   } catch (e) {
     createModal(
       ModalType.Notification,
       {
-        title: "There an error while updating the image carousel",
-        description: `Drop encountered an error while updating image carousel: ${
-          // @ts-expect-error attempt to get statusMessage on error
-          e?.statusMessage ?? "An unknown error occurred"
-        }`,
-        buttonText: "Close",
+        title: t("errors.game.carousel.title"),
+        description: t("errors.game.carousel.description", [
+          (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        ]),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
   }
 }
+
+async function createTag(value: string): Promise<string> {
+  const tag = await $dropFetch(`/api/v1/admin/tags`, {
+    method: "POST",
+    body: {
+      name: value,
+    },
+  });
+  tags.value.push({ name: tag.name, param: tag.id });
+  return tag.id;
+}
 </script>

components/GameEditor/Version.vue

@@ -0,0 +1,269 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div v-if="game && unimportedVersions" class="px-4 sm:px-6 lg:px-8 py-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold text-white">
+          {{ $t("library.admin.version.title") }}
+        </h1>
+        <p class="mt-2 text-sm text-gray-300">
+          {{ $t("library.admin.version.description") }}
+        </p>
+      </div>
+      <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+        <NuxtLink
+          :href="canImport ? `/admin/library/${game.id}/import` : ''"
+          type="button"
+          :class="[
+            canImport ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-800/50',
+            'inline-flex w-fit items-center gap-x-2 rounded-md  px-3 py-1 text-sm font-semibold font-display text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
+          ]"
+        >
+          {{
+            canImport
+              ? $t("library.admin.import.version.import")
+              : $t("library.admin.import.version.noVersions")
+          }}
+        </NuxtLink>
+      </div>
+    </div>
+    <div class="mt-8 flow-root">
+      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+          <table class="relative min-w-full divide-y divide-white/15">
+            <thead>
+              <tr>
+                <th></th>
+                <th
+                  scope="col"
+                  class="py-3 pr-3 pl-4 text-left text-xs font-medium tracking-wide text-gray-400 uppercase sm:pl-0"
+                >
+                  {{ $t("library.admin.version.table.name") }}
+                </th>
+                <th
+                  scope="col"
+                  class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
+                >
+                  {{ $t("library.admin.version.table.path") }}
+                </th>
+                <th
+                  scope="col"
+                  class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
+                >
+                  {{ $t("library.admin.version.table.delta") }}
+                </th>
+                <th
+                  scope="col"
+                  class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
+                >
+                  {{ $t("library.admin.version.table.setup") }}
+                </th>
+                <th
+                  scope="col"
+                  class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
+                >
+                  {{ $t("library.admin.version.table.launch") }}
+                </th>
+                <th scope="col" class="py-3 pr-4 pl-3 sm:pr-0">
+                  <span class="sr-only">{{ $t("common.edit") }}</span>
+                </th>
+              </tr>
+            </thead>
+            <draggable
+              :list="game.versions"
+              handle=".handle"
+              class="divide-y divide-white/10"
+              tag="tbody"
+              @update="() => updateVersionOrder()"
+            >
+              <template #item="{ element: version }: { element: VersionType }">
+                <tr :key="version.versionId">
+                  <td>
+                    <Bars3Icon
+                      class="cursor-move w-6 h-6 text-zinc-400 handle"
+                    />
+                  </td>
+                  <td class="py-4 pr-3 pl-4 sm:pl-0">
+                    <div class="flex flex-col">
+                      <span
+                        class="text-sm font-medium whitespace-nowrap text-white"
+                        >{{ version.displayName ?? version.versionPath }}</span
+                      >
+                      <span class="text-xs text-zinc-500 mono">{{
+                        version.versionId
+                      }}</span>
+                    </div>
+                  </td>
+                  <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
+                    {{ version.versionPath }}
+                  </td>
+                  <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
+                    {{ version.delta }}
+                  </td>
+
+                  <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
+                    <ul class="space-y-2">
+                      <GameEditorVersionConfig
+                        v-for="config in version.setups"
+                        :key="config.setupId"
+                        :config="config"
+                      />
+                      <li
+                        v-if="version.setups.length == 0"
+                        class="text-xs uppercase font-display text-zinc-700 font-semibold"
+                      >
+                        {{ $t("library.admin.version.noSetups") }}
+                      </li>
+                    </ul>
+                  </td>
+                  <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
+                    <div v-if="version.onlySetup">
+                      {{ $t("library.admin.version.setupOnly") }}
+                    </div>
+                    <ul v-else class="space-y-2">
+                      <GameEditorVersionConfig
+                        v-for="config in version.launches"
+                        :key="config.launchId"
+                        :config="config"
+                      />
+                    </ul>
+                  </td>
+                  <td
+                    class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0 space-x-2"
+                  >
+                    <!--
+                    <button class="text-blue-400 hover:text-blue-300">
+                      Edit<span class="sr-only"
+                        >,
+                        {{ version.displayName ?? version.versionPath }}</span
+                      >
+                    </button>
+                    -->
+                    <button
+                      class="text-red-400 hover:text-red-300"
+                      @click="() => deleteVersion(version.versionId)"
+                    >
+                      {{ $t("common.delete") }}
+                    </button>
+                  </td>
+                </tr></template
+              >
+            </draggable>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="grow w-full flex items-center justify-center">
+    <div class="flex flex-col items-center">
+      <ExclamationCircleIcon
+        class="h-12 w-12 text-red-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">
+          {{ $t("library.admin.offlineTitle") }}
+        </h1>
+        <div class="mt-4">
+          <p class="text-sm text-zinc-400 max-w-md">
+            {{ $t("library.admin.offline") }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SerializeObject } from "nitropack";
+import type { H3Error } from "h3";
+import { ExclamationCircleIcon, Bars3Icon } from "@heroicons/vue/24/outline";
+import type { AdminFetchGameType } from "~/server/api/v1/admin/game/[id]/index.get";
+
+// TODO implement UI for this page
+
+const props = defineProps<{ unimportedVersions: string[] }>();
+
+const { t } = useI18n();
+
+const hasDeleted = ref(false);
+
+const canImport = computed(
+  () => hasDeleted.value || props.unimportedVersions.length > 0,
+);
+
+const game = defineModel<SerializeObject<AdminFetchGameType>>({
+  required: true,
+});
+if (!game.value)
+  throw createError({
+    statusCode: 500,
+    statusMessage: "Game not provided to editor component",
+  });
+
+type VersionType = (typeof game.value.versions)[number];
+
+async function updateVersionOrder() {
+  try {
+    const newVersionOrder = await $dropFetch(
+      "/api/v1/admin/game/:id/versions",
+      {
+        method: "PATCH",
+        body: {
+          versions: game.value.versions.map((e) => e.versionId),
+        },
+        params: {
+          id: game.value.id,
+        },
+      },
+    );
+    const newVersions = newVersionOrder.map(
+      (id) => game.value.versions.find((k) => k.versionId == id)!,
+    );
+    game.value.versions = newVersions;
+  } catch (e) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: t("errors.version.order.title"),
+        description: t("errors.version.order.desc", {
+          error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        }),
+        buttonText: t("common.close"),
+      },
+      (e, c) => c(),
+    );
+  }
+}
+
+async function deleteVersion(versionId: string) {
+  try {
+    await $dropFetch("/api/v1/admin/game/:id/versions", {
+      method: "DELETE",
+      body: {
+        version: versionId,
+      },
+      params: {
+        id: game.value.id,
+      },
+    });
+    game.value.versions.splice(
+      game.value.versions.findIndex((e) => e.versionId === versionId),
+      1,
+    );
+    hasDeleted.value = true;
+  } catch (e) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: t("errors.version.delete.title"),
+        description: t("errors.version.delete.desc", {
+          error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        }),
+        buttonText: t("common.close"),
+      },
+      (e, c) => c(),
+    );
+  }
+}
+</script>

components/GameEditor/VersionConfig.vue

@@ -0,0 +1,55 @@
+<template>
+  <li class="p-3 bg-zinc-800 ring-1 ring-zinc-700 shadow rounded-lg space-y-2">
+    <div class="flex justify-between">
+      <h1
+        v-if="!isSetup(props.config)"
+        class="font-semibold text-zinc-300 text-md"
+      >
+        {{ props.config.name }}
+      </h1>
+      <span class="flex items-center">
+        <component
+          :is="PLATFORM_ICONS[props.config.platform]"
+          alt=""
+          class="size-5 flex-shrink-0 text-blue-600"
+        />
+        <span class="ml-2 block truncate text-zinc-100 text-sm font-bold">{{
+          props.config.platform
+        }}</span>
+      </span>
+    </div>
+    <div
+      class="inline-flex gap-x-1 items-center bg-zinc-950 text-zinc-400 mono rounded-md p-2"
+    >
+      <p>{{ props.config.command }}</p>
+    </div>
+    <EmulatorWidget
+      v-if="!isSetup(props.config) && props.config.emulator"
+      :emulator="{
+        launchId: props.config.launchId,
+        gameName: props.config.emulator.gameVersion.game.mName,
+        gameIcon: props.config.emulator.gameVersion.game.mIconObjectId,
+        versionName: (props.config.emulator.gameVersion.displayName ??
+          props.config.emulator.gameVersion.versionPath)!,
+        launchName: props.config.emulator.name,
+        platform: props.config.emulator.platform,
+      }"
+    />
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { AdminFetchGameType } from "~/server/api/v1/admin/game/[id]/index.get";
+
+const props = defineProps<{
+  config:
+    | AdminFetchGameType["versions"][number]["setups"][number]
+    | AdminFetchGameType["versions"][number]["launches"][number];
+}>();
+
+function isSetup(
+  v: typeof props.config,
+): v is AdminFetchGameType["versions"][number]["setups"][number] {
+  return Object.prototype.hasOwnProperty.call(v, "setupId");
+}
+</script>

components/GamePanel.vue

@@ -1,44 +1,73 @@
 <template>
   <NuxtLink
-    v-if="game"
-    :href="props.href ?? `/store/${game.id}`"
-    class="group relative w-48 h-64 rounded-lg overflow-hidden transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5"
-    @click="active = game.id"
+    v-if="game || defaultPlaceholder"
+    :href="href"
+    :class="{
+      'transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5':
+        animate,
+    }"
+    class="group relative flex-1 min-w-42 max-w-48 h-64 rounded-lg overflow-hidden"
   >
     <div
-      class="absolute inset-0 transition-all duration-300 group-hover:scale-110"
+      :class="{
+        'transition-all duration-300 group-hover:scale-110': animate,
+      }"
+      class="absolute inset-0"
     >
       <img
-        :src="useObject(game.mCoverObjectId)"
+        :src="imageProps.src"
         class="w-full h-full object-cover brightness-[90%]"
-        :class="{ active: active === game.id }"
-        :alt="game.mName"
+        :alt="imageProps.alt"
       />
       <div
-        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent"
+        v-if="showTitleDescription"
+        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/0 to-transparent"
       />
     </div>
 
-    <div class="absolute bottom-0 left-0 w-full p-3">
+    <div
+      v-if="showTitleDescription"
+      class="absolute bottom-0 left-0 w-full p-3"
+    >
       <h1
-        class="text-zinc-100 text-sm font-bold font-display group-hover:text-white transition-colors"
+        :class="{ 'group-hover:text-white transition-colors': animate }"
+        class="text-zinc-100 text-sm font-bold font-display"
       >
-        {{ game.mName }}
+        {{
+          game ? game.mName : $t("settings.admin.store.dropGameNamePlaceholder")
+        }}
       </h1>
       <p
-        class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors"
+        :class="{
+          'group-hover:text-zinc-300 transition-colors': animate,
+        }"
+        class="text-zinc-400 text-xs line-clamp-2"
       >
-        {{ game.mShortDescription }}
+        {{
+          game
+            ? game.mShortDescription
+            : $t("settings.admin.store.dropGameDescriptionPlaceholder")
+        }}
       </p>
     </div>
   </NuxtLink>
-  <SkeletonCard v-else message="no game" />>
+  <SkeletonCard
+    v-else-if="defaultPlaceholder === false"
+    :message="$t('store.noGame')"
+  />
 </template>
 
 <script setup lang="ts">
 import type { SerializeObject } from "nitropack";
 
-const props = defineProps<{
+const { t } = useI18n();
+const {
+  game,
+  href = undefined,
+  showTitleDescription = true,
+  animate = true,
+  defaultPlaceholder = false,
+} = defineProps<{
   game:
     | SerializeObject<{
         id: string;
@@ -46,11 +75,25 @@ const props = defineProps<{
         mName: string;
         mShortDescription: string;
       }>
-    | undefined;
+    | undefined
+    | null;
   href?: string;
+  showTitleDescription?: boolean;
+  animate?: boolean;
+  defaultPlaceholder?: boolean;
 }>();
 
-const active = useState();
+const imageProps = {
+  src: "",
+  alt: t("settings.admin.store.dropGameAltPlaceholder"),
+};
+
+if (game) {
+  imageProps.src = useObject(game.mCoverObjectId);
+  imageProps.alt = game.mName;
+} else if (defaultPlaceholder) {
+  imageProps.src = "/game-panel-placeholder.png";
+}
 </script>
 
 <style scoped>

components/GameSearchResultWidget.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-row items-center gap-x-2">
-    <img :src="game.icon" class="w-12 h-12 rounded-sm object-cover" />
+    <img
+      :src="rawIcon ? game.icon : useObject(game.icon)"
+      class="w-12 h-12 rounded-sm object-cover"
+    />
     <div class="flex flex-col items-left">
       <h1 class="font-semibold font-display text-lg text-zinc-100">
         {{ game.name }}
@@ -18,7 +21,8 @@
 <script setup lang="ts">
 import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 
-const { game } = defineProps<{
-  game: GameMetadataSearchResult & { sourceName?: string };
+const { game, rawIcon = true } = defineProps<{
+  game: Omit<GameMetadataSearchResult, "year"> & { sourceName?: string };
+  rawIcon?: boolean;
 }>();
 </script>

components/Icons/GamepadIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="6" y1="11" x2="10" y2="11" />
+    <line x1="8" y1="9" x2="8" y2="13" />
+    <line x1="15" y1="12" x2="15.01" y2="12" />
+    <line x1="18" y1="10" x2="18.01" y2="10" />
+    <path
+      d="M17.32 5H6.68a4 4 0 00-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 003 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 019.828 16h4.344a2 2 0 011.414.586L17 18c.5.5 1 1 2 1a3 3 0 003-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0017.32 5z"
+    />
+  </svg>
+</template>

components/ImageUpload.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="relative group/iconupload rounded-xl overflow-hidden w-20 mx-auto"
+  >
+    <img v-if="objectId" :src="useObject(objectId)" :alt="imageAlt" />
+    <ArrowUpTrayIcon v-else />
+    <button
+      type="button"
+      class="rounded-xl transition duration-200 absolute inset-0 opacity-0 group-hover/iconupload:opacity-100 focus-visible/iconupload:opacity-100 cursor-pointer bg-zinc-900/80 text-zinc-100 flex flex-col items-center justify-center text-center text-xs font-semibold ring-1 ring-inset ring-zinc-800 px-2"
+      @click="openModal"
+    >
+      <ArrowUpTrayIcon class="size-5" />
+      <span>{{ hoverText }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArrowUpTrayIcon } from "@heroicons/vue/24/solid";
+
+const { objectId, openModal, hoverText, imageAlt } = defineProps<{
+  objectId: string | null;
+  openModal: () => void;
+  hoverText: string;
+  imageAlt: string;
+}>();
+</script>

components/ImportVersionLaunchRow.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="w-full">
+    <div v-if="needsName" class="mb-2">
+      <div
+        class="flex w-full rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
+      >
+        <input
+          id="startup"
+          v-model="launchConfiguration.name"
+          type="text"
+          name="startup"
+          class="block flex-1 border-0 py-1.5 px-3 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
+          placeholder="Launch name"
+        />
+      </div>
+    </div>
+    <div class="mb-2">
+      <div
+        class="flex w-full rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
+      >
+        <span
+          class="flex select-none items-center gap-x-0.5 pl-3 text-zinc-500 sm:text-sm"
+        >
+          <div class="relative">
+            <InformationCircleIcon class="peer size-4" />
+            <div
+              class="z-50 w-64 transition duration-100 opacity-0 shadow peer-hover:opacity-100 absolute left-0 p-2 bg-zinc-900 rounded text-xs text-zinc-300"
+            >
+              {{ $t("library.admin.launchRow.currentDirHint") }}
+            </div>
+          </div>
+          {{ $t("library.admin.import.version.installDir") }}
+        </span>
+        <Combobox
+          as="div"
+          :value="launchConfiguration.launch"
+          nullable
+          class="w-full"
+          @update:model-value="(v) => updateLaunchCommand(v)"
+        >
+          <div class="relative">
+            <ComboboxInput
+              class="block flex-1 border-0 py-1.5 pl-1 w-full bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
+              :placeholder="
+                $t('library.admin.import.version.launchPlaceholder')
+              "
+              @change="launchProcessQuery = $event.target.value"
+              @blur="launchProcessQuery = ''"
+            />
+            <ComboboxButton
+              v-if="launchFilteredVersionGuesses?.length ?? 0 > 0"
+              class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
+            >
+              <ChevronUpDownIcon
+                class="size-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </ComboboxButton>
+
+            <ComboboxOptions
+              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-white/5 focus:outline-none sm:text-sm"
+            >
+              <ComboboxOption
+                v-for="guess in launchFilteredVersionGuesses"
+                :key="guess.filename"
+                v-slot="{ active, selected }"
+                :value="guess.filename"
+                as="template"
+              >
+                <li
+                  :class="[
+                    'relative cursor-default select-none py-2 pl-3 pr-9',
+                    active
+                      ? 'bg-blue-600 text-white outline-none'
+                      : 'text-zinc-100',
+                  ]"
+                >
+                  <span
+                    :class="[
+                      'inline-flex items-center gap-x-2 block truncate',
+                      selected && 'font-semibold',
+                    ]"
+                  >
+                    {{ guess.filename }}
+                    <component
+                      :is="PLATFORM_ICONS[guess.platform]"
+                      class="size-5"
+                    />
+                    <img
+                      v-if="guess.type === 'emulator'"
+                      :src="useObject(guess.icon)"
+                      class="size-5"
+                    />
+                  </span>
+
+                  <span
+                    v-if="selected"
+                    :class="[
+                      'absolute inset-y-0 right-0 flex items-center pr-4',
+                      active ? 'text-white' : 'text-blue-600',
+                    ]"
+                  >
+                    <CheckIcon class="size-5" aria-hidden="true" />
+                  </span>
+                </li>
+              </ComboboxOption>
+              <ComboboxOption
+                v-if="
+                  launchProcessQuery &&
+                  launchConfiguration.launch !== launchProcessQuery
+                "
+                v-slot="{ active, selected }"
+                :value="launchProcessQuery"
+              >
+                <li
+                  :class="[
+                    'relative cursor-default select-none py-2 pl-3 pr-9',
+                    active
+                      ? 'bg-blue-600 text-white outline-none'
+                      : 'text-zinc-100',
+                  ]"
+                >
+                  <span
+                    :class="['block truncate', selected && 'font-semibold']"
+                  >
+                    {{ launchProcessQuery }}
+                  </span>
+
+                  <span
+                    v-if="selected"
+                    :class="[
+                      'absolute inset-y-0 right-0 flex items-center pr-4',
+                      active ? 'text-white' : 'text-blue-600',
+                    ]"
+                  >
+                    <CheckIcon class="size-5" aria-hidden="true" />
+                  </span>
+                </li>
+              </ComboboxOption>
+            </ComboboxOptions>
+          </div>
+        </Combobox>
+      </div>
+      <div
+        v-if="props.type && props.type === 'Emulator'"
+        class="ml-1 mt-2 rounded-lg bg-blue-900/10 p-1 outline outline-blue-900"
+      >
+        <div class="flex items-center">
+          <div class="shrink-0">
+            <InformationCircleIcon
+              class="size-5 text-blue-500"
+              aria-hidden="true"
+            />
+          </div>
+          <div class="ml-2 inline-flex items-center">
+            <p class="text-sm text-blue-200">
+              <i18n-t
+                keypath="library.admin.launchRow.emulatorHint"
+                tag="span"
+                scope="global"
+              >
+                <template #rom>
+                  <span
+                    class="font-mono bg-zinc-950 text-zinc-100 py-1 px-0.5 rounded-xl"
+                    >{{
+                      // eslint-disable-next-line @intlify/vue-i18n/no-raw-text
+                      "{rom}"
+                    }}</span
+                  >
+                </template>
+              </i18n-t>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <SelectorPlatform
+      :model-value="launchConfiguration.platform"
+      class="mb-2"
+      @update:model-value="updatePlatform"
+    >
+      {{ $t("library.admin.import.version.platform") }}
+    </SelectorPlatform>
+    <div v-if="props.type && props.type === 'Game' && props.allowEmulator">
+      <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+        {{ $t("library.admin.launchRow.emulatorTitle") }}
+      </h1>
+      <div class="relative mt-2 space-x-1 inline-flex items-center w-full">
+        <EmulatorWidget v-if="emulator" :emulator="emulator" />
+        <div
+          v-else
+          class="font-bold uppercase font-display text-zinc-500 text-sm"
+        >
+          {{ $t("library.admin.launchRow.noEmulatorSelected") }}
+        </div>
+        <div class="grow" />
+        <LoadingButton :loading="false" @click="selectLaunchOpen = true">{{
+          $t("library.admin.launchRow.emulatorSelect")
+        }}</LoadingButton>
+        <button
+          :disabled="!emulator"
+          class="transition rounded p-2 bg-zinc-900/30 group hover:enabled:bg-red-600/10 text-zinc-400 hover:enabled:text-red-600 disabled:bg-zinc-900/80 disabled:text-zinc-700"
+          @click="() => (emulator = undefined)"
+        >
+          <TrashIcon class="transition size-5" />
+        </button>
+      </div>
+    </div>
+    <div v-if="props.type && props.type === 'Emulator'">
+      <p class="block text-sm font-medium leading-6 text-zinc-100">
+        {{ $t("library.admin.launchRow.autosuggestHint") }}
+      </p>
+      <SelectorFileExtension
+        v-model="launchConfiguration.suggestions!"
+        class="mt-2"
+      />
+    </div>
+    <ModalSelectLaunch
+      v-model="selectLaunchOpen"
+      class="-mt-2"
+      :filter-platform="launchConfiguration.platform"
+      @select="(v) => (emulator = v)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { InformationCircleIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import type { EmulatorLaunchObject } from "~/composables/frontend";
+import type { GameType, Platform } from "~/prisma/client/enums";
+
+import type { ImportVersion } from "~/server/api/v1/admin/import/version/index.post";
+import type { VersionGuess } from "~/server/internal/library";
+
+const launchProcessQuery = ref("");
+
+const launchConfiguration = defineModel<
+  Omit<(typeof ImportVersion.infer)["launches"][number], "name"> & {
+    name?: string;
+  }
+>({ required: true });
+const _emulatorMetadata = ref<EmulatorLaunchObject | undefined>(undefined);
+const emulator = computed({
+  get() {
+    return _emulatorMetadata.value;
+  },
+  set(v) {
+    _emulatorMetadata.value = v;
+    if (v) {
+      launchConfiguration.value.emulatorId = v.launchId;
+    } else {
+      launchConfiguration.value.emulatorId = undefined;
+    }
+  },
+});
+
+function updatePlatform(v: Platform | undefined) {
+  if (!v) return;
+  launchConfiguration.value.platform = v;
+  if (emulator.value) {
+    if (emulator.value.platform !== v) {
+      emulator.value = undefined;
+    }
+  }
+}
+
+const props = defineProps<{
+  versionGuesses: Array<VersionGuess> | undefined;
+  needsName: boolean;
+  allowEmulator?: boolean;
+  type?: GameType;
+}>();
+
+if (props.type && props.type === "Emulator")
+  launchConfiguration.value.suggestions ??= [];
+
+const selectLaunchOpen = ref(false);
+
+const launchFilteredVersionGuesses = computed(() =>
+  props.versionGuesses?.filter((e) =>
+    e.filename.toLowerCase().includes(launchProcessQuery.value.toLowerCase()),
+  ),
+);
+
+function updateLaunchCommand(command: string) {
+  launchConfiguration.value.launch = command;
+  if (launchConfiguration.value.platform === undefined) {
+    const autosetGuess = props.versionGuesses?.find(
+      (v) => v.filename == command,
+    );
+    if (autosetGuess) {
+      if (autosetGuess.type === "platform") {
+        launchConfiguration.value.platform = autosetGuess.platform;
+      } else if (autosetGuess.type === "emulator") {
+        emulator.value = {
+          launchId: autosetGuess.emulatorId,
+          gameName: autosetGuess.gameName,
+          gameIcon: autosetGuess.icon,
+          versionName: autosetGuess.launchName,
+          launchName: autosetGuess.launchName,
+          platform: autosetGuess.platform,
+        } satisfies EmulatorLaunchObject;
+        launchConfiguration.value.platform = autosetGuess.platform;
+      }
+    }
+  }
+}
+</script>

components/LogLine.vue

@@ -0,0 +1,26 @@
+<template>
+  <span class="text-xs font-mono text-zinc-400 inline-flex items-top gap-x-2"
+    ><span v-if="!short" class="text-zinc-500">{{ log.time }}</span>
+    <span
+      :class="[
+        colours[log.level] || 'text-green-400',
+        'uppercase font-display font-semibold',
+      ]"
+      >{{ log.level }}</span
+    >
+    <span v-if="log.prefix" class="text-zinc-200"> {{ log.prefix }}</span>
+    <pre :class="[short ? 'line-clamp-1' : '', 'mt-[1px]']">{{ log.msg }}</pre>
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { TaskLog } from "~/server/internal/tasks";
+
+defineProps<{ log: typeof TaskLog.infer; short?: boolean }>();
+
+const colours: { [key: string]: string } = {
+  info: "text-blue-400",
+  warn: "text-yellow-400",
+  error: "text-red-400",
+};
+</script>

components/MiniTile.vue

@@ -0,0 +1,28 @@
+<template>
+  <TileWithLink>
+    <div class="h-full flex gap-4">
+      <div class="flex-1 my-auto">
+        <slot name="icon" />
+      </div>
+      <div
+        class="md:flex-8 flex-6 lg:flex-2 my-auto text-center flex md:flex-row-reverse lg:inline"
+      >
+        <div class="md:text-2xl text-3xl flex-1 font-bold self-center">
+          {{ value }}
+        </div>
+        <div
+          class="text-2xl xl:text-xs flex-1 md:flex-auto text-left md:text-center lg:text-center self-center"
+        >
+          {{ label }}
+        </div>
+      </div>
+    </div>
+  </TileWithLink>
+</template>
+
+<script setup lang="ts">
+const { label, value } = defineProps<{
+  label: string;
+  value: string | number;
+}>();
+</script>

components/Modal/AddCompanyGame.vue

@@ -0,0 +1,171 @@
+<template>
+  <ModalTemplate v-model="open">
+    <template #default>
+      <div>
+        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
+          {{ $t("library.admin.metadata.companies.addGame.title") }}
+        </DialogTitle>
+        <p class="mt-1 text-zinc-400 text-sm">
+          {{ $t("library.admin.metadata.companies.addGame.description") }}
+        </p>
+      </div>
+      <div class="mt-2">
+        <form @submit.prevent="() => addGame()">
+          <SelectorGame v-model="currentGame" :search="search" />
+          <div class="mt-6 flex items-center justify-between gap-3">
+            <label
+              id="published-label"
+              for="published"
+              class="font-medium text-md text-zinc-100"
+              >{{
+                $t("library.admin.metadata.companies.addGame.publisher")
+              }}</label
+            >
+
+            <div
+              class="group/published relative inline-flex w-11 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
+            >
+              <span
+                class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/published:translate-x-5"
+              />
+              <input
+                id="published"
+                v-model="published"
+                type="checkbox"
+                class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+                aria-labelledby="published-label"
+              />
+            </div>
+          </div>
+          <div class="mt-2 flex items-center justify-between gap-3">
+            <label
+              id="developer-label"
+              for="developer"
+              class="font-medium text-md text-zinc-100"
+              >{{
+                $t("library.admin.metadata.companies.addGame.developer")
+              }}</label
+            >
+
+            <div
+              class="group/developer relative inline-flex w-11 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
+            >
+              <span
+                class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/developer:translate-x-5"
+              />
+              <input
+                id="developer"
+                v-model="developed"
+                type="checkbox"
+                class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+                aria-labelledby="developer-label"
+              />
+            </div>
+          </div>
+          <button class="hidden" type="submit" />
+        </form>
+      </div>
+
+      <div v-if="addError" 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">
+              {{ addError }}
+            </h3>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #buttons="{ close }">
+      <LoadingButton
+        :loading="addGameLoading"
+        :disabled="!(currentGame && (developed || published))"
+        class="w-full sm:w-fit"
+        @click="() => addGame()"
+      >
+        {{ $t("common.add") }}
+      </LoadingButton>
+      <button
+        ref="cancelButtonRef"
+        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="() => close()"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { GameModel } from "~/prisma/client/models";
+import { DialogTitle } from "@headlessui/vue";
+import { FetchError } from "ofetch";
+import type { SerializeObject } from "nitropack";
+import { XCircleIcon } from "@heroicons/vue/24/solid";
+import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
+
+const props = defineProps<{
+  companyId: string;
+  exclude?: string[];
+}>();
+
+const emit = defineEmits<{
+  created: [
+    game: SerializeObject<GameModel>,
+    published: boolean,
+    developed: boolean,
+  ];
+}>();
+
+const { t } = useI18n();
+
+const open = defineModel<boolean>({ required: true });
+
+const currentGame = ref<GameMetadataSearchResult>();
+const developed = ref(false);
+const published = ref(false);
+const addGameLoading = ref(false);
+const addError = ref<string | undefined>(undefined);
+
+async function addGame() {
+  if (!currentGame.value) return;
+  addGameLoading.value = true;
+
+  try {
+    const game = await $dropFetch("/api/v1/admin/company/:id/game", {
+      method: "POST",
+      params: { id: props.companyId },
+      body: {
+        id: currentGame.value.id,
+        developed: developed.value,
+        published: published.value,
+      },
+    });
+    emit("created", game, published.value, developed.value);
+  } catch (e) {
+    if (e instanceof FetchError) {
+      addError.value = e.statusMessage ?? e.message ?? t("errors.unknown");
+    } else {
+      throw e;
+    }
+  } finally {
+    currentGame.value = undefined;
+    developed.value = false;
+    published.value = false;
+    addGameLoading.value = false;
+    open.value = false;
+  }
+}
+
+async function search(query: string) {
+  return await $dropFetch("/api/v1/admin/search/game?type=Game", {
+    query: { q: query },
+  });
+}
+</script>

components/Modal/CreateCollection.vue

@@ -3,11 +3,10 @@
     <template #default>
       <div>
         <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
-          Create collection
+          {{ $t("library.collection.create") }}
         </DialogTitle>
         <p class="mt-1 text-zinc-400 text-sm">
-          Collections can used to organise your games and find them more easily,
-          especially if you have a large library.
+          {{ $t("library.collection.createDesc") }}
         </p>
       </div>
       <div class="mt-2">
@@ -15,7 +14,7 @@
           <input
             v-model="collectionName"
             type="text"
-            placeholder="Collection name"
+            :placeholder="$t('library.collection.namePlaceholder')"
             class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
           />
           <button class="hidden" type="submit" />
@@ -30,7 +29,7 @@
         class="w-full sm:w-fit"
         @click="() => createCollection()"
       >
-        Create
+        {{ $t("common.create") }}
       </LoadingButton>
       <button
         ref="cancelButtonRef"
@@ -38,7 +37,7 @@
         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="() => close()"
       >
-        Cancel
+        {{ $t("cancel") }}
       </button>
     </template>
   </ModalTemplate>
@@ -47,7 +46,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { DialogTitle } from "@headlessui/vue";
-import type { CollectionEntry, Game } from "~/prisma/client";
+import type { CollectionEntryModel, GameModel } from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
@@ -74,15 +73,17 @@ async function createCollection() {
     const response = await $dropFetch("/api/v1/collection", {
       method: "POST",
       body: { name: collectionName.value },
+      failTitle: "Failed to create collection",
     });
 
     // Add the game if provided
     if (props.gameId) {
       const entry = await $dropFetch<
-        CollectionEntry & { game: SerializeObject<Game> }
+        CollectionEntryModel & { game: SerializeObject<GameModel> }
       >(`/api/v1/collection/${response.id}/entry`, {
         method: "POST",
         body: { id: props.gameId },
+        failTitle: "Failed to add game to collection",
       });
       response.entries.push(entry);
     }
@@ -94,18 +95,6 @@ async function createCollection() {
     open.value = false;
 
     emit("created", response.id);
-  } catch (error) {
-    console.error("Failed to create collection:", error);
-
-    const err = error as { statusMessage?: string };
-    createModal(
-      ModalType.Notification,
-      {
-        title: "Failed to create collection",
-        description: `Drop couldn't create your collection: ${err?.statusMessage}`,
-      },
-      (_, c) => c(),
-    );
   } finally {
     createCollectionLoading.value = false;
   }

components/Modal/CreateCompany.vue

@@ -0,0 +1,148 @@
+<template>
+  <ModalTemplate v-model="open">
+    <template #default>
+      <div>
+        <h3 class="text-lg font-medium leading-6 text-white">
+          {{ $t("library.admin.metadata.companies.modals.createTitle") }}
+        </h3>
+        <p class="mt-1 text-zinc-400 text-sm">
+          {{ $t("library.admin.metadata.companies.modals.createDescription") }}
+        </p>
+      </div>
+      <div class="mt-2">
+        <form class="space-y-4" @submit.prevent="() => createCompany()">
+          <div>
+            <label
+              for="name"
+              class="block text-sm/6 font-medium text-zinc-100"
+              >{{
+                $t("library.admin.metadata.companies.modals.createFieldName")
+              }}</label
+            >
+            <div class="mt-2">
+              <input
+                id="name"
+                v-model="companyName"
+                type="text"
+                name="name"
+                :placeholder="
+                  $t(
+                    'library.admin.metadata.companies.modals.createFieldNamePlaceholder',
+                  )
+                "
+                class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+              />
+            </div>
+          </div>
+          <div>
+            <label
+              for="description"
+              class="block text-sm/6 font-medium text-zinc-100"
+              >{{
+                $t(
+                  "library.admin.metadata.companies.modals.createFieldDescription",
+                )
+              }}</label
+            >
+            <div class="mt-2">
+              <input
+                id="description"
+                v-model="companyDescription"
+                type="text"
+                name="description"
+                :placeholder="
+                  $t(
+                    'library.admin.metadata.companies.modals.createFieldDescriptionPlaceholder',
+                  )
+                "
+                class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+              />
+            </div>
+          </div>
+          <div>
+            <label
+              for="website"
+              class="block text-sm/6 font-medium text-zinc-100"
+              >{{
+                $t("library.admin.metadata.companies.modals.createFieldWebsite")
+              }}</label
+            >
+            <div class="mt-2">
+              <input
+                id="website"
+                v-model="companyWebsite"
+                type="text"
+                name="website"
+                :placeholder="
+                  $t(
+                    'library.admin.metadata.companies.modals.createFieldWebsitePlaceholder',
+                  )
+                "
+                class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+              />
+            </div>
+          </div>
+
+          <button class="hidden" type="submit" />
+        </form>
+      </div>
+    </template>
+
+    <template #buttons="{ close }">
+      <LoadingButton
+        :loading="loading"
+        :disabled="!companyValid"
+        class="w-full sm:w-fit"
+        @click="() => createCompany()"
+      >
+        {{ $t("common.create") }}
+      </LoadingButton>
+      <button
+        ref="cancelButtonRef"
+        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="() => close()"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import type { CompanyModel } from "~/prisma/client/models";
+
+const open = defineModel<boolean>({ required: true });
+
+const emit = defineEmits<{
+  created: [company: CompanyModel];
+}>();
+
+const companyName = ref("");
+const companyDescription = ref("");
+const companyWebsite = ref("");
+
+const loading = ref(false);
+const companyValid = computed(
+  () => companyName.value && companyDescription.value,
+);
+async function createCompany() {
+  loading.value = true;
+  try {
+    const newCompany = await $dropFetch("/api/v1/admin/company", {
+      method: "POST",
+      body: {
+        name: companyName.value,
+        description: companyDescription.value,
+        website: companyWebsite.value,
+      },
+      failTitle: "Failed to create new company",
+    });
+    open.value = false;
+    emit("created", newCompany);
+  } finally {
+    /* empty */
+  }
+  loading.value = false;
+}
+</script>

components/Modal/CreateTag.vue

@@ -0,0 +1,78 @@
+<template>
+  <ModalTemplate v-model="open">
+    <template #default>
+      <div>
+        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
+          {{ $t("library.admin.metadata.tags.modal.title") }}
+        </DialogTitle>
+        <p class="mt-1 text-zinc-400 text-sm">
+          {{ $t("library.admin.metadata.tags.modal.description") }}
+        </p>
+      </div>
+      <div class="mt-2">
+        <form @submit.prevent="() => createTag()">
+          <input
+            v-model="tagName"
+            type="text"
+            class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+          />
+          <button class="hidden" type="submit" />
+        </form>
+      </div>
+    </template>
+
+    <template #buttons="{ close }">
+      <LoadingButton
+        :loading="createTagLoading"
+        :disabled="!tagName"
+        class="w-full sm:w-fit"
+        @click="() => createTag()"
+      >
+        {{ $t("common.create") }}
+      </LoadingButton>
+      <button
+        ref="cancelButtonRef"
+        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="() => close()"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { DialogTitle } from "@headlessui/vue";
+import type { GameTagModel } from "~/prisma/client/models";
+
+const emit = defineEmits<{
+  created: [tag: GameTagModel];
+}>();
+
+const open = defineModel<boolean>({ required: true });
+
+const tagName = ref("");
+const createTagLoading = ref(false);
+
+async function createTag() {
+  if (!tagName.value || createTagLoading.value) return;
+
+  createTagLoading.value = true;
+
+  // Create the collection
+  const tag = await $dropFetch("/api/v1/admin/tags", {
+    method: "POST",
+    body: { name: tagName.value },
+    failTitle: "Failed to create tag",
+  });
+
+  // Reset and emit
+  tagName.value = "";
+  open.value = false;
+
+  emit("created", tag);
+  createTagLoading.value = false;
+}
+</script>

components/Modal/CreateToken.vue

@@ -0,0 +1,267 @@
+<template>
+  <ModalTemplate v-model="model" size-class="max-w-3xl">
+    <template #default>
+      <div class="space-y-5">
+        <div>
+          <label
+            for="name"
+            class="block text-sm font-medium leading-6 text-zinc-100"
+            >{{ $t("account.token.name") }}</label
+          >
+          <p class="text-zinc-400 block text-xs font-medium leading-6">
+            {{ $t("account.token.nameDesc") }}
+          </p>
+          <div class="mt-2">
+            <input
+              id="name"
+              v-model="name"
+              name="name"
+              type="text"
+              autocomplete="name"
+              :placeholder="
+                props.suggestedName ?? $t('account.token.namePlaceholder')
+              "
+              class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+            />
+          </div>
+        </div>
+
+        <div>
+          <Listbox v-model="expiryKey" as="div">
+            <ListboxLabel class="block text-sm/6 font-medium text-zinc-100">{{
+              $t("users.admin.simple.inviteExpiryLabel")
+            }}</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">{{ expiryKey }}</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
+                    v-for="[label] in Object.entries(expiry)"
+                    :key="label"
+                    v-slot="{ active, selected }"
+                    as="template"
+                    :value="label"
+                  >
+                    <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',
+                        ]"
+                        >{{ label }}</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>
+          <label
+            for="name"
+            class="block text-sm font-medium leading-6 text-zinc-100"
+            >{{ $t("account.token.acls") }}</label
+          >
+          <p class="text-zinc-400 block text-xs font-medium leading-6">
+            {{ $t("account.token.aclsDesc") }}
+          </p>
+          <fieldset class="divide-y divide-zinc-700">
+            <div
+              v-for="[sectionName, sectionAcls] in Object.entries(
+                aclsBySection,
+              )"
+              :key="sectionName"
+              class="grid lg:grid-cols-3 gap-1 py-3"
+            >
+              <div
+                v-for="[acl, description] in Object.entries(sectionAcls)"
+                :key="acl"
+                class="flex gap-3"
+              >
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      :id="`acl-${acl}`"
+                      v-model="currentACLs[acl]"
+                      aria-describedby="acl-description"
+                      :name="`acl-${acl}`"
+                      type="checkbox"
+                      class="col-start-1 row-start-1 appearance-none rounded-sm border checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 border-white/10 bg-white/5 dark:checked:border-blue-500 dark:checked:bg-blue-500 dark:indeterminate:border-blue-500 dark:indeterminate:bg-blue-500 dark:focus-visible:outline-blue-500 dark:disabled:border-white/5 dark:disabled:bg-white/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg
+                      class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-white/25"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                    >
+                      <path
+                        class="opacity-0 group-has-checked:opacity-100"
+                        d="M3 8L6 11L11 3.5"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        class="opacity-0 group-has-indeterminate:opacity-100"
+                        d="M3 7H11"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label
+                    :for="`acl-${acl}`"
+                    class="font-display font-medium text-white"
+                    >{{ acl }}</label
+                  >
+                  {{ " " }}
+                  <span id="acl-description" class="text-xs text-zinc-400"
+                    ><span class="sr-only">{{ acl }} </span
+                    >{{ description }}</span
+                  >
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+    </template>
+    <template #buttons>
+      <LoadingButton :loading="props.loading" @click="() => createToken()">
+        {{ $t("common.create") }}
+      </LoadingButton>
+      <button
+        class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
+        @click="() => cancel()"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import {
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
+import type { DurationLike } from "luxon";
+
+// Reuse for both admin and user tokens
+
+const model = defineModel<boolean>({ required: true });
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  acls: { [key: string]: string };
+  loading?: boolean;
+  suggestedAcls?: string[];
+  suggestedName?: string;
+}>();
+
+// Label to parameters to moment.js .add()
+const expiry: Record<string, DurationLike | undefined> = {
+  [t("account.token.expiryMonth")]: {
+    month: 1,
+  },
+  [t("account.token.expiry3Month")]: {
+    month: 3,
+  },
+  [t("account.token.expiry6Month")]: {
+    month: 6,
+  },
+  [t("account.token.expiryYear")]: {
+    year: 1,
+  },
+  [t("account.token.expiry5Year")]: {
+    year: 5,
+  },
+  [t("account.token.noExpiry")]: undefined,
+};
+const expiryKey = ref<keyof typeof expiry>(Object.keys(expiry)[0]); // Cast to any because we just know it's okay
+const name = ref(props.suggestedName ?? "");
+const currentACLs = ref<{ [key: string]: boolean }>(
+  Object.fromEntries((props.suggestedAcls ?? []).map((v) => [v, true])),
+);
+
+const aclsBySection = computed(() => {
+  const sections: { [key: string]: { [key: string]: string } } = {};
+  for (const [acl, description] of Object.entries(props.acls)) {
+    const section = acl.split(":")[0];
+    sections[section] ??= {};
+    sections[section][acl] = description;
+  }
+  return sections;
+});
+
+const emit = defineEmits<{
+  create: [name: string, acls: string[], expiry: DurationLike | undefined];
+}>();
+
+function createToken() {
+  emit(
+    "create",
+    name.value,
+    Object.entries(currentACLs.value)
+      .filter(([_acl, enabled]) => enabled)
+      .map(([acl, _enabled]) => acl),
+    expiry[expiryKey.value],
+  );
+}
+
+function cancel() {
+  model.value = false;
+}
+
+watch(model, (c) => {
+  if (!c) {
+    name.value = "";
+    currentACLs.value = {};
+  }
+});
+</script>

components/Modal/DeleteCollection.vue

@@ -6,13 +6,13 @@
           as="h3"
           class="text-lg font-bold font-display text-zinc-100"
         >
-          Delete Collection
+          {{ $t("library.collection.delete") }}
         </DialogTitle>
         <p class="mt-1 text-sm text-zinc-400">
-          Are you sure you want to delete "{{ collection?.name }}"?
+          {{ $t("common.deleteConfirm", [collection?.name]) }}
         </p>
         <p class="mt-2 text-sm font-bold text-red-500">
-          This action cannot be undone.
+          {{ $t("common.cannotUndo") }}
         </p>
       </div>
     </template>
@@ -22,35 +22,38 @@
         class="bg-red-600 text-white hover:bg-red-500"
         @click="() => deleteCollection()"
       >
-        Delete
+        {{ $t("common.delete") }}
       </LoadingButton>
       <button
         class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
         @click="() => (collection = undefined)"
       >
-        Cancel
+        {{ $t("cancel") }}
       </button>
     </template>
   </ModalTemplate>
 </template>
 
 <script setup lang="ts">
-import type { Collection } from "~/prisma/client";
+import type { CollectionModel } from "~/prisma/client/models";
 import { DialogTitle } from "@headlessui/vue";
 
-const collection = defineModel<Collection | undefined>();
+const collection = defineModel<CollectionModel | undefined>();
 const deleteLoading = ref(false);
 
 const collections = await useCollections();
+const { t } = useI18n();
 
 async function deleteCollection() {
   try {
     if (!collection.value) return;
 
     deleteLoading.value = true;
-    await $dropFetch(`/api/v1/collection/${collection.value.id}`, {
-      // @ts-expect-error not documented
+    await $dropFetch(`/api/v1/collection/:id`, {
       method: "DELETE",
+      params: {
+        id: collection.value.id,
+      },
     });
     const index = collections.value.findIndex(
       (e) => e.id == collection.value?.id,
@@ -62,9 +65,11 @@ async function deleteCollection() {
     createModal(
       ModalType.Notification,
       {
-        title: "Failed to add game to library",
-        // @ts-expect-error attempt to display statusMessage on error
-        description: `Drop couldn't add this game to your library: ${e?.statusMessage}`,
+        title: t("errors.library.add.title"),
+        description: t("errors.library.add.desc", [
+          // @ts-expect-error attempt to display statusMessage on error
+          e?.statusMessage ?? t("errors.unknown"),
+        ]),
       },
       (_, c) => c(),
     );

components/Modal/DeleteNews.vue

@@ -6,13 +6,13 @@
           as="h3"
           class="text-lg font-bold font-display text-zinc-100"
         >
-          Delete Article
+          {{ $t("news.delete") }}
         </DialogTitle>
         <p class="mt-1 text-sm text-zinc-400">
-          Are you sure you want to delete "{{ article?.title }}"?
+          {{ $t("common.deleteConfirm", [article?.title]) }}
         </p>
         <p class="mt-2 text-sm font-bold text-red-500">
-          This action cannot be undone.
+          {{ $t("common.cannotUndo") }}
         </p>
       </div>
     </template>
@@ -22,13 +22,13 @@
         class="bg-red-600 text-white hover:bg-red-500"
         @click="() => deleteArticle()"
       >
-        Delete
+        {{ $t("common.delete") }}
       </LoadingButton>
       <button
         class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
         @click="() => (article = undefined)"
       >
-        Cancel
+        {{ $t("cancel") }}
       </button>
     </template>
   </ModalTemplate>
@@ -45,6 +45,7 @@ interface Article {
 const article = defineModel<Article | undefined>();
 const deleteLoading = ref(false);
 const router = useRouter();
+const { t } = useI18n();
 const news = useNews();
 if (!news.value) {
   news.value = await fetchNews();
@@ -68,9 +69,11 @@ async function deleteArticle() {
     createModal(
       ModalType.Notification,
       {
-        title: "Failed to delete article",
-        // @ts-expect-error attempt to display statusMessage on error
-        description: `Drop couldn't delete this article: ${e?.statusMessage}`,
+        title: t("errors.news.article.delete.title"),
+        description: t("errors.news.article.delete.desc", [
+          // @ts-expect-error attempt to display statusMessage on error
+          e?.statusMessage ?? t("errors.unknown"),
+        ]),
       },
       (_, c) => c(),
     );

components/Modal/DeleteUser.vue

@@ -0,0 +1,75 @@
+<template>
+  <ModalTemplate :model-value="!!user">
+    <template #default>
+      <div>
+        <DialogTitle
+          as="h3"
+          class="text-lg font-bold font-display text-zinc-100"
+        >
+          {{ $t("users.admin.deleteUser", [user?.username]) }}
+        </DialogTitle>
+        <p class="mt-1 text-sm text-zinc-400">
+          {{ $t("common.deleteConfirm", [user?.username]) }}
+        </p>
+        <p class="mt-2 text-sm font-bold text-red-500">
+          {{ $t("common.cannotUndo") }}
+        </p>
+      </div>
+    </template>
+    <template #buttons>
+      <LoadingButton
+        :loading="deleteLoading"
+        class="bg-red-600 text-white hover:bg-red-500"
+        @click="() => deleteUser()"
+      >
+        {{ $t("common.delete") }}
+      </LoadingButton>
+      <button
+        class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
+        @click="() => (user = undefined)"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import { DialogTitle } from "@headlessui/vue";
+import type { UserModel } from "~/prisma/client/models";
+
+const user = defineModel<UserModel | undefined>();
+const deleteLoading = ref(false);
+const router = useRouter();
+const { t } = useI18n();
+
+async function deleteUser() {
+  try {
+    if (!user.value) return;
+
+    deleteLoading.value = true;
+    await $dropFetch(`/api/v1/admin/users/${user.value.id}`, {
+      method: "DELETE",
+    });
+
+    user.value = undefined;
+
+    await fetchUsers();
+    router.push("/admin/users");
+  } catch (e) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: t("errors.admin.user.delete.title"),
+        description: t("errors.admin.user.delete.desc", [
+          // @ts-expect-error attempt to display statusMessage on error
+          e?.statusMessage ?? t("errors.unknown"),
+        ]),
+      },
+      (_, c) => c(),
+    );
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+</script>

components/Modal/SelectLaunch.vue

@@ -0,0 +1,229 @@
+<template>
+  <ModalTemplate v-model="open">
+    <template #default>
+      <div>
+        <h1 as="h3" class="text-lg font-medium leading-6 text-white">
+          {{ $t("library.admin.launchSelector.title") }}
+        </h1>
+        <p class="mt-1 text-zinc-400 text-sm">
+          {{ $t("library.admin.launchSelector.description") }}
+        </p>
+        <div
+          v-if="props.filterPlatform"
+          class="inline-flex items-center mt-2 gap-x-4"
+        >
+          <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+            {{ $t("library.admin.launchSelector.platformFilterHint") }}
+          </h1>
+          <span class="flex items-center">
+            <component
+              :is="PLATFORM_ICONS[props.filterPlatform]"
+              alt=""
+              class="size-5 flex-shrink-0 text-blue-600"
+            />
+            <span class="ml-2 block truncate text-zinc-100 text-sm font-bold">{{
+              props.filterPlatform
+            }}</span>
+          </span>
+        </div>
+      </div>
+      <div class="mt-2 space-y-4">
+        <div>
+          <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+            {{ $t("library.admin.launchSelector.search") }}
+          </h1>
+          <SelectorGame
+            :search="search"
+            :model-value="game"
+            class="w-full mt-2"
+            @update:model-value="(value) => updateGame(value)"
+          />
+        </div>
+        <div
+          v-if="versions !== undefined && Object.entries(versions).length == 0"
+          class="text-zinc-300 text-sm font-bold font-display uppercase text-center w-full"
+        >
+          {{ $t("library.admin.launchSelector.noVersions") }}
+        </div>
+        <div v-else-if="versions !== undefined">
+          <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+            {{ $t("library.admin.launchSelector.selectVersions") }}
+          </h1>
+          <SelectorCombox
+            :search="
+              (v) =>
+                Object.values(versions!)
+                  .filter((k) =>
+                    (k.displayName || k.versionPath)!
+                      .toLowerCase()
+                      .includes(v.toLowerCase()),
+                  )
+                  .map((v) => ({
+                    id: v.versionId,
+                    name: (v.displayName ?? v.versionPath)!,
+                  }))
+            "
+            :display="(v) => v.name"
+            :model-value="version"
+            class="w-full mt-2"
+            @update:model-value="updateVersion"
+          >
+            <template #default="{ value }">
+              {{ value.name }}
+            </template>
+          </SelectorCombox>
+        </div>
+        <div v-if="versions && version">
+          <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+            {{ $t("library.admin.launchSelector.selectCommand") }}
+          </h1>
+          <SelectorCombox
+            :search="
+              (v) =>
+                versions![version!.id].launches
+                  .filter(
+                    (k) =>
+                      (k.name || k.command)
+                        .toLowerCase()
+                        .includes(v.toLowerCase()) &&
+                      (props.filterPlatform
+                        ? k.platform == props.filterPlatform
+                        : true),
+                  )
+                  .map((v) => ({
+                    id: v.launchId,
+                    ...v,
+                  }))
+            "
+            :display="(v) => v.name"
+            :model-value="launchId"
+            class="w-full mt-2"
+            @update:model-value="(v) => (launchId = v)"
+          >
+            <template #default="{ value }">
+              <div class="flex flex-col">
+                <span class="text-zinc-300 text-sm">
+                  {{ value.name }}
+                </span>
+                <span class="text-zinc-400 text-xs">{{ value.command }}</span>
+              </div>
+            </template>
+          </SelectorCombox>
+        </div>
+      </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>
+    </template>
+    <template #buttons>
+      <LoadingButton :loading="false" :disabled="!launchId" @click="submit">
+        {{ $t("common.select") }}
+      </LoadingButton>
+      <button
+        class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
+        @click="() => (open = false)"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import { XCircleIcon } from "@heroicons/vue/24/outline";
+import type { EmulatorLaunchObject } from "~/composables/frontend";
+import type { Platform } from "~/prisma/client/enums";
+import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
+
+const props = defineProps<{ filterPlatform?: Platform }>();
+
+const open = defineModel<boolean>({ required: true });
+
+const error = ref<string | undefined>();
+const game = ref<GameMetadataSearchResult | undefined>(undefined);
+const version = ref<{ id: string; name: string } | undefined>(undefined);
+const launchId = ref<
+  { id: string; name: string; command: string; platform: Platform } | undefined
+>(undefined);
+
+const versions = ref<
+  | {
+      [key: string]: {
+        displayName: string | null;
+        launches: {
+          launchId: string;
+          command: string;
+          name: string;
+          platform: Platform;
+        }[];
+        versionId: string;
+        versionPath: string | null;
+      };
+    }
+  | undefined
+>(undefined);
+
+const emit = defineEmits<{
+  select: [data: EmulatorLaunchObject];
+}>();
+
+async function search(query: string) {
+  return await $dropFetch("/api/v1/admin/search/game", {
+    query: { q: query, type: "Emulator" },
+  });
+}
+
+function updateGame(value: GameMetadataSearchResult | undefined) {
+  if (game.value !== value || value == undefined) {
+    version.value = undefined;
+    versions.value = undefined;
+    launchId.value = undefined;
+  }
+
+  game.value = value;
+
+  if (game.value) fetchVersions();
+}
+
+async function fetchVersions() {
+  const newVersions = await $dropFetch("/api/v1/admin/game/:id/versions", {
+    params: { id: game.value!.id },
+    failTitle: "Failed to fetch versions for launch picker",
+  });
+  versions.value = Object.fromEntries(newVersions.map((v) => [v.versionId, v]));
+}
+
+function updateVersion(v: typeof version.value) {
+  if (version.value !== v || v == undefined) {
+    launchId.value = undefined;
+  }
+  version.value = v;
+}
+
+function submit() {
+  emit("select", {
+    launchId: launchId.value!.id,
+    gameName: game.value!.name,
+    gameIcon: game.value!.icon,
+    versionName: version.value!.name,
+    launchName: launchId.value!.name,
+    platform: launchId.value!.platform,
+  });
+  open.value = false;
+}
+
+watch(open, () => {
+  game.value = undefined;
+  updateGame(game.value);
+});
+</script>

components/Modal/UploadFile.vue

@@ -49,31 +49,38 @@
                       />
                       <span
                         class="transition mt-2 block text-sm font-semibold text-zinc-400 group-hover:text-zinc-500"
-                        >Upload file</span
+                        >{{ $t("uploadFile") }}</span
                       >
-                      <p v-if="currentFile" class="mt-1 text-xs text-zinc-400">
-                        {{ currentFile.name }}
-                      </p>
+                      <div v-if="currentFileList">
+                        <p
+                          v-for="currentFile in currentFileList"
+                          :key="currentFile"
+                          class="mt-1 text-[10px] text-zinc-500 whitespace-nowrap"
+                        >
+                          {{ currentFile }}
+                        </p>
+                      </div>
                     </label>
                     <input
                       id="file-upload"
                       :accept="props.accept"
                       class="hidden"
                       type="file"
-                      @change="(e) => (file = (e.target as any)?.files)"
+                      :multiple="props.multiple"
+                      @change="(e: Event) => (file = (e.target as any)?.files)"
                     />
                   </div>
                 </div>
               </div>
               <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                 <LoadingButton
-                  :disabled="currentFile == undefined"
+                  :disabled="currentFiles == undefined"
                   type="button"
                   :loading="uploadLoading"
                   :class="['inline-flex w-full shadow-sm sm:ml-3 sm:w-auto']"
                   @click="() => uploadFile_wrapper()"
                 >
-                  Upload
+                  {{ $t("upload") }}
                 </LoadingButton>
                 <button
                   ref="cancelButtonRef"
@@ -81,7 +88,7 @@
                   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="open = false"
                 >
-                  Cancel
+                  {{ $t("cancel") }}
                 </button>
               </div>
               <div v-if="uploadError" class="mt-3 rounded-md bg-red-600/10 p-4">
@@ -122,11 +129,21 @@ const open = defineModel<boolean>({
   required: true,
 });
 
+const { t } = useI18n();
 const file = ref<FileList | undefined>();
-const currentFile = computed(() => file.value?.item(0));
+const currentFiles = computed(() => file.value);
+const currentFileList = computed(() => {
+  if (!currentFiles.value) return undefined;
+  const list = [];
+  for (const file of currentFiles.value) {
+    list.push(file.name);
+  }
+  return list;
+});
 const props = defineProps<{
   endpoint: string;
   accept: string;
+  multiple?: boolean;
   options?: { [key: string]: string };
 }>();
 const emit = defineEmits(["upload"]);
@@ -134,10 +151,12 @@ const emit = defineEmits(["upload"]);
 const uploadLoading = ref(false);
 const uploadError = ref<string | undefined>();
 async function uploadFile() {
-  if (!currentFile.value) return;
+  if (!currentFiles.value) return;
 
   const form = new FormData();
-  form.append("file", currentFile.value);
+  for (const file of currentFiles.value) {
+    form.append(file.name, file);
+  }
 
   if (props.options) {
     for (const [key, value] of Object.entries(props.options)) {
@@ -158,7 +177,7 @@ function uploadFile_wrapper() {
   uploadLoading.value = true;
   uploadFile()
     .catch((error) => {
-      uploadError.value = error.statusMessage ?? "An unknown error occurred.";
+      uploadError.value = error.statusMessage ?? t("errors.unknown");
     })
     .finally(() => {
       uploadLoading.value = false;

components/NewsArticleCreateButton.vue

@@ -11,18 +11,18 @@
         class="h-5 w-5 transition-transform duration-200"
         :class="{ 'rotate-90': modalOpen }"
       />
-      <span>New article</span>
+      <span>{{ $t("news.article.new") }}</span>
     </button>
 
     <ModalTemplate v-model="modalOpen" size-class="sm:max-w-[80vw]">
       <h3 class="text-lg font-semibold text-zinc-100 mb-4">
-        Create New Article
+        {{ $t("news.article.create") }}
       </h3>
       <form class="space-y-4" @submit.prevent="() => createArticle()">
         <div>
-          <label for="title" class="block text-sm font-medium text-zinc-400"
-            >Title</label
-          >
+          <label for="title" class="block text-sm font-medium text-zinc-400">{{
+            $t("news.article.titles")
+          }}</label>
           <input
             id="title"
             v-model="newArticle.title"
@@ -34,8 +34,10 @@
         </div>
 
         <div>
-          <label for="excerpt" class="block text-sm font-medium text-zinc-400"
-            >Short description</label
+          <label
+            for="excerpt"
+            class="block text-sm font-medium text-zinc-400"
+            >{{ $t("news.article.shortDesc") }}</label
           >
           <input
             id="excerpt"
@@ -47,8 +49,10 @@
         </div>
 
         <div>
-          <label for="content" class="block text-sm font-medium text-zinc-400"
-            >Content (Markdown)</label
+          <label
+            for="content"
+            class="block text-sm font-medium text-zinc-400"
+            >{{ $t("news.article.content") }}</label
           >
           <div class="mt-1 flex flex-col gap-4">
             <!-- Markdown shortcuts -->
@@ -69,7 +73,9 @@
             >
               <!-- Editor -->
               <div class="flex flex-col">
-                <span class="text-sm text-zinc-500 mb-2">Editor</span>
+                <span class="text-sm text-zinc-500 mb-2">{{
+                  $t("news.article.editor")
+                }}</span>
                 <textarea
                   id="content"
                   ref="contentEditor"
@@ -82,7 +88,9 @@
 
               <!-- Preview -->
               <div class="flex flex-col">
-                <span class="text-sm text-zinc-500 mb-2">Preview</span>
+                <span class="text-sm text-zinc-500 mb-2">{{
+                  $t("news.article.preview")
+                }}</span>
                 <div
                   class="flex-1 p-4 rounded-md bg-zinc-900 border border-zinc-700 overflow-y-auto"
                 >
@@ -95,8 +103,7 @@
             </div>
           </div>
           <p class="mt-2 text-sm text-zinc-500">
-            Use the shortcuts above or write Markdown directly. Supports
-            **bold**, *italic*, [links](url), and more.
+            {{ $t("news.article.editorGuide") }}
           </p>
         </div>
 
@@ -114,7 +121,7 @@
             />
             <span
               class="transition mt-2 block text-sm font-semibold text-zinc-400 group-hover:text-zinc-500"
-              >Upload cover image</span
+              >{{ $t("news.article.uploadCover") }}</span
             >
             <p v-if="currentFile" class="mt-1 text-xs text-zinc-400">
               {{ currentFile.name }}
@@ -125,14 +132,14 @@
             accept="image/*"
             class="hidden"
             type="file"
-            @change="(e) => (file = (e.target as any)?.files)"
+            @change="(e: Event) => (file = (e.target as any)?.files)"
           />
         </div>
 
         <div>
-          <label class="block text-sm font-medium text-zinc-400 mb-2"
-            >Tags</label
-          >
+          <label class="block text-sm font-medium text-zinc-400 mb-2">{{
+            $t("common.tags")
+          }}</label>
           <div class="flex flex-wrap gap-2 mb-2">
             <span
               v-for="tag in newArticle.tags"
@@ -153,7 +160,7 @@
             <input
               v-model="newTagInput"
               type="text"
-              placeholder="Add a tag..."
+              :placeholder="$t('news.article.tagPlaceholder')"
               class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
               @keydown.enter.prevent="addTag"
             />
@@ -162,7 +169,7 @@
               class="mt-1 px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
               @click="addTag"
             >
-              Add
+              {{ $t("news.article.add") }}
             </button>
           </div>
         </div>
@@ -186,15 +193,16 @@
         <LoadingButton
           :loading="loading"
           class="bg-blue-600 text-white hover:bg-blue-500"
+          :disabled="!isValidArticle"
           @click="() => createArticle()"
         >
-          Submit
+          {{ $t("news.article.submit") }}
         </LoadingButton>
         <button
           class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
           @click="() => (modalOpen = !modalOpen)"
         >
-          Cancel
+          {{ $t("cancel") }}
         </button>
       </template>
     </ModalTemplate>
@@ -228,6 +236,13 @@ const newArticle = ref({
   tags: [] as string[],
 });
 
+const isValidArticle = computed(
+  () =>
+    newArticle.value.title &&
+    newArticle.value.description &&
+    newArticle.value.content,
+);
+
 const markdownPreview = computed(() => {
   // TODO: maybe?? add https://github.com/cure53/DOMPurify
   // micromark says its safe, but this is straight html we are injecting
@@ -236,18 +251,49 @@ const markdownPreview = computed(() => {
 
 const file = ref<FileList | undefined>();
 const currentFile = computed(() => file.value?.item(0));
+const { t } = useI18n();
 
 const error = ref<string | undefined>();
 
 const contentEditor = ref<HTMLTextAreaElement>();
 
 const markdownShortcuts = [
-  { label: "Bold", prefix: "**", suffix: "**", placeholder: "bold text" },
-  { label: "Italic", prefix: "_", suffix: "_", placeholder: "italic text" },
-  { label: "Link", prefix: "[", suffix: "](url)", placeholder: "link text" },
-  { label: "Code", prefix: "`", suffix: "`", placeholder: "code" },
-  { label: "List Item", prefix: "- ", suffix: "", placeholder: "list item" },
-  { label: "Heading", prefix: "## ", suffix: "", placeholder: "heading" },
+  {
+    label: t("editor.bold"),
+    prefix: "**",
+    suffix: "**",
+    placeholder: t("editor.boldPlaceholder"),
+  },
+  {
+    label: t("editor.italic"),
+    prefix: "_",
+    suffix: "_",
+    placeholder: t("editor.italicPlaceholder"),
+  },
+  {
+    label: t("editor.link"),
+    prefix: "[",
+    suffix: "](url)",
+    placeholder: t("editor.linkPlaceholder"),
+  },
+  {
+    label: t("editor.code"),
+    prefix: "`",
+    suffix: "`",
+    placeholder: t("editor.codePlaceholder"),
+  },
+  {
+    label: t("editor.listItem"),
+    prefix: "- ",
+    suffix: "",
+    placeholder: t("editor.listItemPlaceholder"),
+  },
+  {
+    label: t("editor.heading"),
+    prefix: "## ",
+    suffix: "",
+    placeholder: t("editor.headingPlaceholder"),
+  },
 ];
 
 function handleContentKeydown(e: KeyboardEvent) {
@@ -369,7 +415,7 @@ async function createArticle() {
     modalOpen.value = false;
   } catch (e) {
     // @ts-expect-error attempt to get statusMessage on error
-    error.value = e?.statusMessage ?? "An unknown error occured.";
+    error.value = e?.statusMessage ?? t("errors.unknown");
   } finally {
     loading.value = false;
   }

components/NotificationItem.vue

@@ -24,7 +24,6 @@
             >
               {{ name }}
             </NuxtLink>
-            <!-- todo -->
           </div>
         </div>
         <div class="ml-4 flex shrink-0">
@@ -33,7 +32,7 @@
             class="inline-flex rounded-md text-zinc-400 hover:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
             @click="() => deleteMe()"
           >
-            <span class="sr-only">Close</span>
+            <span class="sr-only">{{ $t("common.close") }}</span>
             <XMarkIcon class="size-5" aria-hidden="true" />
           </button>
         </div>
@@ -44,13 +43,19 @@
 
 <script setup lang="ts">
 import { XMarkIcon } from "@heroicons/vue/24/solid";
-import type { Notification } from "~/prisma/client";
+import type { SerializeObject } from "nitropack";
+import type { NotificationModel } from "~/prisma/client/models";
 
-const props = defineProps<{ notification: Notification }>();
+const props = defineProps<{
+  notification: SerializeObject<NotificationModel>;
+}>();
 
 async function deleteMe() {
-  await $dropFetch(`/api/v1/notifications/${props.notification.id}`, {
+  await $dropFetch(`/api/v1/notifications/:id`, {
     method: "DELETE",
+    params: {
+      id: props.notification.id,
+    },
   });
   const notifications = useNotifications();
   const indexOfMe = notifications.value.findIndex(

components/OptionWrapper.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    :class="[
+      'transition border border-3 rounded-xl relative cursor-pointer',
+      active ? 'border-blue-600' : 'border-zinc-700',
+    ]"
+  >
+    <div v-if="active" class="absolute top-1 right-1 z-1">
+      <CheckIcon
+        class="rounded-full p-1.5 bg-blue-600 size-6 text-transparent stroke-3 stroke-zinc-900 font-bold"
+      />
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon } from "@heroicons/vue/24/solid";
+
+const { active = false } = defineProps<{ active?: boolean }>();
+</script>

components/PieChart/PieChart.vue

@@ -0,0 +1,47 @@
+<template>
+  <h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
+  <div class="flex">
+    <div class="flex flex-col md:flex-row xl:gap-4 mx-auto">
+      <div class="relative flex max-w-[12rem] my-auto min-w-50">
+        <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
+          <PieChartPieSlice
+            v-for="slice in slices"
+            :key="`${slice.percentage}-${slice.totalPercentage}`"
+            :slice="slice"
+          />
+        </svg>
+        <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+      </div>
+      <ul class="flex flex-col gap-y-1 m-auto text-left">
+        <li
+          v-for="slice in slices"
+          :key="slice.value"
+          class="text-sm inline-flex items-center gap-x-1"
+        >
+          <span
+            class="size-3 inline-block rounded-sm"
+            :class="CHART_COLOURS[slice.color].bg"
+          />
+          {{
+            $t("common.labelValueColon", {
+              label: slice.label,
+              value: $n(slice.value),
+            })
+          }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { generateSlices } from "~/components/PieChart/utils";
+import type { SliceData } from "~/components/PieChart/types";
+
+const { data, title = undefined } = defineProps<{
+  data: SliceData[];
+  title?: string | undefined;
+}>();
+
+const slices = generateSlices(data);
+</script>

components/PieChart/PieSlice.vue

@@ -0,0 +1,35 @@
+<template>
+  <path
+    v-if="slice.percentage !== 0 && slice.percentage !== 100"
+    :class="[CHART_COLOURS[slice.color].fill]"
+    :d="`
+      M ${slice.start}
+      A ${slice.radius},${slice.radius} 0 ${getFlags(slice.percentage)} ${polarToCartesian(slice.center, slice.radius, percent2Degrees(slice.totalPercentage))}
+      L ${slice.center}
+      z
+    `"
+    stroke-width="2"
+  />
+  <circle
+    v-if="slice.percentage === 100"
+    :r="slice.radius"
+    :cx="slice.center.x"
+    :cy="slice.center.y"
+    :class="[CHART_COLOURS[slice.color].fill]"
+    stroke-width="2"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Slice } from "~/components/PieChart/types";
+import {
+  getFlags,
+  percent2Degrees,
+  polarToCartesian,
+} from "~/components/PieChart/utils";
+import { CHART_COLOURS } from "~/utils/colors";
+
+const { slice } = defineProps<{
+  slice: Slice;
+}>();
+</script>

components/PieChart/types.d.ts

@@ -0,0 +1,19 @@
+import type Tuple from "~/utils/tuple";
+import type { ChartColour } from "~/utils/colors";
+
+export type Slice = {
+  start: Tuple;
+  center: Tuple;
+  percentage: number;
+  totalPercentage: number;
+  radius: number;
+  color: ChartColour;
+  label: string;
+  value: number;
+};
+
+export type SliceData = {
+  value: number;
+  color?: ChartColour;
+  label: string;
+};

components/PieChart/utils.ts

@@ -0,0 +1,50 @@
+import Tuple from "~/utils/tuple";
+import type { Slice, SliceData } from "~/components/PieChart/types";
+import { sum, lastItem } from "~/utils/array";
+
+export const START = new Tuple(50, 10);
+export const CENTER = new Tuple(50, 50);
+export const RADIUS = 40;
+
+export const polarToCartesian = (
+  center: Tuple,
+  radius: number,
+  angleInDegrees: number,
+) => {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
+  const x = center.x + radius * Math.cos(angleInRadians);
+  const y = center.y + radius * Math.sin(angleInRadians);
+  return new Tuple(x, y);
+};
+
+export const percent2Degrees = (percentage: number) => (360 * percentage) / 100;
+
+export function generateSlices(data: SliceData[]): Slice[] {
+  return data.reduce((accumulator, currentValue, index, array) => {
+    const percentage =
+      (currentValue.value * 100) / sum(array.map((slice) => slice.value));
+    return [
+      ...accumulator,
+      {
+        start: accumulator.length
+          ? polarToCartesian(
+              CENTER,
+              RADIUS,
+              percent2Degrees(lastItem(accumulator).totalPercentage),
+            )
+          : START,
+        radius: RADIUS,
+        percentage: percentage,
+        totalPercentage:
+          sum(accumulator.map((element) => element.percentage)) + percentage,
+        center: CENTER,
+        color: PIE_COLOURS[index % PIE_COLOURS.length],
+        label: currentValue.label,
+        value: currentValue.value,
+      },
+    ];
+  }, [] as Slice[]);
+}
+
+export const getFlags = (percentage: number) =>
+  percentage > 50 ? new Tuple(1, 1) : new Tuple(0, 1);

components/ProgressBar.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    :class="[
+      'relative h-5 rounded-xl overflow-hidden',
+      CHART_COLOURS[backgroundColor].bg,
+    ]"
+  >
+    <div
+      :style="{ width: `${percentage}%` }"
+      :class="['transition-all h-full', CHART_COLOURS[color].bg]"
+    />
+    <span
+      class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
+    >
+      <!-- {{ $t("tasks.admin.progress", [Math.round(percentage * 10) / 10]) }} -->
+      {{ $n(Math.round(percentage * 100) / 10000, "percent") }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ChartColour, CHART_COLOURS } from "~/utils/colors";
+const {
+  percentage,
+  color = "blue",
+  backgroundColor = "zinc",
+} = defineProps<{
+  percentage: number;
+  color?: ChartColour;
+  backgroundColor?: ChartColour;
+}>();
+</script>

components/RankingList.vue

@@ -0,0 +1,43 @@
+<template>
+  <table v-if="items.length > 0" class="w-full mt-4 space-y-6">
+    <thead>
+      <tr>
+        <th></th>
+        <th></th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-white/10">
+      <tr v-for="item in items" :key="`${item.rank}-${item.name}`">
+        <td
+          class="my-2 size-7 rounded-sm bg-zinc-950 ring ring-zinc-800 inline-flex items-center justify-center font-bold font-display text-blue-500"
+        >
+          {{ item.rank }}
+        </td>
+        <td class="w-full font-bold px-2">{{ item.name }}</td>
+        <td
+          class="text-right text-sm font-semibold text-zinc-500 whitespace-nowrap"
+        >
+          {{ item.value }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p
+    v-else
+    class="w-full p-2 text-center uppercase text-sm font-display font-bold text-zinc-700"
+  >
+    {{ $t("common.noData") }}
+  </p>
+</template>
+
+<script lang="ts" setup>
+export type RankItem = {
+  rank: number;
+  name: string;
+  value: string;
+};
+const { items } = defineProps<{
+  items: RankItem[];
+}>();
+</script>

components/RelativeTime.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="relative inline-block group/relative-time">
+    <!-- Visible relative time -->
+    <time :datetime="isoDate" class="text-sm text-muted-foreground">
+      {{ DateTime.fromJSDate(date).toRelative({ locale: $i18n.locale }) }}
+    </time>
+
+    <!-- Custom tooltip that shows on hover -->
+    <div
+      role="tooltip"
+      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 rounded bg-zinc-900 text-white text-xs whitespace-nowrap shadow z-10 opacity-0 group-hover/relative-time:opacity-100 transition-opacity pointer-events-none"
+      aria-hidden="true"
+    >
+      {{ $d(date, "long") }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from "luxon";
+import { computed } from "vue";
+
+const props = defineProps<{
+  date: string | Date;
+}>();
+
+const date = computed(() =>
+  typeof props.date === "string" ? new Date(props.date) : props.date,
+);
+
+const isoDate = computed(() => date.value.toISOString());
+</script>

components/Selector/Combox.vue

@@ -0,0 +1,91 @@
+<template>
+  <Combobox
+    as="div"
+    nullable
+    :immediate="true"
+    :model-value="model"
+    class="bg-zinc-800 rounded"
+    @update:model-value="updateModelValue"
+  >
+    <div class="relative">
+      <ComboboxInput
+        :key="model?.id ?? 'off'"
+        class="block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
+        placeholder="Start typing..."
+        :display-value="(v) => (v ? props.display(v as T) : '')"
+        @change="query = $event.target.value"
+        @blur="query = ''"
+      />
+      <ComboboxButton
+        class="absolute inset-0 right-0 flex items-center justify-end rounded-r-md px-2 focus:outline-none"
+      >
+        <ChevronUpDownIcon class="size-5 text-gray-400" aria-hidden="true" />
+      </ComboboxButton>
+
+      <ComboboxOptions
+        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-white/5 focus:outline-none sm:text-sm"
+      >
+        <div
+          v-if="results.length == 0"
+          class="text-zinc-300 uppercase font-display font-bold text-center p-4"
+        >
+          {{ $t("common.noResults") }}
+        </div>
+        <ComboboxOption
+          v-for="result in results"
+          v-else
+          :key="result.id"
+          v-slot="{ active, selected }"
+          :value="result"
+          as="template"
+        >
+          <li
+            :class="[
+              'relative cursor-default select-none py-2 pl-3 pr-9',
+              active ? 'bg-blue-600 text-white outline-none' : 'text-zinc-100',
+            ]"
+          >
+            <span>
+              <slot :value="result" />
+            </span>
+
+            <span
+              v-if="selected"
+              :class="[
+                'absolute inset-y-0 right-0 flex items-center pr-4',
+                active ? 'text-white' : 'text-blue-600',
+              ]"
+            >
+              <CheckIcon class="size-5" aria-hidden="true" />
+            </span>
+          </li>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </div>
+  </Combobox>
+</template>
+
+<script setup lang="ts" generic="T extends { id: string }">
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps<{
+  search: (query: string) => T[];
+  display: (value: T) => string;
+}>();
+
+const model = defineModel<T | undefined>();
+const query = ref("");
+
+const results = computed(() => props.search(query.value));
+
+function updateModelValue(v: T) {
+  model.value = v;
+}
+</script>

components/Selector/FileExtension.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="flex gap-1 flex-wrap">
+      <span
+        v-for="extension in model"
+        :key="extension"
+        class="inline-flex items-center gap-x-0.5 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 inset-ring inset-ring-blue-400/30"
+      >
+        {{ extension }}
+        <button
+          type="button"
+          class="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-500/30"
+          @click="() => removeFileExtension(extension)"
+        >
+          <span class="sr-only">{{ $t("common.remove") }}</span>
+          <svg
+            viewBox="0 0 14 14"
+            class="size-3.5 stroke-blue-400 group-hover:stroke-blue-300"
+          >
+            <path d="M4 4l6 6m0-6l-6 6" />
+          </svg>
+          <span class="absolute -inset-1"></span>
+        </button>
+      </span>
+      <span v-if="model.length == 0" class="text-zinc-500 text-xs">{{
+        $t("library.admin.fileExtSelector.noSelected")
+      }}</span>
+    </div>
+    <Combobox
+      as="div"
+      nullable
+      :immediate="true"
+      :model-value="model"
+      class="mt-2 bg-zinc-800 rounded"
+      @update:model-value="addFileExtension"
+    >
+      <div class="relative">
+        <ComboboxInput
+          class="block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6 w-full"
+          placeholder="Start typing..."
+          :display-value="(_) => ''"
+          @change="query = $event.target.value"
+          @blur="query = ''"
+        />
+        <ComboboxButton
+          class="absolute inset-0 right-0 flex items-center justify-end rounded-r-md px-2 focus:outline-none"
+        >
+          <ChevronUpDownIcon class="size-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+
+        <ComboboxOptions
+          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-white/5 focus:outline-none sm:text-sm"
+        >
+          <ComboboxOption
+            v-if="query"
+            v-slot="{ active, selected }"
+            :value="query"
+            as="template"
+          >
+            <li
+              :class="[
+                'relative cursor-default select-none py-2 pl-3 pr-9',
+                active
+                  ? 'bg-blue-600 text-white outline-none'
+                  : 'text-zinc-100',
+              ]"
+            >
+              <span>
+                {{
+                  $t("library.admin.fileExtSelector.add", [normalize(query)])
+                }}</span
+              >
+
+              <span
+                v-if="selected"
+                :class="[
+                  'absolute inset-y-0 right-0 flex items-center pr-4',
+                  active ? 'text-white' : 'text-blue-600',
+                ]"
+              >
+                <CheckIcon class="size-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
+
+const model = defineModel<string[]>({ required: true });
+
+const query = ref("");
+
+function normalize(v: string) {
+  const k = v.toLowerCase().replaceAll(/[^a-zA-Z0-9]*/g, "");
+  if (k.startsWith(".")) return k;
+  return `.${k}`;
+}
+
+function addFileExtension(raw: string) {
+  const value = normalize(raw);
+  if (model.value.includes(value)) return;
+  model.value.push(value);
+}
+
+function removeFileExtension(extension: string) {
+  const index = model.value.findIndex((v) => v === extension);
+  if (index == -1) return;
+  model.value.splice(index, 1);
+}
+</script>

components/Selector/Game.vue

@@ -0,0 +1,131 @@
+<template>
+  <Combobox
+    v-model="currentResult"
+    as="div"
+    nullable
+    class="bg-zinc-800 rounded"
+  >
+    <div class="relative">
+      <ComboboxInput
+        class="block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
+        placeholder="Start typing..."
+        :display-value="(game) => (game as GameMetadataSearchResult)?.name"
+        @change="gameSearchQuery = $event.target.value"
+        @blur="gameSearchQuery = ''"
+      />
+      <ComboboxButton
+        class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
+      >
+        <ChevronUpDownIcon class="size-5 text-gray-400" aria-hidden="true" />
+      </ComboboxButton>
+
+      <ComboboxOptions
+        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-white/5 focus:outline-none sm:text-sm"
+      >
+        <div
+          v-if="gameSearchQuery.length < 4"
+          class="text-zinc-300 uppercase font-display font-bold text-center p-4"
+        >
+          {{ $t("library.admin.gameSelector.hint") }}
+        </div>
+        <div
+          v-else-if="resultsLoading || results === undefined"
+          class="flex items-center justify-center p-2"
+        >
+          <svg
+            aria-hidden="true"
+            class="w-8 h-8 text-transparent animate-spin fill-zinc-100"
+            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>
+        </div>
+        <div
+          v-else-if="results.length == 0"
+          class="text-zinc-500 uppercase font-display font-bold text-center p-4"
+        >
+          {{ $t("common.noResults") }}
+        </div>
+        <ComboboxOption
+          v-for="result in results"
+          v-else
+          :key="result.id"
+          v-slot="{ active, selected }"
+          :value="result"
+          as="template"
+        >
+          <li
+            :class="[
+              'relative cursor-default select-none py-2 pl-3 pr-9',
+              active ? 'bg-blue-600 text-white outline-none' : 'text-zinc-100',
+            ]"
+          >
+            <span>
+              <GameSearchResultWidget :game="result" :raw-icon="false" />
+            </span>
+
+            <span
+              v-if="selected"
+              :class="[
+                'absolute inset-y-0 right-0 flex items-center pr-4',
+                active ? 'text-white' : 'text-blue-600',
+              ]"
+            >
+              <CheckIcon class="size-5" aria-hidden="true" />
+            </span>
+          </li>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </div>
+  </Combobox>
+</template>
+
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+import { ChevronUpDownIcon } from "@heroicons/vue/24/outline";
+
+import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
+
+const props = defineProps<{
+  search: (query: string) => Promise<Array<GameMetadataSearchResult>>;
+}>();
+
+const currentResult = defineModel<GameMetadataSearchResult | undefined>();
+const gameSearchQuery = ref("");
+
+const resultsLoading = ref(false);
+const results = ref<Array<GameMetadataSearchResult>>();
+
+let timeout: NodeJS.Timeout | undefined = undefined;
+
+watch(gameSearchQuery, async (v) => {
+  if (v.length < 4) {
+    results.value = [];
+    resultsLoading.value = false;
+    return;
+  }
+
+  if (timeout) clearTimeout(timeout);
+  resultsLoading.value = true;
+  timeout = setTimeout(async () => {
+    results.value = await props.search(v);
+    resultsLoading.value = false;
+    timeout = undefined;
+  }, 600);
+});
+</script>

components/Selector/Language.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <SelectorLanguageListbox />
+    <NuxtLink
+      class="mt-1 transition text-blue-500 hover:text-blue-600 text-sm"
+      to="https://translate.droposs.org/engage/drop/"
+      target="_blank"
+    >
+      <i18n-t
+        keypath="helpUsTranslate"
+        tag="span"
+        scope="global"
+        class="inline-flex items-center gap-x-1 hover:underline"
+      >
+        <template #arrow>
+          <ArrowTopRightOnSquareIcon class="size-4" />
+        </template>
+      </i18n-t>
+    </NuxtLink>
+
+    <DevOnly>
+      <h1 class="mt-3 text-sm text-gray-500">{{ $t("welcome") }}</h1>
+    </DevOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+</script>

components/Selector/LanguageListbox.vue

@@ -0,0 +1,155 @@
+<template>
+  <Listbox v-model="wiredLocale" as="div">
+    <ListboxLabel
+      v-if="showText"
+      class="block text-sm/6 font-medium text-zinc-400"
+      >{{ $t("selectLanguage") }}</ListboxLabel
+    >
+    <div class="relative mt-2">
+      <ListboxButton
+        class="grid w-full cursor-default grid-cols-1 rounded-md bg-zinc-900 py-1.5 pr-2 pl-3 text-left text-zinc-300 outline-1 -outline-offset-1 outline-zinc-700 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+      >
+        <span class="col-start-1 row-start-1 flex items-center gap-3 pr-6">
+          <EmojiText
+            :emoji="localeToEmoji(wiredLocale)"
+            class="-mt-0.5 shrink-0 max-w-6"
+          />
+          <span class="block truncate">{{
+            currentLocaleInformation?.name ?? wiredLocale
+          }}</span>
+        </span>
+        <ChevronUpDownIcon
+          class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4"
+          aria-hidden="true"
+        />
+      </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-56 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+        >
+          <ListboxOption
+            v-for="listLocale in locales"
+            :key="listLocale.code"
+            v-slot="{ active, selected }"
+            as="template"
+            :value="listLocale.code"
+          >
+            <li
+              :class="[
+                active
+                  ? 'bg-blue-600 text-white outline-hidden'
+                  : 'text-zinc-300',
+                'relative cursor-default py-2 pr-9 pl-3 select-none',
+              ]"
+            >
+              <div class="flex items-center">
+                <EmojiText
+                  :emoji="localeToEmoji(listLocale.code)"
+                  class="-mt-0.5 shrink-0 max-w-6"
+                />
+                <span
+                  :class="[
+                    selected ? 'font-semibold' : 'font-normal',
+                    'ml-3 block truncate',
+                  ]"
+                  >{{ listLocale.name }}</span
+                >
+              </div>
+
+              <span
+                v-if="selected"
+                :class="[
+                  active ? 'text-white' : 'text-blue-600',
+                  'absolute inset-y-0 right-0 flex items-center pr-4',
+                ]"
+              >
+                <CheckIcon class="size-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>
+
+<script setup lang="ts">
+import {
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/vue";
+import { ChevronUpDownIcon } from "@heroicons/vue/16/solid";
+import { CheckIcon } from "@heroicons/vue/24/outline";
+import type { Locale } from "vue-i18n";
+
+const { showText = true } = defineProps<{ showText?: boolean }>();
+
+const { locales, locale: currLocale, setLocale } = useI18n();
+
+function changeLocale(locale: Locale) {
+  setLocale(locale);
+
+  // dynamically update the HTML attributes for language and direction
+  // this is necessary for proper rendering of the page in the new language
+  useHead({
+    htmlAttrs: {
+      lang: locale,
+      dir: locales.value.find((l) => l.code === locale)?.dir || "ltr",
+    },
+  });
+}
+
+function localeToEmoji(local: string): string {
+  switch (local) {
+    // Default locale
+    case "en":
+    case "en-us":
+      return "🇺🇸";
+
+    case "en-gb":
+      return "🇬🇧";
+    case "en-ca":
+      return "🇨🇦";
+    case "en-au":
+      return "🇦🇺";
+    case "en-pirate":
+      return "🏴‍☠️";
+    case "fr":
+      return "🇫🇷";
+    case "de":
+      return "🇩🇪";
+    case "es":
+      return "🇪🇸";
+    case "it":
+      return "🇮🇹";
+    case "zh":
+      return "🇨🇳";
+    case "zh-tw":
+      return "🇹🇼";
+
+    default: {
+      return "❓";
+    }
+  }
+}
+
+const wiredLocale = computed({
+  get() {
+    return currLocale.value;
+  },
+  set(v) {
+    changeLocale(v);
+  },
+});
+const currentLocaleInformation = computed(() =>
+  locales.value.find((e) => e.code == wiredLocale.value),
+);
+</script>

components/Selector/MultiItem.vue

@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <div class="inline-flex gap-1 items-center flex-wrap">
+      <span
+        v-for="item in enabledItems"
+        :key="item.param"
+        class="inline-flex items-center gap-x-0.5 rounded-md bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-500 ring-1 ring-blue-800 ring-inset"
+      >
+        {{ item.name }}
+        <button
+          type="button"
+          class="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-600/20"
+          @click="() => remove(item.param)"
+        >
+          <span class="sr-only">{{ $t("common.remove") }}</span>
+          <svg
+            viewBox="0 0 14 14"
+            class="size-3.5 stroke-blue-500 group-hover:stroke-blue-400"
+          >
+            <path d="M4 4l6 6m0-6l-6 6" />
+          </svg>
+          <span class="absolute -inset-1" />
+        </button>
+      </span>
+      <span
+        v-if="enabledItems.length == 0"
+        class="font-display uppercase text-xs font-bold text-zinc-700"
+      >
+        {{ $t("common.noSelected") }}
+      </span>
+    </div>
+    <Combobox as="div" @update:model-value="add">
+      <div class="relative mt-2">
+        <ComboboxInput
+          class="block w-full rounded-md bg-zinc-900 py-1.5 pr-12 pl-3 text-base text-zinc-100 outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+          :display-value="(item) => (item as StoreSortOption)?.name"
+          :placeholder="$t('common.components.multiitem.placeholder')"
+          @change="search = $event.target.value"
+          @blur="search = ''"
+        />
+        <ComboboxButton
+          class="absolute inset-0 flex items-center justify-end rounded-r-md px-2 focus:outline-hidden"
+        >
+          <ChevronDownIcon class="size-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+
+        <ComboboxOptions
+          v-if="filteredItems.length > 0 || search.length > 0"
+          class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-hidden sm:text-sm"
+        >
+          <ComboboxOption
+            v-for="item in filteredItems"
+            :key="item.param"
+            v-slot="{ active }"
+            :value="item.param"
+            as="template"
+          >
+            <li
+              :class="[
+                'relative cursor-default py-2 pr-9 pl-3 select-none',
+                active
+                  ? 'bg-blue-600 text-white outline-hidden'
+                  : 'text-zinc-100',
+              ]"
+            >
+              <span class="block truncate">
+                {{ item.name }}
+              </span>
+            </li>
+          </ComboboxOption>
+          <ComboboxOption
+            v-if="$props.create"
+            v-slot="{ active }"
+            :value="CREATE_PREFIX + search"
+            as="template"
+          >
+            <li
+              :class="[
+                'relative cursor-default py-2 pr-9 pl-3 select-none',
+                active
+                  ? 'bg-blue-600 text-white outline-hidden'
+                  : 'text-zinc-100',
+              ]"
+            >
+              <span class="block truncate">
+                {{ $t("common.components.multiitem.new", [search]) }}
+              </span>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+
+        <div
+          v-if="createLoading"
+          class="absolute inset-0 bg-zinc-950 flex items-center justify-center"
+        >
+          <div role="status">
+            <svg
+              aria-hidden="true"
+              class="size-8 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">{{ $t("common.srLoading") }}</span>
+          </div>
+        </div>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/20/solid";
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+const props = defineProps<{
+  items: Array<StoreSortOption>;
+  create?: (value: string) => Promise<string>;
+}>();
+
+const model = defineModel<{ [key: string]: boolean }>();
+
+const search = ref("");
+const filteredItems = computed(() =>
+  props.items.filter(
+    (item) =>
+      !model.value?.[item.param] &&
+      item.name.toLowerCase().includes(search.value.toLowerCase()),
+  ),
+);
+
+const enabledItems = computed(() =>
+  props.items.filter((e) => model.value?.[e.param]),
+);
+
+// I do not love how this works, but it's okay for now
+const CREATE_PREFIX = "CREATE";
+
+const createLoading = ref(false);
+function add(item: string) {
+  if (item.startsWith(CREATE_PREFIX)) {
+    if (!props.create) return;
+    const value = item.substring(CREATE_PREFIX.length);
+    createLoading.value = true;
+    props
+      .create(value)
+      .then(
+        (result) => {
+          add(result);
+        },
+        (err) => {
+          createModal(
+            ModalType.Notification,
+            {
+              title: "Failed to create value",
+              description: err,
+            },
+            (_, c) => c(),
+          );
+        },
+      )
+      .finally(() => {
+        createLoading.value = false;
+      });
+    return;
+  }
+  search.value = "";
+  model.value ??= {};
+  model.value[item] = true;
+}
+
+function remove(item: string) {
+  model.value ??= {};
+  model.value[item] = false;
+}
+</script>

components/Selector/Platform.vue

@@ -15,7 +15,7 @@
           />
           <span class="ml-3 block truncate">{{ model }}</span>
         </span>
-        <span v-else>Please select a platform...</span>
+        <span v-else>{{ $t("library.admin.import.selectPlatform") }}</span>
         <span
           class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2"
         >
@@ -32,7 +32,7 @@
           class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-zinc-950 ring-opacity-5 focus:outline-none sm:text-sm"
         >
           <ListboxOption
-            v-for="[name, value] in Object.entries(values)"
+            v-for="[name, value] in values"
             :key="value"
             v-slot="{ active, selected }"
             as="template"
@@ -82,10 +82,11 @@ import {
   ListboxOptions,
 } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { Platform } from "~/prisma/client/enums";
 
-const model = defineModel<PlatformClient | undefined>();
+const model = defineModel<Platform | undefined>();
 
-const typedModel = computed<PlatformClient | null>({
+const typedModel = computed<Platform | null>({
   get() {
     return model.value || null;
   },
@@ -95,5 +96,5 @@ const typedModel = computed<PlatformClient | null>({
   },
 });
 
-const values = Object.fromEntries(Object.entries(PlatformClient));
+const values = Object.entries(Platform);
 </script>

components/Setup/Account.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="p-2 lg:p-4">
+    <div class="px-4 py-2 max-w-xl">
+      <h1 class="font-semibold text-zinc-100 text-xl">
+        {{ $t("setup.auth.title") }}
+      </h1>
+      <p class="mt-2 text-sm text-zinc-400">
+        {{ $t("setup.auth.description") }}
+      </p>
+    </div>
+    <div class="grid lg:grid-cols-2 xl:grid-cols-3 h-fit p-4 gap-4">
+      <div class="p-4 border-1 border-zinc-800 rounded-xl">
+        <div>
+          <h1 class="text-zinc-100 font-semibold text-lg">
+            {{ $t("setup.auth.simple.title") }}
+          </h1>
+          <p class="text-sm text-zinc-400">
+            {{ $t("setup.auth.simple.description") }}
+          </p>
+          <NuxtLink
+            class="mt-4 rounded-md inline-flex items-center text-sm font-semibold text-blue-500 hover:text-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+            href="https://docs.droposs.org/docs/authentication/simple"
+            target="_blank"
+          >
+            <i18n-t
+              keypath="setup.auth.docs"
+              tag="span"
+              class="inline-flex items-center gap-x-1"
+              scope="global"
+            >
+              <template #arrow>
+                <ArrowTopRightOnSquareIcon class="size-4" />
+              </template>
+            </i18n-t>
+          </NuxtLink>
+        </div>
+        <div class="mt-4">
+          <div class="w-full flex justify-between items-center">
+            <span class="text-zinc-100 font-semibold text-sm">{{
+              $t("setup.auth.enabled")
+            }}</span>
+            <CheckIcon
+              v-if="enabledAuth.Simple"
+              class="size-5 text-green-600"
+            />
+            <XMarkIcon v-else class="size-5 text-red-600" />
+          </div>
+          <LoadingButton
+            class="mt-4"
+            :loading="invitationLoading"
+            :disabled="!enabledAuth.Simple"
+            @click="() => registerAsAdmin()"
+          >
+            <i18n-t
+              keypath="setup.auth.simple.register"
+              tag="span"
+              class="inline-flex items-center gap-x-1"
+              scope="global"
+            >
+              <template #arrow>
+                {{ $t("chars.arrow") }}
+              </template>
+            </i18n-t>
+          </LoadingButton>
+        </div>
+      </div>
+      <div class="p-4 border-1 border-zinc-800 rounded-xl">
+        <div>
+          <h1 class="text-zinc-100 font-semibold text-lg">
+            {{ $t("setup.auth.openid.title") }}
+          </h1>
+          <p class="text-sm text-zinc-400">
+            {{ $t("setup.auth.openid.description") }}
+          </p>
+          <NuxtLink
+            class="mt-4 rounded-md inline-flex items-center text-sm font-semibold text-blue-500 hover:text-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+            href="https://docs.droposs.org/docs/authentication/oidc"
+            target="_blank"
+          >
+            <i18n-t
+              keypath="setup.auth.docs"
+              tag="span"
+              class="inline-flex items-center gap-x-1"
+              scope="global"
+            >
+              <template #arrow>
+                <ArrowTopRightOnSquareIcon class="size-4" />
+              </template>
+            </i18n-t>
+          </NuxtLink>
+        </div>
+        <div class="mt-4">
+          <div class="w-full flex justify-between items-center">
+            <span class="text-zinc-100 font-semibold text-sm">{{
+              $t("setup.auth.enabled")
+            }}</span>
+            <CheckIcon
+              v-if="enabledAuth.OpenID"
+              class="size-5 text-green-600"
+            />
+            <XMarkIcon v-else class="size-5 text-red-600" />
+          </div>
+          <LoadingButton
+            class="mt-4"
+            :loading="false"
+            :disabled="!enabledAuth.OpenID"
+            @click="() => (complete = true)"
+          >
+            <i18n-t
+              keypath="setup.auth.openid.skip"
+              tag="span"
+              class="inline-flex items-center gap-x-1"
+              scope="global"
+            >
+              <template #arrow>
+                {{ $t("chars.arrow") }}
+              </template>
+            </i18n-t>
+          </LoadingButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ArrowTopRightOnSquareIcon,
+  CheckIcon,
+  XMarkIcon,
+} from "@heroicons/vue/24/outline";
+import { DateTime } from "luxon";
+
+const complete = defineModel<boolean>({ required: true });
+
+const { token } = defineProps<{ token: string }>();
+
+const invitationLoading = ref(false);
+
+const enabledAuth = await $dropFetch("/api/v1/admin/auth", {
+  headers: { Authorization: token },
+});
+
+async function registerAsAdmin() {
+  invitationLoading.value = true;
+  const expiryDate = DateTime.now().plus({ year: 5000 }).toJSON();
+
+  const invitation = await $dropFetch("/api/v1/admin/auth/invitation", {
+    method: "POST",
+    body: { isAdmin: true, expires: expiryDate },
+    headers: { Authorization: token },
+    failTitle: "Failed to create admin invitation",
+  });
+
+  window.open(`${invitation.inviteUrl}&after=close`, "_blank")?.focus();
+  invitationLoading.value = false;
+  complete.value = true;
+}
+</script>

components/Setup/Library.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="p-8">
+    <AdminSourcesPage :token="token" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AdminSourcesPage from "~/pages/admin/library/sources/index.vue";
+
+const complete = defineModel<boolean>({ required: true });
+// Only runs on component load, so it's fine
+complete.value = true;
+
+const { token } = defineProps<{ token: string }>();
+</script>

components/SourceOptions/Filesystem.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <label
+      for="path"
+      class="block text-sm font-medium leading-6 text-zinc-100"
+      >{{ $t("library.admin.sources.fsPath") }}</label
+    >
+    <p class="text-zinc-400 block text-xs font-medium leading-6">
+      {{ $t("library.admin.sources.fsPathDesc") }}
+    </p>
+    <div class="mt-2">
+      <input
+        id="path"
+        v-model="model!.baseDir"
+        name="path"
+        type="text"
+        autocomplete="path"
+        :placeholder="$t('library.admin.sources.fsPathPlaceholder')"
+        class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<{ baseDir: string }>();
+</script>

components/SourceOptions/FlatFilesystem.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <label
+      for="path"
+      class="block text-sm font-medium leading-6 text-zinc-100"
+      >{{ $t("library.admin.sources.fsPath") }}</label
+    >
+    <p class="text-zinc-400 block text-xs font-medium leading-6">
+      {{ $t("library.admin.sources.fsPathDesc") }}
+    </p>
+    <div class="mt-2">
+      <input
+        id="path"
+        v-model="model!.baseDir"
+        name="path"
+        type="text"
+        autocomplete="path"
+        :placeholder="$t('library.admin.sources.fsPathPlaceholder')"
+        class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<{ baseDir: string }>();
+</script>

components/SourceTable.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+      <table class="min-w-full divide-y divide-zinc-700">
+        <thead>
+          <tr>
+            <th
+              scope="col"
+              class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
+            >
+              {{ $t("common.name") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("type") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.working") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("options") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.totalSpace") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.freeSpace") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.utilizationPercentage") }}
+            </th>
+            <th
+              v-if="editSource || deleteSource"
+              scope="col"
+              class="relative py-3.5 pl-3 pr-4 sm:pr-3"
+            >
+              <span class="sr-only">{{ $t("actions") }}</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(source, sourceIdx) in sources" :key="source.id">
+            <td
+              class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+            >
+              {{ source.name }}
+            </td>
+            <td
+              class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400 flex gap-x-1 items-center"
+            >
+              <component
+                :is="optionsMetadata[source.backend].icon"
+                class="size-5 text-zinc-400"
+              />
+              {{ optionsMetadata[source.backend].title }}
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              <CheckIcon v-if="source.working" class="size-5 text-green-500" />
+              <XMarkIcon v-else class="size-5 text-red-500" />
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              {{ source.options }}
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              {{ source.fsStats && formatBytes(source.fsStats.totalSpace) }}
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              {{ source.fsStats && formatBytes(source.fsStats.freeSpace) }}
+            </td>
+            <td
+              class="align-middle flex flex-cols-5 whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
+            >
+              <div class="flex-auto content-right">
+                <ProgressBar
+                  v-if="source.fsStats"
+                  :percentage="
+                    getPercentage(
+                      source.fsStats.totalSpace - source.fsStats.freeSpace,
+                      source.fsStats.totalSpace,
+                    )
+                  "
+                  :color="
+                    getBarColor(
+                      getPercentage(
+                        source.fsStats.totalSpace - source.fsStats.freeSpace,
+                        source.fsStats.totalSpace,
+                      ),
+                    )
+                  "
+                  background-color="slate"
+                />
+              </div>
+            </td>
+            <td
+              v-if="editSource || deleteSource"
+              class="relative whitespace-nowrap py-4 pl-3 pr-3 text-right text-sm font-medium space-x-2"
+            >
+              <button
+                v-if="editSource"
+                class="text-blue-500 hover:text-blue-400"
+                @click="() => editSource(sourceIdx)"
+              >
+                {{ $t("common.edit") }}
+                <span class="sr-only">
+                  {{ $t("chars.srComma", [source.name]) }}
+                </span>
+              </button>
+
+              <button
+                v-if="deleteSource"
+                class="text-red-500 hover:text-red-400"
+                @click="() => deleteSource(sourceIdx)"
+              >
+                {{ $t("common.delete") }}
+                <span class="sr-only">
+                  {{ $t("chars.srComma", [source.name]) }}
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WorkingLibrarySource } from "~/server/api/v1/admin/library/sources/index.get";
+import type { LibraryBackend } from "~/prisma/client/enums";
+import { BackwardIcon, CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { DropLogo } from "#components";
+import { formatBytes } from "~/server/internal/utils/files";
+import { getBarColor } from "~/utils/colors";
+import { getPercentage } from "~/utils/utils";
+
+const {
+  sources,
+  deleteSource = undefined,
+  editSource = undefined,
+} = defineProps<{
+  sources: WorkingLibrarySource[];
+  summaryMode?: boolean;
+  deleteSource?: (id: number) => void;
+  editSource?: (id: number) => void;
+}>();
+
+const { t } = useI18n();
+
+const optionsMetadata: {
+  [key in LibraryBackend]: {
+    title: string;
+    description: string;
+    docsLink: string;
+    icon: Component;
+  };
+} = {
+  Filesystem: {
+    title: t("library.admin.sources.fsTitle"),
+    description: t("library.admin.sources.fsDesc"),
+    docsLink: "https://docs.droposs.org/docs/library#drop-style",
+    icon: DropLogo,
+  },
+  FlatFilesystem: {
+    title: t("library.admin.sources.fsFlatTitle"),
+    description: t("library.admin.sources.fsFlatDesc"),
+    docsLink: "https://docs.droposs.org/docs/library#flat-style-or-compat",
+    icon: BackwardIcon,
+  },
+};
+</script>

components/StoreView.vue

@@ -0,0 +1,524 @@
+<i18n>
+{
+  "en": {
+    "↓": "↓",
+    "↑": "↑"
+  }
+}
+</i18n>
+
+<template>
+  <div>
+    <div>
+      <!-- Mobile filter dialog -->
+      <TransitionRoot as="template" :show="mobileFiltersOpen">
+        <Dialog
+          class="relative z-100 lg:hidden"
+          @close="mobileFiltersOpen = false"
+        >
+          <TransitionChild
+            as="template"
+            enter="transition-opacity ease-linear duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <div class="fixed inset-0 bg-black/25" />
+          </TransitionChild>
+
+          <div class="fixed inset-0 z-40 flex">
+            <TransitionChild
+              as="template"
+              enter="transition ease-in-out duration-300 transform"
+              enter-from="translate-x-full"
+              enter-to="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leave-from="translate-x-0"
+              leave-to="translate-x-full"
+            >
+              <DialogPanel
+                class="relative ml-auto flex size-full max-w-sm flex-col overflow-y-auto bg-zinc-900 pt-4 pb-6 shadow-xl"
+              >
+                <div class="flex items-center justify-between px-4">
+                  <h2 class="text-lg font-medium text-zinc-100">
+                    {{ $t("store.view.srFilters") }}
+                  </h2>
+                  <button
+                    type="button"
+                    class="relative -mr-2 flex size-10 items-center justify-center rounded-md bg-zinc-900 p-2 text-zinc-500 hover:bg-zinc-800 focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
+                    @click="mobileFiltersOpen = false"
+                  >
+                    <span class="absolute -inset-0.5" />
+                    <span class="sr-only">{{ $t("common.close") }}</span>
+                    <XMarkIcon class="size-6" aria-hidden="true" />
+                  </button>
+                </div>
+
+                <!-- Filters -->
+                <form class="mt-4 border-t border-zinc-700">
+                  <Disclosure
+                    v-for="section in options"
+                    v-slot="{ open }"
+                    :key="section.param"
+                    as="div"
+                    class="border-t border-zinc-700 px-4 py-6"
+                  >
+                    <h3 class="-mx-2 -my-3 flow-root">
+                      <DisclosureButton
+                        class="flex w-full items-center justify-between bg-zinc-900 px-2 py-3 text-zinc-500 hover:text-zinc-400"
+                      >
+                        <span class="font-medium text-zinc-100">{{
+                          section.name
+                        }}</span>
+                        <span class="ml-6 flex items-center">
+                          <PlusIcon
+                            v-if="!open"
+                            class="size-5"
+                            aria-hidden="true"
+                          />
+                          <MinusIcon v-else class="size-5" aria-hidden="true" />
+                        </span>
+                      </DisclosureButton>
+                    </h3>
+                    <DisclosurePanel class="pt-6">
+                      <div
+                        v-if="section.options.length <= 10"
+                        class="gap-3 grid grid-cols-2"
+                      >
+                        <div
+                          v-for="(option, optionIdx) in section.options"
+                          :key="option.param"
+                          class="flex gap-3"
+                        >
+                          <div class="flex h-5 shrink-0 items-center">
+                            <div class="group grid size-4 grid-cols-1">
+                              <input
+                                v-if="section.multiple"
+                                :id="`filter-${section.param}-${option}`"
+                                v-model="
+                                  (optionValues[section.param] as any)[
+                                    option.param
+                                  ]
+                                "
+                                :name="`${section.param}[]`"
+                                type="checkbox"
+                                class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-900 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                              />
+                              <input
+                                v-else
+                                :id="`filter-${section.param}`"
+                                :value="optionValues[section.param]"
+                                :name="`${section.param}[]`"
+                                type="checkbox"
+                                class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                                @update:value="
+                                  () =>
+                                    (optionValues[section.param] = option.param)
+                                "
+                              />
+                            </div>
+                          </div>
+                          <label
+                            :for="`filter-mobile-${section.param}-${optionIdx}`"
+                            class="min-w-0 flex-1 text-zinc-400"
+                            >{{ option.name }}</label
+                          >
+                        </div>
+                      </div>
+                      <SelectorMultiItem
+                        v-else
+                        v-model="[optionValues[section.param] as any][0]"
+                        :items="section.options"
+                      />
+                    </DisclosurePanel>
+                  </Disclosure>
+                </form>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </Dialog>
+      </TransitionRoot>
+
+      <main class="mx-auto px-4 sm:px-6 lg:px-8">
+        <div
+          class="flex items-baseline justify-between border-b border-zinc-700 py-6"
+        >
+          <div />
+          <div class="flex items-center">
+            <Menu as="div" class="relative inline-block text-left">
+              <div>
+                <MenuButton
+                  class="group inline-flex justify-center text-sm font-medium text-zinc-400 hover:text-zinc-100"
+                >
+                  {{ $t("store.view.sort") }}
+                  <ChevronDownIcon
+                    class="-mr-1 ml-1 size-5 shrink-0 text-gray-400 group-hover:text-zinc-100"
+                    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-10 mt-2 w-40 origin-top-right rounded-md bg-zinc-950 shadow-2xl ring-1 ring-white/5 focus:outline-hidden"
+                >
+                  <div class="py-1">
+                    <MenuItem
+                      v-for="option in sorts"
+                      :key="option.param"
+                      v-slot="{ active }"
+                    >
+                      <button
+                        :class="[
+                          currentSort == option.param
+                            ? 'font-medium text-zinc-100'
+                            : 'text-zinc-400',
+                          active ? 'bg-zinc-900 outline-hidden' : '',
+                          'w-full text-left block px-4 py-2 text-sm',
+                        ]"
+                        @click.prevent="handleSortClick(option, $event)"
+                      >
+                        {{ option.name }}
+                        <span v-if="currentSort === option.param">
+                          {{
+                            sortOrder === "asc"
+                              ? $t("chars.arrowUp")
+                              : $t("chars.arrowDown")
+                          }}
+                        </span>
+                      </button>
+                    </MenuItem>
+                  </div>
+                </MenuItems>
+              </transition>
+            </Menu>
+
+            <button
+              v-if="false"
+              type="button"
+              class="-m-2 ml-5 p-2 text-zinc-500 hover:text-zinc-400 sm:ml-7"
+            >
+              <span class="sr-only">{{ $t("store.view.srViewGrid") }}</span>
+              <Squares2X2Icon class="size-5" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              :class="[
+                '-m-2 ml-4 p-2 sm:ml-6 lg:hidden',
+                filterQuery
+                  ? 'text-zinc-100 hover:text-zinc-200'
+                  : 'text-zinc-500 hover:text-zinc-400',
+              ]"
+              @click="mobileFiltersOpen = true"
+            >
+              <span class="sr-only"> {{ $t("store.view.srFilters") }} </span>
+              <FunnelIcon class="size-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+
+        <section aria-labelledby="games-heading" class="pt-6 pb-24">
+          <h2 id="games-heading" class="sr-only">
+            {{ $t("store.view.srGames") }}
+          </h2>
+
+          <div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-5">
+            <!-- Filters -->
+            <form class="hidden lg:block">
+              <Disclosure
+                v-for="section in options"
+                :key="section.param"
+                v-slot="{ open }"
+                as="div"
+                class="border-b border-zinc-700 py-6"
+              >
+                <h3 class="-my-3 flow-root">
+                  <DisclosureButton
+                    class="flex w-full items-center justify-between bg-zinc-900 py-3 text-sm text-zinc-500 hover:text-zinc-400"
+                  >
+                    <span class="font-medium text-zinc-100">{{
+                      section.name
+                    }}</span>
+                    <span class="ml-6 flex items-center">
+                      <PlusIcon
+                        v-if="!open"
+                        class="size-5"
+                        aria-hidden="true"
+                      />
+                      <MinusIcon v-else class="size-5" aria-hidden="true" />
+                    </span>
+                  </DisclosureButton>
+                </h3>
+                <DisclosurePanel class="pt-6">
+                  <div v-if="section.options.length <= 10" class="space-y-4">
+                    <div
+                      v-for="(option, optionIdx) in section.options"
+                      :key="option.param"
+                      class="flex gap-3"
+                    >
+                      <div class="flex h-5 shrink-0 items-center">
+                        <div class="group grid size-4 grid-cols-1">
+                          <input
+                            v-if="section.multiple"
+                            :id="`filter-${section.param}-${optionIdx}`"
+                            v-model="
+                              (optionValues[section.param] as any)[option.param]
+                            "
+                            :name="`${section.param}[]`"
+                            type="checkbox"
+                            class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-800 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                          />
+                          <input
+                            v-else
+                            :id="`filter-${section.param}-${optionIdx}`"
+                            :value="optionValues[section.param]"
+                            :name="`${section.param}[]`"
+                            type="radio"
+                            class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-800 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                            @input="optionValues[section.param] = option.param"
+                          />
+                        </div>
+                      </div>
+                      <label
+                        :for="`filter-${section.param}-${optionIdx}`"
+                        class="text-sm text-zinc-400"
+                        >{{ option.name }}</label
+                      >
+                    </div>
+                  </div>
+                  <SelectorMultiItem
+                    v-else
+                    v-model="[optionValues[section.param] as any][0]"
+                    :items="section.options"
+                  />
+                </DisclosurePanel>
+              </Disclosure>
+            </form>
+
+            <!-- Product grid -->
+            <div
+              v-if="games?.length ?? 0 > 0"
+              ref="product-grid"
+              class="col-span-4 grid gap-5 grid-cols-[repeat(auto-fill,minmax(150px,auto))]"
+            >
+              <!-- Your content -->
+              <GamePanel
+                v-for="game in games"
+                :key="game.id"
+                :game="game"
+                :href="`/store/${game.id}`"
+                :show-title-description="showGamePanelTextDecoration"
+              />
+              <div
+                v-if="loading"
+                class="absolute inset-0 bg-zinc-900/40 flex items-center justify-center"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="w-8 h-8 text-transparent animate-spin fill-blue-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>
+              </div>
+            </div>
+            <div v-else class="flex lg:col-span-4 items-start justify-center">
+              <span class="uppercase text-zinc-700 font-display font-bold">{{
+                $t("common.noResults")
+              }}</span>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import {
+  ChevronDownIcon,
+  FunnelIcon,
+  MinusIcon,
+  PlusIcon,
+  Squares2X2Icon,
+} from "@heroicons/vue/20/solid";
+import type { SerializeObject } from "nitropack";
+import type { GameModel, GameTagModel } from "~/prisma/client/models";
+import { Platform } from "~/prisma/client/enums";
+const {
+  store: { showGamePanelTextDecoration },
+} = await $dropFetch(`/api/v1/settings`);
+
+const mobileFiltersOpen = ref(false);
+
+const props = defineProps<{
+  params?: { [key: string]: string };
+  extraOptions?: Array<StoreFilterOption>;
+  prefilled?: {
+    [key: string]: { [key: string]: string | { [key: string]: boolean } };
+  };
+}>();
+
+const tags =
+  await $dropFetch<Array<SerializeObject<GameTagModel>>>("/api/v1/store/tags");
+
+const sorts: Array<StoreSortOption> = [
+  {
+    name: "Default",
+    param: "default",
+  },
+  {
+    name: "Newest",
+    param: "newest",
+  },
+  {
+    name: "Recently Added",
+    param: "recent",
+  },
+  {
+    name: "Name",
+    param: "name",
+  },
+];
+const currentSort = ref(sorts[0].param);
+const sortOrder = ref<"asc" | "desc">("desc");
+
+const options: Array<StoreFilterOption> = [
+  ...(tags.length > 0
+    ? [
+        {
+          name: "Tags",
+          param: "tags",
+          multiple: true,
+          options: tags.map((e) => ({ name: e.name, param: e.id })),
+        },
+      ]
+    : []),
+  {
+    name: "Platform",
+    param: "platform",
+    multiple: true,
+    options: Object.values(Platform).map((e) => ({ name: e, param: e })),
+  },
+  ...(props.extraOptions ?? []),
+];
+const optionValues = ref<{
+  [key: string]: string | undefined | { [key: string]: boolean | undefined };
+}>(
+  Object.fromEntries(
+    options.map((v) => [v.param, v.multiple ? {} : undefined]),
+  ),
+);
+Object.assign(optionValues.value, props.prefilled);
+
+const filterQuery = computed(() => {
+  const query = Object.entries(optionValues.value)
+    .filter(
+      ([_, v]) =>
+        v &&
+        (typeof v !== "object" || Object.values(v).filter((e) => e).length > 0),
+    )
+    .map(([n, v]) => {
+      if (typeof v === "string") return [`${n}=${v}`];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const enabledOptions = Object.entries(v as any).filter(([_, e]) => e);
+      return `${n}=${enabledOptions.map(([k, _]) => k).join(",")}`;
+    })
+    .join("&");
+  const extraFilters = props.params
+    ? Object.entries(props.params)
+        .map(([k, v]) => `${k}=${v}`)
+        .join("&")
+    : props.params;
+  return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}`;
+});
+
+const games = ref<Array<SerializeObject<GameModel>>>();
+const loading = ref(false);
+
+const productGrid = useTemplateRef<HTMLElement>("product-grid");
+
+const { reset } = useInfiniteScroll(
+  productGrid,
+  async () => await updateGames(filterQuery.value, false),
+  {
+    distance: 10,
+    canLoadMore: () => {
+      return canLoadMore.value;
+    },
+  },
+);
+
+const canLoadMore = ref(true);
+async function updateGames(query: string, resetGames: boolean) {
+  loading.value = true;
+  games.value ??= [];
+  const newValues = await $dropFetch<{
+    results: Array<SerializeObject<GameModel>>;
+    count: number;
+  }>(
+    `/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}&order=${sortOrder.value}${query ? "&" + query : ""}`,
+  );
+  if (resetGames) {
+    games.value = newValues.results;
+    if (import.meta.client) await reset();
+  } else {
+    games.value.push(...newValues.results);
+  }
+  canLoadMore.value = games.value.length < newValues.count;
+  loading.value = false;
+}
+watch(filterQuery, (newUrl) => {
+  updateGames(newUrl, true);
+});
+watch(currentSort, (_) => {
+  updateGames(filterQuery.value, true);
+});
+watch(sortOrder, (_) => {
+  updateGames(filterQuery.value, true);
+});
+
+await updateGames(filterQuery.value, true);
+
+function handleSortClick(option: StoreSortOption, event: MouseEvent) {
+  event.stopPropagation();
+  if (currentSort.value === option.param) {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+  } else {
+    currentSort.value = option.param;
+    sortOrder.value = option.param === "name" ? "asc" : "desc";
+  }
+}
+</script>

components/TaskWidget.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    v-if="task"
+    class="flex w-full items-center justify-between space-x-6 p-6"
+  >
+    <div class="flex-1 truncate">
+      <div class="flex items-center space-x-1">
+        <div>
+          <CheckCircleIcon v-if="task.success" class="size-5 text-green-600" />
+          <XMarkIcon v-else-if="task.error" class="size-5 text-red-600" />
+          <div
+            v-else
+            class="size-2 bg-blue-600 rounded-full animate-pulse m-1"
+          />
+        </div>
+        <h3 class="truncate text-sm font-medium text-zinc-100">
+          {{ task.name }}
+        </h3>
+      </div>
+      <div
+        v-if="active"
+        class="mt-2 w-full rounded-full overflow-hidden bg-zinc-900"
+      >
+        <div
+          :style="{ width: `${task.progress}%` }"
+          class="bg-blue-600 h-[3px] transition-all"
+        />
+      </div>
+      <div class="mt-2 bg-zinc-950 px-2 pb-1 rounded-sm">
+        <LogLine :short="true" :log="parseTaskLog(task.log.at(-1))" />
+      </div>
+      <ul v-if="task.actions" class="mt-1 flex flex-row gap-x-2">
+        <NuxtLink
+          v-for="[name, link] in task.actions.map((v) => v.split(':'))"
+          :key="link"
+          :href="link"
+          class="text-xs text-zinc-100 bg-blue-900 p-1 rounded"
+          >{{ name }}</NuxtLink
+        >
+      </ul>
+      <NuxtLink
+        type="button"
+        :href="`/admin/task/${task.id}`"
+        class="mt-3 ml-1 rounded-md text-xs font-medium text-zinc-100 hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-100 focus:ring-offset-2"
+      >
+        <i18n-t keypath="tasks.admin.viewTask" tag="span" scope="global">
+          <template #arrow>
+            <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+          </template>
+        </i18n-t>
+      </NuxtLink>
+    </div>
+  </div>
+  <div v-else>
+    <!-- renders server side when we don't want to access the current tasks -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/24/solid";
+import type { TaskMessage } from "~/server/internal/tasks";
+
+defineProps<{ task: TaskMessage | undefined; active?: boolean }>();
+</script>

components/TileWithLink.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    :class="[
+      'border border-zinc-800 rounded-xl h-full px-6 py-4 relative bg-zinc-950/30',
+      { 'min-h-50 pb-15': link, 'lg:pb-4': !link },
+    ]"
+  >
+    <h1
+      v-if="props.title"
+      :class="[
+        'font-semibold text-lg w-full',
+        { 'mb-3': !props.subtitle && link },
+      ]"
+    >
+      {{ props.title }}
+      <div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
+    </h1>
+    <h2
+      v-if="props.subtitle"
+      :class="['text-zinc-400 text-sm w-full', { 'mb-3': link }]"
+    >
+      {{ props.subtitle }}
+      <div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
+    </h2>
+
+    <slot />
+
+    <div v-if="props.link" class="absolute bottom-5 right-5">
+      <NuxtLink
+        :to="props.link.url"
+        class="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"
+      >
+        {{ props.link.label }}
+        <ArrowRightIcon class="h-4 w-4" aria-hidden="true" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRightIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps<{
+  title?: string;
+  subtitle?: string;
+  rightTitle?: string;
+  link?: {
+    url: string;
+    label: string;
+  };
+}>();
+</script>

components/UserFooter.vue

@@ -1,14 +1,17 @@
 <template>
   <footer class="bg-zinc-950" aria-labelledby="footer-heading">
-    <h2 id="footer-heading" class="sr-only">Footer</h2>
+    <h2 id="footer-heading" class="sr-only">{{ $t("footer.footer") }}</h2>
     <div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
+      <!-- Drop Info -->
       <div class="xl:grid xl:grid-cols-3 xl:gap-8">
         <div class="space-y-8">
           <DropWordmark class="h-10" />
           <p class="text-sm leading-6 text-zinc-300">
-            An open-source game distribution platform built for speed,
-            flexibility and beauty.
+            {{ $t("drop.desc") }}
           </p>
+
+          <SelectorLanguage />
+
           <div class="flex space-x-6">
             <NuxtLink
               v-for="item in navigation.social"
@@ -22,10 +25,14 @@
             </NuxtLink>
           </div>
         </div>
+
+        <!-- Foot links -->
         <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
           <div class="md:grid md:grid-cols-2 md:gap-8">
             <div>
-              <h3 class="text-sm font-semibold leading-6 text-white">Games</h3>
+              <h3 class="text-sm font-semibold leading-6 text-white">
+                {{ $t("footer.games") }}
+              </h3>
               <ul role="list" class="mt-6 space-y-4">
                 <li v-for="item in navigation.games" :key="item.name">
                   <NuxtLink
@@ -38,7 +45,7 @@
             </div>
             <div class="mt-10 md:mt-0">
               <h3 class="text-sm font-semibold leading-6 text-white">
-                Community
+                {{ $t("userHeader.links.community") }}
               </h3>
               <ul role="list" class="mt-6 space-y-4">
                 <li v-for="item in navigation.community" :key="item.name">
@@ -54,7 +61,7 @@
           <div class="md:grid md:grid-cols-2 md:gap-8">
             <div>
               <h3 class="text-sm font-semibold leading-6 text-white">
-                Documentation
+                {{ $t("footer.documentation") }}
               </h3>
               <ul role="list" class="mt-6 space-y-4">
                 <li v-for="item in navigation.documentation" :key="item.name">
@@ -67,7 +74,9 @@
               </ul>
             </div>
             <div class="mt-10 md:mt-0">
-              <h3 class="text-sm font-semibold leading-6 text-white">About</h3>
+              <h3 class="text-sm font-semibold leading-6 text-white">
+                {{ $t("footer.about") }}
+              </h3>
               <ul role="list" class="mt-6 space-y-4">
                 <li v-for="item in navigation.about" :key="item.name">
                   <NuxtLink
@@ -80,6 +89,22 @@
             </div>
           </div>
         </div>
+
+        <div class="flex items-center justify-center xl:col-span-3 mt-8">
+          <NuxtLink
+            :to="`https://github.com/Drop-OSS/drop/releases/tag/${versionInfo.version}`"
+            class="text-xs text-zinc-700 hover:text-zinc-400 transition-colors duration-200 cursor-default select-none"
+          >
+            <i18n-t keypath="footer.version" tag="span" scope="global">
+              <template #version>
+                <span>{{ versionInfo.version }}</span>
+              </template>
+              <template #gitRef>
+                <span>{{ versionInfo.gitRef }}</span>
+              </template>
+            </i18n-t>
+          </NuxtLink>
+        </div>
       </div>
     </div>
   </footer>
@@ -88,45 +113,49 @@
 <script setup lang="ts">
 import { IconsDiscordLogo, IconsGithubLogo } from "#components";
 
-const navigation = {
+const { t } = useI18n();
+
+const versionInfo = await $dropFetch("/api/v1");
+
+const navigation = computed(() => ({
   games: [
-    { name: "Newly Added", href: "#" },
-    { name: "New Releases", href: "#" },
-    { name: "Top Sellers", href: "#" },
-    { name: "Find a Game", href: "#" },
+    { name: t("store.recentlyAdded"), href: "#" },
+    { name: t("store.recentlyReleased"), href: "#" },
+    { name: t("footer.topSellers"), href: "#" },
+    { name: t("footer.findGame"), href: "#" },
   ],
   community: [
-    { name: "Friends", href: "#" },
-    { name: "Groups", href: "#" },
-    { name: "Servers", href: "#" },
+    { name: t("common.friends"), href: "#" },
+    { name: t("common.groups"), href: "#" },
+    { name: t("common.servers"), href: "#" },
   ],
   documentation: [
-    { name: "API", href: "https://api.droposs.org/" },
+    // TODO: public API docs
+    // { name: t("footer.api"), href: "https://api.droposs.org/" },
     {
-      name: "Server Docs",
-      href: "https://wiki.droposs.org/guides/quickstart.html",
+      name: t("footer.docs.server"),
+      href: "https://docs.droposs.org/docs/guides/quickstart",
     },
     {
-      name: "Client Docs",
-      href: "https://wiki.droposs.org/guides/client.html",
+      name: t("footer.docs.client"),
+      href: "https://docs.droposs.org/docs/guides/client",
     },
   ],
   about: [
-    { name: "About Drop", href: "https://droposs.org/" },
-    { name: "Features", href: "https://droposs.org/features" },
-    { name: "FAQ", href: "https://droposs.org/faq" },
+    { name: t("footer.aboutDrop"), href: "https://droposs.org/" },
+    { name: t("footer.comparison"), href: "https://droposs.org/comparison" },
   ],
   social: [
     {
-      name: "GitHub",
+      name: t("footer.social.github"),
       href: "https://github.com/Drop-OSS",
       icon: IconsGithubLogo,
     },
     {
-      name: "Discord",
+      name: t("footer.social.discord"),
       href: "https://discord.gg/NHx46XKJWA",
       icon: IconsDiscordLogo,
     },
   ],
-};
+}));
 </script>

components/UserHeader.vue

@@ -76,7 +76,7 @@
           class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
           @click="sidebarOpen = true"
         >
-          <span class="sr-only">Open sidebar</span>
+          <span class="sr-only">{{ $t("header.openSidebar") }}</span>
           <Bars3Icon class="h-6 w-6" aria-hidden="true" />
         </button>
       </div>
@@ -125,7 +125,9 @@
                   class="-m-2.5 p-2.5"
                   @click="sidebarOpen = false"
                 >
-                  <span class="sr-only">Close sidebar</span>
+                  <span class="sr-only">{{
+                    $t("userHeader.closeSidebar")
+                  }}</span>
                   <XMarkIcon class="h-6 w-6 text-zinc-400" aria-hidden="true" />
                 </button>
               </div>
@@ -136,7 +138,7 @@
             >
               <div class="flex shrink-0 h-16 items-center justify-between">
                 <NuxtLink :to="homepageURL">
-                  <DropLogo class="h-8 w-auto" />
+                  <ApplicationLogo class="h-8 w-auto" />
                 </NuxtLink>
 
                 <UserHeaderUserWidget />
@@ -172,6 +174,9 @@
                       <BellIcon class="h-5" />
                     </UserHeaderWidget>
                   </li>
+                  <li class="w-full">
+                    <UserHeaderWidget class="w-full" />
+                  </li>
                 </div>
               </nav>
             </div>
@@ -198,32 +203,33 @@ import { Bars3Icon } from "@heroicons/vue/24/outline";
 import { XMarkIcon } from "@heroicons/vue/24/solid";
 
 const router = useRouter();
+const { t } = useI18n();
 
 const homepageURL = "/store";
-const navigation: Array<NavigationItem> = [
+const navigation: Ref<Array<NavigationItem>> = computed(() => [
   {
     prefix: "/store",
     route: "/store",
-    label: "Store",
+    label: t("store.title"),
   },
   {
     prefix: "/library",
     route: "/library",
-    label: "Library",
+    label: t("userHeader.links.library"),
   },
   {
     prefix: "/community",
     route: "/community",
-    label: "Community",
+    label: t("userHeader.links.community"),
   },
   {
     prefix: "/news",
     route: "/news",
-    label: "News",
+    label: t("userHeader.links.news"),
   },
-];
+]);
 
-const currentPageIndex = useCurrentNavigationIndex(navigation);
+const currentPageIndex = useCurrentNavigationIndex(navigation.value);
 
 const notifications = useNotifications();
 const unreadNotifications = computed(() =>

components/UserHeader/NotificationWidgetPanel.vue

@@ -6,7 +6,7 @@
       >
         <div class="ml-4 mt-2">
           <h3 class="text-base font-semibold text-zinc-100 text-sm">
-            Unread notifications
+            {{ $t("account.notifications.unread") }}
           </h3>
         </div>
         <div class="ml-4 mt-2 shrink-0">
@@ -15,7 +15,15 @@
             type="button"
             class="text-sm text-zinc-400"
           >
-            View all &rarr;
+            <i18n-t
+              keypath="account.notifications.all"
+              tag="span"
+              scope="global"
+            >
+              <template #arrow>
+                <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+              </template>
+            </i18n-t>
           </NuxtLink>
         </div>
       </div>
@@ -32,13 +40,16 @@
       v-if="props.notifications.length == 0"
       class="text-sm text-zinc-400 p-3 text-center w-full"
     >
-      No notifications
+      {{ $t("account.notifications.none") }}
     </div>
   </PanelWidget>
 </template>
 
 <script setup lang="ts">
-import type { Notification } from "~/prisma/client";
+import type { SerializeObject } from "nitropack";
+import type { NotificationModel } from "~/prisma/client/models";
 
-const props = defineProps<{ notifications: Array<Notification> }>();
+const props = defineProps<{
+  notifications: Array<SerializeObject<NotificationModel>>;
+}>();
 </script>

components/UserHeader/StoreNav.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="w-full bg-zinc-950 p-1 inline-flex items-center gap-x-2 fixed inset-x-0 top-0 z-100"
+  >
+    <button
+      class="p-1 text-zinc-300 hover:text-zinc-100 hover:bg-zinc-900 transition-all rounded"
+      @click="() => router.back()"
+    >
+      <ChevronLeftIcon class="size-4" />
+    </button>
+    <button
+      class="p-1 text-zinc-300 hover:text-zinc-100 hover:bg-zinc-900 transition-all rounded"
+      @click="() => router.forward()"
+    >
+      <ChevronRightIcon class="size-4" />
+    </button>
+    <span class="text-zinc-400 text-sm">
+      {{ title }}
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
+
+const router = useRouter();
+const title = ref("Loading...");
+
+onMounted(() => {
+  title.value = document.title;
+});
+
+router.afterEach(() => {
+  title.value = "Loading...";
+  // TODO: more robust after-render "detection"
+  setTimeout(() => {
+    title.value = document.title;
+  }, 500);
+});
+</script>

components/UserHeader/UserWidget.vue

@@ -46,29 +46,30 @@
               hydrate-on-visible
               as="div"
             >
-              <!-- TODO: think this would work better as a NuxtLink instead of a button -->
-              <button
-                :href="nav.route"
+              <NuxtLink
+                :to="nav.route"
                 :class="[
                   active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
                   'w-full text-left transition block px-4 py-2 text-sm',
                 ]"
-                @click="() => navigateTo(nav.route, close)"
+                @click="close"
               >
                 {{ nav.label }}
-              </button>
+              </NuxtLink>
             </MenuItem>
-            <MenuItem v-slot="{ active }" hydrate-on-visible as="div">
-              <!-- TODO: think this would work better as a NuxtLink instead of a button -->
-              <a
+            <MenuItem v-slot="{ active, close }" hydrate-on-visible as="div">
+              <NuxtLink
+                to="/auth/signout"
                 :class="[
                   active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
                   'w-full text-left transition block px-4 py-2 text-sm',
                 ]"
-                href="/auth/signout"
+                :data-comment="'external=true is required because we implemented the signout as a route on the server for performance'"
+                :external="true"
+                @click="close"
               >
-                Signout
-              </a>
+                {{ $t("auth.signout") }}
+              </NuxtLink>
             </MenuItem>
           </div>
         </PanelWidget>
@@ -85,18 +86,25 @@ import type { NavigationItem } from "~/composables/types";
 
 const user = useUser();
 
-const navigation: NavigationItem[] = [
-  user.value?.admin
-    ? {
-        label: "Admin Dashboard",
-        route: "/admin",
-        prefix: "",
-      }
-    : undefined,
-  {
-    label: "Account settings",
-    route: "/account",
-    prefix: "",
-  },
-].filter((e) => e !== undefined);
+const navigation = computed<NavigationItem[]>(() =>
+  [
+    user.value?.admin
+      ? {
+          label: $t("userHeader.profile.admin"),
+          route: "/admin",
+          prefix: "",
+        }
+      : undefined,
+    {
+      label: $t("userHeader.profile.settings"),
+      route: "/account",
+      prefix: "",
+    },
+    {
+      label: "Authorize client",
+      route: "/client/code",
+      prefix: "",
+    },
+  ].filter((e) => e !== undefined),
+);
 </script>

composables/admin-home.ts

@@ -0,0 +1,21 @@
+import type { SerializeObject } from "nitropack";
+import type { SystemData } from "~/server/internal/system-data";
+
+const ws = new WebSocketHandler("/api/v1/admin/system-data/ws");
+
+export const useSystemData = () =>
+  useState<SerializeObject<SystemData>>(
+    "system-data",
+    (): SystemData => ({
+      totalRam: 0,
+      freeRam: 0,
+      cpuLoad: 0,
+      cpuCores: 0,
+    }),
+  );
+
+ws.listen((systemDataString) => {
+  const data = JSON.parse(systemDataString) as SerializeObject<SystemData>;
+  const systemData = useSystemData();
+  systemData.value = data;
+});

composables/collection.ts

@@ -1,8 +1,12 @@
-import type { Collection, CollectionEntry, Game } from "~/prisma/client";
+import type {
+  CollectionModel,
+  CollectionEntryModel,
+  GameModel,
+} from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
-type FullCollection = Collection & {
-  entries: Array<CollectionEntry & { game: SerializeObject<Game> }>;
+type FullCollection = CollectionModel & {
+  entries: Array<CollectionEntryModel & { game: SerializeObject<GameModel> }>;
 };
 
 export const useCollections = async () => {

composables/current-page-engine.ts

@@ -1,4 +1,3 @@
-import type { RouteLocationNormalized } from "vue-router";
 import type { NavigationItem } from "./types";
 
 export const useCurrentNavigationIndex = (
@@ -9,7 +8,7 @@ export const useCurrentNavigationIndex = (
 
   const currentNavigation = ref(-1);
 
-  function calculateCurrentNavIndex(to: RouteLocationNormalized) {
+  function calculateCurrentNavIndex(to: typeof route) {
     const validOptions = navigation
       .map((e, i) => ({ ...e, index: i }))
       .filter((e) => to.fullPath.startsWith(e.prefix));

composables/frontend.d.ts

@@ -0,0 +1,22 @@
+import type {
+  ComponentCustomOptions as _ComponentCustomOptions,
+  ComponentCustomProperties as _ComponentCustomProperties,
+} from "vue";
+import type { Platform } from "~/prisma/client/enums";
+
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties extends _ComponentCustomProperties {
+    $t: (key: string, ...args: unknown[]) => string;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface ComponentCustomOptions extends _ComponentCustomOptions {}
+}
+
+export interface EmulatorLaunchObject {
+  launchId: string;
+  gameName: string;
+  gameIcon: string;
+  versionName: string;
+  launchName: string;
+  platform: Platform;
+}

composables/icons.ts

@@ -1,8 +1,8 @@
 import { IconsLinuxLogo, IconsWindowsLogo, IconsMacLogo } from "#components";
-import { PlatformClient } from "./types";
+import { Platform } from "~/prisma/client/enums";
 
 export const PLATFORM_ICONS = {
-  [PlatformClient.Linux]: IconsLinuxLogo,
-  [PlatformClient.Windows]: IconsWindowsLogo,
-  [PlatformClient.macOS]: IconsMacLogo,
+  [Platform.Linux]: IconsLinuxLogo,
+  [Platform.Windows]: IconsWindowsLogo,
+  [Platform.macOS]: IconsMacLogo,
 };

composables/kjua.d.ts

@@ -0,0 +1 @@
+declare module "kjua";

composables/news.ts

@@ -1,11 +1,11 @@
-import type { Article } from "~/prisma/client";
+import type { ArticleModel } from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
 export const useNews = () =>
   useState<
     | Array<
         SerializeObject<
-          Article & {
+          ArticleModel & {
             tags: Array<{ id: string; name: string }>;
             author: { displayName: string; id: string } | null;
           }

composables/notifications.ts

@@ -1,12 +1,16 @@
-import type { Notification } from "~/prisma/client";
+import type { SerializeObject } from "nitropack";
+import type { NotificationModel } from "~/prisma/client/models";
 
 const ws = new WebSocketHandler("/api/v1/notifications/ws");
 
 export const useNotifications = () =>
-  useState<Array<Notification>>("notifications", () => []);
+  useState<Array<SerializeObject<NotificationModel>>>(
+    "notifications",
+    () => [],
+  );
 
 ws.listen((e) => {
-  const notification = JSON.parse(e) as Notification;
+  const notification = JSON.parse(e) as SerializeObject<NotificationModel>;
   const notifications = useNotifications();
   notifications.value.push(notification);
 });

composables/request.ts

@@ -4,6 +4,7 @@ import type {
   NitroFetchRequest,
   TypedInternalResponse,
 } from "nitropack/types";
+import type { FetchError } from "ofetch";
 
 interface DropFetch<
   DefaultT = unknown,
@@ -15,7 +16,7 @@ interface DropFetch<
     O extends NitroFetchOptions<R> = NitroFetchOptions<R>,
   >(
     request: R,
-    opts?: O,
+    opts?: O & { failTitle?: string; params?: { [key: string]: string } },
   ): Promise<
     // sometimes there is an error, other times there isn't
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -28,12 +29,47 @@ interface DropFetch<
   >;
 }
 
-export const $dropFetch: DropFetch = async (request, opts) => {
+export const $dropFetch: DropFetch = async (rawRequest, opts) => {
+  const requestParts = rawRequest.toString().split("/");
+  requestParts.forEach((part, index) => {
+    if (!part.startsWith(":")) {
+      return;
+    }
+    const partName = part.slice(1);
+    const replacement = opts?.params?.[partName] as string | undefined;
+    if (!replacement) {
+      return;
+    }
+    requestParts[index] = replacement;
+
+    delete opts?.params?.[partName];
+  });
+  const request = requestParts.join("/");
+
+  // If not in setup
   if (!getCurrentInstance()?.proxy) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore Excessive stack depth comparing types
-    return await $fetch(request, opts);
+    try {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore Excessive stack depth comparing types
+      return await $fetch(request, opts);
+    } catch (e) {
+      if (import.meta.client && opts?.failTitle) {
+        console.warn(e);
+        createModal(
+          ModalType.Notification,
+          {
+            title: opts.failTitle,
+            description:
+              (e as FetchError)?.data?.message ?? (e as string).toString(),
+            //buttonText: $t("common.close"),
+          },
+          (_, c) => c(),
+        );
+      }
+      throw e;
+    }
   }
+
   const id = request.toString();
 
   const state = useState(id);
@@ -41,15 +77,27 @@ export const $dropFetch: DropFetch = async (request, opts) => {
     // Deep copy
     const object = JSON.parse(JSON.stringify(state.value));
     // Never use again on client
-    state.value = undefined;
+    if (import.meta.client) state.value = undefined;
     return object;
   }
 
   const headers = useRequestHeaders(["cookie", "authorization"]);
   const data = await $fetch(request, {
     ...opts,
-    headers: { ...opts?.headers, ...headers },
+    headers: { ...headers, ...opts?.headers },
   });
   if (import.meta.server) state.value = data;
   return data;
 };
+
+export function isClientRequest() {
+  const existingState = useState("clientMode", () => false);
+  if (import.meta.server) {
+    const headers = useRequestHeaders(["User-Agent"]);
+    const calculatedClientRequest =
+      headers["user-agent"] == "Drop Desktop Client";
+    existingState.value = calculatedClientRequest;
+  }
+
+  return existingState.value;
+}

composables/store.ts

@@ -0,0 +1,11 @@
+export type StoreFilterOption = {
+  name: string;
+  param: string;
+  options: Array<StoreSortOption>;
+  multiple?: boolean;
+};
+
+export type StoreSortOption = {
+  name: string;
+  param: string;
+};

composables/task.ts

@@ -52,6 +52,7 @@ websocketHandler.listen((message) => {
           progress: 0,
           error: undefined,
           log: [],
+          actions: [],
         };
         state.value.error = { title, description };
         break;

composables/types.ts

@@ -11,9 +11,3 @@ export type QuickActionNav = {
   notifications?: Ref<number>;
   action: () => Promise<void>;
 };
-
-export enum PlatformClient {
-  Windows = "Windows",
-  Linux = "Linux",
-  macOS = "macOS",
-}

composables/user.ts

@@ -1,13 +1,22 @@
-import type { User } from "~/prisma/client";
+import type { UserModel } from "~/prisma/client/models";
 
 // undefined = haven't check
 // null = check, no user
 // {} = check, user
 
-export const useUser = () => useState<User | undefined | null>(undefined);
+export const useUser = () => useState<UserModel | undefined | null>(undefined);
 export const updateUser = async () => {
   const user = useUser();
   if (user.value === null) return;
 
-  user.value = await $dropFetch<User | null>("/api/v1/user");
+  user.value = await $dropFetch<UserModel | null>("/api/v1/user");
 };
+
+export async function completeSignin() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const user = useUser();
+  user.value = await $dropFetch<UserModel | null>("/api/v1/user");
+  router.push(route.query.redirect?.toString() ?? "/");
+}

composables/users.ts

@@ -0,0 +1,25 @@
+import type { SerializeObject } from "nitropack";
+import type { UserModel } from "~/prisma/client/models";
+import type { AuthMec } from "~/prisma/client/enums";
+
+export const useUsers = () =>
+  useState<
+    | Array<
+        SerializeObject<
+          UserModel & {
+            authMecs?: Array<{ id: string; mec: AuthMec }>;
+          }
+        >
+      >
+    | undefined
+  >("users", () => undefined);
+
+export const fetchUsers = async () => {
+  const users = useUsers();
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore forget why this ignor exists
+  const newValue: User[] = await $dropFetch("/api/v1/admin/users");
+  users.value = newValue;
+  return newValue;
+};

deploy-template/compose.yml

@@ -1,8 +1,7 @@
 services:
   postgres:
-    image: postgres:14-alpine
-    ports:
-      - 5432:5432
+    # using alpine image to reduce image size
+    image: postgres:alpine
     healthcheck:
       test: pg_isready -d drop -U drop
       interval: 30s
@@ -16,7 +15,10 @@ services:
       - POSTGRES_USER=drop
       - POSTGRES_DB=drop
   drop:
-    image: registry.deepcore.dev/drop-oss/drop/main:latest
+    image: ghcr.io/drop-oss/drop:nightly
+    stdin_open: true
+    tty: true
+    init: true
     depends_on:
       postgres:
         condition: service_healthy
@@ -24,11 +26,6 @@ services:
       - 3000:3000
     volumes:
       - ./library:/library
-      - ./certs:/certs
-      - ./objects:/objects
+      - ./data:/data
     environment:
       - DATABASE_URL=postgres://drop:drop@postgres:5432/drop
-      - FS_BACKEND_PATH=/objects
-      - CLIENT_CERTIFICATES=/certs
-      - LIBRARY=/library
-      - GIANT_BOMB_API_KEY=REPLACE_WITH_YOUR_KEY

dev-tools/compose.yml

@@ -1,12 +1,14 @@
 services:
   postgres:
     image: postgres:14-alpine
-    user: "1000:1000"
     ports:
       - 5432:5432
     volumes:
-      - ../.data/db:/var/lib/postgresql/data
+      - postgres-data:/var/lib/postgresql/data
     environment:
       - POSTGRES_PASSWORD=drop
       - POSTGRES_USER=drop
       - POSTGRES_DB=drop
+
+volumes:
+  postgres-data: