Toggle for showing title & description overlay on store page #51 (#130)

* #51 Adds settings page with showTitleDescriptionOnGamePanel

* Removes console.log

* Renames isHidden to system, adds missing system column on Game and fixes nitro plugin on fresh database

* Implements a different way to handle the placeholder image

* Removes system column on Game

* Groups settings keys together

* Removes unused i18n keys

* fix: fix eslints and other small tweaks

---------

Co-authored-by: Francois Ribemont <ribemont.francois@gmail.com>

components/GameCarousel.vue

@@ -7,7 +7,11 @@
           :key="gameIdx"
           class="justify-start"
         >
-          <GamePanel :game="game" />
+          <GamePanel
+            :game="game"
+            :href="game ? `/store/${game.id}` : undefined"
+            :show-title-description="showGamePanelTextDecoration"
+          />
         </VueSlide>
 
         <template #addons>
@@ -40,6 +44,10 @@ const props = defineProps<{
   width?: number;
 }>();
 
+const { showGamePanelTextDecoration } = await $dropFetch(
+  `/api/v1/admin/settings`,
+);
+
 const currentComponent = ref<HTMLDivElement>();
 
 const min = computed(() => Math.max(props.min ?? 8, props.items.length));

components/GamePanel.vue

@@ -1,44 +1,70 @@
 <template>
   <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"
-    @click="active = game.id"
+    v-if="game || defaultPlaceholder"
+    :href="href"
+    :class="{
+      '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"
   >
     <div
-      class="absolute inset-0 transition-all duration-300 group-hover:scale-110"
+      :class="{
+        'transition-all duration-300 group-hover:scale-110': animate,
+      }"
+      class="absolute inset-0"
     >
       <img
-        :src="useObject(game.mCoverObjectId)"
+        :src="imageProps.src"
         class="w-full h-full object-cover brightness-[90%]"
-        :class="{ active: active === game.id }"
-        :alt="game.mName"
+        :alt="imageProps.alt"
       />
       <div
         class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent"
       />
     </div>
 
-    <div class="absolute bottom-0 left-0 w-full p-3">
+    <div
+      v-if="showTitleDescription"
+      class="absolute bottom-0 left-0 w-full p-3"
+    >
       <h1
-        class="text-zinc-100 text-sm font-bold font-display group-hover:text-white transition-colors"
+        :class="{ 'group-hover:text-white transition-colors': animate }"
+        class="text-zinc-100 text-sm font-bold font-display"
       >
-        {{ game.mName }}
+        {{ game ? game.mName : $t("settings.admin.store.dropGameNamePlaceholder") }}
       </h1>
       <p
-        class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors"
+        :class="{
+          'group-hover:text-zinc-300 transition-colors': animate,
+        }"
+        class="text-zinc-400 text-xs line-clamp-2"
       >
-        {{ game.mShortDescription }}
+        {{
+          game
+            ? game.mShortDescription
+            : $t("settings.admin.store.dropGameDescriptionPlaceholder")
+        }}
       </p>
     </div>
   </NuxtLink>
-  <SkeletonCard v-else :message="$t('store.noGame')" />
+  <SkeletonCard
+    v-else-if="defaultPlaceholder === false"
+    :message="$t('store.noGame')"
+  />
 </template>
 
 <script setup lang="ts">
 import type { SerializeObject } from "nitropack";
 
-const props = defineProps<{
+const { t } = useI18n();
+const {
+  game,
+  href = undefined,
+  showTitleDescription = true,
+  animate = true,
+  defaultPlaceholder = false,
+} = defineProps<{
   game:
     | SerializeObject<{
         id: string;
@@ -46,11 +72,25 @@ const props = defineProps<{
         mName: string;
         mShortDescription: string;
       }>
-    | undefined;
+    | undefined
+    | null;
   href?: string;
+  showTitleDescription?: boolean;
+  animate?: boolean;
+  defaultPlaceholder?: boolean;
 }>();
 
-const active = useState();
+const imageProps = {
+  src: "",
+  alt: t("settings.admin.store.dropGameAltPlaceholder"),
+};
+
+if (game) {
+  imageProps.src = useObject(game.mCoverObjectId);
+  imageProps.alt = game.mName;
+} else if (defaultPlaceholder) {
+  imageProps.src = "/game-panel-placeholder.png";
+}
 </script>
 
 <style scoped>

components/OptionWrapper.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    :class="[
+      'transition border border-3 rounded-xl relative cursor-pointer',
+      active ? 'border-blue-600' : 'border-zinc-700',
+    ]"
+  >
+    <div v-if="active" class="absolute top-1 right-1 z-1">
+        <CheckIcon
+          class="rounded-full p-1.5 bg-blue-600 size-6 text-transparent stroke-3 stroke-zinc-900 font-bold"
+        />
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon } from '@heroicons/vue/24/solid';
+
+const { active = false } = defineProps<{ active?: boolean }>();
+</script>