Admin home page #128 (#259)

* First iteration on the new PieChart component

* #128 Adds new admin home page

* Fixes code after merging conflicts

* Removes empty file

* Uses real data for admin home page, and improves style

* Reverts debugging code

* Defines missing variable

* Caches user stats data for admin home page

* Typo

* Styles improvements

* Invalidates cache on signup/signin

* Implements top 5 biggest games

* Improves styling

* Improves style

* Using generateManifest to get the proper size

* Reading data from cache

* Removes unnecessary import

* Improves caching mechanism for game sizes

* Removes lint errors

* Replaces piechart tooltip with colors in legend

* Fixes caching

* Fixes caching and slight improvement on pie chart colours

* Fixes a few bugs related to caching

* Fixes bug where app signin didn't refresh cache

* feat: style improvements

* fix: lint

---------

Co-authored-by: DecDuck <declanahofmeyr@gmail.com>

.github/workflows/ci.yml

@@ -21,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
@@ -42,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

.prettierignore

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

CONTRIBUTING.md

@@ -1,271 +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)
-- [Development](#development)
-  - [Note: `--optional` flag is **REQUIRED**](#note-optional-flag-is-required)
-  - [Tech Stack](#tech-stack)
-- [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)
-- [Translation](#translation)
-- [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.
-
-## Development
-
-To get started with development, you need `yarn` and `docker compose` installed (or know how to set up a PostgreSQL database).
-
-Steps:
-
-1. Run `git submodule update --init --recursive` to setup submodules
-1. Copy the `.env.example` to `.env` and add any api keys you need to use (e.g. for the Giant Bomb API)
-   - You can find other configuration options in the [documentation](https://docs.droposs.org/)
-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 prisma migrate dev` to setup the database
-1. Run `yarn dev` to start the development 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
-
-### Tech Stack
-
-This repo uses the Nuxt 3 + TailwindCSS stack, with the `yarn` package manager.
-
-For the database, Drop uses Prisma connected to PostgreSQL.
-
-## 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).
-
----
-
-## Translation
-
-If you want to help translate Drop, we would love to have your help! You can do so on our [weblate instance](https://translate.droposs.org/engage/drop/). Please make sure to **read** the [message format syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) page before starting. We use this special syntax to enable high quality translations, and failure to do so may result in your translations **causing errors** in Drop.
-
-## 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,40 +1,45 @@
 # syntax=docker/dockerfile:1
 
+FROM node:lts-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+WORKDIR /app
+
+# 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
+
 ### Unified deps builder
-# FROM node:lts-alpine AS deps
-# WORKDIR /app
-# COPY package.json yarn.lock ./
-# RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --network-timeout 1000000 --ignore-scripts
+FROM base AS deps
+RUN pnpm install --frozen-lockfile --ignore-scripts
 
 ### Build for app
-FROM node:lts-alpine AS build-system
-# setup workdir - has to be the same filepath as app because fuckin' Prisma
-WORKDIR /app
+FROM base AS build-system
 
 ENV NODE_ENV=production
 ENV NUXT_TELEMETRY_DISABLED=1
-# ENV YARN_CACHE_FOLDER=/root/.yarn
 
 # add git so drop can determine its git ref at build
-# pnpm for build
-RUN apk add --no-cache git pnpm
+RUN apk add --no-cache git
 
 # copy deps and rest of project files
-# COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 ARG BUILD_DROP_VERSION
 ARG BUILD_GIT_REF
 
 # build
-RUN pnpm import
-RUN pnpm install --shamefully-hoist
-RUN pnpm run build
-# RUN --mount=type=cache,target=/root/.yarn yarn postinstall && yarn build
+RUN pnpm run postinstall && pnpm run build
 
 ### create run environment for Drop
-FROM node:lts-alpine AS run-system
-WORKDIR /app
+FROM base AS run-system
 
 ENV NODE_ENV=production
 ENV NUXT_TELEMETRY_DISABLED=1
@@ -42,6 +47,8 @@ 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
 RUN pnpm install prisma@6.11.1
+# init prisma to download all required files
+RUN pnpm prisma init
 
 COPY --from=build-system /app/package.json ./
 COPY --from=build-system /app/.output ./app

components/AccountSidebar.vue

@@ -45,6 +45,7 @@ import {
   LockClosedIcon,
   DevicePhoneMobileIcon,
   WrenchScrewdriverIcon,
+  CodeBracketIcon,
 } from "@heroicons/vue/24/outline";
 import { UserIcon } from "@heroicons/vue/24/solid";
 import type { Component } from "vue";
@@ -73,6 +74,12 @@ const navigation: (NavigationItem & { icon: Component; count?: number })[] = [
     icon: BellIcon,
     count: notifications.value.length,
   },
+  {
+    label: t("account.token.title"),
+    route: "/account/tokens",
+    prefix: "/account/tokens",
+    icon: CodeBracketIcon,
+  },
   {
     label: t("account.settings"),
     route: "/account/settings",

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/DropLogo.vue

@@ -10,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/GameEditor/Metadata.vue

@@ -29,6 +29,23 @@
 
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-8">
           <MultiItemSelector v-model="currentTags" :items="tags" />
+          <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 -->
@@ -491,11 +508,38 @@ watch(
   { 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);
@@ -561,7 +605,6 @@ function coreMetadataUpdate_wrapper() {
       );
     })
     .then((newGame) => {
-      console.log(newGame);
       if (!newGame) return;
       Object.assign(game.value, newGame);
       coreMetadataIconUrl.value = useObject(newGame.mIconObjectId);

components/GameEditor/Version.vue

@@ -51,14 +51,19 @@
               @update="() => updateVersionOrder()"
             >
               <template
-                #item="{ element: item }: { element: GameVersionModel }"
+                #item="{ element: item }: { element: GameVersionModelWithSize }"
               >
                 <div
-                  class="w-full inline-flex items-center px-4 py-2 bg-zinc-800 rounded justify-between"
+                  class="w-full inline-flex items-center px-4 py-2 bg-zinc-800 rounded justify-between w-full flex"
                 >
-                  <div class="text-zinc-100 font-semibold">
+                  <div class="text-zinc-100 font-semibold flex-none">
                     {{ item.versionName }}
                   </div>
+                  <div
+                    class="text-right text-zinc-400 text-xs font-normal flex-auto pr-4"
+                  >
+                    {{ item.size && formatBytes(item.size) }}
+                  </div>
                   <div class="text-zinc-400">
                     {{ item.delta ? $t("library.admin.version.delta") : "" }}
                   </div>
@@ -117,6 +122,7 @@ import { Bars3Icon, TrashIcon } from "@heroicons/vue/24/solid";
 import type { SerializeObject } from "nitropack";
 import type { H3Error } from "h3";
 import { ExclamationCircleIcon } from "@heroicons/vue/24/outline";
+import { formatBytes } from "~/server/internal/utils/files";
 
 // TODO implement UI for this page
 
@@ -130,7 +136,11 @@ const canImport = computed(
   () => hasDeleted.value || props.unimportedVersions.length > 0,
 );
 
-type GameAndVersions = GameModel & { versions: GameVersionModel[] };
+type GameVersionModelWithSize = GameVersionModel & { size: number };
+
+type GameAndVersions = GameModel & {
+  versions: GameVersionModelWithSize[];
+};
 const game = defineModel<SerializeObject<GameAndVersions>>() as Ref<
   SerializeObject<GameAndVersions>
 >;

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/LogLine.vue

@@ -0,0 +1,27 @@
+<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.timestamp }}</span>
+    <span
+      :class="[
+        colours[log.level] || 'text-green-400',
+        'uppercase font-display font-semibold',
+      ]"
+      >{{ log.level }}</span
+    >
+    <pre :class="[short ? 'line-clamp-1' : '', 'mt-[1px]']">{{
+      log.message
+    }}</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/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"
+                      v-model="currentACLs[acl]"
+                      aria-describedby="acl-description"
+                      name="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"
+                    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/PieChart/PieChart.vue

@@ -0,0 +1,45 @@
+<template>
+  <h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
+  <div class="flex flex-col xl:flex-row gap-4">
+    <div class="relative flex grow max-w-[12rem]">
+      <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 justify-center 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: slice.value,
+          })
+        }}
+      </li>
+    </ul>
+  </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,31 @@
+<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]) }}
+    </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/SourceTable.vue

@@ -0,0 +1,193 @@
+<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"
+            class="even:bg-zinc-800"
+          >
+            <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 inline-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.freeSpace,
+                      source.fsStats.totalSpace,
+                    )
+                  "
+                  :color="
+                    getBarColor(
+                      getPercentage(
+                        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("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";
+
+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,
+  },
+};
+
+const getPercentage = (value: number, total: number) =>
+  ((total - value) * 100) / total;
+</script>

components/StoreView.vue

@@ -1,3 +1,12 @@
+<i18n>
+{
+  "en": {
+    "↓": "↓",
+    "↑": "↑"
+  }
+}
+</i18n>
+
 <template>
   <div>
     <div>
@@ -176,9 +185,12 @@
                           active ? 'bg-zinc-900 outline-hidden' : '',
                           'w-full text-left block px-4 py-2 text-sm',
                         ]"
-                        @click="() => (currentSort = option.param)"
+                        @click.prevent="handleSortClick(option, $event)"
                       >
                         {{ option.name }}
+                        <span v-if="currentSort === option.param">
+                          {{ sortOrder === "asc" ? $t("↑") : $t("↓") }}
+                        </span>
                       </button>
                     </MenuItem>
                   </div>
@@ -292,7 +304,7 @@
             <div
               v-if="games?.length ?? 0 > 0"
               ref="product-grid"
-              class="relative lg:col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7 gap-4"
+              class="relative lg:col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
             >
               <!-- Your content -->
               <GamePanel
@@ -389,8 +401,13 @@ const sorts: Array<StoreSortOption> = [
     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
@@ -466,7 +483,7 @@ async function updateGames(query: string, resetGames: boolean) {
     results: Array<SerializeObject<GameModel>>;
     count: number;
   }>(
-    `/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}${query ? "&" + query : ""}`,
+    `/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;
@@ -483,6 +500,19 @@ watch(filterQuery, (newUrl) => {
 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,55 @@
+<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>
+      <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>

composables/request.ts

@@ -46,10 +46,28 @@ export const $dropFetch: DropFetch = async (rawRequest, opts) => {
   });
   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)?.statusMessage ?? (e as string).toString(),
+            //buttonText: $t("common.close"),
+          },
+          (_, c) => c(),
+        );
+      }
+      throw e;
+    }
   }
 
   const id = request.toString();
@@ -64,26 +82,10 @@ export const $dropFetch: DropFetch = async (rawRequest, opts) => {
   }
 
   const headers = useRequestHeaders(["cookie", "authorization"]);
-  try {
-    const data = await $fetch(request, {
-      ...opts,
-      headers: { ...headers, ...opts?.headers },
-    });
-    if (import.meta.server) state.value = data;
-    return data;
-  } catch (e) {
-    if (import.meta.client && opts?.failTitle) {
-      createModal(
-        ModalType.Notification,
-        {
-          title: opts.failTitle,
-          description:
-            (e as FetchError)?.statusMessage ?? (e as string).toString(),
-          buttonText: $t("common.close"),
-        },
-        (_, c) => c(),
-      );
-    }
-    throw e;
-  }
+  const data = await $fetch(request, {
+    ...opts,
+    headers: { ...headers, ...opts?.headers },
+  });
+  if (import.meta.server) state.value = data;
+  return data;
 };

i18n/locales/de.json

@@ -1,17 +1,18 @@
 {
   "account": {
     "devices": {
-      "capabilities": "Möglichkeiten",
+      "capabilities": "Funktionen",
       "lastConnected": "Zuletzt verbunden",
       "noDevices": "Keine Geräte sind mit deinem Konto verbunden.",
       "platform": "Plattform",
       "revoke": "Wiederrufen",
+      "subheader": "Geräte verwalten, die auf Ihr Drop Konto zugreifen dürfen.",
       "title": "Geräte"
     },
     "notifications": {
-      "all": "Alle anzeigen {arrow}",
-      "desc": "Benachrichtigungen anzeigen und verwalten.",
-      "markAllAsRead": "Alles als gelesen markieren",
+      "all": "Alles anzeigen {arrow}",
+      "desc": "Anzeigen und Verwalten deiner Benachrichtigung.",
+      "markAllAsRead": "Markiere alle als gelesen",
       "markAsRead": "Als gelesen Markieren",
       "none": "Keine Benachrichtigungen",
       "notifications": "Benachrichtigungen",
@@ -19,17 +20,37 @@
       "unread": "Ungelesene Benachrichtigungen"
     },
     "settings": "Einstellungen",
-    "title": "Kontoeinstellungen"
+    "title": "Kontoeinstellungen",
+    "token": {
+      "acls": "Berechtigungen (ACLs/Scopes)",
+      "aclsDesc": "Definiert, wozu dieses Schlüssel berechtigt ist. Du solltest vermeiden, alle ACLs auszuwählen, wenn dies nicht notwendig ist.",
+      "expiry": "Ablaufdatum",
+      "expiry3Month": "3 Monate",
+      "expiry5Year": "5 Jahre",
+      "expiry6Month": "6 Monate",
+      "expiryMonth": "Ein Monat",
+      "expiryYear": "Ein Jahr",
+      "name": "API-Schlüssel Name",
+      "nameDesc": "Der Name des Schlüssels, als Referenz.",
+      "namePlaceholder": "Mein neuer Schlüssel",
+      "noExpiry": "Unbegrenzt gültig",
+      "noTokens": "Keine Schlüssel mit deinem Konto verbunden.",
+      "revoke": "Wiederrufen",
+      "subheader": "Verwalte deine API-Schlüssel und deren Zugriffsrechte.",
+      "success": "Schlüssel erfolgreich erstellt.",
+      "successNote": "Bitte jetzt kopieren, da es nicht noch einmal angezeigt wird.",
+      "title": "API-Schlüssel"
+    }
   },
   "actions": "Aktionen",
   "add": "Hinzufügen",
-  "adminTitle": "Administrator Dashbord - Drop",
-  "adminTitleTemplate": "{0} - Administrator - Drop",
+  "adminTitle": "Admin Dashboard - Drop",
+  "adminTitleTemplate": "{0} - Admin - Drop",
   "auth": {
     "callback": {
       "authClient": "Client autorisieren?",
       "authorize": "Autorisieren",
-      "authorizedClient": "Drop hat den Client erfolgreich autorisiert. Du darfst dieses Fenster nun schließen.",
+      "authorizedClient": "Drop hat den Client erfolgreich autorisiert. Du kannst dieses Fenster nun schließen.",
       "issues": "Probleme?",
       "learn": "Mehr erfahren {arrow}",
       "paste": "Füge diesen Code in den Client ein, um fortzufahren:",
@@ -38,9 +59,10 @@
       "success": "Erfolgreich!"
     },
     "code": {
-      "description": "Verwende ein Code, um dein Drop Client zu verbinden, wenn dein Gerät kein Webbrowser öffnen kann.",
-      "title": "Verbinde dein Drop Client"
+      "description": "Verwende einen Code, um dein Drop Client zu verbinden, wenn dein Gerät kein Webbrowser öffnen kann.",
+      "title": "Verbinde deinen Drop Client"
     },
+    "confirmPassword": "Bestätige @:auth.password",
     "displayName": "Anzeigename",
     "email": "E-Mail",
     "password": "Passwort",
@@ -55,10 +77,10 @@
     "signin": {
       "externalProvider": "Bei externem Anbieter anmelden {arrow}",
       "forgot": "Passwort vergessen?",
-      "noAccount": "Noch kein Konto? Bitten den Administrator, eines für dich zu erstellt.",
+      "noAccount": "Noch kein Konto? Bitte den Admin, eines für dich zu erstellen.",
       "or": "ODER",
       "pageTitle": "Bei Drop anmelden",
-      "rememberMe": "An mich erinnern",
+      "rememberMe": "Erinnere mich",
       "signin": "Anmelden",
       "title": "Melde dich bei deinem Konto an"
     },
@@ -124,9 +146,9 @@
       }
     },
     "auth": {
-      "disabled": "Ungültiges oder deaktiviertes Konto. Bitte kontaktiere einen Server Administrator.",
+      "disabled": "Ungültiges oder deaktiviertes Konto. Bitte kontaktiere einen Server Admin.",
       "invalidInvite": "Ungültige oder abgelaufene Einladung",
-      "invalidPassState": "Ungültiger Passwortzustand. Bitte kontaktiere einen Server Administrator.",
+      "invalidPassState": "Ungültiger Passwortzustand. Bitte kontaktiere einen Server Admin.",
       "invalidUserOrPass": "Ungültiger Nutzername oder Passwort.",
       "inviteIdRequired": "id erforderlich beim Abrufen der Einladung",
       "method": {
@@ -135,6 +157,10 @@
       "usernameTaken": "Nutzername bereits vergeben."
     },
     "backHome": "{arrow} Zurück zur Startseite",
+    "externalUrl": {
+      "subtitle": "Diese Nachricht ist nur sichtbar für Admins.",
+      "title": "Zugriff über eine andere EXTERNAL_URL. Bitte die Dokumentation prüfen."
+    },
     "game": {
       "banner": {
         "description": "Das Aktualisieren des Banners ist fehlgeschlagen: {0}",
@@ -192,6 +218,8 @@
     "occurred": "Bei der Bearbeitung deiner Anfrage ist ein Fehler aufgetreten. Wenn du glaubst, dass es sich um einen Bug handelt, melde diesen bitte. Versuche dich anzumelden, um zu sehen, ob dadurch das Problem behoben wird.",
     "ohNo": "Oh nein!",
     "pageTitle": "{0} | Drop",
+    "revokeClient": "Client konnte nicht widerrufen werden",
+    "revokeClientFull": "Client konnte nicht widerrufen werden {0}",
     "signIn": "Anmelden {arrow}",
     "support": "Support Discord",
     "unknown": "Ein unbekannter Fehler ist aufgetreten",
@@ -231,8 +259,13 @@
   },
   "header": {
     "admin": {
-      "admin": "Administrator",
-      "settings": "Einstellungen",
+      "admin": "Admin",
+      "metadata": "Metadaten",
+      "settings": {
+        "store": "Store",
+        "title": "Einstellungen",
+        "tokens": "API-Schlüssel"
+      },
       "tasks": "Aufgaben",
       "users": "Benutzer"
     },
@@ -240,6 +273,7 @@
     "openSidebar": "Öffne Seitenleiste"
   },
   "helpUsTranslate": "Hilf uns Drop zu übersetzen {arrow}",
+  "highest": "Höchste",
   "home": "Startseite",
   "library": {
     "addGames": "Alle Spiele",
@@ -249,50 +283,117 @@
       "detectedVersion": "Drop hat erkannt, dass du eine neue Version dieses Spiels importieren kannst.",
       "game": {
         "addCarouselNoImages": "Keine Bilder zum hinzufügen.",
-        "addDescriptionNoImages": "Keine Bilder zum hinzufügen."
+        "addDescriptionNoImages": "Keine Bilder zum hinzufügen.",
+        "addImageCarousel": "Aus der Bilderbibliothek hinzufügen",
+        "currentBanner": "Banner",
+        "currentCover": "Cover",
+        "deleteImage": "Bild löschen",
+        "editGameDescription": "Spielbeschreibung",
+        "editGameName": "Spielname",
+        "imageCarousel": "Bilderkarussell",
+        "imageCarouselDescription": "Anpassen, welche Bilder und in welcher Reihenfolge sie auf der Shop-Seite angezeigt werden.",
+        "imageCarouselEmpty": "Es wurden noch keine Bilder zum Karussell hinzugefügt.",
+        "imageLibrary": "Bilderbibliothek",
+        "imageLibraryDescription": "Bitte beachten: Alle hochgeladenen Bilder sind für alle Nutzer über die Browser-Entwicklertools zugänglich.",
+        "removeImageCarousel": "Bild entfernen",
+        "setBanner": "Als Banner festlegen",
+        "setCover": "Als Cover festlegen"
       },
+      "gameLibrary": "Spielebibliothek",
       "import": {
+        "bulkImportDescription": "Auf dieser Seite wirst du nicht zur Importaufgabe weitergeleitet, sodass du mehrere Spiele nacheinander importieren kannst.",
+        "bulkImportTitle": "Massenimport Modus",
+        "import": "Import",
+        "link": "Import {arrow}",
+        "loading": "Spieldaten werden geladen…",
+        "search": "Suche",
+        "searchPlaceholder": "Fallout 4",
+        "selectDir": "Bitte wähle ein Verzeichnis aus…",
+        "selectGame": "Spiel zum Import auswählen",
+        "selectGamePlaceholder": "Bitte wähle ein Spiel aus…",
+        "selectGameSearch": "Spiel auswählen",
+        "selectPlatform": "Bitte wähle eine Plattform aus…",
         "version": {
+          "advancedOptions": "Erweiterte Optionen",
           "import": "Version Importieren",
+          "installDir": "(Installationsverzeichnis)/",
+          "launchCmd": "Programm/Befehl starten",
           "launchDesc": "Ausführbare Datei zum starten des Spiels",
           "launchPlaceholder": "spiel.exe",
           "loadingVersion": "Lade Versionsmetadaten…",
           "noAdv": "Keine erweiterten Optionen für diese Konfiguration.",
           "noVersions": "Keine Version zum importieren",
+          "platform": "Plattformversion",
+          "setupCmd": "Installationsprogramm oder Befehl ausführen",
+          "setupDesc": "Wird einmal ausgeführt, wenn das Spiel installiert wird",
           "setupMode": "Einrichtungsmodus",
+          "setupModeDesc": "Wenn aktiviert, hat diese Version keinen Startbefehl und führt einfach die ausführbare Datei auf dem Computer des Nutzers aus. Nützlich für Spiele, die nur einen Installer bereitstellen und keine portablen Dateien.",
           "setupPlaceholder": "setup.exe",
           "umuLauncherId": "UMU Launcher ID",
+          "umuOverride": "Überschreibe UMU Launcher Spiel ID",
+          "umuOverrideDesc": "Standardmäßig verwendet Drop beim Start über den UMU Launcher eine Nicht-ID. Um die richtigen Patches für manche Spiele zu erhalten, musst du dieses Feld eventuell manuell setzen.",
           "updateMode": "Aktualisierungsmodus",
+          "updateModeDesc": "Wenn aktiviert, werden diese Dateien über die vorherige Version installiert (überschrieben). Werden mehrere ‚Update-Modi‘ hintereinander verwendet, werden sie in der angegebenen Reihenfolge angewendet.",
           "version": "Wähle die Version für den Import aus"
         },
         "withoutMetadata": "Ohne Metadaten importieren"
       },
+      "libraryHint": "Keine Bibliotheken konfiguriert.",
+      "libraryHintDocsLink": "Was bedeutet das? {arrow}",
       "metadata": {
         "companies": {
           "action": "Verwalte {arrow}",
           "addGame": {
+            "description": "Wähle ein Spiel aus, das dem Unternehmen hinzugefügt werden soll, und lege fest, ob es als Entwickler, Publisher oder beides geführt werden soll.",
             "developer": "Entwickler?",
             "noGames": "Keine Spiele zum hinzufügen",
-            "publisher": "Publisher?"
+            "publisher": "Publisher?",
+            "title": "Verbinde das Spiel mit diesem Unternehmen"
           },
+          "description": "Unternehmen organisieren Spiele danach, wer sie entwickelt oder veröffentlicht hat.",
           "editor": {
             "action": "Spiel hinzufügen {plus}",
+            "descriptionPlaceholder": "{'<'}Beschreibung{'>'}",
             "developed": "Entwickelt",
             "libraryDescription": "Hinzufügen, bearbeiten oder entfernen, was diese Firma entwickelt und/oder veröffentlicht hat.",
             "libraryTitle": "Spielebibliothek",
             "noDescription": "(Keine Beschreibung)",
             "published": "Veröffentlicht",
             "uploadBanner": "Banner hochladen",
-            "uploadIcon": "Icon hochladen"
+            "uploadIcon": "Icon hochladen",
+            "websitePlaceholder": "{'<'}Webseite{'>'}"
           },
           "modals": {
+            "createDescription": "Erstelle ein Unternehmen, um deine Spiele besser zu organisieren.",
+            "createFieldDescription": "Unternehmensbeschreibung",
+            "createFieldDescriptionPlaceholder": "Ein kleines Indie-Studio, das…",
+            "createFieldName": "Unternehmensname",
+            "createFieldNamePlaceholder": "Mein neues Unternehmen…",
+            "createFieldWebsite": "Unternehmenswebseite",
+            "createFieldWebsitePlaceholder": "https://beispiel.de/",
+            "createTitle": "Unternehmen erstellen",
+            "nameDescription": "Bearbeite den Namen des Unternehmens. Wird verwendet, um neue Spielimporte zuzuordnen.",
+            "nameTitle": "Bearbeite Firmenname",
             "shortDeckDescription": "Bearbeite die Firmenbeschreibung. Beeinträchtigt nicht die Lange (markdown) Beschreibung.",
-            "shortDeckTitle": "Bearbeite Firmenbeschreibung"
-          }
+            "shortDeckTitle": "Bearbeite Firmenbeschreibung",
+            "websiteDescription": "„Bearbeite die Webseite des Unternehmens. Hinweis: Dies wird ein Link sein und bietet keinen Redirect-Schutz.",
+            "websiteTitle": "Unternehmenswebseite bearbeiten"
+          },
+          "noCompanies": "Keine Unternehmen",
+          "noGames": "Keine Spiele",
+          "search": "Suche Unternehmen…",
+          "searchGames": "Unternehmensspiele durchsuchen…",
+          "title": "Unternehmen"
         },
         "tags": {
           "action": "Verwalte {arrow}",
-          "create": "Erstellen"
+          "create": "Erstellen",
+          "description": "Tags werden automatisch aus importierten Genres erstellt. Du kannst eigene Tags hinzufügen, um deine Spielbibliothek zu kategorisieren.",
+          "modal": {
+            "description": "Erstelle einen Tag, um deine Bibliothek zu organisieren.",
+            "title": "Tag erstellen"
+          },
+          "title": "Tags"
         }
       },
       "metadataProvider": "Metadatenanbieter",
@@ -301,13 +402,31 @@
       "offlineTitle": "Spiel offline",
       "openEditor": "Im Editor öffnen {arrow}",
       "openStore": "Im Store öffnen",
+      "shortDesc": "Kurzbeschreibung",
       "sources": {
+        "create": "Quelle erstellen",
+        "createDesc": "Drop wird diese Quelle verwenden, um auf deine Spielbibliothek zuzugreifen und die Spiele verfügbar zu machen.",
+        "desc": "Konfiguriere deine Bibliotheksquellen, wo Drop nach neuen Spielen und Versionen zum Import suchen wird.",
+        "documentationLink": "Dokumentation {arrow}",
+        "edit": "Quelle bearbeiten",
+        "fsDesc": "Importiert Spiele von einem Pfad auf der Festplatte. Benötigt eine versionsbasierte Ordnerstruktur und unterstützt archivierte Spiele.",
+        "fsFlatDesc": "Importiert Spiele von einem Pfad auf der Festplatte, jedoch ohne separate Unterordner für Versionen. Nützlich beim Migrieren einer bestehenden Bibliothek zu Drop.",
+        "fsFlatTitle": "Kompatibilität",
         "fsPath": "Pfad",
         "fsPathDesc": "Absoluter Pfad zur Spielebibliothek.",
-        "fsPathPlaceholder": "/mnt/spiele"
+        "fsPathPlaceholder": "/mnt/spiele",
+        "fsTitle": "Drop-Stil",
+        "link": "Quellen {arrow}",
+        "nameDesc": "Der Name deiner Quelle, als Referenz.",
+        "namePlaceholder": "Meine neue Quelle",
+        "sources": "Bibliotheksquellen",
+        "typeDesc": "Der Typ deiner Quelle. Ändert die erforderlichen Optionen.",
+        "working": "Funktioniert es?"
       },
+      "subheader": "Wenn du Ordner zu deinen Bibliotheksquellen hinzufügst, erkennt Drop diese und fordert dich auf, sie zu importieren. Jedes Spiel muss importiert werden, bevor du eine Version importieren kannst.",
       "title": "Bibliotheken",
       "version": {
+        "delta": "Upgrade Modus",
         "noVersions": "Du hast keine verfügbare Version dieses Spiels.",
         "noVersionsAdded": "keine Versionen hinzugefügt"
       },
@@ -331,19 +450,30 @@
     "launcherOpen": "Im Launcher öffnen",
     "noGames": "Keine Spiele in der Bibliothek",
     "notFound": "Spiel nicht gefunden",
-    "search": "Durchsuche Bibliothek…"
+    "search": "Durchsuche Bibliothek…",
+    "subheader": "Verwalte deine Spiele in Sammlungen für einen einfacheren Zugriff auf alle deine Spiele."
   },
+  "lowest": "Niedrigste",
   "news": {
     "article": {
       "add": "Hinzufügen",
+      "content": "Inhalt (Markdown)",
       "create": "Neuen Artikel erstellen",
       "editor": "Editor",
+      "editorGuide": "Verwende die obigen Shortcuts oder schreibe direkt in Markdown. Unterstützt **fett**, *kursiv*, [Links](URL) und mehr.",
       "new": "Neuer Artikel",
       "preview": "Vorschau",
-      "titles": "Titel"
+      "shortDesc": "Kurzbeschreibung",
+      "submit": "Absenden",
+      "tagPlaceholder": "Tag hinzufügen…",
+      "titles": "Titel",
+      "uploadCover": "Cover hochladen"
     },
+    "back": "Zurück zu Neuigkeiten",
+    "checkLater": "Schaue später für Updates vorbei.",
     "delete": "Artikel löschen",
     "filter": {
+      "all": "Gesamt",
       "month": "Diesen Monat",
       "week": "Diese Woche",
       "year": "Dieses Jahr"
@@ -351,7 +481,9 @@
     "none": "Keine Artikel",
     "notFound": "Artikel nicht gefunden",
     "search": "Suche Artikel",
-    "searchPlaceholder": "Suche Artikel…"
+    "searchPlaceholder": "Suche Artikel…",
+    "subheader": "Bleibe auf dem Laufenden über die neuesten Updates und Ankündigungen.",
+    "title": "Neueste Neuigkeiten"
   },
   "options": "Einstellungen",
   "security": "Sicherheit",
@@ -359,30 +491,42 @@
   "settings": {
     "admin": {
       "description": "Konfiguriere Drop Einstellungen",
+      "store": {
+        "dropGameAltPlaceholder": "Beispiel Spielsymbol",
+        "dropGameDescriptionPlaceholder": "Dies ist ein exemplarisches Spiel. Es wird ersetzt wenn du ein Spiel importierst.",
+        "dropGameNamePlaceholder": "Beispielspiel",
+        "showGamePanelTextDecoration": "Zeige Titel und Beschreibung auf den Spielkacheln (Standard: an)",
+        "title": "Store"
+      },
       "title": "Einstellungen"
     }
   },
   "setup": {
     "auth": {
+      "description": "Die Authentifizierung in Drop erfolgt über mehrere konfigurierte ‚Provider‘. Jeder Provider ermöglicht es Nutzern, sich über seine Methode anzumelden. Um zu starten, sollte mindestens ein Authentifizierungs-Provider aktiviert sein und ein Konto über diesen erstellt werden.",
       "docs": "Dokumentation {arrow}",
       "enabled": "Aktiviert?",
       "openid": {
         "description": "OpenID Connect (OIDC) ist eine oft unterstützte OAuth2 Erweiterung. Drop erfordert die Konfiguration von OIDC über Umgebungsvariablen.",
+        "skip": "Ich habe ein OIDC Nutzer",
         "title": "OpenID Connect"
       },
       "simple": {
         "description": "Die einfache Authentifizierung verwendet Nutzername und Password zur Authentifizierung von Benutzern. Sie ist standartmäßig aktiviert, wenn kein anderer Authentifizierungsanbieter aktiviert ist.",
+        "register": "Als Admin registrieren {arrow}",
         "title": "Einfache Authentifizierung"
       },
       "title": "Authentifizierung"
     },
     "finish": "Los geht's {arrow}",
+    "noPage": "keine Seite",
     "stages": {
       "account": {
         "description": "Du benötigst mindestens ein Konto, um Drop zu benutzen.",
         "name": "Richte dein Administratorkonto ein."
       },
       "library": {
+        "description": "Füge mindestens eine Bibliotheksquelle hinzu, um Drop zu nutzen.",
         "name": "Erstelle eine Bibliothek."
       }
     },
@@ -391,79 +535,127 @@
   },
   "store": {
     "about": "Über",
+    "commingSoon": "Demnächst verfügbar",
     "developers": "Entwickler | Entwickler | Entwickler",
     "exploreMore": "Mehr entdecken {arrow}",
     "featured": "Empfohlen",
+    "images": "Spielbilder",
+    "lookAt": "Schau es dir an",
     "noDevelopers": "Keine Entwickler",
-    "noGame": "Kein Spiel",
+    "noFeatured": "KEINE HERVORGEHOBENEN SPIELE",
+    "noGame": "KEIN SPIEL",
     "noImages": "Keine Bilder",
+    "noPublishers": "Kein Publisher.",
+    "noTags": "Keine Tags",
+    "openAdminDashboard": "Im Admin Dashboard öffnen",
+    "openFeatured": "Spiele in der Admin-Bibliothek markieren {arrow}",
     "platform": "Plattform | Plattform | Plattform",
+    "publishers": "Publisher | Publisher | Publisher",
     "rating": "Bewertung",
+    "readLess": "Weniger anzeigen",
+    "readMore": "Mehr anzeigen",
     "recentlyAdded": "Kürzlich hinzugefügt",
     "recentlyReleased": "Kürzlich veröffentlicht",
     "recentlyUpdated": "Kürzlich aktualisiert",
     "released": "Veröffentlicht",
     "reviews": "({0} Bewertungen)",
+    "tags": "Tags",
+    "title": "Store",
     "view": {
       "sort": "Sortieren",
       "srFilters": "Filter",
-      "srGames": "Spiele"
+      "srGames": "Spiele",
+      "srViewGrid": "Raster anzeigen"
     },
+    "viewInStore": "Im Store ansehen",
     "website": "Webseite"
   },
   "tasks": {
     "admin": {
+      "back": "{arrow} Zurück zu den Aufgaben",
+      "completedTasksTitle": "Abgeschlossene Aufgaben",
+      "dailyScheduledTitle": "Tägliche Aufgaben",
+      "execute": "{arrow} Ausführen",
+      "noTasksRunning": "Keine laufenden Aufgaben",
+      "progress": "{0}%",
+      "runningTasksTitle": "Laufende Aufgaben",
       "scheduled": {
+        "checkUpdateDescription": "Drop auf Updates überprüfen.",
+        "checkUpdateName": "Auf Updates prüfen.",
+        "cleanupInvitationsDescription": "Bereinigt abgelaufene Einladungen aus der Datenbank, um Speicherplatz zu sparen.",
         "cleanupInvitationsName": "Einladungen bereinigen",
+        "cleanupObjectsDescription": "Erkennt und löscht nicht referenzierte und ungenutzte Objekte, um Speicherplatz zu sparen.",
+        "cleanupObjectsName": "Objekte bereinigen",
+        "cleanupSessionsDescription": "Bereinigt abgelaufene Sitzungen, um Speicherplatz zu sparen und die Sicherheit zu gewährleisten.",
         "cleanupSessionsName": "Sitzungen bereinigen."
-      }
+      },
+      "viewTask": "Ansehen {arrow}",
+      "weeklyScheduledTitle": "Wöchentliche Aufgaben"
     }
   },
   "title": "Drop",
   "titleTemplate": "{0} - Drop",
+  "todo": "Todo",
+  "type": "Typ",
   "upload": "Hochladen",
   "uploadFile": "Datei hochladen",
   "userHeader": {
     "closeSidebar": "Seitenleiste schließen",
     "links": {
-      "library": "Bibliothek"
+      "community": "Community",
+      "library": "Bibliothek",
+      "news": "Neuigkeiten"
     },
     "profile": {
+      "admin": "Admin Dashboard",
       "settings": "Kontoeinstellungen"
     }
   },
   "users": {
     "admin": {
       "adminHeader": "Administrator?",
+      "adminUserLabel": "Admin",
       "authLink": "Authentifizierung {arrow}",
       "authentication": {
         "configure": "Konfigurieren",
+        "description": "Drop unterstützt eine Vielzahl von Authentifizierungsmechanismen. Wenn du sie aktivierst oder deaktivierst, werden sie auf dem Anmeldebildschirm angezeigt, damit Benutzer sie auswählen können. Klicke auf die Drei-Punkte, um den Authentifizierungsmechanismus zu konfigurieren.",
         "disabled": "Deaktiviert",
         "enabled": "Aktiviert",
         "enabledKey": "Aktiviert?",
         "oidc": "OpenID Connect",
+        "simple": "Einfach (Nutzername/Passwort)",
         "srOpenOptions": "Einstellungen öffnen",
         "title": "Authentifizierung"
       },
       "authoptionsHeader": "Authentifizierungseinstellungen",
       "delete": "Löschen",
       "deleteUser": "Benutzer löschen {0}",
+      "description": "Verwalte Benutzer auf deiner Drop-Instanz und konfiguriere deine Authentifizierungsmethode.",
       "displayNameHeader": "Anzeigename",
       "emailHeader": "E-Mail",
       "normalUserLabel": "Normaler Benutzer",
       "simple": {
+        "adminInvitation": "Admin Einladung",
         "createInvitation": "Einladung erstellen",
+        "description": "Die einfache Authentifizierung verwendet ein Einladungssystem zur Erstellung von Benutzern. Du kannst eine Einladung erstellen und optional einen Benutzernamen oder eine E-Mail-Adresse für den Benutzer angeben. Daraufhin wird eine magische URL generiert, mit der ein Konto erstellt werden kann.",
+        "expires": "Läuft ab: {expiry}",
         "invitationTitle": "Einladungen",
         "invite3Days": "3 Tage",
         "invite6Months": "6 Monate",
         "inviteAdminSwitchDescription": "Erstelle diesen Benutzer als Administrator",
+        "inviteAdminSwitchLabel": "Admin Einladung",
         "inviteButton": "Einladung",
+        "inviteDescription": "Drop erstellt eine URL, die du an die Person senden kannst, die du einladen möchtest. Du kannst optional einen Benutzernamen oder eine E-Mail-Adresse angeben, die sie verwenden soll.",
+        "inviteEmailDescription": "Muss im Format nutzer{'@'}beispiel.de sein",
         "inviteEmailLabel": "E-Mail-Adresse (optional)",
+        "inviteEmailPlaceholder": "ich{'@'}beispiel.de",
+        "inviteExpiryLabel": "Läuft ab",
         "inviteMonth": "1 Monat",
         "inviteNever": "Niemals",
         "inviteTitle": "Ein Benutzer zu Drop einladen",
         "inviteUsernameFormat": "Muss mindestens 5 Zeichen lang sein",
         "inviteUsernameLabel": "Nutzername (optional)",
+        "inviteUsernamePlaceholder": "meinNutzername",
         "inviteWeek": "1 Woche",
         "inviteYear": "1 Jahr",
         "neverExpires": "Läuft niemals ab.",
@@ -476,5 +668,6 @@
       "srEditLabel": "Bearbeiten",
       "usernameHeader": "Nutzername"
     }
-  }
+  },
+  "welcome": "Deutsche, willkommen!"
 }

i18n/locales/en_pirate.json

@@ -19,7 +19,7 @@
       "title": "Messages from the Crows' Nest",
       "unread": "Unread Messages"
     },
-    "settings": "Settings, savvy?",
+    "settings": "Settings",
     "title": "Yer Own Coffer"
   },
   "actions": "Deeds",

i18n/locales/en_us.json

@@ -19,6 +19,28 @@
       "title": "Notifications",
       "unread": "Unread Notifications"
     },
+    "token": {
+      "title": "API Tokens",
+      "subheader": "Manage your API tokens, and what they can access.",
+      "name": "API token name",
+      "nameDesc": "The name of the token, for reference.",
+      "namePlaceholder": "My New Token",
+      "acls": "ACLs/scopes",
+      "aclsDesc": "Defines what this token has the authority to do. You should avoid selecting all ACLs, if they are not necessary.",
+      "expiry": "Expiry",
+      "noExpiry": "No expiry",
+      "revoke": "Revoke",
+      "noTokens": "No tokens connected to your account.",
+
+      "expiryMonth": "A month",
+      "expiry3Month": "3 months",
+      "expiry6Month": "6 months",
+      "expiryYear": "A year",
+      "expiry5Year": "5 years",
+
+      "success": "Successfully created token.",
+      "successNote": "Make sure to copy it now, as it won't be shown again."
+    },
     "settings": "Settings",
     "title": "Account Settings"
   },
@@ -95,7 +117,9 @@
     "servers": "Servers",
     "srLoading": "Loading…",
     "tags": "Tags",
-    "today": "Today"
+    "today": "Today",
+    "labelValueColon": "{label}: {value}",
+    "noData": "No data"
   },
   "delete": "Delete",
   "drop": {
@@ -137,6 +161,10 @@
       "usernameTaken": "Username already taken."
     },
     "backHome": "{arrow} Back to home",
+    "externalUrl": {
+      "subtitle": "This message is only visible to admins.",
+      "title": "Accessing over different EXTERNAL_URL. Please check the docs."
+    },
     "game": {
       "banner": {
         "description": "Drop failed to update the banner image: {0}",
@@ -212,10 +240,6 @@
         "desc": "Drop encountered an error while updating the version: {error}",
         "title": "There an error while updating the version order"
       }
-    },
-    "externalUrl": {
-      "title": "Accessing over different EXTERNAL_URL. Please check the docs.",
-      "subtitle": "This message is only visible to admins."
     }
   },
   "footer": {
@@ -241,7 +265,13 @@
     "admin": {
       "admin": "Admin",
       "metadata": "Meta",
-      "settings": "Settings",
+      "settings": {
+        "title": "Settings",
+        "store": "Store",
+        "tokens": "API tokens"
+      },
+      "home": "Home",
+      "library": "Library",
       "tasks": "Tasks",
       "users": "Users"
     },
@@ -250,7 +280,24 @@
   },
   "helpUsTranslate": "Help us translate Drop {arrow}",
   "highest": "highest",
-  "home": "Home",
+  "home": {
+    "admin": {
+      "title": "Home",
+      "subheader": "Instance summary",
+      "games": "Games",
+      "librarySources": "Library sources",
+      "version": "Version",
+      "activeInactiveUsers": "Active/inactive users",
+      "activeUsers": "Active users",
+      "inactiveUsers": "Inactive users",
+      "goToUsers": "Go to users",
+      "users": "Users",
+      "biggestGamesToDownload": "Biggest games to download",
+      "latestVersionOnly": "Latest version only",
+      "biggestGamesOnServer": "Biggest games on server",
+      "allVersionsCombined": "All versions combined"
+    }
+  },
   "library": {
     "addGames": "All Games",
     "addToLib": "Add to Library",
@@ -266,6 +313,7 @@
         "deleteImage": "Delete image",
         "editGameDescription": "Game Description",
         "editGameName": "Game Name",
+        "editReleaseDate": "Release Date",
         "imageCarousel": "Image Carousel",
         "imageCarouselDescription": "Customise what images and what order are shown on the store page.",
         "imageCarouselEmpty": "No images added to the carousel yet.",
@@ -327,6 +375,7 @@
           "description": "Companies organize games by who they were developed or published by.",
           "editor": {
             "action": "Add Game {plus}",
+            "descriptionPlaceholder": "{'<'}description{'>'}",
             "developed": "Developed",
             "libraryDescription": "Add, remove, or customise what this company has developed and/or published.",
             "libraryTitle": "Game Library",
@@ -334,25 +383,23 @@
             "published": "Published",
             "uploadBanner": "Upload banner",
             "uploadIcon": "Upload icon",
-            "descriptionPlaceholder": "{'<'}description{'>'}",
             "websitePlaceholder": "{'<'}website{'>'}"
           },
           "modals": {
+            "createDescription": "Create a company to further organize your games.",
+            "createFieldDescription": "Company Description",
+            "createFieldDescriptionPlaceholder": "A small indie studio that...",
+            "createFieldName": "Company Name",
+            "createFieldNamePlaceholder": "My New Company...",
+            "createFieldWebsite": "Company Website",
+            "createFieldWebsitePlaceholder": "https://example.com/",
+            "createTitle": "Create a company",
             "nameDescription": "Edit the company's name. Used to match to new game imports.",
             "nameTitle": "Edit company name",
             "shortDeckDescription": "Edit the company's description. Doesn't affect long (markdown) description.",
             "shortDeckTitle": "Edit company description",
             "websiteDescription": "Edit the company's website. Note: this will be a link, and won't have redirect protection.",
-            "websiteTitle": "Edit company website",
-
-            "createTitle": "Create a company",
-            "createDescription": "Create a company to further organize your games.",
-            "createFieldName": "Company Name",
-            "createFieldNamePlaceholder": "My New Company...",
-            "createFieldDescription": "Company Description",
-            "createFieldDescriptionPlaceholder": "A small indie studio that...",
-            "createFieldWebsite": "Company Website",
-            "createFieldWebsitePlaceholder": "https://example.com/"
+            "websiteTitle": "Edit company website"
           },
           "noCompanies": "No companies",
           "noGames": "No games",
@@ -373,6 +420,8 @@
       },
       "metadataProvider": "Metadata provider",
       "noGames": "No games imported",
+      "libraryHint": "No libraries configured.",
+      "libraryHintDocsLink": "What does this mean? {arrow}",
       "offline": "Drop couldn't access this game.",
       "offlineTitle": "Game offline",
       "openEditor": "Open in Editor {arrow}",
@@ -382,18 +431,25 @@
         "create": "Create source",
         "createDesc": "Drop will use this source to access your game library, and make them available.",
         "desc": "Configure your library sources, where Drop will look for new games and versions to import.",
+        "documentationLink": "Documentation {arrow}",
         "edit": "Edit source",
         "fsDesc": "Imports games from a path on disk. Requires version-based folder structure, and supports archived games.",
         "fsFlatDesc": "Imports games from a path on disk, but without a separate version subfolder. Useful when migrating an existing library to Drop.",
+        "fsFlatTitle": "Compatibility",
         "fsPath": "Path",
         "fsPathDesc": "An absolute path to your game library.",
         "fsPathPlaceholder": "/mnt/games",
+        "fsTitle": "Drop-style",
         "link": "Sources {arrow}",
         "nameDesc": "The name of your source, for reference.",
         "namePlaceholder": "My New Source",
         "sources": "Library Sources",
         "typeDesc": "The type of your source. Changes the required options.",
-        "working": "Working?"
+        "working": "Working?",
+        "freeSpace": "Free space",
+        "totalSpace": "Total space",
+        "utilizationPercentage": "Utilization percentage",
+        "percentage": "{number}%"
       },
       "subheader": "As you add folders to your library sources, Drop will detect it and prompt you to import it. Each game needs to be imported before you can import a version.",
       "title": "Libraries",
@@ -514,15 +570,16 @@
     "images": "Game Images",
     "lookAt": "Check it out",
     "noDevelopers": "No developers",
-    "noGame": "NO GAME",
     "noFeatured": "NO FEATURED GAMES",
-    "openFeatured": "Star games in Admin Library {arrow}",
+    "noGame": "NO GAME",
     "noImages": "No images",
     "noPublishers": "No publishers.",
     "noTags": "No tags",
     "openAdminDashboard": "Open in Admin Dashboard",
+    "openFeatured": "Star games in Admin Library {arrow}",
     "platform": "Platform | Platform | Platforms",
     "publishers": "Publishers | Publisher | Publishers",
+    "size": "Size",
     "rating": "Rating",
     "readLess": "Click to read less",
     "readMore": "Click to read more",
@@ -560,7 +617,9 @@
         "cleanupSessionsName": "Clean up sessions."
       },
       "viewTask": "View {arrow}",
-      "weeklyScheduledTitle": "Weekly scheduled tasks"
+      "weeklyScheduledTitle": "Weekly scheduled tasks",
+      "progress": "{0}%",
+      "execute": "{arrow} Execute"
     }
   },
   "title": "Drop",
@@ -585,7 +644,6 @@
     "admin": {
       "adminHeader": "Admin?",
       "adminUserLabel": "Admin user",
-      "authLink": "Authentication {arrow}",
       "authentication": {
         "configure": "Configure",
         "description": "Drop supports a variety of \"authentication mechanisms\". As you enable or disable them, they are shown on the sign in screen for users to select from. Click the dot menu to configure the authentication mechanism.",
@@ -597,6 +655,7 @@
         "srOpenOptions": "Open options",
         "title": "Authentication"
       },
+      "authLink": "Authentication {arrow}",
       "authoptionsHeader": "Auth Options",
       "delete": "Delete",
       "deleteUser": "Delete user {0}",
@@ -609,7 +668,7 @@
         "createInvitation": "Create invitation",
         "description": "Simple authentication uses a system of 'invitations' to create users. You can create an invitation, and optionally specify a username or email for the user, and then it will generate a magic URL that can be used to create an account.",
         "expires": "Expires: {expiry}",
-        "invitationTitle": "invitations",
+        "invitationTitle": "Invitations",
         "invite3Days": "3 days",
         "invite6Months": "6 months",
         "inviteAdminSwitchDescription": "Create this user as an administrator",

i18n/locales/fr.json

@@ -1,6 +1,8 @@
 {
   "account": {
     "devices": {
+      "capabilities": "Capacités",
+      "lastConnected": "Dernière Connexion",
       "noDevices": "Aucun appareil n'est connecté à vôtre compte.",
       "platform": "Plateforme",
       "revoke": "Révoquer",
@@ -12,13 +14,33 @@
       "desc": "Voir et gérer vos notifications.",
       "markAllAsRead": "Tout marqué comme lu",
       "markAsRead": "Marquer comme lu",
-      "none": "Pas de notifications",
+      "none": "Pas de notification",
       "notifications": "Notifications",
       "title": "Notifications",
-      "unread": "Notifications non lues"
+      "unread": "Notifications Non Lues"
     },
     "settings": "Paramètres",
-    "title": "Paramètres du compte"
+    "title": "Paramètres du Compte",
+    "token": {
+      "acls": "ACLs/scopes",
+      "aclsDesc": "Définir les permissions du Token. Il n'est pas recommandé de sélectionner toutes les ACLs, à moins que ce soit nécessaire.",
+      "expiry": "Expiration",
+      "expiry3Month": "3 mois",
+      "expiry5Year": "5 Années",
+      "expiry6Month": "6 mois",
+      "expiryMonth": "Un mois",
+      "expiryYear": "Une année",
+      "name": "Nom du Token API",
+      "nameDesc": "Le nom du Token, comme référence.",
+      "namePlaceholder": "Mon nouveau Token",
+      "noExpiry": "Pas d'expiration",
+      "noTokens": "Aucun Token connecté à votre compte.",
+      "revoke": "Révoquer",
+      "subheader": "Gérer vos Tokens et leurs permissions associées.",
+      "success": "Token créé avec succès.",
+      "successNote": "Assurez vous de le sauvegarder maintenant, il ne sera plus disponible après.",
+      "title": "API Tokens"
+    }
   },
   "actions": "Actions",
   "add": "Ajouter",
@@ -31,7 +53,7 @@
       "authorizedClient": "Drop a réussi a autoriser le client. Vous pouvez fermer cette fenêtre.",
       "issues": "Vous avez des problèmes ?",
       "learn": "En savoir plus {arrow}",
-      "paste": "Coller ce code dans le client pour continuer :",
+      "paste": "Collez ce code dans le client pour continuer :",
       "permWarning": "Accepter cette requête autorisera \"{name}\" sur \"{plateform} à :",
       "requestedAccess": "\"{name} a demandé accès à votre compte Drop.",
       "success": "Réussi !"
@@ -54,7 +76,7 @@
     "signin": {
       "externalProvider": "Connectez vous avec un fournisseur externe {arrow}",
       "forgot": "Mot de passe oublié ?",
-      "noAccount": "Pas de compte ? Demande à un administrateur d'en créer un pour toi.",
+      "noAccount": "Pas de compte ? Demandez à un administrateur d'en créer un pour vous.",
       "or": "OU",
       "pageTitle": "Se connecter à Drop",
       "rememberMe": "Se souvenir de moi",
@@ -109,6 +131,7 @@
     "italic": "Italique",
     "italicPlaceholder": "texte italique",
     "link": "Lien",
+    "linkPlaceholder": "texte du lien",
     "listItem": "Élement de liste",
     "listItemPlaceholder": "élément de liste"
   },
@@ -570,6 +593,7 @@
         "srOpenOptions": "Ouvrir les options",
         "title": "Authentification"
       },
+      "authoptionsHeader": "Options Auth",
       "delete": "Supprimer",
       "deleteUser": "Supprimer l'utilisateur {0}",
       "description": "Gérer les utilisateurs sur votre instance Drop, et configurer vos méthodes d'authentification.",

i18n/locales/ru.json

@@ -5,6 +5,7 @@
       "lastConnected": "Последнее подключение",
       "noDevices": "К вашей учетной записи не подключено ни одного устройства.",
       "platform": "Платформа",
+      "revoke": "Аннулировать",
       "subheader": "Управляйте устройствами, имеющими доступ к вашей учетной записи Drop.",
       "title": "Устройства"
     },
@@ -19,7 +20,27 @@
       "unread": "Непрочитанные уведомления"
     },
     "settings": "Настройки",
-    "title": "Настройки учетной записи"
+    "title": "Настройки учетной записи",
+    "token": {
+      "acls": "Доступ и права",
+      "aclsDesc": "Определяет, какие действия разрешены для этого токена. Не выбирайте все ACL, если это не требуется.",
+      "expiry": "Истечение срока",
+      "expiry3Month": "3 месяца",
+      "expiry5Year": "5 лет",
+      "expiry6Month": "6 месяцев",
+      "expiryMonth": "Месяц",
+      "expiryYear": "Год",
+      "name": "Название API-токена",
+      "nameDesc": "Название токена для справки.",
+      "namePlaceholder": "Мои новые токены",
+      "noExpiry": "Без срока действия",
+      "noTokens": "На вашем аккаунте нет подключённых токенов.",
+      "revoke": "Аннулировать",
+      "subheader": "Управляйте своими API-токенами и их доступом.",
+      "success": "Токен успешно создан.",
+      "successNote": "Скопируйте токен сейчас, позже его не будет видно.",
+      "title": "API-Токены"
+    }
   },
   "actions": "Действия",
   "add": "Добавить",
@@ -34,7 +55,50 @@
       "learn": "Узнать больше {arrow}",
       "paste": "Вставьте этот код в клиент, чтобы продолжить:",
       "permWarning": "Принятие этого запроса позволит \"{name}\" на \"{platform}\" выполнять следующие действия:",
-      "requestedAccess": "\"{name}\" запросил доступ к вашей учетной записи Drop."
-    }
+      "requestedAccess": "\"{name}\" запросил доступ к вашей учетной записи Drop.",
+      "success": "Успешно!"
+    },
+    "email": "Элетронная почка",
+    "password": "Пароль",
+    "register": {
+      "confirmPasswordFormat": "Должно совпадать с выше."
+    },
+    "signin": {
+      "forgot": "Забыли пароль?",
+      "noAccount": "Нет аккаунта? Попросите администратора создать его для вас.",
+      "or": "Или",
+      "signin": "Войти",
+      "title": "Войдите в свой аккаунт"
+    },
+    "signout": "Выход",
+    "username": "Имя пользователя"
+  },
+  "cancel": "Отмена",
+  "common": {
+    "add": "Добавить",
+    "close": "Закрыть",
+    "create": "Создать",
+    "date": "Дата",
+    "deleteConfirm": "Вы точно хотите удалить \"{0}\"?",
+    "edit": "Редактировать",
+    "friends": "Друзья",
+    "groups": "Группы",
+    "name": "Имя",
+    "noResults": "Нет результатов",
+    "noSelected": "Не выбранные предметы.",
+    "remove": "Удалить",
+    "save": "Сохранить",
+    "saved": "Сохранено",
+    "servers": "Сервера",
+    "srLoading": "Загрузка…",
+    "tags": "Теги",
+    "today": "Сегодня"
+  },
+  "delete": "Удалить",
+  "drop": {
+    "drop": "Уронить"
+  },
+  "editor": {
+    "link": "Ссылка"
   }
 }

layouts/admin.vue

@@ -174,9 +174,14 @@ import { XMarkIcon } from "@heroicons/vue/24/solid";
 const i18nHead = useLocaleHead();
 
 const navigation: Array<NavigationItem & { icon: Component }> = [
-  { label: $t("home"), route: "/admin", prefix: "/admin", icon: HomeIcon },
   {
-    label: $t("userHeader.links.library"),
+    label: $t("header.admin.home"),
+    route: "/admin",
+    prefix: "/admin",
+    icon: HomeIcon,
+  },
+  {
+    label: $t("header.admin.library"),
     route: "/admin/library",
     prefix: "/admin/library",
     icon: ServerStackIcon,
@@ -200,7 +205,7 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
     icon: RectangleStackIcon,
   },
   {
-    label: $t("header.admin.settings"),
+    label: $t("header.admin.settings.title"),
     route: "/admin/settings",
     prefix: "/admin/settings",
     icon: Cog6ToothIcon,

nuxt.config.ts

@@ -74,7 +74,8 @@ export default defineNuxtConfig({
 
   vite: {
     plugins: [
-      tailwindcss(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      tailwindcss() as any,
       // only used in dev server, not build because nitro sucks
       // see build hook below
       viteStaticCopy({
@@ -84,7 +85,8 @@ export default defineNuxtConfig({
             dest: "twemoji",
           },
         ],
-      }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }) as any,
     ],
   },
 
@@ -254,6 +256,7 @@ export default defineNuxtConfig({
           "https://www.giantbomb.com",
           "https://images.pcgamingwiki.com",
           "https://images.igdb.com",
+          "https://*.steamstatic.com",
         ],
       },
       strictTransportSecurity: false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drop",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "private": true,
   "type": "module",
   "license": "AGPL-3.0-or-later",
@@ -14,14 +14,14 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare && prisma generate",
     "typecheck": "nuxt typecheck",
-    "lint": "yarn lint:eslint && yarn lint:prettier",
+    "lint": "pnpm run lint:eslint && pnpm run lint:prettier",
     "lint:eslint": "eslint .",
     "lint:prettier": "prettier . --check",
     "lint:fix": "eslint . --fix && prettier --write --list-different ."
   },
   "dependencies": {
     "@discordapp/twemoji": "^16.0.1",
-    "@drop-oss/droplet": "2.3.0",
+    "@drop-oss/droplet": "3.2.0",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
     "@lobomfz/prismark": "0.0.3",
@@ -33,7 +33,7 @@
     "@vueuse/nuxt": "13.6.0",
     "argon2": "^0.43.0",
     "arktype": "^2.1.10",
-    "axios": "^1.7.7",
+    "axios": "^1.12.0",
     "bcryptjs": "^3.0.2",
     "cheerio": "^1.0.0",
     "cookie-es": "^2.0.0",
@@ -53,7 +53,7 @@
     "stream-mime-type": "^2.0.0",
     "turndown": "^7.2.0",
     "unstorage": "^1.15.0",
-    "vite-plugin-static-copy": "^3.0.0",
+    "vite-plugin-static-copy": "^3.1.2",
     "vue": "latest",
     "vue-router": "latest",
     "vue3-carousel": "^0.16.0",
@@ -89,5 +89,6 @@
   },
   "prisma": {
     "schema": "./prisma"
-  }
+  },
+  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
 }

pages/account/tokens.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div class="w-full flex justify-between items-center">
+      <div>
+        <h2
+          class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+        >
+          {{ $t("account.token.title") }}
+        </h2>
+        <p
+          class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
+        >
+          {{ $t("account.token.subheader") }}
+        </p>
+      </div>
+      <div>
+        <LoadingButton :loading="false" @click="() => (createOpen = true)">
+          {{ $t("common.create") }}
+        </LoadingButton>
+      </div>
+    </div>
+
+    <div
+      v-if="newToken"
+      class="mt-4 rounded-md p-4 bg-green-500/10 outline outline-green-500/20"
+    >
+      <div class="flex">
+        <div class="shrink-0">
+          <CheckCircleIcon class="size-5 text-green-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <p class="text-sm font-medium text-green-300">
+            {{ $t("account.token.success") }}
+          </p>
+          <p class="text-xs text-green-300/70">
+            {{ $t("account.token.successNote") }}
+          </p>
+          <p
+            class="mt-2 bg-zinc-950 px-3 py-2 font-mono text-zinc-400 rounded-xl"
+          >
+            {{ newToken }}
+          </p>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <button
+              type="button"
+              class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus-visible:ring-2 focus-visible:ring-green-600 focus-visible:ring-offset-2 focus-visible:ring-offset-green-50 focus-visible:outline-hidden dark:bg-transparent dark:text-green-400 dark:hover:bg-green-500/10 dark:focus-visible:ring-green-500 dark:focus-visible:ring-offset-1 dark:focus-visible:ring-offset-green-900"
+              @click="() => (newToken = undefined)"
+            >
+              <span class="sr-only">{{ $t("common.close") }}</span>
+              <XMarkIcon class="size-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="mt-8 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm"
+    >
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-zinc-800">
+          <thead>
+            <tr class="bg-zinc-800/50">
+              <th
+                scope="col"
+                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
+              >
+                {{ $t("common.name") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.acls") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.expiry") }}
+              </th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">{{ $t("actions") }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-800">
+            <tr
+              v-for="(token, tokenIdx) in tokens"
+              :key="token.id"
+              class="transition-colors duration-150 hover:bg-zinc-800/50"
+            >
+              <td
+                class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
+              >
+                {{ token.name }}
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <div class="flex flex-wrap gap-2">
+                  <span
+                    v-for="acl in token.acls"
+                    :key="acl"
+                    class="inline-flex items-center gap-x-1 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20"
+                  >
+                    {{ acl }}
+                  </span>
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <RelativeTime v-if="token.expiresAt" :date="token.expiresAt" />
+                <span v-else>{{ $t("account.token.noExpiry") }}</span>
+              </td>
+              <td
+                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
+              >
+                <button
+                  class="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
+                  @click="() => revokeToken(tokenIdx)"
+                >
+                  {{ $t("account.token.revoke") }}
+                  <span class="sr-only">
+                    {{ $t("chars.srComma", [token.name]) }}
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="tokens.length === 0">
+              <td colspan="5" class="py-8 text-center text-sm text-zinc-400">
+                {{ $t("account.token.noTokens") }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <ModalCreateToken
+      v-model="createOpen"
+      :acls="acls"
+      :loading="createLoading"
+      :suggested-name="suggestedName"
+      :suggested-acls="suggestedAcls"
+      @create="(name, acls, expiry) => createToken(name, acls, expiry)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArkErrors, type } from "arktype";
+import { DateTime, type DurationLike } from "luxon";
+import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/20/solid";
+
+const tokens = ref(await $dropFetch("/api/v1/user/token"));
+const acls = await $dropFetch("/api/v1/user/token/acls");
+
+const createOpen = ref(false);
+const createLoading = ref(false);
+
+const newToken = ref<string | undefined>();
+
+const suggestedName = ref();
+const suggestedAcls = ref<string[]>([]);
+
+const payloadParser = type({
+  name: "string?",
+  acls: "string[]?",
+});
+
+const route = useRoute();
+if (route.query.payload) {
+  try {
+    const rawPayload = JSON.parse(atob(route.query.payload.toString()));
+    const payload = payloadParser(rawPayload);
+    if (payload instanceof ArkErrors) throw payload;
+    suggestedName.value = payload.name;
+    suggestedAcls.value = payload.acls ?? [];
+    createOpen.value = true;
+  } catch {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Failed to parse the token create payload.",
+      fatal: true,
+    });
+  }
+}
+
+async function createToken(
+  name: string,
+  acls: string[],
+  expiry: DurationLike | undefined,
+) {
+  createLoading.value = true;
+  try {
+    const result = await $dropFetch("/api/v1/user/token", {
+      method: "POST",
+      body: {
+        name,
+        acls,
+        expiry: expiry ? DateTime.now().plus(expiry) : undefined,
+      },
+      failTitle: "Failed to create API token.",
+    });
+    console.log(result);
+    newToken.value = result.token;
+    tokens.value.push(result);
+  } finally {
+    /* empty */
+  }
+  createOpen.value = false;
+  createLoading.value = false;
+}
+
+async function revokeToken(index: number) {
+  const token = tokens.value[index];
+  if (!token) return;
+
+  await $dropFetch("/api/v1/user/token/:id", {
+    method: "DELETE",
+    params: {
+      id: token.id,
+    },
+    failTitle: "Failed to revoke token.",
+  });
+
+  tokens.value.splice(index, 1);
+}
+</script>

pages/admin/index.vue

@@ -1,6 +1,147 @@
-<template><div /></template>
+<template>
+  <div class="space-y-4">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-2xl font-semibold text-zinc-100">
+          {{ t("home.admin.title") }}
+        </h1>
+        <p class="mt-2 text-base text-zinc-400">
+          {{ t("home.admin.subheader") }}
+        </p>
+      </div>
+    </div>
+    <main
+      class="mx-auto max-w-md lg:max-w-none md:max-w-none w-full py-2 text-zinc-100"
+    >
+      <div class="grid grid-cols-6 gap-4">
+        <div class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1">
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <DropLogo />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-2xl flex-1 font-bold">{{ version }}</div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.version") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div class="col-span-6 lg:col-span-1 md:col-span-3">
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <GamepadIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">{{ gameCount }}</div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.games") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div
+          class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-1 lg:row-start-2"
+        >
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <ServerStackIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ sources.length }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.librarySources") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div
+          class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-2 lg:row-start-2"
+        >
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <UserGroupIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ userStats.userCount }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.users") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">
+          <TileWithLink
+            :link="{
+              url: '/admin/users',
+              label: t('home.admin.goToUsers'),
+            }"
+            :title="t('home.admin.activeInactiveUsers')"
+          >
+            <PieChart :data="pieChartData" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6">
+          <TileWithLink
+            title="Library"
+            :link="{ url: '/admin/library', label: 'Go to library' }"
+          >
+            <SourceTable :sources="sources" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6 lg:col-span-2">
+          <TileWithLink
+            :title="t('home.admin.biggestGamesToDownload')"
+            :subtitle="t('home.admin.latestVersionOnly')"
+          >
+            <RankingList :items="biggestGamesLatest.map(gameToRankItem)" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6 lg:col-span-2">
+          <TileWithLink
+            :title="t('home.admin.biggestGamesOnServer')"
+            :subtitle="t('home.admin.allVersionsCombined')"
+          >
+            <RankingList :items="biggestGamesCombined.map(gameToRankItem)" />
+          </TileWithLink>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
 
 <script setup lang="ts">
+import { formatBytes } from "~/server/internal/utils/files";
+import GamepadIcon from "~/components/Icons/GamepadIcon.vue";
+import DropLogo from "~/components/DropLogo.vue";
+import { ServerStackIcon, UserGroupIcon } from "@heroicons/vue/24/outline";
+import type { GameSize } from "~/server/internal/gamesize";
+import type { RankItem } from "~/components/RankingList.vue";
+
 definePageMeta({
   layout: "admin",
 });
@@ -8,4 +149,29 @@ definePageMeta({
 useHead({
   title: "Home",
 });
+
+const { t } = useI18n();
+
+const {
+  version,
+  gameCount,
+  sources,
+  userStats,
+  biggestGamesLatest,
+  biggestGamesCombined,
+} = await $dropFetch("/api/v1/admin/home");
+
+const gameToRankItem = (game: GameSize, rank: number): RankItem => ({
+  rank: rank + 1,
+  name: game.gameName,
+  value: formatBytes(game.size),
+});
+
+const pieChartData = [
+  {
+    label: t("home.admin.inactiveUsers"),
+    value: userStats.userCount - userStats.activeSessions,
+  },
+  { label: t("home.admin.activeUsers"), value: userStats.activeSessions },
+];
 </script>

pages/admin/library/index.vue

@@ -242,11 +242,40 @@
         {{ $t("common.noResults") }}
       </p>
       <p
-        v-if="filteredLibraryGames.length == 0 && libraryGames.length == 0"
+        v-if="
+          filteredLibraryGames.length == 0 &&
+          libraryGames.length == 0 &&
+          libraryState.hasLibraries
+        "
         class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
       >
         {{ $t("library.admin.noGames") }}
       </p>
+      <p
+        v-else-if="!libraryState.hasLibraries"
+        class="flex flex-col gap-2 text-zinc-600 text-center col-span-4"
+      >
+        <span class="text-sm font-display font-bold uppercase">{{
+          $t("library.admin.libraryHint")
+        }}</span>
+
+        <NuxtLink
+          class="transition text-xs text-zinc-600 hover:underline hover:text-zinc-400"
+          href="https://docs.droposs.org/docs/library"
+          target="_blank"
+        >
+          <i18n-t
+            keypath="library.admin.libraryHintDocsLink"
+            tag="span"
+            scope="global"
+            class="inline-flex items-center gap-x-1"
+          >
+            <template #arrow>
+              <ArrowTopRightOnSquareIcon class="size-4" />
+            </template>
+          </i18n-t>
+        </NuxtLink>
+      </p>
     </ul>
   </div>
 </template>
@@ -256,7 +285,11 @@ import {
   ExclamationTriangleIcon,
   ExclamationCircleIcon,
 } from "@heroicons/vue/16/solid";
-import { InformationCircleIcon, StarIcon } from "@heroicons/vue/20/solid";
+import {
+  ArrowTopRightOnSquareIcon,
+  InformationCircleIcon,
+  StarIcon,
+} from "@heroicons/vue/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 
 const { t } = useI18n();

pages/admin/library/sources/index.vue

@@ -18,93 +18,12 @@
         </button>
       </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="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="relative py-3.5 pl-3 pr-4 sm:pr-3">
-                  <span class="sr-only">{{ $t("common.edit") }}</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(source, sourceIdx) in sources"
-                :key="source.id"
-                class="even:bg-zinc-800"
-              >
-                <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">
-                  {{ source.backend }}
-                </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="relative whitespace-nowrap py-4 pl-3 pr-3 text-right text-sm font-medium space-x-2"
-                >
-                  <button
-                    class="text-blue-500 hover:text-blue-400"
-                    @click="() => edit(sourceIdx)"
-                  >
-                    {{ $t("common.edit") }}
-                    <span class="sr-only">
-                      {{ $t("chars.srComma", [source.name]) }}
-                    </span>
-                  </button>
-
-                  <button
-                    class="text-red-500 hover:text-red-400"
-                    @click="() => deleteSource(sourceIdx)"
-                  >
-                    {{ $t("delete") }}
-                    <span class="sr-only">
-                      {{ $t("chars.srComma", [source.name]) }}
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+    <div class="mt-4 flow-root">
+      <SourceTable
+        :sources="sources"
+        :edit-source="edit"
+        :delete-source="deleteSource"
+      />
     </div>
 
     <ModalTemplate v-model="actionSourceOpen">
@@ -189,11 +108,34 @@
                         <RadioGroupLabel
                           as="span"
                           class="font-semibold text-zinc-100"
-                          >{{ source }}</RadioGroupLabel
+                          >{{ metadata.title }}
+                          <span class="ml-2 font-mono text-zinc-500 text-xs">{{
+                            source
+                          }}</span></RadioGroupLabel
+                        >
+                        <RadioGroupDescription
+                          as="span"
+                          class="text-zinc-400 text-xs"
                         >
-                        <RadioGroupDescription as="span" class="text-zinc-400">
                           {{ metadata.description }}
                         </RadioGroupDescription>
+                        <NuxtLink
+                          :href="metadata.docsLink"
+                          :external="true"
+                          target="_blank"
+                          class="mt-2 block w-fit rounded-md bg-blue-600 px-2 py-1 text-center text-xs 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"
+                        >
+                          <i18n-t
+                            keypath="library.admin.sources.documentationLink"
+                            tag="span"
+                            scope="global"
+                            class="inline-flex items-center gap-x-1"
+                          >
+                            <template #arrow>
+                              <ArrowTopRightOnSquareIcon class="size-4" />
+                            </template>
+                          </i18n-t>
+                        </NuxtLink>
                       </span>
                     </span>
                     <span
@@ -269,6 +211,7 @@
  */
 
 import {
+  DropLogo,
   SourceOptionsFilesystem,
   SourceOptionsFlatFilesystem,
 } from "#components";
@@ -279,8 +222,11 @@ import {
   RadioGroupLabel,
   RadioGroupOption,
 } from "@headlessui/vue";
-import { XCircleIcon } from "@heroicons/vue/20/solid";
-import { CheckIcon, DocumentIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import {
+  XCircleIcon,
+  ArrowTopRightOnSquareIcon,
+} from "@heroicons/vue/20/solid";
+import { BackwardIcon } from "@heroicons/vue/24/outline";
 import { FetchError } from "ofetch";
 import type { Component } from "vue";
 import type { LibraryBackend } from "~/prisma/client/enums";
@@ -324,17 +270,23 @@ const optionUIs: { [key in LibraryBackend]: Component } = {
 };
 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"),
-    icon: DocumentIcon,
+    docsLink: "https://docs.droposs.org/docs/library#drop-style",
+    icon: DropLogo,
   },
   FlatFilesystem: {
+    title: t("library.admin.sources.fsFlatTitle"),
     description: t("library.admin.sources.fsFlatDesc"),
-    icon: DocumentIcon,
+    docsLink: "https://docs.droposs.org/docs/library#flat-style-or-compat",
+    icon: BackwardIcon,
   },
 };
 const optionsMetadataIter = Object.entries(optionsMetadata);

pages/admin/settings.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col">
+    <!-- tabs-->
+    <div>
+      <div class="border-b border-gray-200 dark:border-white/10">
+        <nav class="-mb-px flex gap-x-2" aria-label="Tabs">
+          <NuxtLink
+            v-for="(tab, tabIdx) in navigation"
+            :key="tab.route"
+            :href="tab.route"
+            :class="[
+              currentNavigationIndex == tabIdx
+                ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300',
+              'group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium',
+            ]"
+            :aria-current="tab ? 'page' : undefined"
+          >
+            <component
+              :is="tab.icon"
+              :class="[
+                currentNavigationIndex == tabIdx
+                  ? 'text-blue-500 dark:text-blue-400'
+                  : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400',
+                'mr-2 -ml-0.5 size-5',
+              ]"
+              aria-hidden="true"
+            />
+            <span>{{ tab.label }}</span>
+          </NuxtLink>
+        </nav>
+      </div>
+    </div>
+    <!-- content -->
+    <div class="mt-4 grow flex">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  BuildingStorefrontIcon,
+  CodeBracketIcon,
+} from "@heroicons/vue/24/outline";
+
+const navigation: Array<NavigationItem & { icon: Component }> = [
+  {
+    label: $t("header.admin.settings.store"),
+    route: "/admin/settings",
+    prefix: "/admin/settings",
+    icon: BuildingStorefrontIcon,
+  },
+  {
+    label: $t("header.admin.settings.tokens"),
+    route: "/admin/settings/tokens",
+    prefix: "/admin/settings/tokens",
+    icon: CodeBracketIcon,
+  },
+];
+
+// const notifications = useNotifications();
+// const unreadNotifications = computed(() =>
+//   notifications.value.filter((e) => !e.read)
+// );
+
+const currentNavigationIndex = useCurrentNavigationIndex(navigation);
+</script>

pages/admin/settings/index.vue

@@ -1,68 +1,55 @@
 <template>
-  <div class="space-y-4">
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="text-2xl font-semibold text-zinc-100">
-          {{ $t("settings.admin.title") }}
-        </h1>
-        <p class="mt-2 text-base text-zinc-400">
-          {{ $t("settings.admin.description") }}
-        </p>
-      </div>
+  <form class="space-y-4" @submit.prevent="() => saveSettings()">
+    <div class="pb-4 border-b border-zinc-700">
+      <h2 class="text-xl font-semibold text-zinc-100">
+        {{ $t("settings.admin.store.title") }}
+      </h2>
+
+      <h3 class="text-base font-medium text-zinc-400 mb-3 m-x-0">
+        {{ $t("settings.admin.store.showGamePanelTextDecoration") }}
+      </h3>
+      <ul class="flex gap-3">
+        <li class="inline-block">
+          <OptionWrapper
+            :active="showGamePanelTextDecoration"
+            @click="setShowTitleDescription(true)"
+          >
+            <div class="flex">
+              <GamePanel
+                :animate="false"
+                :game="game"
+                :default-placeholder="true"
+              />
+            </div>
+          </OptionWrapper>
+        </li>
+        <li class="inline-block">
+          <OptionWrapper
+            :active="!showGamePanelTextDecoration"
+            @click="setShowTitleDescription(false)"
+          >
+            <div class="flex">
+              <GamePanel
+                :game="game"
+                :show-title-description="false"
+                :animate="false"
+                :default-placeholder="true"
+              />
+            </div>
+          </OptionWrapper>
+        </li>
+      </ul>
     </div>
 
-    <form class="space-y-4" @submit.prevent="() => saveSettings()">
-      <div class="py-6 border-y border-zinc-700">
-        <h2 class="text-xl font-semibold text-zinc-100">
-          {{ $t("settings.admin.store.title") }}
-        </h2>
-
-        <h3 class="text-base font-medium text-zinc-400 mb-3 m-x-0">
-          {{ $t("settings.admin.store.showGamePanelTextDecoration") }}
-        </h3>
-        <ul class="flex gap-3">
-          <li class="inline-block">
-            <OptionWrapper
-              :active="showGamePanelTextDecoration"
-              @click="setShowTitleDescription(true)"
-            >
-              <div class="flex">
-                <GamePanel
-                  :animate="false"
-                  :game="game"
-                  :default-placeholder="true"
-                />
-              </div>
-            </OptionWrapper>
-          </li>
-          <li class="inline-block">
-            <OptionWrapper
-              :active="!showGamePanelTextDecoration"
-              @click="setShowTitleDescription(false)"
-            >
-              <div class="flex">
-                <GamePanel
-                  :game="game"
-                  :show-title-description="false"
-                  :animate="false"
-                  :default-placeholder="true"
-                />
-              </div>
-            </OptionWrapper>
-          </li>
-        </ul>
-      </div>
-
-      <LoadingButton
-        type="submit"
-        class="inline-flex w-full shadow-sm sm:w-auto"
-        :loading="saving"
-        :disabled="!allowSave"
-      >
-        {{ allowSave ? $t("common.save") : $t("common.saved") }}
-      </LoadingButton>
-    </form>
-  </div>
+    <LoadingButton
+      type="submit"
+      class="inline-flex w-full shadow-sm sm:w-auto"
+      :loading="saving"
+      :disabled="!allowSave"
+    >
+      {{ allowSave ? $t("common.save") : $t("common.saved") }}
+    </LoadingButton>
+  </form>
 </template>
 
 <script setup lang="ts">

pages/admin/settings/tokens.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="w-full">
+    <div class="w-full flex justify-between items-center">
+      <div>
+        <h2
+          class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+        >
+          {{ $t("account.token.title") }}
+        </h2>
+        <p
+          class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
+        >
+          {{ $t("account.token.subheader") }}
+        </p>
+      </div>
+      <div>
+        <LoadingButton :loading="false" @click="() => (createOpen = true)">
+          {{ $t("common.create") }}
+        </LoadingButton>
+      </div>
+    </div>
+
+    <div
+      v-if="newToken"
+      class="mt-4 rounded-md p-4 bg-green-500/10 outline outline-green-500/20"
+    >
+      <div class="flex">
+        <div class="shrink-0">
+          <CheckCircleIcon class="size-5 text-green-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <p class="text-sm font-medium text-green-300">
+            {{ $t("account.token.success") }}
+          </p>
+          <p class="text-xs text-green-300/70">
+            {{ $t("account.token.successNote") }}
+          </p>
+          <p
+            class="mt-2 bg-zinc-950 px-3 py-2 font-mono text-zinc-400 rounded-xl"
+          >
+            {{ newToken }}
+          </p>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <button
+              type="button"
+              class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus-visible:ring-2 focus-visible:ring-green-600 focus-visible:ring-offset-2 focus-visible:ring-offset-green-50 focus-visible:outline-hidden dark:bg-transparent dark:text-green-400 dark:hover:bg-green-500/10 dark:focus-visible:ring-green-500 dark:focus-visible:ring-offset-1 dark:focus-visible:ring-offset-green-900"
+              @click="() => (newToken = undefined)"
+            >
+              <span class="sr-only">{{ $t("common.close") }}</span>
+              <XMarkIcon class="size-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="mt-8 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm"
+    >
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-zinc-800">
+          <thead>
+            <tr class="bg-zinc-800/50">
+              <th
+                scope="col"
+                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
+              >
+                {{ $t("common.name") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.acls") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.expiry") }}
+              </th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">{{ $t("actions") }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-800">
+            <tr
+              v-for="(token, tokenIdx) in tokens"
+              :key="token.id"
+              class="transition-colors duration-150 hover:bg-zinc-800/50"
+            >
+              <td
+                class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
+              >
+                {{ token.name }}
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <div class="flex flex-wrap gap-2">
+                  <span
+                    v-for="acl in token.acls"
+                    :key="acl"
+                    class="inline-flex items-center gap-x-1 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20"
+                  >
+                    {{ acl }}
+                  </span>
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <RelativeTime v-if="token.expiresAt" :date="token.expiresAt" />
+                <span v-else>{{ $t("account.token.noExpiry") }}</span>
+              </td>
+              <td
+                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
+              >
+                <button
+                  class="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
+                  @click="() => revokeToken(tokenIdx)"
+                >
+                  {{ $t("account.token.revoke") }}
+                  <span class="sr-only">
+                    {{ $t("chars.srComma", [token.name]) }}
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="tokens.length === 0">
+              <td colspan="5" class="py-8 text-center text-sm text-zinc-400">
+                {{ $t("account.token.noTokens") }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <ModalCreateToken
+      v-model="createOpen"
+      :acls="acls"
+      :loading="createLoading"
+      :suggested-name="suggestedName"
+      :suggested-acls="suggestedAcls"
+      @create="(name, acls, expiry) => createToken(name, acls, expiry)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArkErrors, type } from "arktype";
+import { DateTime, type DurationLike } from "luxon";
+import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/20/solid";
+
+definePageMeta({
+  layout: "admin",
+});
+
+const tokens = ref(await $dropFetch("/api/v1/admin/token"));
+const acls = await $dropFetch("/api/v1/admin/token/acls");
+
+const createOpen = ref(false);
+const createLoading = ref(false);
+
+const newToken = ref<string | undefined>();
+
+const suggestedName = ref();
+const suggestedAcls = ref<string[]>([]);
+
+const payloadParser = type({
+  name: "string?",
+  acls: "string[]?",
+});
+
+const route = useRoute();
+if (route.query.payload) {
+  try {
+    const rawPayload = JSON.parse(atob(route.query.payload.toString()));
+    const payload = payloadParser(rawPayload);
+    if (payload instanceof ArkErrors) throw payload;
+    suggestedName.value = payload.name;
+    suggestedAcls.value = payload.acls ?? [];
+    createOpen.value = true;
+  } catch {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Failed to parse the token create payload.",
+      fatal: true,
+    });
+  }
+}
+
+async function createToken(
+  name: string,
+  acls: string[],
+  expiry: DurationLike | undefined,
+) {
+  createLoading.value = true;
+  try {
+    const result = await $dropFetch("/api/v1/admin/token", {
+      method: "POST",
+      body: {
+        name,
+        acls,
+        expiry: expiry ? DateTime.now().plus(expiry) : undefined,
+      },
+      failTitle: "Failed to create API token.",
+    });
+    console.log(result);
+    newToken.value = result.token;
+    tokens.value.push(result);
+  } catch {
+    /* empty */
+  }
+  createOpen.value = false;
+  createLoading.value = false;
+}
+
+async function revokeToken(index: number) {
+  const token = tokens.value[index];
+  if (!token) return;
+
+  await $dropFetch("/api/v1/admin/token/:id", {
+    method: "DELETE",
+    params: {
+      id: token.id,
+    },
+    failTitle: "Failed to revoke token.",
+  });
+
+  tokens.value.splice(index, 1);
+}
+</script>

pages/admin/task/[id]/index.vue

@@ -44,20 +44,16 @@
         </div>
         {{ task.name }}
       </h1>
-      <div class="h-2 rounded-full bg-zinc-950 overflow-hidden">
-        <div
-          :style="{ width: `${task.progress}%` }"
-          class="transition-all bg-blue-600 h-full"
+      <div
+        class="bg-zinc-950 p-2 rounded-md h-[80vh] flex flex-col flex-col-reverse overflow-y-scroll gap-y-1"
+      >
+        <LogLine
+          v-for="(_, idx) in task.log"
+          :key="idx"
+          :log="parseTaskLog(task.log.at(-(idx + 1)))"
         />
       </div>
-
-      <div
-        class="relative bg-zinc-950/50 rounded-md p-2 text-zinc-100 h-[80vh] overflow-y-scroll"
-      >
-        <pre v-for="(line, idx) in task.log" :key="idx">{{
-          formatLine(line)
-        }}</pre>
-      </div>
+      <ProgressBar :percentage="task.progress" />
     </div>
     <div v-else role="status" class="w-full flex items-center justify-center">
       <svg
@@ -90,11 +86,6 @@ const taskId = route.params.id.toString();
 
 const task = useTask(taskId);
 
-function formatLine(line: string): string {
-  const res = parseTaskLog(line);
-  return `[${res.timestamp}] ${res.message}`;
-}
-
 definePageMeta({
   layout: "admin",
 });

pages/admin/task/index.vue

@@ -13,62 +13,7 @@
           :key="task.value?.id"
           class="col-span-1 divide-y divide-gray-200 rounded-lg bg-zinc-800 border border-zinc-700 shadow-sm"
         >
-          <div
-            v-if="task.value"
-            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-2">
-                <div>
-                  <CheckIcon
-                    v-if="task.value.success"
-                    class="size-4 text-green-600"
-                  />
-                  <XMarkIcon
-                    v-else-if="task.value.error"
-                    class="size-4 text-red-600"
-                  />
-                  <div
-                    v-else
-                    class="size-2 bg-blue-600 rounded-full animate-pulse"
-                  />
-                </div>
-                <h3 class="truncate text-sm font-medium text-zinc-100">
-                  {{ task.value.name }}
-                </h3>
-              </div>
-              <p class="text-xs text-zinc-600 mt-0.5 font-mono">
-                {{ task.value.id }}
-              </p>
-              <div class="mt-1 w-full rounded-full overflow-hidden bg-zinc-900">
-                <div
-                  :style="{ width: `${task.value.progress}%` }"
-                  class="bg-blue-600 h-1.5 transition-all"
-                />
-              </div>
-              <p class="mt-1 truncate text-sm text-zinc-400">
-                {{ parseTaskLog(task.value.log.at(-1)).message }}
-              </p>
-              <NuxtLink
-                type="button"
-                :href="`/admin/task/${task.value.id}`"
-                class="mt-3 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>
+          <TaskWidget :task="task.value" :active="true" />
         </li>
       </ul>
       <div
@@ -89,51 +34,7 @@
             :key="task.id"
             class="col-span-1 divide-y divide-gray-200 rounded-lg bg-zinc-800 border border-zinc-700 shadow-sm"
           >
-            <div 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-2">
-                  <div>
-                    <CheckIcon
-                      v-if="task.success"
-                      class="size-4 text-green-600"
-                    />
-                    <XMarkIcon
-                      v-else-if="task.error"
-                      class="size-4 text-red-600"
-                    />
-                    <div
-                      v-else
-                      class="size-2 bg-blue-600 rounded-full animate-pulse"
-                    />
-                  </div>
-                  <h3 class="truncate text-sm font-medium text-zinc-100">
-                    {{ task.name }}
-                  </h3>
-                  <RelativeTime class="text-zinc-500" :date="task.ended" />
-                </div>
-                <p class="text-xs text-zinc-600 mt-0.5 font-mono">
-                  {{ task.id }}
-                </p>
-                <p class="mt-1 truncate text-sm text-zinc-400">
-                  {{ parseTaskLog(task.log.at(-1)).message }}
-                </p>
-                <NuxtLink
-                  type="button"
-                  :href="`/admin/task/${task.id}`"
-                  class="mt-3 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>
+            <TaskWidget :task="task" />
           </li>
         </ul>
       </div>
@@ -157,6 +58,21 @@
                 <p class="mt-1 text-sm text-zinc-400">
                   {{ scheduledTasks[task].description }}
                 </p>
+                <button
+                  class="mt-3 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"
+                  @click="() => startTask(task)"
+                >
+                  <i18n-t
+                    keypath="tasks.admin.execute"
+                    tag="span"
+                    scope="global"
+                    class="inline-flex items-center gap-x-1"
+                  >
+                    <template #arrow>
+                      <PlayIcon class="size-4" aria-hidden="true" />
+                    </template>
+                  </i18n-t>
+                </button>
               </div>
             </div>
           </li>
@@ -180,6 +96,21 @@
                 <p class="mt-1 text-sm text-zinc-400">
                   {{ scheduledTasks[task].description }}
                 </p>
+                <button
+                  class="mt-3 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"
+                  @click="() => startTask(task)"
+                >
+                  <i18n-t
+                    keypath="tasks.admin.execute"
+                    tag="span"
+                    scope="global"
+                    class="inline-flex items-center gap-x-1"
+                  >
+                    <template #arrow>
+                      <PlayIcon class="size-4" aria-hidden="true" />
+                    </template>
+                  </i18n-t>
+                </button>
               </div>
             </div>
           </li>
@@ -189,7 +120,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { PlayIcon } from "@heroicons/vue/24/outline";
 import type { TaskGroup } from "~/server/internal/tasks/group";
 
 useHead({
@@ -205,7 +136,9 @@ const { t } = useI18n();
 const { runningTasks, historicalTasks, dailyTasks, weeklyTasks } =
   await $dropFetch("/api/v1/admin/task");
 
-const liveRunningTasks = await Promise.all(runningTasks.map((e) => useTask(e)));
+const liveRunningTasks = ref(
+  await Promise.all(runningTasks.map((e) => useTask(e))),
+);
 
 const scheduledTasks: {
   [key in TaskGroup]: { name: string; description: string };
@@ -230,5 +163,19 @@ const scheduledTasks: {
     name: "",
     description: "",
   },
+  debug: {
+    name: "Debug Task",
+    description: "Does debugging things.",
+  },
 };
+
+async function startTask(taskGroup: string) {
+  const task = await $dropFetch("/api/v1/admin/task", {
+    method: "POST",
+    body: { taskGroup },
+    failTitle: "Failed to start task",
+  });
+  const taskRef = await useTask(task.id);
+  liveRunningTasks.value.push(taskRef);
+}
 </script>

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

@@ -72,7 +72,7 @@
                 {{ $t("store.images") }}
               </h2>
               <div class="relative">
-                <VueCarousel :items-to-show="1">
+                <VueCarousel :items-to-show="1" :wrap-around="true">
                   <VueSlide
                     v-for="image in game.mImageCarouselObjectIds"
                     :key="image"

pages/store/[id]/index.vue

@@ -86,6 +86,27 @@
                   >
                 </td>
               </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  {{ $t("store.size") }}
+                </td>
+                <td
+                  v-if="size"
+                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
+                >
+                  {{ formatBytes(size) }}
+                </td>
+                <td
+                  v-else
+                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400 italic"
+                >
+                  <span class="font-semibold text-blue-600">{{
+                    $t("store.commingSoon")
+                  }}</span>
+                </td>
+              </tr>
               <tr>
                 <td
                   class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
@@ -183,7 +204,7 @@
             {{ game.mShortDescription }}
           </p>
           <div class="mt-6 py-4 rounded">
-            <VueCarousel :items-to-show="1">
+            <VueCarousel :items-to-show="1" :wrap-around="true">
               <VueSlide
                 v-for="image in game.mImageCarouselObjectIds"
                 :key="image"
@@ -246,13 +267,14 @@ import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 import { StarIcon } from "@heroicons/vue/24/solid";
 import { micromark } from "micromark";
 import type { PlatformClient } from "~/composables/types";
+import { formatBytes } from "~/server/internal/utils/files";
 
 const route = useRoute();
 const gameId = route.params.id.toString();
 
 const user = useUser();
 
-const { game, rating } = await $dropFetch(`/api/v1/games/${gameId}`);
+const { game, rating, size } = await $dropFetch(`/api/v1/games/${gameId}`);
 
 // Preview description (first 30 lines)
 const showPreview = ref(true);

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+overrides:
+  droplet: link:../../.local/share/pnpm/global/5/node_modules/@drop-oss/droplet
+
+shamefullyHoist: true

prisma/migrations/20250823005001_add_api_token_expiry/migration.sql

@@ -0,0 +1,8 @@
+-- DropIndex
+DROP INDEX "GameTag_name_idx";
+
+-- AlterTable
+ALTER TABLE "APIToken" ADD COLUMN     "expiresAt" TIMESTAMP(3);
+
+-- CreateIndex
+CREATE INDEX "GameTag_name_idx" ON "GameTag" USING GIST ("name" gist_trgm_ops(siglen=32));

prisma/migrations/20250918184144_add_steam_metadata/migration.sql

@@ -0,0 +1,8 @@
+-- AlterEnum
+ALTER TYPE "MetadataSource" ADD VALUE 'Steam';
+
+-- DropIndex
+DROP INDEX "GameTag_name_idx";
+
+-- CreateIndex
+CREATE INDEX "GameTag_name_idx" ON "GameTag" USING GIST ("name" gist_trgm_ops(siglen=32));

prisma/models/auth.prisma

@@ -45,6 +45,8 @@ model APIToken {
 
     acls String[]
 
+    expiresAt DateTime?
+
     @@index([token])
 }
 

prisma/models/content.prisma

@@ -1,6 +1,7 @@
 enum MetadataSource {
   Manual
   GiantBomb
+  Steam
   PCGamingWiki
   IGDB
   Metacritic

server/api/v1/admin/game/[id]/index.delete.ts

@@ -1,5 +1,5 @@
 import aclManager from "~/server/internal/acls";
-import prisma from "~/server/internal/db/database";
+import libraryManager from "~/server/internal/library";
 
 export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["game:delete"]);
@@ -7,11 +7,7 @@ export default defineEventHandler(async (h3) => {
 
   const gameId = getRouterParam(h3, "id")!;
 
-  await prisma.game.delete({
-    where: {
-      id: gameId,
-    },
-  });
+  libraryManager.deleteGame(gameId);
 
   return {};
 });

server/api/v1/admin/game/[id]/index.get.ts

@@ -1,3 +1,4 @@
+import type { GameVersion } from "~/prisma/client/client";
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 import libraryManager from "~/server/internal/library";
@@ -17,11 +18,8 @@ export default defineEventHandler(async (h3) => {
         orderBy: {
           versionIndex: "asc",
         },
-        select: {
-          versionIndex: true,
-          versionName: true,
-          platform: true,
-          delta: true,
+        omit: {
+          dropletManifest: true,
         },
       },
       tags: true,
@@ -31,10 +29,22 @@ export default defineEventHandler(async (h3) => {
   if (!game || !game.libraryId)
     throw createError({ statusCode: 404, statusMessage: "Game ID not found" });
 
+  const getGameVersionSize = async (version: GameVersion) => {
+    const size = await libraryManager.getGameVersionSize(
+      gameId,
+      version.versionName,
+    );
+    return { ...version, size };
+  };
+  const gameWithVersionSize = {
+    ...game,
+    versions: await Promise.all(game.versions.map(getGameVersionSize)),
+  };
+
   const unimportedVersions = await libraryManager.fetchUnimportedGameVersions(
     game.libraryId,
     game.libraryPath,
   );
 
-  return { game, unimportedVersions };
+  return { game: gameWithVersionSize, unimportedVersions };
 });

server/api/v1/admin/game/version/index.delete.ts

@@ -1,7 +1,7 @@
 import { type } from "arktype";
 import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
 import aclManager from "~/server/internal/acls";
-import prisma from "~/server/internal/db/database";
+import libraryManager from "~/server/internal/library";
 
 const DeleteVersion = type({
   id: "string",
@@ -20,15 +20,7 @@ export default defineEventHandler<{ body: typeof DeleteVersion }>(
     const gameId = body.id.toString();
     const version = body.versionName.toString();
 
-    await prisma.gameVersion.delete({
-      where: {
-        gameId_versionName: {
-          gameId: gameId,
-          versionName: version,
-        },
-      },
-    });
-
+    await libraryManager.deleteGameVersion(gameId, version);
     return {};
   },
 );

server/api/v1/admin/game/version/index.patch.ts

@@ -18,30 +18,55 @@ export default defineEventHandler<{ body: typeof UpdateVersionOrder }>(
     const body = await readDropValidatedBody(h3, UpdateVersionOrder);
     const gameId = body.id;
     // We expect an array of the version names for this game
-    const versions = body.versions;
+    const unsortedVersions = await prisma.gameVersion.findMany({
+      where: {
+        versionName: { in: body.versions },
+      },
+      select: {
+        versionName: true,
+        versionIndex: true,
+        delta: true,
+        platform: true,
+      },
+    });
 
-    const newVersions = await prisma.$transaction(
-      versions.map((versionName, versionIndex) =>
+    const versions = body.versions
+      .map((e) => unsortedVersions.find((v) => v.versionName === e))
+      .filter((e) => e !== undefined);
+
+    if (versions.length !== unsortedVersions.length)
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Sorting versions yielded less results, somehow.",
+      });
+
+    // Validate the new order
+    const has: { [key: string]: boolean } = {};
+    for (const version of versions) {
+      if (version.delta && !has[version.platform])
+        throw createError({
+          statusCode: 400,
+          statusMessage: `"${version.versionName}" requires a base version to apply the delta to.`,
+        });
+      has[version.platform] = true;
+    }
+
+    await prisma.$transaction(
+      versions.map((version, versionIndex) =>
         prisma.gameVersion.update({
           where: {
             gameId_versionName: {
               gameId: gameId,
-              versionName: versionName,
+              versionName: version.versionName,
             },
           },
           data: {
             versionIndex: versionIndex,
           },
-          select: {
-            versionIndex: true,
-            versionName: true,
-            platform: true,
-            delta: true,
-          },
         }),
       ),
     );
 
-    return newVersions;
+    return versions;
   },
 );

server/api/v1/admin/home/index.get.ts

@@ -0,0 +1,27 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+import { systemConfig } from "~/server/internal/config/sys-conf";
+import libraryManager from "~/server/internal/library";
+import userStatsManager from "~/server/internal/userstats";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["game:read"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const sources = await libraryManager.fetchLibraries();
+  const userStats = await userStatsManager.getUserStats();
+
+  const biggestGamesCombined =
+    await libraryManager.getBiggestGamesCombinedVersions(5);
+  const biggestGamesLatest =
+    await libraryManager.getBiggestGamesLatestVersions(5);
+
+  return {
+    gameCount: await prisma.game.count(),
+    version: systemConfig.getDropVersion(),
+    userStats,
+    sources,
+    biggestGamesLatest,
+    biggestGamesCombined,
+  };
+});

server/api/v1/admin/library/index.get.ts

@@ -7,8 +7,9 @@ export default defineEventHandler(async (h3) => {
 
   const unimportedGames = await libraryManager.fetchUnimportedGames();
   const games = await libraryManager.fetchGamesWithStatus();
+  const libraries = await libraryManager.fetchLibraries();
 
   // Fetch other library data here
 
-  return { unimportedGames, games };
+  return { unimportedGames, games, hasLibraries: libraries.length > 0 };
 });

server/api/v1/admin/library/sources/index.get.ts

@@ -2,7 +2,10 @@ import type { LibraryModel } from "~/prisma/client/models";
 import aclManager from "~/server/internal/acls";
 import libraryManager from "~/server/internal/library";
 
-export type WorkingLibrarySource = LibraryModel & { working: boolean };
+export type WorkingLibrarySource = LibraryModel & {
+  working: boolean;
+  fsStats?: { freeSpace: number; totalSpace: number } | undefined;
+};
 
 export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, [

server/api/v1/admin/library/sources/index.patch.ts

@@ -3,8 +3,8 @@ import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 import libraryManager from "~/server/internal/library";
+import type { WorkingLibrarySource } from "~/server/api/v1/admin/library/sources/index.get";
 import { libraryConstructors } from "~/server/plugins/05.library-init";
-import type { WorkingLibrarySource } from "./index.get";
 
 const UpdateLibrarySource = type({
   id: "string",
@@ -49,8 +49,8 @@ export default defineEventHandler<{ body: typeof UpdateLibrarySource.infer }>(
         },
       });
 
-      await libraryManager.removeLibrary(source.id);
-      await libraryManager.addLibrary(newLibrary);
+      libraryManager.removeLibrary(source.id);
+      libraryManager.addLibrary(newLibrary);
 
       const workingSource: WorkingLibrarySource = {
         ...updatedSource,

server/api/v1/admin/library/sources/index.post.ts

@@ -6,7 +6,7 @@ import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 import libraryManager from "~/server/internal/library";
 import { libraryConstructors } from "~/server/plugins/05.library-init";
-import type { WorkingLibrarySource } from "./index.get";
+import type { WorkingLibrarySource } from "~/server/api/v1/admin/library/sources/index.get";
 
 const CreateLibrarySource = type({
   name: "string",
@@ -52,11 +52,12 @@ export default defineEventHandler<{ body: typeof CreateLibrarySource.infer }>(
         },
       });
 
-      await libraryManager.addLibrary(library);
+      libraryManager.addLibrary(library);
 
       const workingSource: WorkingLibrarySource = {
         ...source,
         working: true,
+        fsStats: library.fsStats(),
       };
 
       return workingSource;

server/api/v1/admin/task/index.get.ts

@@ -1,5 +1,6 @@
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
+import type { TaskMessage } from "~/server/internal/tasks";
 import taskHandler from "~/server/internal/tasks";
 
 export default defineEventHandler(async (h3) => {
@@ -13,7 +14,7 @@ export default defineEventHandler(async (h3) => {
     });
 
   const runningTasks = (await taskHandler.runningTasks()).map((e) => e.id);
-  const historicalTasks = await prisma.task.findMany({
+  const historicalTasks = (await prisma.task.findMany({
     where: {
       OR: [
         {
@@ -28,7 +29,7 @@ export default defineEventHandler(async (h3) => {
       ended: "desc",
     },
     take: 10,
-  });
+  })) as Array<TaskMessage>;
   const dailyTasks = await taskHandler.dailyTasks();
   const weeklyTasks = await taskHandler.weeklyTasks();
 

server/api/v1/admin/task/index.post.ts

@@ -0,0 +1,31 @@
+import { type } from "arktype";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager from "~/server/internal/acls";
+import taskHandler from "~/server/internal/tasks";
+import type { TaskGroup } from "~/server/internal/tasks/group";
+import { taskGroups } from "~/server/internal/tasks/group";
+
+const StartTask = type({
+  taskGroup: type("string"),
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["task:start"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const body = await readDropValidatedBody(h3, StartTask);
+  const taskGroup = body.taskGroup as TaskGroup;
+  if (!taskGroups[taskGroup])
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Invalid task group.",
+    });
+
+  const task = await taskHandler.runTaskGroupByName(taskGroup);
+  if (!task)
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Could not start task.",
+    });
+  return { id: task };
+});

server/api/v1/admin/token/[id]/index.delete.ts

@@ -0,0 +1,23 @@
+import { APITokenMode } from "~/prisma/client/enums";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const id = h3.context.params?.id;
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "No id in router params",
+    });
+
+  const deleted = await prisma.aPIToken.delete({
+    where: { id: id, mode: APITokenMode.System },
+  })!;
+  if (!deleted)
+    throw createError({ statusCode: 404, statusMessage: "Token not found" });
+
+  return;
+});

server/api/v1/admin/token/acls.get.ts

@@ -0,0 +1,9 @@
+import aclManager from "~/server/internal/acls";
+import { systemACLDescriptions } from "~/server/internal/acls/descriptions";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  return systemACLDescriptions;
+});

server/api/v1/admin/token/index.get.ts

@@ -0,0 +1,15 @@
+import { APITokenMode } from "~/prisma/client/enums";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const tokens = await prisma.aPIToken.findMany({
+    where: { mode: APITokenMode.System },
+    omit: { token: true },
+  });
+
+  return tokens;
+});

server/api/v1/admin/token/index.post.ts

@@ -0,0 +1,38 @@
+import { type } from "arktype";
+import { APITokenMode } from "~/prisma/client/enums";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager, { systemACLs } from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+const CreateToken = type({
+  name: "string",
+  acls: "string[] > 0",
+  expiry: "string.date.iso.parse?",
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const body = await readDropValidatedBody(h3, CreateToken);
+
+  const invalidACLs = body.acls.filter(
+    (e) => systemACLs.findIndex((v) => e == v) == -1,
+  );
+  if (invalidACLs.length > 0)
+    throw createError({
+      statusCode: 400,
+      statusMessage: `Invalid ACLs: ${invalidACLs.join(", ")}`,
+    });
+
+  const token = await prisma.aPIToken.create({
+    data: {
+      mode: APITokenMode.System,
+      name: body.name,
+      acls: body.acls,
+      expiresAt: body.expiry ?? null,
+    },
+  });
+
+  return token;
+});

server/api/v1/admin/users/[id]/index.delete.ts

@@ -1,6 +1,7 @@
 import { defineEventHandler, createError } from "h3";
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
+import userStatsManager from "~/server/internal/userstats";
 
 export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["user:delete"]);
@@ -27,5 +28,6 @@ export default defineEventHandler(async (h3) => {
     throw createError({ statusCode: 404, statusMessage: "User not found." });
 
   await prisma.user.delete({ where: { id: userId } });
+  await userStatsManager.deleteUser();
   return { success: true };
 });

server/api/v1/auth/signup/simple.post.ts

@@ -6,6 +6,7 @@ import objectHandler from "~/server/internal/objects";
 import { type } from "arktype";
 import { randomUUID } from "node:crypto";
 import { throwingArktype } from "~/server/arktype";
+import userStatsManager from "~/server/internal/userstats";
 
 export const SharedRegisterValidator = type({
   username: "string >= 5",
@@ -86,5 +87,6 @@ export default defineEventHandler<{
     prisma.invitation.delete({ where: { id: user.invitation } }),
   ]);
 
+  await userStatsManager.addUser();
   return linkMec.user;
 });

server/api/v1/client/game/version.get.ts

@@ -1,5 +1,6 @@
 import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
 import prisma from "~/server/internal/db/database";
+import libraryManager from "~/server/internal/library";
 
 export default defineClientEventHandler(async (h3) => {
   const query = getQuery(h3);
@@ -26,5 +27,8 @@ export default defineClientEventHandler(async (h3) => {
       statusMessage: "Game version not found",
     });
 
-  return gameVersion;
+  return {
+    ...gameVersion,
+    size: libraryManager.getGameVersionSize(id, version),
+  };
 });

server/api/v1/games/[id]/index.get.ts

@@ -1,5 +1,6 @@
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
+import libraryManager from "~/server/internal/library";
 
 export default defineEventHandler(async (h3) => {
   const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
@@ -51,5 +52,7 @@ export default defineEventHandler(async (h3) => {
     },
   });
 
-  return { game, rating };
+  const size = await libraryManager.getGameVersionSize(game.id);
+
+  return { game, rating, size };
 });

server/api/v1/store/index.get.ts

@@ -18,7 +18,8 @@ const StoreRead = type({
   company: "string?",
   companyActions: "string = 'published,developed'",
 
-  sort: "'default' | 'newest' | 'recent' = 'default'",
+  sort: "'default' | 'newest' | 'recent' | 'name' = 'default'",
+  order: "'asc' | 'desc' = 'desc'",
 });
 
 export default defineEventHandler(async (h3) => {
@@ -101,10 +102,13 @@ export default defineEventHandler(async (h3) => {
   switch (options.sort) {
     case "default":
     case "newest":
-      sort.mReleased = "desc";
+      sort.mReleased = options.order;
       break;
     case "recent":
-      sort.created = "desc";
+      sort.created = options.order;
+      break;
+    case "name":
+      sort.mName = options.order;
       break;
   }
 

server/api/v1/token.get.ts

@@ -0,0 +1,6 @@
+import aclManager from "~/server/internal/acls";
+
+export default defineEventHandler(async (h3) => {
+  const acls = await aclManager.fetchAllACLs(h3);
+  return acls;
+});

server/api/v1/user/token/index.post.ts

@@ -1,30 +1,22 @@
+import { type } from "arktype";
 import { APITokenMode } from "~/prisma/client/enums";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
 import aclManager, { userACLs } from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 
+const CreateToken = type({
+  name: "string",
+  acls: "string[] > 0",
+  expiry: "string.date.iso.parse?",
+}).configure(throwingArktype);
+
 export default defineEventHandler(async (h3) => {
   const userId = await aclManager.getUserIdACL(h3, []); // No ACLs only allows session authentication
   if (!userId) throw createError({ statusCode: 403 });
 
-  const body = await readBody(h3);
-  const name: string = body.name;
-  const acls: string[] = body.acls;
+  const body = await readDropValidatedBody(h3, CreateToken);
 
-  if (!name || typeof name !== "string")
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Token name required",
-    });
-  if (!acls || !Array.isArray(acls))
-    throw createError({ statusCode: 400, statusMessage: "ACLs required" });
-
-  if (acls.length == 0)
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Token requires more than zero ACLs",
-    });
-
-  const invalidACLs = acls.filter(
+  const invalidACLs = body.acls.filter(
     (e) => userACLs.findIndex((v) => e == v) == -1,
   );
   if (invalidACLs.length > 0)
@@ -36,9 +28,10 @@ export default defineEventHandler(async (h3) => {
   const token = await prisma.aPIToken.create({
     data: {
       mode: APITokenMode.User,
-      name: name,
+      name: body.name,
       userId: userId,
-      acls: acls,
+      acls: body.acls,
+      expiresAt: body.expiry ?? null,
     },
   });
 

server/api/v2/client/chunk.post.ts

@@ -9,7 +9,10 @@ const GetChunk = type({
   files: type({
     filename: "string",
     chunkIndex: "number",
-  }).array(),
+  })
+    .array()
+    .atLeastLength(1)
+    .atMostLength(256),
 }).configure(throwingArktype);
 
 export default defineEventHandler(async (h3) => {
@@ -46,21 +49,27 @@ export default defineEventHandler(async (h3) => {
     streamFiles.map((e) => e.end - e.start).join(","),
   ); // Non-standard header, but we're cool like that 😎
 
-  for (const file of streamFiles) {
-    const gameReadStream = await libraryManager.readFile(
-      context.libraryId,
-      context.libraryPath,
-      context.versionName,
-      file.filename,
-      { start: file.start, end: file.end },
-    );
-    if (!gameReadStream)
-      throw createError({
-        statusCode: 500,
-        statusMessage: "Failed to create read stream",
-      });
+  const streams = await Promise.all(
+    streamFiles.map(async (file) => {
+      const gameReadStream = await libraryManager.readFile(
+        context.libraryId,
+        context.libraryPath,
+        context.versionName,
+        file.filename,
+        { start: file.start, end: file.end },
+      );
+      if (!gameReadStream)
+        throw createError({
+          statusCode: 500,
+          statusMessage: "Failed to create read stream",
+        });
+      return { ...file, stream: gameReadStream };
+    }),
+  );
+
+  for (const file of streams) {
     let length = 0;
-    await gameReadStream.pipeTo(
+    await file.stream.pipeTo(
       new WritableStream({
         write(chunk) {
           h3.node.res.write(chunk);

server/internal/acls/descriptions.ts

@@ -36,7 +36,7 @@ export const userACLDescriptions: ObjectFromList<typeof userACLs> = {
   "library:remove": "Remove a game from your library.",
 
   "clients:read": "Read the clients connected to this account",
-  "clients:revoke": "",
+  "clients:revoke": "Remove clients connected to this account",
 
   "news:read": "Read the server's news articles.",
 

server/internal/clients/handler.ts

@@ -8,6 +8,7 @@ import type {
 } from "./capabilities";
 import capabilityManager from "./capabilities";
 import type { PeerImpl } from "../tasks";
+import userStatsManager from "~/server/internal/userstats";
 
 export enum AuthMode {
   Callback = "callback",
@@ -136,7 +137,7 @@ export class ClientHandler {
         statusCode: 400,
         statusMessage: "Client has not connected yet. Please try again later.",
       });
-    await client.peer.send(
+    client.peer.send(
       JSON.stringify({ type: "token", value: `${clientId}/${token}` }),
     );
   }
@@ -166,6 +167,7 @@ export class ClientHandler {
         lastConnected: new Date(),
       },
     });
+    await userStatsManager.cacheUserSessions();
 
     for (const [capability, configuration] of Object.entries(
       metadata.data.capabilities,
@@ -191,6 +193,7 @@ export class ClientHandler {
         id,
       },
     });
+    await userStatsManager.cacheUserStats();
   }
 }
 

server/internal/downloads/coordinator.ts

@@ -57,7 +57,7 @@ class DownloadContextManager {
   async cleanup() {
     for (const key of this.contexts.keys()) {
       const context = this.contexts.get(key)!;
-      if (context.timeout.getDate() + TIMEOUT < Date.now()) {
+      if (context.timeout.getTime() < Date.now() - TIMEOUT) {
         this.contexts.delete(key);
       }
     }

server/internal/downloads/manifest.ts

@@ -1,5 +1,6 @@
 import type { GameVersionModel } from "~/prisma/client/models";
 import prisma from "../db/database";
+import { sum } from "~/utils/array";
 
 export type DropChunk = {
   permissions: number;
@@ -102,6 +103,14 @@ class ManifestGenerator {
 
     return manifest;
   }
+
+  calculateManifestSize(manifest: DropManifest) {
+    return sum(
+      Object.values(manifest)
+        .map((chunk) => chunk.lengths)
+        .flat(),
+    );
+  }
 }
 
 export const manifestGenerator = new ManifestGenerator();

server/internal/gamesize/index.ts

@@ -0,0 +1,236 @@
+import cacheHandler from "../cache";
+import prisma from "../db/database";
+import manifestGenerator from "../downloads/manifest";
+import { sum } from "../../../utils/array";
+import type { Game, GameVersion } from "~/prisma/client/client";
+
+export type GameSize = {
+  gameName: string;
+  size: number;
+  gameId: string;
+};
+
+export type VersionSize = GameSize & {
+  latest: boolean;
+};
+
+type VersionsSizes = {
+  [versionName: string]: VersionSize;
+};
+
+type GameVersionsSize = {
+  [gameId: string]: VersionsSizes;
+};
+
+class GameSizeManager {
+  private gameVersionsSizesCache =
+    cacheHandler.createCache<GameVersionsSize>("gameVersionsSizes");
+  // All versions sizes combined
+  private gameSizesCache = cacheHandler.createCache<GameSize>("gameSizes");
+
+  private async clearGameVersionsSizesCache() {
+    (await this.gameVersionsSizesCache.getKeys()).map((key) =>
+      this.gameVersionsSizesCache.remove(key),
+    );
+  }
+
+  private async clearGameSizesCache() {
+    (await this.gameSizesCache.getKeys()).map((key) =>
+      this.gameSizesCache.remove(key),
+    );
+  }
+
+  // All versions of a game combined
+  async getCombinedGameSize(gameId: string) {
+    const versions = await prisma.gameVersion.findMany({
+      where: { gameId },
+    });
+    const sizes = await Promise.all(
+      versions.map((version) =>
+        manifestGenerator.calculateManifestSize(
+          JSON.parse(version.dropletManifest as string),
+        ),
+      ),
+    );
+    return sum(sizes);
+  }
+
+  async getGameVersionSize(
+    gameId: string,
+    versionName?: string,
+  ): Promise<number | null> {
+    if (!versionName) {
+      const version = await prisma.gameVersion.findFirst({
+        where: { gameId },
+        orderBy: {
+          versionIndex: "desc",
+        },
+      });
+      if (!version) {
+        return null;
+      }
+      versionName = version.versionName;
+    }
+
+    const manifest = await manifestGenerator.generateManifest(
+      gameId,
+      versionName,
+    );
+    if (!manifest) {
+      return null;
+    }
+
+    return manifestGenerator.calculateManifestSize(manifest);
+  }
+
+  private async isLatestVersion(
+    gameVersions: GameVersion[],
+    version: GameVersion,
+  ): Promise<boolean> {
+    return gameVersions.length > 0
+      ? gameVersions[0].versionName === version.versionName
+      : false;
+  }
+
+  async getBiggestGamesLatestVersion(top: number): Promise<VersionSize[]> {
+    const gameIds = await this.gameVersionsSizesCache.getKeys();
+    const latestGames = await Promise.all(
+      gameIds.map(async (gameId) => {
+        const versionsSizes = await this.gameVersionsSizesCache.get(gameId);
+        if (!versionsSizes) {
+          return null;
+        }
+        const latestVersionName = Object.keys(versionsSizes).find(
+          (versionName) => versionsSizes[versionName].latest,
+        );
+        if (!latestVersionName) {
+          return null;
+        }
+        return versionsSizes[latestVersionName] || null;
+      }),
+    );
+    return latestGames
+      .filter((game) => game !== null)
+      .sort((gameA, gameB) => gameB.size - gameA.size)
+      .slice(0, top);
+  }
+
+  async isGameVersionsSizesCacheEmpty() {
+    return (await this.gameVersionsSizesCache.getKeys()).length === 0;
+  }
+
+  async isGameSizesCacheEmpty() {
+    return (await this.gameSizesCache.getKeys()).length === 0;
+  }
+
+  async cacheAllCombinedGames() {
+    await this.clearGameSizesCache();
+    const games = await prisma.game.findMany({ include: { versions: true } });
+
+    await Promise.all(games.map((game) => this.cacheCombinedGame(game)));
+  }
+
+  async cacheCombinedGame(game: Game) {
+    const size = await this.getCombinedGameSize(game.id);
+    if (!size) {
+      this.gameSizesCache.remove(game.id);
+      return;
+    }
+    const gameSize = {
+      size,
+      gameName: game.mName,
+      gameId: game.id,
+    };
+    await this.gameSizesCache.set(game.id, gameSize);
+  }
+
+  async cacheAllGameVersions() {
+    await this.clearGameVersionsSizesCache();
+    const games = await prisma.game.findMany({
+      include: {
+        versions: {
+          orderBy: {
+            versionIndex: "desc",
+          },
+          take: 1,
+        },
+      },
+    });
+
+    await Promise.all(games.map((game) => this.cacheGameVersion(game)));
+  }
+
+  async cacheGameVersion(
+    game: Game & { versions: GameVersion[] },
+    versionName?: string,
+  ) {
+    const cacheVersion = async (version: GameVersion) => {
+      const size = await this.getGameVersionSize(game.id, version.versionName);
+      if (!version.versionName || !size) {
+        return;
+      }
+
+      const versionsSizes = {
+        [version.versionName]: {
+          size,
+          gameName: game.mName,
+          gameId: game.id,
+          latest: await this.isLatestVersion(game.versions, version),
+        },
+      };
+      const allVersionsSizes =
+        (await this.gameVersionsSizesCache.get(game.id)) || {};
+      await this.gameVersionsSizesCache.set(game.id, {
+        ...allVersionsSizes,
+        ...versionsSizes,
+      });
+    };
+
+    if (versionName) {
+      const version = await prisma.gameVersion.findFirst({
+        where: { gameId: game.id, versionName },
+      });
+      if (!version) {
+        return;
+      }
+      cacheVersion(version);
+      return;
+    }
+    if ("versions" in game) {
+      await Promise.all(game.versions.map(cacheVersion));
+    }
+  }
+
+  async getBiggestGamesAllVersions(top: number): Promise<GameSize[]> {
+    const gameIds = await this.gameSizesCache.getKeys();
+    const allGames = await Promise.all(
+      gameIds.map(async (gameId) => await this.gameSizesCache.get(gameId)),
+    );
+    return allGames
+      .filter((game) => game !== null)
+      .sort((gameA, gameB) => gameB.size - gameA.size)
+      .slice(0, top);
+  }
+
+  async deleteGameVersion(gameId: string, version: string) {
+    const game = await prisma.game.findFirst({ where: { id: gameId } });
+    if (game) {
+      await this.cacheCombinedGame(game);
+    }
+    const versionsSizes = await this.gameVersionsSizesCache.get(gameId);
+    if (!versionsSizes) {
+      return;
+    }
+    // Remove the version from the VersionsSizes object
+    const { [version]: _, ...updatedVersionsSizes } = versionsSizes;
+    await this.gameVersionsSizesCache.set(gameId, updatedVersionsSizes);
+  }
+
+  async deleteGame(gameId: string) {
+    this.gameSizesCache.remove(gameId);
+    this.gameVersionsSizesCache.remove(gameId);
+  }
+}
+
+export const manager = new GameSizeManager();
+export default manager;

server/internal/library/index.ts

@@ -14,13 +14,20 @@ import notificationSystem from "../notifications";
 import { GameNotFoundError, type LibraryProvider } from "./provider";
 import { logger } from "../logging";
 import type { GameModel } from "~/prisma/client/models";
+import { createHash } from "node:crypto";
+import type { WorkingLibrarySource } from "~/server/api/v1/admin/library/sources/index.get";
+import gameSizeManager from "~/server/internal/gamesize";
 
 export function createGameImportTaskId(libraryId: string, libraryPath: string) {
-  return btoa(`import:${libraryId}:${libraryPath}`);
+  return createHash("md5")
+    .update(`import:${libraryId}:${libraryPath}`)
+    .digest("hex");
 }
 
 export function createVersionImportTaskId(gameId: string, versionName: string) {
-  return btoa(`import:${gameId}:${versionName}`);
+  return createHash("md5")
+    .update(`import:${gameId}:${versionName}`)
+    .digest("hex");
 }
 
 class LibraryManager {
@@ -34,13 +41,19 @@ class LibraryManager {
     this.libraries.delete(id);
   }
 
-  async fetchLibraries() {
+  async fetchLibraries(): Promise<WorkingLibrarySource[]> {
     const libraries = await prisma.library.findMany({});
-    const libraryWithMetadata = libraries.map((e) => ({
-      ...e,
-      working: this.libraries.has(e.id),
-    }));
-    return libraryWithMetadata;
+
+    const libraryWithMetadata = libraries.map(async (library) => {
+      const theLibrary = this.libraries.get(library.id);
+      const working = this.libraries.has(library.id);
+      return {
+        ...library,
+        working,
+        fsStats: working ? theLibrary?.fsStats() : undefined,
+      };
+    });
+    return await Promise.all(libraryWithMetadata);
   }
 
   async fetchGamesByLibrary() {
@@ -111,7 +124,11 @@ class LibraryManager {
   async fetchGamesWithStatus() {
     const games = await prisma.game.findMany({
       include: {
-        versions: true,
+        versions: {
+          select: {
+            versionName: true,
+          },
+        },
         library: true,
       },
       orderBy: {
@@ -162,6 +179,8 @@ class LibraryManager {
         ".sh",
         // No extension is common for Linux binaries
         "",
+        // AppImages
+        ".appimage",
       ],
       Windows: [".exe", ".bat"],
       macOS: [
@@ -323,6 +342,8 @@ class LibraryManager {
           acls: ["system:import:version:read"],
         });
 
+        await libraryManager.cacheCombinedGameSize(gameId);
+        await libraryManager.cacheGameVersionSize(gameId, versionName);
         progress(100);
       },
     });
@@ -352,6 +373,68 @@ class LibraryManager {
     if (!library) return undefined;
     return await library.readFile(game, version, filename, options);
   }
+
+  async deleteGameVersion(gameId: string, version: string) {
+    await prisma.gameVersion.delete({
+      where: {
+        gameId_versionName: {
+          gameId: gameId,
+          versionName: version,
+        },
+      },
+    });
+
+    await gameSizeManager.deleteGameVersion(gameId, version);
+  }
+
+  async deleteGame(gameId: string) {
+    await prisma.game.delete({
+      where: {
+        id: gameId,
+      },
+    });
+    gameSizeManager.deleteGame(gameId);
+  }
+
+  async getGameVersionSize(
+    gameId: string,
+    versionName?: string,
+  ): Promise<number | null> {
+    return gameSizeManager.getGameVersionSize(gameId, versionName);
+  }
+
+  async getBiggestGamesCombinedVersions(top: number) {
+    if (await gameSizeManager.isGameSizesCacheEmpty()) {
+      await gameSizeManager.cacheAllCombinedGames();
+    }
+    return gameSizeManager.getBiggestGamesAllVersions(top);
+  }
+
+  async getBiggestGamesLatestVersions(top: number) {
+    if (await gameSizeManager.isGameVersionsSizesCacheEmpty()) {
+      await gameSizeManager.cacheAllGameVersions();
+    }
+    return gameSizeManager.getBiggestGamesLatestVersion(top);
+  }
+
+  async cacheCombinedGameSize(gameId: string) {
+    const game = await prisma.game.findFirst({ where: { id: gameId } });
+    if (!game) {
+      return;
+    }
+    await gameSizeManager.cacheCombinedGame(game);
+  }
+
+  async cacheGameVersionSize(gameId: string, versionName: string) {
+    const game = await prisma.game.findFirst({
+      where: { id: gameId },
+      include: { versions: true },
+    });
+    if (!game) {
+      return;
+    }
+    await gameSizeManager.cacheGameVersion(game, versionName);
+  }
 }
 
 export const libraryManager = new LibraryManager();

server/internal/library/provider.ts

@@ -57,6 +57,8 @@ export abstract class LibraryProvider<CFG> {
     filename: string,
     options?: { start?: number; end?: number },
   ): Promise<ReadableStream | undefined>;
+
+  abstract fsStats(): { freeSpace: number; totalSpace: number } | undefined;
 }
 
 export class GameNotFoundError extends Error {}

server/internal/library/providers/filesystem.ts

@@ -8,6 +8,7 @@ import { LibraryBackend } from "~/prisma/client/enums";
 import fs from "fs";
 import path from "path";
 import droplet, { DropletHandler } from "@drop-oss/droplet";
+import { fsStats } from "~/server/internal/utils/files";
 
 export const FilesystemProviderConfig = type({
   baseDir: "string",
@@ -122,4 +123,8 @@ export class FilesystemProvider
 
     return stream;
   }
+
+  fsStats() {
+    return fsStats(this.config.baseDir);
+  }
 }

server/internal/library/providers/flat.ts

@@ -6,6 +6,7 @@ import fs from "fs";
 import path from "path";
 import droplet from "@drop-oss/droplet";
 import { DROPLET_HANDLER } from "./filesystem";
+import { fsStats } from "~/server/internal/utils/files";
 
 export const FlatFilesystemProviderConfig = type({
   baseDir: "string",
@@ -113,4 +114,8 @@ export class FlatFilesystemProvider
 
     return stream.getStream();
   }
+
+  fsStats() {
+    return fsStats(this.config.baseDir);
+  }
 }

server/internal/metadata/giantbomb.ts

@@ -191,7 +191,7 @@ export class GiantBombProvider implements MetadataProvider {
 
         const res = await publisher(pub.name);
         if (res === undefined) {
-          context?.logger.warn(`Failed to import publisher "${pub}"`);
+          context?.logger.warn(`Failed to import publisher "${pub.name}"`);
           continue;
         }
         context?.logger.info(`Imported publisher "${pub.name}"`);
@@ -208,10 +208,10 @@ export class GiantBombProvider implements MetadataProvider {
 
         const res = await developer(dev.name);
         if (res === undefined) {
-          context?.logger.warn(`Failed to import developer "${dev}"`);
+          context?.logger.warn(`Failed to import developer "${dev.name}"`);
           continue;
         }
-        context?.logger.info(`Imported developer "${dev}"`);
+        context?.logger.info(`Imported developer "${dev.name}"`);
         developers.push(res);
       }
     }

server/internal/metadata/igdb.ts

@@ -72,7 +72,7 @@ interface IGDBCompanyWebsite extends IGDBItem {
 }
 
 interface IGDBCover extends IGDBItem {
-  url: string;
+  image_id: string;
 }
 
 interface IGDBSearchStub extends IGDBItem {
@@ -179,7 +179,7 @@ export class IGDBProvider implements MetadataProvider {
 
     if (response.status !== 200)
       throw new Error(
-        `Error in IDGB \nStatus Code: ${response.status}\n${response.data}`,
+        `Error in IGDB \nStatus Code: ${response.status}\n${response.data}`,
       );
 
     this.accessToken = response.data.access_token;
@@ -187,7 +187,7 @@ export class IGDBProvider implements MetadataProvider {
       seconds: response.data.expires_in,
     });
 
-    logger.info("IDGB done authorizing with twitch");
+    logger.info("IGDB done authorizing with twitch");
   }
 
   private async refreshCredentials() {
@@ -246,39 +246,47 @@ export class IGDBProvider implements MetadataProvider {
     return <T[]>response.data;
   }
 
-  private async _getMediaInternal(mediaID: IGDBID, type: string) {
+  private async _getMediaInternal(
+    mediaID: IGDBID,
+    type: string,
+    size: string = "t_thumb",
+  ) {
     if (mediaID === undefined)
       throw new Error(
         `IGDB mediaID when getting item of type ${type} was undefined`,
       );
 
-    const body = `where id = ${mediaID}; fields url;`;
+    const body = `where id = ${mediaID}; fields image_id;`;
     const response = await this.request<IGDBCover>(type, body);
 
-    let result = "";
+    if (!response.length || !response[0].image_id) {
+      throw new Error(`No image_id found for ${type} with id ${mediaID}`);
+    }
 
-    response.forEach((cover) => {
-      if (cover.url.startsWith("https:")) {
-        result = cover.url;
-      } else {
-        // twitch *sometimes* provides it in the format "//images.igdb.com"
-        result = `https:${cover.url}`;
-      }
-    });
+    const imageId = response[0].image_id;
+    const result = `https://images.igdb.com/igdb/image/upload/${size}/${imageId}.jpg`;
 
     return result;
   }
 
   private async getCoverURL(id: IGDBID) {
-    return await this._getMediaInternal(id, "covers");
+    return await this._getMediaInternal(id, "covers", "t_cover_big");
   }
 
   private async getArtworkURL(id: IGDBID) {
-    return await this._getMediaInternal(id, "artworks");
+    return await this._getMediaInternal(id, "artworks", "t_1080p");
+  }
+
+  private async getScreenshotURL(id: IGDBID) {
+    return await this._getMediaInternal(id, "screenshots", "t_1080p");
+  }
+
+  private async getIconURL(id: IGDBID) {
+    return await this._getMediaInternal(id, "covers", "t_thumb");
   }
 
   private async getCompanyLogoURl(id: IGDBID) {
-    return await this._getMediaInternal(id, "company_logos");
+    return await this._getMediaInternal(id, "company_logos", "t_original");
   }
 
   private trimMessage(msg: string, len: number) {
@@ -327,7 +335,7 @@ export class IGDBProvider implements MetadataProvider {
       let icon = "";
       const cover = response[i].cover;
       if (cover !== undefined) {
-        icon = await this.getCoverURL(cover);
+        icon = await this.getIconURL(cover);
       } else {
         icon = "";
       }
@@ -355,23 +363,26 @@ export class IGDBProvider implements MetadataProvider {
     const currentGame = (await this.request<IGDBGameFull>("games", body)).at(0);
     if (!currentGame) throw new Error("No game found on IGDB with that id");
 
-    context?.logger.info("Using IDGB provider.");
+    context?.logger.info("Using IGDB provider.");
 
-    let iconRaw;
+    let iconRaw, coverRaw;
     const cover = currentGame.cover;
 
     if (cover !== undefined) {
       context?.logger.info("Found cover URL, using...");
-      iconRaw = await this.getCoverURL(cover);
+      iconRaw = await this.getIconURL(cover);
+      coverRaw = await this.getCoverURL(cover);
     } else {
       context?.logger.info("Missing cover URL, using fallback...");
       iconRaw = jdenticon.toPng(id, 512);
+      coverRaw = iconRaw;
     }
 
     const icon = createObject(iconRaw);
+    const coverID = createObject(coverRaw);
     let banner;
 
-    const images = [icon];
+    const images = [coverID];
     for (const art of currentGame.artworks ?? []) {
       const objectId = createObject(await this.getArtworkURL(art));
       if (!banner) {
@@ -384,6 +395,11 @@ export class IGDBProvider implements MetadataProvider {
       banner = createObject(jdenticon.toPng(id, 512));
     }
 
+    for (const screenshot of currentGame.screenshots ?? []) {
+      const objectId = createObject(await this.getScreenshotURL(screenshot));
+      images.push(objectId);
+    }
+
     context?.progress(20);
 
     const publishers: CompanyModel[] = [];
@@ -452,13 +468,25 @@ export class IGDBProvider implements MetadataProvider {
 
     const genres = await this.getGenres(currentGame.genres);
 
-    const deck = this.trimMessage(currentGame.summary, 280);
+    let description = "";
+    let shortDescription = "";
+
+    if (currentGame.summary.length > (currentGame.storyline?.length ?? 0)) {
+      description = currentGame.summary;
+      shortDescription = this.trimMessage(
+        currentGame.storyline ?? currentGame.summary,
+        280,
+      );
+    } else {
+      description = currentGame.storyline ?? currentGame.summary;
+      shortDescription = this.trimMessage(currentGame.summary, 280);
+    }
 
     const metadata = {
       id: currentGame.id.toString(),
       name: currentGame.name,
-      shortDescription: deck,
-      description: currentGame.summary,
+      shortDescription,
+      description,
       released,
 
       genres,
@@ -471,7 +499,7 @@ export class IGDBProvider implements MetadataProvider {
 
       icon,
       bannerId: banner,
-      coverId: icon,
+      coverId: coverID,
       images,
     };
 

server/internal/metadata/index.ts

@@ -306,7 +306,7 @@ export class MetadataHandler {
         result = await provider.fetchCompany({ query, createObject });
         if (result === undefined) {
           throw new Error(
-            `${provider.source()} failed to find a company for "${query}`,
+            `${provider.source()} failed to find a company for "${query}"`,
           );
         }
       } catch (e) {

server/internal/tasks/group.ts

@@ -14,6 +14,9 @@ export const taskGroups = {
   "import:game": {
     concurrency: true,
   },
+  debug: {
+    concurrency: true,
+  },
 } as const;
 
 export type TaskGroup = keyof typeof taskGroups;

server/internal/tasks/index.ts

@@ -53,6 +53,7 @@ class TaskHandler {
     "cleanup:invitations",
     "cleanup:sessions",
     "check:update",
+    "debug",
   ];
   private weeklyScheduledTasks: TaskGroup[] = ["cleanup:objects"];
 
@@ -62,6 +63,7 @@ class TaskHandler {
     this.saveScheduledTask(cleanupSessions);
     this.saveScheduledTask(checkUpdate);
     this.saveScheduledTask(cleanupObjects);
+    //this.saveScheduledTask(debug);
   }
 
   /**
@@ -162,6 +164,13 @@ class TaskHandler {
         // You can configure timestamp, level, etc. here
         timestamp: pino.stdTimeFunctions.isoTime,
         base: null, // Remove pid/hostname if not needed
+        formatters: {
+          level(label) {
+            return {
+              level: label,
+            };
+          },
+        },
       },
       logStream,
     );
@@ -339,13 +348,15 @@ class TaskHandler {
     return this.weeklyScheduledTasks;
   }
 
-  runTaskGroupByName(name: TaskGroup) {
-    const task = this.taskCreators.get(name);
-    if (!task) {
+  async runTaskGroupByName(name: TaskGroup) {
+    const taskConstructor = this.taskCreators.get(name);
+    if (!taskConstructor) {
       logger.warn(`No task found for group ${name}`);
       return;
     }
-    this.create(task());
+    const task = taskConstructor();
+    await this.create(task);
+    return task.id;
   }
 
   /**
@@ -444,7 +455,7 @@ export type TaskMessage = {
   name: string;
   success: boolean;
   progress: number;
-  error: undefined | { title: string; description: string };
+  error: null | undefined | { title: string; description: string };
   log: string[];
   reset?: boolean;
 };
@@ -470,6 +481,7 @@ interface DropTask {
 export const TaskLog = type({
   timestamp: "string",
   message: "string",
+  level: "string",
 });
 
 // /**
@@ -499,8 +511,6 @@ export const TaskLog = type({
 // }
 
 export function defineDropTask(buildTask: BuildTask): DropTask {
-  // TODO: only let one task with the same taskGroup run at the same time if specified
-
   return {
     taskGroup: buildTask.taskGroup,
     build: () => ({

server/internal/tasks/registry/debug.ts

@@ -0,0 +1,18 @@
+import { defineDropTask } from "..";
+
+export default defineDropTask({
+  buildId: () => `debug:${new Date().toISOString()}`,
+  name: "Debug Task",
+  acls: ["system:maintenance:read"],
+  taskGroup: "debug",
+  async run({ progress, logger }) {
+    const amount = 1000;
+    for (let i = 0; i < amount; i++) {
+      progress((i / amount) * 100);
+      logger.info(`dajksdkajd ${i}`);
+      logger.warn("warning");
+      logger.error("error\nmultiline and stuff\nwoah more lines");
+      await new Promise((r) => setTimeout(r, 1500));
+    }
+  },
+});

server/internal/userstats/index.ts

@@ -0,0 +1,68 @@
+/*
+Handles managing collections
+*/
+
+import cacheHandler from "../cache";
+import prisma from "../db/database";
+import { DateTime } from "luxon";
+
+class UserStatsManager {
+  // Caches the user's core library
+  private userStatsCache = cacheHandler.createCache<number>("userStats");
+
+  async cacheUserSessions() {
+    const activeSessions =
+      (
+        await prisma.client.groupBy({
+          by: ["userId"],
+          where: {
+            id: { not: "system" },
+            lastConnected: {
+              gt: DateTime.now().minus({ months: 1 }).toISO(),
+            },
+          },
+        })
+      ).length || 0;
+    await this.userStatsCache.set("activeSessions", activeSessions);
+  }
+
+  private async cacheUserCount() {
+    const userCount =
+      (await prisma.user.count({
+        where: { id: { not: "system" } },
+      })) || 0;
+    await this.userStatsCache.set("userCount", userCount);
+  }
+
+  async cacheUserStats() {
+    await this.cacheUserSessions();
+    await this.cacheUserCount();
+  }
+
+  async getUserStats() {
+    let activeSessions = await this.userStatsCache.get("activeSessions");
+    let userCount = await this.userStatsCache.get("userCount");
+
+    if (activeSessions === null || userCount === null) {
+      await this.cacheUserStats();
+      activeSessions = (await this.userStatsCache.get("activeSessions")) || 0;
+      userCount = (await this.userStatsCache.get("userCount")) || 0;
+    }
+
+    return { activeSessions, userCount };
+  }
+
+  async addUser() {
+    const userCount = (await this.userStatsCache.get("userCount")) || 0;
+    await this.userStatsCache.set("userCount", userCount + 1);
+  }
+
+  async deleteUser() {
+    const userCount = (await this.userStatsCache.get("userCount")) || 1;
+    await this.userStatsCache.set("userCount", userCount - 1);
+    await this.cacheUserSessions();
+  }
+}
+
+export const manager = new UserStatsManager();
+export default manager;

server/internal/utils/files.ts

@@ -0,0 +1,47 @@
+import fs from "fs";
+import nodePath from "path";
+
+export function fsStats(folderPath: string) {
+  const stats = fs.statfsSync(folderPath);
+  const freeSpace = stats.bavail * stats.bsize;
+  const totalSpace = stats.blocks * stats.bsize;
+  return { freeSpace, totalSpace };
+}
+
+export function getFolderSize(folderPath: string): number {
+  const files = fs.readdirSync(folderPath, { withFileTypes: true });
+
+  const paths = files.map((file) => {
+    const path = nodePath.join(folderPath, file.name);
+    if (file.isDirectory()) {
+      return getFolderSize(path);
+    }
+    if (file.isFile()) {
+      return fs.statSync(path).size;
+    }
+    return 0;
+  });
+
+  return paths
+    .flat(Infinity)
+    .reduce(
+      (accumulator: number, currentValue: number) => accumulator + currentValue,
+      0,
+    );
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes >= 1024 && bytes < Math.pow(1024, 2)) {
+    return `${(bytes / 1024).toFixed(2)} KiB`;
+  }
+  if (bytes >= Math.pow(1024, 2) && bytes < Math.pow(1024, 3)) {
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MiB`;
+  }
+  if (bytes >= Math.pow(1024, 3) && bytes < Math.pow(1024, 4)) {
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GiB`;
+  }
+  return `${(bytes / Math.pow(1024, 4)).toFixed(2)} TiB`;
+}

server/middleware/latency.ts

@@ -1,3 +1,3 @@
 export default defineEventHandler(async () => {
-  // await new Promise((r) => setTimeout(r, 700));
+  // await new Promise((r) => setTimeout(r, 1400));
 });

server/plugins/03.metadata-init.ts

@@ -5,11 +5,13 @@ import { GiantBombProvider } from "../internal/metadata/giantbomb";
 import { IGDBProvider } from "../internal/metadata/igdb";
 import { ManualMetadataProvider } from "../internal/metadata/manual";
 import { PCGamingWikiProvider } from "../internal/metadata/pcgamingwiki";
+import { SteamProvider } from "../internal/metadata/steam";
 import { logger } from "~/server/internal/logging";
 
 export default defineNitroPlugin(async (_nitro) => {
   const metadataProviders = [
     GiantBombProvider,
+    SteamProvider,
     PCGamingWikiProvider,
     IGDBProvider,
   ];

utils/array.ts

@@ -0,0 +1,6 @@
+export const sum = (array: number[]) =>
+  array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+
+export function lastItem<T>(array: T[]) {
+  return array[array.length - 1];
+}

utils/colors.ts

@@ -0,0 +1,76 @@
+export const CHART_COLOURS = {
+  // Bar colours
+  red: {
+    fill: "fill-red-700",
+    bg: "bg-red-700",
+  },
+  orange: {
+    fill: "fill-orange-800",
+    bg: "bg-orange-800",
+  },
+  blue: {
+    fill: "fill-blue-900",
+    bg: "bg-blue-900",
+  },
+
+  // Pie colours
+  lightblue: {
+    fill: "fill-blue-400",
+    bg: "bg-blue-400",
+  },
+  dropblue: {
+    fill: "fill-blue-600",
+    bg: "bg-blue-600",
+  },
+  green: {
+    fill: "fill-green-500",
+    bg: "bg-green-500",
+  },
+  yellow: {
+    fill: "fill-yellow-800",
+    bg: "bg-yellow-800",
+  },
+  purple: {
+    fill: "fill-purple-500",
+    bg: "bg-purple-500",
+  },
+  zinc: {
+    fill: "fill-zinc-950",
+    bg: "bg-zinc-950",
+  },
+  pink: {
+    fill: "fill-pink-800",
+    bg: "bg-pink-800",
+  },
+
+  lime: {
+    fill: "fill-lime-600",
+    bg: "bg-lime-600",
+  },
+  emerald: {
+    fill: "fill-emerald-500",
+    bg: "bg-emerald-500",
+  },
+  slate: {
+    fill: "fill-slate-800",
+    bg: "bg-slate-800",
+  },
+};
+export const PIE_COLOURS: ChartColour[] = [
+  "lightblue",
+  "dropblue",
+  "purple",
+  "emerald",
+];
+
+export type ChartColour = keyof typeof CHART_COLOURS;
+
+export function getBarColor(percentage: number): ChartColour {
+  if (percentage <= 70) {
+    return "blue";
+  }
+  if (percentage > 70 && percentage <= 90) {
+    return "orange";
+  }
+  return "red";
+}

utils/parseTaskLog.ts

@@ -1,13 +1,31 @@
 import type { TaskLog } from "~/server/internal/tasks";
 
+const labelNumberMap = {
+  100: "silent",
+  60: "fatal",
+  50: "error",
+  40: "warn",
+  30: "info",
+  20: "debug",
+  10: "trace",
+  0: "off",
+};
+
 export function parseTaskLog(
   logStr?: string | undefined,
 ): typeof TaskLog.infer {
-  if (!logStr) return { message: "", timestamp: "" };
+  if (!logStr) return { message: "", timestamp: "", level: "" };
   const log = JSON.parse(logStr);
 
+  if (typeof log.level === "number") {
+    log.level = labelNumberMap[
+      log.level as keyof typeof labelNumberMap
+    ] as string;
+  }
+
   return {
     message: log.msg,
     timestamp: log.time,
+    level: log.level,
   };
 }

utils/tuple.ts

@@ -0,0 +1,13 @@
+export default class Tuple {
+  x: number;
+  y: number;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+
+  toString() {
+    return `${this.x},${this.y}`;
+  }
+}