Fix Prisma build

* 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>

Dockerfile

@@ -45,12 +45,12 @@ ENV NODE_ENV=production
 ENV NUXT_TELEMETRY_DISABLED=1
 
 # RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn add --network-timeout 1000000 --no-lockfile --ignore-scripts prisma@6.11.1
-RUN apk add --no-cache pnpm
+RUN apk add --no-cache pnpm 7zip
 RUN pnpm install prisma@6.11.1
 # init prisma to download all required files
 RUN pnpm prisma init
 
-COPY --from=build-system /app/package.json ./
+COPY --from=build-system /app/prisma.config.ts ./
 COPY --from=build-system /app/.output ./app
 COPY --from=build-system /app/prisma ./prisma
 COPY --from=build-system /app/build ./startup

components/CarouselPagination.vue

@@ -3,11 +3,11 @@
     <button
       v-for="(_, i) in amount"
       :key="i"
-      @click="slideTo(i)"
       :class="[
         carousel.currentSlide === i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
-        'transition-all cursor-pointer h-2 rounded-full'
+        'transition-all cursor-pointer h-2 rounded-full',
       ]"
+      @click="slideTo(i)"
     />
   </div>
 </template>

components/GameEditor/Metadata.vue

@@ -29,6 +29,23 @@
 
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-8">
           <MultiItemSelector v-model="currentTags" :items="tags" />
+          <div class="flex flex-col">
+            <label
+              for="releaseDate"
+              class="text-sm/6 font-medium text-zinc-100"
+            >
+              {{ $t("library.admin.game.editReleaseDate") }}
+            </label>
+            <div class="mt-2">
+              <input
+                id="releaseDate"
+                v-model="releaseDate"
+                type="date"
+                name="releaseDate"
+                class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+              />
+            </div>
+          </div>
         </div>
 
         <!-- image carousel pick -->
@@ -491,11 +508,38 @@ watch(
   { deep: true },
 );
 
+const releaseDate = ref(
+  game.value.mReleased
+    ? new Date(game.value.mReleased).toISOString().substring(0, 10)
+    : "",
+);
+
+watch(releaseDate, async (newDate) => {
+  const body: PatchGameBody = {};
+
+  if (newDate) {
+    const parsed = new Date(newDate);
+    if (!isNaN(parsed.getTime())) {
+      body.mReleased = parsed;
+    }
+  }
+
+  await $dropFetch(`/api/v1/admin/game/:id`, {
+    method: "PATCH",
+    params: {
+      id: game.value.id,
+    },
+    body,
+    failTitle: "Failed to update release date",
+  });
+});
+
 const { t } = useI18n();
 
 // I don't know why I split these fields off.
 const coreMetadataName = ref(game.value.mName);
 const coreMetadataDescription = ref(game.value.mShortDescription);
+
 const coreMetadataIconUrl = ref(useObject(game.value.mIconObjectId));
 const coreMetadataIconFileUpload = ref<FileList | undefined>();
 const coreMetadataLoading = ref(false);
@@ -561,7 +605,6 @@ function coreMetadataUpdate_wrapper() {
       );
     })
     .then((newGame) => {
-      console.log(newGame);
       if (!newGame) return;
       Object.assign(game.value, newGame);
       coreMetadataIconUrl.value = useObject(newGame.mIconObjectId);

components/GameEditor/Version.vue

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

components/Icons/GamepadIcon.vue

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

components/PieChart/PieChart.vue

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

components/PieChart/PieSlice.vue

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

components/PieChart/types.d.ts

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

components/PieChart/utils.ts

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

components/ProgressBar.vue

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

components/RankingList.vue

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

components/SourceTable.vue

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

components/StoreView.vue

@@ -1,3 +1,12 @@
+<i18n>
+{
+  "en": {
+    "↓": "↓",
+    "↑": "↑"
+  }
+}
+</i18n>
+
 <template>
   <div>
     <div>
@@ -180,7 +189,7 @@
                       >
                         {{ option.name }}
                         <span v-if="currentSort === option.param">
-                          {{ sortOrder === 'asc' ? '↑' : '↓' }}
+                          {{ sortOrder === "asc" ? $t("↑") : $t("↓") }}
                         </span>
                       </button>
                     </MenuItem>
@@ -500,11 +509,10 @@ await updateGames(filterQuery.value, true);
 function handleSortClick(option: StoreSortOption, event: MouseEvent) {
   event.stopPropagation();
   if (currentSort.value === option.param) {
-    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
   } else {
     currentSort.value = option.param;
-    sortOrder.value = option.param === 'name' ? 'asc' : 'desc';
+    sortOrder.value = option.param === "name" ? "asc" : "desc";
   }
 }
-
 </script>

components/TileWithLink.vue

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

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",

layouts/admin.vue

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drop",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "license": "AGPL-3.0-or-later",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@discordapp/twemoji": "^16.0.1",
-    "@drop-oss/droplet": "3.0.1",
+    "@drop-oss/droplet": "3.2.0",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
     "@lobomfz/prismark": "0.0.3",
@@ -47,7 +47,7 @@
     "nuxt-security": "2.2.0",
     "pino": "^9.7.0",
     "pino-pretty": "^13.0.0",
-    "prisma": "^6.11.1",
+    "prisma": "6.11.1",
     "sanitize-filename": "^1.6.3",
     "semver": "^7.7.1",
     "stream-mime-type": "^2.0.0",
@@ -87,8 +87,5 @@
       "vue3-carousel": "^0.16.0"
     }
   },
-  "prisma": {
-    "schema": "./prisma"
-  },
   "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
 }

pages/admin/index.vue

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

pages/admin/library/sources/index.vue

@@ -18,99 +18,12 @@
         </button>
       </div>
     </div>
-    <div class="mt-8 flow-root">
+    <div class="mt-4 flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <SourceTable
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        :sources="sources"
-          <table class="min-w-full divide-y divide-zinc-700">
+        :edit-source="edit"
-            <thead>
+        :delete-source="deleteSource"
-              <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>
 
     <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";

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">
+      <ProgressBar :percentage="task.progress" />
-        <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>
     </div>
     <div v-else role="status" class="w-full flex items-center justify-center">
       <svg

pages/store/[id]/index.vue

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

pnpm-lock.yaml

@@ -4,6 +4,9 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  droplet: link:../../.local/share/pnpm/global/5/node_modules/@drop-oss/droplet
+
 importers:
 
   .:
@@ -12,8 +15,8 @@ importers:
         specifier: ^16.0.1
         version: 16.0.1
       '@drop-oss/droplet':
-        specifier: 3.0.1
+        specifier: 3.2.0
-        version: 3.0.1
+        version: 3.2.0
       '@headlessui/vue':
         specifier: ^1.7.23
         version: 1.7.23(vue@3.5.22(typescript@5.8.3))
@@ -34,7 +37,7 @@ importers:
         version: 9.5.6(@vue/compiler-dom@3.5.22)(eslint@9.31.0(jiti@2.5.1))(magicast@0.3.5)(rollup@4.46.2)(vue@3.5.22(typescript@5.8.3))
       '@prisma/client':
         specifier: ^6.11.1
-        version: 6.12.0(prisma@6.12.0(typescript@5.8.3))(typescript@5.8.3)
+        version: 6.12.0(prisma@6.11.1(typescript@5.8.3))(typescript@5.8.3)
       '@tailwindcss/vite':
         specifier: ^4.0.6
         version: 4.1.11(vite@7.0.6(@types/node@22.16.5)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))
@@ -90,8 +93,8 @@ importers:
         specifier: ^13.0.0
         version: 13.0.0
       prisma:
-        specifier: ^6.11.1
+        specifier: 6.11.1
-        version: 6.12.0(typescript@5.8.3)
+        version: 6.11.1(typescript@5.8.3)
       sanitize-filename:
         specifier: ^1.6.3
         version: 1.6.3
@@ -370,67 +373,67 @@ packages:
   '@discordapp/twemoji@16.0.1':
     resolution: {integrity: sha512-figLiBWzjS5cyrAjLaGjM8AAaowO3qvK8rg5bA2dElB4qsaPMvBVlFDMO2d3x+nC1igt7kgWH4dvNmvvUHUF8w==}
 
-  '@drop-oss/droplet-darwin-arm64@3.0.1':
+  '@drop-oss/droplet-darwin-arm64@3.2.0':
-    resolution: {integrity: sha512-LXe8vsXUBL96boI78H6oXpSaPVwF4cCwJ5l/QVtsOWMebNo6gk9wICDZ+5IoR/Ol32t1a1lk+DjbD1zeGenPxg==}
+    resolution: {integrity: sha512-dH/vRFxuLjOzYBBvDG140wKcx4LmFxBJ5iTjZrWzV641wiRjx8B38niWXuqZ2ZADkCL4muOvgRGFJ4W1N/j6jQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@drop-oss/droplet-darwin-universal@3.0.1':
+  '@drop-oss/droplet-darwin-universal@3.2.0':
-    resolution: {integrity: sha512-Mf2gjC24u6s8djV/3slZvwdr4+h0qBu2OYXBUSDfR4H/VJwV5TstnWVKF+U8d1hjmHE9eLO8elbGNnpQmSoTOQ==}
+    resolution: {integrity: sha512-k7Xhzs2mXrQcm3SLhLNDBkUaCWqtbQ6dyme1ubsG9PZEcvv25T//8CNVFEsHVZTKqj5nF41iSh4Wz1Qn6VxkVw==}
     engines: {node: '>= 10'}
     os: [darwin]
 
-  '@drop-oss/droplet-darwin-x64@3.0.1':
+  '@drop-oss/droplet-darwin-x64@3.2.0':
-    resolution: {integrity: sha512-4IIDl/E+hzZ2Vt9m4FMPlZEXwj1EwE6qXyUidACK6TTFqpjLpsEHKuhv1FOxGyJ8qkvagtyPCc+cs1TxoZD6FA==}
+    resolution: {integrity: sha512-GvRwQrtcC1Dq6YyXxBGSFj+WasnIa1dk9t2lCaR9OQdh3qp2did21o2poo1Sgdjg+mI2lUdgZ6w0yXJlL1vl+A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@drop-oss/droplet-linux-arm64-gnu@3.0.1':
+  '@drop-oss/droplet-linux-arm64-gnu@3.2.0':
-    resolution: {integrity: sha512-klGvlLf1xSMT3iYsIAaBbmbir1ZJWtcVyOMUlsfc1lkJ8mgyB+PrW4BsnYj7Pp4G34n7WsOChjC8TdJDBBuBWg==}
+    resolution: {integrity: sha512-ZqH0xTEeSeJF77vy8rZDxHEV8JMaN0khdg6ptpnbBfc56J5jt6wS3NlHK8M0ZVlDqqZnXMS1vUO0b6rfmQodKw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@drop-oss/droplet-linux-arm64-musl@3.0.1':
+  '@drop-oss/droplet-linux-arm64-musl@3.2.0':
-    resolution: {integrity: sha512-oOjvGETlrJGC1RlNhUoVS9N89Rn/0DqBauVz3BBFjJTKSd5jU3/gLzwgmfkKDGVEU5lyGPAn2WQroiESEG9wdA==}
+    resolution: {integrity: sha512-TTw44PggYfp3RJkvNhXH89duuuvONEA8c8oRBCzCczRf3hDnbzCQLaB1UlnIlESsJZXXiFSDIBV2/0kkpB+Ukg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@drop-oss/droplet-linux-riscv64-gnu@3.0.1':
+  '@drop-oss/droplet-linux-riscv64-gnu@3.2.0':
-    resolution: {integrity: sha512-Zf3gUsWq9Hqb275MOi7PJDhmJz7Qa/Y1XMen880bxPaOeDFqFOoKUxUr2/qv1MYp6tT3zO27NprGsHirYWqsyA==}
+    resolution: {integrity: sha512-Ee/PfkoG8pm/9C3LFXJleIi5N8V5cK+44p+iDaneAo6gj5k67zYzuga3mJVswTgd3fncG1cw+xPqBl4PUWc1pg==}
     engines: {node: '>= 10'}
     cpu: [riscv64]
     os: [linux]
 
-  '@drop-oss/droplet-linux-x64-gnu@3.0.1':
+  '@drop-oss/droplet-linux-x64-gnu@3.2.0':
-    resolution: {integrity: sha512-sskblycJdtNJVnRHjPHhwHkQUfQNaDIWDzXOzEaBPOcDKqYA7od7VMDAseqBkrKDn7l8bBUtRXFAipdsO8hffw==}
+    resolution: {integrity: sha512-L2M/MEoe5Y74MTtzpEWHIvdyRSPLgM1WLzpb/xRNCWe8d6FcUFDgdMlbd6rDj5t4Q6JEzyMIHUciVRaYIv+ShA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@drop-oss/droplet-linux-x64-musl@3.0.1':
+  '@drop-oss/droplet-linux-x64-musl@3.2.0':
-    resolution: {integrity: sha512-lh+1M6UAf5+ET1/ZEFRsB3shFHjkT/9Ql9akr/vyUue91TWPmP71meqVkCugWDhP6lxBt56jg2VVrJfmPAsK6w==}
+    resolution: {integrity: sha512-F/uQUAHWbhiiAtoyKHQHPgjG7jJd8pQX6sCgdf5ufCdwFLvHEdu9pO0qN+xpzaACceIKX4Vip0vUwQwEzYhAKA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@drop-oss/droplet-win32-arm64-msvc@3.0.1':
+  '@drop-oss/droplet-win32-arm64-msvc@3.2.0':
-    resolution: {integrity: sha512-caQDPoDNJyyJXUEijw+hGTy0wmCrW5efTqBwnvMcQ282EOilg1d5WeJ31pfEcuLYF4MK1t9uaLcG6jZ9YLtzEQ==}
+    resolution: {integrity: sha512-x7i1KKL8vQGcXbKIyH56LCEdQxLKNEk/KFjuD/YGrbBJ/+Q+fh46hLK+Sx4I/HzPHecd5g3xc2kVgO7+DgjhYA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@drop-oss/droplet-win32-x64-msvc@3.0.1':
+  '@drop-oss/droplet-win32-x64-msvc@3.2.0':
-    resolution: {integrity: sha512-bp8KwewF/T3JkVeJWkg86U3b0cGQD9i8k92x6HYPtnF5nLPAb2UIUEJgmYYFNPFe36RECBV7PIIG0ujdT1ELQw==}
+    resolution: {integrity: sha512-lC8a456IQ0ArzX40IlStolV4GIdl26xF9PikcuQ9r+n4VDqWSHb8A0Wwj87leU3QdoMu+Y2nlA1QHKgpVSEuoQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@drop-oss/droplet@3.0.1':
+  '@drop-oss/droplet@3.2.0':
-    resolution: {integrity: sha512-YhtgpwNqEHO8R03yf9Xb5LXuaLWkQvY+2lxOD1PwzpGI5V9PKlDE+x1IJBmdBF5bDPDGk9MxQidGtnYQuAEBEA==}
+    resolution: {integrity: sha512-+3zw3MPriMrj8HlKAq2VTlXEPOXN0homusjmQcBRzVx7GjtGvb5Y9YIHs16qfn8zdTEDi5twrtsUBQYkVjU2bQ==}
     engines: {node: '>= 10'}
 
   '@emnapi/core@1.4.5':
@@ -1455,11 +1458,11 @@ packages:
       typescript:
         optional: true
 
-  '@prisma/config@6.12.0':
+  '@prisma/config@6.11.1':
-    resolution: {integrity: sha512-HovZWzhWEMedHxmjefQBRZa40P81N7/+74khKFz9e1AFjakcIQdXgMWKgt20HaACzY+d1LRBC+L4tiz71t9fkg==}
+    resolution: {integrity: sha512-z6rCTQN741wxDq82cpdzx2uVykpnQIXalLhrWQSR0jlBVOxCIkz3HZnd8ern3uYTcWKfB3IpVAF7K2FU8t/8AQ==}
 
-  '@prisma/debug@6.12.0':
+  '@prisma/debug@6.11.1':
-    resolution: {integrity: sha512-plbz6z72orcqr0eeio7zgUrZj5EudZUpAeWkFTA/DDdXEj28YHDXuiakvR6S7sD6tZi+jiwQEJAPeV6J6m/tEQ==}
+    resolution: {integrity: sha512-lWRb/YSWu8l4Yum1UXfGLtqFzZkVS2ygkWYpgkbgMHn9XJlMITIgeMvJyX5GepChzhmxuSuiq/MY/kGFweOpGw==}
 
   '@prisma/debug@6.13.0':
     resolution: {integrity: sha512-um+9pfKJW0ihmM83id9FXGi5qEbVJ0Vxi1Gm0xpYsjwUBnw6s2LdPBbrsG9QXRX46K4CLWCTNvskXBup4i9hlw==}
@@ -1467,14 +1470,14 @@ packages:
   '@prisma/dmmf@6.13.0':
     resolution: {integrity: sha512-69qWP2ddIpI2L3VyQkwGjhtyj1CNXUJ0qZPLa1VmZ27h20rUXBPflLAel9EtOyct/GSTjSq8qjBbhW5ohrfbSw==}
 
-  '@prisma/engines-version@6.12.0-15.8047c96bbd92db98a2abc7c9323ce77c02c89dbc':
+  '@prisma/engines-version@6.11.1-1.f40f79ec31188888a2e33acda0ecc8fd10a853a9':
-    resolution: {integrity: sha512-70vhecxBJlRr06VfahDzk9ow4k1HIaSfVUT3X0/kZoHCMl9zbabut4gEXAyzJZxaCGi5igAA7SyyfBI//mmkbQ==}
+    resolution: {integrity: sha512-swFJTOOg4tHyOM1zB/pHb3MeH0i6t7jFKn5l+ZsB23d9AQACuIRo9MouvuKGvnDogzkcjbWnXi/NvOZ0+n5Jfw==}
 
-  '@prisma/engines@6.12.0':
+  '@prisma/engines@6.11.1':
-    resolution: {integrity: sha512-4BRZZUaAuB4p0XhTauxelvFs7IllhPmNLvmla0bO1nkECs8n/o1pUvAVbQ/VOrZR5DnF4HED0PrGai+rIOVePA==}
+    resolution: {integrity: sha512-6eKEcV6V8W2eZAUwX2xTktxqPM4vnx3sxz3SDtpZwjHKpC6lhOtc4vtAtFUuf5+eEqBk+dbJ9Dcaj6uQU+FNNg==}
 
-  '@prisma/fetch-engine@6.12.0':
+  '@prisma/fetch-engine@6.11.1':
-    resolution: {integrity: sha512-EamoiwrK46rpWaEbLX9aqKDPOd8IyLnZAkiYXFNuq0YsU0Z8K09/rH8S7feOWAVJ3xzeSgcEJtBlVDrajM9Sag==}
+    resolution: {integrity: sha512-NBYzmkXTkj9+LxNPRSndaAeALOL1Gr3tjvgRYNqruIPlZ6/ixLeuE/5boYOewant58tnaYFZ5Ne0jFBPfGXHpQ==}
 
   '@prisma/generator-helper@6.13.0':
     resolution: {integrity: sha512-6v5k9sGMhRDAnWxVfIo7QlewgVyOhr2NykyNh/PaH55g0LDswiTSYDfPPKyCPLxjDG0eA7FFX+gDyf94QkLT1A==}
@@ -1482,8 +1485,8 @@ packages:
   '@prisma/generator@6.13.0':
     resolution: {integrity: sha512-vlV1qiEEb1w7D1J0h5/rz3ppgM/BRcJP5xz2QqHBlbjcAWzJjHkHsxeuC/OmkO4uHZXe9T2dGtf/nTw29UsBzA==}
 
-  '@prisma/get-platform@6.12.0':
+  '@prisma/get-platform@6.11.1':
-    resolution: {integrity: sha512-nRerTGhTlgyvcBlyWgt8OLNIV7QgJS2XYXMJD1hysorMCuLAjuDDuoxmVt7C2nLxbuxbWPp7OuFRHC23HqD9dA==}
+    resolution: {integrity: sha512-b2Z8oV2gwvdCkFemBTFd0x4lsL4O2jLSx8lB7D+XqoFALOQZPa7eAPE1NU0Mj1V8gPHRxIsHnyUNtw2i92psUw==}
 
   '@rolldown/pluginutils@1.0.0-beta.29':
     resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
@@ -4729,8 +4732,8 @@ packages:
     resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
 
-  prisma@6.12.0:
+  prisma@6.11.1:
-    resolution: {integrity: sha512-pmV7NEqQej9WjizN6RSNIwf7Y+jeh9mY1JEX2WjGxJi4YZWexClhde1yz/FuvAM+cTwzchcMytu2m4I6wPkIzg==}
+    resolution: {integrity: sha512-VzJToRlV0s9Vu2bfqHiRJw73hZNCG/AyJeX+kopbu4GATTjTUdEWUteO3p4BLYoHpMS4o8pD3v6tF44BHNZI1w==}
     engines: {node: '>=18.18'}
     hasBin: true
     peerDependencies:
@@ -6133,48 +6136,48 @@ snapshots:
       jsonfile: 5.0.0
       universalify: 0.1.2
 
-  '@drop-oss/droplet-darwin-arm64@3.0.1':
+  '@drop-oss/droplet-darwin-arm64@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-darwin-universal@3.0.1':
+  '@drop-oss/droplet-darwin-universal@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-darwin-x64@3.0.1':
+  '@drop-oss/droplet-darwin-x64@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-linux-arm64-gnu@3.0.1':
+  '@drop-oss/droplet-linux-arm64-gnu@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-linux-arm64-musl@3.0.1':
+  '@drop-oss/droplet-linux-arm64-musl@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-linux-riscv64-gnu@3.0.1':
+  '@drop-oss/droplet-linux-riscv64-gnu@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-linux-x64-gnu@3.0.1':
+  '@drop-oss/droplet-linux-x64-gnu@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-linux-x64-musl@3.0.1':
+  '@drop-oss/droplet-linux-x64-musl@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-win32-arm64-msvc@3.0.1':
+  '@drop-oss/droplet-win32-arm64-msvc@3.2.0':
     optional: true
 
-  '@drop-oss/droplet-win32-x64-msvc@3.0.1':
+  '@drop-oss/droplet-win32-x64-msvc@3.2.0':
     optional: true
 
-  '@drop-oss/droplet@3.0.1':
+  '@drop-oss/droplet@3.2.0':
     optionalDependencies:
-      '@drop-oss/droplet-darwin-arm64': 3.0.1
+      '@drop-oss/droplet-darwin-arm64': 3.2.0
-      '@drop-oss/droplet-darwin-universal': 3.0.1
+      '@drop-oss/droplet-darwin-universal': 3.2.0
-      '@drop-oss/droplet-darwin-x64': 3.0.1
+      '@drop-oss/droplet-darwin-x64': 3.2.0
-      '@drop-oss/droplet-linux-arm64-gnu': 3.0.1
+      '@drop-oss/droplet-linux-arm64-gnu': 3.2.0
-      '@drop-oss/droplet-linux-arm64-musl': 3.0.1
+      '@drop-oss/droplet-linux-arm64-musl': 3.2.0
-      '@drop-oss/droplet-linux-riscv64-gnu': 3.0.1
+      '@drop-oss/droplet-linux-riscv64-gnu': 3.2.0
-      '@drop-oss/droplet-linux-x64-gnu': 3.0.1
+      '@drop-oss/droplet-linux-x64-gnu': 3.2.0
-      '@drop-oss/droplet-linux-x64-musl': 3.0.1
+      '@drop-oss/droplet-linux-x64-musl': 3.2.0
-      '@drop-oss/droplet-win32-arm64-msvc': 3.0.1
+      '@drop-oss/droplet-win32-arm64-msvc': 3.2.0
-      '@drop-oss/droplet-win32-x64-msvc': 3.0.1
+      '@drop-oss/droplet-win32-x64-msvc': 3.2.0
 
   '@emnapi/core@1.4.5':
     dependencies:
@@ -7389,35 +7392,35 @@ snapshots:
 
   '@poppinss/exception@1.2.2': {}
 
-  '@prisma/client@6.12.0(prisma@6.12.0(typescript@5.8.3))(typescript@5.8.3)':
+  '@prisma/client@6.12.0(prisma@6.11.1(typescript@5.8.3))(typescript@5.8.3)':
     optionalDependencies:
-      prisma: 6.12.0(typescript@5.8.3)
+      prisma: 6.11.1(typescript@5.8.3)
       typescript: 5.8.3
 
-  '@prisma/config@6.12.0':
+  '@prisma/config@6.11.1':
     dependencies:
       jiti: 2.4.2
 
-  '@prisma/debug@6.12.0': {}
+  '@prisma/debug@6.11.1': {}
 
   '@prisma/debug@6.13.0': {}
 
   '@prisma/dmmf@6.13.0': {}
 
-  '@prisma/engines-version@6.12.0-15.8047c96bbd92db98a2abc7c9323ce77c02c89dbc': {}
+  '@prisma/engines-version@6.11.1-1.f40f79ec31188888a2e33acda0ecc8fd10a853a9': {}
 
-  '@prisma/engines@6.12.0':
+  '@prisma/engines@6.11.1':
     dependencies:
-      '@prisma/debug': 6.12.0
+      '@prisma/debug': 6.11.1
-      '@prisma/engines-version': 6.12.0-15.8047c96bbd92db98a2abc7c9323ce77c02c89dbc
+      '@prisma/engines-version': 6.11.1-1.f40f79ec31188888a2e33acda0ecc8fd10a853a9
-      '@prisma/fetch-engine': 6.12.0
+      '@prisma/fetch-engine': 6.11.1
-      '@prisma/get-platform': 6.12.0
+      '@prisma/get-platform': 6.11.1
 
-  '@prisma/fetch-engine@6.12.0':
+  '@prisma/fetch-engine@6.11.1':
     dependencies:
-      '@prisma/debug': 6.12.0
+      '@prisma/debug': 6.11.1
-      '@prisma/engines-version': 6.12.0-15.8047c96bbd92db98a2abc7c9323ce77c02c89dbc
+      '@prisma/engines-version': 6.11.1-1.f40f79ec31188888a2e33acda0ecc8fd10a853a9
-      '@prisma/get-platform': 6.12.0
+      '@prisma/get-platform': 6.11.1
 
   '@prisma/generator-helper@6.13.0':
     dependencies:
@@ -7427,9 +7430,9 @@ snapshots:
 
   '@prisma/generator@6.13.0': {}
 
-  '@prisma/get-platform@6.12.0':
+  '@prisma/get-platform@6.11.1':
     dependencies:
-      '@prisma/debug': 6.12.0
+      '@prisma/debug': 6.11.1
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
 
@@ -11100,10 +11103,10 @@ snapshots:
 
   pretty-bytes@6.1.1: {}
 
-  prisma@6.12.0(typescript@5.8.3):
+  prisma@6.11.1(typescript@5.8.3):
     dependencies:
-      '@prisma/config': 6.12.0
+      '@prisma/config': 6.11.1
-      '@prisma/engines': 6.12.0
+      '@prisma/engines': 6.11.1
     optionalDependencies:
       typescript: 5.8.3
 

pnpm-workspace.yaml

@@ -1 +1,11 @@
+onlyBuiltDependencies:
+  - '@prisma/client'
+  - '@prisma/engines'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - prisma
+
+overrides:
+  droplet: link:../../.local/share/pnpm/global/5/node_modules/@drop-oss/droplet
+
 shamefullyHoist: true

prisma.config.ts

@@ -0,0 +1,7 @@
+import type { PrismaConfig } from "prisma";
+import path from "node:path";
+
+export default {
+  schema: path.join("prisma"),
+  earlyAccess: true,
+} satisfies PrismaConfig;

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({
+  libraryManager.deleteGame(gameId);
-    where: {
-      id: gameId,
-    },
-  });
 
   return {};
 });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

server/internal/clients/handler.ts

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

server/internal/downloads/manifest.ts

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

server/internal/gamesize/index.ts

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

server/internal/library/index.ts

@@ -15,6 +15,8 @@ import { GameNotFoundError, type LibraryProvider } from "./provider";
 import { logger } from "../logging";
 import type { GameModel } from "~/prisma/client/models";
 import { createHash } from "node:crypto";
+import type { WorkingLibrarySource } from "~/server/api/v1/admin/library/sources/index.get";
+import gameSizeManager from "~/server/internal/gamesize";
 
 export function createGameImportTaskId(libraryId: string, libraryPath: string) {
   return createHash("md5")
@@ -39,13 +41,19 @@ class LibraryManager {
     this.libraries.delete(id);
   }
 
-  async fetchLibraries() {
+  async fetchLibraries(): Promise<WorkingLibrarySource[]> {
     const libraries = await prisma.library.findMany({});
-    const libraryWithMetadata = libraries.map((e) => ({
+
-      ...e,
+    const libraryWithMetadata = libraries.map(async (library) => {
-      working: this.libraries.has(e.id),
+      const theLibrary = this.libraries.get(library.id);
-    }));
+      const working = this.libraries.has(library.id);
-    return libraryWithMetadata;
+      return {
+        ...library,
+        working,
+        fsStats: working ? theLibrary?.fsStats() : undefined,
+      };
+    });
+    return await Promise.all(libraryWithMetadata);
   }
 
   async fetchGamesByLibrary() {
@@ -334,6 +342,8 @@ class LibraryManager {
           acls: ["system:import:version:read"],
         });
 
+        await libraryManager.cacheCombinedGameSize(gameId);
+        await libraryManager.cacheGameVersionSize(gameId, versionName);
         progress(100);
       },
     });
@@ -363,6 +373,68 @@ class LibraryManager {
     if (!library) return undefined;
     return await library.readFile(game, version, filename, options);
   }
+
+  async deleteGameVersion(gameId: string, version: string) {
+    await prisma.gameVersion.delete({
+      where: {
+        gameId_versionName: {
+          gameId: gameId,
+          versionName: version,
+        },
+      },
+    });
+
+    await gameSizeManager.deleteGameVersion(gameId, version);
+  }
+
+  async deleteGame(gameId: string) {
+    await prisma.game.delete({
+      where: {
+        id: gameId,
+      },
+    });
+    gameSizeManager.deleteGame(gameId);
+  }
+
+  async getGameVersionSize(
+    gameId: string,
+    versionName?: string,
+  ): Promise<number | null> {
+    return gameSizeManager.getGameVersionSize(gameId, versionName);
+  }
+
+  async getBiggestGamesCombinedVersions(top: number) {
+    if (await gameSizeManager.isGameSizesCacheEmpty()) {
+      await gameSizeManager.cacheAllCombinedGames();
+    }
+    return gameSizeManager.getBiggestGamesAllVersions(top);
+  }
+
+  async getBiggestGamesLatestVersions(top: number) {
+    if (await gameSizeManager.isGameVersionsSizesCacheEmpty()) {
+      await gameSizeManager.cacheAllGameVersions();
+    }
+    return gameSizeManager.getBiggestGamesLatestVersion(top);
+  }
+
+  async cacheCombinedGameSize(gameId: string) {
+    const game = await prisma.game.findFirst({ where: { id: gameId } });
+    if (!game) {
+      return;
+    }
+    await gameSizeManager.cacheCombinedGame(game);
+  }
+
+  async cacheGameVersionSize(gameId: string, versionName: string) {
+    const game = await prisma.game.findFirst({
+      where: { id: gameId },
+      include: { versions: true },
+    });
+    if (!game) {
+      return;
+    }
+    await gameSizeManager.cacheGameVersion(game, versionName);
+  }
 }
 
 export const libraryManager = new LibraryManager();

server/internal/library/provider.ts

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

server/internal/library/providers/filesystem.ts

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

server/internal/library/providers/flat.ts

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

server/internal/metadata/giantbomb.ts

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

server/internal/metadata/igdb.ts

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

server/internal/userstats/index.ts

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

server/internal/utils/files.ts

@@ -0,0 +1,47 @@
+import fs from "node:fs";
+import nodePath from "node: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`;
+}

utils/array.ts

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

utils/colors.ts

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

utils/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}`;
+  }
+}