Store overhaul (#142)

* feat: small library tweaks + company page * feat: new store view * fix: ci merge error * feat: add genres to store page * feat: sorting * feat: lock game/version imports while their tasks are running * feat: feature games * feat: tag based filtering * fix: make tags alphabetical * refactor: move a bunch of i18n to common * feat: add localizations for everything * fix: title description on panel * fix: feature carousel text * fix: i18n footer strings * feat: add tag page * fix: develop merge * feat: offline games support (don't error out if provider throws) * feat: tag management * feat: show library next to game import + small fixes * feat: most of the company and tag managers * feat: company text field editing * fix: small fixes + tsgo experiemental * feat: upload icon and banner * feat: store infinite scrolling and bulk import mode * fix: lint * fix: add drop-base to prettier ignore
2026-06-22 04:11:32 +10:00 · 2025-07-30 13:40:49 +10:00
parent 1ae051f066
commit 8363de2eed
97 changed files with 3506 additions and 524 deletions
@@ -84,7 +84,7 @@
    </Menu>
  </div>

-  <CreateCollectionModal
+  <ModalCreateCollection
    v-model="createCollectionModal"
    :game-id="props.gameId"
  />
@@ -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;
  }
@@ -147,26 +136,18 @@ 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,
      },
+      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>
@@ -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">
@@ -44,9 +44,7 @@ const props = defineProps<{
  width?: number;
 }>();

-const { showGamePanelTextDecoration } = await $dropFetch(
-  `/api/v1/admin/settings`,
-);
+const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);

 const currentComponent = ref<HTMLDivElement>();

@@ -23,10 +23,14 @@
            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>

+        <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">
@@ -268,7 +272,7 @@
        </div>
      </div>
    </div>
-    <UploadFileDialog
+    <ModalUploadFile
      v-model="showUploadModal"
      :options="{ id: game.id }"
      accept="image/*"
@@ -314,7 +318,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>
@@ -335,7 +339,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 +428,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"
@@ -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.
@@ -493,7 +514,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(),
    );
@@ -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;
 }

@@ -532,14 +555,16 @@ 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(),
      );
    })
    .then((newGame) => {
+      console.log(newGame);
      if (!newGame) return;
      Object.assign(game.value, newGame);
+      coreMetadataIconUrl.value = useObject(newGame.mIconObjectId);
    })
    .finally(() => {
      coreMetadataLoading.value = false;
@@ -573,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,
      });
@@ -589,7 +616,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(),
      );
@@ -617,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,
    });
@@ -633,7 +662,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(),
    );
@@ -643,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,
    });
@@ -659,7 +690,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 +719,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(),
    );
@@ -715,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,
    });
@@ -730,7 +763,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(),
    );
@@ -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,10 +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";
-
-definePageMeta({
-  layout: "admin",
-});
+import { ExclamationCircleIcon } from "@heroicons/vue/24/outline";

 // TODO implement UI for this page

@@ -142,7 +156,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(),
    );
@@ -170,7 +184,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(),
    );
@@ -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="{
@@ -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>

@@ -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>
@@ -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>
@@ -29,7 +29,7 @@
        class="w-full sm:w-fit"
        @click="() => createCollection()"
      >
-        {{ $t("create") }}
+        {{ $t("common.create") }}
      </LoadingButton>
      <button
        ref="cancelButtonRef"
@@ -0,0 +1,78 @@
+<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>
@@ -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,
@@ -0,0 +1,115 @@
+<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">{{ $t("common.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"
+      >
+        {{ $t("common.noSelected") }}
+      </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 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>
@@ -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(
@@ -0,0 +1,488 @@
+<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">
+                    {{ $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">{{ $t("common.close") }}</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
+                        v-if="section.options.length <= 10"
+                        class="gap-3 grid grid-cols-2"
+                      >
+                        <div
+                          v-for="(option, optionIdx) in section.options"
+                          :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}`"
+                                v-model="
+                                  (optionValues[section.param] as any)[
+                                    option.param
+                                  ]
+                                "
+                                :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.param)
+                                "
+                              />
+                            </div>
+                          </div>
+                          <label
+                            :for="`filter-mobile-${section.param}-${optionIdx}`"
+                            class="min-w-0 flex-1 text-zinc-400"
+                            >{{ option.name }}</label
+                          >
+                        </div>
+                      </div>
+                      <MultiItemSelector
+                        v-else
+                        v-model="[optionValues[section.param] as any][0]"
+                        :items="section.options"
+                      />
+                    </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"
+                >
+                  {{ $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"
+                  />
+                </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',
+                        ]"
+                        @click="() => (currentSort = option.param)"
+                      >
+                        {{ option.name }}
+                      </button>
+                    </MenuItem>
+                  </div>
+                </MenuItems>
+              </transition>
+            </Menu>
+
+            <button
+              v-if="false"
+              type="button"
+              class="-m-2 ml-5 p-2 text-zinc-500 hover:text-zinc-400 sm:ml-7"
+            >
+              <span class="sr-only">{{ $t("store.view.srViewGrid") }}</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"> {{ $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">
+            {{ $t("store.view.srGames") }}
+          </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 v-if="section.options.length <= 10" class="space-y-4">
+                    <div
+                      v-for="(option, optionIdx) in section.options"
+                      :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}-${optionIdx}`"
+                            v-model="
+                              (optionValues[section.param] as any)[option.param]
+                            "
+                            :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}-${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.param"
+                          />
+                        </div>
+                      </div>
+                      <label
+                        :for="`filter-${section.param}-${optionIdx}`"
+                        class="text-sm text-zinc-400"
+                        >{{ option.name }}</label
+                      >
+                    </div>
+                  </div>
+                  <MultiItemSelector
+                    v-else
+                    v-model="[optionValues[section.param] as any][0]"
+                    :items="section.options"
+                  />
+                </DisclosurePanel>
+              </Disclosure>
+            </form>
+
+            <!-- Product grid -->
+            <div
+              v-if="games?.length ?? 0 > 0"
+              ref="product-grid"
+              class="relative lg:col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
+            >
+              <!-- Your content -->
+              <GamePanel
+                v-for="game in games"
+                :key="game.id"
+                :game="game"
+                :href="`/store/${game.id}`"
+                :show-title-description="showGamePanelTextDecoration"
+              />
+              <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">{{
+                $t("common.noResults")
+              }}</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 { GameModel, GameTagModel } from "~/prisma/client/models";
+import MultiItemSelector from "./MultiItemSelector.vue";
+const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
+
+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<GameTagModel>>>("/api/v1/store/tags");
+
+const sorts: Array<StoreSortOption> = [
+  {
+    name: "Default",
+    param: "default",
+  },
+  {
+    name: "Newest",
+    param: "newest",
+  },
+  {
+    name: "Recently Added",
+    param: "recent",
+  },
+];
+const currentSort = ref(sorts[0].param);
+
+const options: Array<StoreFilterOption> = [
+  ...(tags.length > 0
+    ? [
+        {
+          name: "Tags",
+          param: "tags",
+          multiple: true,
+          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<{
+  [key: string]: string | undefined | { [key: string]: boolean | undefined };
+}>(
+  Object.fromEntries(
+    options.map((v) => [v.param, v.multiple ? {} : undefined]),
+  ),
+);
+Object.assign(optionValues.value, props.prefilled);
+
+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<GameModel>>>();
+const loading = ref(false);
+
+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<{
+    results: Array<SerializeObject<GameModel>>;
+    count: number;
+  }>(
+    `/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}${query ? "&" + query : ""}`,
+  );
+  if (resetGames) {
+    games.value = newValues.results;
+    if (import.meta.client) await reset();
+  } else {
+    games.value.push(...newValues.results);
+  }
+  canLoadMore.value = games.value.length < newValues.count;
+  loading.value = false;
+}
+watch(filterQuery, (newUrl) => {
+  updateGames(newUrl, true);
+});
+watch(currentSort, (_) => {
+  updateGames(filterQuery.value, true);
+});
+
+await updateGames(filterQuery.value, true);
+</script>
@@ -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>