feat(games): show games in library mode also

polylan_submitter/src/Games.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { useTitle } from "@vueuse/core";
+import { useStorage, useTitle } from "@vueuse/core";
 import { gamesApiListEventSteamGames } from "./api";
 import type { SteamGameOut } from "./api/types.gen";
+import SteamLibraryCard from "./components/SteamLibraryCard.vue";
 import SteamStoreCard from "./components/SteamStoreCard.vue";
 
 interface Props {
@@ -17,6 +18,8 @@ useTitle(computed(() => t("games.title")));
 
 const games = ref<SteamGameOut[]>([]);
 const loading = ref(true);
+// Library (vertical covers) by default, the store cards show the prices
+const showPrices = useStorage("games.showPrices", true);
 
 onMounted(async () => {
   const response = await gamesApiListEventSteamGames({
@@ -33,11 +36,18 @@ onMounted(async () => {
   <div class="flex-1 bg-base-300 flex justify-center px-4 py-12">
     <div class="w-full max-w-7xl">
       <!-- Header -->
-      <div class="text-center mb-12">
+      <div class="text-center mb-8">
         <h1 class="text-5xl font-bold mb-4">{{ t("games.title") }}</h1>
         <p class="text-xl text-base-content/70">{{ t("games.subtitle") }}</p>
       </div>
 
+      <div class="flex justify-end mb-6">
+        <label class="label cursor-pointer gap-2">
+          <span>{{ t("games.showPrices") }}</span>
+          <input v-model="showPrices" type="checkbox" class="toggle toggle-primary" />
+        </label>
+      </div>
+
       <!-- Loading -->
       <div v-if="loading" class="flex justify-center py-20">
         <span class="loading loading-spinner loading-lg"></span>
@@ -47,9 +57,14 @@ onMounted(async () => {
         {{ t("games.empty") }}
       </p>
 
-      <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <div v-else-if="showPrices" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
         <SteamStoreCard v-for="game in games" :key="game.id" :game="game" />
       </div>
+
+      <div v-else
+        class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] sm:grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-4 sm:gap-6">
+        <SteamLibraryCard v-for="game in games" :key="game.id" :game="game" />
+      </div>
     </div>
   </div>
 </template>