Many new improvments and features to the UI (#76)

* feat(general): many new improvments and features to the UI

* fix: fix lints and run preetier

* fix: furthermore fixes

* chore: fix preetier eslint issue

* stlye: reposition mark all as read button for better placement

* fix: fix inccorect positioning on the mark all as read buton, again

* fix: fix account related issue with predefined types and styling

* fix: fix notification button dissapearance & type definition

* fix: fix auth page styling

* stlye: fixed styling on users list

* fix: fix lint dead code collector

* fix: please the prettier gods

* fix(notifications): seriously serialising

* chore: please the prettier gods once again, o holy one

* fix: remove eslint thing, im blaming eslint for that one

---------

Co-authored-by: Aden <aden@adenmgb.com>

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

@@ -5,9 +5,18 @@
       v-if="game && unimportedVersions !== undefined"
       class="grow flex flex-col gap-y-8"
     >
-      <div
-        class="grow w-full h-full lg:pr-[30vw] px-6 py-4 flex flex-col"
-      ></div>
+      <div class="grow w-full h-full lg:pr-[30vw] px-6 py-4 flex flex-col">
+        <div
+          v-if="game.versions.length === 0"
+          class="flex flex-col items-center justify-center h-full text-zinc-400"
+        >
+          <InformationCircleIcon class="w-12 h-12 mb-2 text-zinc-400" />
+          <div class="font-semibold text-lg">No versions yet</div>
+          <div class="text-sm mt-1">
+            Import your first version to get started!
+          </div>
+        </div>
+      </div>
       <div
         class="lg:overflow-y-auto lg:border-l lg:border-zinc-800 lg:fixed lg:inset-y-0 lg:z-50 lg:w-[30vw] flex flex-col lg:right-0 gap-y-8 px-6 py-4"
       >
@@ -17,7 +26,7 @@
           <NuxtLink
             :href="`/admin/metadata/games/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm 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-blue-600"
           >
             Open in Metadata
             <ArrowTopRightOnSquareIcon
@@ -29,7 +38,7 @@
           <NuxtLink
             :href="`/store/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm 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-blue-600"
           >
             Open in Store
             <ArrowTopRightOnSquareIcon
@@ -135,6 +144,7 @@ import {
   ArrowTopRightOnSquareIcon,
   Bars3Icon,
   TrashIcon,
+  InformationCircleIcon,
 } from "@heroicons/vue/24/solid";
 
 definePageMeta({

pages/admin/library/index.vue

@@ -12,7 +12,7 @@
       <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
         <NuxtLink
           to="/admin/library/sources"
-          class="block rounded-md bg-blue-600 px-3 py-2 text-center 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"
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
         >
           Sources &rarr;
         </NuxtLink>
@@ -63,11 +63,11 @@
       <li
         v-for="game in filteredLibraryGames"
         :key="game.id"
-        class="col-span-1 flex flex-col justify-center divide-y divide-zinc-700 rounded-lg bg-zinc-950/20 text-left shadow"
+        class="col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border border-zinc-800 transition-all duration-200 hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 group"
       >
         <div class="flex flex-1 flex-row p-4 gap-x-4">
           <img
-            class="h-16 w-16 flex-shrink-0 rounded-md"
+            class="h-20 w-20 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
             :src="useObject(game.mIconObjectId)"
             alt=""
           />
@@ -89,18 +89,18 @@
             <div class="mt-4 flex flex-col gap-y-1">
               <NuxtLink
                 :href="`/admin/library/${game.id}`"
-                class="w-fit rounded-md bg-blue-600 px-2.5 py-1.5 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"
+                class="w-fit rounded-md bg-blue-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
               >
                 Open with Library &rarr;
               </NuxtLink>
               <NuxtLink
                 :href="`/admin/metadata/games/${game.id}`"
-                class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700u focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold 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"
               >
                 Open with Metadata &rarr;
               </NuxtLink>
               <button
-                class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                 @click="() => deleteGame(game.id)"
               >
                 Delete