From 5d2eda5840d166b744847ef9f07e02317c40d20b Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Wed, 2 Jul 2025 15:13:15 +1000
Subject: [PATCH 01/26] feat: small library tweaks + company page

---
 .github/workflows/ci.yml                  |  6 ++
 components/GameCarousel.vue               | 12 +++-
 components/GameEditor/Metadata.vue        |  2 +
 components/LibraryDirectory.vue           |  6 +-
 pages/admin/library/index.vue             |  2 +-
 pages/store/[id]/index.vue                | 35 +++++++++
 pages/store/c/[id]/index.vue              | 87 +++++++++++++++++++++++
 server/api/v1/companies/[id]/index.get.ts | 41 +++++++++++
 server/api/v1/games/[id]/index.get.ts     | 16 +++++
 server/internal/metadata/manual.ts        |  1 +
 10 files changed, 201 insertions(+), 7 deletions(-)
 create mode 100644 pages/store/c/[id]/index.vue
 create mode 100644 server/api/v1/companies/[id]/index.get.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f04182eb..9ed5caf3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,6 +7,12 @@ on:
   pull_request:
     branches:
       - develop
+<<<<<<< Updated upstream
+=======
+
+permissions:
+  contents: read
+>>>>>>> Stashed changes
 
 permissions:
   contents: read
diff --git a/components/GameCarousel.vue b/components/GameCarousel.vue
index bb40069c..0f4787c6 100644
--- a/components/GameCarousel.vue
+++ b/components/GameCarousel.vue
@@ -35,11 +35,17 @@
 </template>
 
 <script setup lang="ts">
-import type { Game } from "~/prisma/client";
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
-  items: Array<SerializeObject<Game>>;
+  items: Array<
+    SerializeObject<{
+      id: string;
+      mName: string;
+      mShortDescription: string;
+      mCoverObjectId: string;
+    }>
+  >;
   min?: number;
   width?: number;
 }>();
@@ -51,7 +57,7 @@ const { showGamePanelTextDecoration } = await $dropFetch(
 const currentComponent = ref<HTMLDivElement>();
 
 const min = computed(() => Math.max(props.min ?? 8, props.items.length));
-const games: Ref<Array<SerializeObject<Game> | undefined>> = computed(() =>
+const games = computed(() =>
   Array(min.value)
     .fill(0)
     .map((_, i) => props.items[i]),
diff --git a/components/GameEditor/Metadata.vue b/components/GameEditor/Metadata.vue
index 1b8a10d2..59210ade 100644
--- a/components/GameEditor/Metadata.vue
+++ b/components/GameEditor/Metadata.vue
@@ -536,8 +536,10 @@ function coreMetadataUpdate_wrapper() {
       );
     })
     .then((newGame) => {
+      console.log(newGame);
       if (!newGame) return;
       Object.assign(game.value, newGame);
+      coreMetadataIconUrl.value = useObject(newGame.mIconObjectId);
     })
     .finally(() => {
       coreMetadataLoading.value = false;
diff --git a/components/LibraryDirectory.vue b/components/LibraryDirectory.vue
index 40ddf8ce..ced13de6 100644
--- a/components/LibraryDirectory.vue
+++ b/components/LibraryDirectory.vue
@@ -31,11 +31,11 @@
       <li v-for="game in filteredLibrary" :key="game.id" class="flex">
         <NuxtLink
           :to="`/library/game/${game.id}`"
-          class="flex flex-row items-center w-full p-1 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
+          class="flex flex-row items-center w-full p-2 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
         >
           <img
-            :src="useObject(game.mCoverObjectId)"
-            class="h-9 w-9 flex-shrink-0 rounded transition-all duration-300 group-hover:scale-105 hover:rotate-[-2deg] hover:shadow-lg"
+            :src="useObject(game.mIconObjectId)"
+            class="h-5 flex-shrink-0 rounded transition-all duration-300 group-hover:scale-105 hover:rotate-[-2deg] hover:shadow-lg"
             alt=""
           />
           <div class="min-w-0 flex-1 pl-2.5">
diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index 3adf807e..807d2ff5 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -82,7 +82,7 @@
       >
         <div class="flex flex-1 flex-row p-4 gap-x-4">
           <img
-            class="h-20 w-20 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
+            class="h-20 w-20 p-3 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
             :src="useObject(game.mIconObjectId)"
             alt=""
           />
diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index 2a2ef257..db27bf4c 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -108,6 +108,40 @@
                   }}</span>
                 </td>
               </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  Developer(s)
+                </td>
+                <td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
+                  <NuxtLink
+                    v-for="developer in game.developers"
+                    :key="developer.id"
+                    :href="`/store/c/${developer.id}`"
+                    class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
+                  >
+                    {{ developer.mName }}
+                  </NuxtLink>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  Publishers(s)
+                </td>
+                <td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
+                  <NuxtLink
+                    v-for="publisher in game.publishers"
+                    :key="publisher.id"
+                    :href="`/store/c/${publisher.id}`"
+                    class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
+                  >
+                    {{ publisher.mName }}
+                  </NuxtLink>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -225,6 +259,7 @@ const ratingArray = Array(5)
 
 useHead({
   title: game.mName,
+  link: [{ rel: "icon", href: useObject(game.mIconObjectId) }],
 });
 </script>
 
diff --git a/pages/store/c/[id]/index.vue b/pages/store/c/[id]/index.vue
new file mode 100644
index 00000000..4da4b701
--- /dev/null
+++ b/pages/store/c/[id]/index.vue
@@ -0,0 +1,87 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="w-full overflow-x-hidden">
+    <div
+      class="relative w-full p-24 flex items-center justify-center bg-zinc-950 overflow-hidden"
+    >
+      <div
+        class="inline-flex items-center gap-x-4 z-10 bg-zinc-950 p-5 rounded-lg"
+      >
+        <img
+          :src="useObject(company.mLogoObjectId)"
+          class="size-24 rounded-sm"
+        />
+        <div>
+          <h1 class="text-4xl text-zinc-100 font-semibold">
+            {{ company.mName }}
+          </h1>
+          <p class="mt-2 text-sm text-zinc-400 max-w-sm">
+            {{ company.mShortDescription }}
+          </p>
+        </div>
+      </div>
+      <img
+        :src="useObject(company.mBannerObjectId)"
+        class="absolute inset-0 w-full z-0 object-cover object-center blur-sm"
+      />
+    </div>
+    <div class="px-4 sm:px-12 py-4 sm:py-10">
+      <h1 class="text-xl text-zinc-200 font-semibold">About</h1>
+      <div
+        class="mt-4 mb-4 prose prose-invert prose-blue max-w-none"
+        v-html="description"
+      />
+      <NuxtLink
+        :href="company.mWebsite"
+        :external="true"
+        target="_blank"
+        class="rounded-md bg-white/10 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
+        >Website</NuxtLink
+      >
+    </div>
+    <div class="space-y-4">
+      <div class="px-4 sm:px-12 py-4">
+        <h1 class="text-zinc-100 text-2xl font-bold font-display">Developed</h1>
+        <NuxtLink class="text-blue-600 font-semibold">
+          <i18n-t keypath="store.exploreMore" tag="span" scope="global">
+            <template #arrow>
+              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+            </template>
+          </i18n-t>
+        </NuxtLink>
+        <div class="mt-4">
+          <GameCarousel :items="company.developed" :min="12" />
+        </div>
+      </div>
+      <div class="px-4 sm:px-12 py-4">
+        <h1 class="text-zinc-100 text-2xl font-bold font-display">Published</h1>
+        <NuxtLink class="text-blue-600 font-semibold">
+          <i18n-t keypath="store.exploreMore" tag="span" scope="global">
+            <template #arrow>
+              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+            </template>
+          </i18n-t>
+        </NuxtLink>
+        <div class="mt-4">
+          <GameCarousel :items="company.published" :min="12" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { micromark } from "micromark";
+
+const route = useRoute();
+const companyId = route.params.id;
+
+const { company } = await $dropFetch(`/api/v1/companies/${companyId}`);
+
+const description = micromark(company.mDescription);
+
+useHead({
+  title: company.mName,
+  link: [{ rel: "icon", href: useObject(company.mLogoObjectId) }],
+});
+</script>
diff --git a/server/api/v1/companies/[id]/index.get.ts b/server/api/v1/companies/[id]/index.get.ts
new file mode 100644
index 00000000..45c28b5f
--- /dev/null
+++ b/server/api/v1/companies/[id]/index.get.ts
@@ -0,0 +1,41 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const companyId = getRouterParam(h3, "id");
+  if (!companyId)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing gameId in route params (somehow...?)",
+    });
+
+  const company = await prisma.company.findUnique({
+    where: { id: companyId },
+    include: {
+      published: {
+        select: {
+          id: true,
+          mName: true,
+          mShortDescription: true,
+          mCoverObjectId: true,
+        },
+      },
+      developed: {
+        select: {
+          id: true,
+          mName: true,
+          mShortDescription: true,
+          mCoverObjectId: true,
+        },
+      },
+    },
+  });
+
+  if (!company)
+    throw createError({ statusCode: 404, statusMessage: "Company not found" });
+
+  return { company };
+});
diff --git a/server/api/v1/games/[id]/index.get.ts b/server/api/v1/games/[id]/index.get.ts
index f12e7ba2..2cf0041d 100644
--- a/server/api/v1/games/[id]/index.get.ts
+++ b/server/api/v1/games/[id]/index.get.ts
@@ -16,6 +16,22 @@ export default defineEventHandler(async (h3) => {
     where: { id: gameId },
     include: {
       versions: true,
+      publishers: {
+        select: {
+          id: true,
+          mName: true,
+          mShortDescription: true,
+          mLogoObjectId: true,
+        },
+      },
+      developers: {
+        select: {
+          id: true,
+          mName: true,
+          mShortDescription: true,
+          mLogoObjectId: true,
+        },
+      },
     },
   });
 
diff --git a/server/internal/metadata/manual.ts b/server/internal/metadata/manual.ts
index a2a52ea8..dd4d6fab 100644
--- a/server/internal/metadata/manual.ts
+++ b/server/internal/metadata/manual.ts
@@ -7,6 +7,7 @@ import type {
   CompanyMetadata,
 } from "./types";
 import * as jdenticon from "jdenticon";
+import { randomUUID } from "crypto";
 
 export class ManualMetadataProvider implements MetadataProvider {
   name() {

From 59a9dd034810bb440b9fb3bb923e3d77eebbaf15 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 20 Jul 2025 19:36:12 +1000
Subject: [PATCH 02/26] feat: new store view

---
 components/AddLibraryButton.vue               |   2 +-
 .../Library.vue}                              |   0
 .../{NewsDirectory.vue => Directory/News.vue} |   0
 components/GameEditor/Metadata.vue            |   2 +-
 .../CreateCollection.vue}                     |   0
 .../DeleteCollection.vue}                     |   0
 .../DeleteNews.vue}                           |   0
 .../DeleteUser.vue}                           |   0
 .../UploadFile.vue}                           |   0
 components/StoreView.vue                      | 441 ++++++++++++++++++
 composables/store.ts                          |  14 +
 pages/admin/library/index.vue                 |   2 +-
 pages/admin/users/index.vue                   |   3 +-
 pages/library.vue                             |   4 +-
 pages/library/index.vue                       |   4 +-
 pages/news.vue                                |   4 +-
 pages/news/[id]/index.vue                     |   2 +-
 pages/store/c/[id]/index.vue                  |  46 +-
 pages/store/index.vue                         |  39 +-
 .../migration.sql                             |   5 +
 prisma/models/content.prisma                  |  22 +
 server/api/v1/store/genres.get.ts             |  10 +
 server/api/v1/store/index.get.ts              | 114 +++++
 server/api/v1/store/tags.get.ts               |  10 +
 server/internal/library/index.ts              |   5 +
 server/internal/metadata/giantbomb.ts         |  10 +-
 server/internal/metadata/igdb.ts              |   5 +-
 server/internal/metadata/index.ts             |  17 +-
 server/internal/metadata/manual.ts            |   2 +-
 server/internal/metadata/pcgamingwiki.ts      |   3 +-
 server/internal/metadata/types.d.ts           |   1 +
 31 files changed, 682 insertions(+), 85 deletions(-)
 rename components/{LibraryDirectory.vue => Directory/Library.vue} (100%)
 rename components/{NewsDirectory.vue => Directory/News.vue} (100%)
 rename components/{CreateCollectionModal.vue => Modal/CreateCollection.vue} (100%)
 rename components/{DeleteCollectionModal.vue => Modal/DeleteCollection.vue} (100%)
 rename components/{DeleteNewsModal.vue => Modal/DeleteNews.vue} (100%)
 rename components/{DeleteUserModal.vue => Modal/DeleteUser.vue} (100%)
 rename components/{UploadFileDialog.vue => Modal/UploadFile.vue} (100%)
 create mode 100644 components/StoreView.vue
 create mode 100644 composables/store.ts
 create mode 100644 prisma/migrations/20250720070939_static_genres/migration.sql
 create mode 100644 server/api/v1/store/genres.get.ts
 create mode 100644 server/api/v1/store/index.get.ts
 create mode 100644 server/api/v1/store/tags.get.ts

diff --git a/components/AddLibraryButton.vue b/components/AddLibraryButton.vue
index 526e2eb2..226bbc1c 100644
--- a/components/AddLibraryButton.vue
+++ b/components/AddLibraryButton.vue
@@ -84,7 +84,7 @@
     </Menu>
   </div>
 
-  <CreateCollectionModal
+  <ModalCreateCollection
     v-model="createCollectionModal"
     :game-id="props.gameId"
   />
diff --git a/components/LibraryDirectory.vue b/components/Directory/Library.vue
similarity index 100%
rename from components/LibraryDirectory.vue
rename to components/Directory/Library.vue
diff --git a/components/NewsDirectory.vue b/components/Directory/News.vue
similarity index 100%
rename from components/NewsDirectory.vue
rename to components/Directory/News.vue
diff --git a/components/GameEditor/Metadata.vue b/components/GameEditor/Metadata.vue
index 59210ade..3ea937e6 100644
--- a/components/GameEditor/Metadata.vue
+++ b/components/GameEditor/Metadata.vue
@@ -268,7 +268,7 @@
         </div>
       </div>
     </div>
-    <UploadFileDialog
+    <ModalUploadFile
       v-model="showUploadModal"
       :options="{ id: game.id }"
       accept="image/*"
diff --git a/components/CreateCollectionModal.vue b/components/Modal/CreateCollection.vue
similarity index 100%
rename from components/CreateCollectionModal.vue
rename to components/Modal/CreateCollection.vue
diff --git a/components/DeleteCollectionModal.vue b/components/Modal/DeleteCollection.vue
similarity index 100%
rename from components/DeleteCollectionModal.vue
rename to components/Modal/DeleteCollection.vue
diff --git a/components/DeleteNewsModal.vue b/components/Modal/DeleteNews.vue
similarity index 100%
rename from components/DeleteNewsModal.vue
rename to components/Modal/DeleteNews.vue
diff --git a/components/DeleteUserModal.vue b/components/Modal/DeleteUser.vue
similarity index 100%
rename from components/DeleteUserModal.vue
rename to components/Modal/DeleteUser.vue
diff --git a/components/UploadFileDialog.vue b/components/Modal/UploadFile.vue
similarity index 100%
rename from components/UploadFileDialog.vue
rename to components/Modal/UploadFile.vue
diff --git a/components/StoreView.vue b/components/StoreView.vue
new file mode 100644
index 00000000..c35e5833
--- /dev/null
+++ b/components/StoreView.vue
@@ -0,0 +1,441 @@
+<template>
+  <div>
+    <div>
+      <!-- Mobile filter dialog -->
+      <TransitionRoot as="template" :show="mobileFiltersOpen">
+        <Dialog
+          class="relative z-100 lg:hidden"
+          @close="mobileFiltersOpen = false"
+        >
+          <TransitionChild
+            as="template"
+            enter="transition-opacity ease-linear duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <div class="fixed inset-0 bg-black/25" />
+          </TransitionChild>
+
+          <div class="fixed inset-0 z-40 flex">
+            <TransitionChild
+              as="template"
+              enter="transition ease-in-out duration-300 transform"
+              enter-from="translate-x-full"
+              enter-to="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leave-from="translate-x-0"
+              leave-to="translate-x-full"
+            >
+              <DialogPanel
+                class="relative ml-auto flex size-full max-w-sm flex-col overflow-y-auto bg-zinc-900 pt-4 pb-6 shadow-xl"
+              >
+                <div class="flex items-center justify-between px-4">
+                  <h2 class="text-lg font-medium text-zinc-100">Filters</h2>
+                  <button
+                    type="button"
+                    class="relative -mr-2 flex size-10 items-center justify-center rounded-md bg-zinc-900 p-2 text-zinc-500 hover:bg-zinc-800 focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
+                    @click="mobileFiltersOpen = false"
+                  >
+                    <span class="absolute -inset-0.5" />
+                    <span class="sr-only">Close menu</span>
+                    <XMarkIcon class="size-6" aria-hidden="true" />
+                  </button>
+                </div>
+
+                <!-- Filters -->
+                <form class="mt-4 border-t border-zinc-700">
+                  <Disclosure
+                    v-for="section in options"
+                    v-slot="{ open }"
+                    :key="section.param"
+                    as="div"
+                    class="border-t border-zinc-700 px-4 py-6"
+                  >
+                    <h3 class="-mx-2 -my-3 flow-root">
+                      <DisclosureButton
+                        class="flex w-full items-center justify-between bg-zinc-900 px-2 py-3 text-zinc-500 hover:text-zinc-400"
+                      >
+                        <span class="font-medium text-zinc-100">{{
+                          section.name
+                        }}</span>
+                        <span class="ml-6 flex items-center">
+                          <PlusIcon
+                            v-if="!open"
+                            class="size-5"
+                            aria-hidden="true"
+                          />
+                          <MinusIcon v-else class="size-5" aria-hidden="true" />
+                        </span>
+                      </DisclosureButton>
+                    </h3>
+                    <DisclosurePanel class="pt-6 ">
+                      <div class="gap-3 grid grid-cols-2">
+                        <div
+                          v-for="(option, optionIdx) in section.options"
+                          :key="option.value"
+                          class="flex gap-3"
+                        >
+                          <div class="flex h-5 shrink-0 items-center">
+                            <div class="group grid size-4 grid-cols-1">
+                              <input
+                                v-if="section.multiple"
+                                :id="`filter-${section.param}-${option}`"
+                                v-model="
+                                  (optionValues[section.param] as any)[
+                                    option.value
+                                  ]
+                                "
+                                :name="`${section.param}[]`"
+                                type="checkbox"
+                                class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-900 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                              />
+                              <input
+                                v-else
+                                :id="`filter-${section.param}`"
+                                :value="optionValues[section.param]"
+                                :name="`${section.param}[]`"
+                                type="checkbox"
+                                class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                                @update:value="
+                                  () =>
+                                    (optionValues[section.param] = option.value)
+                                "
+                              />
+                            </div>
+                          </div>
+                          <label
+                            :for="`filter-mobile-${section.param}-${optionIdx}`"
+                            class="min-w-0 flex-1 text-zinc-400"
+                            >{{ option.name }}</label
+                          >
+                        </div>
+                      </div>
+                    </DisclosurePanel>
+                  </Disclosure>
+                </form>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </Dialog>
+      </TransitionRoot>
+
+      <main class="mx-auto px-4 sm:px-6 lg:px-8">
+        <div
+          class="flex items-baseline justify-between border-b border-zinc-700 py-6"
+        >
+          <div />
+          <div class="flex items-center">
+            <Menu as="div" class="relative inline-block text-left">
+              <div>
+                <MenuButton
+                  class="group inline-flex justify-center text-sm font-medium text-zinc-400 hover:text-zinc-100"
+                >
+                  Sort
+                  <ChevronDownIcon
+                    class="-mr-1 ml-1 size-5 shrink-0 text-gray-400 group-hover:text-zinc-100"
+                    aria-hidden="true"
+                  />
+                </MenuButton>
+              </div>
+
+              <transition
+                enter-active-class="transition ease-out duration-100"
+                enter-from-class="transform opacity-0 scale-95"
+                enter-to-class="transform opacity-100 scale-100"
+                leave-active-class="transition ease-in duration-75"
+                leave-from-class="transform opacity-100 scale-100"
+                leave-to-class="transform opacity-0 scale-95"
+              >
+                <MenuItems
+                  class="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-zinc-950 shadow-2xl ring-1 ring-white/5 focus:outline-hidden"
+                >
+                  <div class="py-1">
+                    <MenuItem
+                      v-for="option in sorts"
+                      :key="option.param"
+                      v-slot="{ active }"
+                    >
+                      <button
+                        :class="[
+                          currentSort == option.param
+                            ? 'font-medium text-zinc-100'
+                            : 'text-zinc-400',
+                          active ? 'bg-zinc-900 outline-hidden' : '',
+                          'w-full text-left block px-4 py-2 text-sm',
+                        ]"
+                      >
+                        {{ option.name }}
+                      </button>
+                    </MenuItem>
+                  </div>
+                </MenuItems>
+              </transition>
+            </Menu>
+
+            <button
+              type="button"
+              class="-m-2 ml-5 p-2 text-zinc-500 hover:text-zinc-400 sm:ml-7"
+            >
+              <span class="sr-only">View grid</span>
+              <Squares2X2Icon class="size-5" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              :class="['-m-2 ml-4 p-2 sm:ml-6 lg:hidden', filterQuery 
+                ? 'text-zinc-100 hover:text-zinc-200' : 'text-zinc-500 hover:text-zinc-400'
+              ]"
+              @click="mobileFiltersOpen = true"
+            >
+              <span class="sr-only">Filters</span>
+              <FunnelIcon class="size-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+
+        <section aria-labelledby="games-heading" class="pt-6 pb-24">
+          <h2 id="games-heading" class="sr-only">Games</h2>
+
+          <div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-5">
+            <!-- Filters -->
+            <form class="hidden lg:block">
+              <Disclosure
+                v-for="section in options"
+                :key="section.param"
+                v-slot="{ open }"
+                as="div"
+                class="border-b border-zinc-700 py-6"
+              >
+                <h3 class="-my-3 flow-root">
+                  <DisclosureButton
+                    class="flex w-full items-center justify-between bg-zinc-900 py-3 text-sm text-zinc-500 hover:text-zinc-400"
+                  >
+                    <span class="font-medium text-zinc-100">{{
+                      section.name
+                    }}</span>
+                    <span class="ml-6 flex items-center">
+                      <PlusIcon
+                        v-if="!open"
+                        class="size-5"
+                        aria-hidden="true"
+                      />
+                      <MinusIcon v-else class="size-5" aria-hidden="true" />
+                    </span>
+                  </DisclosureButton>
+                </h3>
+                <DisclosurePanel class="pt-6">
+                  <div class="space-y-4">
+                    <div
+                      v-for="(option, optionIdx) in section.options"
+                      :key="option.value"
+                      class="flex gap-3"
+                    >
+                      <div class="flex h-5 shrink-0 items-center">
+                        <div class="group grid size-4 grid-cols-1">
+                          <input
+                            v-if="section.multiple"
+                            :id="`filter-${section.param}-${option}`"
+                            v-model="
+                              (optionValues[section.param] as any)[option.value]
+                            "
+                            :name="`${section.param}[]`"
+                            type="checkbox"
+                            class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-800 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                          />
+                          <input
+                            v-else
+                            :id="`filter-${section.param}`"
+                            :value="optionValues[section.param]"
+                            :name="`${section.param}[]`"
+                            type="radio"
+                            class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-800 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                            @input="optionValues[section.param] = option.value"
+                          />
+                        </div>
+                      </div>
+                      <label
+                        :for="`filter-${section.param}-${optionIdx}`"
+                        class="text-sm text-zinc-400"
+                        >{{ option.name }}</label
+                      >
+                    </div>
+                  </div>
+                </DisclosurePanel>
+              </Disclosure>
+            </form>
+
+            <!-- Product grid -->
+            <div
+            v-if="games?.length ?? 0 > 0"
+              class="relative lg:col-span-4 flex flex-row flex-wrap content-start gap-4"
+            >
+              <!-- Your content -->
+              <GamePanel
+                v-for="game in games"
+                :key="game.id"
+                :game="game"
+                :href="`/store/${game.id}`"
+              />
+              <div
+                v-if="loading"
+                class="absolute inset-0 bg-zinc-900/40 flex items-center justify-center"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="w-8 h-8 text-transparent animate-spin fill-blue-600"
+                  viewBox="0 0 100 101"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div v-else class="flex lg:col-span-4 items-start justify-center">
+              <span class="uppercase text-zinc-700 font-display font-bold">No results</span>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import {
+  ChevronDownIcon,
+  FunnelIcon,
+  MinusIcon,
+  PlusIcon,
+  Squares2X2Icon,
+} from "@heroicons/vue/20/solid";
+import type { SerializeObject } from "nitropack";
+import type { Game, Tag } from "~/prisma/client";
+
+const mobileFiltersOpen = ref(false);
+
+const props = defineProps<{
+  params?: { [key: string]: string };
+  extraOptions?: Array<StoreFilterOption>;
+  prefilled?: {
+    [key: string]: { [key: string]: string | { [key: string]: boolean } };
+  };
+}>();
+
+const tags =
+  await $dropFetch<Array<SerializeObject<Tag>>>("/api/v1/store/tags");
+
+const genres = await $dropFetch<Array<string>>("/api/v1/store/genres");
+
+const sorts: Array<StoreSortOption> = [
+  {
+    name: "Newest",
+    param: "newest",
+  },
+  {
+    name: "Recently Added",
+    param: "recent",
+  },
+];
+const currentSort = ref(sorts[0].param);
+
+const options: Array<StoreFilterOption> = [
+  {
+    name: "Genres",
+    param: "genres",
+    multiple: true,
+    options: genres.map((e) => ({ name: e, value: e })),
+  },
+  {
+    name: "Platform",
+    param: "platform",
+    multiple: true,
+    options: Object.values(PlatformClient).map((e) => ({ name: e, value: e })),
+  },
+  ...(tags.length > 0
+    ? [
+        {
+          name: "Tags",
+          param: "tags",
+          multiple: true,
+          options: tags.map((e) => ({ name: e.name, value: e.id })),
+        },
+      ]
+    : []),
+  ...(props.extraOptions ?? []),
+];
+const optionValues = ref<{
+  [key: string]: string | undefined | { [key: string]: boolean | undefined };
+}>(
+  Object.fromEntries(
+    options.map((v) => [v.param, v.multiple ? {} : undefined]),
+  ),
+);
+
+const filterQuery = computed(() => {
+  const query = Object.entries(optionValues.value)
+    .filter(
+      ([_, v]) =>
+        v &&
+        (typeof v !== "object" || Object.values(v).filter((e) => e).length > 0),
+    )
+    .map(([n, v]) => {
+      if (typeof v === "string") return [`${n}=${v}`];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const enabledOptions = Object.entries(v as any).filter(([_, e]) => e);
+      return `${n}=${enabledOptions.map(([k, _]) => k).join(",")}`;
+    })
+    .join("&");
+  const extraFilters = props.params
+    ? Object.entries(props.params)
+        .map(([k, v]) => `${k}=${v}`)
+        .join("&")
+    : props.params;
+  return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}`;
+});
+
+const games = ref<Array<SerializeObject<Game>>>();
+const loading = ref(false);
+
+async function updateGames(query: string, reset: boolean) {
+  loading.value = true;
+  games.value ??= [];
+  const newValues = await $dropFetch<Array<SerializeObject<Game>>>(
+    `/api/v1/store?take=50&start=${reset ? games.value?.length || 0 : 0}${query ? "&" + query : ""}`,
+  );
+  if (reset) {
+    games.value = newValues;
+  } else {
+    games.value.push(...newValues);
+  }
+  loading.value = false;
+}
+watch(filterQuery, (newUrl) => {
+  updateGames(newUrl, true);
+});
+
+await updateGames(filterQuery.value, true);
+</script>
diff --git a/composables/store.ts b/composables/store.ts
new file mode 100644
index 00000000..adaffb0a
--- /dev/null
+++ b/composables/store.ts
@@ -0,0 +1,14 @@
+export type StoreFilterOption = {
+  name: string;
+  param: string;
+  options: Array<{
+    name: string;
+    value: string;
+  }>;
+  multiple?: boolean;
+};
+
+export type StoreSortOption = {
+  name: string;
+  param: string;
+}
\ No newline at end of file
diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index 807d2ff5..ece59112 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -91,7 +91,7 @@
               {{ game.mName }}
               <span
                 class="ml-2 inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
-                >{{ game.metadataSource }}</span
+                >{{ game.library!.name }}</span
               >
             </h3>
             <dl class="mt-1 flex flex-col justify-between">
diff --git a/pages/admin/users/index.vue b/pages/admin/users/index.vue
index 548bfbaf..b800bb2b 100644
--- a/pages/admin/users/index.vue
+++ b/pages/admin/users/index.vue
@@ -138,12 +138,11 @@
         </div>
       </div>
     </div>
-    <DeleteUserModal v-model="userToDelete" />
+    <ModalDeleteUser v-model="userToDelete" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useUsers } from "~/composables/users";
 import type { User } from "~/prisma/client";
 
 useHead({
diff --git a/pages/library.vue b/pages/library.vue
index 336f3717..bdaa344e 100644
--- a/pages/library.vue
+++ b/pages/library.vue
@@ -51,7 +51,7 @@
               </TransitionChild>
               <!-- Sidebar component, swap this element with another sidebar if you like -->
               <div class="bg-zinc-900">
-                <LibraryDirectory />
+                <DirectoryLibrary />
               </div>
             </DialogPanel>
           </TransitionChild>
@@ -64,7 +64,7 @@
       class="hidden lg:flex lg:inset-y-0 lg:z-50 lg:shrink-0 lg:basis-[18rem] lg:flex-col lg:border-r-2 lg:border-zinc-800"
     >
       <!-- Sidebar component, swap this element with another sidebar if you like -->
-      <LibraryDirectory />
+      <DirectoryLibrary />
     </div>
 
     <div
diff --git a/pages/library/index.vue b/pages/library/index.vue
index f28578a2..d315642c 100644
--- a/pages/library/index.vue
+++ b/pages/library/index.vue
@@ -88,8 +88,8 @@
       </div>
     </div>
 
-    <CreateCollectionModal v-model="collectionCreateOpen" />
-    <DeleteCollectionModal v-model="currentlyDeleting" />
+    <ModalCreateCollection v-model="collectionCreateOpen" />
+    <ModalDeleteCollection v-model="currentlyDeleting" />
   </div>
 </template>
 
diff --git a/pages/news.vue b/pages/news.vue
index 110ea65b..a984018e 100644
--- a/pages/news.vue
+++ b/pages/news.vue
@@ -51,7 +51,7 @@
               </TransitionChild>
               <div class="bg-zinc-900">
                 <NewsArticleCreateButton />
-                <NewsDirectory :articles="news" />
+                <DirectoryNews />
               </div>
             </DialogPanel>
           </TransitionChild>
@@ -64,7 +64,7 @@
       class="hidden lg:block lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col lg:border-r-2 lg:border-zinc-800"
     >
       <NewsArticleCreateButton />
-      <NewsDirectory />
+      <DirectoryNews />
     </div>
 
     <div
diff --git a/pages/news/[id]/index.vue b/pages/news/[id]/index.vue
index 7ae39192..17837d3c 100644
--- a/pages/news/[id]/index.vue
+++ b/pages/news/[id]/index.vue
@@ -76,7 +76,7 @@
       />
     </div>
 
-    <DeleteNewsModal v-model="currentlyDeleting" />
+    <ModalDeleteNews v-model="currentlyDeleting" />
   </div>
 </template>
 
diff --git a/pages/store/c/[id]/index.vue b/pages/store/c/[id]/index.vue
index 4da4b701..e131ea91 100644
--- a/pages/store/c/[id]/index.vue
+++ b/pages/store/c/[id]/index.vue
@@ -28,7 +28,7 @@
     <div class="px-4 sm:px-12 py-4 sm:py-10">
       <h1 class="text-xl text-zinc-200 font-semibold">About</h1>
       <div
-        class="mt-4 mb-4 prose prose-invert prose-blue max-w-none"
+        class="mt-4 mb-4 prose prose-invert prose-blue max-w-none max-h-[40vh] overflow-y-auto"
         v-html="description"
       />
       <NuxtLink
@@ -39,34 +39,22 @@
         >Website</NuxtLink
       >
     </div>
-    <div class="space-y-4">
-      <div class="px-4 sm:px-12 py-4">
-        <h1 class="text-zinc-100 text-2xl font-bold font-display">Developed</h1>
-        <NuxtLink class="text-blue-600 font-semibold">
-          <i18n-t keypath="store.exploreMore" tag="span" scope="global">
-            <template #arrow>
-              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
-            </template>
-          </i18n-t>
-        </NuxtLink>
-        <div class="mt-4">
-          <GameCarousel :items="company.developed" :min="12" />
-        </div>
-      </div>
-      <div class="px-4 sm:px-12 py-4">
-        <h1 class="text-zinc-100 text-2xl font-bold font-display">Published</h1>
-        <NuxtLink class="text-blue-600 font-semibold">
-          <i18n-t keypath="store.exploreMore" tag="span" scope="global">
-            <template #arrow>
-              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
-            </template>
-          </i18n-t>
-        </NuxtLink>
-        <div class="mt-4">
-          <GameCarousel :items="company.published" :min="12" />
-        </div>
-      </div>
-    </div>
+    <StoreView
+      :extra-options="[
+        {
+          name: 'Company',
+          param: 'companyActions',
+          multiple: true,
+          options: [
+            { name: 'Published', value: 'published' },
+            { name: 'Developed', value: 'developed' },
+          ],
+        },
+      ]"
+      :params="{
+        company: company.id,
+      }"
+    />
   </div>
 </template>
 
diff --git a/pages/store/index.vue b/pages/store/index.vue
index b9c1f80c..7eadaadf 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -66,49 +66,12 @@
       </h2>
     </div>
 
-    <!-- new releases -->
-    <div class="px-4 sm:px-12 py-4">
-      <h1 class="text-zinc-100 text-2xl font-bold font-display">
-        {{ $t("store.recentlyReleased") }}
-      </h1>
-      <NuxtLink class="text-blue-600 font-semibold">
-        <i18n-t keypath="store.exploreMore" tag="span" scope="global">
-          <template #arrow>
-            <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
-          </template>
-        </i18n-t>
-      </NuxtLink>
-      <div class="mt-4">
-        <GameCarousel :items="released" :min="12" />
-      </div>
-    </div>
-
-    <!-- recently updated -->
-    <div class="px-4 sm:px-12 py-4" hydrate-on-visible>
-      <h1 class="text-zinc-100 text-2xl font-bold font-display">
-        {{ $t("store.recentlyUpdated") }}
-      </h1>
-      <NuxtLink class="text-blue-600 font-semibold">
-        <i18n-t keypath="store.exploreMore" tag="span" scope="global">
-          <template #arrow>
-            <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
-          </template>
-        </i18n-t>
-      </NuxtLink>
-      <div class="mt-4">
-        <GameCarousel :items="updated" :min="12" />
-      </div>
-    </div>
+    <StoreView />
   </div>
 </template>
 
 <script setup lang="ts">
 const recent = await $dropFetch("/api/v1/store/recent");
-const updated = await $dropFetch("/api/v1/store/updated");
-const released = await $dropFetch("/api/v1/store/released");
-
-// const developers = await $dropFetch("/api/v1/store/developers");
-// const publishers = await $dropFetch("/api/v1/store/publishers");
 
 const { t } = useI18n();
 
diff --git a/prisma/migrations/20250720070939_static_genres/migration.sql b/prisma/migrations/20250720070939_static_genres/migration.sql
new file mode 100644
index 00000000..df314598
--- /dev/null
+++ b/prisma/migrations/20250720070939_static_genres/migration.sql
@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "Genre" AS ENUM ('Action', 'Strategy', 'Sports', 'Adventure', 'Roleplay', 'Racing', 'Simulation', 'Educational', 'Fighting', 'Shooter', 'RealTimeStrategy', 'CardGame', 'BoardGame', 'Compilation', 'MMORPG', 'MinigameCollection', 'Puzzle', 'MusicRhythm');
+
+-- AlterTable
+ALTER TABLE "Game" ADD COLUMN     "genres" "Genre"[];
diff --git a/prisma/models/content.prisma b/prisma/models/content.prisma
index f53d6129..0a7d132c 100644
--- a/prisma/models/content.prisma
+++ b/prisma/models/content.prisma
@@ -7,6 +7,27 @@ enum MetadataSource {
   OpenCritic
 }
 
+enum Genre {
+  Action
+  Strategy
+  Sports
+  Adventure
+  Roleplay
+  Racing
+  Simulation
+  Educational
+  Fighting
+  Shooter
+  RealTimeStrategy
+  CardGame
+  BoardGame
+  Compilation
+  MMORPG
+  MinigameCollection
+  Puzzle
+  MusicRhythm
+}
+
 model Game {
   id String @id @default(uuid())
 
@@ -22,6 +43,7 @@ model Game {
   mReleased         DateTime // When the game was released
 
   ratings GameRating[]
+  genres  Genre[]
 
   mIconObjectId           String // linked to objects in s3
   mBannerObjectId         String // linked to objects in s3
diff --git a/server/api/v1/store/genres.get.ts b/server/api/v1/store/genres.get.ts
new file mode 100644
index 00000000..12735473
--- /dev/null
+++ b/server/api/v1/store/genres.get.ts
@@ -0,0 +1,10 @@
+import { Genre } from "~/prisma/client";
+import aclManager from "~/server/internal/acls";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const genres = Object.values(Genre);
+  return genres;
+});
diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts
new file mode 100644
index 00000000..3037fc1c
--- /dev/null
+++ b/server/api/v1/store/index.get.ts
@@ -0,0 +1,114 @@
+import { ArkErrors, type } from "arktype";
+import type { Genre, Prisma } from "~/prisma/client";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+import { parsePlatform } from "~/server/internal/utils/parseplatform";
+
+const StoreRead = type({
+  skip: type("string")
+    .pipe((s) => Number.parseInt(s))
+    .default("0"),
+  take: type("string")
+    .pipe((s) => Number.parseInt(s))
+    .default("10"),
+
+  tags: "string?",
+  genres: "string?",
+  platform: "string?",
+
+  company: "string?",
+  companyActions: "string = 'published,developed'",
+});
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const query = getQuery(h3);
+  const options = StoreRead(query);
+  if (options instanceof ArkErrors)
+    throw createError({ statusCode: 400, statusMessage: options.summary });
+
+  /**
+   * Generic filters
+   */
+  const tagFilter = options.tags
+    ? {
+        tags: {
+          some: {
+            id: {
+              in: options.tags.split(","),
+            },
+          },
+        },
+      }
+    : undefined;
+  const genreFilter = options.genres
+    ? {
+        genres: {
+          hasSome: options.genres.split(",") as Array<Genre>,
+        },
+      }
+    : undefined;
+  const platformFilter = options.platform
+    ? {
+        versions: {
+          some: {
+            platform: {
+              in: options.platform
+                .split(",")
+                .map(parsePlatform)
+                .filter((e) => e !== undefined),
+            },
+          },
+        },
+      }
+    : undefined;
+
+  /**
+   * Company filtering
+   */
+  const companyActions = options.companyActions.split(",");
+  const developedFilter = companyActions.includes("developed")
+    ? {
+        developers: {
+          some: {
+            id: options.company!,
+          },
+        },
+      }
+    : undefined;
+  const publishedFilter = companyActions.includes("published")
+    ? {
+        publishers: {
+          some: {
+            id: options.company!,
+          },
+        },
+      }
+    : undefined;
+  const companyFilter = options.company
+    ? {
+        OR: [developedFilter, publishedFilter].filter((e) => e !== undefined),
+      } satisfies Prisma.GameWhereInput
+    : undefined;
+
+  /**
+   * Query
+   */
+
+  const finalFilter: Prisma.GameWhereInput = {
+    ...tagFilter,
+    ...genreFilter,
+    ...platformFilter,
+    ...companyFilter,
+  };
+
+  const results = await prisma.game.findMany({
+    skip: options.skip,
+    take: Math.min(options.take, 50),
+    where: finalFilter,
+  });
+
+  return results;
+});
diff --git a/server/api/v1/store/tags.get.ts b/server/api/v1/store/tags.get.ts
new file mode 100644
index 00000000..15f6804c
--- /dev/null
+++ b/server/api/v1/store/tags.get.ts
@@ -0,0 +1,10 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const tags = await prisma.tag.findMany({});
+  return tags;
+})
\ No newline at end of file
diff --git a/server/internal/library/index.ts b/server/internal/library/index.ts
index 75a1140f..fa4111a7 100644
--- a/server/internal/library/index.ts
+++ b/server/internal/library/index.ts
@@ -91,6 +91,11 @@ class LibraryManager {
         mIconObjectId: true,
         libraryId: true,
         libraryPath: true,
+        library: {
+          select: {
+            name: true
+          }
+        }
       },
       orderBy: {
         mName: "asc",
diff --git a/server/internal/metadata/giantbomb.ts b/server/internal/metadata/giantbomb.ts
index 53d71dcc..47a88926 100644
--- a/server/internal/metadata/giantbomb.ts
+++ b/server/internal/metadata/giantbomb.ts
@@ -64,6 +64,11 @@ interface GameResult {
   reviews?: Array<{
     api_detail_url: string;
   }>;
+
+  genres?: Array<{
+    name: string;
+    id: number;
+  }>;
 }
 
 interface ReviewResult {
@@ -188,7 +193,7 @@ export class GiantBombProvider implements MetadataProvider {
           context?.logger.warn(`Failed to import publisher "${pub}"`);
           continue;
         }
-        context?.logger.info(`Imported publisher "${pub}"`);
+        context?.logger.info(`Imported publisher "${pub.name}"`);
         publishers.push(res);
       }
     }
@@ -248,6 +253,8 @@ export class GiantBombProvider implements MetadataProvider {
       }
     }
 
+    const genres = (gameData.genres ?? []).map((e) => e.name);
+
     const metadata: GameMetadata = {
       id: gameData.guid,
       name: gameData.name,
@@ -255,6 +262,7 @@ export class GiantBombProvider implements MetadataProvider {
       description: longDescription,
       released: releaseDate,
 
+      genres,
       tags: [],
 
       reviews,
diff --git a/server/internal/metadata/igdb.ts b/server/internal/metadata/igdb.ts
index 7631f2a9..10056c2e 100644
--- a/server/internal/metadata/igdb.ts
+++ b/server/internal/metadata/igdb.ts
@@ -450,7 +450,7 @@ export class IGDBProvider implements MetadataProvider {
       mReviewHref: currentGame.url,
     };
 
-    const tags = await this.getGenres(currentGame.genres);
+    const genres = await this.getGenres(currentGame.genres);
 
     const deck = this.trimMessage(currentGame.summary, 280);
 
@@ -461,12 +461,13 @@ export class IGDBProvider implements MetadataProvider {
       description: currentGame.summary,
       released,
 
+      genres,
       reviews: [review],
 
       publishers,
       developers,
 
-      tags,
+      tags: [],
 
       icon,
       bannerId: banner,
diff --git a/server/internal/metadata/index.ts b/server/internal/metadata/index.ts
index 2dbffe48..8d36d922 100644
--- a/server/internal/metadata/index.ts
+++ b/server/internal/metadata/index.ts
@@ -1,4 +1,4 @@
-import { type Prisma, MetadataSource } from "~/prisma/client";
+import { type Prisma, Genre, MetadataSource } from "~/prisma/client";
 import prisma from "../db/database";
 import type {
   _FetchGameMetadataParams,
@@ -160,6 +160,20 @@ export class MetadataHandler {
     return results;
   }
 
+  private parseGenres(genres: string[]) {
+    const results: Genre[] = [];
+    const rawGenres = Object.values(Genre);
+
+    genres.forEach((genre) => {
+      const foundGenre = rawGenres.find(
+        (checkGenre) => fuzzy(checkGenre, genre) > 0.9,
+      );
+      if (foundGenre) results.push(foundGenre);
+    });
+
+    return results;
+  }
+
   async createGame(
     result: { sourceId: string; id: string; name: string },
     libraryId: string,
@@ -263,6 +277,7 @@ export class MetadataHandler {
             tags: {
               connectOrCreate: metadataHandler.parseTags(metadata.tags),
             },
+            genres: metadataHandler.parseGenres(metadata.genres),
 
             libraryId,
             libraryPath,
diff --git a/server/internal/metadata/manual.ts b/server/internal/metadata/manual.ts
index dd4d6fab..4c73de09 100644
--- a/server/internal/metadata/manual.ts
+++ b/server/internal/metadata/manual.ts
@@ -7,7 +7,6 @@ import type {
   CompanyMetadata,
 } from "./types";
 import * as jdenticon from "jdenticon";
-import { randomUUID } from "crypto";
 
 export class ManualMetadataProvider implements MetadataProvider {
   name() {
@@ -34,6 +33,7 @@ export class ManualMetadataProvider implements MetadataProvider {
       released: new Date(),
       publishers: [],
       developers: [],
+      genres: [],
       tags: [],
       reviews: [],
 
diff --git a/server/internal/metadata/pcgamingwiki.ts b/server/internal/metadata/pcgamingwiki.ts
index fb9c0f66..992ab543 100644
--- a/server/internal/metadata/pcgamingwiki.ts
+++ b/server/internal/metadata/pcgamingwiki.ts
@@ -451,7 +451,8 @@ export class PCGamingWikiProvider implements MetadataProvider {
       description: pageContent.introduction,
       released,
 
-      tags: this.compileTags(game),
+      genres: this.compileTags(game),
+      tags: [],
 
       reviews: pageContent.reception.filter((v) => typeof v !== "undefined"),
       publishers,
diff --git a/server/internal/metadata/types.d.ts b/server/internal/metadata/types.d.ts
index b5286a7c..ba362792 100644
--- a/server/internal/metadata/types.d.ts
+++ b/server/internal/metadata/types.d.ts
@@ -39,6 +39,7 @@ export interface GameMetadata {
   publishers: Company[];
   developers: Company[];
 
+  genres: string[];
   tags: string[];
 
   reviews: GameMetadataRating[];

From 0799413a5944a4100885278871fd2b61aa6b5d3b Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 20 Jul 2025 19:37:54 +1000
Subject: [PATCH 03/26] fix: ci merge error

---
 .github/workflows/ci.yml | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9ed5caf3..78926f62 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,13 +7,7 @@ on:
   pull_request:
     branches:
       - develop
-<<<<<<< Updated upstream
-=======
-
-permissions:
-  contents: read
->>>>>>> Stashed changes
-
+      
 permissions:
   contents: read
 

From 9ad8ebc384193be9bc7017a7232c4f0884bc83ce Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 20 Jul 2025 21:07:20 +1000
Subject: [PATCH 04/26] feat: add genres to store page

---
 components/StoreView.vue            | 18 ++++++++++++------
 pages/store/[id]/index.vue          | 17 +++++++++++++++++
 pages/store/c/[id]/index.vue        |  2 +-
 server/api/v1/store/index.get.ts    | 19 +++++++++++++++++--
 server/api/v1/store/released.get.ts | 16 ----------------
 server/api/v1/store/updated.get.ts  | 28 ----------------------------
 6 files changed, 47 insertions(+), 53 deletions(-)
 delete mode 100644 server/api/v1/store/released.get.ts
 delete mode 100644 server/api/v1/store/updated.get.ts

diff --git a/components/StoreView.vue b/components/StoreView.vue
index c35e5833..cb552abc 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -71,7 +71,7 @@
                         </span>
                       </DisclosureButton>
                     </h3>
-                    <DisclosurePanel class="pt-6 ">
+                    <DisclosurePanel class="pt-6">
                       <div class="gap-3 grid grid-cols-2">
                         <div
                           v-for="(option, optionIdx) in section.options"
@@ -133,7 +133,7 @@
                 <MenuButton
                   class="group inline-flex justify-center text-sm font-medium text-zinc-400 hover:text-zinc-100"
                 >
-                  Sort
+                  Sort 
                   <ChevronDownIcon
                     class="-mr-1 ml-1 size-5 shrink-0 text-gray-400 group-hover:text-zinc-100"
                     aria-hidden="true"
@@ -166,6 +166,7 @@
                           active ? 'bg-zinc-900 outline-hidden' : '',
                           'w-full text-left block px-4 py-2 text-sm',
                         ]"
+                        @click="() => (currentSort = option.param)"
                       >
                         {{ option.name }}
                       </button>
@@ -184,8 +185,11 @@
             </button>
             <button
               type="button"
-              :class="['-m-2 ml-4 p-2 sm:ml-6 lg:hidden', filterQuery 
-                ? 'text-zinc-100 hover:text-zinc-200' : 'text-zinc-500 hover:text-zinc-400'
+              :class="[
+                '-m-2 ml-4 p-2 sm:ml-6 lg:hidden',
+                filterQuery
+                  ? 'text-zinc-100 hover:text-zinc-200'
+                  : 'text-zinc-500 hover:text-zinc-400',
               ]"
               @click="mobileFiltersOpen = true"
             >
@@ -268,7 +272,7 @@
 
             <!-- Product grid -->
             <div
-            v-if="games?.length ?? 0 > 0"
+              v-if="games?.length ?? 0 > 0"
               class="relative lg:col-span-4 flex flex-row flex-wrap content-start gap-4"
             >
               <!-- Your content -->
@@ -301,7 +305,9 @@
               </div>
             </div>
             <div v-else class="flex lg:col-span-4 items-start justify-center">
-              <span class="uppercase text-zinc-700 font-display font-bold">No results</span>
+              <span class="uppercase text-zinc-700 font-display font-bold"
+                >No results</span
+              >
             </div>
           </div>
         </section>
diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index db27bf4c..220295d5 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -108,6 +108,23 @@
                   }}</span>
                 </td>
               </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  Genre(s)
+                </td>
+                <td class="flex flex-wrap gap-1 px-3 py-4 text-sm text-zinc-400">
+                  <NuxtLink
+                    v-for="genre in game.genres"
+                    :key="genre"
+                    :href="`/store/g/${genre}`"
+                    class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
+                  >
+                    {{ genre }}
+                  </NuxtLink>
+                </td>
+              </tr>
               <tr>
                 <td
                   class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
diff --git a/pages/store/c/[id]/index.vue b/pages/store/c/[id]/index.vue
index e131ea91..40e272b4 100644
--- a/pages/store/c/[id]/index.vue
+++ b/pages/store/c/[id]/index.vue
@@ -28,7 +28,7 @@
     <div class="px-4 sm:px-12 py-4 sm:py-10">
       <h1 class="text-xl text-zinc-200 font-semibold">About</h1>
       <div
-        class="mt-4 mb-4 prose prose-invert prose-blue max-w-none max-h-[40vh] overflow-y-auto"
+        class="mt-4 mb-4 prose prose-invert prose-blue max-w-none max-h-[40vh] overflow-y-auto ring ring-zinc-700 p-4 rounded-lg"
         v-html="description"
       />
       <NuxtLink
diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts
index 3037fc1c..76d2733d 100644
--- a/server/api/v1/store/index.get.ts
+++ b/server/api/v1/store/index.get.ts
@@ -18,6 +18,8 @@ const StoreRead = type({
 
   company: "string?",
   companyActions: "string = 'published,developed'",
+
+  sort: "'newest' | 'recent' = 'newest'",
 });
 
 export default defineEventHandler(async (h3) => {
@@ -88,9 +90,9 @@ export default defineEventHandler(async (h3) => {
       }
     : undefined;
   const companyFilter = options.company
-    ? {
+    ? ({
         OR: [developedFilter, publishedFilter].filter((e) => e !== undefined),
-      } satisfies Prisma.GameWhereInput
+      } satisfies Prisma.GameWhereInput)
     : undefined;
 
   /**
@@ -104,10 +106,23 @@ export default defineEventHandler(async (h3) => {
     ...companyFilter,
   };
 
+  const sort: Prisma.GameOrderByWithRelationInput = {};
+  switch (options.sort) {
+    case "newest":
+      sort.mReleased = "desc";
+      break;
+    case "recent":
+      sort.created = "desc";
+      break;
+  }
+
   const results = await prisma.game.findMany({
     skip: options.skip,
     take: Math.min(options.take, 50),
     where: finalFilter,
+    orderBy: {
+      mReleased: "desc",
+    },
   });
 
   return results;
diff --git a/server/api/v1/store/released.get.ts b/server/api/v1/store/released.get.ts
deleted file mode 100644
index 37c729c2..00000000
--- a/server/api/v1/store/released.get.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import aclManager from "~/server/internal/acls";
-import prisma from "~/server/internal/db/database";
-
-export default defineEventHandler(async (h3) => {
-  const userId = await aclManager.getUserACL(h3, ["store:read"]);
-  if (!userId) throw createError({ statusCode: 403 });
-
-  const games = await prisma.game.findMany({
-    orderBy: {
-      mReleased: "desc",
-    },
-    take: 12,
-  });
-
-  return games;
-});
diff --git a/server/api/v1/store/updated.get.ts b/server/api/v1/store/updated.get.ts
deleted file mode 100644
index 520033e3..00000000
--- a/server/api/v1/store/updated.get.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import aclManager from "~/server/internal/acls";
-import prisma from "~/server/internal/db/database";
-
-export default defineEventHandler(async (h3) => {
-  const userId = await aclManager.getUserACL(h3, ["store:read"]);
-  if (!userId) throw createError({ statusCode: 403 });
-
-  const versions = await prisma.gameVersion.findMany({
-    where: {
-      versionIndex: {
-        gte: 1,
-      },
-    },
-    select: {
-      game: true,
-    },
-    orderBy: {
-      created: "desc",
-    },
-    take: 12,
-  });
-
-  const games = versions
-    .map((e) => e.game)
-    .filter((v, i, a) => a.findIndex((e) => e.id === v.id) === i);
-
-  return games;
-});

From cff2c093aaa6edd2b06c8b14de5a14e8ed558c9e Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 21 Jul 2025 13:36:05 +1000
Subject: [PATCH 05/26] feat: sorting

---
 components/StoreView.vue         | 2 +-
 server/api/v1/store/index.get.ts | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/StoreView.vue b/components/StoreView.vue
index cb552abc..23f047ea 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -420,7 +420,7 @@ const filterQuery = computed(() => {
         .map(([k, v]) => `${k}=${v}`)
         .join("&")
     : props.params;
-  return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}`;
+  return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}${query || extraFilters ? '&' : ''}sort=${currentSort.value}`;
 });
 
 const games = ref<Array<SerializeObject<Game>>>();
diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts
index 76d2733d..81b55595 100644
--- a/server/api/v1/store/index.get.ts
+++ b/server/api/v1/store/index.get.ts
@@ -120,9 +120,7 @@ export default defineEventHandler(async (h3) => {
     skip: options.skip,
     take: Math.min(options.take, 50),
     where: finalFilter,
-    orderBy: {
-      mReleased: "desc",
-    },
+    orderBy: sort,
   });
 
   return results;

From cb019db8daee3a8b72387eada4f89194a2bb1383 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 21 Jul 2025 15:23:32 +1000
Subject: [PATCH 06/26] feat: lock game/version imports while their tasks are
 running

---
 components/StoreView.vue                     |  1 +
 server/api/v1/admin/import/game/index.get.ts |  2 +-
 server/api/v1/admin/library/index.get.ts     |  2 +-
 server/internal/library/index.ts             | 99 ++++++++++++++++++--
 server/internal/metadata/giantbomb.ts        |  6 +-
 server/internal/metadata/index.ts            |  5 +
 6 files changed, 98 insertions(+), 17 deletions(-)

diff --git a/components/StoreView.vue b/components/StoreView.vue
index 23f047ea..00927be4 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -177,6 +177,7 @@
             </Menu>
 
             <button
+            v-if="false"
               type="button"
               class="-m-2 ml-5 p-2 text-zinc-500 hover:text-zinc-400 sm:ml-7"
             >
diff --git a/server/api/v1/admin/import/game/index.get.ts b/server/api/v1/admin/import/game/index.get.ts
index 95373ef2..f363a44e 100644
--- a/server/api/v1/admin/import/game/index.get.ts
+++ b/server/api/v1/admin/import/game/index.get.ts
@@ -5,7 +5,7 @@ export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["import:game:read"]);
   if (!allowed) throw createError({ statusCode: 403 });
 
-  const unimportedGames = await libraryManager.fetchAllUnimportedGames();
+  const unimportedGames = await libraryManager.fetchUnimportedGames();
   const iterableUnimportedGames = Object.entries(unimportedGames)
     .map(([libraryId, gameArray]) =>
       gameArray.map((e) => ({ game: e, library: libraryId })),
diff --git a/server/api/v1/admin/library/index.get.ts b/server/api/v1/admin/library/index.get.ts
index 192a7c25..d0a00473 100644
--- a/server/api/v1/admin/library/index.get.ts
+++ b/server/api/v1/admin/library/index.get.ts
@@ -5,7 +5,7 @@ export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["library:read"]);
   if (!allowed) throw createError({ statusCode: 403 });
 
-  const unimportedGames = await libraryManager.fetchAllUnimportedGames();
+  const unimportedGames = await libraryManager.fetchUnimportedGames();
   const games = await libraryManager.fetchGamesWithStatus();
 
   // Fetch other library data here
diff --git a/server/internal/library/index.ts b/server/internal/library/index.ts
index fa4111a7..a75324a7 100644
--- a/server/internal/library/index.ts
+++ b/server/internal/library/index.ts
@@ -16,6 +16,9 @@ import type { LibraryProvider } from "./provider";
 class LibraryManager {
   private libraries: Map<string, LibraryProvider<unknown>> = new Map();
 
+  private gameImportLocks: Map<string, Array<string>> = new Map(); // Library ID to Library Path
+  private versionImportLocks: Map<string, Array<string>> = new Map(); // Game ID to Version Name
+
   addLibrary(library: LibraryProvider<unknown>) {
     this.libraries.set(library.id(), library);
   }
@@ -33,7 +36,7 @@ class LibraryManager {
     return libraryWithMetadata;
   }
 
-  async fetchAllUnimportedGames() {
+  async fetchUnimportedGames() {
     const unimportedGames: { [key: string]: string[] } = {};
 
     for (const [id, library] of this.libraries.entries()) {
@@ -48,7 +51,9 @@ class LibraryManager {
         },
       });
       const providerUnimportedGames = games.filter(
-        (e) => validGames.findIndex((v) => v.libraryPath == e) == -1,
+        (e) =>
+          validGames.findIndex((v) => v.libraryPath == e) == -1 &&
+          !(this.gameImportLocks.get(id) ?? []).includes(e),
       );
       unimportedGames[id] = providerUnimportedGames;
     }
@@ -67,6 +72,7 @@ class LibraryManager {
         },
       },
       select: {
+        id: true,
         versions: true,
       },
     });
@@ -74,7 +80,9 @@ class LibraryManager {
 
     const versions = await provider.listVersions(libraryPath);
     const unimportedVersions = versions.filter(
-      (e) => game.versions.findIndex((v) => v.versionName == e) == -1,
+      (e) =>
+        game.versions.findIndex((v) => v.versionName == e) == -1 &&
+        !(this.versionImportLocks.get(game.id) ?? []).includes(e),
     );
 
     return unimportedVersions;
@@ -93,9 +101,9 @@ class LibraryManager {
         libraryPath: true,
         library: {
           select: {
-            name: true
-          }
-        }
+            name: true,
+          },
+        },
       },
       orderBy: {
         mName: "asc",
@@ -116,6 +124,12 @@ class LibraryManager {
     );
   }
 
+  /**
+   * Fetches recommendations and extra data about the version. Doesn't actually check if it's been imported.
+   * @param gameId
+   * @param versionName
+   * @returns
+   */
   async fetchUnimportedVersionInformation(gameId: string, versionName: string) {
     const game = await prisma.game.findUnique({
       where: { id: gameId },
@@ -135,10 +149,7 @@ class LibraryManager {
         // No extension is common for Linux binaries
         "",
       ],
-      Windows: [
-        // Pretty much the only one
-        ".exe",
-      ],
+      Windows: [".exe", ".bat"],
       macOS: [
         // App files
         ".app",
@@ -193,6 +204,70 @@ class LibraryManager {
   }
   */
 
+  /**
+   * Locks the game so you can't be imported
+   * @param libraryId
+   * @param libraryPath
+   */
+  async lockGame(libraryId: string, libraryPath: string) {
+    let games = this.gameImportLocks.get(libraryId);
+    if (!games) this.gameImportLocks.set(libraryId, (games = []));
+
+    if (!games.includes(libraryPath)) games.push(libraryPath);
+
+    this.gameImportLocks.set(libraryId, games);
+  }
+
+  /**
+   * Unlocks the game, call once imported
+   * @param libraryId
+   * @param libraryPath
+   */
+  async unlockGame(libraryId: string, libraryPath: string) {
+    let games = this.gameImportLocks.get(libraryId);
+    if (!games) this.gameImportLocks.set(libraryId, (games = []));
+
+    if (games.includes(libraryPath))
+      games.splice(
+        games.findIndex((e) => e === libraryPath),
+        1,
+      );
+
+    this.gameImportLocks.set(libraryId, games);
+  }
+
+  /**
+   * Locks a version so it can't be imported
+   * @param gameId
+   * @param versionName
+   */
+  async lockVersion(gameId: string, versionName: string) {
+    let versions = this.versionImportLocks.get(gameId);
+    if (!versions) this.versionImportLocks.set(gameId, (versions = []));
+
+    if (!versions.includes(versionName)) versions.push(versionName);
+
+    this.versionImportLocks.set(gameId, versions);
+  }
+
+  /**
+   * Unlocks the version, call once imported
+   * @param libraryId
+   * @param libraryPath
+   */
+  async unlockVersion(gameId: string, versionName: string) {
+    let versions = this.versionImportLocks.get(gameId);
+    if (!versions) this.versionImportLocks.set(gameId, (versions = []));
+
+    if (versions.includes(gameId))
+      versions.splice(
+        versions.findIndex((e) => e === versionName),
+        1,
+      );
+
+    this.versionImportLocks.set(gameId, versions);
+  }
+
   async importVersion(
     gameId: string,
     versionName: string,
@@ -223,6 +298,8 @@ class LibraryManager {
     const library = this.libraries.get(game.libraryId);
     if (!library) return undefined;
 
+    await this.lockVersion(gameId, versionName);
+
     taskHandler.create({
       id: taskId,
       taskGroup: "import:game",
@@ -298,6 +375,8 @@ class LibraryManager {
         });
 
         progress(100);
+
+        await libraryManager.unlockVersion(gameId, versionName);
       },
     });
 
diff --git a/server/internal/metadata/giantbomb.ts b/server/internal/metadata/giantbomb.ts
index 47a88926..8e9cc185 100644
--- a/server/internal/metadata/giantbomb.ts
+++ b/server/internal/metadata/giantbomb.ts
@@ -228,11 +228,7 @@ export class GiantBombProvider implements MetadataProvider {
 
     const releaseDate = gameData.original_release_date
       ? DateTime.fromISO(gameData.original_release_date).toJSDate()
-      : DateTime.fromISO(
-          `${gameData.expected_release_year ?? new Date().getFullYear()}-${
-            gameData.expected_release_month ?? 1
-          }-${gameData.expected_release_day ?? 1}`,
-        ).toJSDate();
+      : new Date()
 
     context?.progress(85);
 
diff --git a/server/internal/metadata/index.ts b/server/internal/metadata/index.ts
index 8d36d922..69c337f0 100644
--- a/server/internal/metadata/index.ts
+++ b/server/internal/metadata/index.ts
@@ -17,6 +17,7 @@ import taskHandler, { wrapTaskContext } from "../tasks";
 import { randomUUID } from "crypto";
 import { fuzzy } from "fast-fuzzy";
 import { logger } from "~/server/internal/logging";
+import libraryManager from "../library";
 
 export class MissingMetadataProviderConfig extends Error {
   private providerName: string;
@@ -193,6 +194,8 @@ export class MetadataHandler {
     });
     if (existing) return undefined;
 
+    await libraryManager.lockGame(libraryId, libraryPath);
+
     const gameId = randomUUID();
 
     const taskId = `import:${gameId}`;
@@ -285,6 +288,8 @@ export class MetadataHandler {
         });
 
         logger.info(`Finished game import.`);
+
+        await libraryManager.unlockGame(libraryId, libraryPath);
       },
     });
 

From b8b187edf62856a13dad6eed479ffa9361af0e32 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 21 Jul 2025 15:47:23 +1000
Subject: [PATCH 07/26] feat: feature games

---
 pages/admin/library/index.vue                 | 32 +++++++++++++++++--
 pages/store/index.vue                         |  4 +--
 .../migration.sql                             | 14 ++++++++
 .../20250721053514_add_featured/migration.sql |  2 ++
 prisma/models/content.prisma                  | 12 ++++---
 .../store/{recent.get.ts => featured.get.ts}  |  4 ++-
 server/internal/library/index.ts              | 15 ++-------
 7 files changed, 59 insertions(+), 24 deletions(-)
 create mode 100644 prisma/migrations/20250721053244_update_genre_names/migration.sql
 create mode 100644 prisma/migrations/20250721053514_add_featured/migration.sql
 rename server/api/v1/store/{recent.get.ts => featured.get.ts} (94%)

diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index ece59112..f0a220ff 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -87,10 +87,24 @@
             alt=""
           />
           <div class="flex flex-col">
-            <h3 class="text-sm font-medium text-zinc-100 font-display">
+            <h3
+              class="gap-x-2 text-sm inline-flex items-center font-medium text-zinc-100 font-display"
+            >
               {{ game.mName }}
+              <button
+                type="button"
+                :class="[
+                  'rounded-full p-1 shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2',
+                  game.featured
+                    ? 'bg-yellow-400 hover:bg-yellow-300 focus-visible:outline-yellow-400 text-zinc-900'
+                    : 'bg-zinc-800 hover:bg-zinc-700 focus-visible:outline-zinc-400 text-white',
+                ]"
+                @click="() => featureGame(game.id)"
+              >
+                <StarIcon class="size-3" aria-hidden="true" />
+              </button>
               <span
-                class="ml-2 inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
+                class="inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
                 >{{ game.library!.name }}</span
               >
             </h3>
@@ -200,7 +214,7 @@
 
 <script setup lang="ts">
 import { ExclamationTriangleIcon } from "@heroicons/vue/16/solid";
-import { InformationCircleIcon } from "@heroicons/vue/20/solid";
+import { InformationCircleIcon, StarIcon } from "@heroicons/vue/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 
 const { t } = useI18n();
@@ -256,4 +270,16 @@ async function deleteGame(id: string) {
   libraryGames.value.splice(index, 1);
   toImport.value = true;
 }
+
+async function featureGame(id: string) {
+  const gameIndex = libraryGames.value.findIndex((e) => e.id === id);
+  const game = libraryGames.value[gameIndex];
+
+  await $dropFetch("/api/v1/admin/game", {
+    method: "PATCH",
+    body: { id, featured: !game.featured },
+  });
+
+  libraryGames.value[gameIndex].featured = !game.featured;
+}
 </script>
diff --git a/pages/store/index.vue b/pages/store/index.vue
index 7eadaadf..53a21aa5 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -31,7 +31,7 @@
               >
                 {{ game.mName }}
               </h2>
-              <p class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl">
+              <p class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl mx-auto">
                 {{ game.mShortDescription }}
               </p>
               <div>
@@ -71,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-const recent = await $dropFetch("/api/v1/store/recent");
+const recent = await $dropFetch("/api/v1/store/featured");
 
 const { t } = useI18n();
 
diff --git a/prisma/migrations/20250721053244_update_genre_names/migration.sql b/prisma/migrations/20250721053244_update_genre_names/migration.sql
new file mode 100644
index 00000000..63accfe1
--- /dev/null
+++ b/prisma/migrations/20250721053244_update_genre_names/migration.sql
@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - The values [RealTimeStrategy,CardGame,BoardGame,MinigameCollection,MusicRhythm] on the enum `Genre` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "Genre_new" AS ENUM ('Action', 'Strategy', 'Sports', 'Adventure', 'Roleplay', 'Racing', 'Simulation', 'Educational', 'Fighting', 'Shooter', 'RTS', 'Card', 'Board', 'Compilation', 'MMORPG', 'Minigames', 'Puzzle', 'Rhythm');
+ALTER TABLE "Game" ALTER COLUMN "genres" TYPE "Genre_new"[] USING ("genres"::text::"Genre_new"[]);
+ALTER TYPE "Genre" RENAME TO "Genre_old";
+ALTER TYPE "Genre_new" RENAME TO "Genre";
+DROP TYPE "Genre_old";
+COMMIT;
diff --git a/prisma/migrations/20250721053514_add_featured/migration.sql b/prisma/migrations/20250721053514_add_featured/migration.sql
new file mode 100644
index 00000000..89aeeb49
--- /dev/null
+++ b/prisma/migrations/20250721053514_add_featured/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Game" ADD COLUMN     "featured" BOOLEAN NOT NULL DEFAULT false;
diff --git a/prisma/models/content.prisma b/prisma/models/content.prisma
index 0a7d132c..a69224c4 100644
--- a/prisma/models/content.prisma
+++ b/prisma/models/content.prisma
@@ -18,14 +18,14 @@ enum Genre {
   Educational
   Fighting
   Shooter
-  RealTimeStrategy
-  CardGame
-  BoardGame
+  RTS
+  Card
+  Board
   Compilation
   MMORPG
-  MinigameCollection
+  Minigames
   Puzzle
-  MusicRhythm
+  Rhythm
 }
 
 model Game {
@@ -45,6 +45,8 @@ model Game {
   ratings GameRating[]
   genres  Genre[]
 
+  featured Boolean @default(false)
+
   mIconObjectId           String // linked to objects in s3
   mBannerObjectId         String // linked to objects in s3
   mCoverObjectId          String
diff --git a/server/api/v1/store/recent.get.ts b/server/api/v1/store/featured.get.ts
similarity index 94%
rename from server/api/v1/store/recent.get.ts
rename to server/api/v1/store/featured.get.ts
index f4bb39ad..fb353e41 100644
--- a/server/api/v1/store/recent.get.ts
+++ b/server/api/v1/store/featured.get.ts
@@ -6,6 +6,9 @@ export default defineEventHandler(async (h3) => {
   if (!userId) throw createError({ statusCode: 403 });
 
   const games = await prisma.game.findMany({
+    where: {
+      featured: true,
+    },
     select: {
       id: true,
       mName: true,
@@ -28,7 +31,6 @@ export default defineEventHandler(async (h3) => {
     orderBy: {
       created: "desc",
     },
-    take: 8,
   });
 
   return games;
diff --git a/server/internal/library/index.ts b/server/internal/library/index.ts
index a75324a7..070523e5 100644
--- a/server/internal/library/index.ts
+++ b/server/internal/library/index.ts
@@ -90,20 +90,9 @@ class LibraryManager {
 
   async fetchGamesWithStatus() {
     const games = await prisma.game.findMany({
-      select: {
-        id: true,
+      include: {
         versions: true,
-        mName: true,
-        mShortDescription: true,
-        metadataSource: true,
-        mIconObjectId: true,
-        libraryId: true,
-        libraryPath: true,
-        library: {
-          select: {
-            name: true,
-          },
-        },
+        library: true,
       },
       orderBy: {
         mName: "asc",

From c40947609e3300eefa0ce2ef25a0f9df115eb4a0 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 21 Jul 2025 17:41:05 +1000
Subject: [PATCH 08/26] feat: tag based filtering

---
 components/AddLibraryButton.vue               |  28 +----
 components/GamePanel.vue                      |   2 +-
 components/MultiItemSelector.vue              | 112 ++++++++++++++++++
 components/StoreView.vue                      |  68 ++++++-----
 composables/request.ts                        |  31 +++--
 composables/store.ts                          |   5 +-
 pages/admin/library/index.vue                 |   6 +-
 pages/store/[id]/index.vue                    |  12 +-
 pages/store/c/[id]/index.vue                  |   4 +-
 .../migration.sql                             |  11 ++
 .../20250721062509_add_pg_trgm/migration.sql  |   5 +
 .../migration.sql                             |   2 +
 .../migration.sql                             |  87 ++++++++++++++
 prisma/models/content.prisma                  |  34 ++----
 prisma/models/news.prisma                     |   5 +-
 server/api/v1/games/[id]/index.get.ts         |   1 +
 server/api/v1/store/genres.get.ts             |  10 --
 server/api/v1/store/index.get.ts              |  11 +-
 server/api/v1/store/tags.get.ts               |   4 +-
 server/internal/library/index.ts              |   3 +-
 server/internal/metadata/giantbomb.ts         |   7 +-
 server/internal/metadata/index.ts             |  51 ++++----
 server/internal/metadata/manual.ts            |   1 -
 server/internal/metadata/pcgamingwiki.ts      |   3 +-
 server/internal/metadata/types.d.ts           |   1 -
 server/internal/tasks/index.ts                |   3 +
 26 files changed, 343 insertions(+), 164 deletions(-)
 create mode 100644 components/MultiItemSelector.vue
 create mode 100644 prisma/migrations/20250721061200_remove_genres/migration.sql
 create mode 100644 prisma/migrations/20250721062509_add_pg_trgm/migration.sql
 create mode 100644 prisma/migrations/20250721063518_add_index_for_tag_name/migration.sql
 create mode 100644 prisma/migrations/20250721070713_split_game_and_news_tags/migration.sql
 delete mode 100644 server/api/v1/store/genres.get.ts

diff --git a/components/AddLibraryButton.vue b/components/AddLibraryButton.vue
index 226bbc1c..79c0a28d 100644
--- a/components/AddLibraryButton.vue
+++ b/components/AddLibraryButton.vue
@@ -122,20 +122,9 @@ async function toggleLibrary() {
       body: {
         id: props.gameId,
       },
+      failTitle: t("errors.library.add.title"),
     });
     await refreshLibrary();
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: t("errors.library.add.title"),
-        description: t("errors.library.add.desc", [
-          // @ts-expect-error attempt to display statusMessage on error
-          e?.statusMessage ?? t("errors.unknown"),
-        ]),
-      },
-      (_, c) => c(),
-    );
   } finally {
     isLibraryLoading.value = false;
   }
@@ -152,21 +141,10 @@ async function toggleCollection(id: string) {
       body: {
         id: props.gameId,
       },
+      failTitle: t("errors.library.add.title"),
     });
 
     await refreshCollection(id);
-  } catch (e) {
-    createModal(
-      ModalType.Notification,
-      {
-        title: t("errors.library.add.title"),
-        description: t("errors.library.add.desc", [
-          // @ts-expect-error attempt to display statusMessage on error
-          e?.statusMessage ?? t("errors.unknown"),
-        ]),
-      },
-      (_, c) => c(),
-    );
-  }
+  } finally { /* empty */ }
 }
 </script>
diff --git a/components/GamePanel.vue b/components/GamePanel.vue
index d7fd4d8b..97b4651c 100644
--- a/components/GamePanel.vue
+++ b/components/GamePanel.vue
@@ -6,7 +6,7 @@
       'transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5':
         animate,
     }"
-    class="group relative w-48 h-64 rounded-lg overflow-hidden"
+    class="group relative flex-1 min-w-42 max-w-48 h-64 rounded-lg overflow-hidden"
   >
     <div
       :class="{
diff --git a/components/MultiItemSelector.vue b/components/MultiItemSelector.vue
new file mode 100644
index 00000000..da58fdaf
--- /dev/null
+++ b/components/MultiItemSelector.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div class="inline-flex gap-1 items-center flex-wrap">
+      <span
+        v-for="item in enabledItems"
+        :key="item.param"
+        class="inline-flex items-center gap-x-0.5 rounded-md bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-500 ring-1 ring-blue-800 ring-inset"
+      >
+        {{ item.name }}
+        <button
+          type="button"
+          class="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-600/20"
+          @click="() => remove(item.param)"
+        >
+          <span class="sr-only">Remove</span>
+          <svg
+            viewBox="0 0 14 14"
+            class="size-3.5 stroke-blue-500 group-hover:stroke-blue-400"
+          >
+            <path d="M4 4l6 6m0-6l-6 6" />
+          </svg>
+          <span class="absolute -inset-1" />
+        </button>
+      </span>
+      <span v-if="enabledItems.length == 0" class="font-display uppercase text-xs font-bold text-zinc-700">
+        No items selected.
+      </span>
+    </div>
+    <Combobox as="div" @update:model-value="add">
+      <div class="relative mt-2">
+        <ComboboxInput
+          class="block w-full rounded-md bg-zinc-900 py-1.5 pr-12 pl-3 text-base text-zinc-100 outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+          :display-value="(item) => (item as StoreSortOption)?.name"
+          placeholder="Start typing..."
+          @change="search = $event.target.value"
+          @blur="search = ''"
+        />
+        <ComboboxButton
+          class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden"
+        >
+          <ChevronDownIcon class="size-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+
+        <ComboboxOptions
+          v-if="filteredItems.length > 0 || search.length > 0"
+          class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-hidden sm:text-sm"
+        >
+          <ComboboxOption
+            v-for="item in filteredItems"
+            :key="item.param"
+            v-slot="{ active }"
+            :value="item.param"
+            as="template"
+          >
+            <li
+              :class="[
+                'relative cursor-default py-2 pr-9 pl-3 select-none',
+                active
+                  ? 'bg-blue-600 text-white outline-hidden'
+                  : 'text-zinc-100',
+              ]"
+            >
+              <span class="block truncate">
+                {{ item.name }}
+              </span>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/20/solid";
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+const props = defineProps<{
+  items: Array<StoreSortOption>;
+}>();
+
+const model = defineModel<{ [key: string]: boolean }>();
+
+const search = ref("");
+const filteredItems = computed(() =>
+  props.items.filter(
+    (item) =>
+      !model.value?.[item.param] &&
+      item.name.toLowerCase().includes(search.value.toLowerCase()),
+  ),
+);
+
+const enabledItems = computed(() =>
+  props.items.filter((e) => model.value?.[e.param]),
+);
+
+function add(item: string) {
+  search.value = "";
+  model.value ??= {};
+  model.value[item] = true;
+}
+
+function remove(item: string){
+    model.value ??= {};
+    model.value[item] = false;
+}
+</script>
diff --git a/components/StoreView.vue b/components/StoreView.vue
index 00927be4..2dea8bb1 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -72,10 +72,13 @@
                       </DisclosureButton>
                     </h3>
                     <DisclosurePanel class="pt-6">
-                      <div class="gap-3 grid grid-cols-2">
+                      <div
+                        v-if="section.options.length <= 10"
+                        class="gap-3 grid grid-cols-2"
+                      >
                         <div
                           v-for="(option, optionIdx) in section.options"
-                          :key="option.value"
+                          :key="option.param"
                           class="flex gap-3"
                         >
                           <div class="flex h-5 shrink-0 items-center">
@@ -85,7 +88,7 @@
                                 :id="`filter-${section.param}-${option}`"
                                 v-model="
                                   (optionValues[section.param] as any)[
-                                    option.value
+                                    option.param
                                   ]
                                 "
                                 :name="`${section.param}[]`"
@@ -101,7 +104,7 @@
                                 class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
                                 @update:value="
                                   () =>
-                                    (optionValues[section.param] = option.value)
+                                    (optionValues[section.param] = option.param)
                                 "
                               />
                             </div>
@@ -113,6 +116,11 @@
                           >
                         </div>
                       </div>
+                      <MultiItemSelector
+                        v-else
+                        v-model="[optionValues[section.param] as any][0]"
+                        :items="section.options"
+                      />
                     </DisclosurePanel>
                   </Disclosure>
                 </form>
@@ -133,7 +141,7 @@
                 <MenuButton
                   class="group inline-flex justify-center text-sm font-medium text-zinc-400 hover:text-zinc-100"
                 >
-                  Sort 
+                  Sort
                   <ChevronDownIcon
                     class="-mr-1 ml-1 size-5 shrink-0 text-gray-400 group-hover:text-zinc-100"
                     aria-hidden="true"
@@ -177,7 +185,7 @@
             </Menu>
 
             <button
-            v-if="false"
+              v-if="false"
               type="button"
               class="-m-2 ml-5 p-2 text-zinc-500 hover:text-zinc-400 sm:ml-7"
             >
@@ -231,19 +239,19 @@
                   </DisclosureButton>
                 </h3>
                 <DisclosurePanel class="pt-6">
-                  <div class="space-y-4">
+                  <div v-if="section.options.length <= 10" class="space-y-4">
                     <div
                       v-for="(option, optionIdx) in section.options"
-                      :key="option.value"
+                      :key="option.param"
                       class="flex gap-3"
                     >
                       <div class="flex h-5 shrink-0 items-center">
                         <div class="group grid size-4 grid-cols-1">
                           <input
                             v-if="section.multiple"
-                            :id="`filter-${section.param}-${option}`"
+                            :id="`filter-${section.param}-${optionIdx}`"
                             v-model="
-                              (optionValues[section.param] as any)[option.value]
+                              (optionValues[section.param] as any)[option.param]
                             "
                             :name="`${section.param}[]`"
                             type="checkbox"
@@ -251,12 +259,12 @@
                           />
                           <input
                             v-else
-                            :id="`filter-${section.param}`"
+                            :id="`filter-${section.param}-${optionIdx}`"
                             :value="optionValues[section.param]"
                             :name="`${section.param}[]`"
                             type="radio"
                             class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-800 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
-                            @input="optionValues[section.param] = option.value"
+                            @input="optionValues[section.param] = option.param"
                           />
                         </div>
                       </div>
@@ -267,6 +275,11 @@
                       >
                     </div>
                   </div>
+                  <MultiItemSelector
+                    v-else
+                    v-model="[optionValues[section.param] as any][0]"
+                    :items="section.options"
+                  />
                 </DisclosurePanel>
               </Disclosure>
             </form>
@@ -340,7 +353,8 @@ import {
   Squares2X2Icon,
 } from "@heroicons/vue/20/solid";
 import type { SerializeObject } from "nitropack";
-import type { Game, Tag } from "~/prisma/client";
+import type { Game, GameTag } from "~/prisma/client";
+import MultiItemSelector from "./MultiItemSelector.vue";
 
 const mobileFiltersOpen = ref(false);
 
@@ -353,9 +367,7 @@ const props = defineProps<{
 }>();
 
 const tags =
-  await $dropFetch<Array<SerializeObject<Tag>>>("/api/v1/store/tags");
-
-const genres = await $dropFetch<Array<string>>("/api/v1/store/genres");
+  await $dropFetch<Array<SerializeObject<GameTag>>>("/api/v1/store/tags");
 
 const sorts: Array<StoreSortOption> = [
   {
@@ -370,28 +382,22 @@ const sorts: Array<StoreSortOption> = [
 const currentSort = ref(sorts[0].param);
 
 const options: Array<StoreFilterOption> = [
-  {
-    name: "Genres",
-    param: "genres",
-    multiple: true,
-    options: genres.map((e) => ({ name: e, value: e })),
-  },
-  {
-    name: "Platform",
-    param: "platform",
-    multiple: true,
-    options: Object.values(PlatformClient).map((e) => ({ name: e, value: e })),
-  },
   ...(tags.length > 0
     ? [
         {
           name: "Tags",
           param: "tags",
           multiple: true,
-          options: tags.map((e) => ({ name: e.name, value: e.id })),
+          options: tags.map((e) => ({ name: e.name, param: e.id })),
         },
       ]
     : []),
+  {
+    name: "Platform",
+    param: "platform",
+    multiple: true,
+    options: Object.values(PlatformClient).map((e) => ({ name: e, param: e })),
+  },
   ...(props.extraOptions ?? []),
 ];
 const optionValues = ref<{
@@ -421,7 +427,7 @@ const filterQuery = computed(() => {
         .map(([k, v]) => `${k}=${v}`)
         .join("&")
     : props.params;
-  return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}${query || extraFilters ? '&' : ''}sort=${currentSort.value}`;
+  return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}`;
 });
 
 const games = ref<Array<SerializeObject<Game>>>();
@@ -431,7 +437,7 @@ async function updateGames(query: string, reset: boolean) {
   loading.value = true;
   games.value ??= [];
   const newValues = await $dropFetch<Array<SerializeObject<Game>>>(
-    `/api/v1/store?take=50&start=${reset ? games.value?.length || 0 : 0}${query ? "&" + query : ""}`,
+    `/api/v1/store?take=50&start=${reset ? games.value?.length || 0 : 0}&sort=${currentSort.value}${query ? "&" + query : ""}`,
   );
   if (reset) {
     games.value = newValues;
diff --git a/composables/request.ts b/composables/request.ts
index af42dfce..a7daec4a 100644
--- a/composables/request.ts
+++ b/composables/request.ts
@@ -4,6 +4,7 @@ import type {
   NitroFetchRequest,
   TypedInternalResponse,
 } from "nitropack/types";
+import type { FetchError } from "ofetch";
 
 interface DropFetch<
   DefaultT = unknown,
@@ -15,7 +16,7 @@ interface DropFetch<
     O extends NitroFetchOptions<R> = NitroFetchOptions<R>,
   >(
     request: R,
-    opts?: O,
+    opts?: O & { failTitle?: string },
   ): Promise<
     // sometimes there is an error, other times there isn't
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -46,10 +47,26 @@ export const $dropFetch: DropFetch = async (request, opts) => {
   }
 
   const headers = useRequestHeaders(["cookie", "authorization"]);
-  const data = await $fetch(request, {
-    ...opts,
-    headers: { ...opts?.headers, ...headers },
-  });
-  if (import.meta.server) state.value = data;
-  return data;
+  try {
+    const data = await $fetch(request, {
+      ...opts,
+      headers: { ...opts?.headers, ...headers },
+    });
+    if (import.meta.server) state.value = data;
+    return data;
+  } catch (e) {
+    if (import.meta.client && opts?.failTitle) {
+      createModal(
+        ModalType.Notification,
+        {
+          title: opts.failTitle,
+          description:
+            (e as FetchError)?.statusMessage ?? (e as string).toString(),
+          buttonText: $t("close"),
+        },
+        (_, c) => c(),
+      );
+    }
+    throw e;
+  }
 };
diff --git a/composables/store.ts b/composables/store.ts
index adaffb0a..00b96fc2 100644
--- a/composables/store.ts
+++ b/composables/store.ts
@@ -1,10 +1,7 @@
 export type StoreFilterOption = {
   name: string;
   param: string;
-  options: Array<{
-    name: string;
-    value: string;
-  }>;
+  options: Array<StoreSortOption>;
   multiple?: boolean;
 };
 
diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index f0a220ff..85f382f5 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -265,7 +265,10 @@ const filteredLibraryGames = computed(() =>
 );
 
 async function deleteGame(id: string) {
-  await $dropFetch(`/api/v1/admin/game?id=${id}`, { method: "DELETE" });
+  await $dropFetch(`/api/v1/admin/game?id=${id}`, {
+    method: "DELETE",
+    failTitle: "Failed to delete game",
+  });
   const index = libraryGames.value.findIndex((e) => e.id === id);
   libraryGames.value.splice(index, 1);
   toImport.value = true;
@@ -278,6 +281,7 @@ async function featureGame(id: string) {
   await $dropFetch("/api/v1/admin/game", {
     method: "PATCH",
     body: { id, featured: !game.featured },
+    failTitle: "Failed to feature/unfeature game",
   });
 
   libraryGames.value[gameIndex].featured = !game.featured;
diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index 220295d5..3eae2eb6 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -112,16 +112,16 @@
                 <td
                   class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                 >
-                  Genre(s)
+                  Tags(s)
                 </td>
-                <td class="flex flex-wrap gap-1 px-3 py-4 text-sm text-zinc-400">
+                <td class="flex flex-col gap-1 px-3 py-4 text-sm text-zinc-400">
                   <NuxtLink
-                    v-for="genre in game.genres"
-                    :key="genre"
-                    :href="`/store/g/${genre}`"
+                    v-for="tag in game.tags"
+                    :key="tag.id"
+                    :href="`/store/t/${tag.id}`"
                     class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
                   >
-                    {{ genre }}
+                    {{ tag.name }}
                   </NuxtLink>
                 </td>
               </tr>
diff --git a/pages/store/c/[id]/index.vue b/pages/store/c/[id]/index.vue
index 40e272b4..d668b1a9 100644
--- a/pages/store/c/[id]/index.vue
+++ b/pages/store/c/[id]/index.vue
@@ -46,8 +46,8 @@
           param: 'companyActions',
           multiple: true,
           options: [
-            { name: 'Published', value: 'published' },
-            { name: 'Developed', value: 'developed' },
+            { name: 'Published', param: 'published' },
+            { name: 'Developed', param: 'developed' },
           ],
         },
       ]"
diff --git a/prisma/migrations/20250721061200_remove_genres/migration.sql b/prisma/migrations/20250721061200_remove_genres/migration.sql
new file mode 100644
index 00000000..4f4f1dfe
--- /dev/null
+++ b/prisma/migrations/20250721061200_remove_genres/migration.sql
@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `genres` on the `Game` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Game" DROP COLUMN "genres";
+
+-- DropEnum
+DROP TYPE "Genre";
diff --git a/prisma/migrations/20250721062509_add_pg_trgm/migration.sql b/prisma/migrations/20250721062509_add_pg_trgm/migration.sql
new file mode 100644
index 00000000..567fbd0b
--- /dev/null
+++ b/prisma/migrations/20250721062509_add_pg_trgm/migration.sql
@@ -0,0 +1,5 @@
+-- Add pg_trgm
+CREATE EXTENSION pg_trgm;
+
+-- Create index for tag names
+-- CREATE INDEX trgm_tag_name ON "Tag" USING GIST (name gist_trgm_ops(siglen=32));
\ No newline at end of file
diff --git a/prisma/migrations/20250721063518_add_index_for_tag_name/migration.sql b/prisma/migrations/20250721063518_add_index_for_tag_name/migration.sql
new file mode 100644
index 00000000..02b93b5a
--- /dev/null
+++ b/prisma/migrations/20250721063518_add_index_for_tag_name/migration.sql
@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "Tag_name_idx" ON "Tag" USING GIST ("name" gist_trgm_ops(siglen=32));
diff --git a/prisma/migrations/20250721070713_split_game_and_news_tags/migration.sql b/prisma/migrations/20250721070713_split_game_and_news_tags/migration.sql
new file mode 100644
index 00000000..cbd80c51
--- /dev/null
+++ b/prisma/migrations/20250721070713_split_game_and_news_tags/migration.sql
@@ -0,0 +1,87 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Tag` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_ArticleToTag` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_GameToTag` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "_ArticleToTag" DROP CONSTRAINT "_ArticleToTag_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_ArticleToTag" DROP CONSTRAINT "_ArticleToTag_B_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_GameToTag" DROP CONSTRAINT "_GameToTag_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_GameToTag" DROP CONSTRAINT "_GameToTag_B_fkey";
+
+-- DropTable
+DROP TABLE "Tag";
+
+-- DropTable
+DROP TABLE "_ArticleToTag";
+
+-- DropTable
+DROP TABLE "_GameToTag";
+
+-- CreateTable
+CREATE TABLE "GameTag" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "GameTag_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "NewsTag" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "NewsTag_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_GameToGameTag" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_GameToGameTag_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_ArticleToNewsTag" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_ArticleToNewsTag_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GameTag_name_key" ON "GameTag"("name");
+
+-- CreateIndex
+CREATE INDEX "GameTag_name_idx" ON "GameTag" USING GIST ("name" gist_trgm_ops(siglen=32));
+
+-- CreateIndex
+CREATE UNIQUE INDEX "NewsTag_name_key" ON "NewsTag"("name");
+
+-- CreateIndex
+CREATE INDEX "_GameToGameTag_B_index" ON "_GameToGameTag"("B");
+
+-- CreateIndex
+CREATE INDEX "_ArticleToNewsTag_B_index" ON "_ArticleToNewsTag"("B");
+
+-- AddForeignKey
+ALTER TABLE "_GameToGameTag" ADD CONSTRAINT "_GameToGameTag_A_fkey" FOREIGN KEY ("A") REFERENCES "Game"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_GameToGameTag" ADD CONSTRAINT "_GameToGameTag_B_fkey" FOREIGN KEY ("B") REFERENCES "GameTag"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_ArticleToNewsTag" ADD CONSTRAINT "_ArticleToNewsTag_A_fkey" FOREIGN KEY ("A") REFERENCES "Article"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_ArticleToNewsTag" ADD CONSTRAINT "_ArticleToNewsTag_B_fkey" FOREIGN KEY ("B") REFERENCES "NewsTag"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/models/content.prisma b/prisma/models/content.prisma
index a69224c4..587f2a60 100644
--- a/prisma/models/content.prisma
+++ b/prisma/models/content.prisma
@@ -7,27 +7,6 @@ enum MetadataSource {
   OpenCritic
 }
 
-enum Genre {
-  Action
-  Strategy
-  Sports
-  Adventure
-  Roleplay
-  Racing
-  Simulation
-  Educational
-  Fighting
-  Shooter
-  RTS
-  Card
-  Board
-  Compilation
-  MMORPG
-  Minigames
-  Puzzle
-  Rhythm
-}
-
 model Game {
   id String @id @default(uuid())
 
@@ -43,7 +22,6 @@ model Game {
   mReleased         DateTime // When the game was released
 
   ratings GameRating[]
-  genres  Genre[]
 
   featured Boolean @default(false)
 
@@ -64,7 +42,7 @@ model Game {
   collections CollectionEntry[]
   saves       SaveSlot[]
   screenshots Screenshot[]
-  tags        Tag[]
+  tags        GameTag[]
   playtime    Playtime[]
 
   developers Company[] @relation(name: "developers")
@@ -74,6 +52,16 @@ model Game {
   @@unique([libraryId, libraryPath], name: "libraryKey")
 }
 
+model GameTag {
+  id   String @id @default(uuid())
+  name String @unique
+
+  games    Game[]
+
+  @@index([name(ops: raw("gist_trgm_ops(siglen=32)"))], type: Gist)
+}
+
+
 model GameRating {
   id String @id @default(uuid())
 
diff --git a/prisma/models/news.prisma b/prisma/models/news.prisma
index 79363f03..496994f3 100644
--- a/prisma/models/news.prisma
+++ b/prisma/models/news.prisma
@@ -1,9 +1,8 @@
-model Tag {
+model NewsTag {
   id   String @id @default(uuid())
   name String @unique
 
   articles Article[]
-  games    Game[]
 }
 
 model Article {
@@ -12,7 +11,7 @@ model Article {
   description String
   content     String @db.Text
 
-  tags Tag[]
+  tags NewsTag[]
 
   imageObjectId String? // Object ID
   publishedAt   DateTime @default(now())
diff --git a/server/api/v1/games/[id]/index.get.ts b/server/api/v1/games/[id]/index.get.ts
index 2cf0041d..029b9b29 100644
--- a/server/api/v1/games/[id]/index.get.ts
+++ b/server/api/v1/games/[id]/index.get.ts
@@ -32,6 +32,7 @@ export default defineEventHandler(async (h3) => {
           mLogoObjectId: true,
         },
       },
+      tags: true,
     },
   });
 
diff --git a/server/api/v1/store/genres.get.ts b/server/api/v1/store/genres.get.ts
deleted file mode 100644
index 12735473..00000000
--- a/server/api/v1/store/genres.get.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Genre } from "~/prisma/client";
-import aclManager from "~/server/internal/acls";
-
-export default defineEventHandler(async (h3) => {
-  const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
-  if (!userId) throw createError({ statusCode: 403 });
-
-  const genres = Object.values(Genre);
-  return genres;
-});
diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts
index 81b55595..58642e20 100644
--- a/server/api/v1/store/index.get.ts
+++ b/server/api/v1/store/index.get.ts
@@ -1,5 +1,5 @@
 import { ArkErrors, type } from "arktype";
-import type { Genre, Prisma } from "~/prisma/client";
+import type { Prisma } from "~/prisma/client";
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 import { parsePlatform } from "~/server/internal/utils/parseplatform";
@@ -13,7 +13,6 @@ const StoreRead = type({
     .default("10"),
 
   tags: "string?",
-  genres: "string?",
   platform: "string?",
 
   company: "string?",
@@ -45,13 +44,6 @@ export default defineEventHandler(async (h3) => {
         },
       }
     : undefined;
-  const genreFilter = options.genres
-    ? {
-        genres: {
-          hasSome: options.genres.split(",") as Array<Genre>,
-        },
-      }
-    : undefined;
   const platformFilter = options.platform
     ? {
         versions: {
@@ -101,7 +93,6 @@ export default defineEventHandler(async (h3) => {
 
   const finalFilter: Prisma.GameWhereInput = {
     ...tagFilter,
-    ...genreFilter,
     ...platformFilter,
     ...companyFilter,
   };
diff --git a/server/api/v1/store/tags.get.ts b/server/api/v1/store/tags.get.ts
index 15f6804c..018c5ceb 100644
--- a/server/api/v1/store/tags.get.ts
+++ b/server/api/v1/store/tags.get.ts
@@ -5,6 +5,6 @@ export default defineEventHandler(async (h3) => {
   const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
   if (!userId) throw createError({ statusCode: 403 });
 
-  const tags = await prisma.tag.findMany({});
+  const tags = await prisma.gameTag.findMany({ orderBy: { name: "desc" } });
   return tags;
-})
\ No newline at end of file
+});
diff --git a/server/internal/library/index.ts b/server/internal/library/index.ts
index 070523e5..ee63758a 100644
--- a/server/internal/library/index.ts
+++ b/server/internal/library/index.ts
@@ -364,7 +364,8 @@ class LibraryManager {
         });
 
         progress(100);
-
+      },
+      async finally() {
         await libraryManager.unlockVersion(gameId, versionName);
       },
     });
diff --git a/server/internal/metadata/giantbomb.ts b/server/internal/metadata/giantbomb.ts
index 8e9cc185..e23bb3b4 100644
--- a/server/internal/metadata/giantbomb.ts
+++ b/server/internal/metadata/giantbomb.ts
@@ -228,7 +228,7 @@ export class GiantBombProvider implements MetadataProvider {
 
     const releaseDate = gameData.original_release_date
       ? DateTime.fromISO(gameData.original_release_date).toJSDate()
-      : new Date()
+      : new Date();
 
     context?.progress(85);
 
@@ -249,7 +249,7 @@ export class GiantBombProvider implements MetadataProvider {
       }
     }
 
-    const genres = (gameData.genres ?? []).map((e) => e.name);
+    const tags = (gameData.genres ?? []).map((e) => e.name);
 
     const metadata: GameMetadata = {
       id: gameData.guid,
@@ -258,8 +258,7 @@ export class GiantBombProvider implements MetadataProvider {
       description: longDescription,
       released: releaseDate,
 
-      genres,
-      tags: [],
+      tags,
 
       reviews,
 
diff --git a/server/internal/metadata/index.ts b/server/internal/metadata/index.ts
index 69c337f0..0db26304 100644
--- a/server/internal/metadata/index.ts
+++ b/server/internal/metadata/index.ts
@@ -1,4 +1,5 @@
-import { type Prisma, Genre, MetadataSource } from "~/prisma/client";
+import type { Prisma, GameTag } from "~/prisma/client";
+import { MetadataSource } from "~/prisma/client";
 import prisma from "../db/database";
 import type {
   _FetchGameMetadataParams,
@@ -124,19 +125,22 @@ export class MetadataHandler {
     );
   }
 
-  private parseTags(tags: string[]) {
-    const results: Array<Prisma.TagCreateOrConnectWithoutGamesInput> = [];
+  private async parseTags(tags: string[]) {
+    const results: Array<GameTag> = [];
 
-    tags.forEach((t) =>
-      results.push({
-        where: {
-          name: t,
-        },
-        create: {
-          name: t,
-        },
-      }),
-    );
+    for (const tag of tags) {
+      const rawResults: GameTag[] =
+        await prisma.$queryRaw`SELECT * FROM "GameTag" WHERE SIMILARITY(name, ${tag}) > 0.45;`;
+      let resultTag = rawResults.at(0);
+      if (!resultTag) {
+        resultTag = await prisma.gameTag.create({
+          data: {
+            name: tag,
+          },
+        });
+      }
+      results.push(resultTag);
+    }
 
     return results;
   }
@@ -161,20 +165,6 @@ export class MetadataHandler {
     return results;
   }
 
-  private parseGenres(genres: string[]) {
-    const results: Genre[] = [];
-    const rawGenres = Object.values(Genre);
-
-    genres.forEach((genre) => {
-      const foundGenre = rawGenres.find(
-        (checkGenre) => fuzzy(checkGenre, genre) > 0.9,
-      );
-      if (foundGenre) results.push(foundGenre);
-    });
-
-    return results;
-  }
-
   async createGame(
     result: { sourceId: string; id: string; name: string },
     libraryId: string,
@@ -278,9 +268,8 @@ export class MetadataHandler {
               connectOrCreate: metadataHandler.parseRatings(metadata.reviews),
             },
             tags: {
-              connectOrCreate: metadataHandler.parseTags(metadata.tags),
+              connect: await metadataHandler.parseTags(metadata.tags),
             },
-            genres: metadataHandler.parseGenres(metadata.genres),
 
             libraryId,
             libraryPath,
@@ -288,7 +277,9 @@ export class MetadataHandler {
         });
 
         logger.info(`Finished game import.`);
-
+        progress(100);
+      },
+      async finally() {
         await libraryManager.unlockGame(libraryId, libraryPath);
       },
     });
diff --git a/server/internal/metadata/manual.ts b/server/internal/metadata/manual.ts
index 4c73de09..a2a52ea8 100644
--- a/server/internal/metadata/manual.ts
+++ b/server/internal/metadata/manual.ts
@@ -33,7 +33,6 @@ export class ManualMetadataProvider implements MetadataProvider {
       released: new Date(),
       publishers: [],
       developers: [],
-      genres: [],
       tags: [],
       reviews: [],
 
diff --git a/server/internal/metadata/pcgamingwiki.ts b/server/internal/metadata/pcgamingwiki.ts
index 992ab543..fb9c0f66 100644
--- a/server/internal/metadata/pcgamingwiki.ts
+++ b/server/internal/metadata/pcgamingwiki.ts
@@ -451,8 +451,7 @@ export class PCGamingWikiProvider implements MetadataProvider {
       description: pageContent.introduction,
       released,
 
-      genres: this.compileTags(game),
-      tags: [],
+      tags: this.compileTags(game),
 
       reviews: pageContent.reception.filter((v) => typeof v !== "undefined"),
       publishers,
diff --git a/server/internal/metadata/types.d.ts b/server/internal/metadata/types.d.ts
index ba362792..b5286a7c 100644
--- a/server/internal/metadata/types.d.ts
+++ b/server/internal/metadata/types.d.ts
@@ -39,7 +39,6 @@ export interface GameMetadata {
   publishers: Company[];
   developers: Company[];
 
-  genres: string[];
   tags: string[];
 
   reviews: GameMetadataRating[];
diff --git a/server/internal/tasks/index.ts b/server/internal/tasks/index.ts
index 44d8ef41..bb79301c 100644
--- a/server/internal/tasks/index.ts
+++ b/server/internal/tasks/index.ts
@@ -206,6 +206,8 @@ class TaskHandler {
         };
       }
 
+      if (task.finally) await task.finally();
+
       taskEntry.endTime = new Date().toISOString();
       await updateAllClients();
 
@@ -427,6 +429,7 @@ export interface Task {
   taskGroup: TaskGroup;
   name: string;
   run: (context: TaskRunContext) => Promise<void>;
+  finally?: () => Promise<void> | void;
   acls: GlobalACL[];
 }
 

From 1642ab1c86061af4af7251a66b09631e6d42e370 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 21 Jul 2025 17:58:37 +1000
Subject: [PATCH 09/26] fix: make tags alphabetical

---
 server/api/v1/store/tags.get.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/api/v1/store/tags.get.ts b/server/api/v1/store/tags.get.ts
index 018c5ceb..07f4030f 100644
--- a/server/api/v1/store/tags.get.ts
+++ b/server/api/v1/store/tags.get.ts
@@ -5,6 +5,6 @@ export default defineEventHandler(async (h3) => {
   const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
   if (!userId) throw createError({ statusCode: 403 });
 
-  const tags = await prisma.gameTag.findMany({ orderBy: { name: "desc" } });
+  const tags = await prisma.gameTag.findMany({ orderBy: { name: "asc" } });
   return tags;
 });

From 0ab7fa3c44e3ec34c05efecb9fb0ecefe651d202 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 21 Jul 2025 18:02:11 +1000
Subject: [PATCH 10/26] refactor: move a bunch of i18n to common

---
 components/GameEditor/Metadata.vue    |   6 +-
 i18n/locales/en_pirate.json           |  10 +-
 i18n/locales/en_us.json               | 339 +++++++++++++-------------
 pages/account/devices.vue             |   2 +-
 pages/admin/library/sources/index.vue |  12 +-
 pages/admin/settings/index.vue        |   2 +-
 6 files changed, 184 insertions(+), 187 deletions(-)

diff --git a/components/GameEditor/Metadata.vue b/components/GameEditor/Metadata.vue
index 3ea937e6..86813036 100644
--- a/components/GameEditor/Metadata.vue
+++ b/components/GameEditor/Metadata.vue
@@ -23,7 +23,7 @@
             class="relative inline-flex gap-x-3 items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
             @click="() => (showEditCoreMetadata = true)"
           >
-            {{ $t("edit") }} <PencilIcon class="size-4" />
+            {{ $t("common.edit") }} <PencilIcon class="size-4" />
           </button>
         </div>
 
@@ -335,7 +335,7 @@
                 class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                 @click="() => insertImageAtCursor(image)"
               >
-                {{ $t("insert") }}
+                {{ $t("common.insert") }}
               </button>
             </div>
           </div>
@@ -424,7 +424,7 @@
           :class="['inline-flex w-full shadow-sm sm:ml-3 sm:w-auto']"
           @click="() => coreMetadataUpdate_wrapper()"
         >
-          {{ $t("save") }}
+          {{ $t("common.save") }}
         </LoadingButton>
         <button
           ref="cancelButtonRef"
diff --git a/i18n/locales/en_pirate.json b/i18n/locales/en_pirate.json
index 78577624..a16aadeb 100644
--- a/i18n/locales/en_pirate.json
+++ b/i18n/locales/en_pirate.json
@@ -73,24 +73,27 @@
   "close": "Shut yer trap!",
   "common": {
     "cannotUndo": "This deed cannot be undone, ye hear!",
+    "create": "Forge!",
     "date": "Date",
     "deleteConfirm": "Are ye sure ye want to scuttle \"{0}\", ye rogue?",
     "divider": "{'|'}",
+    "edit": "Amend",
     "friends": "Shipmates",
     "groups": "Crews",
+    "insert": "Insert",
+    "name": "Name, argh!",
     "noResults": "No plunder found!",
+    "save": "Stow it!",
     "servers": "Ships",
     "srLoading": "Loading, loading, argh...",
     "tags": "Marks",
     "today": "Today"
   },
-  "create": "Forge!",
   "delete": "Scuttle!",
   "drop": {
     "desc": "An open-source game distribution platform built for speed, flexibility and beauty, like a swift brigantine!",
     "drop": "Drop"
   },
-  "edit": "Amend",
   "editor": {
     "bold": "Bold, like a cannonball!",
     "boldPlaceholder": "bold text, matey",
@@ -214,7 +217,6 @@
   "helpUsTranslate": "Help us translate Drop {arrow}, argh!",
   "highest": "highest",
   "home": "Home Port",
-  "insert": "Insert",
   "library": {
     "addGames": "All Plunder",
     "addToLib": "Add to Yer Treasure Hoard",
@@ -327,7 +329,6 @@
     "subheader": "Sort yer plunder into collections for easy access, and get to all yer plunder, savvy!"
   },
   "lowest": "lowest",
-  "name": "Name, argh!",
   "news": {
     "article": {
       "add": "Add, ye dog!",
@@ -360,7 +361,6 @@
     "title": "Latest News from the High Seas"
   },
   "options": "Options, matey!",
-  "save": "Stow it!",
   "security": "Safety",
   "selectLanguage": "Pick yer tongue",
   "settings": "Settings",
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index 0df185cd..d5299816 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -23,10 +23,9 @@
     "title": "Account Settings"
   },
   "actions": "Actions",
+  "add": "Add",
   "adminTitle": "Admin Dashboard | Drop",
   "adminTitleTemplate": "{0} | Admin | Drop",
-  "title": "Drop",
-  "titleTemplate": "{0} | Drop",
   "auth": {
     "callback": {
       "authClient": "Authorize client?",
@@ -74,24 +73,28 @@
   "close": "Close",
   "common": {
     "cannotUndo": "This action cannot be undone.",
+    "create": "Create",
     "date": "Date",
     "deleteConfirm": "Are you sure you want to delete \"{0}\"?",
+    "divider": "{'|'}",
+    "edit": "Edit",
     "friends": "Friends",
     "groups": "Groups",
+    "insert": "Insert",
+    "name": "Name",
     "noResults": "No results",
+    "save": "Save",
+    "saved": "Saved",
     "servers": "Servers",
+    "srLoading": "Loading...",
     "tags": "Tags",
-    "today": "Today",
-    "divider": "{'|'}",
-    "srLoading": "Loading..."
+    "today": "Today"
   },
-  "create": "Create",
   "delete": "Delete",
   "drop": {
     "desc": "An open-source game distribution platform built for speed, flexibility and beauty.",
     "drop": "Drop"
   },
-  "edit": "Edit",
   "editor": {
     "bold": "Bold",
     "boldPlaceholder": "bold text",
@@ -107,17 +110,6 @@
     "listItemPlaceholder": "list item"
   },
   "errors": {
-    "auth": {
-      "method": {
-        "signinDisabled": "Sign in method not enabled"
-      },
-      "invalidUserOrPass": "Invalid username or password.",
-      "disabled": "Invalid or disabled account. Please contact the server administrator.",
-      "invalidPassState": "Invalid password state. Please contact the server administrator.",
-      "inviteIdRequired": "id required in fetching invitation",
-      "invalidInvite": "Invalid or expired invitation",
-      "usernameTaken": "Username already taken."
-    },
     "admin": {
       "user": {
         "delete": {
@@ -126,7 +118,44 @@
         }
       }
     },
+    "auth": {
+      "disabled": "Invalid or disabled account. Please contact the server administrator.",
+      "invalidInvite": "Invalid or expired invitation",
+      "invalidPassState": "Invalid password state. Please contact the server administrator.",
+      "invalidUserOrPass": "Invalid username or password.",
+      "inviteIdRequired": "id required in fetching invitation",
+      "method": {
+        "signinDisabled": "Sign in method not enabled"
+      },
+      "usernameTaken": "Username already taken."
+    },
     "backHome": "{arrow} Back to home",
+    "game": {
+      "banner": {
+        "description": "Drop failed to update the banner image: {0}",
+        "title": "Failed to update the banner image"
+      },
+      "carousel": {
+        "description": "Drop failed to update the image carousel: {0}",
+        "title": "Failed to update image carousel"
+      },
+      "cover": {
+        "description": "Drop failed to update the cover image: {0}",
+        "title": "Failed to update the cover image"
+      },
+      "deleteImage": {
+        "description": "Drop failed to delete the image: {0}",
+        "title": "Failed to delete the image"
+      },
+      "description": {
+        "description": "Drop failed to update the game description: {0}",
+        "title": "Failed to update game description"
+      },
+      "metadata": {
+        "description": "Drop failed to update the game's metadata: {0}",
+        "title": "Failed to update metadata"
+      }
+    },
     "invalidBody": "Invalid request body: {0}",
     "inviteRequired": "Invitation required to sign up.",
     "library": {
@@ -163,6 +192,10 @@
     "signIn": "Sign in {arrow}",
     "support": "Support Discord",
     "unknown": "An unknown error occurred",
+    "upload": {
+      "description": "Drop couldn't upload the file: {0}",
+      "title": "Failed to upload file"
+    },
     "version": {
       "delete": {
         "desc": "Drop encountered an error while deleting the version: {error}",
@@ -172,47 +205,17 @@
         "desc": "Drop encountered an error while updating the version: {error}",
         "title": "There an error while updating the version order"
       }
-    },
-    "upload": {
-      "title": "Failed to upload file",
-      "description": "Drop couldn't upload the file: {0}"
-    },
-    "game": {
-      "metadata": {
-        "title": "Failed to update metadata",
-        "description": "Drop failed to update the game's metadata: {0}"
-      },
-      "description": {
-        "title": "Failed to update game description",
-        "description": "Drop failed to update the game description: {0}"
-      },
-      "banner": {
-        "title": "Failed to update the banner image",
-        "description": "Drop failed to update the banner image: {0}"
-      },
-      "cover": {
-        "title": "Failed to update the cover image",
-        "description": "Drop failed to update the cover image: {0}"
-      },
-      "deleteImage": {
-        "title": "Failed to delete the image",
-        "description": "Drop failed to delete the image: {0}"
-      },
-      "carousel": {
-        "title": "Failed to update image carousel",
-        "description": "Drop failed to update the image carousel: {0}"
-      }
     }
   },
   "footer": {
     "about": "About",
     "aboutDrop": "About Drop",
+    "comparison": "Comparison",
     "docs": {
       "client": "Client Docs",
       "server": "Server Docs"
     },
     "documentation": "Documentation",
-    "comparison": "Comparison",
     "findGame": "Find a Game",
     "footer": "Footer",
     "games": "Games",
@@ -226,81 +229,40 @@
   "header": {
     "admin": {
       "admin": "Admin",
+      "settings": "Settings",
       "tasks": "Tasks",
-      "users": "Users",
-      "settings": "Settings"
+      "users": "Users"
     },
     "back": "Back",
     "openSidebar": "Open sidebar"
   },
+  "helpUsTranslate": "Help us translate Drop {arrow}",
   "highest": "highest",
   "home": "Home",
-  "users": {
-    "admin": {
-      "description": "Manage the users on your Drop instance, and configure your authentication methods.",
-      "authLink": "Authentication {arrow}",
-      "displayNameHeader": "Display Name",
-      "usernameHeader": "Username",
-      "emailHeader": "Email",
-      "adminHeader": "Admin?",
-      "authoptionsHeader": "Auth Options",
-      "srEditLabel": "Edit",
-      "adminUserLabel": "Admin user",
-      "normalUserLabel": "Normal user",
-
-      "delete": "Delete",
-      "deleteUser": "Delete user {0}",
-
-      "authentication": {
-        "title": "Authentication",
-        "description": "Drop supports a variety of \"authentication mechanisms\". As you enable or disable them, they are shown on the sign in screen for users to select from. Click the dot menu to configure the authentication mechanism.",
-        "enabledKey": "Enabled?",
-        "enabled": "Enabled",
-        "disabled": "Disabled",
-        "srOpenOptions": "Open options",
-        "configure": "Configure",
-        "simple": "Simple (username/password)",
-        "oidc": "OpenID Connect"
-      },
-      "simple": {
-        "title": "Simple authentication",
-        "description": "Simple authentication uses a system of 'invitations' to create users. You can create an invitation, and optionally specify a username or email for the user, and then it will generate a magic URL that can be used to create an account.",
-        "invitationTitle": "invitations",
-        "createInvitation": "Create invitation",
-        "noUsernameEnforced": "No username enforced.",
-        "noEmailEnforced": "No email enforced.",
-        "adminInvitation": "Admin invitation",
-        "userInvitation": "User invitation",
-        "expires": "Expires: {expiry}",
-        "neverExpires": "Never expires.",
-        "noInvitations": "No invitations.",
-        "inviteTitle": "Invite user to Drop",
-        "inviteDescription": "Drop will generate a URL that you can send to the person you want to invite. You can optionally specify a username or email for them to use.",
-        "inviteUsernameLabel": "Username (optional)",
-        "inviteUsernameFormat": "Must be 5 or more characters",
-        "inviteUsernamePlaceholder": "myUsername",
-        "inviteEmailLabel": "Email address (optional)",
-        "inviteEmailDescription": "Must be in the format user{'@'}example.com",
-        "inviteEmailPlaceholder": "me{'@'}example.com",
-        "inviteAdminSwitchLabel": "Admin invitation",
-        "inviteAdminSwitchDescription": "Create this user as an administrator",
-        "inviteExpiryLabel": "Expires",
-        "inviteButton": "Invite",
-        "invite3Days": "3 days",
-        "inviteWeek": "1 week",
-        "inviteMonth": "1 month",
-        "invite6Months": "6 months",
-        "inviteYear": "1 year",
-        "inviteNever": "Never"
-      }
-    }
-  },
   "library": {
     "addGames": "All Games",
     "addToLib": "Add to Library",
     "admin": {
       "detectedGame": "Drop has detected you have new games to import.",
       "detectedVersion": "Drop has detected you have new verions of this game to import.",
+      "game": {
+        "addCarouselNoImages": "No images to add.",
+        "addDescriptionNoImages": "No images to add.",
+        "addImageCarousel": "Add from image library",
+        "currentBanner": "banner",
+        "currentCover": "cover",
+        "deleteImage": "Delete image",
+        "editGameDescription": "Game Description",
+        "editGameName": "Game Name",
+        "imageCarousel": "Image Carousel",
+        "imageCarouselDescription": "Customise what images and what order are shown on the store page.",
+        "imageCarouselEmpty": "No images added to the carousel yet.",
+        "imageLibrary": "Image library",
+        "imageLibraryDescription": "Please note all images uploaded are accessible to all users through browser dev-tools.",
+        "removeImageCarousel": "Remove image",
+        "setBanner": "Set as banner",
+        "setCover": "Set as cover"
+      },
       "gameLibrary": "Game Library",
       "import": {
         "import": "Import",
@@ -343,38 +305,15 @@
       "openEditor": "Open in Editor {arrow}",
       "openStore": "Open in Store",
       "shortDesc": "Short Description",
-      "version": {
-        "noVersions": "You have no versions of this game available.",
-        "noVersionsAdded": "no versions added",
-        "delta": "Upgrade mode"
-      },
-      "game": {
-        "imageCarousel": "Image Carousel",
-        "imageCarouselDescription": "Customise what images and what order are shown on the store page.",
-        "addImageCarousel": "Add from image library",
-        "imageCarouselEmpty": "No images added to the carousel yet.",
-        "removeImageCarousel": "Remove image",
-        "addCarouselNoImages": "No images to add.",
-        "imageLibrary": "Image library",
-        "imageLibraryDescription": "Please note all images uploaded are accessible to all users through browser dev-tools.",
-        "setBanner": "Set as banner",
-        "setCover": "Set as cover",
-        "deleteImage": "Delete image",
-        "currentBanner": "banner",
-        "currentCover": "cover",
-        "addDescriptionNoImages": "No images to add.",
-        "editGameName": "Game Name",
-        "editGameDescription": "Game Description"
-      },
       "sources": {
         "create": "Create source",
         "createDesc": "Drop will use this source to access your game library, and make them available.",
         "desc": "Configure your library sources, where Drop will look for new games and versions to import.",
         "fsDesc": "Imports games from a path on disk. Requires version-based folder structure, and supports archived games.",
+        "fsFlatDesc": "Imports games from a path on disk, but without a separate version subfolder. Useful when migrating an existing library to Drop.",
         "fsPath": "Path",
         "fsPathDesc": "An absolute path to your game library.",
         "fsPathPlaceholder": "/mnt/games",
-        "fsFlatDesc": "Imports games from a path on disk, but without a separate version subfolder. Useful when migrating an existing library to Drop.",
         "link": "Sources {arrow}",
         "nameDesc": "The name of your source, for reference.",
         "namePlaceholder": "My New Source",
@@ -384,6 +323,11 @@
       },
       "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",
+      "version": {
+        "delta": "Upgrade mode",
+        "noVersions": "You have no versions of this game available.",
+        "noVersionsAdded": "no versions added"
+      },
       "versionPriority": "Version priority"
     },
     "back": "Back to Library",
@@ -407,29 +351,7 @@
     "search": "Search library...",
     "subheader": "Organize your games into collections for easy access, and access all your games."
   },
-  "tasks": {
-    "admin": {
-      "scheduled": {
-        "cleanupInvitationsName": "Clean up invitations",
-        "cleanupInvitationsDescription": "Cleans up expired invitations from the database to save space.",
-        "cleanupObjectsName": "Clean up objects",
-        "cleanupObjectsDescription": "Detects and deletes unreferenced and unused objects to save space.",
-        "cleanupSessionsName": "Clean up sessions.",
-        "cleanupSessionsDescription": "Cleans up expired sessions to save space and ensure security.",
-        "checkUpdateName": "Check update.",
-        "checkUpdateDescription": "Check if Drop has an update."
-      },
-      "runningTasksTitle": "Running tasks",
-      "noTasksRunning": "No tasks currently running",
-      "completedTasksTitle": "Completed tasks",
-      "dailyScheduledTitle": "Daily scheduled tasks",
-      "weeklyScheduledTitle": "Weekly scheduled tasks",
-      "viewTask": "View {arrow}",
-      "back": "{arrow} Back to Tasks"
-    }
-  },
   "lowest": "lowest",
-  "name": "Name",
   "news": {
     "article": {
       "add": "Add",
@@ -462,23 +384,19 @@
     "title": "Latest News"
   },
   "options": "Options",
-  "save": "Save",
-  "saved": "Saved",
-  "add": "Add",
-  "insert": "Insert",
   "security": "Security",
+  "selectLanguage": "Select language",
   "settings": {
     "admin": {
-      "title": "Settings",
       "description": "Configure Drop settings",
-
       "store": {
-        "title": "Store",
-        "showGamePanelTextDecoration": "Show title and description on game tiles (default: on)",
-        "dropGameNamePlaceholder": "Example Game",
+        "dropGameAltPlaceholder": "Example Game icon",
         "dropGameDescriptionPlaceholder": "This is an example game. It will be replaced if you import a game.",
-        "dropGameAltPlaceholder": "Example Game icon"
-      }
+        "dropGameNamePlaceholder": "Example Game",
+        "showGamePanelTextDecoration": "Show title and description on game tiles (default: on)",
+        "title": "Store"
+      },
+      "title": "Settings"
     }
   },
   "store": {
@@ -501,6 +419,30 @@
     "title": "Store",
     "view": "View in Store"
   },
+  "tasks": {
+    "admin": {
+      "back": "{arrow} Back to Tasks",
+      "completedTasksTitle": "Completed tasks",
+      "dailyScheduledTitle": "Daily scheduled tasks",
+      "noTasksRunning": "No tasks currently running",
+      "runningTasksTitle": "Running tasks",
+      "scheduled": {
+        "checkUpdateDescription": "Check if Drop has an update.",
+        "checkUpdateName": "Check update.",
+        "cleanupInvitationsDescription": "Cleans up expired invitations from the database to save space.",
+        "cleanupInvitationsName": "Clean up invitations",
+        "cleanupObjectsDescription": "Detects and deletes unreferenced and unused objects to save space.",
+        "cleanupObjectsName": "Clean up objects",
+        "cleanupSessionsDescription": "Cleans up expired sessions to save space and ensure security.",
+        "cleanupSessionsName": "Clean up sessions."
+      },
+      "viewTask": "View {arrow}",
+      "weeklyScheduledTitle": "Weekly scheduled tasks"
+    }
+  },
+  "title": "Drop",
+  "titleTemplate": "{0} | Drop",
+  "todo": "Todo",
   "type": "Type",
   "upload": "Upload",
   "uploadFile": "Upload file",
@@ -516,8 +458,63 @@
       "settings": "Account settings"
     }
   },
-  "todo": "Todo",
-  "selectLanguage": "Select language",
-  "helpUsTranslate": "Help us translate Drop {arrow}",
+  "users": {
+    "admin": {
+      "adminHeader": "Admin?",
+      "adminUserLabel": "Admin user",
+      "authLink": "Authentication {arrow}",
+      "authentication": {
+        "configure": "Configure",
+        "description": "Drop supports a variety of \"authentication mechanisms\". As you enable or disable them, they are shown on the sign in screen for users to select from. Click the dot menu to configure the authentication mechanism.",
+        "disabled": "Disabled",
+        "enabled": "Enabled",
+        "enabledKey": "Enabled?",
+        "oidc": "OpenID Connect",
+        "simple": "Simple (username/password)",
+        "srOpenOptions": "Open options",
+        "title": "Authentication"
+      },
+      "authoptionsHeader": "Auth Options",
+      "delete": "Delete",
+      "deleteUser": "Delete user {0}",
+      "description": "Manage the users on your Drop instance, and configure your authentication methods.",
+      "displayNameHeader": "Display Name",
+      "emailHeader": "Email",
+      "normalUserLabel": "Normal user",
+      "simple": {
+        "adminInvitation": "Admin invitation",
+        "createInvitation": "Create invitation",
+        "description": "Simple authentication uses a system of 'invitations' to create users. You can create an invitation, and optionally specify a username or email for the user, and then it will generate a magic URL that can be used to create an account.",
+        "expires": "Expires: {expiry}",
+        "invitationTitle": "invitations",
+        "invite3Days": "3 days",
+        "invite6Months": "6 months",
+        "inviteAdminSwitchDescription": "Create this user as an administrator",
+        "inviteAdminSwitchLabel": "Admin invitation",
+        "inviteButton": "Invite",
+        "inviteDescription": "Drop will generate a URL that you can send to the person you want to invite. You can optionally specify a username or email for them to use.",
+        "inviteEmailDescription": "Must be in the format user{'@'}example.com",
+        "inviteEmailLabel": "Email address (optional)",
+        "inviteEmailPlaceholder": "me{'@'}example.com",
+        "inviteExpiryLabel": "Expires",
+        "inviteMonth": "1 month",
+        "inviteNever": "Never",
+        "inviteTitle": "Invite user to Drop",
+        "inviteUsernameFormat": "Must be 5 or more characters",
+        "inviteUsernameLabel": "Username (optional)",
+        "inviteUsernamePlaceholder": "myUsername",
+        "inviteWeek": "1 week",
+        "inviteYear": "1 year",
+        "neverExpires": "Never expires.",
+        "noEmailEnforced": "No email enforced.",
+        "noInvitations": "No invitations.",
+        "noUsernameEnforced": "No username enforced.",
+        "title": "Simple authentication",
+        "userInvitation": "User invitation"
+      },
+      "srEditLabel": "Edit",
+      "usernameHeader": "Username"
+    }
+  },
   "welcome": "American, Welcome!"
 }
diff --git a/pages/account/devices.vue b/pages/account/devices.vue
index 62d9f278..9d592d14 100644
--- a/pages/account/devices.vue
+++ b/pages/account/devices.vue
@@ -24,7 +24,7 @@
                 scope="col"
                 class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
               >
-                {{ $t("name") }}
+                {{ $t("common.name") }}
               </th>
               <th
                 scope="col"
diff --git a/pages/admin/library/sources/index.vue b/pages/admin/library/sources/index.vue
index bcadc6fc..c8d77e91 100644
--- a/pages/admin/library/sources/index.vue
+++ b/pages/admin/library/sources/index.vue
@@ -14,7 +14,7 @@
           class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
           @click="() => (actionSourceOpen = true)"
         >
-          {{ $t("create") }}
+          {{ $t("common.create") }}
         </button>
       </div>
     </div>
@@ -28,7 +28,7 @@
                   scope="col"
                   class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
                 >
-                  {{ $t("name") }}
+                  {{ $t("common.name") }}
                 </th>
                 <th
                   scope="col"
@@ -49,7 +49,7 @@
                   {{ $t("options") }}
                 </th>
                 <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
-                  <span class="sr-only">{{ $t("edit") }}</span>
+                  <span class="sr-only">{{ $t("common.edit") }}</span>
                 </th>
               </tr>
             </thead>
@@ -84,7 +84,7 @@
                     class="text-blue-500 hover:text-blue-400"
                     @click="() => edit(sourceIdx)"
                   >
-                    {{ $t("edit") }}
+                    {{ $t("common.edit") }}
                     <span class="sr-only">
                       {{ $t("chars.srComma", [source.name]) }}
                     </span>
@@ -125,7 +125,7 @@
             <label
               for="name"
               class="block text-sm font-medium leading-6 text-zinc-100"
-              >{{ $t("name") }}</label
+              >{{ $t("common.name") }}</label
             >
             <p class="text-zinc-400 block text-xs font-medium leading-6">
               {{ $t("library.admin.sources.nameDesc") }}
@@ -228,7 +228,7 @@
           class="w-full sm:w-fit"
           @click="() => performActionSource_wrapper()"
         >
-          {{ createMode ? $t("create") : $t("save") }}
+          {{ createMode ? $t("common.create") : $t("common.save") }}
         </LoadingButton>
         <button
           ref="cancelButtonRef"
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index caf4609b..dfadcd78 100644
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -59,7 +59,7 @@
         :loading="saving"
         :disabled="!allowSave"
       >
-        {{ allowSave ? $t("save") : $t("saved") }}
+        {{ allowSave ? $t("common.save") : $t("common.saved") }}
       </LoadingButton>
     </form>
   </div>

From 93d62209dca354071d6cf2dc37d553a988ee5c8a Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 21 Jul 2025 18:14:12 +1000
Subject: [PATCH 11/26] feat: add localizations for everything

---
 components/GameEditor/Metadata.vue | 16 ++++++++--------
 components/GameEditor/Version.vue  |  4 ++--
 components/MultiItemSelector.vue   |  4 ++--
 components/StoreView.vue           | 22 +++++++++++++---------
 composables/request.ts             |  2 +-
 i18n/locales/en_pirate.json        |  2 +-
 i18n/locales/en_us.json            | 22 +++++++++++++++++++---
 pages/library/game/[id]/index.vue  |  2 +-
 pages/store/[id]/index.vue         | 21 ++++++++++++++++++---
 pages/store/c/[id]/index.vue       |  7 +++++--
 10 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/components/GameEditor/Metadata.vue b/components/GameEditor/Metadata.vue
index 86813036..1715e565 100644
--- a/components/GameEditor/Metadata.vue
+++ b/components/GameEditor/Metadata.vue
@@ -314,7 +314,7 @@
           class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showAddCarouselModal = false"
         >
-          {{ $t("close") }}
+          {{ $t("common.close") }}
         </button>
       </template>
     </ModalTemplate>
@@ -491,7 +491,7 @@ function coreMetadataUploadFiles(e: InputEvent) {
       {
         title: t("errors.upload.title"),
         description: t("errors.upload.description", [t("errors.unknown")]),
-        buttonText: t("close"),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -530,7 +530,7 @@ function coreMetadataUpdate_wrapper() {
           description: t("errors.game.metadata.description", [
             (e as H3Error)?.statusMessage ?? t("errors.unknown"),
           ]),
-          buttonText: t("close"),
+          buttonText: t("common.close"),
         },
         (e, c) => c(),
       );
@@ -589,7 +589,7 @@ watch(descriptionHTML, (_v) => {
           description: t("errors.game.description.description", [
             (e as H3Error)?.statusMessage ?? t("errors.unknown"),
           ]),
-          buttonText: t("close"),
+          buttonText: t("common.close"),
         },
         (e, c) => c(),
       );
@@ -633,7 +633,7 @@ async function updateBannerImage(id: string) {
         description: t("errors.game.banner.description", [
           (e as H3Error)?.statusMessage ?? t("errors.unknown"),
         ]),
-        buttonText: t("close"),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -659,7 +659,7 @@ async function updateCoverImage(id: string) {
         description: t("errors.game.cover.description", [
           (e as H3Error)?.statusMessage ?? t("errors.unknown"),
         ]),
-        buttonText: t("close"),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -688,7 +688,7 @@ async function deleteImage(id: string) {
         description: t("errors.game.deleteImage.description", [
           (e as H3Error)?.statusMessage ?? t("errors.unknown"),
         ]),
-        buttonText: t("close"),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -730,7 +730,7 @@ async function updateImageCarousel() {
         description: t("errors.game.carousel.description", [
           (e as H3Error)?.statusMessage ?? t("errors.unknown"),
         ]),
-        buttonText: t("close"),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
diff --git a/components/GameEditor/Version.vue b/components/GameEditor/Version.vue
index 98289147..aae4171a 100644
--- a/components/GameEditor/Version.vue
+++ b/components/GameEditor/Version.vue
@@ -140,7 +140,7 @@ async function updateVersionOrder() {
         description: t("errors.version.order.desc", {
           error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
         }),
-        buttonText: t("close"),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
@@ -168,7 +168,7 @@ async function deleteVersion(versionName: string) {
         description: t("errors.version.delete.desc", {
           error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
         }),
-        buttonText: t("close"),
+        buttonText: t("common.close"),
       },
       (e, c) => c(),
     );
diff --git a/components/MultiItemSelector.vue b/components/MultiItemSelector.vue
index da58fdaf..c6bab47c 100644
--- a/components/MultiItemSelector.vue
+++ b/components/MultiItemSelector.vue
@@ -12,7 +12,7 @@
           class="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-600/20"
           @click="() => remove(item.param)"
         >
-          <span class="sr-only">Remove</span>
+          <span class="sr-only">{{ $t("common.remove") }}</span>
           <svg
             viewBox="0 0 14 14"
             class="size-3.5 stroke-blue-500 group-hover:stroke-blue-400"
@@ -23,7 +23,7 @@
         </button>
       </span>
       <span v-if="enabledItems.length == 0" class="font-display uppercase text-xs font-bold text-zinc-700">
-        No items selected.
+        {{ $t("common.noSelected") }}
       </span>
     </div>
     <Combobox as="div" @update:model-value="add">
diff --git a/components/StoreView.vue b/components/StoreView.vue
index 2dea8bb1..7b1e56c2 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -33,14 +33,16 @@
                 class="relative ml-auto flex size-full max-w-sm flex-col overflow-y-auto bg-zinc-900 pt-4 pb-6 shadow-xl"
               >
                 <div class="flex items-center justify-between px-4">
-                  <h2 class="text-lg font-medium text-zinc-100">Filters</h2>
+                  <h2 class="text-lg font-medium text-zinc-100">
+                    {{ $t("store.view.srFilters") }}
+                  </h2>
                   <button
                     type="button"
                     class="relative -mr-2 flex size-10 items-center justify-center rounded-md bg-zinc-900 p-2 text-zinc-500 hover:bg-zinc-800 focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
                     @click="mobileFiltersOpen = false"
                   >
                     <span class="absolute -inset-0.5" />
-                    <span class="sr-only">Close menu</span>
+                    <span class="sr-only">{{ $t("common.close") }}</span>
                     <XMarkIcon class="size-6" aria-hidden="true" />
                   </button>
                 </div>
@@ -141,7 +143,7 @@
                 <MenuButton
                   class="group inline-flex justify-center text-sm font-medium text-zinc-400 hover:text-zinc-100"
                 >
-                  Sort
+                  {{ $t("store.view.sort") }}
                   <ChevronDownIcon
                     class="-mr-1 ml-1 size-5 shrink-0 text-gray-400 group-hover:text-zinc-100"
                     aria-hidden="true"
@@ -189,7 +191,7 @@
               type="button"
               class="-m-2 ml-5 p-2 text-zinc-500 hover:text-zinc-400 sm:ml-7"
             >
-              <span class="sr-only">View grid</span>
+              <span class="sr-only">{{ $t("store.view.srViewGrid") }}</span>
               <Squares2X2Icon class="size-5" aria-hidden="true" />
             </button>
             <button
@@ -202,14 +204,16 @@
               ]"
               @click="mobileFiltersOpen = true"
             >
-              <span class="sr-only">Filters</span>
+              <span class="sr-only"> {{ $t("store.view.srFilters") }} </span>
               <FunnelIcon class="size-5" aria-hidden="true" />
             </button>
           </div>
         </div>
 
         <section aria-labelledby="games-heading" class="pt-6 pb-24">
-          <h2 id="games-heading" class="sr-only">Games</h2>
+          <h2 id="games-heading" class="sr-only">
+            {{ $t("store.view.srGames") }}
+          </h2>
 
           <div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-5">
             <!-- Filters -->
@@ -319,9 +323,9 @@
               </div>
             </div>
             <div v-else class="flex lg:col-span-4 items-start justify-center">
-              <span class="uppercase text-zinc-700 font-display font-bold"
-                >No results</span
-              >
+              <span class="uppercase text-zinc-700 font-display font-bold">{{
+                $t("common.noResults")
+              }}</span>
             </div>
           </div>
         </section>
diff --git a/composables/request.ts b/composables/request.ts
index a7daec4a..60865438 100644
--- a/composables/request.ts
+++ b/composables/request.ts
@@ -62,7 +62,7 @@ export const $dropFetch: DropFetch = async (request, opts) => {
           title: opts.failTitle,
           description:
             (e as FetchError)?.statusMessage ?? (e as string).toString(),
-          buttonText: $t("close"),
+          buttonText: $t("common.close"),
         },
         (_, c) => c(),
       );
diff --git a/i18n/locales/en_pirate.json b/i18n/locales/en_pirate.json
index a16aadeb..64187fde 100644
--- a/i18n/locales/en_pirate.json
+++ b/i18n/locales/en_pirate.json
@@ -70,9 +70,9 @@
     "quoted": "\"\"",
     "srComma": ", {0}"
   },
-  "close": "Shut yer trap!",
   "common": {
     "cannotUndo": "This deed cannot be undone, ye hear!",
+    "close": "Shut yer trap!",
     "create": "Forge!",
     "date": "Date",
     "deleteConfirm": "Are ye sure ye want to scuttle \"{0}\", ye rogue?",
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index d5299816..72616697 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -70,9 +70,9 @@
     "quoted": "\"\"",
     "srComma": ", {0}"
   },
-  "close": "Close",
   "common": {
     "cannotUndo": "This action cannot be undone.",
+    "close": "Close",
     "create": "Create",
     "date": "Date",
     "deleteConfirm": "Are you sure you want to delete \"{0}\"?",
@@ -83,12 +83,14 @@
     "insert": "Insert",
     "name": "Name",
     "noResults": "No results",
+    "noSelected": "No items selected.",
     "save": "Save",
     "saved": "Saved",
     "servers": "Servers",
     "srLoading": "Loading...",
     "tags": "Tags",
-    "today": "Today"
+    "today": "Today",
+    "remove": "Remove"
   },
   "delete": "Delete",
   "drop": {
@@ -417,7 +419,21 @@
     "released": "Released",
     "reviews": "({0} Reviews)",
     "title": "Store",
-    "view": "View in Store"
+    "tags": "Tags",
+    "noTags": "No tags",
+    "developers": "Developers | Developer | Developers",
+    "publishers": "Publishers | Publisher | Publishers",
+    "noDevelopers": "No developers",
+    "noPublishers": "No publishers.",
+    "view": {
+      "sort": "Sort",
+      "srFilters": "Filters",
+      "srGames": "Games",
+      "srViewGrid": "View grid"
+    },
+    "viewInStore": "View in Store",
+    "about": "About",
+    "website": "Website"
   },
   "tasks": {
     "admin": {
diff --git a/pages/library/game/[id]/index.vue b/pages/library/game/[id]/index.vue
index efebeeeb..7c501c50 100644
--- a/pages/library/game/[id]/index.vue
+++ b/pages/library/game/[id]/index.vue
@@ -57,7 +57,7 @@
             :to="`/store/${game.id}`"
             class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           >
-            {{ $t("store.view") }}
+            {{ $t("store.viewInStore") }}
             <ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
           </NuxtLink>
         </div>
diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index 3eae2eb6..4bcd942d 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -112,7 +112,7 @@
                 <td
                   class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                 >
-                  Tags(s)
+                  {{ $t("store.tags") }}
                 </td>
                 <td class="flex flex-col gap-1 px-3 py-4 text-sm text-zinc-400">
                   <NuxtLink
@@ -123,13 +123,18 @@
                   >
                     {{ tag.name }}
                   </NuxtLink>
+                  <span
+                    v-if="game.tags.length == 0"
+                    class="text-zinc-700 font-bold uppercase font-display"
+                    >{{ $t("store.noTags") }}</span
+                  >
                 </td>
               </tr>
               <tr>
                 <td
                   class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                 >
-                  Developer(s)
+                  {{ $t("store.developers", game.developers.length) }}
                 </td>
                 <td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
                   <NuxtLink
@@ -140,13 +145,18 @@
                   >
                     {{ developer.mName }}
                   </NuxtLink>
+                  <span
+                    v-if="game.developers.length == 0"
+                    class="text-zinc-700 font-bold uppercase font-display"
+                    >{{ $t("store.noDevelopers") }}</span
+                  >
                 </td>
               </tr>
               <tr>
                 <td
                   class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                 >
-                  Publishers(s)
+                  {{ $t("store.publishers", game.publishers.length) }}
                 </td>
                 <td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
                   <NuxtLink
@@ -157,6 +167,11 @@
                   >
                     {{ publisher.mName }}
                   </NuxtLink>
+                  <span
+                    v-if="game.publishers.length == 0"
+                    class="text-zinc-700 font-bold uppercase font-display"
+                    >{{ $t("store.noPublishers") }}</span
+                  >
                 </td>
               </tr>
             </tbody>
diff --git a/pages/store/c/[id]/index.vue b/pages/store/c/[id]/index.vue
index d668b1a9..72519f40 100644
--- a/pages/store/c/[id]/index.vue
+++ b/pages/store/c/[id]/index.vue
@@ -26,17 +26,20 @@
       />
     </div>
     <div class="px-4 sm:px-12 py-4 sm:py-10">
-      <h1 class="text-xl text-zinc-200 font-semibold">About</h1>
+      <h1 class="text-xl text-zinc-200 font-semibold">
+        {{ $t("store.about") }}
+      </h1>
       <div
         class="mt-4 mb-4 prose prose-invert prose-blue max-w-none max-h-[40vh] overflow-y-auto ring ring-zinc-700 p-4 rounded-lg"
         v-html="description"
       />
       <NuxtLink
+      v-if="company.mWebsite"
         :href="company.mWebsite"
         :external="true"
         target="_blank"
         class="rounded-md bg-white/10 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
-        >Website</NuxtLink
+        >{{ $t("store.website") }}</NuxtLink
       >
     </div>
     <StoreView

From 0cc91f2d8e84a717549dda330d6351400416e2e8 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 22 Jul 2025 20:31:25 +1000
Subject: [PATCH 12/26] fix: title description on panel

---
 components/GameCarousel.vue                     | 2 +-
 components/GamePanel.vue                        | 3 ++-
 components/StoreView.vue                        | 3 +++
 pages/admin/settings/index.vue                  | 2 +-
 server/api/v1/{admin => }/settings/index.get.ts | 0
 5 files changed, 7 insertions(+), 3 deletions(-)
 rename server/api/v1/{admin => }/settings/index.get.ts (100%)

diff --git a/components/GameCarousel.vue b/components/GameCarousel.vue
index 0f4787c6..8a744eec 100644
--- a/components/GameCarousel.vue
+++ b/components/GameCarousel.vue
@@ -51,7 +51,7 @@ const props = defineProps<{
 }>();
 
 const { showGamePanelTextDecoration } = await $dropFetch(
-  `/api/v1/admin/settings`,
+  `/api/v1/settings`,
 );
 
 const currentComponent = ref<HTMLDivElement>();
diff --git a/components/GamePanel.vue b/components/GamePanel.vue
index 97b4651c..4217f588 100644
--- a/components/GamePanel.vue
+++ b/components/GamePanel.vue
@@ -20,7 +20,8 @@
         :alt="imageProps.alt"
       />
       <div
-        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent"
+        v-if="showTitleDescription"
+        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/0 to-transparent"
       />
     </div>
 
diff --git a/components/StoreView.vue b/components/StoreView.vue
index 7b1e56c2..cdfc3de9 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -299,6 +299,7 @@
                 :key="game.id"
                 :game="game"
                 :href="`/store/${game.id}`"
+                :show-title-description="showGamePanelTextDecoration"
               />
               <div
                 v-if="loading"
@@ -360,6 +361,8 @@ import type { SerializeObject } from "nitropack";
 import type { Game, GameTag } from "~/prisma/client";
 import MultiItemSelector from "./MultiItemSelector.vue";
 
+const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
+
 const mobileFiltersOpen = ref(false);
 
 const props = defineProps<{
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index dfadcd78..3a80db97 100644
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -78,7 +78,7 @@ useHead({
   title: t("settings.admin.title"),
 });
 
-const settings = await $dropFetch("/api/v1/admin/settings");
+const settings = await $dropFetch("/api/v1/settings");
 const { game } = await $dropFetch("/api/v1/admin/settings/dummy-data");
 
 const allowSave = ref(false);
diff --git a/server/api/v1/admin/settings/index.get.ts b/server/api/v1/settings/index.get.ts
similarity index 100%
rename from server/api/v1/admin/settings/index.get.ts
rename to server/api/v1/settings/index.get.ts

From 3ac2ab4429b35a9b858126b71a447a9b21728974 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 22 Jul 2025 20:33:17 +1000
Subject: [PATCH 13/26] fix: feature carousel text

---
 i18n/locales/en_us.json | 23 ++++++++++++-----------
 pages/store/index.vue   |  2 +-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index 72616697..f92c2f0e 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -84,13 +84,13 @@
     "name": "Name",
     "noResults": "No results",
     "noSelected": "No items selected.",
+    "remove": "Remove",
     "save": "Save",
     "saved": "Saved",
     "servers": "Servers",
     "srLoading": "Loading...",
     "tags": "Tags",
-    "today": "Today",
-    "remove": "Remove"
+    "today": "Today"
   },
   "delete": "Delete",
   "drop": {
@@ -402,14 +402,21 @@
     }
   },
   "store": {
+    "about": "About",
     "commingSoon": "coming soon",
+    "developers": "Developers | Developer | Developers",
     "exploreMore": "Explore more {arrow}",
+    "featured": "Featured",
     "images": "Game Images",
     "lookAt": "Check it out",
+    "noDevelopers": "No developers",
     "noGame": "no game",
     "noImages": "No images",
+    "noPublishers": "No publishers.",
+    "noTags": "No tags",
     "openAdminDashboard": "Open in Admin Dashboard",
     "platform": "Platform | Platform | Platforms",
+    "publishers": "Publishers | Publisher | Publishers",
     "rating": "Rating",
     "readLess": "Click to read less",
     "readMore": "Click to read more",
@@ -418,13 +425,8 @@
     "recentlyUpdated": "Recently Updated",
     "released": "Released",
     "reviews": "({0} Reviews)",
-    "title": "Store",
     "tags": "Tags",
-    "noTags": "No tags",
-    "developers": "Developers | Developer | Developers",
-    "publishers": "Publishers | Publisher | Publishers",
-    "noDevelopers": "No developers",
-    "noPublishers": "No publishers.",
+    "title": "Store",
     "view": {
       "sort": "Sort",
       "srFilters": "Filters",
@@ -432,7 +434,6 @@
       "srViewGrid": "View grid"
     },
     "viewInStore": "View in Store",
-    "about": "About",
     "website": "Website"
   },
   "tasks": {
@@ -478,7 +479,6 @@
     "admin": {
       "adminHeader": "Admin?",
       "adminUserLabel": "Admin user",
-      "authLink": "Authentication {arrow}",
       "authentication": {
         "configure": "Configure",
         "description": "Drop supports a variety of \"authentication mechanisms\". As you enable or disable them, they are shown on the sign in screen for users to select from. Click the dot menu to configure the authentication mechanism.",
@@ -490,6 +490,7 @@
         "srOpenOptions": "Open options",
         "title": "Authentication"
       },
+      "authLink": "Authentication {arrow}",
       "authoptionsHeader": "Auth Options",
       "delete": "Delete",
       "deleteUser": "Delete user {0}",
@@ -533,4 +534,4 @@
     }
   },
   "welcome": "American, Welcome!"
-}
+}
\ No newline at end of file
diff --git a/pages/store/index.vue b/pages/store/index.vue
index 53a21aa5..7516b09a 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -24,7 +24,7 @@
           >
             <div class="relative text-center">
               <h3 class="text-base/7 font-semibold text-blue-300">
-                {{ $t("store.recentlyAdded") }}
+                {{ $t("store.featured") }}
               </h3>
               <h2
                 class="text-3xl font-bold tracking-tight text-white sm:text-5xl"

From c734e568affaabfc6772a4195fdf7ec0983bb1af Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 22 Jul 2025 20:57:54 +1000
Subject: [PATCH 14/26] fix: i18n footer strings

---
 components/UserFooter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/UserFooter.vue b/components/UserFooter.vue
index b62cb77e..3060021d 100644
--- a/components/UserFooter.vue
+++ b/components/UserFooter.vue
@@ -116,7 +116,7 @@ const { t } = useI18n();
 
 const versionInfo = await $dropFetch("/api/v1");
 
-const navigation = {
+const navigation = computed(() => ({
   games: [
     { name: t("store.recentlyAdded"), href: "#" },
     { name: t("store.recentlyReleased"), href: "#" },
@@ -156,5 +156,5 @@ const navigation = {
       icon: IconsDiscordLogo,
     },
   ],
-};
+}));
 </script>

From 2ebce1a3e9c9965f8900dfe8f27a799f0a3e902e Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Fri, 25 Jul 2025 19:01:39 +1000
Subject: [PATCH 15/26] feat: add tag page

---
 components/MultiItemSelector.vue          |  2 +-
 components/StoreView.vue                  |  8 +++
 i18n/locales/en_us.json                   |  3 +-
 layouts/admin.vue                         |  7 +++
 pages/admin/library/index.vue             | 26 ++++++++-
 pages/admin/metadata/index.vue            |  9 +++
 pages/store/c/[id]/index.vue              | 69 ++++++++++-------------
 pages/store/t/[id]/index.vue              | 48 ++++++++++++++++
 server/api/v1/companies/[id]/index.get.ts | 18 ------
 server/api/v1/store/index.get.ts          |  3 +-
 server/api/v1/tags/[id]/index.get.ts      | 23 ++++++++
 11 files changed, 154 insertions(+), 62 deletions(-)
 create mode 100644 pages/admin/metadata/index.vue
 create mode 100644 pages/store/t/[id]/index.vue
 create mode 100644 server/api/v1/tags/[id]/index.get.ts

diff --git a/components/MultiItemSelector.vue b/components/MultiItemSelector.vue
index c6bab47c..0565af7d 100644
--- a/components/MultiItemSelector.vue
+++ b/components/MultiItemSelector.vue
@@ -43,7 +43,7 @@
 
         <ComboboxOptions
           v-if="filteredItems.length > 0 || search.length > 0"
-          class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-hidden sm:text-sm"
+          class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-hidden sm:text-sm"
         >
           <ComboboxOption
             v-for="item in filteredItems"
diff --git a/components/StoreView.vue b/components/StoreView.vue
index cdfc3de9..086e9ad9 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -377,6 +377,10 @@ const tags =
   await $dropFetch<Array<SerializeObject<GameTag>>>("/api/v1/store/tags");
 
 const sorts: Array<StoreSortOption> = [
+  {
+    name: "Default",
+    param: "default",
+  },
   {
     name: "Newest",
     param: "newest",
@@ -414,6 +418,7 @@ const optionValues = ref<{
     options.map((v) => [v.param, v.multiple ? {} : undefined]),
   ),
 );
+Object.assign(optionValues.value, props.prefilled);
 
 const filterQuery = computed(() => {
   const query = Object.entries(optionValues.value)
@@ -456,6 +461,9 @@ async function updateGames(query: string, reset: boolean) {
 watch(filterQuery, (newUrl) => {
   updateGames(newUrl, true);
 });
+watch(currentSort, (_) => {
+  updateGames(filterQuery.value, true);
+});
 
 await updateGames(filterQuery.value, true);
 </script>
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index f92c2f0e..426ffac0 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -231,6 +231,7 @@
   "header": {
     "admin": {
       "admin": "Admin",
+      "metadata": "Meta",
       "settings": "Settings",
       "tasks": "Tasks",
       "users": "Users"
@@ -458,7 +459,7 @@
     }
   },
   "title": "Drop",
-  "titleTemplate": "{0} | Drop",
+  "titleTemplate": "{0} - Drop",
   "todo": "Todo",
   "type": "Type",
   "upload": "Upload",
diff --git a/layouts/admin.vue b/layouts/admin.vue
index aaf5dba7..24cef9b6 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -164,6 +164,7 @@ import {
   Cog6ToothIcon,
   UserGroupIcon,
   RectangleStackIcon,
+  DocumentIcon,
 } from "@heroicons/vue/24/outline";
 import type { NavigationItem } from "~/composables/types";
 import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
@@ -180,6 +181,12 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
     prefix: "/admin/library",
     icon: ServerStackIcon,
   },
+  {
+    label: $t("header.admin.metadata"),
+    route: "/admin/metadata",
+    prefix: "/admin/metadata",
+    icon: DocumentIcon,
+  },
   {
     label: $t("header.admin.users"),
     route: "/admin/users",
diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index 85f382f5..8e9e15c4 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -101,7 +101,28 @@
                 ]"
                 @click="() => featureGame(game.id)"
               >
-                <StarIcon class="size-3" aria-hidden="true" />
+                <svg
+                  v-if="gameFeatureLoading[game.id]"
+                  aria-hidden="true"
+                  :class="[
+                    game.featured ? ' fill-zinc-900' : 'fill-zinc-100',
+                    'size-3 text-transparent animate-spin',
+                  ]"
+                  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>
+
+                <StarIcon v-else class="size-3" aria-hidden="true" />
               </button>
               <span
                 class="inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
@@ -274,9 +295,11 @@ async function deleteGame(id: string) {
   toImport.value = true;
 }
 
+const gameFeatureLoading = ref<{ [key: string]: boolean }>({});
 async function featureGame(id: string) {
   const gameIndex = libraryGames.value.findIndex((e) => e.id === id);
   const game = libraryGames.value[gameIndex];
+  gameFeatureLoading.value[game.id] = true;
 
   await $dropFetch("/api/v1/admin/game", {
     method: "PATCH",
@@ -285,5 +308,6 @@ async function featureGame(id: string) {
   });
 
   libraryGames.value[gameIndex].featured = !game.featured;
+  gameFeatureLoading.value[game.id] = false;
 }
 </script>
diff --git a/pages/admin/metadata/index.vue b/pages/admin/metadata/index.vue
new file mode 100644
index 00000000..08e0a73c
--- /dev/null
+++ b/pages/admin/metadata/index.vue
@@ -0,0 +1,9 @@
+<template>
+    <div />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+    layout: "admin"
+})
+</script>
\ No newline at end of file
diff --git a/pages/store/c/[id]/index.vue b/pages/store/c/[id]/index.vue
index 72519f40..c5670d45 100644
--- a/pages/store/c/[id]/index.vue
+++ b/pages/store/c/[id]/index.vue
@@ -1,46 +1,39 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="w-full overflow-x-hidden">
-    <div
-      class="relative w-full p-24 flex items-center justify-center bg-zinc-950 overflow-hidden"
-    >
-      <div
-        class="inline-flex items-center gap-x-4 z-10 bg-zinc-950 p-5 rounded-lg"
-      >
-        <img
-          :src="useObject(company.mLogoObjectId)"
-          class="size-24 rounded-sm"
+    <div class="relative overflow-hidden bg-zinc-900">
+      <!-- Decorative background image and gradient -->
+      <div aria-hidden="true" class="absolute inset-0">
+        <div class="absolute inset-0 overflow-hidden">
+          <img
+            :src="useObject(company.mBannerObjectId)"
+            alt=""
+            class="size-full object-cover"
+          />
+        </div>
+        <div class="absolute inset-0 bg-zinc-900/75" />
+        <div
+          class="absolute inset-0 bg-linear-to-t from-zinc-900"
         />
-        <div>
-          <h1 class="text-4xl text-zinc-100 font-semibold">
+      </div>
+
+      <!-- Callout -->
+      <section
+        aria-labelledby="sale-heading"
+        class="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-32 pb-8 text-center sm:px-6 lg:px-8"
+      >
+        <div class="mx-auto max-w-2xl lg:max-w-none">
+          <h2
+            id="sale-heading"
+            class="text-4xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl lg:text-6xl"
+          >
             {{ company.mName }}
-          </h1>
-          <p class="mt-2 text-sm text-zinc-400 max-w-sm">
-            {{ company.mShortDescription }}
+          </h2>
+          <p class="mx-auto line-clamp-3 mt-4 max-w-xl text-xl text-zinc-400">
+            {{ company.mDescription }}
           </p>
         </div>
-      </div>
-      <img
-        :src="useObject(company.mBannerObjectId)"
-        class="absolute inset-0 w-full z-0 object-cover object-center blur-sm"
-      />
-    </div>
-    <div class="px-4 sm:px-12 py-4 sm:py-10">
-      <h1 class="text-xl text-zinc-200 font-semibold">
-        {{ $t("store.about") }}
-      </h1>
-      <div
-        class="mt-4 mb-4 prose prose-invert prose-blue max-w-none max-h-[40vh] overflow-y-auto ring ring-zinc-700 p-4 rounded-lg"
-        v-html="description"
-      />
-      <NuxtLink
-      v-if="company.mWebsite"
-        :href="company.mWebsite"
-        :external="true"
-        target="_blank"
-        class="rounded-md bg-white/10 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
-        >{{ $t("store.website") }}</NuxtLink
-      >
+      </section>
     </div>
     <StoreView
       :extra-options="[
@@ -62,15 +55,11 @@
 </template>
 
 <script setup lang="ts">
-import { micromark } from "micromark";
-
 const route = useRoute();
 const companyId = route.params.id;
 
 const { company } = await $dropFetch(`/api/v1/companies/${companyId}`);
 
-const description = micromark(company.mDescription);
-
 useHead({
   title: company.mName,
   link: [{ rel: "icon", href: useObject(company.mLogoObjectId) }],
diff --git a/pages/store/t/[id]/index.vue b/pages/store/t/[id]/index.vue
new file mode 100644
index 00000000..d6920045
--- /dev/null
+++ b/pages/store/t/[id]/index.vue
@@ -0,0 +1,48 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="w-full overflow-x-hidden">
+    <div class="relative overflow-hidden bg-zinc-900">
+      <!-- Decorative background image and gradient -->
+      <div aria-hidden="true" class="absolute inset-0">
+        <div class="absolute inset-0 overflow-hidden">
+          <img alt="" class="size-full object-cover" />
+        </div>
+        <div class="absolute inset-0 bg-zinc-900/75" />
+        <div class="absolute inset-0 bg-linear-to-t from-zinc-900" />
+      </div>
+
+      <!-- Callout -->
+      <section
+        aria-labelledby="sale-heading"
+        class="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-32 pb-8 text-center sm:px-6 lg:px-8"
+      >
+        <div class="mx-auto max-w-2xl lg:max-w-none">
+          <h2
+            id="sale-heading"
+            class="text-4xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl lg:text-6xl"
+          >
+            {{ tag.name }}
+          </h2>
+        </div>
+      </section>
+    </div>
+    <StoreView
+      :prefilled="{
+        tags: {
+          [tag.id]: true,
+        } as any,
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+const tagId = route.params.id;
+
+const { tag } = await $dropFetch(`/api/v1/tags/${tagId}`);
+
+useHead({
+  title: tag.name,
+});
+</script>
diff --git a/server/api/v1/companies/[id]/index.get.ts b/server/api/v1/companies/[id]/index.get.ts
index 45c28b5f..a3263711 100644
--- a/server/api/v1/companies/[id]/index.get.ts
+++ b/server/api/v1/companies/[id]/index.get.ts
@@ -14,24 +14,6 @@ export default defineEventHandler(async (h3) => {
 
   const company = await prisma.company.findUnique({
     where: { id: companyId },
-    include: {
-      published: {
-        select: {
-          id: true,
-          mName: true,
-          mShortDescription: true,
-          mCoverObjectId: true,
-        },
-      },
-      developed: {
-        select: {
-          id: true,
-          mName: true,
-          mShortDescription: true,
-          mCoverObjectId: true,
-        },
-      },
-    },
   });
 
   if (!company)
diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts
index 58642e20..686c2297 100644
--- a/server/api/v1/store/index.get.ts
+++ b/server/api/v1/store/index.get.ts
@@ -18,7 +18,7 @@ const StoreRead = type({
   company: "string?",
   companyActions: "string = 'published,developed'",
 
-  sort: "'newest' | 'recent' = 'newest'",
+  sort: "'default' | 'newest' | 'recent' = 'default'",
 });
 
 export default defineEventHandler(async (h3) => {
@@ -99,6 +99,7 @@ export default defineEventHandler(async (h3) => {
 
   const sort: Prisma.GameOrderByWithRelationInput = {};
   switch (options.sort) {
+    case "default":
     case "newest":
       sort.mReleased = "desc";
       break;
diff --git a/server/api/v1/tags/[id]/index.get.ts b/server/api/v1/tags/[id]/index.get.ts
new file mode 100644
index 00000000..5d5d686c
--- /dev/null
+++ b/server/api/v1/tags/[id]/index.get.ts
@@ -0,0 +1,23 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["store:read"]);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const tagId = getRouterParam(h3, "id");
+  if (!tagId)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing gameId in route params (somehow...?)",
+    });
+
+  const tag = await prisma.gameTag.findUnique({
+    where: { id: tagId },
+  });
+
+  if (!tag)
+    throw createError({ statusCode: 404, statusMessage: "Tag not found" });
+
+  return { tag };
+});

From 139ff6dc5897ed0ecc67a66ced64cb106845e5bf Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sat, 26 Jul 2025 20:01:28 +1000
Subject: [PATCH 16/26] fix: develop merge

---
 components/StoreView.vue          | 8 ++++----
 server/api/v1/store/index.get.ts  | 2 +-
 server/internal/metadata/index.ts | 5 +++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/StoreView.vue b/components/StoreView.vue
index 086e9ad9..39bf2f85 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -358,7 +358,7 @@ import {
   Squares2X2Icon,
 } from "@heroicons/vue/20/solid";
 import type { SerializeObject } from "nitropack";
-import type { Game, GameTag } from "~/prisma/client";
+import type { GameModel, GameTagModel } from "~/prisma/client/models";
 import MultiItemSelector from "./MultiItemSelector.vue";
 
 const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
@@ -374,7 +374,7 @@ const props = defineProps<{
 }>();
 
 const tags =
-  await $dropFetch<Array<SerializeObject<GameTag>>>("/api/v1/store/tags");
+  await $dropFetch<Array<SerializeObject<GameTagModel>>>("/api/v1/store/tags");
 
 const sorts: Array<StoreSortOption> = [
   {
@@ -442,13 +442,13 @@ const filterQuery = computed(() => {
   return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}`;
 });
 
-const games = ref<Array<SerializeObject<Game>>>();
+const games = ref<Array<SerializeObject<GameModel>>>();
 const loading = ref(false);
 
 async function updateGames(query: string, reset: boolean) {
   loading.value = true;
   games.value ??= [];
-  const newValues = await $dropFetch<Array<SerializeObject<Game>>>(
+  const newValues = await $dropFetch<Array<SerializeObject<GameModel>>>(
     `/api/v1/store?take=50&start=${reset ? games.value?.length || 0 : 0}&sort=${currentSort.value}${query ? "&" + query : ""}`,
   );
   if (reset) {
diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts
index 686c2297..122ea577 100644
--- a/server/api/v1/store/index.get.ts
+++ b/server/api/v1/store/index.get.ts
@@ -1,5 +1,5 @@
 import { ArkErrors, type } from "arktype";
-import type { Prisma } from "~/prisma/client";
+import type { Prisma } from "~/prisma/client/client";
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 import { parsePlatform } from "~/server/internal/utils/parseplatform";
diff --git a/server/internal/metadata/index.ts b/server/internal/metadata/index.ts
index a9a09601..05a22674 100644
--- a/server/internal/metadata/index.ts
+++ b/server/internal/metadata/index.ts
@@ -19,6 +19,7 @@ import { randomUUID } from "crypto";
 import { fuzzy } from "fast-fuzzy";
 import { logger } from "~/server/internal/logging";
 import libraryManager from "../library";
+import type { GameTagModel } from "~/prisma/client/models";
 
 export class MissingMetadataProviderConfig extends Error {
   private providerName: string;
@@ -126,10 +127,10 @@ export class MetadataHandler {
   }
 
   private async parseTags(tags: string[]) {
-    const results: Array<GameTag> = [];
+    const results: Array<GameTagModel> = [];
 
     for (const tag of tags) {
-      const rawResults: GameTag[] =
+      const rawResults: GameTagModel[] =
         await prisma.$queryRaw`SELECT * FROM "GameTag" WHERE SIMILARITY(name, ${tag}) > 0.45;`;
       let resultTag = rawResults.at(0);
       if (!resultTag) {

From fc4848f7fafda860d9853cc844eec6782503e779 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 27 Jul 2025 12:41:17 +1000
Subject: [PATCH 17/26] feat: offline games support (don't error out if
 provider throws)

---
 components/GameEditor/Version.vue | 22 +++++++++++--
 i18n/locales/en_us.json           |  2 ++
 pages/admin/library/index.vue     | 54 +++++++++++++++++++++++++++++--
 server/internal/library/index.ts  | 51 ++++++++++++++++++-----------
 4 files changed, 105 insertions(+), 24 deletions(-)

diff --git a/components/GameEditor/Version.vue b/components/GameEditor/Version.vue
index b92cf65d..75aef97d 100644
--- a/components/GameEditor/Version.vue
+++ b/components/GameEditor/Version.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div v-if="game">
+  <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
@@ -22,7 +22,6 @@
                   <!-- import games button -->
 
                   <NuxtLink
-                    v-if="unimportedVersions !== undefined"
                     :href="
                       unimportedVersions.length > 0
                         ? `/admin/library/${game.id}/import`
@@ -96,6 +95,24 @@
       </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">
@@ -103,6 +120,7 @@ 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";
 
 definePageMeta({
   layout: "admin",
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index 426ffac0..201ee429 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -248,6 +248,8 @@
     "admin": {
       "detectedGame": "Drop has detected you have new games to import.",
       "detectedVersion": "Drop has detected you have new verions of this game to import.",
+      "offlineTitle": "Game offline",
+      "offline": "Drop couldn't access this game.",
       "game": {
         "addCarouselNoImages": "No images to add.",
         "addDescriptionNoImages": "No images to add.",
diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index 8e9e15c4..de752739 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -78,7 +78,7 @@
       <li
         v-for="game in filteredLibraryGames"
         :key="game.id"
-        class="col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border border-zinc-800 transition-all duration-200 hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 group"
+        class="relative overflow-hidden col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 border-zinc-800 transition-all duration-200 group"
       >
         <div class="flex flex-1 flex-row p-4 gap-x-4">
           <img
@@ -215,6 +215,24 @@
               </div>
             </div>
           </div>
+          <div
+            v-if="game.notifications.offline"
+            class="rounded-md bg-red-600/10 p-4"
+          >
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <ExclamationCircleIcon
+                  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">
+                  {{ $t("library.admin.offline") }}
+                </h3>
+              </div>
+            </div>
+          </div>
         </div>
       </li>
       <p
@@ -234,9 +252,14 @@
 </template>
 
 <script setup lang="ts">
-import { ExclamationTriangleIcon } from "@heroicons/vue/16/solid";
+import {
+  ExclamationTriangleIcon,
+  ExclamationCircleIcon,
+} from "@heroicons/vue/16/solid";
 import { InformationCircleIcon, StarIcon } from "@heroicons/vue/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
+import { SerializeObject } from "nitropack";
+import { GameModel } from "~/prisma/client/models";
 
 const { t } = useI18n();
 
@@ -251,13 +274,37 @@ useHead({
 const searchQuery = ref("");
 
 const libraryState = await $dropFetch("/api/v1/admin/library");
+type LibraryStateGame = (typeof libraryState.games)[number]["game"];
 
 const toImport = ref(
   Object.values(libraryState.unimportedGames).flat().length > 0,
 );
 
-const libraryGames = ref(
+const libraryGames = ref<
+  Array<
+    LibraryStateGame & {
+      status: "online" | "offline";
+      hasNotifications?: boolean;
+      notifications: {
+        noVersions?: boolean;
+        toImport?: boolean;
+        offline?: boolean;
+      };
+    }
+  >
+>(
   libraryState.games.map((e) => {
+    if (e.status == "offline") {
+      return {
+        ...e.game,
+        status: "offline" as const,
+        hasNotifications: true,
+        notifications: {
+          offline: true,
+        },
+      };
+    }
+
     const noVersions = e.status.noVersions;
     const toImport = e.status.unimportedVersions.length > 0;
 
@@ -268,6 +315,7 @@ const libraryGames = ref(
         toImport,
       },
       hasNotifications: noVersions || toImport,
+      status: "online" as const,
     };
   }),
 );
diff --git a/server/internal/library/index.ts b/server/internal/library/index.ts
index ee63758a..ad6b17e6 100644
--- a/server/internal/library/index.ts
+++ b/server/internal/library/index.ts
@@ -11,7 +11,8 @@ import { fuzzy } from "fast-fuzzy";
 import taskHandler from "../tasks";
 import { parsePlatform } from "../utils/parseplatform";
 import notificationSystem from "../notifications";
-import type { LibraryProvider } from "./provider";
+import { GameNotFoundError, type LibraryProvider } from "./provider";
+import { logger } from "../logging";
 
 class LibraryManager {
   private libraries: Map<string, LibraryProvider<unknown>> = new Map();
@@ -78,14 +79,21 @@ class LibraryManager {
     });
     if (!game) return undefined;
 
-    const versions = await provider.listVersions(libraryPath);
-    const unimportedVersions = versions.filter(
-      (e) =>
-        game.versions.findIndex((v) => v.versionName == e) == -1 &&
-        !(this.versionImportLocks.get(game.id) ?? []).includes(e),
-    );
-
-    return unimportedVersions;
+    try {
+      const versions = await provider.listVersions(libraryPath);
+      const unimportedVersions = versions.filter(
+        (e) =>
+          game.versions.findIndex((v) => v.versionName == e) == -1 &&
+          !(this.versionImportLocks.get(game.id) ?? []).includes(e),
+      );
+      return unimportedVersions;
+    } catch (e) {
+      if (e instanceof GameNotFoundError) {
+        logger.warn(e);
+        return undefined;
+      }
+      throw e;
+    }
   }
 
   async fetchGamesWithStatus() {
@@ -100,16 +108,21 @@ class LibraryManager {
     });
 
     return await Promise.all(
-      games.map(async (e) => ({
-        game: e,
-        status: {
-          noVersions: e.versions.length == 0,
-          unimportedVersions: (await this.fetchUnimportedGameVersions(
-            e.libraryId ?? "",
-            e.libraryPath,
-          ))!,
-        },
-      })),
+      games.map(async (e) => {
+        const versions = await this.fetchUnimportedGameVersions(
+          e.libraryId ?? "",
+          e.libraryPath,
+        );
+        return {
+          game: e,
+          status: versions
+            ? {
+                noVersions: e.versions.length == 0,
+                unimportedVersions: versions,
+              }
+            : ("offline" as const),
+        };
+      }),
     );
   }
 

From 228b9d3e4a723798801cad3afd920ed4338fe024 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 27 Jul 2025 14:14:44 +1000
Subject: [PATCH 18/26] feat: tag management

---
 components/AddLibraryButton.vue               |  7 +-
 components/GameEditor/Metadata.vue            | 73 ++++++++++++-----
 components/GameEditor/Version.vue             |  4 -
 components/Modal/CreateCollection.vue         |  2 +-
 components/Modal/CreateTag.vue                | 80 +++++++++++++++++++
 components/Modal/DeleteCollection.vue         |  6 +-
 components/NotificationItem.vue               |  7 +-
 composables/request.ts                        | 19 ++++-
 eslint.config.mjs                             |  1 +
 i18n/locales/en_us.json                       | 21 ++++-
 pages/admin/library/[id]/index.vue            |  3 +-
 pages/admin/library/index.vue                 | 11 +--
 pages/admin/metadata/index.vue                | 61 +++++++++++++-
 pages/admin/metadata/tags.vue                 | 75 +++++++++++++++++
 pages/auth/register.vue                       |  2 +-
 .../v1/admin/game/{ => [id]}/index.delete.ts  | 10 +--
 .../api/v1/admin/game/{ => [id]}/index.get.ts |  9 +--
 .../v1/admin/game/{ => [id]}/index.patch.ts   |  4 +-
 .../v1/admin/game/{ => [id]}/metadata.post.ts |  3 +-
 server/api/v1/admin/game/[id]/tags.patch.ts   | 29 +++++++
 server/api/v1/admin/tags/[id]/index.delete.ts | 14 ++++
 server/api/v1/admin/tags/index.get.ts         | 10 +++
 server/api/v1/admin/tags/index.post.ts        | 22 +++++
 server/internal/acls/descriptions.ts          |  4 +
 server/internal/acls/index.ts                 |  4 +
 25 files changed, 416 insertions(+), 65 deletions(-)
 create mode 100644 components/Modal/CreateTag.vue
 create mode 100644 pages/admin/metadata/tags.vue
 rename server/api/v1/admin/game/{ => [id]}/index.delete.ts (55%)
 rename server/api/v1/admin/game/{ => [id]}/index.get.ts (83%)
 rename server/api/v1/admin/game/{ => [id]}/index.patch.ts (84%)
 rename server/api/v1/admin/game/{ => [id]}/metadata.post.ts (97%)
 create mode 100644 server/api/v1/admin/game/[id]/tags.patch.ts
 create mode 100644 server/api/v1/admin/tags/[id]/index.delete.ts
 create mode 100644 server/api/v1/admin/tags/index.get.ts
 create mode 100644 server/api/v1/admin/tags/index.post.ts

diff --git a/components/AddLibraryButton.vue b/components/AddLibraryButton.vue
index 79c0a28d..0db4d0ea 100644
--- a/components/AddLibraryButton.vue
+++ b/components/AddLibraryButton.vue
@@ -136,8 +136,9 @@ async function toggleCollection(id: string) {
     if (!collection) return;
     const index = collection.entries.findIndex((e) => e.gameId == props.gameId);
 
-    await $dropFetch(`/api/v1/collection/${id}/entry`, {
+    await $dropFetch(`/api/v1/collection/:id/entry`, {
       method: index == -1 ? "POST" : "DELETE",
+      params: { id },
       body: {
         id: props.gameId,
       },
@@ -145,6 +146,8 @@ async function toggleCollection(id: string) {
     });
 
     await refreshCollection(id);
-  } finally { /* empty */ }
+  } finally {
+    /* empty */
+  }
 }
 </script>
diff --git a/components/GameEditor/Metadata.vue b/components/GameEditor/Metadata.vue
index e2fa644e..5dfa85fa 100644
--- a/components/GameEditor/Metadata.vue
+++ b/components/GameEditor/Metadata.vue
@@ -27,6 +27,10 @@
           </button>
         </div>
 
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-8">
+          <MultiItemSelector v-model="currentTags" :items="tags" />
+        </div>
+
         <!-- image carousel pick -->
         <div class="border-b border-zinc-700">
           <div class="border-b border-zinc-700 py-4">
@@ -440,7 +444,7 @@
 </template>
 
 <script setup lang="ts">
-import type { GameModel } from "~/prisma/client/models";
+import type { GameModel, GameTagModel } from "~/prisma/client/models";
 import { micromark } from "micromark";
 import {
   CheckIcon,
@@ -451,25 +455,42 @@ import {
 import type { SerializeObject } from "nitropack";
 import type { H3Error } from "h3";
 
-definePageMeta({
-  layout: "admin",
-});
-
 const showUploadModal = ref(false);
 const showAddCarouselModal = ref(false);
 const showAddImageDescriptionModal = ref(false);
 const showEditCoreMetadata = ref(false);
 const mobileShowFinalDescription = ref(true);
 
-const game = defineModel<SerializeObject<GameModel>>() as Ref<
-  SerializeObject<GameModel>
->;
+type ModelType = SerializeObject<GameModel & { tags: Array<GameTagModel> }>;
+const game = defineModel<ModelType>() as Ref<ModelType>;
 if (!game.value)
   throw createError({
     statusCode: 500,
     statusMessage: "Game not provided to editor component",
   });
 
+const currentTags = ref<{ [key: string]: boolean }>(
+  Object.fromEntries(game.value.tags.map((e) => [e.id, true])),
+);
+const tags = (await $dropFetch("/api/v1/admin/tags")).map(
+  (e) => ({ name: e.name, param: e.id }) satisfies StoreSortOption,
+);
+
+watch(
+  currentTags,
+  async (v) => {
+    await $dropFetch(`/api/v1/admin/game/:id/tags`, {
+      method: "PATCH",
+      params: {
+        id: game.value.id,
+      },
+      body: { tags: Object.keys(v) },
+      failTitle: "Failed to update game tags",
+    });
+  },
+  { deep: true },
+);
+
 const { t } = useI18n();
 
 // I don't know why I split these fields off.
@@ -510,14 +531,16 @@ async function coreMetadataUpdate() {
     formData.append("icon", newIcon);
   }
 
-  formData.append("id", game.value.id);
   formData.append("name", coreMetadataName.value);
   formData.append("description", coreMetadataDescription.value);
 
-  const result = await $dropFetch(`/api/v1/admin/game/metadata`, {
-    method: "POST",
-    body: formData,
-  });
+  const result = await $dropFetch(
+    `/api/v1/admin/game/${game.value.id}/metadata`,
+    {
+      method: "POST",
+      body: formData,
+    },
+  );
   return result;
 }
 
@@ -575,10 +598,12 @@ watch(descriptionHTML, (_v) => {
   savingTimeout = setTimeout(async () => {
     try {
       descriptionSaving.value = DescriptionSavingState.Loading;
-      await $dropFetch("/api/v1/admin/game", {
+      await $dropFetch(`/api/v1/admin/game/:id`, {
         method: "PATCH",
-        body: {
+        params: {
           id: game.value.id,
+        },
+        body: {
           mDescription: game.value.mDescription,
         } satisfies PatchGameBody,
       });
@@ -619,10 +644,12 @@ function insertImageAtCursor(id: string) {
 async function updateBannerImage(id: string) {
   try {
     if (game.value.mBannerObjectId == id) return;
-    const { mBannerObjectId } = await $dropFetch("/api/v1/admin/game", {
+    const { mBannerObjectId } = await $dropFetch(`/api/v1/admin/game/:id`, {
       method: "PATCH",
-      body: {
+      params: {
         id: game.value.id,
+      },
+      body: {
         mBannerObjectId: id,
       } satisfies PatchGameBody,
     });
@@ -645,10 +672,12 @@ async function updateBannerImage(id: string) {
 async function updateCoverImage(id: string) {
   try {
     if (game.value.mCoverObjectId == id) return;
-    const { mCoverObjectId } = await $dropFetch("/api/v1/admin/game", {
+    const { mCoverObjectId } = await $dropFetch(`/api/v1/admin/game/:id`, {
       method: "PATCH",
-      body: {
+      params: {
         id: game.value.id,
+      },
+      body: {
         mCoverObjectId: id,
       } satisfies PatchGameBody,
     });
@@ -717,10 +746,12 @@ function removeImageFromCarousel(id: string) {
 
 async function updateImageCarousel() {
   try {
-    await $dropFetch("/api/v1/admin/game", {
+    await $dropFetch(`/api/v1/admin/game/:id`, {
       method: "PATCH",
-      body: {
+      params: {
         id: game.value.id,
+      },
+      body: {
         mImageCarouselObjectIds: game.value.mImageCarouselObjectIds,
       } satisfies PatchGameBody,
     });
diff --git a/components/GameEditor/Version.vue b/components/GameEditor/Version.vue
index 75aef97d..4e832b7e 100644
--- a/components/GameEditor/Version.vue
+++ b/components/GameEditor/Version.vue
@@ -122,10 +122,6 @@ import type { SerializeObject } from "nitropack";
 import type { H3Error } from "h3";
 import { ExclamationCircleIcon } from "@heroicons/vue/24/outline";
 
-definePageMeta({
-  layout: "admin",
-});
-
 // TODO implement UI for this page
 
 defineProps<{ unimportedVersions: string[] }>();
diff --git a/components/Modal/CreateCollection.vue b/components/Modal/CreateCollection.vue
index e38230eb..9a8ddc05 100644
--- a/components/Modal/CreateCollection.vue
+++ b/components/Modal/CreateCollection.vue
@@ -29,7 +29,7 @@
         class="w-full sm:w-fit"
         @click="() => createCollection()"
       >
-        {{ $t("create") }}
+        {{ $t("common.create") }}
       </LoadingButton>
       <button
         ref="cancelButtonRef"
diff --git a/components/Modal/CreateTag.vue b/components/Modal/CreateTag.vue
new file mode 100644
index 00000000..b286c7d0
--- /dev/null
+++ b/components/Modal/CreateTag.vue
@@ -0,0 +1,80 @@
+<template>
+  <ModalTemplate v-model="open">
+    <template #default>
+      <div>
+        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
+          {{ $t("library.admin.metadata.tags.modal.title") }}
+        </DialogTitle>
+        <p class="mt-1 text-zinc-400 text-sm">
+          {{ $t("library.admin.metadata.tags.modal.description") }}
+        </p>
+      </div>
+      <div class="mt-2">
+        <form @submit.prevent="() => createTag()">
+          <input
+            v-model="tagName"
+            type="text"
+            class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+          />
+          <button class="hidden" type="submit" />
+        </form>
+      </div>
+    </template>
+
+    <template #buttons="{ close }">
+      <LoadingButton
+        :loading="createTagLoading"
+        :disabled="!tagName"
+        class="w-full sm:w-fit"
+        @click="() => createTag()"
+      >
+        {{ $t("common.create") }}
+      </LoadingButton>
+      <button
+        ref="cancelButtonRef"
+        type="button"
+        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
+        @click="() => close()"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { DialogTitle } from "@headlessui/vue";
+import type {
+  GameTagModel,
+} from "~/prisma/client/models";
+
+const emit = defineEmits<{
+  created: [tag: GameTagModel];
+}>();
+
+const open = defineModel<boolean>({ required: true });
+
+const tagName = ref("");
+const createTagLoading = ref(false);
+
+async function createTag() {
+  if (!tagName.value || createTagLoading.value) return;
+
+  createTagLoading.value = true;
+
+  // Create the collection
+  const tag = await $dropFetch("/api/v1/admin/tags", {
+    method: "POST",
+    body: { name: tagName.value },
+    failTitle: "Failed to create tag",
+  });
+
+  // Reset and emit
+  tagName.value = "";
+  open.value = false;
+
+  emit("created", tag);
+  createTagLoading.value = false;
+}
+</script>
diff --git a/components/Modal/DeleteCollection.vue b/components/Modal/DeleteCollection.vue
index 929aeb7d..b96e4817 100644
--- a/components/Modal/DeleteCollection.vue
+++ b/components/Modal/DeleteCollection.vue
@@ -49,9 +49,11 @@ async function deleteCollection() {
     if (!collection.value) return;
 
     deleteLoading.value = true;
-    await $dropFetch(`/api/v1/collection/${collection.value.id}`, {
-      // @ts-expect-error not documented
+    await $dropFetch(`/api/v1/collection/:id`, {
       method: "DELETE",
+      params: {
+        id: collection.value.id,
+      },
     });
     const index = collections.value.findIndex(
       (e) => e.id == collection.value?.id,
diff --git a/components/NotificationItem.vue b/components/NotificationItem.vue
index 61ebcafe..243f4da8 100644
--- a/components/NotificationItem.vue
+++ b/components/NotificationItem.vue
@@ -33,7 +33,7 @@
             class="inline-flex rounded-md text-zinc-400 hover:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
             @click="() => deleteMe()"
           >
-            <span class="sr-only">{{ $t("close") }}</span>
+            <span class="sr-only">{{ $t("common.close") }}</span>
             <XMarkIcon class="size-5" aria-hidden="true" />
           </button>
         </div>
@@ -49,8 +49,11 @@ import type { NotificationModel } from "~/prisma/client/models";
 const props = defineProps<{ notification: NotificationModel }>();
 
 async function deleteMe() {
-  await $dropFetch(`/api/v1/notifications/${props.notification.id}`, {
+  await $dropFetch(`/api/v1/notifications/:id`, {
     method: "DELETE",
+    params: {
+      id: props.notification.id,
+    },
   });
   const notifications = useNotifications();
   const indexOfMe = notifications.value.findIndex(
diff --git a/composables/request.ts b/composables/request.ts
index 60865438..d121e845 100644
--- a/composables/request.ts
+++ b/composables/request.ts
@@ -29,12 +29,29 @@ interface DropFetch<
   >;
 }
 
-export const $dropFetch: DropFetch = async (request, opts) => {
+export const $dropFetch: DropFetch = async (rawRequest, opts) => {
+  const requestParts = rawRequest.toString().split("/");
+  requestParts.forEach((part, index) => {
+    if (!part.startsWith(":")) {
+      return;
+    }
+    const partName = part.slice(1);
+    const replacement = opts?.params?.[partName] as string | undefined;
+    if (!replacement) {
+      return;
+    }
+    requestParts[index] = replacement;
+     
+    delete opts?.params?.[partName];
+  });
+  const request = requestParts.join("/");
+
   if (!getCurrentInstance()?.proxy) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore Excessive stack depth comparing types
     return await $fetch(request, opts);
   }
+
   const id = request.toString();
 
   const state = useState(id);
diff --git a/eslint.config.mjs b/eslint.config.mjs
index b4c5e3c2..0576c43b 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -18,6 +18,7 @@ export default withNuxt([
           extensions: [".js", ".vue", ".ts"],
         },
       ],
+      "@intlify/vue-i18n/no-missing-keys": "error",
     },
     settings: {
       "vue-i18n": {
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index 201ee429..51ceb2bc 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -333,7 +333,24 @@
         "noVersions": "You have no versions of this game available.",
         "noVersionsAdded": "no versions added"
       },
-      "versionPriority": "Version priority"
+      "versionPriority": "Version priority",
+      "metadata": {
+        "tags": {
+          "title": "Tags",
+          "description": "Tags are automatically created from imported genres. You can add custom tags to add categorisation to your game library.",
+          "action": "Manage {arrow}",
+          "create": "Create",
+          "modal": {
+            "title": "Create Tag",
+            "description": "Create a tag to organize your library."
+          }
+        },
+        "companies": {
+          "title": "Companies",
+          "description": "Companies organize games by who they were developed or published by.",
+          "action": "Manage {arrow}"
+        }
+      }
     },
     "back": "Back to Library",
     "collection": {
@@ -537,4 +554,4 @@
     }
   },
   "welcome": "American, Welcome!"
-}
\ No newline at end of file
+}
diff --git a/pages/admin/library/[id]/index.vue b/pages/admin/library/[id]/index.vue
index 4dd18a1a..1659f114 100644
--- a/pages/admin/library/[id]/index.vue
+++ b/pages/admin/library/[id]/index.vue
@@ -131,7 +131,8 @@ import type { Component } from "vue";
 const route = useRoute();
 const gameId = route.params.id.toString();
 const { game: rawGame, unimportedVersions } = await $dropFetch(
-  `/api/v1/admin/game?id=${encodeURIComponent(gameId)}`,
+  `/api/v1/admin/game/:id`,
+  { params: { id: gameId } },
 );
 const game = ref(rawGame);
 
diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index de752739..f1135099 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -258,8 +258,6 @@ import {
 } from "@heroicons/vue/16/solid";
 import { InformationCircleIcon, StarIcon } from "@heroicons/vue/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
-import { SerializeObject } from "nitropack";
-import { GameModel } from "~/prisma/client/models";
 
 const { t } = useI18n();
 
@@ -334,7 +332,7 @@ const filteredLibraryGames = computed(() =>
 );
 
 async function deleteGame(id: string) {
-  await $dropFetch(`/api/v1/admin/game?id=${id}`, {
+  await $dropFetch(`/api/v1/admin/game/${id}`, {
     method: "DELETE",
     failTitle: "Failed to delete game",
   });
@@ -349,9 +347,12 @@ async function featureGame(id: string) {
   const game = libraryGames.value[gameIndex];
   gameFeatureLoading.value[game.id] = true;
 
-  await $dropFetch("/api/v1/admin/game", {
+  await $dropFetch(`/api/v1/admin/game/:id`, {
     method: "PATCH",
-    body: { id, featured: !game.featured },
+    params: {
+      id: game.id,
+    },
+    body: { featured: !game.featured },
     failTitle: "Failed to feature/unfeature game",
   });
 
diff --git a/pages/admin/metadata/index.vue b/pages/admin/metadata/index.vue
index 08e0a73c..ab43365f 100644
--- a/pages/admin/metadata/index.vue
+++ b/pages/admin/metadata/index.vue
@@ -1,9 +1,62 @@
 <template>
-    <div />
+  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold text-zinc-100">
+          {{ $t("library.admin.metadata.tags.title") }}
+        </h1>
+        <p class="mt-2 text-sm text-zinc-400">
+          {{ $t("library.admin.metadata.tags.description") }}
+        </p>
+      </div>
+      <div class="mt-4 lg:ml-16 sm:mt-0 sm:flex-none">
+        <NuxtLink
+          to="/admin/metadata/tags"
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+        >
+          <i18n-t
+            keypath="library.admin.metadata.tags.action"
+            tag="span"
+            scope="global"
+          >
+            <template #arrow>
+              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+            </template>
+          </i18n-t>
+        </NuxtLink>
+      </div>
+    </div>
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold text-zinc-100">
+          {{ $t("library.admin.metadata.companies.title") }}
+        </h1>
+        <p class="mt-2 text-sm text-zinc-400">
+          {{ $t("library.admin.metadata.companies.description") }}
+        </p>
+      </div>
+      <div class="mt-4 lg:ml-16 sm:mt-0 sm:flex-none">
+        <NuxtLink
+          to="/admin/metadata/companies"
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+        >
+          <i18n-t
+            keypath="library.admin.metadata.companies.action"
+            tag="span"
+            scope="global"
+          >
+            <template #arrow>
+              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+            </template>
+          </i18n-t>
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
-    layout: "admin"
-})
-</script>
\ No newline at end of file
+  layout: "admin",
+});
+</script>
diff --git a/pages/admin/metadata/tags.vue b/pages/admin/metadata/tags.vue
new file mode 100644
index 00000000..a41cba2e
--- /dev/null
+++ b/pages/admin/metadata/tags.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="space-y-6">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold text-zinc-100">
+          {{ $t("library.admin.metadata.tags.title") }}
+        </h1>
+        <p class="mt-2 text-sm text-zinc-400">
+          {{ $t("library.admin.metadata.tags.description") }}
+        </p>
+      </div>
+      <div class="mt-4 lg:ml-16 sm:mt-0 sm:flex-none">
+        <button
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          @click="() => (createModalOpen = true)"
+        >
+          {{ $t("library.admin.metadata.tags.create") }}
+        </button>
+      </div>
+    </div>
+    <div class="flex flex-wrap gap-3">
+      <div
+        v-for="(tag, tagIdx) in tags"
+        :key="tag.id"
+        class="py-2 px-3 inline-flex gap-x-3 bg-zinc-950 ring-1 ring-zinc-800 text-zinc-300"
+      >
+        {{ tag.name }}
+        <button @click="() => deleteTag(tagIdx)">
+          <TrashIcon
+            class="transition size-4 text-zinc-700 hover:text-red-500"
+          />
+        </button>
+      </div>
+    </div>
+    <ModalCreateTag v-model="createModalOpen" @created="onTagCreate" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TrashIcon } from "@heroicons/vue/24/outline";
+import type { SerializeObject } from "nitropack";
+import type { GameTagModel } from "~/prisma/client/models";
+
+definePageMeta({
+  layout: "admin",
+});
+
+const createModalOpen = ref(false);
+
+const tags = ref(
+  await $dropFetch<Array<SerializeObject<GameTagModel>>>("/api/v1/admin/tags"),
+);
+
+function sort() {
+  tags.value.sort((a, b) =>
+    a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
+  );
+}
+
+sort();
+
+async function onTagCreate(tag: GameTagModel) {
+  tags.value.push(tag);
+  sort();
+}
+
+async function deleteTag(tagIdx: number) {
+  const tag = tags.value[tagIdx];
+  await $dropFetch(`/api/v1/admin/tags/${tag.id}`, {
+    method: "DELETE",
+    failTitle: "Failed to delete tag",
+  });
+  tags.value.splice(tagIdx, 1);
+}
+</script>
diff --git a/pages/auth/register.vue b/pages/auth/register.vue
index 9704f2ee..d2820ae5 100644
--- a/pages/auth/register.vue
+++ b/pages/auth/register.vue
@@ -157,7 +157,7 @@
 
               <div>
                 <LoadingButton type="submit" :loading="loading" class="w-full">
-                  {{ $t("create") }}
+                  {{ $t("common.create") }}
                 </LoadingButton>
               </div>
 
diff --git a/server/api/v1/admin/game/index.delete.ts b/server/api/v1/admin/game/[id]/index.delete.ts
similarity index 55%
rename from server/api/v1/admin/game/index.delete.ts
rename to server/api/v1/admin/game/[id]/index.delete.ts
index 730763ca..2a0645d8 100644
--- a/server/api/v1/admin/game/index.delete.ts
+++ b/server/api/v1/admin/game/[id]/index.delete.ts
@@ -1,17 +1,11 @@
 import aclManager from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 
-export default defineEventHandler<{ query: { id: string } }>(async (h3) => {
+export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["game:delete"]);
   if (!allowed) throw createError({ statusCode: 403 });
 
-  const query = getQuery(h3);
-  const gameId = query.id?.toString();
-  if (!gameId)
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Missing id in query",
-    });
+  const gameId = getRouterParam(h3, "id")!;
 
   await prisma.game.delete({
     where: {
diff --git a/server/api/v1/admin/game/index.get.ts b/server/api/v1/admin/game/[id]/index.get.ts
similarity index 83%
rename from server/api/v1/admin/game/index.get.ts
rename to server/api/v1/admin/game/[id]/index.get.ts
index e52a4954..44693dc5 100644
--- a/server/api/v1/admin/game/index.get.ts
+++ b/server/api/v1/admin/game/[id]/index.get.ts
@@ -6,13 +6,7 @@ export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["game:read"]);
   if (!allowed) throw createError({ statusCode: 403 });
 
-  const query = getQuery(h3);
-  const gameId = query.id?.toString();
-  if (!gameId)
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Missing id in query",
-    });
+  const gameId = getRouterParam(h3, "id")!;
 
   const game = await prisma.game.findUnique({
     where: {
@@ -30,6 +24,7 @@ export default defineEventHandler(async (h3) => {
           delta: true,
         },
       },
+      tags: true,
     },
   });
 
diff --git a/server/api/v1/admin/game/index.patch.ts b/server/api/v1/admin/game/[id]/index.patch.ts
similarity index 84%
rename from server/api/v1/admin/game/index.patch.ts
rename to server/api/v1/admin/game/[id]/index.patch.ts
index 238dc8e6..410adeeb 100644
--- a/server/api/v1/admin/game/index.patch.ts
+++ b/server/api/v1/admin/game/[id]/index.patch.ts
@@ -6,9 +6,7 @@ export default defineEventHandler(async (h3) => {
   if (!allowed) throw createError({ statusCode: 403 });
 
   const body = await readBody(h3);
-  const id = body.id;
-  if (!id)
-    throw createError({ statusCode: 400, statusMessage: "Missing id in body" });
+  const id = getRouterParam(h3, "id")!;
 
   const restOfTheBody = { ...body };
   delete restOfTheBody["id"];
diff --git a/server/api/v1/admin/game/metadata.post.ts b/server/api/v1/admin/game/[id]/metadata.post.ts
similarity index 97%
rename from server/api/v1/admin/game/metadata.post.ts
rename to server/api/v1/admin/game/[id]/metadata.post.ts
index b6f4e21d..cd1dcbc6 100644
--- a/server/api/v1/admin/game/metadata.post.ts
+++ b/server/api/v1/admin/game/[id]/metadata.post.ts
@@ -14,6 +14,8 @@ export default defineEventHandler(async (h3) => {
       statusMessage: "This endpoint requires multipart form data.",
     });
 
+  const gameId = getRouterParam(h3, "id")!;
+
   const uploadResult = await handleFileUpload(h3, {}, ["internal:read"], 1);
   if (!uploadResult)
     throw createError({
@@ -28,7 +30,6 @@ export default defineEventHandler(async (h3) => {
   // handleFileUpload reads the rest of the options for us.
   const name = options.name;
   const description = options.description;
-  const gameId = options.id;
 
   const updateModel: Prisma.GameUpdateInput = {
     mName: name,
diff --git a/server/api/v1/admin/game/[id]/tags.patch.ts b/server/api/v1/admin/game/[id]/tags.patch.ts
new file mode 100644
index 00000000..d7192ad5
--- /dev/null
+++ b/server/api/v1/admin/game/[id]/tags.patch.ts
@@ -0,0 +1,29 @@
+import { type } from "arktype";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+const PatchTags = type({
+  tags: "string[]",
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["game:update"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const body = await readDropValidatedBody(h3, PatchTags);
+  const id = getRouterParam(h3, "id")!;
+
+  await prisma.game.update({
+    where: {
+      id,
+    },
+    data: {
+      tags: {
+        connect: body.tags.map((e) => ({ id: e })),
+      },
+    },
+  });
+
+  return;
+});
diff --git a/server/api/v1/admin/tags/[id]/index.delete.ts b/server/api/v1/admin/tags/[id]/index.delete.ts
new file mode 100644
index 00000000..42792579
--- /dev/null
+++ b/server/api/v1/admin/tags/[id]/index.delete.ts
@@ -0,0 +1,14 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["tags:delete"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const id = getRouterParam(h3, "id")!;
+
+  const tag = await prisma.gameTag.deleteMany({ where: { id } });
+  if (tag.count == 0)
+    throw createError({ statusCode: 404, statusMessage: "Tag not found" });
+  return;
+});
diff --git a/server/api/v1/admin/tags/index.get.ts b/server/api/v1/admin/tags/index.get.ts
new file mode 100644
index 00000000..6a181841
--- /dev/null
+++ b/server/api/v1/admin/tags/index.get.ts
@@ -0,0 +1,10 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["tags:read"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const tags = await prisma.gameTag.findMany({orderBy: {name: 'asc'}});
+  return tags;
+});
diff --git a/server/api/v1/admin/tags/index.post.ts b/server/api/v1/admin/tags/index.post.ts
new file mode 100644
index 00000000..15698e78
--- /dev/null
+++ b/server/api/v1/admin/tags/index.post.ts
@@ -0,0 +1,22 @@
+import { type } from "arktype";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+const CreateTag = type({
+  name: "string",
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["tags:read"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const body = await readDropValidatedBody(h3, CreateTag);
+
+  const tag = await prisma.gameTag.create({
+    data: {
+      ...body,
+    },
+  });
+  return tag;
+});
diff --git a/server/internal/acls/descriptions.ts b/server/internal/acls/descriptions.ts
index 59d7d27c..85dba74c 100644
--- a/server/internal/acls/descriptions.ts
+++ b/server/internal/acls/descriptions.ts
@@ -77,6 +77,10 @@ export const systemACLDescriptions: ObjectFromList<typeof systemACLs> = {
     "Fetch games to be imported, and search the metadata for games.",
   "import:game:new": "Import a game.",
 
+  "tags:read": "Fetch all tags",
+  "tags:create": "Create a tag",
+  "tags:delete": "Delete a tag",
+
   "user:read": "Fetch any user's information.",
   "user:delete": "Delete a user.",
 
diff --git a/server/internal/acls/index.ts b/server/internal/acls/index.ts
index 169d34c5..26784542 100644
--- a/server/internal/acls/index.ts
+++ b/server/internal/acls/index.ts
@@ -78,6 +78,10 @@ export const systemACLs = [
   "news:create",
   "news:delete",
 
+  "tags:read",
+  "tags:create",
+  "tags:delete",
+
   "task:read",
   "task:start",
 

From 73f299c4aa615a558b7275066db271bcd03332e5 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 27 Jul 2025 14:34:27 +1000
Subject: [PATCH 19/26] feat: show library next to game import + small fixes

---
 i18n/locales/en_pirate.json                  |  4 ++--
 i18n/locales/en_us.json                      |  4 ++--
 pages/admin/library/[id]/index.vue           | 16 +++++++++-----
 pages/admin/library/import.vue               | 22 ++++++++++++++------
 pages/admin/library/sources/index.vue        |  4 ++++
 pages/admin/task/index.vue                   |  2 +-
 server/api/v1/admin/import/game/index.get.ts |  5 ++++-
 7 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/i18n/locales/en_pirate.json b/i18n/locales/en_pirate.json
index 64187fde..36001dec 100644
--- a/i18n/locales/en_pirate.json
+++ b/i18n/locales/en_pirate.json
@@ -24,8 +24,8 @@
   },
   "actions": "Deeds",
   "add": "Add",
-  "adminTitle": "Cap'n's Quarters | Drop",
-  "adminTitleTemplate": "{0} | Cap'n | Drop",
+  "adminTitle": "Cap'n's Quarters - Drop",
+  "adminTitleTemplate": "{0} - Cap'n - Drop",
   "auth": {
     "callback": {
       "authClient": "Grant passage to this scallywag?",
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index 51ceb2bc..9e05302a 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -24,8 +24,8 @@
   },
   "actions": "Actions",
   "add": "Add",
-  "adminTitle": "Admin Dashboard | Drop",
-  "adminTitleTemplate": "{0} | Admin | Drop",
+  "adminTitle": "Admin Dashboard - Drop",
+  "adminTitleTemplate": "{0} - Admin - Drop",
   "auth": {
     "callback": {
       "authClient": "Authorize client?",
diff --git a/pages/admin/library/[id]/index.vue b/pages/admin/library/[id]/index.vue
index 1659f114..240d580e 100644
--- a/pages/admin/library/[id]/index.vue
+++ b/pages/admin/library/[id]/index.vue
@@ -140,11 +140,6 @@ definePageMeta({
   layout: "admin",
 });
 
-useHead({
-  // To do a title with the game name in it, we need some sort of watch
-  title: "Game Editor",
-});
-
 enum GameEditorMode {
   Metadata = "Metadata",
   Versions = "Versions",
@@ -161,4 +156,15 @@ const components: {
 };
 
 const currentMode = ref<GameEditorMode>(GameEditorMode.Metadata);
+
+useHead({
+  // To do a title with the game name in it, we need some sort of watch
+  title: `${currentMode.value} - ${game.value.mName}`,
+});
+
+watch(currentMode, (v) => {
+  useHead({
+    title: `${v} - ${game.value.mName}`,
+  });
+});
 </script>
diff --git a/pages/admin/library/import.vue b/pages/admin/library/import.vue
index 5f32f544..1f85ba73 100644
--- a/pages/admin/library/import.vue
+++ b/pages/admin/library/import.vue
@@ -12,9 +12,15 @@
         <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="currentlySelectedGame != -1" class="block truncate">{{
-            games.unimportedGames[currentlySelectedGame].game
-          }}</span>
+          <span v-if="currentlySelectedGame != -1" class="block truncate"
+            >{{ games.unimportedGames[currentlySelectedGame].game }}
+            <span
+              class="px-1 py-0.5 text-xs bg-blue-600/10 rounded-sm ring-1 ring-blue-600 text-blue-400"
+              >{{
+                games.unimportedGames[currentlySelectedGame].library.name
+              }}</span
+            ></span
+          >
           <span v-else class="block truncate text-zinc-400">{{
             $t("library.admin.import.selectDir")
           }}</span>
@@ -37,7 +43,7 @@
             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="({ game }, gameIdx) in games.unimportedGames"
+              v-for="({ game, library }, gameIdx) in games.unimportedGames"
               :key="game"
               v-slot="{ active, selected }"
               as="template"
@@ -52,9 +58,13 @@
                 <span
                   :class="[
                     selected ? 'font-semibold' : 'font-normal',
-                    'block truncate',
+                    'inline-flex items-center gap-x-2 block truncate py-1 w-full',
                   ]"
-                  >{{ game }}</span
+                  >{{ game }}
+                  <span
+                    class="px-1 py-0.5 text-xs bg-blue-600/10 rounded-sm ring-1 ring-blue-600 text-blue-400"
+                    >{{ library.name }}</span
+                  ></span
                 >
 
                 <span
diff --git a/pages/admin/library/sources/index.vue b/pages/admin/library/sources/index.vue
index 7dbcd57f..937ce50a 100644
--- a/pages/admin/library/sources/index.vue
+++ b/pages/admin/library/sources/index.vue
@@ -279,6 +279,10 @@ definePageMeta({
   layout: "admin",
 });
 
+useHead({
+  title: "Library Sources",
+});
+
 const { t } = useI18n();
 
 const sources = ref(
diff --git a/pages/admin/task/index.vue b/pages/admin/task/index.vue
index 710fd395..cb2a4ef8 100644
--- a/pages/admin/task/index.vue
+++ b/pages/admin/task/index.vue
@@ -47,7 +47,7 @@
                 />
               </div>
               <p class="mt-1 truncate text-sm text-zinc-400">
-                {{ task.value.log.at(-1) }}
+                {{ parseTaskLog(task.value.log.at(-1) ?? '').message }}
               </p>
               <NuxtLink
                 type="button"
diff --git a/server/api/v1/admin/import/game/index.get.ts b/server/api/v1/admin/import/game/index.get.ts
index f363a44e..8ef65fb0 100644
--- a/server/api/v1/admin/import/game/index.get.ts
+++ b/server/api/v1/admin/import/game/index.get.ts
@@ -6,9 +6,12 @@ export default defineEventHandler(async (h3) => {
   if (!allowed) throw createError({ statusCode: 403 });
 
   const unimportedGames = await libraryManager.fetchUnimportedGames();
+  const libraries = Object.fromEntries(
+    (await libraryManager.fetchLibraries()).map((e) => [e.id, e]),
+  );
   const iterableUnimportedGames = Object.entries(unimportedGames)
     .map(([libraryId, gameArray]) =>
-      gameArray.map((e) => ({ game: e, library: libraryId })),
+      gameArray.map((e) => ({ game: e, library: libraries[libraryId] })),
     )
     .flat();
   return { unimportedGames: iterableUnimportedGames };

From 61bfab30d6d0044d753457ebd4e11492500546d4 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 27 Jul 2025 19:29:22 +1000
Subject: [PATCH 20/26] feat: most of the company and tag managers

---
 components/GameSearchResultWidget.vue         |   2 +-
 components/Modal/AddCompanyGame.vue           | 246 ++++++++++++++
 drop-base                                     |   2 +-
 i18n/locales/en_us.json                       |  23 +-
 pages/admin/library/import.vue                |   2 +-
 pages/admin/metadata/companies/[id]/index.vue | 306 ++++++++++++++++++
 pages/admin/metadata/companies/index.vue      | 151 +++++++++
 .../api/v1/admin/company/[id]/game.delete.ts  |  37 +++
 .../api/v1/admin/company/[id]/game.patch.ts   |  37 +++
 server/api/v1/admin/company/[id]/game.post.ts |  69 ++++
 .../api/v1/admin/company/[id]/index.delete.ts |  14 +
 server/api/v1/admin/company/[id]/index.get.ts |  54 ++++
 server/api/v1/admin/company/index.get.ts      |  10 +
 server/api/v1/admin/game/index.get.ts         |  16 +
 server/internal/acls/descriptions.ts          |   5 +
 server/internal/acls/index.ts                 |   5 +
 16 files changed, 974 insertions(+), 5 deletions(-)
 create mode 100644 components/Modal/AddCompanyGame.vue
 create mode 100644 pages/admin/metadata/companies/[id]/index.vue
 create mode 100644 pages/admin/metadata/companies/index.vue
 create mode 100644 server/api/v1/admin/company/[id]/game.delete.ts
 create mode 100644 server/api/v1/admin/company/[id]/game.patch.ts
 create mode 100644 server/api/v1/admin/company/[id]/game.post.ts
 create mode 100644 server/api/v1/admin/company/[id]/index.delete.ts
 create mode 100644 server/api/v1/admin/company/[id]/index.get.ts
 create mode 100644 server/api/v1/admin/company/index.get.ts
 create mode 100644 server/api/v1/admin/game/index.get.ts

diff --git a/components/GameSearchResultWidget.vue b/components/GameSearchResultWidget.vue
index 20cf908d..46dfdff4 100644
--- a/components/GameSearchResultWidget.vue
+++ b/components/GameSearchResultWidget.vue
@@ -19,6 +19,6 @@
 import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 
 const { game } = defineProps<{
-  game: GameMetadataSearchResult & { sourceName?: string };
+  game: Omit<GameMetadataSearchResult, "year"> & { sourceName?: string };
 }>();
 </script>
diff --git a/components/Modal/AddCompanyGame.vue b/components/Modal/AddCompanyGame.vue
new file mode 100644
index 00000000..a7569bde
--- /dev/null
+++ b/components/Modal/AddCompanyGame.vue
@@ -0,0 +1,246 @@
+<template>
+  <ModalTemplate v-model="open">
+    <template #default>
+      <div>
+        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
+          {{ $t("library.admin.metadata.companies.addGame.title") }}
+        </DialogTitle>
+        <p class="mt-1 text-zinc-400 text-sm">
+          {{ $t("library.admin.metadata.companies.addGame.description") }}
+        </p>
+      </div>
+      <div class="mt-2">
+        <form @submit.prevent="() => addGame()">
+          <Listbox v-model="currentGame" as="div">
+            <ListboxLabel
+              class="block text-sm font-medium leading-6 text-zinc-100"
+              >{{ $t("library.admin.import.selectGameSearch") }}</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"
+              >
+                <GameSearchResultWidget
+                  v-if="currentGame"
+                  :game="currentGame"
+                />
+                <span v-else class="block truncate text-zinc-600">
+                  {{ $t("library.admin.import.selectGamePlaceholder") }}
+                </span>
+                <span
+                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                >
+                  <ChevronUpDownIcon
+                    class="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </ListboxButton>
+
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <ListboxOptions
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                >
+                  <ListboxOption
+                    v-for="result in metadataGames"
+                    :key="result.id"
+                    v-slot="{ active }"
+                    as="template"
+                    :value="result"
+                  >
+                    <li
+                      :class="[
+                        active ? 'bg-blue-600 text-white' : 'text-zinc-100',
+                        'relative cursor-default select-none py-2 pl-3 pr-9',
+                      ]"
+                    >
+                      <GameSearchResultWidget :game="result" />
+                    </li>
+                  </ListboxOption>
+                  <p
+                    v-if="metadataGames.length == 0"
+                    class="w-full text-center p-2 uppercase font-display text-zinc-700 font-bold"
+                  >
+                    {{ $t("library.admin.metadata.companies.addGame.noGames") }}
+                  </p>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <div class="mt-6 flex items-center justify-between gap-3">
+            <label
+              id="published-label"
+              for="published"
+              class="font-medium text-md text-zinc-100"
+              >{{
+                $t("library.admin.metadata.companies.addGame.publisher")
+              }}</label
+            >
+
+            <div
+              class="group/published relative inline-flex w-11 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
+            >
+              <span
+                class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/published:translate-x-5"
+              />
+              <input
+                id="published"
+                v-model="published"
+                type="checkbox"
+                class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+                aria-labelledby="published-label"
+              />
+            </div>
+          </div>
+          <div class="mt-2 flex items-center justify-between gap-3">
+            <label
+              id="developer-label"
+              for="developer"
+              class="font-medium text-md text-zinc-100"
+              >{{
+                $t("library.admin.metadata.companies.addGame.developer")
+              }}</label
+            >
+
+            <div
+              class="group/developer relative inline-flex w-11 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
+            >
+              <span
+                class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/developer:translate-x-5"
+              />
+              <input
+                id="developer"
+                v-model="developed"
+                type="checkbox"
+                class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+                aria-labelledby="developer-label"
+              />
+            </div>
+          </div>
+          <button class="hidden" type="submit" />
+        </form>
+      </div>
+
+      <div v-if="addError" class="mt-3 rounded-md bg-red-600/10 p-4">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-600">
+              {{ addError }}
+            </h3>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #buttons="{ close }">
+      <LoadingButton
+        :loading="addGameLoading"
+        :disabled="!(currentGame && (developed || published))"
+        class="w-full sm:w-fit"
+        @click="() => addGame()"
+      >
+        {{ $t("common.add") }}
+      </LoadingButton>
+      <button
+        ref="cancelButtonRef"
+        type="button"
+        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
+        @click="() => close()"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { GameModel } from "~/prisma/client/models";
+import {
+  DialogTitle,
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/vue";
+import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
+import { FetchError } from "ofetch";
+import type { SerializeObject } from "nitropack";
+import { XCircleIcon } from "@heroicons/vue/24/solid";
+
+const props = defineProps<{
+  companyId: string;
+  exclude?: string[];
+}>();
+
+const emit = defineEmits<{
+  created: [
+    game: SerializeObject<GameModel>,
+    published: boolean,
+    developed: boolean,
+  ];
+}>();
+
+const games = await $dropFetch("/api/v1/admin/game");
+const metadataGames = computed(() =>
+  games
+    .filter((e) => !(props.exclude ?? []).includes(e.id))
+    .map(
+      (e) =>
+        ({
+          id: e.id,
+          name: e.mName,
+          icon: useObject(e.mIconObjectId),
+          description: e.mShortDescription,
+        }) satisfies Omit<GameMetadataSearchResult, "year">,
+    ),
+);
+
+const { t } = useI18n();
+
+const open = defineModel<boolean>({ required: true });
+
+const currentGame = ref<(typeof metadataGames.value)[number]>();
+const developed = ref(false);
+const published = ref(false);
+const addGameLoading = ref(false);
+const addError = ref<string | undefined>(undefined);
+
+async function addGame() {
+  if (!currentGame.value) return;
+  addGameLoading.value = true;
+
+  try {
+    const game = await $dropFetch("/api/v1/admin/company/:id/game", {
+      method: "POST",
+      params: { id: props.companyId },
+      body: {
+        id: currentGame.value.id,
+        developed: developed.value,
+        published: published.value,
+      },
+    });
+    emit("created", game, published.value, developed.value);
+  } catch (e) {
+    if (e instanceof FetchError) {
+      addError.value = e.statusMessage ?? e.message ?? t("errors.unknown");
+    } else {
+      throw e;
+    }
+  } finally {
+    currentGame.value = undefined;
+    developed.value = false;
+    published.value = false;
+    addGameLoading.value = false;
+    open.value = false;
+  }
+}
+</script>
diff --git a/drop-base b/drop-base
index a14d1b70..0c683636 160000
--- a/drop-base
+++ b/drop-base
@@ -1 +1 @@
-Subproject commit a14d1b7081cf2e6aa5174e3cfd7b7fe6904ab7bf
+Subproject commit 0c683636085c474c91c2284745be35b87bb8cdf0
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index 9e05302a..e3468792 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -90,7 +90,8 @@
     "servers": "Servers",
     "srLoading": "Loading...",
     "tags": "Tags",
-    "today": "Today"
+    "today": "Today",
+    "add": "Add"
   },
   "delete": "Delete",
   "drop": {
@@ -348,7 +349,25 @@
         "companies": {
           "title": "Companies",
           "description": "Companies organize games by who they were developed or published by.",
-          "action": "Manage {arrow}"
+          "action": "Manage {arrow}",
+          "search": "Search companies...",
+          "searchGames": "Search company games...",
+          "noCompanies": "No companies",
+          "noGames": "No games",
+          "editor": {
+            "libraryTitle": "Game Library",
+            "libraryDescription": "Add, remove, or customise what this company has developed and/or published.",
+            "action": "Add Game {plus}",
+            "published": "Published",
+            "developed": "Developed"
+          },
+          "addGame": {
+            "title": "Connect game to this company",
+            "description": "Pick a game to add to the company, and whether it should be listed as a developer, publisher, or both.",
+            "publisher": "Publisher?",
+            "developer": "Developer?",
+            "noGames": "No games to add"
+          }
         }
       }
     },
diff --git a/pages/admin/library/import.vue b/pages/admin/library/import.vue
index 1f85ba73..3da5c079 100644
--- a/pages/admin/library/import.vue
+++ b/pages/admin/library/import.vue
@@ -348,7 +348,7 @@ async function importGame(useMetadata: boolean) {
     method: "POST",
     body: {
       path: option.game,
-      library: option.library,
+      library: option.library.id,
       metadata,
     },
   });
diff --git a/pages/admin/metadata/companies/[id]/index.vue b/pages/admin/metadata/companies/[id]/index.vue
new file mode 100644
index 00000000..06149a2c
--- /dev/null
+++ b/pages/admin/metadata/companies/[id]/index.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="space-y-4">
+    <div
+      class="relative overflow-hidden rounded-lg flex flex-col lg:flex-row lg:justify-between items-start lg:items-center gap-2 p-8"
+    >
+      <img
+        :src="useObject(company.mBannerObjectId)"
+        class="absolute inset-0 w-full h-full object-cover object-center"
+      />
+      <div class="absolute inset-0 bg-zinc-900/50" />
+
+      <div class="relative inline-flex items-center gap-4">
+        <!-- icon image -->
+        <img :src="useObject(company.mLogoObjectId)" class="size-20 rounded" />
+        <div>
+          <h1 class="text-5xl font-bold font-display text-zinc-100">
+            {{ company.mName }}
+          </h1>
+          <p class="mt-1 text-lg text-zinc-400">
+            {{ company.mShortDescription }}
+          </p>
+          <p class="mt-1 text-zinc-600">
+            {{ company.mWebsite }}
+          </p>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="relative inline-flex gap-x-3 items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+      >
+        {{ $t("common.edit") }} <PencilIcon class="size-4" />
+      </button>
+    </div>
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold text-zinc-100">
+          {{ $t("library.admin.metadata.companies.editor.libraryTitle") }}
+        </h1>
+        <p class="mt-2 text-sm text-zinc-400">
+          {{ $t("library.admin.metadata.companies.editor.libraryDescription") }}
+        </p>
+      </div>
+      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+        <button
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          @click="() => (addGameModelOpen = true)"
+        >
+          <i18n-t
+            keypath="library.admin.metadata.companies.editor.action"
+            tag="span"
+            scope="global"
+            class="inline-flex items-center gap-x-1"
+          >
+            <template #plus>
+              <PlusIcon class="size-4" />
+            </template>
+          </i18n-t>
+        </button>
+      </div>
+    </div>
+    <div class="mt-2 grid grid-cols-1">
+      <input
+        id="search"
+        v-model="searchQuery"
+        type="text"
+        name="search"
+        class="col-start-1 row-start-1 block w-full rounded-md bg-zinc-900 py-1.5 pl-10 pr-3 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:pl-9 sm:text-sm/6"
+        :placeholder="$t('library.admin.metadata.companies.searchGames')"
+      />
+      <MagnifyingGlassIcon
+        class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-zinc-400 sm:size-4"
+        aria-hidden="true"
+      />
+    </div>
+    <ul
+      role="list"
+      class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
+    >
+      <li
+        v-for="game in filteredGames"
+        :key="game.id"
+        class="relative overflow-hidden col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border border-zinc-800 group"
+      >
+        <div class="flex flex-1 flex-row p-4 gap-x-4">
+          <img
+            class="h-20 w-20 p-3 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
+            :src="useObject(game.mIconObjectId)"
+            alt=""
+          />
+          <div class="flex flex-col">
+            <h3
+              class="gap-x-2 text-sm inline-flex items-center font-medium text-zinc-100 font-display"
+            >
+              {{ game.mName }}
+            </h3>
+            <dl class="mt-1 flex flex-col justify-between">
+              <dt class="sr-only">{{ $t("library.admin.shortDesc") }}</dt>
+              <dd class="text-sm text-zinc-400">
+                {{ game.mShortDescription }}
+              </dd>
+            </dl>
+            <div class="mt-4 flex flex-col gap-y-3">
+              <div class="flex items-center gap-3">
+                <div
+                  class="group/published relative inline-flex w-7 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
+                >
+                  <span
+                    class="size-3 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/published:translate-x-3"
+                  />
+                  <input
+                    id="published"
+                    v-model="published[game.id]"
+                    type="checkbox"
+                    class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+                    aria-labelledby="published-label"
+                  />
+                </div>
+
+                <label
+                  id="published-label"
+                  for="published"
+                  class="font-medium text-xs text-zinc-100"
+                  >{{
+                    $t("library.admin.metadata.companies.editor.published")
+                  }}</label
+                >
+              </div>
+              <div class="flex items-center gap-3">
+                <div
+                  class="group/developed relative inline-flex w-7 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
+                >
+                  <span
+                    class="size-3 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/developed:translate-x-3"
+                  />
+                  <input
+                    id="developed"
+                    v-model="developed[game.id]"
+                    type="checkbox"
+                    class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+                    aria-labelledby="developed-label"
+                  />
+                </div>
+
+                <label
+                  id="developed-label"
+                  for="published"
+                  class="font-medium text-xs text-zinc-100"
+                  >{{
+                    $t("library.admin.metadata.companies.editor.developed")
+                  }}</label
+                >
+              </div>
+              <button
+                class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                @click="() => removeGame(game.id)"
+              >
+                {{ $t("common.remove") }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <p
+        v-if="filteredGames.length == 0 && games.length != 0"
+        class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
+      >
+        {{ $t("common.noResults") }}
+      </p>
+      <p
+        v-if="filteredGames.length == 0 && games.length == 0"
+        class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
+      >
+        {{ $t("library.admin.metadata.companies.noGames") }}
+      </p>
+    </ul>
+    <div class="text-zinc-100">
+      {{ company }}
+      {{ games.map((e) => e.id) }}
+    </div>
+    <ModalAddCompanyGame
+      v-model="addGameModelOpen"
+      :exclude="games.map((e) => e.id)"
+      :company-id="company.id"
+      @created="appendGame"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
+import { PencilIcon, PlusIcon } from "@heroicons/vue/24/solid";
+import type { SerializeObject } from "nitropack";
+import type { GameModel } from "~/prisma/client/models";
+
+definePageMeta({
+  layout: "admin",
+});
+
+const route = useRoute();
+const companyId = route.params.id!.toString();
+const result = await $dropFetch("/api/v1/admin/company/:id", {
+  params: { id: companyId },
+});
+const company = ref(result.company);
+const games = ref(result.games);
+
+const addGameModelOpen = ref(false);
+
+useHead({
+  title: `${company.value.mName} - Company`,
+});
+
+const searchQuery = ref("");
+
+const filteredGames = computed(() =>
+  games.value.filter(
+    (e: SerializeObject<GameModel>) =>
+      e.mName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      e.mShortDescription.includes(searchQuery.value.toLowerCase()),
+  ),
+);
+
+function buildToggleProxy(param: "developed" | "published") {
+  async function tick(id: string, enabled: boolean) {
+    if (
+      company.value.developed.length == 0 &&
+      company.value.published.length == 0
+    )
+      return await removeGame(id);
+
+    await $dropFetch("/api/v1/admin/company/:id/game", {
+      method: "PATCH",
+      params: {
+        id: company.value.id,
+      },
+      body: {
+        action: param,
+        enabled,
+        id,
+      },
+      failTitle: `Failed to update ${param} for game`,
+    });
+  }
+  return new Proxy({} as { [key: string]: boolean }, {
+    get(_target, prop, _reciever) {
+      return company.value[param].includes(prop.toString());
+    },
+    set(_target, prop, value) {
+      if (typeof value !== "boolean") return false;
+      const id = prop.toString();
+      const exists = company.value[param].findIndex((e) => e === id);
+      if (value && exists == -1) {
+        company.value[param].push(id);
+      }
+      if (!value && exists != -1) {
+        company.value[param].splice(exists, 1);
+      }
+      tick(id, value);
+      return true;
+    },
+  });
+}
+
+const published = buildToggleProxy("published");
+const developed = buildToggleProxy("developed");
+
+async function removeGame(gameId: string) {
+  await $dropFetch("/api/v1/admin/company/:id/game", {
+    params: {
+      id: company.value.id,
+    },
+    body: {
+      id: gameId,
+    },
+    method: "DELETE",
+    failTitle: "Failed to remove game",
+  });
+  const gameIndex = games.value.findIndex((e) => e.id == gameId);
+  if (gameIndex == -1) return;
+  games.value.splice(gameIndex, 1);
+
+  const publishedIndex = company.value.published.findIndex((e) => e === gameId);
+  if (publishedIndex != -1) {
+    company.value.published.splice(publishedIndex, 1);
+  }
+
+  const developedIndex = company.value.developed.findIndex((e) => e === gameId);
+  if (developedIndex != -1) {
+    company.value.developed.splice(developedIndex, 1);
+  }
+}
+
+function appendGame(
+  game: (typeof games.value)[number],
+  published: boolean,
+  developed: boolean,
+) {
+  games.value.push(game);
+  if (published) {
+    company.value.published.push(game.id);
+  }
+  if (developed) {
+    company.value.developed.push(game.id);
+  }
+}
+</script>
diff --git a/pages/admin/metadata/companies/index.vue b/pages/admin/metadata/companies/index.vue
new file mode 100644
index 00000000..2b0e0258
--- /dev/null
+++ b/pages/admin/metadata/companies/index.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="space-y-4">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold text-zinc-100">
+          {{ $t("library.admin.metadata.companies.title") }}
+        </h1>
+        <p class="mt-2 text-sm text-zinc-400">
+          {{ $t("library.admin.metadata.companies.description") }}
+        </p>
+      </div>
+      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+        <NuxtLink
+          to="/admin/library/sources"
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+        >
+          <i18n-t
+            keypath="library.admin.sources.link"
+            tag="span"
+            scope="global"
+          >
+            <template #arrow>
+              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+            </template>
+          </i18n-t>
+        </NuxtLink>
+      </div>
+    </div>
+    <div class="mt-2 grid grid-cols-1">
+      <input
+        id="search"
+        v-model="searchQuery"
+        type="text"
+        name="search"
+        class="col-start-1 row-start-1 block w-full rounded-md bg-zinc-900 py-1.5 pl-10 pr-3 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:pl-9 sm:text-sm/6"
+        :placeholder="$t('library.admin.metadata.companies.search')"
+      />
+      <MagnifyingGlassIcon
+        class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-zinc-400 sm:size-4"
+        aria-hidden="true"
+      />
+    </div>
+    <ul
+      role="list"
+      class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
+    >
+      <li
+        v-for="company in filteredCompanies"
+        :key="company.id"
+        class="relative overflow-hidden col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 border-zinc-800 transition-all duration-200 group"
+      >
+        <div class="flex flex-1 flex-row p-4 gap-x-4">
+          <img
+            class="h-20 w-20 p-3 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
+            :src="useObject(company.mLogoObjectId)"
+            alt=""
+          />
+          <div class="flex flex-col">
+            <h3
+              class="gap-x-2 text-sm inline-flex items-center font-medium text-zinc-100 font-display"
+            >
+              {{ company.mName }}
+            </h3>
+            <dl class="mt-1 flex flex-col justify-between">
+              <dt class="sr-only">{{ $t("library.admin.shortDesc") }}</dt>
+              <dd class="text-sm text-zinc-400">
+                {{ company.mShortDescription }}
+              </dd>
+            </dl>
+            <div class="mt-4 flex flex-col gap-y-1">
+              <NuxtLink
+                :href="`/admin/metadata/companies/${company.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
+                  keypath="library.admin.openEditor"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #arrow>
+                    <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+                  </template>
+                </i18n-t>
+              </NuxtLink>
+              <button
+                class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                @click="() => deleteCompany(company.id)"
+              >
+                {{ $t("delete") }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <p
+        v-if="filteredCompanies.length == 0 && companies.length != 0"
+        class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
+      >
+        {{ $t("common.noResults") }}
+      </p>
+      <p
+        v-if="filteredCompanies.length == 0 && companies.length == 0"
+        class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
+      >
+        {{ $t("library.admin.metadata.companies.noCompanies") }}
+      </p>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
+import type { CompanyModel } from "~/prisma/client/models";
+
+const { t } = useI18n();
+
+definePageMeta({
+  layout: "admin",
+});
+
+useHead({
+  title: t("library.admin.metadata.companies.title"),
+});
+
+const searchQuery = ref("");
+
+const companies = ref(await $dropFetch("/api/v1/admin/company"));
+
+const filteredCompanies = computed(() =>
+  companies.value.filter((e: CompanyModel) => {
+    if (!searchQuery.value) return true;
+    const searchQueryLower = searchQuery.value.toLowerCase();
+    if (e.mName.toLowerCase().includes(searchQueryLower)) return true;
+    if (e.mShortDescription.toLowerCase().includes(searchQueryLower))
+      return true;
+    return false;
+  }),
+);
+
+async function deleteCompany(id: string) {
+  await $dropFetch(`/api/v1/admin/company/:id`, {
+    method: "DELETE",
+    params: { id },
+    failTitle: "Failed to delete company",
+  });
+
+  const index = companies.value.findIndex((e) => e.id === id);
+  companies.value.splice(index, 1);
+}
+
+</script>
diff --git a/server/api/v1/admin/company/[id]/game.delete.ts b/server/api/v1/admin/company/[id]/game.delete.ts
new file mode 100644
index 00000000..0a9fe211
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/game.delete.ts
@@ -0,0 +1,37 @@
+import { type } from "arktype";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+const GameDelete = type({
+  id: "string",
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:update"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const companyId = getRouterParam(h3, "id")!;
+
+  const body = await readDropValidatedBody(h3, GameDelete);
+
+  await prisma.game.update({
+    where: {
+      id: body.id,
+    },
+    data: {
+      publishers: {
+        disconnect: {
+          id: companyId,
+        },
+      },
+      developers: {
+        disconnect: {
+          id: companyId,
+        },
+      },
+    },
+  });
+
+  return;
+});
diff --git a/server/api/v1/admin/company/[id]/game.patch.ts b/server/api/v1/admin/company/[id]/game.patch.ts
new file mode 100644
index 00000000..9e0260f4
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/game.patch.ts
@@ -0,0 +1,37 @@
+import { type } from "arktype";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+const GamePatch = type({
+  action: "'developed' | 'published'",
+  enabled: "boolean",
+  id: "string",
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:update"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const companyId = getRouterParam(h3, "id")!;
+
+  const body = await readDropValidatedBody(h3, GamePatch);
+
+  const action = body.action === "developed" ? "developers" : "publishers";
+  const actionType = body.enabled ? "connect" : "disconnect";
+
+  await prisma.game.update({
+    where: {
+      id: body.id,
+    },
+    data: {
+      [action]: {
+        [actionType]: {
+          id: companyId,
+        },
+      },
+    },
+  });
+
+  return;
+});
diff --git a/server/api/v1/admin/company/[id]/game.post.ts b/server/api/v1/admin/company/[id]/game.post.ts
new file mode 100644
index 00000000..f8731186
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/game.post.ts
@@ -0,0 +1,69 @@
+import { type } from "arktype";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+const GamePost = type({
+  published: "boolean",
+  developed: "boolean",
+  id: "string",
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:update"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const companyId = getRouterParam(h3, "id")!;
+
+  const body = await readDropValidatedBody(h3, GamePost);
+
+  if (!body.published && !body.developed)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Must be related (either developed or published).",
+    });
+
+  const publisherConnect = body.published
+    ? {
+        publishers: {
+          connect: {
+            id: companyId,
+          },
+        },
+      }
+    : undefined;
+
+  const developerConnect = body.developed
+    ? {
+        developers: {
+          connect: {
+            id: companyId,
+          },
+        },
+      }
+    : undefined;
+
+  const game = await prisma.game.update({
+    where: {
+      id: body.id,
+    },
+    data: {
+      ...publisherConnect,
+      ...developerConnect,
+    },
+    include: {
+      publishers: {
+        select: {
+          id: true,
+        },
+      },
+      developers: {
+        select: {
+          id: true,
+        },
+      },
+    },
+  });
+
+  return game;
+});
diff --git a/server/api/v1/admin/company/[id]/index.delete.ts b/server/api/v1/admin/company/[id]/index.delete.ts
new file mode 100644
index 00000000..b27d3939
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/index.delete.ts
@@ -0,0 +1,14 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:delete"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const id = getRouterParam(h3, "id")!;
+
+  const company = await prisma.company.deleteMany({ where: { id } });
+  if (company.count == 0)
+    throw createError({ statusCode: 404, statusMessage: "Company not found" });
+  return;
+});
diff --git a/server/api/v1/admin/company/[id]/index.get.ts b/server/api/v1/admin/company/[id]/index.get.ts
new file mode 100644
index 00000000..50c4115d
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/index.get.ts
@@ -0,0 +1,54 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:read"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const id = getRouterParam(h3, "id")!;
+
+  const company = await prisma.company.findUnique({
+    where: { id },
+    include: {
+      published: {
+        select: {
+          id: true,
+        },
+      },
+      developed: {
+        select: {
+          id: true,
+        },
+      },
+    },
+  });
+  if (!company)
+    throw createError({ statusCode: 404, statusMessage: "Company not found" });
+  const games = await prisma.game.findMany({
+    where: {
+      OR: [
+        {
+          developers: {
+            some: {
+              id: company.id,
+            },
+          },
+        },
+        {
+          publishers: {
+            some: {
+              id: company.id,
+            },
+          },
+        },
+      ],
+    },
+    distinct: ["id"],
+  });
+  const companyFlatten = {
+    ...company,
+    developed: company.developed.map((e) => e.id),
+    published: company.published.map((e) => e.id),
+  };
+  return { company: companyFlatten, games };
+});
diff --git a/server/api/v1/admin/company/index.get.ts b/server/api/v1/admin/company/index.get.ts
new file mode 100644
index 00000000..dac5ae25
--- /dev/null
+++ b/server/api/v1/admin/company/index.get.ts
@@ -0,0 +1,10 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:read"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const companies = await prisma.company.findMany({});
+  return companies;
+});
diff --git a/server/api/v1/admin/game/index.get.ts b/server/api/v1/admin/game/index.get.ts
new file mode 100644
index 00000000..c7ca363f
--- /dev/null
+++ b/server/api/v1/admin/game/index.get.ts
@@ -0,0 +1,16 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["game:read"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  return await prisma.game.findMany({
+    select: {
+      id: true,
+      mName: true,
+      mShortDescription: true,
+      mIconObjectId: true,
+    },
+  });
+});
diff --git a/server/internal/acls/descriptions.ts b/server/internal/acls/descriptions.ts
index 85dba74c..98b919da 100644
--- a/server/internal/acls/descriptions.ts
+++ b/server/internal/acls/descriptions.ts
@@ -70,6 +70,11 @@ export const systemACLDescriptions: ObjectFromList<typeof systemACLs> = {
   "game:image:new": "Upload an image for a game.",
   "game:image:delete": "Delete an image for a game.",
 
+  "company:read": "Fetch companies.",
+  "company:create": "Create a new company.",
+  "company:update": "Update existing companies.",
+  "company:delete": "Delete companies.",
+
   "import:version:read":
     "Fetch versions to be imported, and information about versions to be imported.",
   "import:version:new": "Import a game version.",
diff --git a/server/internal/acls/index.ts b/server/internal/acls/index.ts
index 26784542..2c2f1c61 100644
--- a/server/internal/acls/index.ts
+++ b/server/internal/acls/index.ts
@@ -65,6 +65,11 @@ export const systemACLs = [
   "game:image:new",
   "game:image:delete",
 
+  "company:read",
+  "company:update",
+  "company:create",
+  "company:delete",
+
   "import:version:read",
   "import:version:new",
 

From bc54fc529089a6d6b20b4a7cd377277659826ecf Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 27 Jul 2025 21:32:40 +1000
Subject: [PATCH 21/26] feat: company text field editing

---
 .prettierignore                               |   1 -
 drop-base                                     |   2 +-
 i18n/locales/en_us.json                       |  13 +-
 pages/admin/metadata/companies/[id]/index.vue | 111 ++++++++++++++++--
 .../api/v1/admin/company/[id]/index.patch.ts  |  23 ++++
 5 files changed, 134 insertions(+), 16 deletions(-)
 create mode 100644 server/api/v1/admin/company/[id]/index.patch.ts

diff --git a/.prettierignore b/.prettierignore
index 1e7121ff..e69de29b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +0,0 @@
-drop-base/
diff --git a/drop-base b/drop-base
index 0c683636..04125e89 160000
--- a/drop-base
+++ b/drop-base
@@ -1 +1 @@
-Subproject commit 0c683636085c474c91c2284745be35b87bb8cdf0
+Subproject commit 04125e89bef517411e103cdabcfa64a1bb563423
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index e3468792..955a96d9 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -359,7 +359,10 @@
             "libraryDescription": "Add, remove, or customise what this company has developed and/or published.",
             "action": "Add Game {plus}",
             "published": "Published",
-            "developed": "Developed"
+            "developed": "Developed",
+            "uploadIcon": "Upload icon",
+            "uploadBanner": "Upload banner",
+            "noDescription": "(no description)"
           },
           "addGame": {
             "title": "Connect game to this company",
@@ -367,6 +370,14 @@
             "publisher": "Publisher?",
             "developer": "Developer?",
             "noGames": "No games to add"
+          },
+          "modals": {
+            "nameTitle": "Edit company name",
+            "nameDescription": "Edit the company's name. Used to match to new game imports.",
+            "shortDeckTitle": "Edit company description",
+            "shortDeckDescription": "Edit the company's description. Doesn't affect long (markdown) description.",
+            "websiteTitle": "Edit company website",
+            "websiteDescription": "Edit the company's website. Note: this will be a link, and won't have redirect protection."
           }
         }
       }
diff --git a/pages/admin/metadata/companies/[id]/index.vue b/pages/admin/metadata/companies/[id]/index.vue
index 06149a2c..e7af2c47 100644
--- a/pages/admin/metadata/companies/[id]/index.vue
+++ b/pages/admin/metadata/companies/[id]/index.vue
@@ -7,20 +7,52 @@
         :src="useObject(company.mBannerObjectId)"
         class="absolute inset-0 w-full h-full object-cover object-center"
       />
-      <div class="absolute inset-0 bg-zinc-900/50" />
+      <div class="absolute inset-0 bg-zinc-900/80" />
 
       <div class="relative inline-flex items-center gap-4">
         <!-- icon image -->
-        <img :src="useObject(company.mLogoObjectId)" class="size-20 rounded" />
-        <div>
-          <h1 class="text-5xl font-bold font-display text-zinc-100">
+        <div class="relative group/iconupload rounded-xl overflow-hidden">
+          <img :src="useObject(company.mLogoObjectId)" class="size-20" />
+          <button
+            class="rounded-xl transition duration-200 absolute inset-0 opacity-0 group-hover/iconupload:opacity-100 focus-visible/iconupload:opacity-100 cursor-pointer bg-zinc-900/80 text-zinc-100 flex flex-col items-center justify-center text-center text-xs font-semibold ring-1 ring-inset ring-zinc-800 px-2"
+          >
+            <ArrowUpTrayIcon class="size-5" />
+            <span>{{
+              $t("library.admin.metadata.companies.editor.uploadIcon")
+            }}</span>
+          </button>
+        </div>
+        <div class="flex flex-col">
+          <h1
+            class="group/name inline-flex items-center gap-x-3 text-5xl font-bold font-display text-zinc-100"
+          >
             {{ company.mName }}
+            <button @click="() => editName()">
+              <PencilIcon
+                class="transition duration-200 opacity-0 group-hover/name:opacity-100 size-8"
+              />
+            </button>
           </h1>
-          <p class="mt-1 text-lg text-zinc-400">
-            {{ company.mShortDescription }}
+          <p
+            class="group/description mt-1 inline-flex items-center gap-x-3 text-lg text-zinc-400 max-w-xl"
+          >
+            {{
+              company.mShortDescription ||
+              $t("library.admin.metadata.companies.editor.noDescription")
+            }}
+            <button @click="() => editShortDescription()">
+              <PencilIcon
+                class="transition duration-200 opacity-0 group-hover/description:opacity-100 size-5"
+              />
+            </button>
           </p>
-          <p class="mt-1 text-zinc-600">
+          <p class="group/website mt-1 text-zinc-500 inline-flex items-center gap-x-3">
             {{ company.mWebsite }}
+            <button @click="() => editWebsite()">
+              <PencilIcon
+                class="transition duration-200 opacity-0 group-hover/website:opacity-100 size-4"
+              />
+            </button>
           </p>
         </div>
       </div>
@@ -28,7 +60,8 @@
         type="button"
         class="relative inline-flex gap-x-3 items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
       >
-        {{ $t("common.edit") }} <PencilIcon class="size-4" />
+        {{ $t("library.admin.metadata.companies.editor.uploadBanner") }}
+        <ArrowUpTrayIcon class="size-4" />
       </button>
     </div>
     <div class="sm:flex sm:items-center">
@@ -173,10 +206,6 @@
         {{ $t("library.admin.metadata.companies.noGames") }}
       </p>
     </ul>
-    <div class="text-zinc-100">
-      {{ company }}
-      {{ games.map((e) => e.id) }}
-    </div>
     <ModalAddCompanyGame
       v-model="addGameModelOpen"
       :exclude="games.map((e) => e.id)"
@@ -188,7 +217,7 @@
 
 <script setup lang="ts">
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
-import { PencilIcon, PlusIcon } from "@heroicons/vue/24/solid";
+import { ArrowUpTrayIcon, PencilIcon, PlusIcon } from "@heroicons/vue/24/solid";
 import type { SerializeObject } from "nitropack";
 import type { GameModel } from "~/prisma/client/models";
 
@@ -206,6 +235,8 @@ const games = ref(result.games);
 
 const addGameModelOpen = ref(false);
 
+const { t } = useI18n();
+
 useHead({
   title: `${company.value.mName} - Company`,
 });
@@ -303,4 +334,58 @@ function appendGame(
     company.value.developed.push(game.id);
   }
 }
+
+function buildFieldEditModal(
+  field: "mName" | "mShortDescription" | "mWebsite",
+  title: string,
+  description: string,
+) {
+  function modal() {
+    createModal(
+      ModalType.TextInput,
+      {
+        title,
+        description,
+        dft: company.value[field],
+      },
+      async (e, c, s) => {
+        switch (e) {
+          case "cancel": {
+            c();
+          }
+          case "submit": {
+            const result = await $dropFetch("/api/v1/admin/company/:id", {
+              method: "PATCH",
+              params: { id: company.value.id },
+              body: { [field]: s! },
+              failTitle: "Failed to update company details",
+            });
+            company.value[field] = result[field];
+            c();
+          }
+        }
+      },
+    );
+  }
+
+  return modal;
+}
+
+const editName = buildFieldEditModal(
+  "mName",
+  t("library.admin.metadata.companies.modals.nameTitle"),
+  t("library.admin.metadata.companies.modals.nameDescription"),
+);
+
+const editShortDescription = buildFieldEditModal(
+  "mShortDescription",
+  t("library.admin.metadata.companies.modals.shortDeckTitle"),
+  t("library.admin.metadata.companies.modals.shortDeckDescription"),
+);
+
+const editWebsite = buildFieldEditModal(
+  "mWebsite",
+  t("library.admin.metadata.companies.modals.websiteTitle"),
+  t("library.admin.metadata.companies.modals.websiteDescription"),
+);
 </script>
diff --git a/server/api/v1/admin/company/[id]/index.patch.ts b/server/api/v1/admin/company/[id]/index.patch.ts
new file mode 100644
index 00000000..74511e29
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/index.patch.ts
@@ -0,0 +1,23 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:update"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const body = await readBody(h3);
+  const id = getRouterParam(h3, "id")!;
+
+  const restOfTheBody = { ...body };
+  delete restOfTheBody["id"];
+
+  const newObj = await prisma.company.update({
+    where: {
+      id: id,
+    },
+    data: restOfTheBody,
+    // I would put a select here, but it would be based on the body, and muck up the types
+  });
+
+  return newObj;
+});

From 72feb6db6d14bf54cdab978da3eb1de1a9f18ddc Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 28 Jul 2025 13:02:46 +1000
Subject: [PATCH 22/26] fix: small fixes + tsgo experiemental

---
 .vscode/settings.json                 |  3 ++-
 composables/request.ts                |  2 +-
 i18n/locales/en_us.json               |  1 +
 pages/admin/library/import.vue        | 17 ++++++++++++-----
 pages/admin/library/sources/index.vue | 13 ++++++++++++-
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 76d084c8..2df4b4e3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -33,5 +33,6 @@
     "pages/admin/library/sources/index.vue": ["Filesystem"],
     "components/NewsArticleCreateButton.vue": ["[", "`", "Enter"],
     "server/api/v1/auth/signin/simple.post.ts": ["boolean | undefined"]
-  }
+  },
+  "typescript.experimental.useTsgo": true
 }
diff --git a/composables/request.ts b/composables/request.ts
index d121e845..7442f0e5 100644
--- a/composables/request.ts
+++ b/composables/request.ts
@@ -59,7 +59,7 @@ export const $dropFetch: DropFetch = async (rawRequest, opts) => {
     // Deep copy
     const object = JSON.parse(JSON.stringify(state.value));
     // Never use again on client
-    state.value = undefined;
+    if(import.meta.client) state.value = undefined;
     return object;
   }
 
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index 955a96d9..f0116bef 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -313,6 +313,7 @@
       "shortDesc": "Short Description",
       "sources": {
         "create": "Create source",
+        "edit": "Edit source",
         "createDesc": "Drop will use this source to access your game library, and make them available.",
         "desc": "Configure your library sources, where Drop will look for new games and versions to import.",
         "fsDesc": "Imports games from a path on disk. Requires version-based folder structure, and supports archived games.",
diff --git a/pages/admin/library/import.vue b/pages/admin/library/import.vue
index 3da5c079..63963739 100644
--- a/pages/admin/library/import.vue
+++ b/pages/admin/library/import.vue
@@ -309,12 +309,19 @@ async function updateSelectedGame(value: number) {
 }
 
 async function searchGame() {
+  gameSearchResultsError.value = undefined;
   gameSearchLoading.value = true;
-  const results = await $dropFetch(
-    `/api/v1/admin/import/game/search?q=${encodeURIComponent(gameSearchTerm.value)}`,
-  );
-  metadataResults.value = results;
-  gameSearchLoading.value = false;
+  try {
+    const results = await $dropFetch(
+      `/api/v1/admin/import/game/search?q=${encodeURIComponent(gameSearchTerm.value)}`,
+    );
+    metadataResults.value = results;
+    gameSearchLoading.value = false;
+  } catch (e) {
+    gameSearchLoading.value = false;
+
+    throw e;
+  }
 }
 
 function updateSelectedGame_wrapper(value: number) {
diff --git a/pages/admin/library/sources/index.vue b/pages/admin/library/sources/index.vue
index 937ce50a..251da854 100644
--- a/pages/admin/library/sources/index.vue
+++ b/pages/admin/library/sources/index.vue
@@ -110,9 +110,20 @@
     <ModalTemplate v-model="actionSourceOpen">
       <template #default>
         <div>
-          <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
+          <DialogTitle
+            v-if="createMode"
+            as="h3"
+            class="text-lg font-medium leading-6 text-white"
+          >
             {{ $t("library.admin.sources.create") }}
           </DialogTitle>
+          <DialogTitle
+            v-else
+            as="h3"
+            class="text-lg font-medium leading-6 text-white"
+          >
+            {{ $t("library.admin.sources.edit") }}
+          </DialogTitle>
           <p class="mt-1 text-zinc-400 text-sm">
             {{ $t("library.admin.sources.createDesc") }}
           </p>

From 1c311dcb81614046cacf74f385b3e34abd0d0ec6 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Wed, 30 Jul 2025 12:00:41 +1000
Subject: [PATCH 23/26] feat: upload icon and banner

---
 .vscode/settings.json                         |  3 +-
 pages/admin/metadata/companies/[id]/index.vue | 30 ++++++++++-
 .../api/v1/admin/company/[id]/banner.post.ts  | 51 +++++++++++++++++++
 server/api/v1/admin/company/[id]/icon.post.ts | 51 +++++++++++++++++++
 4 files changed, 132 insertions(+), 3 deletions(-)
 create mode 100644 server/api/v1/admin/company/[id]/banner.post.ts
 create mode 100644 server/api/v1/admin/company/[id]/icon.post.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2df4b4e3..76d084c8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -33,6 +33,5 @@
     "pages/admin/library/sources/index.vue": ["Filesystem"],
     "components/NewsArticleCreateButton.vue": ["[", "`", "Enter"],
     "server/api/v1/auth/signin/simple.post.ts": ["boolean | undefined"]
-  },
-  "typescript.experimental.useTsgo": true
+  }
 }
diff --git a/pages/admin/metadata/companies/[id]/index.vue b/pages/admin/metadata/companies/[id]/index.vue
index e7af2c47..9ab083c2 100644
--- a/pages/admin/metadata/companies/[id]/index.vue
+++ b/pages/admin/metadata/companies/[id]/index.vue
@@ -15,6 +15,7 @@
           <img :src="useObject(company.mLogoObjectId)" class="size-20" />
           <button
             class="rounded-xl transition duration-200 absolute inset-0 opacity-0 group-hover/iconupload:opacity-100 focus-visible/iconupload:opacity-100 cursor-pointer bg-zinc-900/80 text-zinc-100 flex flex-col items-center justify-center text-center text-xs font-semibold ring-1 ring-inset ring-zinc-800 px-2"
+            @click="() => (uploadLogoOpen = true)"
           >
             <ArrowUpTrayIcon class="size-5" />
             <span>{{
@@ -46,7 +47,9 @@
               />
             </button>
           </p>
-          <p class="group/website mt-1 text-zinc-500 inline-flex items-center gap-x-3">
+          <p
+            class="group/website mt-1 text-zinc-500 inline-flex items-center gap-x-3"
+          >
             {{ company.mWebsite }}
             <button @click="() => editWebsite()">
               <PencilIcon
@@ -59,6 +62,7 @@
       <button
         type="button"
         class="relative inline-flex gap-x-3 items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+        @click="() => (uploadBannerOpen = true)"
       >
         {{ $t("library.admin.metadata.companies.editor.uploadBanner") }}
         <ArrowUpTrayIcon class="size-4" />
@@ -212,6 +216,18 @@
       :company-id="company.id"
       @created="appendGame"
     />
+    <ModalUploadFile
+      v-model="uploadLogoOpen"
+      :endpoint="`/api/v1/admin/company/${company.id}/icon`"
+      accept="image/*"
+      @upload="updateLogo"
+    />
+    <ModalUploadFile
+      v-model="uploadBannerOpen"
+      :endpoint="`/api/v1/admin/company/${company.id}/banner`"
+      accept="image/*"
+      @upload="updateBanner"
+    />
   </div>
 </template>
 
@@ -234,6 +250,8 @@ const company = ref(result.company);
 const games = ref(result.games);
 
 const addGameModelOpen = ref(false);
+const uploadLogoOpen = ref(false);
+const uploadBannerOpen = ref(false);
 
 const { t } = useI18n();
 
@@ -352,6 +370,7 @@ function buildFieldEditModal(
         switch (e) {
           case "cancel": {
             c();
+            break;
           }
           case "submit": {
             const result = await $dropFetch("/api/v1/admin/company/:id", {
@@ -362,6 +381,7 @@ function buildFieldEditModal(
             });
             company.value[field] = result[field];
             c();
+            break;
           }
         }
       },
@@ -388,4 +408,12 @@ const editWebsite = buildFieldEditModal(
   t("library.admin.metadata.companies.modals.websiteTitle"),
   t("library.admin.metadata.companies.modals.websiteDescription"),
 );
+
+function updateLogo(response: { id: string }) {
+  company.value.mLogoObjectId = response.id;
+}
+
+function updateBanner(response: { id: string }) {
+  company.value.mBannerObjectId = response.id;
+}
 </script>
diff --git a/server/api/v1/admin/company/[id]/banner.post.ts b/server/api/v1/admin/company/[id]/banner.post.ts
new file mode 100644
index 00000000..0c8744a5
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/banner.post.ts
@@ -0,0 +1,51 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+import objectHandler from "~/server/internal/objects";
+import { handleFileUpload } from "~/server/internal/utils/handlefileupload";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:update"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const companyId = getRouterParam(h3, "id")!;
+  const company = await prisma.company.findUnique({
+    where: {
+      id: companyId,
+    },
+  });
+
+  if (!company)
+    throw createError({ statusCode: 400, statusMessage: "Invalid company id" });
+
+  const result = await handleFileUpload(h3, {}, ["internal:read"], 1);
+  if (!result)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "File upload required (multipart form)",
+    });
+
+  const [ids, , pull, dump] = result;
+  const id = ids.at(0);
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Upload at least one file.",
+    });
+
+  try {
+    await objectHandler.deleteAsSystem(company.mBannerObjectId);
+    await prisma.company.update({
+      where: {
+        id: companyId,
+      },
+      data: {
+        mBannerObjectId: id,
+      },
+    });
+    await pull();
+  } catch {
+    await dump();
+  }
+
+  return { id: id };
+});
diff --git a/server/api/v1/admin/company/[id]/icon.post.ts b/server/api/v1/admin/company/[id]/icon.post.ts
new file mode 100644
index 00000000..fa56ba47
--- /dev/null
+++ b/server/api/v1/admin/company/[id]/icon.post.ts
@@ -0,0 +1,51 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+import objectHandler from "~/server/internal/objects";
+import { handleFileUpload } from "~/server/internal/utils/handlefileupload";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["company:update"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const companyId = getRouterParam(h3, "id")!;
+  const company = await prisma.company.findUnique({
+    where: {
+      id: companyId,
+    },
+  });
+
+  if (!company)
+    throw createError({ statusCode: 400, statusMessage: "Invalid company id" });
+
+  const result = await handleFileUpload(h3, {}, ["internal:read"], 1);
+  if (!result)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "File upload required (multipart form)",
+    });
+
+  const [ids,, pull, dump] = result;
+  const id = ids.at(0);
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Upload at least one file.",
+    });
+
+  try {
+    await objectHandler.deleteAsSystem(company.mLogoObjectId);
+    await prisma.company.update({
+      where: {
+        id: companyId,
+      },
+      data: {
+        mLogoObjectId: id,
+      },
+    });
+    await pull();
+  } catch {
+    await dump();
+  }
+
+  return { id: id };
+});

From 52ca719da95dbac414f0899a2a542c633f363775 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Wed, 30 Jul 2025 12:28:13 +1000
Subject: [PATCH 24/26] feat: store infinite scrolling and bulk import mode

---
 components/StoreView.vue         | 35 ++++++++++++++++-----
 i18n/locales/en_us.json          |  2 ++
 nuxt.config.ts                   | 12 ++------
 package.json                     |  1 +
 pages/admin/library/import.vue   | 52 +++++++++++++++++++++++++++-----
 server/api/v1/store/index.get.ts | 17 ++++++-----
 yarn.lock                        | 34 +++++++++++++++++++++
 7 files changed, 122 insertions(+), 31 deletions(-)

diff --git a/components/StoreView.vue b/components/StoreView.vue
index 39bf2f85..97e91fb9 100644
--- a/components/StoreView.vue
+++ b/components/StoreView.vue
@@ -291,7 +291,8 @@
             <!-- Product grid -->
             <div
               v-if="games?.length ?? 0 > 0"
-              class="relative lg:col-span-4 flex flex-row flex-wrap content-start gap-4"
+              ref="product-grid"
+              class="relative lg:col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
             >
               <!-- Your content -->
               <GamePanel
@@ -360,7 +361,6 @@ import {
 import type { SerializeObject } from "nitropack";
 import type { GameModel, GameTagModel } from "~/prisma/client/models";
 import MultiItemSelector from "./MultiItemSelector.vue";
-
 const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
 
 const mobileFiltersOpen = ref(false);
@@ -445,17 +445,36 @@ const filterQuery = computed(() => {
 const games = ref<Array<SerializeObject<GameModel>>>();
 const loading = ref(false);
 
-async function updateGames(query: string, reset: boolean) {
+const productGrid = useTemplateRef<HTMLElement>("product-grid");
+
+const { reset } = useInfiniteScroll(
+  productGrid,
+  async () => await updateGames(filterQuery.value, false),
+  {
+    distance: 10,
+    canLoadMore: () => {
+      return canLoadMore.value;
+    },
+  },
+);
+
+const canLoadMore = ref(true);
+async function updateGames(query: string, resetGames: boolean) {
   loading.value = true;
   games.value ??= [];
-  const newValues = await $dropFetch<Array<SerializeObject<GameModel>>>(
-    `/api/v1/store?take=50&start=${reset ? games.value?.length || 0 : 0}&sort=${currentSort.value}${query ? "&" + query : ""}`,
+  const newValues = await $dropFetch<{
+    results: Array<SerializeObject<GameModel>>;
+    count: number;
+  }>(
+    `/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}${query ? "&" + query : ""}`,
   );
-  if (reset) {
-    games.value = newValues;
+  if (resetGames) {
+    games.value = newValues.results;
+    if (import.meta.client) await reset();
   } else {
-    games.value.push(...newValues);
+    games.value.push(...newValues.results);
   }
+  canLoadMore.value = games.value.length < newValues.count;
   loading.value = false;
 }
 watch(filterQuery, (newUrl) => {
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index f0116bef..67408f92 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -281,6 +281,8 @@
         "selectGamePlaceholder": "Please select a game...",
         "selectGameSearch": "Select game",
         "selectPlatform": "Please select a platform...",
+        "bulkImportTitle": "Bulk import mode",
+        "bulkImportDescription": "When on, this page won't redirect you to the import task, so you can import multiple games in succession.",
         "version": {
           "advancedOptions": "Advanced options",
           "import": "Import version",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e3384e15..6723b43b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -34,14 +34,8 @@ export default defineNuxtConfig({
   extends: ["./drop-base"],
   // Module config from here down
 
-  modules: [
-    "vue3-carousel-nuxt",
-    "nuxt-security",
-    // "@nuxt/image",
-    "@nuxt/fonts",
-    "@nuxt/eslint",
-    "@nuxtjs/i18n",
-  ],
+  modules: ["vue3-carousel-nuxt", "nuxt-security", // "@nuxt/image",
+  "@nuxt/fonts", "@nuxt/eslint", "@nuxtjs/i18n", "@vueuse/nuxt"],
 
   // Nuxt-only config
   telemetry: false,
@@ -299,4 +293,4 @@ function getDropVersion(): string {
     return packageJson.version;
   }
   return `v${packageJson.version}`;
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 479038fb..84a18367 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@nuxtjs/i18n": "^9.5.5",
     "@prisma/client": "^6.11.1",
     "@tailwindcss/vite": "^4.0.6",
+    "@vueuse/nuxt": "13.6.0",
     "argon2": "^0.43.0",
     "arktype": "^2.1.10",
     "axios": "^1.7.7",
diff --git a/pages/admin/library/import.vue b/pages/admin/library/import.vue
index 63963739..d6eede49 100644
--- a/pages/admin/library/import.vue
+++ b/pages/admin/library/import.vue
@@ -45,7 +45,7 @@
             <ListboxOption
               v-for="({ game, library }, gameIdx) in games.unimportedGames"
               :key="game"
-              v-slot="{ active, selected }"
+              v-slot="{ active }"
               as="template"
               :value="gameIdx"
             >
@@ -57,7 +57,9 @@
               >
                 <span
                   :class="[
-                    selected ? 'font-semibold' : 'font-normal',
+                    gameIdx === currentlySelectedGame
+                      ? 'font-semibold'
+                      : 'font-normal',
                     'inline-flex items-center gap-x-2 block truncate py-1 w-full',
                   ]"
                   >{{ game }}
@@ -68,7 +70,7 @@
                 >
 
                 <span
-                  v-if="selected"
+                  v-if="gameIdx === currentlySelectedGame"
                   :class="[
                     active ? 'text-white' : 'text-blue-600',
                     'absolute inset-y-0 right-0 flex items-center pr-4',
@@ -82,6 +84,34 @@
         </transition>
       </div>
     </Listbox>
+    <div class="flex items-center justify-between gap-x-8">
+      <span class="flex grow flex-col">
+        <label
+          id="bulkImport-label"
+          class="text-sm/6 font-medium text-zinc-100"
+          >{{ $t("library.admin.import.bulkImportTitle") }}</label
+        >
+        <span id="bulkImport-description" class="text-sm text-zinc-400">{{
+          $t("library.admin.import.bulkImportDescription")
+        }}</span>
+      </span>
+      <div
+        class="group relative inline-flex w-11 shrink-0 rounded-full bg-zinc-800 p-0.5 inset-ring inset-ring-zinc-100/5 outline-offset-2 outline-blue-600 transition-colors duration-200 ease-in-out has-checked:bg-blue-600 has-focus-visible:outline-2"
+      >
+        <span
+          class="size-5 rounded-full bg-white shadow-xs ring-1 ring-zinc-100/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-5"
+        />
+        <input
+          id="bulkImport"
+          v-model="bulkImportMode"
+          type="checkbox"
+          class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+          name="bulkImport"
+          aria-labelledby="bulkImport-label"
+          aria-describedby="bulkImport-description"
+        />
+      </div>
+    </div>
 
     <div v-if="currentlySelectedGame !== -1" class="flex flex-col gap-y-4">
       <!-- without metadata option -->
@@ -287,18 +317,20 @@ definePageMeta({
 
 const { t } = useI18n();
 
-const games = await $dropFetch("/api/v1/admin/import/game");
+const rawGames = await $dropFetch("/api/v1/admin/import/game");
+const games = ref(rawGames);
 const currentlySelectedGame = ref(-1);
 const gameSearchResultsLoading = ref(false);
 const gameSearchResultsError = ref<string | undefined>();
 const gameSearchTerm = ref("");
 const gameSearchLoading = ref(false);
+const bulkImportMode = ref(false);
 
 async function updateSelectedGame(value: number) {
   if (currentlySelectedGame.value == value) return;
   currentlySelectedGame.value = value;
   if (currentlySelectedGame.value == -1) return;
-  const option = games.unimportedGames[currentlySelectedGame.value];
+  const option = games.value.unimportedGames[currentlySelectedGame.value];
   if (!option) return;
 
   metadataResults.value = undefined;
@@ -349,7 +381,7 @@ async function importGame(useMetadata: boolean) {
     useMetadata && metadataResults.value
       ? metadataResults.value[currentlySelectedMetadata.value]
       : undefined;
-  const option = games.unimportedGames[currentlySelectedGame.value];
+  const option = games.value.unimportedGames[currentlySelectedGame.value];
 
   const { taskId } = await $dropFetch("/api/v1/admin/import/game", {
     method: "POST",
@@ -360,7 +392,13 @@ async function importGame(useMetadata: boolean) {
     },
   });
 
-  router.push(`/admin/task/${taskId}`);
+  if (!bulkImportMode.value) {
+    router.push(`/admin/task/${taskId}`);
+  } else {
+    games.value.unimportedGames.splice(currentlySelectedGame.value, 1);
+    currentlySelectedGame.value = -1;
+    gameSearchResultsError.value = undefined;
+  }
 }
 function importGame_wrapper(metadata = true) {
   importLoading.value = true;
diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts
index 122ea577..9a61e676 100644
--- a/server/api/v1/store/index.get.ts
+++ b/server/api/v1/store/index.get.ts
@@ -108,12 +108,15 @@ export default defineEventHandler(async (h3) => {
       break;
   }
 
-  const results = await prisma.game.findMany({
-    skip: options.skip,
-    take: Math.min(options.take, 50),
-    where: finalFilter,
-    orderBy: sort,
-  });
+  const [results, count] = await prisma.$transaction([
+    prisma.game.findMany({
+      skip: options.skip,
+      take: Math.min(options.take, 50),
+      where: finalFilter,
+      orderBy: sort,
+    }),
+    prisma.game.count({ where: finalFilter }),
+  ]);
 
-  return results;
+  return { results, count };
 });
diff --git a/yarn.lock b/yarn.lock
index 0d93798f..d6bd269f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2436,6 +2436,11 @@
   resolved "https://registry.yarnpkg.com/@types/turndown/-/turndown-5.0.5.tgz#614de24fc9ace4d8c0d9483ba81dc8c1976dd26f"
   integrity sha512-TL2IgGgc7B5j78rIccBtlYAnkuv8nUQqhQc+DSYV5j9Be9XOcm/SKOVRuA47xAVI3680Tk9B1d8flK2GWT2+4w==
 
+"@types/web-bluetooth@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz#525433c784aed9b457aaa0ee3d92aeb71f346b63"
+  integrity sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==
+
 "@types/yauzl@^2.9.1":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.3.tgz#e9b2808b4f109504a03cda958259876f61017999"
@@ -2893,6 +2898,35 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.18.tgz#529f24a88d3ed678d50fd5c07455841fbe8ac95e"
   integrity sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==
 
+"@vueuse/core@13.6.0":
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-13.6.0.tgz#4137f63dc4cef2ff8ae74ee146d6b6070d707878"
+  integrity sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.21"
+    "@vueuse/metadata" "13.6.0"
+    "@vueuse/shared" "13.6.0"
+
+"@vueuse/metadata@13.6.0":
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-13.6.0.tgz#49196025c96c7daeb591c20a54b61cc336af99b6"
+  integrity sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==
+
+"@vueuse/nuxt@13.6.0":
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/nuxt/-/nuxt-13.6.0.tgz#96dfa26021bc17e1c5020c1c42ba425a9d00112f"
+  integrity sha512-zOZ5XkA7Svsx90934UWwKUsThAjKSD48Ks/mjEzl2gJm5d5zYJg+CJxPi7Wv5XECtCBOX18GpmTKqanWlbA1aQ==
+  dependencies:
+    "@nuxt/kit" "^4.0.1"
+    "@vueuse/core" "13.6.0"
+    "@vueuse/metadata" "13.6.0"
+    local-pkg "^1.1.1"
+
+"@vueuse/shared@13.6.0":
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-13.6.0.tgz#872fdbd725fb4e3a12bd5aab85af9a5db0b1e481"
+  integrity sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==
+
 "@whatwg-node/disposablestack@^0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@whatwg-node/disposablestack/-/disposablestack-0.0.6.tgz#2064a1425ea66194def6df0c7a1851b6939c82bb"

From f25db468d24bac9b50ce18d7eab3063149706ef8 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Wed, 30 Jul 2025 12:28:41 +1000
Subject: [PATCH 25/26] fix: lint

---
 .github/workflows/ci.yml                      |  2 +-
 CONTRIBUTING.md                               |  4 ----
 components/GameCarousel.vue                   |  4 +---
 components/Modal/CreateTag.vue                |  4 +---
 components/MultiItemSelector.vue              | 11 +++++++----
 composables/request.ts                        |  4 ++--
 composables/store.ts                          |  2 +-
 nuxt.config.ts                                | 12 +++++++++---
 pages/admin/metadata/companies/index.vue      |  1 -
 pages/admin/task/index.vue                    |  2 +-
 pages/store/c/[id]/index.vue                  |  4 +---
 pages/store/index.vue                         |  4 +++-
 server/api/v1/admin/company/[id]/icon.post.ts |  2 +-
 server/api/v1/admin/tags/index.get.ts         |  2 +-
 14 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 78926f62..f04182eb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ on:
   pull_request:
     branches:
       - develop
-      
+
 permissions:
   contents: read
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1cc3faf2..5bb86362 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -148,7 +148,6 @@ type(scope)!: subject
 ```
 
 - `type`: the type of the commit is one of the following:
-
   - `feat`: new features.
   - `fix`: bug fixes.
   - `docs`: documentation changes.
@@ -165,7 +164,6 @@ type(scope)!: subject
 - `scope`: section of the codebase that the commit makes changes to. If it makes changes to
   many sections, or if no section in particular is modified, leave blank without the parentheses.
   Examples:
-
   - Commit that changes the `git` plugin:
 
   ```
@@ -179,7 +177,6 @@ type(scope)!: subject
   ```
 
   For changes to plugins or themes, the scope should be the plugin or theme name:
-
   - ✅ `fix(agnoster): commit subject`
   - ❌ `fix(theme/agnoster): commit subject`
 
@@ -209,7 +206,6 @@ type(scope)!: subject
   to specify other details, you can use the commit body, but it won't be visible.
 
   Formatting tricks: the commit subject may contain:
-
   - Links to related issues or PRs by writing `#issue`. This will be highlighted by the changelog tool:
 
     ```
diff --git a/components/GameCarousel.vue b/components/GameCarousel.vue
index 3f691344..6b2cc3eb 100644
--- a/components/GameCarousel.vue
+++ b/components/GameCarousel.vue
@@ -44,9 +44,7 @@ const props = defineProps<{
   width?: number;
 }>();
 
-const { showGamePanelTextDecoration } = await $dropFetch(
-  `/api/v1/settings`,
-);
+const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
 
 const currentComponent = ref<HTMLDivElement>();
 
diff --git a/components/Modal/CreateTag.vue b/components/Modal/CreateTag.vue
index b286c7d0..0129d249 100644
--- a/components/Modal/CreateTag.vue
+++ b/components/Modal/CreateTag.vue
@@ -45,9 +45,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { DialogTitle } from "@headlessui/vue";
-import type {
-  GameTagModel,
-} from "~/prisma/client/models";
+import type { GameTagModel } from "~/prisma/client/models";
 
 const emit = defineEmits<{
   created: [tag: GameTagModel];
diff --git a/components/MultiItemSelector.vue b/components/MultiItemSelector.vue
index 0565af7d..d99fec74 100644
--- a/components/MultiItemSelector.vue
+++ b/components/MultiItemSelector.vue
@@ -22,7 +22,10 @@
           <span class="absolute -inset-1" />
         </button>
       </span>
-      <span v-if="enabledItems.length == 0" class="font-display uppercase text-xs font-bold text-zinc-700">
+      <span
+        v-if="enabledItems.length == 0"
+        class="font-display uppercase text-xs font-bold text-zinc-700"
+      >
         {{ $t("common.noSelected") }}
       </span>
     </div>
@@ -105,8 +108,8 @@ function add(item: string) {
   model.value[item] = true;
 }
 
-function remove(item: string){
-    model.value ??= {};
-    model.value[item] = false;
+function remove(item: string) {
+  model.value ??= {};
+  model.value[item] = false;
 }
 </script>
diff --git a/composables/request.ts b/composables/request.ts
index 7442f0e5..963de6d1 100644
--- a/composables/request.ts
+++ b/composables/request.ts
@@ -41,7 +41,7 @@ export const $dropFetch: DropFetch = async (rawRequest, opts) => {
       return;
     }
     requestParts[index] = replacement;
-     
+
     delete opts?.params?.[partName];
   });
   const request = requestParts.join("/");
@@ -59,7 +59,7 @@ export const $dropFetch: DropFetch = async (rawRequest, opts) => {
     // Deep copy
     const object = JSON.parse(JSON.stringify(state.value));
     // Never use again on client
-    if(import.meta.client) state.value = undefined;
+    if (import.meta.client) state.value = undefined;
     return object;
   }
 
diff --git a/composables/store.ts b/composables/store.ts
index 00b96fc2..8b298671 100644
--- a/composables/store.ts
+++ b/composables/store.ts
@@ -8,4 +8,4 @@ export type StoreFilterOption = {
 export type StoreSortOption = {
   name: string;
   param: string;
-}
\ No newline at end of file
+};
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6723b43b..2c732396 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -34,8 +34,14 @@ export default defineNuxtConfig({
   extends: ["./drop-base"],
   // Module config from here down
 
-  modules: ["vue3-carousel-nuxt", "nuxt-security", // "@nuxt/image",
-  "@nuxt/fonts", "@nuxt/eslint", "@nuxtjs/i18n", "@vueuse/nuxt"],
+  modules: [
+    "vue3-carousel-nuxt",
+    "nuxt-security", // "@nuxt/image",
+    "@nuxt/fonts",
+    "@nuxt/eslint",
+    "@nuxtjs/i18n",
+    "@vueuse/nuxt",
+  ],
 
   // Nuxt-only config
   telemetry: false,
@@ -293,4 +299,4 @@ function getDropVersion(): string {
     return packageJson.version;
   }
   return `v${packageJson.version}`;
-}
\ No newline at end of file
+}
diff --git a/pages/admin/metadata/companies/index.vue b/pages/admin/metadata/companies/index.vue
index 2b0e0258..12698eb5 100644
--- a/pages/admin/metadata/companies/index.vue
+++ b/pages/admin/metadata/companies/index.vue
@@ -147,5 +147,4 @@ async function deleteCompany(id: string) {
   const index = companies.value.findIndex((e) => e.id === id);
   companies.value.splice(index, 1);
 }
-
 </script>
diff --git a/pages/admin/task/index.vue b/pages/admin/task/index.vue
index cb2a4ef8..29b9740c 100644
--- a/pages/admin/task/index.vue
+++ b/pages/admin/task/index.vue
@@ -47,7 +47,7 @@
                 />
               </div>
               <p class="mt-1 truncate text-sm text-zinc-400">
-                {{ parseTaskLog(task.value.log.at(-1) ?? '').message }}
+                {{ parseTaskLog(task.value.log.at(-1) ?? "").message }}
               </p>
               <NuxtLink
                 type="button"
diff --git a/pages/store/c/[id]/index.vue b/pages/store/c/[id]/index.vue
index c5670d45..a4c62c36 100644
--- a/pages/store/c/[id]/index.vue
+++ b/pages/store/c/[id]/index.vue
@@ -12,9 +12,7 @@
           />
         </div>
         <div class="absolute inset-0 bg-zinc-900/75" />
-        <div
-          class="absolute inset-0 bg-linear-to-t from-zinc-900"
-        />
+        <div class="absolute inset-0 bg-linear-to-t from-zinc-900" />
       </div>
 
       <!-- Callout -->
diff --git a/pages/store/index.vue b/pages/store/index.vue
index 7516b09a..4254e1a8 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -31,7 +31,9 @@
               >
                 {{ game.mName }}
               </h2>
-              <p class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl mx-auto">
+              <p
+                class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl mx-auto"
+              >
                 {{ game.mShortDescription }}
               </p>
               <div>
diff --git a/server/api/v1/admin/company/[id]/icon.post.ts b/server/api/v1/admin/company/[id]/icon.post.ts
index fa56ba47..0a4cefdb 100644
--- a/server/api/v1/admin/company/[id]/icon.post.ts
+++ b/server/api/v1/admin/company/[id]/icon.post.ts
@@ -24,7 +24,7 @@ export default defineEventHandler(async (h3) => {
       statusMessage: "File upload required (multipart form)",
     });
 
-  const [ids,, pull, dump] = result;
+  const [ids, , pull, dump] = result;
   const id = ids.at(0);
   if (!id)
     throw createError({
diff --git a/server/api/v1/admin/tags/index.get.ts b/server/api/v1/admin/tags/index.get.ts
index 6a181841..d8f1c1e1 100644
--- a/server/api/v1/admin/tags/index.get.ts
+++ b/server/api/v1/admin/tags/index.get.ts
@@ -5,6 +5,6 @@ export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["tags:read"]);
   if (!allowed) throw createError({ statusCode: 403 });
 
-  const tags = await prisma.gameTag.findMany({orderBy: {name: 'asc'}});
+  const tags = await prisma.gameTag.findMany({ orderBy: { name: "asc" } });
   return tags;
 });

From 704c1cbf7f0018d1a8798beca80c217e1506c1bc Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Wed, 30 Jul 2025 13:36:05 +1000
Subject: [PATCH 26/26] fix: add drop-base to prettier ignore

---
 .prettierignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.prettierignore b/.prettierignore
index e69de29b..3c9727cb 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1 @@
+drop-base/
\ No newline at end of file