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
2025-11-13 08:12:40 +10:00 · 2025-07-30 13:40:49 +10:00
parent 1ae051f066
commit 8363de2eed
97 changed files with 3506 additions and 524 deletions
--- a/components/Modal/CreateCollection.vue
+++ b/components/Modal/CreateCollection.vue
@ -0,0 +1,115 @@
+<template>
+  <ModalTemplate v-model="open">
+    <template #default>
+      <div>
+        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
+          {{ $t("library.collection.create") }}
+        </DialogTitle>
+        <p class="mt-1 text-zinc-400 text-sm">
+          {{ $t("library.collection.createDesc") }}
+        </p>
+      </div>
+      <div class="mt-2">
+        <form @submit.prevent="() => createCollection()">
+          <input
+            v-model="collectionName"
+            type="text"
+            :placeholder="$t('library.collection.namePlaceholder')"
+            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="createCollectionLoading"
+        :disabled="!collectionName"
+        class="w-full sm:w-fit"
+        @click="() => createCollection()"
+      >
+        {{ $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 { CollectionEntryModel, GameModel } from "~/prisma/client/models";
+import type { SerializeObject } from "nitropack";
+
+const props = defineProps<{
+  gameId?: string;
+}>();
+
+const emit = defineEmits<{
+  created: [collectionId: string];
+}>();
+
+const open = defineModel<boolean>({ required: true });
+
+const { t } = useI18n();
+const collectionName = ref("");
+const createCollectionLoading = ref(false);
+const collections = await useCollections();
+
+async function createCollection() {
+  if (!collectionName.value || createCollectionLoading.value) return;
+
+  try {
+    createCollectionLoading.value = true;
+
+    // Create the collection
+    const response = await $dropFetch("/api/v1/collection", {
+      method: "POST",
+      body: { name: collectionName.value },
+    });
+
+    // Add the game if provided
+    if (props.gameId) {
+      const entry = await $dropFetch<
+        CollectionEntryModel & { game: SerializeObject<GameModel> }
+      >(`/api/v1/collection/${response.id}/entry`, {
+        method: "POST",
+        body: { id: props.gameId },
+      });
+      response.entries.push(entry);
+    }
+
+    collections.value.push(response);
+
+    // Reset and emit
+    collectionName.value = "";
+    open.value = false;
+
+    emit("created", response.id);
+  } catch (error) {
+    console.error("Failed to create collection:", error);
+
+    const err = error as { statusMessage?: string };
+    createModal(
+      ModalType.Notification,
+      {
+        title: t("errors.library.collection.create.title"),
+        description: t("errors.library.collection.create.desc", [
+          err?.statusMessage ?? t("errors.unknown"),
+        ]),
+      },
+      (_, c) => c(),
+    );
+  } finally {
+    createCollectionLoading.value = false;
+  }
+}
+</script>