feat: mobile ui and other design

2026-01-31 15:37:09 +01:00 · 2025-01-28 16:10:42 +11:00
parent cf0aa948fe
commit ecd26a42a8
8 changed files with 143 additions and 91 deletions
--- a/.gitlab-ci.yml
+++ b/.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
-      fi
+        docker push $PUBLISH_IMAGE_NAME
+        docker push $PUBLISH_LATEST_IMAGE_NAME
+      fi
--- a/components/AddLibraryButton.vue
+++ b/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>
--- a/components/CreateCollectionModal.vue
+++ b/components/CreateCollectionModal.vue
@@ -19,6 +19,7 @@
        :loading="createCollectionLoading"
        :disabled="!collectionName"
        @click="() => createCollection()"
+        class="w-full sm:w-fit"
      >
        Create
      </LoadingButton>
--- a/composables/collection.ts
+++ b/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);
--- a/2
+++ b/2
--- a/pages/library.vue
+++ b/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>
-      <a href="#">
-        <span class="sr-only">Your profile</span>
-        <img
-          class="size-8 rounded-full bg-gray-50"
-          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
+        class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
+      >
+        Library
+      </div>
    </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",
 });
--- a/pages/library/game/[id]/index.vue
+++ b/pages/library/game/[id]/index.vue
@@ -1,65 +1,70 @@
 <template>
-  <div v-if="game" class="relative">
-    <!-- Banner image -->
-    <div class="absolute top-0 inset-0 w-full rounded overflow-hidden">
-      <img
-        :src="useObject(game.mBannerId)"
-        class="w-full h-full object-cover blur-sm"
-      />
-    </div>
-
-    <!-- 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 v-if="game">
+    <!-- header -->
+    <div class="relative">
+      <!-- Banner image -->
+      <div class="absolute top-0 inset-0 w-full rounded overflow-hidden">
+        <img
+          :src="useObject(game.mBannerId)"
+          class="w-full h-full object-cover blur-sm"
+        />
      </div>

-      <div
-        class="flex items-start gap-6 w-fit bg-zinc-900 bg-backdrop-blur p-4 rounded-xl"
-      >
-        <img
-          :src="useObject(game.mCoverId)"
-          class="w-32 h-auto rounded shadow-md transition-all duration-300 hover:scale-105 hover:rotate-[-2deg] hover:shadow-xl"
-          alt=""
-        />
-        <div>
-          <h1 class="text-3xl font-bold font-display text-zinc-100">
-            {{ game.mName }}
-          </h1>
-          <p class="mt-2 text-lg text-zinc-400">
-            {{ game.mShortDescription }}
-          </p>
-          <!-- Buttons -->
-          <div class="mt-4 flex gap-x-3">
-            <button
-              type="button"
-              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"
-            >
-              Open in Launcher
-              <ArrowTopRightOnSquareIcon
-                class="-mr-0.5 h-5 w-5"
-                aria-hidden="true"
-              />
-            </button>
-            <AddLibraryButton class="hover:scale-105" :gameId="game.id" />
-            <NuxtLink
-              :to="`/store/${game.id}`"
-              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"
-            >
-              View in Store
-              <ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
-            </NuxtLink>
+      <!-- Content -->
+      <div class="p-4 relative">
+        <!-- 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
+          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"
+        >
+          <img
+            :src="useObject(game.mCoverId)"
+            class="w-32 h-auto rounded shadow-md transition-all duration-300 hover:scale-105 hover:rotate-[-2deg] hover:shadow-xl"
+            alt=""
+          />
+          <div>
+            <h1 class="text-3xl font-bold font-display text-zinc-100">
+              {{ game.mName }}
+            </h1>
+            <p class="mt-2 text-lg text-zinc-400">
+              {{ game.mShortDescription }}
+            </p>
+            <!-- Buttons -->
+            <div class="flex flex-col lg:flex-row mt-4 flex gap-3">
+              <button
+                type="button"
+                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"
+              >
+                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>

--- a/pages/library/index.vue
+++ b/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 relative rounded-lg bg-zinc-900/50 p-4 hover:bg-zinc-800/50 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"
      >
-        <h3 class="text-lg font-semibold text-zinc-100">
-          {{ collection.name }}
-        </h3>
-        <p class="mt-1 text-sm text-zinc-400">
-          {{ collection.entries.length }} game(s)
-        </p>
+        <NuxtLink
+          class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800"
+          :href="`/library/collection/${collection.id}`"
+        >
+          <h3 class="text-lg font-semibold text-zinc-100">
+            {{ 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>