From 6317ad2657f5e413c92c960a626541134d9fc5c5 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 28 Jan 2025 17:01:34 +1100
Subject: [PATCH] fix: collection creation & overview hover styles

---
 components/AddLibraryButton.vue             | 6 ++++--
 components/CreateCollectionModal.vue        | 7 ++++++-
 pages/library/game/[id]/index.vue           | 2 +-
 pages/library/index.vue                     | 6 +++---
 server/api/v1/collection/[id]/entry.post.ts | 3 +--
 server/internal/userlibrary/index.ts        | 5 ++++-
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/components/AddLibraryButton.vue b/components/AddLibraryButton.vue
index e88516c..3978aba 100644
--- a/components/AddLibraryButton.vue
+++ b/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>
 
diff --git a/components/CreateCollectionModal.vue b/components/CreateCollectionModal.vue
index bb397a5..73e6569 100644
--- a/components/CreateCollectionModal.vue
+++ b/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);
diff --git a/pages/library/game/[id]/index.vue b/pages/library/game/[id]/index.vue
index 794bff6..a2a20db 100644
--- a/pages/library/game/[id]/index.vue
+++ b/pages/library/game/[id]/index.vue
@@ -64,7 +64,7 @@
       </div>
     </div>
 
-    <div class="min-h-[20vh]" />
+    <div class="min-h-[300px]" />
   </div>
 </template>
 
diff --git a/pages/library/index.vue b/pages/library/index.vue
index a480a67..ccde1d9 100644
--- a/pages/library/index.vue
+++ b/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>
 
diff --git a/server/api/v1/collection/[id]/entry.post.ts b/server/api/v1/collection/[id]/entry.post.ts
index b869050..2356e43 100644
--- a/server/api/v1/collection/[id]/entry.post.ts
+++ b/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);
 });
diff --git a/server/internal/userlibrary/index.ts b/server/internal/userlibrary/index.ts
index eaaef9e..4bdb3ed 100644
--- a/server/internal/userlibrary/index.ts
+++ b/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,
+      },
     });
   }