feat: mobile ui and other design

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",
 });

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>
 

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>