feat(games): show games in library mode also

polylan_submitter/src/components/SteamLibraryCard.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { SteamGameOut } from "../api/types.gen";
+
+defineProps<{ game: SteamGameOut }>();
+
+const { t } = useI18n();
+
+// Not every game has a library capsule on Steam, fall back to the header + name
+const capsuleFailed = ref(false);
+</script>
+
+<template>
+  <div class="group relative aspect-[2/3] rounded-md overflow-hidden bg-base-200 hover:bg-base-100
+    shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2 hover:scale-[1.05]">
+    <a :href="game.store_url" target="_blank" rel="noopener noreferrer" :title="game.name" class="block w-full h-full">
+      <img v-if="!capsuleFailed" :src="game.library_image" :alt="game.name" loading="lazy"
+        class="w-full h-full object-cover" @error="capsuleFailed = true" />
+      <div v-else class="w-full h-full flex flex-col justify-center gap-4 p-3 bg-gradient-to-b from-base-100 to-base-300">
+        <img :src="game.header_image" :alt="game.name" loading="lazy" class="w-full rounded-sm" />
+        <span class="text-center font-medium line-clamp-3">{{ game.name }}</span>
+      </div>
+    </a>
+
+    <!-- Opens the Steam client: launches the game if installed, offers to install it otherwise -->
+    <a :href="`steam://run/${game.steam_app_id}`" :title="t('games.play')"
+      class="steam-play absolute bottom-2 right-2 rounded-full w-10 h-10 flex items-center justify-center text-2xl
+      opacity-0 translate-y-1 transition-all group-hover:opacity-100 group-hover:translate-y-0 focus:opacity-100">
+      <i class="mdi mdi-play"></i>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.steam-play {
+  color: #ffffff;
+  background: linear-gradient(to right, #47bfff 5%, #1a44c2 95%);
+}
+
+.steam-play:hover {
+  background: linear-gradient(to right, #6fceff 5%, #2d5fd8 95%);
+}
+</style>