feat: mobile ui and other design

components/AddLibraryButton.vue

@@ -4,7 +4,7 @@
       :loading="isLibraryLoading"
       @click="() => toggleLibrary()"
       :style="'none'"
-      class="transition inline-flex items-center gap-x-2 rounded-l-md bg-white/10 hover:bg-white/30 text-zinc-100 backdrop-blur px-5 py-3"
+      class="transition w-48 inline-flex items-center justify-center gap-x-2 rounded-l-md bg-white/10 hover:bg-white/15 text-zinc-100 backdrop-blur px-5 py-3"
     >
       {{ inLibrary ? "In Library" : "Add to Library" }}
       <CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
@@ -37,7 +37,7 @@
             >
               Collections
             </div>
-            <div class="flex flex-col gap-y-2 py-1">
+            <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"
@@ -54,6 +54,7 @@
                     active ? 'bg-zinc-700/90' : '',
                     'group flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-zinc-200',
                   ]"
+                  @click="() => toggleCollection(collection.id)"
                 >
                   <span>{{ collection.name }}</span>
                   <CheckIcon
@@ -104,7 +105,7 @@ const inLibrary = computed(
   () => library.value.entries.findIndex((e) => e.gameId == props.gameId) != -1
 );
 const inCollections = computed(() =>
-  collections.value.filter(
+  collections.value.map(
     (e) => e.entries.findIndex((e) => e.gameId == props.gameId) != -1
   )
 );
@@ -132,4 +133,31 @@ async function toggleLibrary() {
     isLibraryLoading.value = false;
   }
 }
+
+async function toggleCollection(id: string) {
+  try {
+    const collection = collections.value.find((e) => e.id == id);
+    if (!collection) return;
+    const index = collection.entries.findIndex((e) => e.gameId == props.gameId);
+
+    await $fetch(`/api/v1/collection/${id}/entry`, {
+      method: index == -1 ? "POST" : "DELETE",
+      body: {
+        id: props.gameId,
+      },
+    });
+
+    await refreshCollection(id);
+  } catch (e: any) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: "Failed to add game to library",
+        description: `Drop couldn't add this game to your library: ${e?.statusMessage}`,
+      },
+      (_, c) => c()
+    );
+  } finally {
+  }
+}
 </script>

components/CreateCollectionModal.vue

@@ -19,6 +19,7 @@
         :loading="createCollectionLoading"
         :disabled="!collectionName"
         @click="() => createCollection()"
+        class="w-full sm:w-fit"
       >
         Create
       </LoadingButton>