From b487ed4346c43b3f2c0f721c4d723025296cece2 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 9 Jun 2025 13:52:42 +1000
Subject: [PATCH] chore: commit prototype

---
 components/GameCarousel.vue                   |   7 +-
 components/GamePanel.vue                      |  15 +--
 components/LanguageSelector.vue               |   5 +-
 components/Store/BigCarousel.vue              |  74 +++++++++++
 components/Store/SmallBento.vue               | 120 ++++++++++++++++++
 components/Store/SmallCarousel.vue            |  28 ++++
 components/Store/SmallFocused.vue             |  70 ++++++++++
 composables/store.ts                          |  42 ++++++
 i18n/locales/en_us.json                       |   1 +
 package.json                                  |   2 +-
 pages/store/index.vue                         | 111 +---------------
 .../migration.sql                             |  32 +++++
 prisma/models/content.prisma                  |   1 +
 prisma/models/store.prisma                    |  21 +++
 server/api/v1/store/recent.get.ts             |  35 -----
 server/api/v1/store/released.get.ts           |  16 ---
 server/api/v1/store/source.get.ts             |  51 ++++++++
 server/api/v1/store/updated.get.ts            |  28 ----
 server/internal/metadata/giantbomb.ts         |   1 +
 server/internal/metadata/igdb.ts              |   1 +
 server/internal/metadata/index.ts             |   1 +
 server/internal/metadata/pcgamingwiki.ts      |   1 +
 server/internal/metadata/types.d.ts           |   1 +
 server/internal/store/types.ts                |  43 +++++++
 yarn.lock                                     |   2 +-
 25 files changed, 506 insertions(+), 203 deletions(-)
 create mode 100644 components/Store/BigCarousel.vue
 create mode 100644 components/Store/SmallBento.vue
 create mode 100644 components/Store/SmallCarousel.vue
 create mode 100644 components/Store/SmallFocused.vue
 create mode 100644 composables/store.ts
 create mode 100644 prisma/migrations/20250609031527_add_store_changes/migration.sql
 create mode 100644 prisma/models/store.prisma
 delete mode 100644 server/api/v1/store/recent.get.ts
 delete mode 100644 server/api/v1/store/released.get.ts
 create mode 100644 server/api/v1/store/source.get.ts
 delete mode 100644 server/api/v1/store/updated.get.ts
 create mode 100644 server/internal/store/types.ts

diff --git a/components/GameCarousel.vue b/components/GameCarousel.vue
index 14ab80e..202707c 100644
--- a/components/GameCarousel.vue
+++ b/components/GameCarousel.vue
@@ -31,11 +31,8 @@
 </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<StoreRenderableItem>;
   min?: number;
   width?: number;
 }>();
@@ -43,7 +40,7 @@ const props = defineProps<{
 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: Ref<Array<StoreRenderableItem | undefined>> = computed(() =>
   Array(min.value)
     .fill(0)
     .map((_, i) => props.items[i]),
diff --git a/components/GamePanel.vue b/components/GamePanel.vue
index 9307ec1..6fa6988 100644
--- a/components/GamePanel.vue
+++ b/components/GamePanel.vue
@@ -2,11 +2,11 @@
   <NuxtLink
     v-if="game"
     :href="props.href ?? `/store/${game.id}`"
-    class="group relative w-48 h-64 rounded-lg overflow-hidden transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5"
+    class="group relative w-48 h-64 rounded-lg overflow-hidden transition-all duration-300 text-left hover:shadow-lg"
     @click="active = game.id"
   >
     <div
-      class="absolute inset-0 transition-all duration-300 group-hover:scale-110"
+      class="absolute inset-0 transition-all duration-300 group-hover:scale-105"
     >
       <img
         :src="useObject(game.mCoverObjectId)"
@@ -36,17 +36,8 @@
 </template>
 
 <script setup lang="ts">
-import type { SerializeObject } from "nitropack";
-
 const props = defineProps<{
-  game:
-    | SerializeObject<{
-        id: string;
-        mCoverObjectId: string;
-        mName: string;
-        mShortDescription: string;
-      }>
-    | undefined;
+  game: StoreRenderableItem | undefined;
   href?: string;
 }>();
 
diff --git a/components/LanguageSelector.vue b/components/LanguageSelector.vue
index 523b8e4..496f8e1 100644
--- a/components/LanguageSelector.vue
+++ b/components/LanguageSelector.vue
@@ -107,7 +107,10 @@ import {
   ListboxOptions,
 } from "@headlessui/vue";
 import { ChevronUpDownIcon } from "@heroicons/vue/16/solid";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+import {
+  ArrowTopRightOnSquareIcon,
+  CheckIcon,
+} from "@heroicons/vue/24/outline";
 import type { Locale } from "vue-i18n";
 
 const { locales, locale: currLocale, setLocale } = useI18n();
diff --git a/components/Store/BigCarousel.vue b/components/Store/BigCarousel.vue
new file mode 100644
index 0000000..a89da00
--- /dev/null
+++ b/components/Store/BigCarousel.vue
@@ -0,0 +1,74 @@
+<template>
+  <VueCarousel
+    v-if="source.length > 0"
+    :wrap-around="true"
+    :items-to-show="1"
+    :autoplay="15 * 1000"
+    :transition="500"
+    :pause-autoplay-on-hover="true"
+    class="store-carousel"
+  >
+    <VueSlide v-for="game in source" :key="game.id">
+      <div class="w-full h-full relative">
+        <div class="absolute inset-0">
+          <img
+            :src="useObject(game.mBannerObjectId)"
+            alt=""
+            class="size-full object-cover object-center"
+          />
+        </div>
+        <div
+          class="relative flex items-center justify-center w-full h-full bg-zinc-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
+        >
+          <div class="relative text-center">
+            <h3 class="text-base/7 font-semibold text-blue-300">
+              {{ props.title }}
+            </h3>
+            <h2
+              class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
+            >
+              {{ game.mName }}
+            </h2>
+            <p class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl">
+              {{ game.mShortDescription }}
+            </p>
+            <div>
+              <div
+                class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto"
+              >
+                <NuxtLink
+                  :href="`/store/${game.id}`"
+                  class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
+                  >{{ $t("store.lookAt") }}</NuxtLink
+                >
+                <AddLibraryButton :game-id="game.id" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </VueSlide>
+
+    <template #addons>
+      <CarouselPagination class="py-2" :items="source" />
+    </template>
+  </VueCarousel>
+  <div
+    v-else
+    class="w-full h-full flex items-center justify-center bg-zinc-950/50 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
+  >
+    <h2
+      class="uppercase text-xl font-bold tracking-tight text-zinc-700 sm:text-3xl"
+    >
+      {{ $t("store.noGame") }}
+    </h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TitleSourceValidatorType } from '~/server/internal/store/types';
+
+const props = defineProps<TitleSourceValidatorType>();
+
+const source = await useStoreSource(props.source, 12);
+</script>
diff --git a/components/Store/SmallBento.vue b/components/Store/SmallBento.vue
new file mode 100644
index 0000000..8848314
--- /dev/null
+++ b/components/Store/SmallBento.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <div class="px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+      <div class="sm:flex sm:items-baseline sm:justify-between">
+        <h2 class="text-2xl font-bold tracking-tight text-zinc-100">
+          {{ props.title }}
+        </h2>
+        <NuxtLink
+          href="#"
+          class="hidden text-sm font-semibold text-blue-600 hover:text-blue-500 sm:block"
+        >
+          <i18n-t keypath="store.exploreMore" tag="span" scope="global">
+            <template #arrow>
+              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+            </template>
+          </i18n-t>
+        </NuxtLink>
+      </div>
+
+      <div
+        class="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:grid-rows-2 sm:gap-x-6 lg:gap-8"
+      >
+        <!-- item 1 -->
+        <div
+          class="group relative aspect-2/1 overflow-hidden rounded-lg sm:row-span-2 sm:aspect-square"
+        >
+          <img
+            :src="useObject(source[0].mCoverObjectId)"
+            class="absolute size-full object-cover group-hover:opacity-75"
+          />
+          <div
+            aria-hidden="true"
+            class="transition absolute inset-0 bg-linear-to-b from-transparent to-black opacity-50"
+          />
+          <div class="absolute inset-0 flex items-end p-6">
+            <div>
+              <h3 class="font-semibold text-white">
+                <a href="#">
+                  <span class="absolute inset-0" />
+                  {{ source[0].mName }}
+                </a>
+              </h3>
+              <p aria-hidden="true" class="mt-1 text-sm text-white">
+                {{ source[0].mShortDescription }}
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- item 2 -->
+        <div
+          class="group relative aspect-2/1 overflow-hidden rounded-lg sm:aspect-auto"
+        >
+          <img
+            :src="useObject(source[1].mCoverObjectId)"
+            class="absolute size-full object-cover group-hover:opacity-75"
+          />
+          <div
+            aria-hidden="true"
+            class="transition absolute inset-0 bg-linear-to-b from-transparent to-black opacity-50"
+          />
+          <div class="absolute inset-0 flex items-end p-6">
+            <div>
+              <h3 class="font-semibold text-white">
+                <a href="#">
+                  <span class="absolute inset-0" />
+                  {{ source[1].mName }}
+                </a>
+              </h3>
+              <p aria-hidden="true" class="mt-1 text-sm text-white">
+                {{ source[1].mShortDescription }}
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- item 3 -->
+        <div
+          class="group relative aspect-2/1 overflow-hidden rounded-lg sm:aspect-auto"
+        >
+          <img
+            :src="useObject(source[2].mCoverObjectId)"
+            class="transition absolute size-full object-cover group-hover:opacity-75"
+          />
+          <div
+            aria-hidden="true"
+            class="absolute inset-0 bg-linear-to-b from-transparent to-black opacity-50"
+          />
+          <div class="absolute inset-0 flex items-end p-6">
+            <div>
+              <h3 class="font-semibold text-white">
+                <a href="#">
+                  <span class="absolute inset-0" />
+                  {{ source[2].mName }}
+                </a>
+              </h3>
+              <p aria-hidden="true" class="mt-1 text-sm text-white">
+                {{ source[2].mShortDescription }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-6 sm:hidden">
+        <i18n-t keypath="store.exploreMore" tag="span" scope="global">
+          <template #arrow>
+            <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+          </template>
+        </i18n-t>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TitleSourceValidatorType } from "~/server/internal/store/types";
+
+const props = defineProps<TitleSourceValidatorType>();
+
+const source = await useStoreSource(props.source, 3);
+</script>
diff --git a/components/Store/SmallCarousel.vue b/components/Store/SmallCarousel.vue
new file mode 100644
index 0000000..48eca08
--- /dev/null
+++ b/components/Store/SmallCarousel.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="px-4 sm:px-5 py-4" hydrate-on-visible>
+    <h1 class="text-zinc-100 text-2xl font-bold font-display">
+      {{ props.title }}
+    </h1>
+    <NuxtLink
+      href="#"
+      class="hidden text-sm font-semibold text-blue-600 hover:text-blue-500 sm:block"
+    >
+      <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="source" :min="12" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TitleSourceValidatorType } from "~/server/internal/store/types";
+
+const props = defineProps<TitleSourceValidatorType>();
+
+const source = await useStoreSource(props.source, 24);
+</script>
diff --git a/components/Store/SmallFocused.vue b/components/Store/SmallFocused.vue
new file mode 100644
index 0000000..c111521
--- /dev/null
+++ b/components/Store/SmallFocused.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="px-4 py-8 sm:px-6 sm:py-12">
+      <div v-if="source" class="relative overflow-hidden rounded-lg lg:h-96">
+        <div class="absolute inset-0">
+          <img
+            :src="useObject(source.mBannerObjectId)"
+            alt=""
+            class="size-full object-cover"
+          />
+        </div>
+        <div aria-hidden="true" class="relative h-96 w-full lg:hidden" />
+        <div aria-hidden="true" class="relative h-32 w-full lg:hidden" />
+        <div
+          class="absolute inset-x-0 bottom-0 rounded-br-lg rounded-bl-lg bg-black/75 p-6 backdrop-blur-sm backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96 lg:flex-col lg:items-start lg:rounded-tl-lg lg:rounded-br-none"
+        >
+          <div>
+            <h2 class="text-xl font-bold text-white">{{ source.mName }}</h2>
+            <p class="mt-1 text-sm text-gray-300">
+              {{ source.mShortDescription }}
+            </p>
+          </div>
+          <NuxtLink
+            href="#"
+            class="mt-6 flex shrink-0 items-center justify-center rounded-md border border-white/25 px-4 py-3 text-base font-medium text-white hover:bg-white/10 sm:mt-0 sm:ml-8 lg:ml-0 lg:w-full"
+          >
+            <i18n-t keypath="store.explore" tag="span" scope="global">
+              <template #arrow>
+                <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+              </template>
+            </i18n-t></NuxtLink
+          >
+        </div>
+      </div>
+      <div v-else class="relative overflow-hidden rounded-lg lg:h-96">
+        <div class="absolute inset-0 bg-zinc-950" />
+
+        <div aria-hidden="true" class="relative h-96 w-full lg:hidden" />
+        <div aria-hidden="true" class="relative h-32 w-full lg:hidden" />
+        <div
+          class="absolute inset-x-0 bottom-0 rounded-br-lg rounded-bl-lg bg-black/75 p-6 backdrop-blur-sm backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96 lg:flex-col lg:items-start lg:rounded-tl-lg lg:rounded-br-none"
+        >
+          <div>
+            <h2 class="text-xl font-bold text-zinc-400 uppercase">
+              {{ $t("store.noGame") }}
+            </h2>
+          </div>
+          <NuxtLink
+            href="#"
+            class="mt-6 flex shrink-0 items-center justify-center rounded-md border border-white/25 px-4 py-3 text-base font-medium text-white hover:bg-white/10 sm:mt-0 sm:ml-8 lg:ml-0 lg:w-full"
+          >
+            <i18n-t keypath="store.explore" tag="span" scope="global">
+              <template #arrow>
+                <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+              </template>
+            </i18n-t></NuxtLink
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { JustSourceValidatorType } from "~/server/internal/store/types";
+
+const props = defineProps<JustSourceValidatorType>();
+
+const [source] = await useStoreSource(props.source, 1);
+</script>
diff --git a/composables/store.ts b/composables/store.ts
new file mode 100644
index 0000000..9231eef
--- /dev/null
+++ b/composables/store.ts
@@ -0,0 +1,42 @@
+import type { SerializeObject } from "nitropack";
+import type { Company, Game } from "~/prisma/client";
+import type { StoreComponentSource } from "~/server/internal/store/types";
+
+export type StoreRenderableItem = SerializeObject<Game | Company>;
+
+const internalSourceCache: Map<typeof StoreComponentSource.infer, string[]> =
+  new Map();
+const internalGameCache: Map<string, StoreRenderableItem> = new Map();
+
+async function unpackSource(
+  source: typeof StoreComponentSource.infer,
+  amount?: number,
+): Promise<Array<StoreRenderableItem>> {
+  const gameIds = internalSourceCache.get(source)!.slice(0, amount);
+  const games = gameIds.map((e) => internalGameCache.get(e)!);
+  return games;
+}
+export async function useStoreSource(
+  source: typeof StoreComponentSource.infer,
+  amount?: number,
+): Promise<Array<StoreRenderableItem>> {
+  if (internalSourceCache.has(source)) {
+    return unpackSource(source, amount);
+  }
+
+  const results = (await $dropFetch<unknown>("/api/v1/store/source", {
+    query: {
+      ...source,
+      amount,
+    },
+  })) as Array<StoreRenderableItem>;
+
+  const gameIds = [];
+  for (const result of results) {
+    gameIds.push(result.id);
+    internalGameCache.set(result.id, result);
+  }
+  internalSourceCache.set(source, gameIds);
+
+  return unpackSource(source, amount);
+}
diff --git a/i18n/locales/en_us.json b/i18n/locales/en_us.json
index c7f9bda..939680e 100644
--- a/i18n/locales/en_us.json
+++ b/i18n/locales/en_us.json
@@ -467,6 +467,7 @@
   "settings": "Settings",
   "store": {
     "commingSoon": "coming soon",
+    "explore": "Explore {arrow}",
     "exploreMore": "Explore more {arrow}",
     "images": "Game Images",
     "lookAt": "Check it out",
diff --git a/package.json b/package.json
index 2fb2212..e993237 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "jdenticon": "^3.3.0",
     "luxon": "^3.6.1",
     "micromark": "^4.0.1",
-    "nuxt": "^3.17.4",
+    "nuxt": "^3.17.5",
     "nuxt-security": "2.2.0",
     "prisma": "^6.7.0",
     "sanitize-filename": "^1.6.3",
diff --git a/pages/store/index.vue b/pages/store/index.vue
index b9c1f80..6596204 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -1,115 +1,18 @@
 <template>
   <div class="w-full flex flex-col overflow-x-hidden">
     <!-- Hero section -->
-    <VueCarousel
-      v-if="recent.length > 0"
-      :wrap-around="true"
-      :items-to-show="1"
-      :autoplay="15 * 1000"
-      :transition="500"
-      :pause-autoplay-on-hover="true"
-      class="store-carousel"
-    >
-      <VueSlide v-for="game in recent" :key="game.id">
-        <div class="w-full h-full relative">
-          <div class="absolute inset-0">
-            <img
-              :src="useObject(game.mBannerObjectId)"
-              alt=""
-              class="size-full object-cover object-center"
-            />
-          </div>
-          <div
-            class="relative flex items-center justify-center w-full h-full bg-zinc-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
-          >
-            <div class="relative text-center">
-              <h3 class="text-base/7 font-semibold text-blue-300">
-                {{ $t("store.recentlyAdded") }}
-              </h3>
-              <h2
-                class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
-              >
-                {{ game.mName }}
-              </h2>
-              <p class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl">
-                {{ game.mShortDescription }}
-              </p>
-              <div>
-                <div
-                  class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto"
-                >
-                  <NuxtLink
-                    :href="`/store/${game.id}`"
-                    class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
-                    >{{ $t("store.lookAt") }}</NuxtLink
-                  >
-                  <AddLibraryButton :game-id="game.id" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </VueSlide>
+    <StoreBigCarousel :source="{ name: 'newlyAdded' }" title="Newly added" />
 
-      <template #addons>
-        <CarouselPagination class="py-2" :items="recent" />
-      </template>
-    </VueCarousel>
-    <div
-      v-else
-      class="w-full h-full flex items-center justify-center bg-zinc-950/50 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
-    >
-      <h2
-        class="uppercase text-xl font-bold tracking-tight text-zinc-700 sm:text-3xl"
-      >
-        {{ $t("store.noGame") }}
-      </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>
+    <StoreSmallBento :source="{ name: 'companies' }" title="Find by company" />
+    <StoreSmallCarousel
+      :source="{ name: 'newlyReleased' }"
+      title="Newly released"
+    />
+    <StoreSmallFocused :source="{ name: 'featured' }" title="Featured" />
   </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();
 
 useHead({
diff --git a/prisma/migrations/20250609031527_add_store_changes/migration.sql b/prisma/migrations/20250609031527_add_store_changes/migration.sql
new file mode 100644
index 0000000..fb6f3cd
--- /dev/null
+++ b/prisma/migrations/20250609031527_add_store_changes/migration.sql
@@ -0,0 +1,32 @@
+/*
+  Warnings:
+
+  - Added the required column `mCoverObjectId` to the `Company` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- CreateEnum
+CREATE TYPE "StoreComponentType" AS ENUM ('BigCarousel', 'SmallCarousel');
+
+-- AlterTable
+ALTER TABLE "Company" ADD COLUMN     "mCoverObjectId" TEXT NOT NULL;
+
+-- CreateTable
+CREATE TABLE "StorePage" (
+    "url" TEXT NOT NULL,
+    "acls" TEXT[] DEFAULT ARRAY[]::TEXT[],
+
+    CONSTRAINT "StorePage_pkey" PRIMARY KEY ("url")
+);
+
+-- CreateTable
+CREATE TABLE "StoreComponent" (
+    "id" TEXT NOT NULL,
+    "type" "StoreComponentType" NOT NULL,
+    "configuration" JSONB NOT NULL,
+    "pageUrl" TEXT,
+
+    CONSTRAINT "StoreComponent_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "StoreComponent" ADD CONSTRAINT "StoreComponent_pageUrl_fkey" FOREIGN KEY ("pageUrl") REFERENCES "StorePage"("url") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/prisma/models/content.prisma b/prisma/models/content.prisma
index 43e67fd..aec904b 100644
--- a/prisma/models/content.prisma
+++ b/prisma/models/content.prisma
@@ -157,6 +157,7 @@ model Company {
     mShortDescription String
     mDescription      String
     mLogoObjectId     String
+    mCoverObjectId    String
     mBannerObjectId   String
     mWebsite          String
 
diff --git a/prisma/models/store.prisma b/prisma/models/store.prisma
new file mode 100644
index 0000000..24a1378
--- /dev/null
+++ b/prisma/models/store.prisma
@@ -0,0 +1,21 @@
+model StorePage {
+    url        String           @id
+    components StoreComponent[]
+
+    acls String[] @default([]) // Empty ACL means just "store:read"
+}
+
+enum StoreComponentType {
+    BigCarousel
+    SmallCarousel
+}
+
+model StoreComponent {
+    id String @id
+
+    type          StoreComponentType
+    configuration Json
+
+    pageUrl String?
+    page    StorePage? @relation(fields: [pageUrl], references: [url])
+}
diff --git a/server/api/v1/store/recent.get.ts b/server/api/v1/store/recent.get.ts
deleted file mode 100644
index f4bb39a..0000000
--- a/server/api/v1/store/recent.get.ts
+++ /dev/null
@@ -1,35 +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({
-    select: {
-      id: true,
-      mName: true,
-      mShortDescription: true,
-      mCoverObjectId: true,
-      mBannerObjectId: true,
-      developers: {
-        select: {
-          id: true,
-          mName: true,
-        },
-      },
-      publishers: {
-        select: {
-          id: true,
-          mName: true,
-        },
-      },
-    },
-    orderBy: {
-      created: "desc",
-    },
-    take: 8,
-  });
-
-  return games;
-});
diff --git a/server/api/v1/store/released.get.ts b/server/api/v1/store/released.get.ts
deleted file mode 100644
index 37c729c..0000000
--- 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/source.get.ts b/server/api/v1/store/source.get.ts
new file mode 100644
index 0000000..22844d9
--- /dev/null
+++ b/server/api/v1/store/source.get.ts
@@ -0,0 +1,51 @@
+import { ArkErrors } from "arktype";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+import { StoreComponentSource } from "~/server/internal/store/types";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserACL(h3, ["store:read"]);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const rawQuery = getQuery(h3);
+  const query = StoreComponentSource(rawQuery);
+  if (query instanceof ArkErrors)
+    throw createError({ statusCode: 400, statusMessage: query.summary });
+
+  const amount = rawQuery.amount ? parseInt(rawQuery.amount.toString()) : 12;
+
+  switch (query.name) {
+    case "newlyAdded":
+      return await prisma.game.findMany({ take: amount });
+    case "newlyReleased":
+      return await prisma.game.findMany({
+        orderBy: { mReleased: "desc" },
+        take: amount,
+      });
+    case "newlyUpdated":
+      return (
+        await prisma.gameVersion.findMany({
+          where: {
+            versionIndex: {
+              gte: 1,
+            },
+          },
+          select: {
+            game: true,
+          },
+          orderBy: {
+            created: "desc",
+          },
+          take: amount,
+        })
+      )
+        .map((e) => e.game)
+        .filter(
+          (thing, i, arr) => arr.findIndex((t) => t.id === thing.id) === i,
+        );
+    case "companies":
+      return await prisma.company.findMany({ take: amount });
+  }
+
+  return [];
+});
diff --git a/server/api/v1/store/updated.get.ts b/server/api/v1/store/updated.get.ts
deleted file mode 100644
index 520033e..0000000
--- 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;
-});
diff --git a/server/internal/metadata/giantbomb.ts b/server/internal/metadata/giantbomb.ts
index 176d808..b5c22fc 100644
--- a/server/internal/metadata/giantbomb.ts
+++ b/server/internal/metadata/giantbomb.ts
@@ -294,6 +294,7 @@ export class GiantBombProvider implements MetadataProvider {
 
       logo: createObject(company.image.icon_url),
       banner: createObject(company.image.screen_large_url),
+      cover: createObject(company.image.screen_large_url),
     };
 
     return metadata;
diff --git a/server/internal/metadata/igdb.ts b/server/internal/metadata/igdb.ts
index 877e061..7b5af74 100644
--- a/server/internal/metadata/igdb.ts
+++ b/server/internal/metadata/igdb.ts
@@ -498,6 +498,7 @@ export class IGDBProvider implements MetadataProvider {
 
         logo: logo,
         banner: logo,
+        cover: logo,
       };
 
       return metadata;
diff --git a/server/internal/metadata/index.ts b/server/internal/metadata/index.ts
index 8292bd1..d1863d4 100644
--- a/server/internal/metadata/index.ts
+++ b/server/internal/metadata/index.ts
@@ -321,6 +321,7 @@ export class MetadataHandler {
           mName: result.name,
           mShortDescription: result.shortDescription,
           mDescription: result.description,
+          mCoverObjectId: result.cover,
           mLogoObjectId: result.logo,
           mBannerObjectId: result.banner,
           mWebsite: result.website,
diff --git a/server/internal/metadata/pcgamingwiki.ts b/server/internal/metadata/pcgamingwiki.ts
index 8bdf593..cff3b5e 100644
--- a/server/internal/metadata/pcgamingwiki.ts
+++ b/server/internal/metadata/pcgamingwiki.ts
@@ -492,6 +492,7 @@ export class PCGamingWikiProvider implements MetadataProvider {
 
         logo: icon,
         banner: icon,
+        cover: icon,
       };
       return metadata;
     }
diff --git a/server/internal/metadata/types.d.ts b/server/internal/metadata/types.d.ts
index b5286a7..5e30577 100644
--- a/server/internal/metadata/types.d.ts
+++ b/server/internal/metadata/types.d.ts
@@ -58,6 +58,7 @@ export interface CompanyMetadata {
 
   logo: ObjectReference;
   banner: ObjectReference;
+  cover: ObjectReference;
   website: string;
 }
 
diff --git a/server/internal/store/types.ts b/server/internal/store/types.ts
new file mode 100644
index 0000000..2575e52
--- /dev/null
+++ b/server/internal/store/types.ts
@@ -0,0 +1,43 @@
+import type { Type } from "arktype";
+import { type } from "arktype";
+import type { StoreComponentType } from "~/prisma/client";
+
+export const StoreComponentSource = type({
+  name: type.enumerated(
+    "newlyAdded", // Sorted by added date
+    "newlyReleased", // Sorted by release date
+    "featured", // custom pool created by admin
+    "newlyUpdated", // newly updated (new version)
+    "companies", // random companies
+  ),
+  id: "string?",
+});
+
+export type StoreComponentSource = typeof StoreComponentSource.infer;
+
+export const TitleSourceValidator = type({
+  source: StoreComponentSource,
+  title: "string",
+});
+
+// Note: we can't infer types because Vue compiles types into runtime shit
+// AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
+export type TitleSourceValidatorType = {
+  source: StoreComponentSource;
+  title: string;
+};
+
+export const JustSourceValidator = type({
+  source: StoreComponentSource,
+});
+
+export type JustSourceValidatorType = {
+  source: StoreComponentSource;
+};
+
+export const storeComponentConfiguration: {
+  [key in StoreComponentType]: Type<unknown>;
+} = {
+  BigCarousel: TitleSourceValidator,
+  SmallCarousel: TitleSourceValidator,
+};
diff --git a/yarn.lock b/yarn.lock
index 6f4bdb9..9ed1e57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6567,7 +6567,7 @@ nuxt-security@2.2.0:
     unplugin-remove "^1.0.3"
     xss "^1.0.14"
 
-nuxt@^3.17.4:
+nuxt@^3.17.5:
   version "3.17.5"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.17.5.tgz#9d16ebed84e467f54cb78896ba97dbcf3afe657d"
   integrity sha512-HWTWpM1/RDcCt9DlnzrPcNvUmGqc62IhlZJvr7COSfnJq2lKYiBKIIesEaOF+57Qjw7TfLPc1DQVBNtxfKBxEw==