feat: mobile ui and other design

.gitlab-ci.yml

@@ -46,5 +46,6 @@ build-arm64:
       if [ $CI_COMMIT_TAG ]; then
         docker image tag $IMAGE_NAME $PUBLISH_IMAGE_NAME
         docker image tag $IMAGE_NAME $PUBLISH_LATEST_IMAGE_NAME
-        docker push $PUBLISH_IMAGE_NAME $PUBLISH_LATEST_IMAGE_NAME
+        docker push $PUBLISH_IMAGE_NAME
-      fi
+        docker push $PUBLISH_LATEST_IMAGE_NAME
+      fi

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>

composables/collection.ts

@@ -18,6 +18,17 @@ export const useCollections = async () => {
   return state;
 };
 
+export async function refreshCollection(id: string) {
+  const state = useState<FullCollection[]>("collections");
+  const collection = await $fetch<FullCollection>(`/api/v1/collection/${id}`);
+  const index = state.value.findIndex((e) => e.id == id);
+  if (index == -1) {
+    state.value.push(collection);
+    return;
+  }
+  state.value[index] = collection;
+}
+
 export const useLibrary = async () => {
   // @ts-expect-error
   const state = useState<FullCollection>("library", () => undefined);

pages/library.vue

@@ -11,7 +11,7 @@
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
-          <div class="fixed inset-0 bg-gray-900/80" />
+          <div class="fixed inset-0 bg-zinc-900/80" />
         </TransitionChild>
 
         <div class="fixed inset-0 flex">
@@ -48,7 +48,9 @@
                 </div>
               </TransitionChild>
               <!-- Sidebar component, swap this element with another sidebar if you like -->
-              <LibraryDirectory />
+              <div class="bg-zinc-900">
+                <LibraryDirectory />
+              </div>
             </DialogPanel>
           </TransitionChild>
         </div>
@@ -64,25 +66,21 @@
     </div>
 
     <div
-      class="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-xs sm:px-6 lg:hidden"
+      class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
     >
       <button
         type="button"
-        class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
+        class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
         @click="sidebarOpen = true"
       >
         <span class="sr-only">Open sidebar</span>
         <Bars3Icon class="size-6" aria-hidden="true" />
       </button>
-      <div class="flex-1 text-sm/6 font-semibold text-gray-900">Dashboard</div>
+      <div
-      <a href="#">
+        class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
-        <span class="sr-only">Your profile</span>
+      >
-        <img
+        Library
-          class="size-8 rounded-full bg-gray-50"
+      </div>
-          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-          alt=""
-        />
-      </a>
     </div>
 
     <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 grow">
@@ -110,9 +108,13 @@ import {
   XMarkIcon,
 } from "@heroicons/vue/24/outline";
 
-const route = useRoute();
+const router = useRouter();
 const sidebarOpen = ref(false);
 
+router.afterEach(() => {
+  sidebarOpen.value = false;
+});
+
 useHead({
   title: "Library",
 });

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

@@ -1,65 +1,70 @@
 <template>
-  <div v-if="game" class="relative">
+  <div v-if="game">
-    <!-- Banner image -->
+    <!-- header -->
-    <div class="absolute top-0 inset-0 w-full rounded overflow-hidden">
+    <div class="relative">
-      <img
+      <!-- Banner image -->
-        :src="useObject(game.mBannerId)"
+      <div class="absolute top-0 inset-0 w-full rounded overflow-hidden">
-        class="w-full h-full object-cover blur-sm"
+        <img
-      />
+          :src="useObject(game.mBannerId)"
-    </div>
+          class="w-full h-full object-cover blur-sm"
-
+        />
-    <!-- Content -->
-    <div class="relative p-4">
-      <!-- Back button -->
-      <div class="flex items-center gap-x-3 mb-4">
-        <NuxtLink
-          to="/library"
-          class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center"
-        >
-          <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
-          Back to Collections
-        </NuxtLink>
       </div>
 
-      <div
+      <!-- Content -->
-        class="flex items-start gap-6 w-fit bg-zinc-900 bg-backdrop-blur p-4 rounded-xl"
+      <div class="p-4 relative">
-      >
+        <!-- Back button -->
-        <img
+        <div class="flex items-center gap-x-3 mb-4">
-          :src="useObject(game.mCoverId)"
+          <NuxtLink
-          class="w-32 h-auto rounded shadow-md transition-all duration-300 hover:scale-105 hover:rotate-[-2deg] hover:shadow-xl"
+            to="/library"
-          alt=""
+            class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center"
-        />
+          >
-        <div>
+            <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
-          <h1 class="text-3xl font-bold font-display text-zinc-100">
+            Back to Collections
-            {{ game.mName }}
+          </NuxtLink>
-          </h1>
+        </div>
-          <p class="mt-2 text-lg text-zinc-400">
+
-            {{ game.mShortDescription }}
+        <div
-          </p>
+          class="flex flex-col lg:flex-row items-center lg:items-start gap-6 w-full lg:w-fit bg-zinc-900 bg-backdrop-blur p-4 rounded-xl"
-          <!-- Buttons -->
+        >
-          <div class="mt-4 flex gap-x-3">
+          <img
-            <button
+            :src="useObject(game.mCoverId)"
-              type="button"
+            class="w-32 h-auto rounded shadow-md transition-all duration-300 hover:scale-105 hover:rotate-[-2deg] hover:shadow-xl"
-              class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            alt=""
-            >
+          />
-              Open in Launcher
+          <div>
-              <ArrowTopRightOnSquareIcon
+            <h1 class="text-3xl font-bold font-display text-zinc-100">
-                class="-mr-0.5 h-5 w-5"
+              {{ game.mName }}
-                aria-hidden="true"
+            </h1>
-              />
+            <p class="mt-2 text-lg text-zinc-400">
-            </button>
+              {{ game.mShortDescription }}
-            <AddLibraryButton class="hover:scale-105" :gameId="game.id" />
+            </p>
-            <NuxtLink
+            <!-- Buttons -->
-              :to="`/store/${game.id}`"
+            <div class="flex flex-col lg:flex-row mt-4 flex gap-3">
-              class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+              <button
-            >
+                type="button"
-              View in Store
+                class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-              <ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
+              >
-            </NuxtLink>
+                Open in Launcher
+                <ArrowTopRightOnSquareIcon
+                  class="-mr-0.5 h-5 w-5"
+                  aria-hidden="true"
+                />
+              </button>
+              <AddLibraryButton class="font-bold" :gameId="game.id" />
+              <NuxtLink
+                :to="`/store/${game.id}`"
+                class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+              >
+                View in Store
+                <ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
+              </NuxtLink>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div class="min-h-[20vh]" />
   </div>
 </template>
 

pages/library/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col p-8">
+  <div class="flex flex-col">
     <div class="max-w-2xl">
       <h2 class="text-2xl font-bold font-display text-zinc-100">
         Your Collections
@@ -13,47 +13,51 @@
     <TransitionGroup
       name="collection-list"
       tag="div"
-      class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+      class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
     >
       <!-- Collection buttons (wrap each in a div for grid layout) -->
-      <NuxtLink
+      <div
         v-for="collection in collections"
         :key="collection.id"
-        :href="`/library/collection/${collection.id}`"
+        class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full"
-        class="group relative rounded-lg bg-zinc-900/50 p-4 hover:bg-zinc-800/50 transition-all duration-200 text-left w-full"
       >
-        <h3 class="text-lg font-semibold text-zinc-100">
+        <NuxtLink
-          {{ collection.name }}
+          class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800"
-        </h3>
+          :href="`/library/collection/${collection.id}`"
-        <p class="mt-1 text-sm text-zinc-400">
+        >
-          {{ collection.entries.length }} game(s)
+          <h3 class="text-lg font-semibold text-zinc-100">
-        </p>
+            {{ collection.name }}
+          </h3>
+          <p class="mt-1 text-sm text-zinc-400">
+            {{ collection.entries.length }} game(s)
+          </p>
+        </NuxtLink>
 
         <!-- Delete button (only show for non-default collections) -->
         <button
           v-if="!collection.isDefault"
           @click=""
-          class="absolute top-1/2 -translate-y-1/2 right-2 p-1 rounded-md opacity-0 group-hover:opacity-100 hover:bg-zinc-700/50 transition-all duration-200"
+          class="px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800"
         >
           <TrashIcon class="h-5 w-5 text-zinc-400 hover:text-red-400" />
         </button>
-      </NuxtLink>
+      </div>
 
       <!-- Create new collection button (also wrap in div) -->
       <div>
         <button
           @click="collectionCreateOpen = true"
-          class="group relative rounded-lg border-2 border-dashed border-zinc-800 p-4 hover:border-zinc-700 hover:bg-zinc-900/30 transition-all duration-200 text-left w-full"
+          class="transition-all group relative rounded-lg border-2 border-dashed border-zinc-800 p-4 hover:border-zinc-700 hover:bg-zinc-900/30 transition-all duration-200 text-left w-full"
         >
           <div class="flex items-center gap-3">
             <PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300" />
             <h3
-              class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300"
+              class="transition text-lg font-semibold text-zinc-400 group-hover:text-zinc-300"
             >
               Create Collection
             </h3>
           </div>
-          <p class="mt-1 text-sm text-zinc-500">
+          <p class="transition mt-1 text-sm text-zinc-500 group-hover:text-zinc-400">
             Add a new collection to organize your games
           </p>
         </button>