fix: collection creation & overview hover styles

components/AddLibraryButton.vue

@@ -37,7 +37,9 @@
             >
               Collections
             </div>
-            <div class="flex flex-col gap-y-2 py-1 max-h-[150px] overflow-y-auto">
+            <div
+              class="flex flex-col gap-y-2 py-1 max-h-[150px] overflow-y-auto"
+            >
               <div
                 v-if="collections.length === 0"
                 class="px-3 py-2 text-sm text-zinc-500"
@@ -83,7 +85,7 @@
 
   <CreateCollectionModal
     v-model="createCollectionModal"
-    :game-id="props.gameId"
+    :gameId="props.gameId"
   />
 </template>
 

components/CreateCollectionModal.vue

@@ -48,6 +48,8 @@
 import { ref } from "vue";
 import { DialogTitle } from "@headlessui/vue";
 import ModalTemplate from "~/drop-base/components/ModalTemplate.vue";
+import type { CollectionEntry, Game } from "@prisma/client";
+import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
   gameId?: string;
@@ -77,10 +79,13 @@ async function createCollection() {
 
     // Add the game if provided
     if (props.gameId) {
-      await $fetch(`/api/v1/collection/${response.id}/entry`, {
+      const entry = await $fetch<
+        CollectionEntry & { game: SerializeObject<Game> }
+      >(`/api/v1/collection/${response.id}/entry`, {
         method: "POST",
         body: { id: props.gameId },
       });
+      response.entries.push(entry);
     }
 
     collections.value.push(response);

pages/library/game/[id]/index.vue

@@ -64,7 +64,7 @@
       </div>
     </div>
 
-    <div class="min-h-[20vh]" />
+    <div class="min-h-[300px]" />
   </div>
 </template>
 

pages/library/index.vue

@@ -19,7 +19,7 @@
       <div
         v-for="collection in collections"
         :key="collection.id"
-        class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full"
+        class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
       >
         <NuxtLink
           class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800"
@@ -36,9 +36,9 @@
         <!-- Delete button (only show for non-default collections) -->
         <button
           @click="() => (currentlyDeleting = collection)"
-          class="px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800"
+          class="px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group"
         >
-          <TrashIcon class="h-5 w-5 text-zinc-400 hover:text-red-400" />
+          <TrashIcon class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]" />
         </button>
       </div>
 

server/api/v1/collection/[id]/entry.post.ts

@@ -20,6 +20,5 @@ export default defineEventHandler(async (h3) => {
   if (!gameId)
     throw createError({ statusCode: 400, statusMessage: "Game ID required" });
 
-  await userLibraryManager.collectionAdd(gameId, id, userId);
-  return;
+  return await userLibraryManager.collectionAdd(gameId, id, userId);
 });

server/internal/userlibrary/index.ts

@@ -78,7 +78,7 @@ class UserLibraryManager {
   }
 
   async collectionAdd(gameId: string, collectionId: string, userId: string) {
-    await prisma.collectionEntry.upsert({
+    return await prisma.collectionEntry.upsert({
       where: {
         collectionId_gameId: {
           collectionId,
@@ -93,6 +93,9 @@ class UserLibraryManager {
         gameId,
       },
       update: {},
+      include: {
+        game: true,
+      },
     });
   }