Merge branch 'develop' into redistributable

... copilot suggested this

I feel dirty.

.github/workflows/release.yml

@@ -5,8 +5,8 @@ on:
   release:
     types: [published]
   # This can be used to automatically publish nightlies at UTC nighttime
-  #schedule:
+  schedule:
-  #  - cron: "0 2 * * *" # run at 2 AM UTC
+    - cron: "0 2 * * *" # run at 2 AM UTC
 
 jobs:
   web:

app/components/GameEditor/Version.vue

@@ -1,285 +0,0 @@
-<!-- eslint-disable vue/no-v-html -->
-<template>
-  <div v-if="game && unimportedVersions" class="p-8">
-    <div>
-      <div class="sm:flex sm:items-center">
-        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold text-zinc-100">Versions</h1>
-          <p class="mt-2 text-sm text-zinc-400 max-w-lg">
-            Versions are a collection of files that are downloaded to clients.
-            Each version can have multiple configurations, for different
-            platforms.
-          </p>
-        </div>
-        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-          <NuxtLink
-            :href="canImport ? `/admin/library/g/${game.id}/import` : ''"
-            type="button"
-            :class="[
-              canImport ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-800/50',
-              'inline-flex w-fit items-center gap-x-2 rounded-md  px-3 py-1 text-sm font-semibold font-display text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
-            ]"
-          >
-            {{
-              canImport
-                ? $t("library.admin.import.version.import")
-                : $t("library.admin.import.version.noVersions")
-            }}
-          </NuxtLink>
-        </div>
-      </div>
-      <div class="mt-8 rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm">
-        <div>
-          <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"
-                >
-                  Version Name
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Imported
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Platforms
-                </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="version in game.versions"
-                :key="version.versionId"
-                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"
-                >
-                  {{ version.versionName }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  <RelativeTime :date="version.created" />
-                </td>
-                <td class="px-3 py-4">
-                  <ul class="space-y-4">
-                    <li
-                      v-for="gameVersion in version.gameVersions"
-                      :key="gameVersion.versionId"
-                      class="px-3 py-2 border border-zinc-800 rounded-lg shadow"
-                    >
-                      <div>
-                        <div
-                          class="text-sm flex items-center gap-x-2 text-zinc-200 font-semibold"
-                        >
-                          <IconsPlatform
-                            :platform="
-                              platforms[gameVersion.platformId].platformIcon.key
-                            "
-                            :fallback="
-                              platforms[gameVersion.platformId].platformIcon
-                                .fallback
-                            "
-                            class="size-5 text-blue-500"
-                          />
-                          <span class="block truncate">{{
-                            platforms[gameVersion.platformId].name
-                          }}</span>
-                        </div>
-
-                        <!-- launch commands -->
-                        <div class="space-y-1 mt-4">
-                          <div
-                            v-if="gameVersion.install"
-                            class="flex items-center justify-between"
-                          >
-                            <span
-                              class="font-display text-xs text-zinc-300 font-semibold uppercase tracking-wide"
-                              >Install</span
-                            >
-
-                            <div
-                              class="whitespace-nowrap font-mono text-xs text-zinc-300 bg-zinc-950 px-1 py-0.5 w-fit rounded"
-                            >
-                              <span class="text-zinc-700">(install dir)/</span
-                              >{{ gameVersion.install.command }}
-                              {{ gameVersion.install.args }}
-                            </div>
-                          </div>
-
-                          <div>
-                            <span class="font-semibold text-sm text-zinc-100"
-                              >Launch options</span
-                            >
-                            <ul class="divide-y divide-zinc-700">
-                              <li
-                                v-for="launch in gameVersion.launches"
-                                :key="launch.command"
-                                class="ml-2 py-2 flex justify-between items-center"
-                              >
-                                <h1
-                                  class="font-display text-xs text-zinc-300 font-semibold uppercase tracking-wide"
-                                >
-                                  {{ launch.name }}
-                                </h1>
-                                <div
-                                  class="mt-1 whitespace-nowrap font-mono text-xs text-zinc-300 bg-zinc-950 px-1 py-0.5 w-fit rounded"
-                                >
-                                  <span class="text-zinc-700"
-                                    >(install dir)/</span
-                                  >{{ launch.command }} {{ launch.args }}
-                                </div>
-                              </li>
-                            </ul>
-                          </div>
-
-                          <div
-                            v-if="gameVersion.uninstall"
-                            class="flex items-center justify-between"
-                          >
-                            <span
-                              class="font-display text-xs text-zinc-300 font-semibold uppercase tracking-wide"
-                              >Uninstall</span
-                            >
-
-                            <div
-                              class="whitespace-nowrap font-mono text-xs text-zinc-300 bg-zinc-950 px-1 py-0.5 w-fit rounded"
-                            >
-                              <span class="text-zinc-700">(install dir)/</span
-                              >{{ gameVersion.uninstall.command }}
-                              {{ gameVersion.uninstall.args }}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-                </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="() => deleteVersion(version.versionId)"
-                  >
-                    Delete
-                    <span class="sr-only">
-                      {{ $t("chars.srComma", [version.versionName]) }}
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr v-if="game.versions.length === 0">
-                <td colspan="5" class="py-8 text-center text-sm text-zinc-400">
-                  No versions
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div v-else class="grow w-full flex items-center justify-center">
-    <div class="flex flex-col items-center">
-      <ExclamationCircleIcon
-        class="h-12 w-12 text-red-600"
-        aria-hidden="true"
-      />
-      <div class="mt-3 text-center sm:mt-5">
-        <h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
-          {{ $t("library.admin.offlineTitle") }}
-        </h1>
-        <div class="mt-4">
-          <p class="text-sm text-zinc-400 max-w-md">
-            {{ $t("library.admin.offline") }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { SerializeObject, TypedInternalResponse } from "nitropack";
-import type { H3Error } from "h3";
-import { ExclamationCircleIcon } from "@heroicons/vue/24/outline";
-
-// TODO implement UI for this page
-
-const props = defineProps<{ unimportedVersions: string[] }>();
-
-const { t } = useI18n();
-
-const hasDeleted = ref(false);
-
-const canImport = computed(
-  () => hasDeleted.value || props.unimportedVersions.length > 0,
-);
-
-type GameFetchType = TypedInternalResponse<
-  "/api/v1/admin/game/:id",
-  unknown,
-  "get"
->["game"];
-const game = defineModel<SerializeObject<GameFetchType>>({ required: true });
-if (!game.value)
-  throw createError({
-    statusCode: 500,
-    message: "Game not provided to editor component",
-  });
-
-const rawPlatforms = await useAdminPlatforms();
-const platforms = Object.fromEntries(
-  renderPlatforms(rawPlatforms).map((v) => [v.param, v]),
-);
-
-async function updateVersionOrder() {
-  try {
-    const newVersions = await $dropFetch("/api/v1/admin/game/version", {
-      method: "PATCH",
-      body: {
-        id: game.value.id,
-        versions: game.value.versions.map((e) => e.versionId),
-      },
-    });
-    game.value.versions = newVersions;
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: t("errors.version.order.title"),
-        description: t("errors.version.order.desc", {
-          error: (e as H3Error)?.message ?? t("errors.unknown"),
-        }),
-        buttonText: t("common.close"),
-      },
-      (e, c) => c(),
-    );
-  }
-}
-
-async function deleteVersion(versionId: string) {
-  await $dropFetch("/api/v1/admin/game/version", {
-    method: "DELETE",
-    body: {
-      id: versionId,
-    },
-    failTitle: "Failed to delete version.",
-  });
-  game.value.versions.splice(
-    game.value.versions.findIndex((e) => e.versionId === versionId),
-    1,
-  );
-  hasDeleted.value = true;
-}
-</script>

app/components/Icons/GamepadIcon.vue

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

app/components/PieChart/PieChart.vue

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

app/components/PieChart/PieSlice.vue

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

app/components/PieChart/types.d.ts

@@ -1,19 +0,0 @@
-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;
-};

app/components/PieChart/utils.ts

@@ -1,50 +0,0 @@
-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);

app/components/ProgressBar.vue

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

app/components/RankingList.vue

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

app/components/SourceTable.vue

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

app/components/TileWithLink.vue

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

app/pages/admin/index.vue

@@ -1,177 +0,0 @@
-<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 { RankItem } from "~/components/RankingList.vue";
-import type { GameSize } from "~~/server/internal/gamesize";
-
-definePageMeta({
-  layout: "admin",
-});
-
-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>

app/pages/admin/library/r/[id]/import.vue

@@ -1,478 +0,0 @@
-<template>
-  <div class="flex flex-col gap-y-4">
-    <Listbox
-      as="div"
-      :model-value="currentlySelectedVersion"
-      class="max-w-lg"
-      @update:model-value="(value) => updateCurrentlySelectedVersion(value)"
-    >
-      <ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100">{{
-        $t("library.admin.import.version.version")
-      }}</ListboxLabel>
-      <div class="relative mt-2">
-        <ListboxButton
-          class="relative w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6"
-        >
-          <span v-if="currentlySelectedVersion != -1" class="block truncate">{{
-            versions[currentlySelectedVersion]
-          }}</span>
-          <span v-else class="block truncate text-zinc-600">{{
-            $t("library.admin.import.selectDir")
-          }}</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-zinc-800 focus:outline-none sm:text-sm"
-          >
-            <ListboxOption
-              v-for="(version, versionIdx) in versions"
-              :key="version"
-              v-slot="{ active, selected }"
-              as="template"
-              :value="versionIdx"
-            >
-              <li
-                :class="[
-                  active ? 'bg-blue-600 text-white' : 'text-zinc-100',
-                  'relative cursor-default select-none py-2 pl-3 pr-9',
-                ]"
-              >
-                <span
-                  :class="[
-                    selected ? 'font-semibold' : 'font-normal',
-                    'block truncate',
-                  ]"
-                  >{{ version }}</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 v-if="versionGuesses" class="flex flex-col gap-4">
-      <!-- version name -->
-      <div class="max-w-lg">
-        <label
-          for="startup"
-          class="block text-sm font-medium leading-6 text-zinc-100"
-          >Version name</label
-        >
-        <p class="text-zinc-400 text-xs">
-          Shown to users when selecting what version to install.
-        </p>
-        <div class="mt-2">
-          <input
-            id="name"
-            v-model="versionSettings.name"
-            name="name"
-            type="text"
-            required
-            placeholder="my version name"
-            class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-950 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800 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>
-
-      <!-- install command -->
-      <div class="max-w-lg">
-        <label
-          for="startup"
-          class="block text-sm font-medium leading-6 text-zinc-100"
-          >{{ $t("library.admin.import.version.setupCmd") }}</label
-        >
-        <p class="text-zinc-400 text-xs">
-          {{ $t("library.admin.import.version.setupDesc") }}
-        </p>
-        <div class="mt-2">
-          <div
-            class="flex w-fit rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
-          >
-            <span
-              class="flex select-none items-center pl-3 text-zinc-500 sm:text-sm"
-            >
-              {{ $t("library.admin.import.version.installDir") }}
-            </span>
-            <PreloadSelector
-              :value="versionSettings.install"
-              :guesses="versionGuesses"
-              @update="(v) => updateInstallCommand(v)"
-            />
-            <input
-              id="startup"
-              v-model="versionSettings.installArgs"
-              type="text"
-              name="startup"
-              class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
-              placeholder="--setup"
-            />
-          </div>
-        </div>
-      </div>
-      <!-- launch commands -->
-      <div class="relative max-w-3xl">
-        <label
-          for="startup"
-          class="block text-sm font-medium leading-6 text-zinc-100"
-          >{{ $t("library.admin.import.version.launchCmd") }}</label
-        >
-        <p class="text-zinc-400 text-xs">
-          {{ $t("library.admin.import.version.launchDesc") }}
-        </p>
-        <div class="mt-2 ml-4 flex flex-col gap-y-2 items-start">
-          <div
-            v-for="(launch, launchIdx) in versionSettings.launches"
-            :key="launchIdx"
-            class="inline-flex items-center gap-x-2"
-          >
-            <input
-              id="launch-name"
-              v-model="launch.name"
-              type="text"
-              name="launch-name"
-              class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-950 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-              placeholder="My Launch Command"
-            />
-
-            <div
-              class="flex w-full rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
-            >
-              <span
-                class="flex select-none items-center pl-3 text-zinc-500 sm:text-sm"
-                >{{ $t("library.admin.import.version.installDir") }}</span
-              >
-              <PreloadSelector
-                :value="launch.launchCommand"
-                :guesses="versionGuesses"
-                @update="(v) => updateLaunchCommand(launchIdx, v)"
-              />
-              <input
-                id="startup"
-                v-model="launch.launchArgs"
-                type="text"
-                name="startup"
-                class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
-                placeholder="--launch"
-              />
-            </div>
-            <button
-              class="transition bg-zinc-800 rounded-sm aspect-square p-1 text-zinc-600 hover:text-red-600 hover:bg-red-600/20"
-              @click="() => versionSettings.launches!.splice(launchIdx, 1)"
-            >
-              <TrashIcon class="size-5" />
-            </button>
-          </div>
-
-          <p
-            v-if="versionSettings.launches!.length == 0"
-            class="uppercase font-display font-bold text-zinc-500 text-xs"
-          >
-            No launch commands
-          </p>
-
-          <LoadingButton
-            :loading="false"
-            class="inline-flex items-center gap-x-4"
-            @click="
-              () =>
-                versionSettings.launches!.push({
-                  name: '',
-                  description: '',
-                  launchCommand: '',
-                  launchArgs: '',
-                })
-            "
-          >
-            Add new <PlusIcon class="size-5" />
-          </LoadingButton>
-        </div>
-      </div>
-      <!-- uninstall command -->
-      <div class="max-w-lg">
-        <label
-          for="startup"
-          class="block text-sm font-medium leading-6 text-zinc-100"
-          >Uninstall command</label
-        >
-        <p class="text-zinc-400 text-xs">
-          Executable to be run on uninstalling a game. Useful for installer-only
-          games.
-        </p>
-        <div class="mt-2">
-          <div
-            class="flex w-fit rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
-          >
-            <span
-              class="flex select-none items-center pl-3 text-zinc-500 sm:text-sm"
-            >
-              {{ $t("library.admin.import.version.installDir") }}
-            </span>
-            <PreloadSelector
-              :value="versionSettings.uninstall"
-              :guesses="versionGuesses"
-              @update="(v) => updateUninstallCommand(v)"
-            />
-            <input
-              id="startup"
-              v-model="versionSettings.uninstallArgs"
-              type="text"
-              name="startup"
-              class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
-              placeholder="--uninstall"
-            />
-          </div>
-        </div>
-      </div>
-
-      <PlatformSelector
-        v-model="versionSettings.platform"
-        class="max-w-lg"
-        :platforms="allPlatforms"
-      >
-        {{ $t("library.admin.import.version.platform") }}
-      </PlatformSelector>
-      <SwitchGroup as="div" class="flex items-center justify-between max-w-lg">
-        <span class="flex flex-grow flex-col">
-          <SwitchLabel
-            as="span"
-            class="text-sm font-medium leading-6 text-zinc-100"
-            passive
-          >
-            {{ $t("library.admin.import.version.updateMode") }}
-          </SwitchLabel>
-          <SwitchDescription as="span" class="text-sm text-zinc-400">
-            {{ $t("library.admin.import.version.updateModeDesc") }}
-          </SwitchDescription>
-        </span>
-        <Switch
-          :model-value="versionSettings.delta || false"
-          :class="[
-            versionSettings.delta ? 'bg-blue-600' : 'bg-zinc-800',
-            'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2',
-          ]"
-          @update:model-value="(v) => (versionSettings.delta = v)"
-        >
-          <span
-            aria-hidden="true"
-            :class="[
-              versionSettings.delta ? 'translate-x-5' : 'translate-x-0',
-              'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
-            ]"
-          />
-        </Switch>
-      </SwitchGroup>
-      <Disclosure v-slot="{ open }" as="div" class="py-2 max-w-lg">
-        <dt>
-          <DisclosureButton
-            class="border-b border-zinc-600 pb-2 flex w-full items-start justify-between text-left text-zinc-100"
-          >
-            <span class="text-base/7 font-semibold">
-              {{ $t("library.admin.import.version.advancedOptions") }}
-            </span>
-            <span class="ml-6 flex h-7 items-center">
-              <ChevronUpIcon v-if="!open" class="size-6" aria-hidden="true" />
-              <ChevronDownIcon v-else class="size-6" aria-hidden="true" />
-            </span>
-          </DisclosureButton>
-        </dt>
-        <DisclosurePanel
-          as="dd"
-          class="bg-zinc-950/30 p-3 rounded-b-lg mt-2 flex flex-col gap-y-4"
-        >
-          <!-- UMU launcher configuration -->
-
-          <div class="text-zinc-400">
-            {{ $t("library.admin.import.version.noAdv") }}
-          </div>
-        </DisclosurePanel>
-      </Disclosure>
-
-      <LoadingButton
-        class="w-fit"
-        :loading="importLoading"
-        @click="startImport_wrapper"
-      >
-        {{ $t("library.admin.import.import") }}
-      </LoadingButton>
-      <div v-if="importError" class="mt-4 w-fit rounded-md bg-red-600/10 p-4">
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
-          </div>
-          <div class="ml-3">
-            <h3 class="text-sm font-medium text-red-600">
-              {{ importError }}
-            </h3>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-else-if="currentlySelectedVersion != -1"
-      role="status"
-      class="inline-flex text-zinc-100 font-display font-semibold items-center gap-x-4"
-    >
-      {{ $t("library.admin.import.version.loadingVersion") }}
-      <svg
-        aria-hidden="true"
-        class="w-6 h-6 text-transparent animate-spin fill-white"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  Listbox,
-  ListboxButton,
-  ListboxLabel,
-  ListboxOption,
-  ListboxOptions,
-  Switch,
-  SwitchDescription,
-  SwitchGroup,
-  SwitchLabel,
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from "@headlessui/vue";
-import { XCircleIcon } from "@heroicons/vue/16/solid";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
-import {
-  PlusIcon,
-  TrashIcon,
-} from "@heroicons/vue/24/outline";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/solid";
-import type { SerializeObject } from "nitropack";
-import type { ImportRedistVersion } from "~~/server/api/v1/admin/import/version/index.post";
-
-definePageMeta({
-  layout: "admin",
-});
-
-const router = useRouter();
-const { t } = useI18n();
-const route = useRoute();
-const redistId = route.params.id.toString();
-const versions = await $dropFetch(
-  `/api/v1/admin/import/version?id=${encodeURIComponent(redistId)}&mode=redist`,
-);
-const userPlatforms = await useAdminPlatforms();
-const allPlatforms = renderPlatforms(userPlatforms);
-const currentlySelectedVersion = ref(-1);
-
-const versionSettings = ref<Partial<ImportRedistVersion>>({
-  launches: [],
-});
-
-const versionGuesses =
-  ref<
-    Array<SerializeObject<{ platform: PlatformRenderable; filename: string }>>
-  >();
-
-function updateLaunchCommand(idx: number, value: string) {
-  versionSettings.value.launches![idx].launchCommand = value;
-  autosetPlatform(value);
-}
-
-function updateInstallCommand(value: string) {
-  versionSettings.value.install = value;
-  autosetPlatform(value);
-}
-
-function updateUninstallCommand(value: string) {
-  versionSettings.value.uninstall = value;
-  autosetPlatform(value);
-}
-
-function autosetPlatform(value: string) {
-  if (!versionGuesses.value) return;
-  if (versionSettings.value.platform) return;
-  const guessIndex = versionGuesses.value.findIndex(
-    (e) => e.filename === value,
-  );
-  if (guessIndex == -1) return;
-  versionSettings.value.platform =
-    versionGuesses.value[guessIndex].platform.param;
-}
-
-const importLoading = ref(false);
-const importError = ref<string | undefined>();
-
-async function updateCurrentlySelectedVersion(value: number) {
-  if (currentlySelectedVersion.value == value) return;
-  currentlySelectedVersion.value = value;
-  const version = versions[currentlySelectedVersion.value];
-  const options = await $dropFetch(
-    `/api/v1/admin/import/version/preload?id=${encodeURIComponent(
-      redistId,
-    )}&version=${encodeURIComponent(version)}&mode=redist`,
-  );
-  versionGuesses.value = options.map((e) => ({
-    ...e,
-    platform: allPlatforms.find((v) => v.param === e.platform)!,
-  }));
-  versionSettings.value.name = version;
-}
-
-async function startImport() {
-  if (!versionSettings.value) return;
-  const taskId = await $dropFetch("/api/v1/admin/import/version", {
-    method: "POST",
-    body: {
-      id: redistId,
-      version: versions[currentlySelectedVersion.value],
-      mode: "redist",
-      ...versionSettings.value,
-    },
-  });
-  router.push(`/admin/task/${taskId.taskId}`);
-}
-
-function startImport_wrapper() {
-  importLoading.value = true;
-  startImport()
-    .catch((error) => {
-      importError.value = error.message ?? t("errors.unknown");
-    })
-    .finally(() => {
-      importLoading.value = false;
-    });
-}
-</script>

app/utils/array.ts

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

app/utils/colors.ts

@@ -1,76 +0,0 @@
-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";
-}

app/utils/tuple.ts

@@ -1,13 +0,0 @@
-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}`;
-  }
-}

assets/tailwindcss.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
-@config "../../tailwind.config.js";
+@config "../tailwind.config.js";
 
 @layer base {
   input[type="number"]::-webkit-outer-spin-button,

components/Auth/Simple.vue

@@ -86,7 +86,7 @@
 
 <script setup lang="ts">
 import { XCircleIcon } from "@heroicons/vue/20/solid";
-import type { UserModel } from "~~/prisma/client/models";
+import type { UserModel } from "~/prisma/client/models";
 
 const username = ref("");
 const password = ref("");

components/CarouselPagination.vue

@@ -4,10 +4,9 @@
       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>
@@ -19,8 +18,8 @@ const carousel = inject(injectCarousel)!;
 
 const amount = carousel.maxSlide - carousel.minSlide + 1;
 
-function slideTo(index: number) {
+// function slideTo(index: number) {
-  const offsetIndex = index + carousel.minSlide;
+//   const offsetIndex = index + carousel.minSlide;
-  carousel.nav.slideTo(offsetIndex);
+//   carousel.nav.slideTo(offsetIndex);
-}
+// }
 </script>

components/GameCarousel.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import type { GameModel } from "~~/prisma/client/models";
+import type { GameModel } from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{

components/GameEditor/Metadata.vue

@@ -29,23 +29,6 @@
 
         <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 -->
@@ -461,7 +444,7 @@
 </template>
 
 <script setup lang="ts">
-import type { GameModel, GameTagModel } from "~~/prisma/client/models";
+import type { GameModel, GameTagModel } from "~/prisma/client/models";
 import { micromark } from "micromark";
 import {
   CheckIcon,
@@ -508,38 +491,11 @@ 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);
@@ -605,6 +561,7 @@ 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

@@ -1,97 +1,190 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div v-if="game && unimportedVersions">
+  <div v-if="game && unimportedVersions" class="p-8">
-    <div class="grow flex flex-row gap-y-8">
+    <div>
-      <div class="grow w-full h-full px-6 py-4 flex flex-col"></div>
+      <div class="sm:flex sm:items-center">
-      <div
+        <div class="sm:flex-auto">
-        class="lg:overflow-y-auto lg:border-l lg:border-zinc-800 lg:block lg:inset-y-0 lg:z-50 lg:w-[30vw] flex flex-col gap-y-8 px-6 py-4"
+          <h1 class="text-base font-semibold text-zinc-100">Versions</h1>
-      >
+          <p class="mt-2 text-sm text-zinc-400 max-w-lg">
-        <!-- version manager -->
+            Versions are a collection of files that are downloaded to clients.
+            Each version can have multiple configurations, for different
+            platforms.
+          </p>
+        </div>
+        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+          <NuxtLink
+            :href="canImport ? `/admin/library/g/${game.id}/import` : ''"
+            type="button"
+            :class="[
+              canImport ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-800/50',
+              'inline-flex w-fit items-center gap-x-2 rounded-md  px-3 py-1 text-sm font-semibold font-display text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
+            ]"
+          >
+            {{
+              canImport
+                ? $t("library.admin.import.version.import")
+                : $t("library.admin.import.version.noVersions")
+            }}
+          </NuxtLink>
+        </div>
+      </div>
+      <div class="mt-8 rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm">
         <div>
-          <!-- version priority -->
+          <table class="min-w-full divide-y divide-zinc-800">
-          <div>
+            <thead>
-            <div class="border-b border-zinc-800 pb-3">
+              <tr class="bg-zinc-800/50">
-              <div
+                <th
-                class="flex flex-wrap items-center justify-between sm:flex-nowrap"
+                  scope="col"
-              >
+                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
-                <h3
-                  class="text-base font-semibold font-display leading-6 text-zinc-100"
                 >
-                  {{ $t("library.admin.versionPriority") }}
+                  Version Name
-
+                </th>
-                  <!-- import games button -->
+                <th
-
+                  scope="col"
-                  <NuxtLink
+                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                    :href="canImport ? `/admin/library/${game.id}/import` : ''"
-                    type="button"
-                    :class="[
-                      canImport
-                        ? 'bg-blue-600 hover:bg-blue-700'
-                        : 'bg-blue-800/50',
-                      'inline-flex w-fit items-center gap-x-2 rounded-md  px-3 py-1 text-sm font-semibold font-display text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
-                    ]"
-                  >
-                    {{
-                      canImport
-                        ? $t("library.admin.import.version.import")
-                        : $t("library.admin.import.version.noVersions")
-                    }}
-                  </NuxtLink>
-                </h3>
-              </div>
-            </div>
-
-            <div class="mt-4 text-center w-full text-sm text-zinc-600">
-              {{ $t("lowest") }}
-            </div>
-            <draggable
-              :list="game.versions"
-              handle=".handle"
-              class="mt-2 space-y-4"
-              @update="() => updateVersionOrder()"
-            >
-              <template
-                #item="{ element: item }: { element: GameVersionModelWithSize }"
-              >
-                <div
-                  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 flex-none">
+                  Imported
-                    {{ item.versionName }}
+                </th>
-                  </div>
+                <th
-                  <div
+                  scope="col"
-                    class="text-right text-zinc-400 text-xs font-normal flex-auto pr-4"
+                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                >
+                  Platforms
+                </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="version in game.versions"
+                :key="version.versionId"
+                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"
+                >
+                  {{ version.versionName }}
+                </td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                  <RelativeTime :date="version.created" />
+                </td>
+                <td class="px-3 py-4">
+                  <ul class="space-y-4">
+                    <li
+                      v-for="gameVersion in version.gameVersions"
+                      :key="gameVersion.versionId"
+                      class="px-3 py-2 bg-zinc-800 rounded-lg shadow"
+                    >
+                      <div>
+                        <div
+                          class="text-sm flex items-center text-zinc-200 font-semibold"
+                        >
+                          <IconsPlatform
+                            :platform="
+                              platforms[gameVersion.platformId].platformIcon.key
+                            "
+                            :fallback="
+                              platforms[gameVersion.platformId].platformIcon
+                                .fallback
+                            "
+                            class="size-5 text-blue-500"
+                          />
+                          <span class="ml-3 block truncate">{{
+                            platforms[gameVersion.platformId].name
+                          }}</span>
+                        </div>
+
+                        <!-- launch commands -->
+                        <div class="space-y-1 mt-4">
+                          <div
+                            v-if="gameVersion.install"
+                            class="flex items-center justify-between"
+                          >
+                            <span
+                              class="font-display text-xs text-zinc-300 font-semibold uppercase tracking-wide"
+                              >Install</span
+                            >
+
+                            <div
+                              class="whitespace-nowrap font-mono text-xs text-zinc-300 bg-zinc-950 px-1 py-0.5 w-fit rounded"
+                            >
+                              <span class="text-zinc-700">(install dir)/</span
+                              >{{ gameVersion.install.command }}
+                              {{ gameVersion.install.args }}
+                            </div>
+                          </div>
+
+                          <div>
+                            <span class="font-semibold text-sm text-zinc-100"
+                              >Launch options</span
+                            >
+                            <ul class="divide-y divide-zinc-700">
+                              <li
+                                v-for="launch in gameVersion.launches"
+                                :key="launch.command"
+                                class="ml-2 py-2 flex justify-between items-center"
+                              >
+                                <h1
+                                  class="font-display text-xs text-zinc-300 font-semibold uppercase tracking-wide"
+                                >
+                                  {{ launch.name }}
+                                </h1>
+                                <div
+                                  class="mt-1 whitespace-nowrap font-mono text-xs text-zinc-300 bg-zinc-950 px-1 py-0.5 w-fit rounded"
+                                >
+                                  <span class="text-zinc-700"
+                                    >(install dir)/</span
+                                  >{{ launch.command }} {{ launch.args }}
+                                </div>
+                              </li>
+                            </ul>
+                          </div>
+
+                          <div
+                            v-if="gameVersion.uninstall"
+                            class="flex items-center justify-between"
+                          >
+                            <span
+                              class="font-display text-xs text-zinc-300 font-semibold uppercase tracking-wide"
+                              >Uninstall</span
+                            >
+
+                            <div
+                              class="whitespace-nowrap font-mono text-xs text-zinc-300 bg-zinc-950 px-1 py-0.5 w-fit rounded"
+                            >
+                              <span class="text-zinc-700">(install dir)/</span
+                              >{{ gameVersion.uninstall.command }}
+                              {{ gameVersion.uninstall.args }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </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="() => deleteVersion(version.versionId)"
                   >
-                    {{ item.size && formatBytes(item.size) }}
+                    Delete
-                  </div>
+                    <span class="sr-only">
-                  <div class="text-zinc-400">
+                      {{ $t("chars.srComma", [version.versionName]) }}
-                    {{ item.delta ? $t("library.admin.version.delta") : "" }}
+                    </span>
-                  </div>
+                  </button>
-                  <div class="inline-flex items-center gap-x-2">
+                </td>
-                    <component
+              </tr>
-                      :is="PLATFORM_ICONS[item.platform]"
+              <tr v-if="game.versions.length === 0">
-                      class="size-6 text-blue-600"
+                <td colspan="5" class="py-8 text-center text-sm text-zinc-400">
-                    />
+                  No versions
-                    <Bars3Icon
+                </td>
-                      class="cursor-move w-6 h-6 text-zinc-400 handle"
+              </tr>
-                    />
+            </tbody>
-                    <button @click="() => deleteVersion(item.versionName)">
+          </table>
-                      <TrashIcon class="w-5 h-5 text-red-600" />
-                    </button>
-                  </div>
-                </div>
-              </template>
-            </draggable>
-            <div
-              v-if="game.versions.length == 0"
-              class="text-center font-bold text-zinc-400 my-3"
-            >
-              {{ $t("library.admin.version.noVersionsAdded") }}
-            </div>
-            <div class="mt-2 text-center w-full text-sm text-zinc-600">
-              {{ $t("highest") }}
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -117,12 +210,9 @@
 </template>
 
 <script setup lang="ts">
-import type { GameModel, GameVersionModel } from "~/prisma/client/models";
+import type { SerializeObject, TypedInternalResponse } from "nitropack";
-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
 
@@ -136,27 +226,30 @@ const canImport = computed(
   () => hasDeleted.value || props.unimportedVersions.length > 0,
 );
 
-type GameVersionModelWithSize = GameVersionModel & { size: number };
+type GameFetchType = TypedInternalResponse<
-
+  "/api/v1/admin/game/:id",
-type GameAndVersions = GameModel & {
+  unknown,
-  versions: GameVersionModelWithSize[];
+  "get"
-};
+>["game"];
-const game = defineModel<SerializeObject<GameAndVersions>>() as Ref<
+const game = defineModel<SerializeObject<GameFetchType>>({ required: true });
-  SerializeObject<GameAndVersions>
->;
 if (!game.value)
   throw createError({
     statusCode: 500,
-    statusMessage: "Game not provided to editor component",
+    message: "Game not provided to editor component",
   });
 
+const rawPlatforms = await useAdminPlatforms();
+const platforms = Object.fromEntries(
+  renderPlatforms(rawPlatforms).map((v) => [v.param, v]),
+);
+
 async function updateVersionOrder() {
   try {
     const newVersions = await $dropFetch("/api/v1/admin/game/version", {
       method: "PATCH",
       body: {
         id: game.value.id,
-        versions: game.value.versions.map((e) => e.versionName),
+        versions: game.value.versions.map((e) => e.versionId),
       },
     });
     game.value.versions = newVersions;
@@ -166,7 +259,7 @@ async function updateVersionOrder() {
       {
         title: t("errors.version.order.title"),
         description: t("errors.version.order.desc", {
-          error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+          error: (e as H3Error)?.message ?? t("errors.unknown"),
         }),
         buttonText: t("common.close"),
       },
@@ -175,32 +268,18 @@ async function updateVersionOrder() {
   }
 }
 
-async function deleteVersion(versionName: string) {
+async function deleteVersion(versionId: string) {
-  try {
+  await $dropFetch("/api/v1/admin/game/version", {
-    await $dropFetch("/api/v1/admin/game/version", {
+    method: "DELETE",
-      method: "DELETE",
+    body: {
-      body: {
+      id: versionId,
-        id: game.value.id,
+    },
-        versionName: versionName,
+    failTitle: "Failed to delete version.",
-      },
+  });
-    });
+  game.value.versions.splice(
-    game.value.versions.splice(
+    game.value.versions.findIndex((e) => e.versionId === versionId),
-      game.value.versions.findIndex((e) => e.versionName === versionName),
+    1,
-      1,
+  );
-    );
+  hasDeleted.value = true;
-    hasDeleted.value = true;
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: t("errors.version.delete.title"),
-        description: t("errors.version.delete.desc", {
-          error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
-        }),
-        buttonText: t("common.close"),
-      },
-      (e, c) => c(),
-    );
-  }
 }
 </script>

components/GamePanel.vue

@@ -77,7 +77,7 @@ const {
       }>
     | undefined
     | null;
-  href?: string | undefined;
+  href?: string;
   showTitleDescription?: boolean;
   animate?: boolean;
   defaultPlaceholder?: boolean;

components/GameSearchResultWidget.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import type { GameMetadataSearchResult } from "~~/server/internal/metadata/types";
+import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 
 const { game } = defineProps<{
   game: Omit<GameMetadataSearchResult, "year"> & { sourceName?: string };

components/Icons/Platform.vue

@@ -9,14 +9,14 @@
 </template>
 
 <script setup lang="ts">
-import { HardwarePlatform } from "~~/prisma/client/enums";
+import { HardwarePlatform } from "~/prisma/client/enums";
 import type { Component } from "vue";
 import LinuxLogo from "./LinuxLogo.vue";
 import WindowsLogo from "./WindowsLogo.vue";
 import MacLogo from "./MacLogo.vue";
 import DropLogo from "../DropLogo.vue";
 
-const props = defineProps<{ platform: string; fallback?: string | undefined }>();
+const props = defineProps<{ platform: string; fallback?: string }>();
 
 const platformIcons: { [key in HardwarePlatform]: Component } = {
   [HardwarePlatform.Linux]: LinuxLogo,

components/Import/Game.vue

@@ -191,7 +191,7 @@ import {
 import { XCircleIcon } from "@heroicons/vue/16/solid";
 import { ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
-import type { GameMetadataSearchResult } from "~~/server/internal/metadata/types";
+import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 
 const model = ref<GameMetadataSearchResult | undefined>(undefined);
 

components/LanguageSelectorListbox.vue

@@ -92,7 +92,7 @@ import type { Locale } from "vue-i18n";
 
 const { showText = true } = defineProps<{ showText?: boolean }>();
 
-const { locale: currLocale, setLocale, locales } = useI18n();
+const { locales, locale: currLocale, setLocale } = useI18n();
 
 function changeLocale(locale: Locale) {
   setLocale(locale);

components/LogLine.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import type { TaskLog } from "~~/server/internal/tasks";
+import type { TaskLog } from "~/server/internal/tasks";
 
 defineProps<{ log: typeof TaskLog.infer; short?: boolean }>();
 

components/Modal/AddCompanyGame.vue

@@ -162,7 +162,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import type { GameModel } from "~~/prisma/client/models";
+import type { GameModel } from "~/prisma/client/models";
 import {
   DialogTitle,
   Listbox,
@@ -171,7 +171,7 @@ import {
   ListboxOption,
   ListboxOptions,
 } from "@headlessui/vue";
-import type { GameMetadataSearchResult } from "~~/server/internal/metadata/types";
+import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 import { FetchError } from "ofetch";
 import type { SerializeObject } from "nitropack";
 import { XCircleIcon } from "@heroicons/vue/24/solid";
@@ -208,7 +208,7 @@ const { t } = useI18n();
 
 const open = defineModel<boolean>({ required: true });
 
-const currentGame = ref<NonNullable<(typeof metadataGames.value)[number]> | null>(null);
+const currentGame = ref<(typeof metadataGames.value)[number]>();
 const developed = ref(false);
 const published = ref(false);
 const addGameLoading = ref(false);
@@ -236,7 +236,7 @@ async function addGame() {
       throw e;
     }
   } finally {
-    currentGame.value = null;
+    currentGame.value = undefined;
     developed.value = false;
     published.value = false;
     addGameLoading.value = false;

components/Modal/CreateCollection.vue

@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { DialogTitle } from "@headlessui/vue";
-import type { CollectionEntryModel, GameModel } from "~~/prisma/client/models";
+import type { CollectionEntryModel, GameModel } from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{

components/Modal/CreateCompany.vue

@@ -110,7 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import type { CompanyModel } from "~~/prisma/client/models";
+import type { CompanyModel } from "~/prisma/client/models";
 
 const open = defineModel<boolean>({ required: true });
 

components/Modal/CreateTag.vue

@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { DialogTitle } from "@headlessui/vue";
-import type { GameTagModel } from "~~/prisma/client/models";
+import type { GameTagModel } from "~/prisma/client/models";
 
 const emit = defineEmits<{
   created: [tag: GameTagModel];

components/Modal/DeleteCollection.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import type { CollectionModel } from "~~/prisma/client/models";
+import type { CollectionModel } from "~/prisma/client/models";
 import { DialogTitle } from "@headlessui/vue";
 
 const collection = defineModel<CollectionModel | undefined>();

components/Modal/DeleteUser.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { DialogTitle } from "@headlessui/vue";
-import type { UserModel } from "~~/prisma/client/models";
+import type { UserModel } from "~/prisma/client/models";
 
 const user = defineModel<UserModel | undefined>();
 const deleteLoading = ref(false);

components/NotificationItem.vue

@@ -44,7 +44,7 @@
 
 <script setup lang="ts">
 import { XMarkIcon } from "@heroicons/vue/24/solid";
-import type { NotificationModel } from "~~/prisma/client/models";
+import type { NotificationModel } from "~/prisma/client/models";
 
 const props = defineProps<{ notification: NotificationModel }>();
 

components/PreloadSelector.vue

@@ -106,7 +106,7 @@ const emit = defineEmits<{
 }>();
 
 const props = defineProps<{
-  value?: string | undefined;
+  value?: string;
   guesses?: Array<{ platform: PlatformRenderable; filename: string }>;
 }>();
 

components/RedistEditor/Metadata.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { SerializeObject } from "nitropack";
-import type { RedistModel, UserPlatformModel } from "~~/prisma/client/models";
+import type { RedistModel, UserPlatformModel } from "~/prisma/client/models";
 
 type ModelType = SerializeObject<
   RedistModel & { platform?: UserPlatformModel }

components/StoreView.vue

@@ -1,12 +1,3 @@
-<i18n>
-{
-  "en": {
-    "↓": "↓",
-    "↑": "↑"
-  }
-}
-</i18n>
-
 <template>
   <div>
     <div>
@@ -185,12 +176,9 @@
                           active ? 'bg-zinc-900 outline-hidden' : '',
                           'w-full text-left block px-4 py-2 text-sm',
                         ]"
-                        @click.prevent="handleSortClick(option, $event)"
+                        @click="() => (currentSort = option.param)"
                       >
                         {{ option.name }}
-                        <span v-if="currentSort === option.param">
-                          {{ sortOrder === "asc" ? $t("↑") : $t("↓") }}
-                        </span>
                       </button>
                     </MenuItem>
                   </div>
@@ -310,7 +298,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-5 2xl:grid-cols-6 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-6 2xl:grid-cols-7 gap-4"
             >
               <!-- Your content -->
               <GamePanel
@@ -377,7 +365,7 @@ import {
   Squares2X2Icon,
 } from "@heroicons/vue/20/solid";
 import type { SerializeObject } from "nitropack";
-import type { GameModel, GameTagModel } from "~~/prisma/client/models";
+import type { GameModel, GameTagModel } from "~/prisma/client/models";
 import MultiItemSelector from "./MultiItemSelector.vue";
 const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
 
@@ -409,13 +397,8 @@ 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
@@ -491,7 +474,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}&order=${sortOrder.value}${query ? "&" + query : ""}`,
+    `/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}${query ? "&" + query : ""}`,
   );
   if (resetGames) {
     games.value = newValues.results;
@@ -508,19 +491,6 @@ 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

@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/24/solid";
-import type { TaskMessage } from "~~/server/internal/tasks";
+import type { TaskMessage } from "~/server/internal/tasks";
 
 defineProps<{ task: TaskMessage | undefined; active?: boolean }>();
 </script>

components/UserHeader/NotificationWidgetPanel.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import type { NotificationModel } from "~~/prisma/client/models";
+import type { NotificationModel } from "~/prisma/client/models";
 
 const props = defineProps<{ notifications: Array<NotificationModel> }>();
 </script>

components/UserHeader/UserWidget.vue

@@ -81,6 +81,8 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import { ChevronDownIcon } from "@heroicons/vue/16/solid";
+import { useObject } from "~/composables/objects";
+import type { NavigationItem } from "~/composables/types";
 
 const user = useUser();
 

composables/collection.ts

@@ -2,7 +2,7 @@ import type {
   CollectionModel,
   CollectionEntryModel,
   GameModel,
-} from "~~/prisma/client/models";
+} from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
 type FullCollection = CollectionModel & {

composables/news.ts

@@ -1,4 +1,4 @@
-import type { ArticleModel } from "~~/prisma/client/models";
+import type { ArticleModel } from "~/prisma/client/models";
 import type { SerializeObject } from "nitropack";
 
 export const useNews = () =>

composables/notifications.ts

@@ -1,4 +1,4 @@
-import type { NotificationModel } from "~~/prisma/client/models";
+import type { NotificationModel } from "~/prisma/client/models";
 
 const ws = new WebSocketHandler("/api/v1/notifications/ws");
 

composables/platform.ts

@@ -1,5 +1,5 @@
-import type { UserPlatform } from "~~/prisma/client/client";
+import type { UserPlatform } from "~/prisma/client/client";
-import { HardwarePlatform } from "~~/prisma/client/enums";
+import { HardwarePlatform } from "~/prisma/client/enums";
 
 export type PlatformRenderable = {
   name: string;

composables/task.ts

@@ -1,4 +1,4 @@
-import type { TaskMessage } from "~~/server/internal/tasks";
+import type { TaskMessage } from "~/server/internal/tasks";
 import { WebSocketHandler } from "./ws";
 
 const websocketHandler = new WebSocketHandler("/api/v1/task");

composables/user.ts

@@ -1,4 +1,4 @@
-import type { UserModel } from "~~/prisma/client/models";
+import type { UserModel } from "~/prisma/client/models";
 
 // undefined = haven't check
 // null = check, no user

composables/users.ts

@@ -1,6 +1,6 @@
 import type { SerializeObject } from "nitropack";
-import type { UserModel } from "~~/prisma/client/models";
+import type { UserModel } from "~/prisma/client/models";
-import type { AuthMec } from "~~/prisma/client/enums";
+import type { AuthMec } from "~/prisma/client/enums";
 
 export const useUsers = () =>
   useState<

eslint.config.mjs

@@ -19,7 +19,6 @@ export default withNuxt([
         },
       ],
       "@intlify/vue-i18n/no-missing-keys": "error",
-      "vue/multi-word-component-names": "off",
     },
     settings: {
       "vue-i18n": {

i18n/locales/en_us.json

@@ -117,9 +117,7 @@
     "servers": "Servers",
     "srLoading": "Loading…",
     "tags": "Tags",
-    "today": "Today",
+    "today": "Today"
-    "labelValueColon": "{label}: {value}",
-    "noData": "No data"
   },
   "delete": "Delete",
   "drop": {
@@ -270,8 +268,6 @@
         "store": "Store",
         "tokens": "API tokens"
       },
-      "home": "Home",
-      "library": "Library",
       "tasks": "Tasks",
       "users": "Users"
     },
@@ -280,24 +276,7 @@
   },
   "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",
@@ -313,7 +292,6 @@
         "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.",
@@ -445,11 +423,7 @@
         "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",
@@ -579,7 +553,6 @@
     "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",

layouts/admin.vue

@@ -166,20 +166,17 @@ import {
   RectangleStackIcon,
   DocumentIcon,
 } from "@heroicons/vue/24/outline";
+import type { NavigationItem } from "~/composables/types";
+import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
 import { ArrowLeftIcon } from "@heroicons/vue/16/solid";
 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("header.admin.home"),
+    label: $t("userHeader.links.library"),
-    route: "/admin",
-    prefix: "/admin",
-    icon: HomeIcon,
-  },
-  {
-    label: $t("header.admin.library"),
     route: "/admin/library",
     prefix: "/admin/library",
     icon: ServerStackIcon,

layouts/default.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="!noWrapper" class="flex flex-col w-full min-h-screen bg-zinc-900">
-    <LazyUserHeader class="z-50" hydrate-on-idle />
+    <UserHeader class="z-50" hydrate-on-idle />
     <div class="grow flex">
       <NuxtPage />
     </div>
-    <LazyUserFooter class="z-50" hydrate-on-interaction />
+    <UserFooter class="z-50" hydrate-on-interaction />
   </div>
   <div v-else class="flex w-full min-h-screen bg-zinc-900">
     <NuxtPage />

nuxt.config.ts

@@ -18,7 +18,6 @@ const twemojiJson = module.findPackageJSON(
 if (!twemojiJson) {
   throw new Error("Could not find @discordapp/twemoji package.");
 }
-const svgSrcDir = path.join(path.dirname(twemojiJson), "dist", "svg");
 
 // get drop version
 const dropVersion = getDropVersion();
@@ -75,13 +74,14 @@ 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({
         targets: [
           {
-            src: `${svgSrcDir}/*`,
+            src: "node_modules/@discordapp/twemoji/dist/svg/*",
             dest: "twemoji",
           },
         ],
@@ -96,7 +96,7 @@ export default defineNuxtConfig({
       // https://github.com/nuxt/nuxt/issues/18918#issuecomment-1925774964
       // copy emojis to .output/public/twemoji
       const targetDir = path.join(nitro.options.output.publicDir, "twemoji");
-      cpSync(svgSrcDir, targetDir, {
+      cpSync(path.join(path.dirname(twemojiJson), "dist", "svg"), targetDir, {
         recursive: true,
       });
     },
@@ -163,12 +163,9 @@ export default defineNuxtConfig({
 
     tsConfig: {
       compilerOptions: {
-        // Not having these options on is sloppy, but it's a task for later me
         verbatimModuleSyntax: false,
         strictNullChecks: true,
-        exactOptionalPropertyTypes: false,
+        exactOptionalPropertyTypes: true,
-        //erasableSyntaxOnly: true,
-        noUncheckedIndexedAccess: false,
       },
     },
   },
@@ -263,7 +260,6 @@ export default defineNuxtConfig({
           "https://www.giantbomb.com",
           "https://images.pcgamingwiki.com",
           "https://images.igdb.com",
-          "https://*.steamstatic.com",
         ],
       },
       strictTransportSecurity: false,

package.json

@@ -21,9 +21,10 @@
   },
   "dependencies": {
     "@discordapp/twemoji": "^16.0.1",
-    "@drop-oss/droplet": "3.2.0",
+    "@drop-oss/droplet": "3.0.1",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
+    "@lobomfz/prismark": "0.0.3",
     "@nuxt/fonts": "^0.11.0",
     "@nuxt/image": "^1.10.0",
     "@nuxtjs/i18n": "^9.5.5",
@@ -32,22 +33,22 @@
     "@vueuse/nuxt": "13.6.0",
     "argon2": "^0.43.0",
     "arktype": "^2.1.10",
-    "axios": "^1.12.0",
+    "axios": "^1.7.7",
     "bcryptjs": "^3.0.2",
     "cheerio": "^1.0.0",
     "cookie-es": "^2.0.0",
     "fast-fuzzy": "^1.12.0",
     "file-type-mime": "^0.4.3",
     "jdenticon": "^3.3.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^26.1.0",
     "luxon": "^3.6.1",
     "micromark": "^4.0.1",
     "normalize-url": "^8.0.2",
-    "nuxt": "^4.1.2",
+    "nuxt": "^3.17.4",
     "nuxt-security": "2.2.0",
     "pino": "^9.7.0",
     "pino-pretty": "^13.0.0",
-    "prisma": "^6.11.1",
+    "prisma": "^6.14.0",
     "sanitize-filename": "^1.6.3",
     "semver": "^7.7.1",
     "stream-mime-type": "^2.0.0",