fix: collection creation & overview hover styles

server/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>
 

server/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);