squash: AdenMGB collection design & backend work

Update index.post.ts to implement saving collections functionality

Update index.get.ts to verify if collection exists and if user can access it

Update index.delete.ts to ask questions and not be so nonchalant

Update entry.post.ts

Update entry.delete.ts to do it better

Update index.vue to add functionality to the add to library button + fidgit with image

Update index.vue to also add add to library functionality, but no fidget :(

Update entry.post.ts to infact not remove it

Update index.ts

Update index.vue to manage collections from store page

Update index.ts to restrut for ahhhh

Update index.vue too add collection control to carosel

Update index.vue fix minor issue

Update index.vue to fix dropdown modal bug

Create library.vue for page layout

Create index.vue for library game details pane

Create index.vue for viewing collections pane

Create DeleteCollectionModal.vue component

Create CreateCollectionModal.vue component

Update AddLibraryButton.vue with dropdown :D

Update index.vue to use new components

Update index.vue for more components :O

Update entry.post.ts to not not return success, it'll figure it out

Update entry.delete.ts to not return...

components/AddLibraryButton.vue

@@ -1,23 +1,34 @@
 <template>
-  <div class="inline-flex divide-x divide-zinc-900">
+  <div class="flex items-stretch">
     <button
       type="button"
-      class="inline-flex justify-center items-center gap-x-2 rounded-l-md aspect-[7/2] px-3 py-2 bg-blue-600 grow text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+      @click="addToLibrary"
+      :disabled="isProcessing"
+      class="inline-flex items-center gap-x-2 rounded-l-md bg-white/10 backdrop-blur px-2.5 py-3 text-base font-semibold font-display text-white shadow-sm hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20 disabled:opacity-50 disabled:cursor-not-allowed"
     >
-      Add to Library
-      <PlusIcon class="-mr-0.5 size-6" aria-hidden="true" />
+      {{ isProcessing 
+        ? 'Processing...' 
+        : isInLibrary 
+          ? 'Remove from Library' 
+          : 'Add to Library' 
+      }}
+      <PlusIcon 
+        class="-mr-0.5 h-5 w-5" 
+        :class="[
+          { 'animate-spin': isProcessing },
+          { 'rotate-45': isInLibrary }
+        ]"
+        aria-hidden="true" 
+      />
     </button>
-    <Menu as="div" class="relative inline-block text-left grow">
-      <div class="h-full">
-        <MenuButton
-          class="inline-flex h-full w-full justify-center items-center rounded-r-md bg-blue-600 p-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-        >
-          <ChevronDownIcon
-            class="size-5"
-            aria-hidden="true"
-          />
-        </MenuButton>
-      </div>
+
+    <!-- Collections dropdown -->
+    <Menu as="div" class="relative">
+      <MenuButton
+        class="inline-flex items-center rounded-r-md border-l border-zinc-950/10 bg-white/10 backdrop-blur py-3.5 w-5 justify-center hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
+      >
+        <ChevronDownIcon class="h-5 w-5 text-white" aria-hidden="true" />
+      </MenuButton>
 
       <transition
         enter-active-class="transition ease-out duration-100"
@@ -27,61 +38,37 @@
         leave-from-class="transform opacity-100 scale-100"
         leave-to-class="transform opacity-0 scale-95"
       >
-        <MenuItems
-          class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
-        >
-          <div class="py-1">
-            <MenuItem v-slot="{ active }">
-              <a
-                href="#"
+        <MenuItems class="absolute right-0 z-10 mt-2 w-72 origin-top-right rounded-md bg-zinc-800/90 backdrop-blur shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div class="p-2">
+            <div class="px-3 py-2 text-sm font-semibold text-zinc-400">Collections</div>
+            <div v-if="collections.filter(c => !c.isDefault).length === 0" class="px-3 py-2 text-sm text-zinc-500">
+              No custom collections available
+            </div>
+            <MenuItem v-for="collection in collections.filter(c => !c.isDefault)" :key="collection.id" v-slot="{ active }">
+              <button
+                @click="toggleCollection(collection.id)"
                 :class="[
-                  active
-                    ? 'bg-gray-100 text-gray-900 outline-none'
-                    : 'text-gray-700',
-                  'block px-4 py-2 text-sm',
+                  active ? 'bg-zinc-700/90' : '',
+                  'group flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-zinc-200'
                 ]"
-                >Account settings</a
               >
+                <span>{{ collection.name }}</span>
+                <CheckIcon
+                  v-if="collectionStates[collection.id]"
+                  class="h-5 w-5 text-blue-400"
+                  aria-hidden="true"
+                />
+              </button>
             </MenuItem>
-            <MenuItem v-slot="{ active }">
-              <a
-                href="#"
-                :class="[
-                  active
-                    ? 'bg-gray-100 text-gray-900 outline-none'
-                    : 'text-gray-700',
-                  'block px-4 py-2 text-sm',
-                ]"
-                >Support</a
+            <div class="border-t border-zinc-700 mt-1 pt-1">
+              <button
+                @click="$emit('create-collection')"
+                class="group flex w-full items-center px-3 py-2 text-sm text-blue-400 hover:bg-zinc-700/90 rounded-md"
               >
-            </MenuItem>
-            <MenuItem v-slot="{ active }">
-              <a
-                href="#"
-                :class="[
-                  active
-                    ? 'bg-gray-100 text-gray-900 outline-none'
-                    : 'text-gray-700',
-                  'block px-4 py-2 text-sm',
-                ]"
-                >License</a
-              >
-            </MenuItem>
-            <form method="POST" action="#">
-              <MenuItem v-slot="{ active }">
-                <button
-                  type="submit"
-                  :class="[
-                    active
-                      ? 'bg-gray-100 text-gray-900 outline-none'
-                      : 'text-gray-700',
-                    'block w-full px-4 py-2 text-left text-sm',
-                  ]"
-                >
-                  Sign out
-                </button>
-              </MenuItem>
-            </form>
+                <PlusIcon class="mr-2 h-4 w-4" />
+                Add to new collection
+              </button>
+            </div>
           </div>
         </MenuItems>
       </transition>
@@ -90,6 +77,28 @@
 </template>
 
 <script setup lang="ts">
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import { ChevronDownIcon, PlusIcon } from "@heroicons/vue/20/solid";
+import { PlusIcon, ChevronDownIcon, CheckIcon } from "@heroicons/vue/24/solid";
+import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
+
+const props = defineProps<{
+  gameId: string
+  isProcessing: boolean
+  isInLibrary: boolean
+  collections: Collection[]
+  collectionStates: { [key: string]: boolean }
+}>();
+
+const emit = defineEmits<{
+  'add-to-library': [gameId: string]
+  'toggle-collection': [gameId: string, collectionId: string]
+  'create-collection': []
+}>();
+
+const addToLibrary = () => {
+  emit('add-to-library', props.gameId);
+};
+
+const toggleCollection = (collectionId: string) => {
+  emit('toggle-collection', props.gameId, collectionId);
+};
 </script>