Translated using Weblate (French)

Currently translated at 100.0% (499 of 499 strings) Translated using Weblate (French) Currently translated at 96.9% (484 of 499 strings) Co-authored-by: Ribemont Francois <ribemont.francois+weblate@gmail.com> Co-authored-by: Weblate <noreply@weblate.org> Translate-URL: http://translate.droposs.org/projects/drop/drop/fr/ Translation: Drop/Drop
Rearchitecture for v0.4.0 (#197 )
2025-11-12 07:42:40 +10:00 · 2025-11-09 23:36:19 +00:00 · 2025-11-10 10:36:13 +11:00 · 2025-11-08 09:14:45 +11:00 · 2025-11-07 09:27:37 +11:00
51 changed files with 2267 additions and 214 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -5,8 +5,8 @@ on:
  release:
    types: [published]
  # This can be used to automatically publish nightlies at UTC nighttime
-  schedule:
-    - cron: "0 2 * * *" # run at 2 AM UTC
+  #schedule:
+  #  - cron: "0 2 * * *" # run at 2 AM UTC

 jobs:
  web:
--- a/app/components/GameEditor/Metadata.vue
+++ b/app/components/GameEditor/Metadata.vue
@ -29,6 +29,23 @@

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-8">
          <MultiItemSelector v-model="currentTags" :items="tags" />
+          <div class="flex flex-col">
+            <label
+              for="releaseDate"
+              class="text-sm/6 font-medium text-zinc-100"
+            >
+              {{ $t("library.admin.game.editReleaseDate") }}
+            </label>
+            <div class="mt-2">
+              <input
+                id="releaseDate"
+                v-model="releaseDate"
+                type="date"
+                name="releaseDate"
+                class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+              />
+            </div>
+          </div>
        </div>

        <!-- image carousel pick -->
@ -491,11 +508,38 @@ watch(
  { deep: true },
 );

+const releaseDate = ref(
+  game.value.mReleased
+    ? new Date(game.value.mReleased).toISOString().substring(0, 10)
+    : "",
+);
+
+watch(releaseDate, async (newDate) => {
+  const body: PatchGameBody = {};
+
+  if (newDate) {
+    const parsed = new Date(newDate);
+    if (!isNaN(parsed.getTime())) {
+      body.mReleased = parsed;
+    }
+  }
+
+  await $dropFetch(`/api/v1/admin/game/:id`, {
+    method: "PATCH",
+    params: {
+      id: game.value.id,
+    },
+    body,
+    failTitle: "Failed to update release date",
+  });
+});
+
 const { t } = useI18n();

 // I don't know why I split these fields off.
 const coreMetadataName = ref(game.value.mName);
 const coreMetadataDescription = ref(game.value.mShortDescription);
+
 const coreMetadataIconUrl = ref(useObject(game.value.mIconObjectId));
 const coreMetadataIconFileUpload = ref<FileList | undefined>();
 const coreMetadataLoading = ref(false);
@ -561,7 +605,6 @@ function coreMetadataUpdate_wrapper() {
      );
    })
    .then((newGame) => {
-      console.log(newGame);
      if (!newGame) return;
      Object.assign(game.value, newGame);
      coreMetadataIconUrl.value = useObject(newGame.mIconObjectId);
--- a/app/components/Icons/GamepadIcon.vue
+++ b/app/components/Icons/GamepadIcon.vue
@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="6" y1="11" x2="10" y2="11" />
+    <line x1="8" y1="9" x2="8" y2="13" />
+    <line x1="15" y1="12" x2="15.01" y2="12" />
+    <line x1="18" y1="10" x2="18.01" y2="10" />
+    <path
+      d="M17.32 5H6.68a4 4 0 00-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 003 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 019.828 16h4.344a2 2 0 011.414.586L17 18c.5.5 1 1 2 1a3 3 0 003-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0017.32 5z"
+    />
+  </svg>
+</template>
--- a/app/components/PieChart/PieChart.vue
+++ b/app/components/PieChart/PieChart.vue
@ -0,0 +1,45 @@
+<template>
+  <h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
+  <div class="flex flex-col xl:flex-row gap-4">
+    <div class="relative flex grow max-w-[12rem]">
+      <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
+        <PieChartPieSlice
+          v-for="slice in slices"
+          :key="`${slice.percentage}-${slice.totalPercentage}`"
+          :slice="slice"
+        />
+      </svg>
+      <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+    </div>
+    <ul class="flex flex-col gap-y-1 justify-center text-left">
+      <li
+        v-for="slice in slices"
+        :key="slice.value"
+        class="text-sm inline-flex items-center gap-x-1"
+      >
+        <span
+          class="size-3 inline-block rounded-sm"
+          :class="CHART_COLOURS[slice.color].bg"
+        />
+        {{
+          $t("common.labelValueColon", {
+            label: slice.label,
+            value: slice.value,
+          })
+        }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { generateSlices } from "~/components/PieChart/utils";
+import type { SliceData } from "~/components/PieChart/types";
+
+const { data, title = undefined } = defineProps<{
+  data: SliceData[];
+  title?: string | undefined;
+}>();
+
+const slices = generateSlices(data);
+</script>
--- a/app/components/PieChart/PieSlice.vue
+++ b/app/components/PieChart/PieSlice.vue
@ -0,0 +1,35 @@
+<template>
+  <path
+    v-if="slice.percentage !== 0 && slice.percentage !== 100"
+    :class="[CHART_COLOURS[slice.color].fill]"
+    :d="`
+      M ${slice.start}
+      A ${slice.radius},${slice.radius} 0 ${getFlags(slice.percentage)} ${polarToCartesian(slice.center, slice.radius, percent2Degrees(slice.totalPercentage))}
+      L ${slice.center}
+      z
+    `"
+    stroke-width="2"
+  />
+  <circle
+    v-if="slice.percentage === 100"
+    :r="slice.radius"
+    :cx="slice.center.x"
+    :cy="slice.center.y"
+    :class="[CHART_COLOURS[slice.color].fill]"
+    stroke-width="2"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Slice } from "~/components/PieChart/types";
+import {
+  getFlags,
+  percent2Degrees,
+  polarToCartesian,
+} from "~/components/PieChart/utils";
+import { CHART_COLOURS } from "~/utils/colors";
+
+const { slice } = defineProps<{
+  slice: Slice;
+}>();
+</script>
--- a/app/components/PieChart/types.d.ts
+++ b/app/components/PieChart/types.d.ts
@ -0,0 +1,19 @@
+import type Tuple from "~/utils/tuple";
+import type { ChartColour } from "~/utils/colors";
+
+export type Slice = {
+  start: Tuple;
+  center: Tuple;
+  percentage: number;
+  totalPercentage: number;
+  radius: number;
+  color: ChartColour;
+  label: string;
+  value: number;
+};
+
+export type SliceData = {
+  value: number;
+  color?: ChartColour;
+  label: string;
+};
--- a/app/components/PieChart/utils.ts
+++ b/app/components/PieChart/utils.ts
@ -0,0 +1,50 @@
+import Tuple from "~/utils/tuple";
+import type { Slice, SliceData } from "~/components/PieChart/types";
+import { sum, lastItem } from "~/utils/array";
+
+export const START = new Tuple(50, 10);
+export const CENTER = new Tuple(50, 50);
+export const RADIUS = 40;
+
+export const polarToCartesian = (
+  center: Tuple,
+  radius: number,
+  angleInDegrees: number,
+) => {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
+  const x = center.x + radius * Math.cos(angleInRadians);
+  const y = center.y + radius * Math.sin(angleInRadians);
+  return new Tuple(x, y);
+};
+
+export const percent2Degrees = (percentage: number) => (360 * percentage) / 100;
+
+export function generateSlices(data: SliceData[]): Slice[] {
+  return data.reduce((accumulator, currentValue, index, array) => {
+    const percentage =
+      (currentValue.value * 100) / sum(array.map((slice) => slice.value));
+    return [
+      ...accumulator,
+      {
+        start: accumulator.length
+          ? polarToCartesian(
+              CENTER,
+              RADIUS,
+              percent2Degrees(lastItem(accumulator).totalPercentage),
+            )
+          : START,
+        radius: RADIUS,
+        percentage: percentage,
+        totalPercentage:
+          sum(accumulator.map((element) => element.percentage)) + percentage,
+        center: CENTER,
+        color: PIE_COLOURS[index % PIE_COLOURS.length],
+        label: currentValue.label,
+        value: currentValue.value,
+      },
+    ];
+  }, [] as Slice[]);
+}
+
+export const getFlags = (percentage: number) =>
+  percentage > 50 ? new Tuple(1, 1) : new Tuple(0, 1);
--- a/app/components/ProgressBar.vue
+++ b/app/components/ProgressBar.vue
@ -0,0 +1,31 @@
+<template>
+  <div
+    :class="[
+      'relative h-5 rounded-xl overflow-hidden',
+      CHART_COLOURS[backgroundColor].bg,
+    ]"
+  >
+    <div
+      :style="{ width: `${percentage}%` }"
+      :class="['transition-all h-full', CHART_COLOURS[color].bg]"
+    />
+    <span
+      class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
+    >
+      {{ $t("tasks.admin.progress", [Math.round(percentage * 10) / 10]) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ChartColour, CHART_COLOURS } from "~/utils/colors";
+const {
+  percentage,
+  color = "blue",
+  backgroundColor = "zinc",
+} = defineProps<{
+  percentage: number;
+  color?: ChartColour;
+  backgroundColor?: ChartColour;
+}>();
+</script>
--- a/app/components/RankingList.vue
+++ b/app/components/RankingList.vue
@ -0,0 +1,43 @@
+<template>
+  <table v-if="items.length > 0" class="w-full mt-4 space-y-6">
+    <thead>
+      <tr>
+        <th></th>
+        <th></th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-white/10">
+      <tr v-for="item in items" :key="`${item.rank}-${item.name}`">
+        <td
+          class="my-2 size-7 rounded-sm bg-zinc-950 ring ring-zinc-800 inline-flex items-center justify-center font-bold font-display text-blue-500"
+        >
+          {{ item.rank }}
+        </td>
+        <td class="w-full font-bold px-2">{{ item.name }}</td>
+        <td
+          class="text-right text-sm font-semibold text-zinc-500 whitespace-nowrap"
+        >
+          {{ item.value }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p
+    v-else
+    class="w-full p-2 text-center uppercase text-sm font-display font-bold text-zinc-700"
+  >
+    {{ $t("common.noData") }}
+  </p>
+</template>
+
+<script lang="ts" setup>
+export type RankItem = {
+  rank: number;
+  name: string;
+  value: string;
+};
+const { items } = defineProps<{
+  items: RankItem[];
+}>();
+</script>
--- a/app/components/SourceTable.vue
+++ b/app/components/SourceTable.vue
@ -0,0 +1,193 @@
+<template>
+  <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+      <table class="min-w-full divide-y divide-zinc-700">
+        <thead>
+          <tr>
+            <th
+              scope="col"
+              class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
+            >
+              {{ $t("common.name") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("type") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.working") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("options") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.totalSpace") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.freeSpace") }}
+            </th>
+            <th
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+            >
+              {{ $t("library.admin.sources.utilizationPercentage") }}
+            </th>
+            <th
+              v-if="editSource || deleteSource"
+              scope="col"
+              class="relative py-3.5 pl-3 pr-4 sm:pr-3"
+            >
+              <span class="sr-only">{{ $t("actions") }}</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(source, sourceIdx) in sources"
+            :key="source.id"
+            class="even:bg-zinc-800"
+          >
+            <td
+              class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+            >
+              {{ source.name }}
+            </td>
+            <td
+              class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400 inline-flex gap-x-1 items-center"
+            >
+              <component
+                :is="optionsMetadata[source.backend].icon"
+                class="size-5 text-zinc-400"
+              />
+              {{ optionsMetadata[source.backend].title }}
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              <CheckIcon v-if="source.working" class="size-5 text-green-500" />
+              <XMarkIcon v-else class="size-5 text-red-500" />
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              {{ source.options }}
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              {{ source.fsStats && formatBytes(source.fsStats.totalSpace) }}
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+              {{ source.fsStats && formatBytes(source.fsStats.freeSpace) }}
+            </td>
+            <td
+              class="align-middle flex flex-cols-5 whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
+            >
+              <div class="flex-auto content-right">
+                <ProgressBar
+                  v-if="source.fsStats"
+                  :percentage="
+                    getPercentage(
+                      source.fsStats.freeSpace,
+                      source.fsStats.totalSpace,
+                    )
+                  "
+                  :color="
+                    getBarColor(
+                      getPercentage(
+                        source.fsStats.freeSpace,
+                        source.fsStats.totalSpace,
+                      ),
+                    )
+                  "
+                  background-color="slate"
+                />
+              </div>
+            </td>
+            <td
+              v-if="editSource || deleteSource"
+              class="relative whitespace-nowrap py-4 pl-3 pr-3 text-right text-sm font-medium space-x-2"
+            >
+              <button
+                v-if="editSource"
+                class="text-blue-500 hover:text-blue-400"
+                @click="() => editSource(sourceIdx)"
+              >
+                {{ $t("common.edit") }}
+                <span class="sr-only">
+                  {{ $t("chars.srComma", [source.name]) }}
+                </span>
+              </button>
+
+              <button
+                v-if="deleteSource"
+                class="text-red-500 hover:text-red-400"
+                @click="() => deleteSource(sourceIdx)"
+              >
+                {{ $t("delete") }}
+                <span class="sr-only">
+                  {{ $t("chars.srComma", [source.name]) }}
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WorkingLibrarySource } from "~~/server/api/v1/admin/library/sources/index.get";
+import type { LibraryBackend } from "~~/prisma/client/enums";
+import { BackwardIcon, CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { DropLogo } from "#components";
+import { formatBytes } from "~~/server/internal/utils/files";
+import { getBarColor } from "~/utils/colors";
+
+const {
+  sources,
+  deleteSource = undefined,
+  editSource = undefined,
+} = defineProps<{
+  sources: WorkingLibrarySource[];
+  summaryMode?: boolean;
+  deleteSource?: (id: number) => void;
+  editSource?: (id: number) => void;
+}>();
+
+const { t } = useI18n();
+
+const optionsMetadata: {
+  [key in LibraryBackend]: {
+    title: string;
+    description: string;
+    docsLink: string;
+    icon: Component;
+  };
+} = {
+  Filesystem: {
+    title: t("library.admin.sources.fsTitle"),
+    description: t("library.admin.sources.fsDesc"),
+    docsLink: "https://docs.droposs.org/docs/library#drop-style",
+    icon: DropLogo,
+  },
+  FlatFilesystem: {
+    title: t("library.admin.sources.fsFlatTitle"),
+    description: t("library.admin.sources.fsFlatDesc"),
+    docsLink: "https://docs.droposs.org/docs/library#flat-style-or-compat",
+    icon: BackwardIcon,
+  },
+};
+
+const getPercentage = (value: number, total: number) =>
+  ((total - value) * 100) / total;
+</script>
--- a/app/components/TileWithLink.vue
+++ b/app/components/TileWithLink.vue
@ -0,0 +1,52 @@
+<template>
+  <div
+    :class="[
+      'border border-zinc-800 rounded-xl h-full px-6 py-4 relative bg-zinc-950/30',
+      { 'min-h-50 pb-15': link, 'lg:pb-4': !link },
+    ]"
+  >
+    <h1
+      v-if="props.title"
+      :class="[
+        'font-semibold text-lg w-full',
+        { 'mb-3': !props.subtitle && link },
+      ]"
+    >
+      {{ props.title }}
+      <div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
+    </h1>
+    <h2
+      v-if="props.subtitle"
+      :class="['text-zinc-400 text-sm w-full', { 'mb-3': link }]"
+    >
+      {{ props.subtitle }}
+      <div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
+    </h2>
+
+    <slot />
+
+    <div v-if="props.link" class="absolute bottom-5 right-5">
+      <NuxtLink
+        :to="props.link.url"
+        class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
+      >
+        {{ props.link.label }}
+        <ArrowRightIcon class="h-4 w-4" aria-hidden="true" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRightIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps<{
+  title?: string;
+  subtitle?: string;
+  rightTitle?: string;
+  link?: {
+    url: string;
+    label: string;
+  };
+}>();
+</script>
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@ -172,9 +172,14 @@ import { XMarkIcon } from "@heroicons/vue/24/solid";
 const i18nHead = useLocaleHead();

 const navigation: Array<NavigationItem & { icon: Component }> = [
-  { label: $t("home"), route: "/admin", prefix: "/admin", icon: HomeIcon },
  {
-    label: $t("userHeader.links.library"),
+    label: $t("header.admin.home"),
+    route: "/admin",
+    prefix: "/admin",
+    icon: HomeIcon,
+  },
+  {
+    label: $t("header.admin.library"),
    route: "/admin/library",
    prefix: "/admin/library",
    icon: ServerStackIcon,
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@ -1,6 +1,147 @@
-<template><div /></template>
+<template>
+  <div class="space-y-4">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-2xl font-semibold text-zinc-100">
+          {{ t("home.admin.title") }}
+        </h1>
+        <p class="mt-2 text-base text-zinc-400">
+          {{ t("home.admin.subheader") }}
+        </p>
+      </div>
+    </div>
+    <main
+      class="mx-auto max-w-md lg:max-w-none md:max-w-none w-full py-2 text-zinc-100"
+    >
+      <div class="grid grid-cols-6 gap-4">
+        <div class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1">
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <DropLogo />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-2xl flex-1 font-bold">{{ version }}</div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.version") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div class="col-span-6 lg:col-span-1 md:col-span-3">
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <GamepadIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">{{ gameCount }}</div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.games") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div
+          class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-1 lg:row-start-2"
+        >
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <ServerStackIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ sources.length }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.librarySources") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div
+          class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-2 lg:row-start-2"
+        >
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <UserGroupIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ userStats.userCount }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.users") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">
+          <TileWithLink
+            :link="{
+              url: '/admin/users',
+              label: t('home.admin.goToUsers'),
+            }"
+            :title="t('home.admin.activeInactiveUsers')"
+          >
+            <PieChart :data="pieChartData" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6">
+          <TileWithLink
+            title="Library"
+            :link="{ url: '/admin/library', label: 'Go to library' }"
+          >
+            <SourceTable :sources="sources" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6 lg:col-span-2">
+          <TileWithLink
+            :title="t('home.admin.biggestGamesToDownload')"
+            :subtitle="t('home.admin.latestVersionOnly')"
+          >
+            <RankingList :items="biggestGamesLatest.map(gameToRankItem)" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6 lg:col-span-2">
+          <TileWithLink
+            :title="t('home.admin.biggestGamesOnServer')"
+            :subtitle="t('home.admin.allVersionsCombined')"
+          >
+            <RankingList :items="biggestGamesCombined.map(gameToRankItem)" />
+          </TileWithLink>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>

 <script setup lang="ts">
+import { formatBytes } from "~~/server/internal/utils/files";
+import GamepadIcon from "~/components/Icons/GamepadIcon.vue";
+import DropLogo from "~/components/DropLogo.vue";
+import { ServerStackIcon, UserGroupIcon } from "@heroicons/vue/24/outline";
+import type { RankItem } from "~/components/RankingList.vue";
+import type { GameSize } from "~~/server/internal/gamesize";
+
 definePageMeta({
  layout: "admin",
 });
@ -8,4 +149,29 @@ definePageMeta({
 useHead({
  title: "Home",
 });
+
+const { t } = useI18n();
+
+const {
+  version,
+  gameCount,
+  sources,
+  userStats,
+  biggestGamesLatest,
+  biggestGamesCombined,
+} = await $dropFetch("/api/v1/admin/home");
+
+const gameToRankItem = (game: GameSize, rank: number): RankItem => ({
+  rank: rank + 1,
+  name: game.gameName,
+  value: formatBytes(game.size),
+});
+
+const pieChartData = [
+  {
+    label: t("home.admin.inactiveUsers"),
+    value: userStats.userCount - userStats.activeSessions,
+  },
+  { label: t("home.admin.activeUsers"), value: userStats.activeSessions },
+];
 </script>
--- a/app/pages/admin/library/g/[id]/import.vue
+++ b/app/pages/admin/library/g/[id]/import.vue
@ -487,7 +487,7 @@ const { t } = useI18n();
 const route = useRoute();
 const gameId = route.params.id.toString();
 const versions = await $dropFetch(
-  `/api/v1/admin/import/version?id=${encodeURIComponent(gameId)}`,
+  `/api/v1/admin/import/version?id=${encodeURIComponent(gameId)}&mode=game`,
 );
 const userPlatforms = await useAdminPlatforms();
 const allPlatforms = renderPlatforms(userPlatforms);
--- a/app/pages/admin/library/index.vue
+++ b/app/pages/admin/library/index.vue
@ -158,7 +158,7 @@
            </dl>
            <div class="mt-4 flex flex-col gap-y-1">
              <NuxtLink
-                :href="`/admin/library/g/${entry.id}`"
+                :href="`/admin/library/${entry.urlPrefix}/${entry.id}`"
                class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
              >
                <i18n-t
@ -221,7 +221,7 @@
            </dl>
            <div class="mt-4 flex flex-col gap-y-1">
              <NuxtLink
-                :href="`/admin/library/r/${entry.id}`"
+                :href="`/admin/library/${entry.urlPrefix}/${entry.id}`"
                class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
              >
                <i18n-t
@ -261,7 +261,7 @@
                </p>
                <p class="mt-3 text-sm md:ml-6 md:mt-0">
                  <NuxtLink
-                    :href="`/admin/library/g/${entry.id}/import`"
+                    :href="`/admin/library/${entry.urlPrefix}/${entry.id}/import`"
                    class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
                  >
                    <i18n-t
@ -406,6 +406,7 @@ function clientSideTransformation<T, V extends keyof T, K extends string>(
      toImport?: boolean;
      offline?: boolean;
    };
+    urlPrefix: string,
  }
 > {
  return values.map((e) => {
@ -418,6 +419,7 @@ function clientSideTransformation<T, V extends keyof T, K extends string>(
        notifications: {
          offline: true,
        },
+        urlPrefix: type[0],
      };
    }

@ -433,6 +435,7 @@ function clientSideTransformation<T, V extends keyof T, K extends string>(
      },
      hasNotifications: noVersions || toImport,
      status: "online" as const,
+      urlPrefix: type[0],
    };
  });
 }
--- a/app/pages/admin/library/r/[id]/import.vue
+++ b/app/pages/admin/library/r/[id]/import.vue
@ -1 +1,478 @@
-<template><div /></template>
+<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>
--- a/app/pages/admin/library/sources/index.vue
+++ b/app/pages/admin/library/sources/index.vue
@ -18,99 +18,12 @@
        </button>
      </div>
    </div>
-    <div class="mt-8 flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <table class="min-w-full divide-y divide-zinc-700">
-            <thead>
-              <tr>
-                <th
-                  scope="col"
-                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
-                >
-                  {{ $t("common.name") }}
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  {{ $t("type") }}
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  {{ $t("library.admin.sources.working") }}
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  {{ $t("options") }}
-                </th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
-                  <span class="sr-only">{{ $t("common.edit") }}</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(source, sourceIdx) in sources"
-                :key="source.id"
-                class="even:bg-zinc-800"
-              >
-                <td
-                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
-                >
-                  {{ source.name }}
-                </td>
-                <td
-                  class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400 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="relative whitespace-nowrap py-4 pl-3 pr-3 text-right text-sm font-medium space-x-2"
-                >
-                  <button
-                    class="text-blue-500 hover:text-blue-400"
-                    @click="() => edit(sourceIdx)"
-                  >
-                    {{ $t("common.edit") }}
-                    <span class="sr-only">
-                      {{ $t("chars.srComma", [source.name]) }}
-                    </span>
-                  </button>
-
-                  <button
-                    class="text-red-500 hover:text-red-400"
-                    @click="() => deleteSource(sourceIdx)"
-                  >
-                    {{ $t("delete") }}
-                    <span class="sr-only">
-                      {{ $t("chars.srComma", [source.name]) }}
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+    <div class="mt-4 flow-root">
+      <SourceTable
+        :sources="sources"
+        :edit-source="edit"
+        :delete-source="deleteSource"
+      />
    </div>

    <ModalTemplate v-model="actionSourceOpen">
@ -313,7 +226,7 @@ import {
  XCircleIcon,
  ArrowTopRightOnSquareIcon,
 } from "@heroicons/vue/20/solid";
-import { BackwardIcon, CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { BackwardIcon } from "@heroicons/vue/24/outline";
 import { FetchError } from "ofetch";
 import type { Component } from "vue";
 import type { LibraryBackend } from "~~/prisma/client/enums";
--- a/app/pages/admin/task/[id]/index.vue
+++ b/app/pages/admin/task/[id]/index.vue
@ -53,18 +53,7 @@
          :log="parseTaskLog(task.log.at(-(idx + 1)))"
        />
      </div>
-      <div class="relative h-5 rounded-xl bg-zinc-950 overflow-hidden">
-        <div
-          :style="{ width: `${task.progress}%` }"
-          class="transition-all bg-blue-600 h-full"
-        />
-        <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(task.progress * 10) / 10])
-          }}</span
-        >
-      </div>
+      <ProgressBar :percentage="task.progress" />
    </div>
    <div v-else role="status" class="w-full flex items-center justify-center">
      <svg
--- a/app/pages/store/[id]/index.vue
+++ b/app/pages/store/[id]/index.vue
@ -93,6 +93,27 @@
                  >
                </td>
              </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  {{ $t("store.size") }}
+                </td>
+                <td
+                  v-if="size"
+                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
+                >
+                  {{ formatBytes(size) }}
+                </td>
+                <td
+                  v-else
+                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400 italic"
+                >
+                  <span class="font-semibold text-blue-600">{{
+                    $t("store.commingSoon")
+                  }}</span>
+                </td>
+              </tr>
              <tr>
                <td
                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
@ -252,6 +273,7 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 import { StarIcon } from "@heroicons/vue/24/solid";
 import { micromark } from "micromark";
+import { formatBytes } from "~~/server/internal/utils/files";

 const route = useRoute();
 const gameId = route.params.id?.toString();
@ -263,8 +285,7 @@ if (!gameId)
  });

 const user = useUser();
-
-const { game, rating, platforms } = await $dropFetch(`/api/v1/games/${gameId}`);
+const { game, rating, platforms, size } = await $dropFetch(`/api/v1/games/${gameId}`);

 // Preview description (first 30 lines)
 const showPreview = ref(true);
--- a/app/utils/array.ts
+++ b/app/utils/array.ts
@ -0,0 +1,6 @@
+export const sum = (array: number[]) =>
+  array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+
+export function lastItem<T>(array: T[]) {
+  return array[array.length - 1];
+}
--- a/app/utils/colors.ts
+++ b/app/utils/colors.ts
@ -0,0 +1,76 @@
+export const CHART_COLOURS = {
+  // Bar colours
+  red: {
+    fill: "fill-red-700",
+    bg: "bg-red-700",
+  },
+  orange: {
+    fill: "fill-orange-800",
+    bg: "bg-orange-800",
+  },
+  blue: {
+    fill: "fill-blue-900",
+    bg: "bg-blue-900",
+  },
+
+  // Pie colours
+  lightblue: {
+    fill: "fill-blue-400",
+    bg: "bg-blue-400",
+  },
+  dropblue: {
+    fill: "fill-blue-600",
+    bg: "bg-blue-600",
+  },
+  green: {
+    fill: "fill-green-500",
+    bg: "bg-green-500",
+  },
+  yellow: {
+    fill: "fill-yellow-800",
+    bg: "bg-yellow-800",
+  },
+  purple: {
+    fill: "fill-purple-500",
+    bg: "bg-purple-500",
+  },
+  zinc: {
+    fill: "fill-zinc-950",
+    bg: "bg-zinc-950",
+  },
+  pink: {
+    fill: "fill-pink-800",
+    bg: "bg-pink-800",
+  },
+
+  lime: {
+    fill: "fill-lime-600",
+    bg: "bg-lime-600",
+  },
+  emerald: {
+    fill: "fill-emerald-500",
+    bg: "bg-emerald-500",
+  },
+  slate: {
+    fill: "fill-slate-800",
+    bg: "bg-slate-800",
+  },
+};
+export const PIE_COLOURS: ChartColour[] = [
+  "lightblue",
+  "dropblue",
+  "purple",
+  "emerald",
+];
+
+export type ChartColour = keyof typeof CHART_COLOURS;
+
+export function getBarColor(percentage: number): ChartColour {
+  if (percentage <= 70) {
+    return "blue";
+  }
+  if (percentage > 70 && percentage <= 90) {
+    return "orange";
+  }
+  return "red";
+}
--- a/app/utils/tuple.ts
+++ b/app/utils/tuple.ts
@ -0,0 +1,13 @@
+export default class Tuple {
+  x: number;
+  y: number;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+
+  toString() {
+    return `${this.x},${this.y}`;
+  }
+}
--- a/components/GameEditor/Version.vue
+++ b/components/GameEditor/Version.vue
@ -0,0 +1,206 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div v-if="game && unimportedVersions">
+    <div class="grow flex flex-row gap-y-8">
+      <div class="grow w-full h-full px-6 py-4 flex flex-col"></div>
+      <div
+        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"
+      >
+        <!-- version manager -->
+        <div>
+          <!-- version priority -->
+          <div>
+            <div class="border-b border-zinc-800 pb-3">
+              <div
+                class="flex flex-wrap items-center justify-between sm:flex-nowrap"
+              >
+                <h3
+                  class="text-base font-semibold font-display leading-6 text-zinc-100"
+                >
+                  {{ $t("library.admin.versionPriority") }}
+
+                  <!-- import games button -->
+
+                  <NuxtLink
+                    :href="canImport ? `/admin/library/${game.id}/import` : ''"
+                    type="button"
+                    :class="[
+                      canImport
+                        ? 'bg-blue-600 hover:bg-blue-700'
+                        : 'bg-blue-800/50',
+                      'inline-flex w-fit items-center gap-x-2 rounded-md  px-3 py-1 text-sm font-semibold font-display text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
+                    ]"
+                  >
+                    {{
+                      canImport
+                        ? $t("library.admin.import.version.import")
+                        : $t("library.admin.import.version.noVersions")
+                    }}
+                  </NuxtLink>
+                </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">
+                    {{ item.versionName }}
+                  </div>
+                  <div
+                    class="text-right text-zinc-400 text-xs font-normal flex-auto pr-4"
+                  >
+                    {{ item.size && formatBytes(item.size) }}
+                  </div>
+                  <div class="text-zinc-400">
+                    {{ item.delta ? $t("library.admin.version.delta") : "" }}
+                  </div>
+                  <div class="inline-flex items-center gap-x-2">
+                    <component
+                      :is="PLATFORM_ICONS[item.platform]"
+                      class="size-6 text-blue-600"
+                    />
+                    <Bars3Icon
+                      class="cursor-move w-6 h-6 text-zinc-400 handle"
+                    />
+                    <button @click="() => deleteVersion(item.versionName)">
+                      <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>
+  </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 { GameModel, GameVersionModel } from "~/prisma/client/models";
+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
+
+const props = defineProps<{ unimportedVersions: string[] }>();
+
+const { t } = useI18n();
+
+const hasDeleted = ref(false);
+
+const canImport = computed(
+  () => hasDeleted.value || props.unimportedVersions.length > 0,
+);
+
+type GameVersionModelWithSize = GameVersionModel & { size: number };
+
+type GameAndVersions = GameModel & {
+  versions: GameVersionModelWithSize[];
+};
+const game = defineModel<SerializeObject<GameAndVersions>>() as Ref<
+  SerializeObject<GameAndVersions>
+>;
+if (!game.value)
+  throw createError({
+    statusCode: 500,
+    statusMessage: "Game not provided to editor component",
+  });
+
+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),
+      },
+    });
+    game.value.versions = newVersions;
+  } catch (e) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: t("errors.version.order.title"),
+        description: t("errors.version.order.desc", {
+          error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        }),
+        buttonText: t("common.close"),
+      },
+      (e, c) => c(),
+    );
+  }
+}
+
+async function deleteVersion(versionName: string) {
+  try {
+    await $dropFetch("/api/v1/admin/game/version", {
+      method: "DELETE",
+      body: {
+        id: game.value.id,
+        versionName: versionName,
+      },
+    });
+    game.value.versions.splice(
+      game.value.versions.findIndex((e) => e.versionName === versionName),
+      1,
+    );
+    hasDeleted.value = true;
+  } catch (e) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: t("errors.version.delete.title"),
+        description: t("errors.version.delete.desc", {
+          error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
+        }),
+        buttonText: t("common.close"),
+      },
+      (e, c) => c(),
+    );
+  }
+}
+</script>
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@ -117,7 +117,9 @@
    "servers": "Servers",
    "srLoading": "Loading…",
    "tags": "Tags",
-    "today": "Today"
+    "today": "Today",
+    "labelValueColon": "{label}: {value}",
+    "noData": "No data"
  },
  "delete": "Delete",
  "drop": {
@ -268,6 +270,8 @@
        "store": "Store",
        "tokens": "API tokens"
      },
+      "home": "Home",
+      "library": "Library",
      "tasks": "Tasks",
      "users": "Users"
    },
@ -276,7 +280,24 @@
  },
  "helpUsTranslate": "Help us translate Drop {arrow}",
  "highest": "highest",
-  "home": "Home",
+  "home": {
+    "admin": {
+      "title": "Home",
+      "subheader": "Instance summary",
+      "games": "Games",
+      "librarySources": "Library sources",
+      "version": "Version",
+      "activeInactiveUsers": "Active/inactive users",
+      "activeUsers": "Active users",
+      "inactiveUsers": "Inactive users",
+      "goToUsers": "Go to users",
+      "users": "Users",
+      "biggestGamesToDownload": "Biggest games to download",
+      "latestVersionOnly": "Latest version only",
+      "biggestGamesOnServer": "Biggest games on server",
+      "allVersionsCombined": "All versions combined"
+    }
+  },
  "library": {
    "addGames": "All Games",
    "addToLib": "Add to Library",
@ -292,6 +313,7 @@
        "deleteImage": "Delete image",
        "editGameDescription": "Game Description",
        "editGameName": "Game Name",
+        "editReleaseDate": "Release Date",
        "imageCarousel": "Image Carousel",
        "imageCarouselDescription": "Customise what images and what order are shown on the store page.",
        "imageCarouselEmpty": "No images added to the carousel yet.",
@ -423,7 +445,11 @@
        "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",
@ -553,6 +579,7 @@
    "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",
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@ -3,16 +3,16 @@
    "devices": {
      "capabilities": "Capacités",
      "lastConnected": "Dernière Connexion",
-      "noDevices": "Aucun appareil n'est connecté à vôtre compte.",
+      "noDevices": "Aucun appareil connecté à vôtre compte.",
      "platform": "Plateforme",
      "revoke": "Révoquer",
      "subheader": "Gérer les appareils authorisés à accéder à votre compte Drop.",
      "title": "Appareils"
    },
    "notifications": {
-      "all": "Tout voir {arrow}",
+      "all": "Voir tout {arrow}",
      "desc": "Voir et gérer vos notifications.",
-      "markAllAsRead": "Tout marqué comme lu",
+      "markAllAsRead": "Marquer tout comme lu",
      "markAsRead": "Marquer comme lu",
      "none": "Pas de notification",
      "notifications": "Notifications",
@ -62,6 +62,7 @@
      "description": "Utiliser un code pour vous connecter à votre client Drop si vous ne pouvez pas ouvrir un navigateur web sur votre appareil.",
      "title": "Connecter votre client Drop"
    },
+    "confirmPassword": "Confirmez @:auth.password",
    "displayName": "Nom d'Affichage",
    "email": "Email",
    "password": "Mot de passe",
@ -147,6 +148,7 @@
    "auth": {
      "disabled": "Compte invalide or désactivé. Merci de contacter l'administrateur du serveur.",
      "invalidInvite": "Invitation invalide ou expirée",
+      "invalidPassState": "Le mot de passe enregistré est invalide. Merci de contacter l'administrateur du serveur.",
      "invalidUserOrPass": "Nom d'utilisateur ou password invalide.",
      "inviteIdRequired": "id est requis pour récupérer l'invitation",
      "method": {
@ -155,6 +157,10 @@
      "usernameTaken": "Nom d'utilisateur déjà pris."
    },
    "backHome": "{arrow} Retour a l'accueil",
+    "externalUrl": {
+      "subtitle": "Ce message n'est visible qu'aux administrateurs.",
+      "title": "Accès via une EXTERNAL_URL différente. Veuillez consulter la documentation."
+    },
    "game": {
      "banner": {
        "description": "Drop a échoué a mettre à jour l'image de la bannière : {0}",
@ -215,6 +221,7 @@
    "revokeClient": "Échec de la révocation du client",
    "revokeClientFull": "Échec de la revocation du client {0}",
    "signIn": "Se connecter {arrow}",
+    "support": "Assistance Discord",
    "unknown": "Une erreur inconnue est survenue",
    "upload": {
      "description": "Drop n'a pas pu uploader le fichier : {0}",
@ -254,7 +261,11 @@
    "admin": {
      "admin": "Administration",
      "metadata": "Méta",
-      "settings": "Paramètres",
+      "settings": {
+        "store": "Store",
+        "title": "Paramètres",
+        "tokens": "API tokens"
+      },
      "tasks": "Tâches",
      "users": "Utilisateurs"
    },
@ -327,6 +338,8 @@
        },
        "withoutMetadata": "Importer sans les données méta"
      },
+      "libraryHint": "Pas de bibliothèque configurée.",
+      "libraryHintDocsLink": "Qu'est-ce que cela veut dire ? {arrow}",
      "metadata": {
        "companies": {
          "action": "Gérer {arrow}",
@ -340,15 +353,25 @@
          "description": "Les sociétés organisent les jeux par qui les a développer ou éditer.",
          "editor": {
            "action": "Ajouter un jeu {plus}",
+            "descriptionPlaceholder": "{'<'}description{'>'}",
            "developed": "Développé",
            "libraryDescription": "Ajouter, supprimer ou personnaliser ce que cette société a développé et/ou publié.",
            "libraryTitle": "Bibliothèque de jeux",
            "noDescription": "(pas de description)",
            "published": "Publié",
            "uploadBanner": "Uploader bannière",
-            "uploadIcon": "Uplader icône"
+            "uploadIcon": "Uplader icône",
+            "websitePlaceholder": "{'<'}site web{'>'}"
          },
          "modals": {
+            "createDescription": "Créez une société pour mieux organizer vos jeux.",
+            "createFieldDescription": "Description de la Société",
+            "createFieldDescriptionPlaceholder": "Un petit studio indépendant qui...",
+            "createFieldName": "Nom de la société",
+            "createFieldNamePlaceholder": "Ma nouvelle société...",
+            "createFieldWebsite": "Site web de la société",
+            "createFieldWebsitePlaceholder": "https://exemple com/",
+            "createTitle": "Créer une société",
            "nameDescription": "Éditer le nom de la société. Ce nom est utilisé pour trouver les jeux nouvellement importés.",
            "nameTitle": "Éditer le nom de la société",
            "shortDeckDescription": "Éditer la description de la company. Cela n'affecte pas la description longue (markdown).",
@ -384,12 +407,15 @@
        "create": "Créer une source",
        "createDesc": "Drop va utiliser cette source pour accéder à votre bibliothèque de jeux, et les rendre disponible.",
        "desc": "Configurer vos sources de bibliothèques où Drop va regarder pour les nouveaux jeux et versions à importer.",
+        "documentationLink": "Documentation {arrow}",
        "edit": "Éditer la source",
        "fsDesc": "Importe les jeux à partir d'un chemin d'accès sur le disque. Cela requière une structure des dossiers basées sur la version, et qui supporte les jeux archivés.",
        "fsFlatDesc": "Importe les jeux à partir d'un chemin d’accès sur le disque, mais sans le sous-dossier version séparé. Utile pour migrer une bibliothèque vers Drop.",
+        "fsFlatTitle": "Compatibilité",
        "fsPath": "Chemin d’accès",
        "fsPathDesc": "Un chemin d’accès absolu à votre bibliothèque de jeux.",
        "fsPathPlaceholder": "/mnt/jeux",
+        "fsTitle": "Drop-style",
        "link": "Sources {arrow}",
        "nameDesc": "Le nom de votre source, pour référence.",
        "namePlaceholder": "Mes Nouvelle Source",
@ -447,6 +473,7 @@
    "checkLater": "Vérifier plus tard pour les mises à jour.",
    "delete": "Supprimer l'Article",
    "filter": {
+      "all": "Tous les temps",
      "month": "Ce mois",
      "week": "Cette semaine",
      "year": "Cette année"
@ -509,15 +536,19 @@
  "store": {
    "about": "À propos",
    "commingSoon": "prochainement",
+    "developers": "Développeurs | Développeur | Développeurs",
    "exploreMore": "Explorer plus {arrow}",
    "featured": "Mis en avant",
    "images": "Images de Jeux",
+    "lookAt": "Découvrez le maintenant",
    "noDevelopers": "Pas de développeur",
-    "noGame": "pas de jeu",
+    "noFeatured": "PAS DE JEU MIS EN AVANT",
+    "noGame": "PAS DE JEU",
    "noImages": "Pas d'image",
    "noPublishers": "Pas d'éditeur.",
    "noTags": "Pas de tag",
    "openAdminDashboard": "Ouvrir dans le Tableau de Bord d'Administration",
+    "openFeatured": "Mettez des étoiles aux jeux dans l'administration de la bibliothèque {arrow}",
    "platform": "Plateforme | Plateforme | Plateformes",
    "publishers": "Éditeurs | Éditeur | Éditeurs",
    "rating": "Note",
@ -544,7 +575,9 @@
      "back": "{arrow} Retour aux Tâches",
      "completedTasksTitle": "Tâches complétées",
      "dailyScheduledTitle": "Tâches quotidiennes planifiées",
+      "execute": "{arrow} Exécuter",
      "noTasksRunning": "Pas de tâche en cours",
+      "progress": "{0]%",
      "runningTasksTitle": "Tâches en cours d'exécution",
      "scheduled": {
        "checkUpdateDescription": "Vérifier si Drop a une mise à jour.",
@ -588,6 +621,7 @@
        "description": "Drop supporte une variété de \"mécanismes d'authentification\". Lorsque vous les activez ou les désactivez, ils sont affichés sur la page de connection pour que les utilisateurs puissent les sélectionner. Cliquer sur le menu à points pour configurer le mécanisme d'authentification.",
        "disabled": "Désactivé",
        "enabled": "Activé",
+        "enabledKey": "Activée ?",
        "oidc": "OpenID Connect",
        "simple": "Simple (nom d'utilisateur/mot de passe)",
        "srOpenOptions": "Ouvrir les options",
@ -605,7 +639,7 @@
        "createInvitation": "Créer invitation",
        "description": "L'authentification simple utilise un système d'invitations pour créer les utilisateurs. Tu peux créer une invitation et optionnellement spécifier le nom d'utilisateur ou email de cet utilisateur, et un lien magique sera généré un lien magique qui peut être utilisé pour créer le compte.",
        "expires": "Expire : {expiry}",
-        "invitationTitle": "invitations",
+        "invitationTitle": "Invitations",
        "invite3Days": "3 jours",
        "invite6Months": "6 mois",
        "inviteAdminSwitchDescription": "Créer cet utilisateur en tant qu'adminstrateur",
--- a/prisma/migrations/20251107223657_move_version_index/migration.sql
+++ b/prisma/migrations/20251107223657_move_version_index/migration.sql
@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `versionIndex` on the `GameVersion` table. All the data in the column will be lost.
+  - Added the required column `versionIndex` to the `Version` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropIndex
+DROP INDEX "public"."GameTag_name_idx";
+
+-- AlterTable
+ALTER TABLE "public"."GameVersion" DROP COLUMN "versionIndex";
+
+-- AlterTable
+ALTER TABLE "public"."Version" ADD COLUMN     "versionIndex" INTEGER NOT NULL;
+
+-- CreateIndex
+CREATE INDEX "GameTag_name_idx" ON "public"."GameTag" USING GIST ("name" gist_trgm_ops(siglen=32));
--- a/prisma/migrations/20251109232837_move_hidden_to_version/migration.sql
+++ b/prisma/migrations/20251109232837_move_hidden_to_version/migration.sql
@ -0,0 +1,17 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `hidden` on the `GameVersion` table. All the data in the column will be lost.
+
+*/
+-- DropIndex
+DROP INDEX "public"."GameTag_name_idx";
+
+-- AlterTable
+ALTER TABLE "public"."GameVersion" DROP COLUMN "hidden";
+
+-- AlterTable
+ALTER TABLE "public"."Version" ADD COLUMN     "hidden" BOOLEAN NOT NULL DEFAULT false;
+
+-- CreateIndex
+CREATE INDEX "GameTag_name_idx" ON "public"."GameTag" USING GIST ("name" gist_trgm_ops(siglen=32));
--- a/prisma/models/content.prisma
+++ b/prisma/models/content.prisma
@ -67,8 +67,10 @@ model Version {

    versionPath String

-    versionName String
-    created     DateTime @default(now())
+    versionName  String
+    versionIndex Int
+    created      DateTime @default(now())
+    hidden       Boolean  @default(false)

    gameId       String?
    game         Game?         @relation(fields: [gameId], references: [id], map: "game_link", onDelete: Cascade, onUpdate: Cascade)
@ -106,9 +108,7 @@ model GameVersion {

    umuIdOverride String?

-    versionIndex Int
-    delta        Boolean @default(false)
-    hidden       Boolean @default(false)
+    delta Boolean @default(false)

    platformId String
    platform   PlatformLink @relation(fields: [platformId], references: [id])
--- a/server/api/v1/admin/game/[id]/index.delete.ts
+++ b/server/api/v1/admin/game/[id]/index.delete.ts
@ -1,5 +1,5 @@
 import aclManager from "~~/server/internal/acls";
-import prisma from "~~/server/internal/db/database";
+import libraryManager from "~~/server/internal/library";

 export default defineEventHandler(async (h3) => {
  const allowed = await aclManager.allowSystemACL(h3, ["game:delete"]);
@ -7,11 +7,7 @@ export default defineEventHandler(async (h3) => {

  const gameId = getRouterParam(h3, "id")!;

-  await prisma.game.delete({
-    where: {
-      id: gameId,
-    },
-  });
+  await libraryManager.deleteGame(gameId);

  return {};
 });
--- a/server/api/v1/admin/game/[id]/index.get.ts
+++ b/server/api/v1/admin/game/[id]/index.get.ts
@ -23,7 +23,7 @@ export default defineEventHandler(async (h3) => {
              install: true,
              uninstall: true,
              launches: true,
-            }
+            },
          },
        },
      },
@ -34,10 +34,24 @@ export default defineEventHandler(async (h3) => {
  if (!game || !game.libraryId)
    throw createError({ statusCode: 404, message: "Game ID not found" });

+  const getGameVersionSize = async (
+    version: Omit<(typeof game)["versions"][number], "dropletManifest">,
+  ) => {
+    const size = await libraryManager.getGameVersionSize(
+      gameId,
+      version.versionId,
+    );
+    return { ...version, size };
+  };
+  const gameWithVersionSize = {
+    ...game,
+    versions: await Promise.all(game.versions.map(getGameVersionSize)),
+  };
+
  const unimportedVersions = await libraryManager.fetchUnimportedGameVersions(
    game.libraryId,
    game.libraryPath,
  );

-  return { game, unimportedVersions };
+  return { game: gameWithVersionSize, unimportedVersions };
 });
--- a/server/api/v1/admin/game/version/index.delete.ts
+++ b/server/api/v1/admin/game/version/index.delete.ts
@ -1,7 +1,7 @@
 import { type } from "arktype";
 import { readDropValidatedBody, throwingArktype } from "~~/server/arktype";
 import aclManager from "~~/server/internal/acls";
-import prisma from "~~/server/internal/db/database";
+import libraryManager from "~~/server/internal/library";

 const DeleteVersion = type({
  id: "string",
@ -16,11 +16,7 @@ export default defineEventHandler<{ body: typeof DeleteVersion }>(

    const body = await readDropValidatedBody(h3, DeleteVersion);

-    await prisma.version.delete({
-      where: {
-        versionId: body.id,
-      },
-    });
+    await libraryManager.deleteGameVersion(body.id);

    return {};
  },
--- a/server/api/v1/admin/game/version/index.patch.ts
+++ b/server/api/v1/admin/game/version/index.patch.ts
@ -21,7 +21,7 @@ export default defineEventHandler<{ body: typeof UpdateVersionOrder }>(

    await prisma.$transaction(
      versions.map((versionId, versionIndex) =>
-        prisma.gameVersion.update({
+        prisma.version.update({
          where: {
            versionId,
          },
--- a/server/api/v1/admin/home/index.get.ts
+++ b/server/api/v1/admin/home/index.get.ts
@ -0,0 +1,27 @@
+import aclManager from "~~/server/internal/acls";
+import prisma from "~~/server/internal/db/database";
+import { systemConfig } from "~~/server/internal/config/sys-conf";
+import libraryManager from "~~/server/internal/library";
+import userStatsManager from "~~/server/internal/userstats";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["game:read"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const sources = await libraryManager.fetchLibraries();
+  const userStats = await userStatsManager.getUserStats();
+
+  const biggestGamesCombined =
+    await libraryManager.getBiggestGamesCombinedVersions(5);
+  const biggestGamesLatest =
+    await libraryManager.getBiggestGamesLatestVersions(5);
+
+  return {
+    gameCount: await prisma.game.count(),
+    version: systemConfig.getDropVersion(),
+    userStats,
+    sources,
+    biggestGamesLatest,
+    biggestGamesCombined,
+  };
+});
--- a/server/api/v1/admin/import/version/index.get.ts
+++ b/server/api/v1/admin/import/version/index.get.ts
@ -1,29 +1,33 @@
+import { ArkErrors, type } from "arktype";
 import aclManager from "~~/server/internal/acls";
 import prisma from "~~/server/internal/db/database";
-import libraryManager from "~~/server/internal/library";
+import libraryManager, { VersionImportModes } from "~~/server/internal/library";
+
+export const PreloadQuery = type({
+  id: "string",
+  mode: type.enumerated(...VersionImportModes),
+});

 export default defineEventHandler(async (h3) => {
  const allowed = await aclManager.allowSystemACL(h3, ["import:version:read"]);
  if (!allowed) throw createError({ statusCode: 403 });

-  const query = await getQuery(h3);
-  const gameId = query.id?.toString();
-  if (!gameId)
-    throw createError({
-      statusCode: 400,
-      message: "Missing id in request params",
-    });
+  const rawQuery = await getQuery(h3);
+  const query = PreloadQuery(rawQuery);
+  if (query instanceof ArkErrors)
+    throw createError({ statusCode: 400, message: query.summary });

-  const game = await prisma.game.findUnique({
-    where: { id: gameId },
-    select: { libraryId: true, libraryPath: true },
-  });
-  if (!game || !game.libraryId)
-    throw createError({ statusCode: 404, message: "Game not found" });
+  const value: { libraryId: string; libraryPath: string } | undefined =
+    await // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (prisma[query.mode] as any).findUnique({
+      where: { id: query.id },
+      select: { libraryId: true, libraryPath: true },
+    });
+  if (!value) throw createError({ statusCode: 404, message: "Not found" });

  const unimportedVersions = await libraryManager.fetchUnimportedGameVersions(
-    game.libraryId,
-    game.libraryPath,
+    value.libraryId,
+    value.libraryPath,
  );
  if (!unimportedVersions)
    throw createError({ statusCode: 400, message: "Invalid game ID" });
--- a/server/api/v1/admin/library/sources/index.get.ts
+++ b/server/api/v1/admin/library/sources/index.get.ts
@ -2,7 +2,10 @@ import type { LibraryModel } from "~~/prisma/client/models";
 import aclManager from "~~/server/internal/acls";
 import libraryManager from "~~/server/internal/library";

-export type WorkingLibrarySource = LibraryModel & { working: boolean };
+export type WorkingLibrarySource = LibraryModel & {
+  working: boolean;
+  fsStats?: { freeSpace: number; totalSpace: number } | undefined;
+};

 export default defineEventHandler(async (h3) => {
  const allowed = await aclManager.allowSystemACL(h3, [
--- a/server/api/v1/admin/library/sources/index.patch.ts
+++ b/server/api/v1/admin/library/sources/index.patch.ts
@ -3,8 +3,8 @@ import { readDropValidatedBody, throwingArktype } from "~~/server/arktype";
 import aclManager from "~~/server/internal/acls";
 import prisma from "~~/server/internal/db/database";
 import libraryManager from "~~/server/internal/library";
+import type { WorkingLibrarySource } from "~~/server/api/v1/admin/library/sources/index.get";
 import { libraryConstructors } from "~~/server/plugins/05.library-init";
-import type { WorkingLibrarySource } from "./index.get";

 const UpdateLibrarySource = type({
  id: "string",
@ -49,8 +49,8 @@ export default defineEventHandler<{ body: typeof UpdateLibrarySource.infer }>(
        },
      });

-      await libraryManager.removeLibrary(source.id);
-      await libraryManager.addLibrary(newLibrary);
+      libraryManager.removeLibrary(source.id);
+      libraryManager.addLibrary(newLibrary);

      const workingSource: WorkingLibrarySource = {
        ...updatedSource,
--- a/server/api/v1/admin/library/sources/index.post.ts
+++ b/server/api/v1/admin/library/sources/index.post.ts
@ -6,7 +6,7 @@ import aclManager from "~~/server/internal/acls";
 import prisma from "~~/server/internal/db/database";
 import libraryManager from "~~/server/internal/library";
 import { libraryConstructors } from "~~/server/plugins/05.library-init";
-import type { WorkingLibrarySource } from "./index.get";
+import type { WorkingLibrarySource } from "~~/server/api/v1/admin/library/sources/index.get";

 const CreateLibrarySource = type({
  name: "string",
@ -52,11 +52,12 @@ export default defineEventHandler<{ body: typeof CreateLibrarySource.infer }>(
        },
      });

-      await libraryManager.addLibrary(library);
+      libraryManager.addLibrary(library);

      const workingSource: WorkingLibrarySource = {
        ...source,
        working: true,
+        fsStats: library.fsStats(),
      };

      return workingSource;
--- a/server/api/v1/admin/users/[id]/index.delete.ts
+++ b/server/api/v1/admin/users/[id]/index.delete.ts
@ -1,6 +1,7 @@
 import { defineEventHandler, createError } from "h3";
 import aclManager from "~~/server/internal/acls";
 import prisma from "~~/server/internal/db/database";
+import userStatsManager from "~~/server/internal/userstats";

 export default defineEventHandler(async (h3) => {
  const allowed = await aclManager.allowSystemACL(h3, ["user:delete"]);
@ -27,5 +28,6 @@ export default defineEventHandler(async (h3) => {
    throw createError({ statusCode: 404, message: "User not found." });

  await prisma.user.delete({ where: { id: userId } });
+  await userStatsManager.deleteUser();
  return { success: true };
 });
--- a/server/api/v1/auth/signup/simple.post.ts
+++ b/server/api/v1/auth/signup/simple.post.ts
@ -6,6 +6,7 @@ import objectHandler from "~~/server/internal/objects";
 import { type } from "arktype";
 import { randomUUID } from "node:crypto";
 import { throwingArktype } from "~~/server/arktype";
+import userStatsManager from "~~/server/internal/userstats";

 export const SharedRegisterValidator = type({
  username: "string >= 5",
@ -86,5 +87,6 @@ export default defineEventHandler<{
    prisma.invitation.delete({ where: { id: user.invitation } }),
  ]);

+  await userStatsManager.addUser();
  return linkMec.user;
 });
--- a/server/api/v1/client/game/version.get.ts
+++ b/server/api/v1/client/game/version.get.ts
@ -1,5 +1,6 @@
 import { defineClientEventHandler } from "~~/server/internal/clients/event-handler";
 import prisma from "~~/server/internal/db/database";
+import libraryManager from "~~/server/internal/library";

 export default defineClientEventHandler(async (h3) => {
  const query = getQuery(h3);
@ -23,5 +24,8 @@ export default defineClientEventHandler(async (h3) => {
      message: "Game version not found",
    });

-  return gameVersion;
+  return {
+    ...gameVersion,
+    size: libraryManager.getGameVersionSize(id, version),
+  };
 });
--- a/server/api/v1/client/game/versions.get.ts
+++ b/server/api/v1/client/game/versions.get.ts
@ -10,16 +10,17 @@ export default defineClientEventHandler(async (h3) => {
      message: "No ID in request query",
    });

-  const versions = await prisma.gameVersion.findMany({
+  const versions = await prisma.version.findMany({
    where: {
-      version: {
-        gameId: id,
-      },
+      gameId: id,
      hidden: false,
    },
    orderBy: {
      versionIndex: "desc", // Latest one first
    },
+    include: {
+      gameVersions: true,
+    },
  });

  return versions;
--- a/server/api/v1/games/[id]/index.get.ts
+++ b/server/api/v1/games/[id]/index.get.ts
@ -1,6 +1,7 @@
 import aclManager from "~~/server/internal/acls";
 import prisma from "~~/server/internal/db/database";
 import { convertIDsToPlatforms } from "~~/server/internal/platform/link";
+import libraryManager from "~~/server/internal/library";

 export default defineEventHandler(async (h3) => {
  const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
@ -72,5 +73,7 @@ export default defineEventHandler(async (h3) => {

  const noVersionsGame = { ...game, versions: undefined };

-  return { game: noVersionsGame, rating, platforms };
+  const size = await libraryManager.getGameVersionSize(game.id);
+
+  return { game: noVersionsGame, rating, platforms, size };
 });
--- a/server/internal/clients/handler.ts
+++ b/server/internal/clients/handler.ts
@ -7,6 +7,7 @@ import type {
 } from "./capabilities";
 import capabilityManager from "./capabilities";
 import type { PeerImpl } from "../tasks";
+import userStatsManager from "~~/server/internal/userstats";

 export const AuthModes = ["callback", "code"] as const;
 export type AuthMode = (typeof AuthModes)[number];
@ -133,7 +134,7 @@ export class ClientHandler {
        statusCode: 400,
        message: "Client has not connected yet. Please try again later.",
      });
-    await client.peer.send(
+    client.peer.send(
      JSON.stringify({ type: "token", value: `${clientId}/${token}` }),
    );
  }
@ -163,6 +164,7 @@ export class ClientHandler {
        lastConnected: new Date(),
      },
    });
+    await userStatsManager.cacheUserSessions();

    for (const [capability, configuration] of Object.entries(
      metadata.data.capabilities,
@ -188,6 +190,7 @@ export class ClientHandler {
        id,
      },
    });
+    await userStatsManager.cacheUserStats();
  }
 }

--- a/server/internal/downloads/manifest.ts
+++ b/server/internal/downloads/manifest.ts
@ -1,4 +1,5 @@
 import prisma from "../db/database";
+import { sum } from "~/utils/array";

 export type DropChunk = {
  permissions: number;
@ -70,6 +71,7 @@ class ManifestGenerator {
          select: {
            gameId: true,
            dropletManifest: true,
+            versionIndex: true,
          },
        },
      },
@ -82,16 +84,16 @@ class ManifestGenerator {
      // Start at the same index minus one, and keep grabbing them
      // until we run out or we hit something that isn't a delta
      // eslint-disable-next-line no-constant-condition
-      for (let i = baseVersion.versionIndex - 1; true; i--) {
+      for (let i = baseVersion.version.versionIndex - 1; true; i--) {
        const currentVersion = await prisma.gameVersion.findFirst({
          where: {
            version: {
              gameId: baseVersion.version.gameId!,
+              versionIndex: i,
            },
            platform: {
              id: baseVersion.platform.id,
            },
-            versionIndex: i,
          },
          include: {
            version: {
@ -123,6 +125,14 @@ class ManifestGenerator {

    return manifest;
  }
+
+  calculateManifestSize(manifest: DropManifest) {
+    return sum(
+      Object.values(manifest)
+        .map((chunk) => chunk.lengths)
+        .flat(),
+    );
+  }
 }

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

 export const VersionImportModes = ["game", "redist"] as const;
 export type VersionImportMode = (typeof VersionImportModes)[number];
@ -54,13 +56,19 @@ class LibraryManager {
    this.libraries.delete(id);
  }

-  async fetchLibraries() {
+  async fetchLibraries(): Promise<WorkingLibrarySource[]> {
    const libraries = await prisma.library.findMany({});
-    const libraryWithMetadata = libraries.map((e) => ({
-      ...e,
-      working: this.libraries.has(e.id),
-    }));
-    return libraryWithMetadata;
+
+    const libraryWithMetadata = libraries.map(async (library) => {
+      const theLibrary = this.libraries.get(library.id);
+      const working = this.libraries.has(library.id);
+      return {
+        ...library,
+        working,
+        fsStats: working ? theLibrary?.fsStats() : undefined,
+      };
+    });
+    return await Promise.all(libraryWithMetadata);
  }

  async fetchGamesByLibrary() {
@ -255,36 +263,43 @@ class LibraryManager {
    id: string,
    currentIndex: number,
    metadata: typeof ImportVersion.infer,
-  ): Partial<VersionCreateArgs["data"]> {
+  ): Omit<
+    VersionCreateInput,
+    "versionPath" | "versionName" | "dropletManifest"
+  > {
+    const installCreator = {
+      install: {
+        create: {
+          name: "",
+          description: "",
+          command: metadata.install!,
+          args: metadata.installArgs || "",
+        },
+      },
+    } satisfies Partial<GameVersionCreateInput>;
+
+    const uninstallCreator = {
+      uninstall: {
+        create: {
+          name: "",
+          description: "",
+          command: metadata.uninstall!,
+          args: metadata.uninstallArgs || "",
+        },
+      },
+    } satisfies Partial<GameVersionCreateInput>;
+
    switch (metadata.mode) {
      case "game": {
-        const installCreator = {
-          install: {
-            create: {
-              name: "",
-              description: "",
-              command: metadata.install!,
-              args: metadata.installArgs || "",
-            },
-          },
-        } satisfies Partial<GameVersionCreateInput>;
-
-        const uninstallCreator = {
-          uninstall: {
-            create: {
-              name: "",
-              description: "",
-              command: metadata.uninstall!,
-              args: metadata.uninstallArgs || "",
-            },
-          },
-        } satisfies Partial<GameVersionCreateInput>;
-
        return {
-          gameId: id,
+          versionIndex: currentIndex,
+          game: {
+            connect: {
+              id,
+            },
+          },
          gameVersions: {
            create: {
-              versionIndex: currentIndex,
              delta: metadata.delta,
              umuIdOverride: metadata.umuId,

@ -317,7 +332,43 @@ class LibraryManager {
        };
      }
      case "redist":
-        return {};
+        return {
+          versionIndex: currentIndex,
+          redist: {
+            connect: {
+              id,
+            },
+          },
+          redistVersions: {
+            create: {
+              versionIndex: currentIndex,
+              delta: metadata.delta,
+
+              launches: {
+                createMany: {
+                  data: metadata.launches.map(
+                    (v) =>
+                      ({
+                        name: v.name,
+                        description: v.description,
+                        command: v.launchCommand,
+                        args: v.launchArgs,
+                      }) satisfies LaunchOptionCreateManyInput,
+                  ),
+                },
+              },
+
+              ...(metadata.install ? installCreator : undefined),
+              ...(metadata.uninstall ? uninstallCreator : undefined),
+
+              platform: {
+                connect: {
+                  id: metadata.platform,
+                },
+              },
+            },
+          },
+        };
    }
  }

@ -497,7 +548,7 @@ class LibraryManager {
        logger.info("Created manifest successfully!");

        // Then, create the database object
-        await prisma.version.create({
+        const createdVersion = await prisma.version.create({
          data: {
            versionPath: version,
            versionName: metadata.name ?? version,
@ -517,6 +568,14 @@ class LibraryManager {
          acls: ["system:import:version:read"],
        });

+        if (metadata.mode === "game") {
+          await libraryManager.cacheCombinedGameSize(id);
+          await libraryManager.cacheGameVersionSize(
+            id,
+            createdVersion.versionId,
+          );
+        }
+
        progress(100);
      },
    });
@ -546,6 +605,73 @@ class LibraryManager {
    if (!library) return undefined;
    return await library.readFile(game, version, filename, options);
  }
+
+  async deleteGameVersion(versionId: string) {
+    const version = await prisma.version.delete({
+      where: {
+        versionId,
+      },
+      include: {
+        game: true,
+      },
+    });
+
+    if (version.game) {
+      await gameSizeManager.deleteGameVersion(
+        version.game.id,
+        version.versionId,
+      );
+    }
+  }
+
+  async deleteGame(gameId: string) {
+    await prisma.game.delete({
+      where: {
+        id: gameId,
+      },
+    });
+    gameSizeManager.deleteGame(gameId);
+  }
+
+  async getGameVersionSize(
+    gameId: string,
+    versionId?: string,
+  ): Promise<number | null> {
+    return gameSizeManager.getGameVersionSize(gameId, versionId);
+  }
+
+  async getBiggestGamesCombinedVersions(top: number) {
+    if (await gameSizeManager.isGameSizesCacheEmpty()) {
+      await gameSizeManager.cacheAllCombinedGames();
+    }
+    return gameSizeManager.getBiggestGamesAllVersions(top);
+  }
+
+  async getBiggestGamesLatestVersions(top: number) {
+    if (await gameSizeManager.isGameVersionsSizesCacheEmpty()) {
+      await gameSizeManager.cacheAllGameVersions();
+    }
+    return gameSizeManager.getBiggestGamesLatestVersion(top);
+  }
+
+  async cacheCombinedGameSize(gameId: string) {
+    const game = await prisma.game.findFirst({ where: { id: gameId } });
+    if (!game) {
+      return;
+    }
+    await gameSizeManager.cacheCombinedGame(game);
+  }
+
+  async cacheGameVersionSize(gameId: string, versionId: string) {
+    const game = await prisma.game.findFirst({
+      where: { id: gameId },
+      include: { versions: true },
+    });
+    if (!game) {
+      return;
+    }
+    await gameSizeManager.cacheGameVersion(game, versionId);
+  }
 }

 export const libraryManager = new LibraryManager();
--- a/server/internal/library/provider.ts
+++ b/server/internal/library/provider.ts
@ -57,6 +57,8 @@ export abstract class LibraryProvider<CFG> {
    filename: string,
    options?: { start?: number; end?: number },
  ): Promise<ReadableStream | undefined>;
+
+  abstract fsStats(): { freeSpace: number; totalSpace: number } | undefined;
 }

 export class GameNotFoundError extends Error {}
--- a/server/internal/library/providers/filesystem.ts
+++ b/server/internal/library/providers/filesystem.ts
@ -8,6 +8,7 @@ import { LibraryBackend } from "~~/prisma/client/enums";
 import fs from "fs";
 import path from "path";
 import droplet, { DropletHandler } from "@drop-oss/droplet";
+import { fsStats } from "~~/server/internal/utils/files";

 export const FilesystemProviderConfig = type({
  baseDir: "string",
@ -122,4 +123,8 @@ export class FilesystemProvider

    return stream;
  }
+
+  fsStats() {
+    return fsStats(this.config.baseDir);
+  }
 }
--- a/server/internal/library/providers/flat.ts
+++ b/server/internal/library/providers/flat.ts
@ -6,6 +6,7 @@ import fs from "fs";
 import path from "path";
 import droplet from "@drop-oss/droplet";
 import { DROPLET_HANDLER } from "./filesystem";
+import { fsStats } from "~~/server/internal/utils/files";

 export const FlatFilesystemProviderConfig = type({
  baseDir: "string",
@ -113,4 +114,8 @@ export class FlatFilesystemProvider

    return stream.getStream();
  }
+
+  fsStats() {
+    return fsStats(this.config.baseDir);
+  }
 }
--- a/server/internal/userstats/index.ts
+++ b/server/internal/userstats/index.ts
@ -0,0 +1,68 @@
+/*
+Handles managing collections
+*/
+
+import cacheHandler from "../cache";
+import prisma from "../db/database";
+import { DateTime } from "luxon";
+
+class UserStatsManager {
+  // Caches the user's core library
+  private userStatsCache = cacheHandler.createCache<number>("userStats");
+
+  async cacheUserSessions() {
+    const activeSessions =
+      (
+        await prisma.client.groupBy({
+          by: ["userId"],
+          where: {
+            id: { not: "system" },
+            lastConnected: {
+              gt: DateTime.now().minus({ months: 1 }).toISO(),
+            },
+          },
+        })
+      ).length || 0;
+    await this.userStatsCache.set("activeSessions", activeSessions);
+  }
+
+  private async cacheUserCount() {
+    const userCount =
+      (await prisma.user.count({
+        where: { id: { not: "system" } },
+      })) || 0;
+    await this.userStatsCache.set("userCount", userCount);
+  }
+
+  async cacheUserStats() {
+    await this.cacheUserSessions();
+    await this.cacheUserCount();
+  }
+
+  async getUserStats() {
+    let activeSessions = await this.userStatsCache.get("activeSessions");
+    let userCount = await this.userStatsCache.get("userCount");
+
+    if (activeSessions === null || userCount === null) {
+      await this.cacheUserStats();
+      activeSessions = (await this.userStatsCache.get("activeSessions")) || 0;
+      userCount = (await this.userStatsCache.get("userCount")) || 0;
+    }
+
+    return { activeSessions, userCount };
+  }
+
+  async addUser() {
+    const userCount = (await this.userStatsCache.get("userCount")) || 0;
+    await this.userStatsCache.set("userCount", userCount + 1);
+  }
+
+  async deleteUser() {
+    const userCount = (await this.userStatsCache.get("userCount")) || 1;
+    await this.userStatsCache.set("userCount", userCount - 1);
+    await this.cacheUserSessions();
+  }
+}
+
+export const manager = new UserStatsManager();
+export default manager;
--- a/server/internal/utils/files.ts
+++ b/server/internal/utils/files.ts
@ -0,0 +1,47 @@
+import fs from "fs";
+import nodePath from "path";
+
+export function fsStats(folderPath: string) {
+  const stats = fs.statfsSync(folderPath);
+  const freeSpace = stats.bavail * stats.bsize;
+  const totalSpace = stats.blocks * stats.bsize;
+  return { freeSpace, totalSpace };
+}
+
+export function getFolderSize(folderPath: string): number {
+  const files = fs.readdirSync(folderPath, { withFileTypes: true });
+
+  const paths = files.map((file) => {
+    const path = nodePath.join(folderPath, file.name);
+    if (file.isDirectory()) {
+      return getFolderSize(path);
+    }
+    if (file.isFile()) {
+      return fs.statSync(path).size;
+    }
+    return 0;
+  });
+
+  return paths
+    .flat(Infinity)
+    .reduce(
+      (accumulator: number, currentValue: number) => accumulator + currentValue,
+      0,
+    );
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes >= 1024 && bytes < Math.pow(1024, 2)) {
+    return `${(bytes / 1024).toFixed(2)} KiB`;
+  }
+  if (bytes >= Math.pow(1024, 2) && bytes < Math.pow(1024, 3)) {
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MiB`;
+  }
+  if (bytes >= Math.pow(1024, 3) && bytes < Math.pow(1024, 4)) {
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GiB`;
+  }
+  return `${(bytes / Math.pow(1024, 4)).toFixed(2)} TiB`;
+}
Author	SHA1	Message	Date
Weblate	54801d9448	Translated using Weblate (French) Currently translated at 100.0% (499 of 499 strings) Translated using Weblate (French) Currently translated at 96.9% (484 of 499 strings) Co-authored-by: Ribemont Francois <ribemont.francois+weblate@gmail.com> Co-authored-by: Weblate <noreply@weblate.org> Translate-URL: http://translate.droposs.org/projects/drop/drop/fr/ Translation: Drop/Drop	2025-11-09 23:36:19 +00:00
DecDuck	251ddb8ff8	Rearchitecture for v0.4.0 (#197 ) * feat: database redist support * feat: rearchitecture of database schemas, migration reset, and #180 * feat: import redists * fix: giantbomb logging bug * feat: partial user platform support + statusMessage -> message * feat: add user platform filters to store view * fix: sanitize svg uploads ... copilot suggested this I feel dirty. * feat: beginnings of platform & redist management * feat: add server side redist patching * fix: update drop-base commit * feat: import of custom platforms & file extensions * fix: redelete platform * fix: remove platform * feat: uninstall commands, new R UI * checkpoint: before migrating to nuxt v4 * update to nuxt 4 * fix: fixes for Nuxt v4 update * fix: remaining type issues * feat: initial feedback to import other kinds of versions * working commit * fix: lint * feat: redist import	2025-11-10 10:36:13 +11:00
Paco	dfa30c8a65	Admin home page #128 (#259 ) * First iteration on the new PieChart component * #128 Adds new admin home page * Fixes code after merging conflicts * Removes empty file * Uses real data for admin home page, and improves style * Reverts debugging code * Defines missing variable * Caches user stats data for admin home page * Typo * Styles improvements * Invalidates cache on signup/signin * Implements top 5 biggest games * Improves styling * Improves style * Using generateManifest to get the proper size * Reading data from cache * Removes unnecessary import * Improves caching mechanism for game sizes * Removes lint errors * Replaces piechart tooltip with colors in legend * Fixes caching * Fixes caching and slight improvement on pie chart colours * Fixes a few bugs related to caching * Fixes bug where app signin didn't refresh cache * feat: style improvements * fix: lint --------- Co-authored-by: DecDuck <declanahofmeyr@gmail.com>	2025-11-08 09:14:45 +11:00
laylafogiel-hash	289034d0c8	Add manual release date editor (#262 ) * add manual release date editor * watch() releaseDate instead of relying on coreMetadata updates * make linter happy --------- Co-authored-by: udifogiel <udifogiel@proton.me>	2025-11-07 09:27:37 +11:00