almst complete admin ui and initial store designs

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

@@ -1,11 +1,154 @@
 <template>
+  <div v-if="game" class="grid grid-cols-2 gap-16">
+    <div class="grow">
+      <h1 class="mt-4 text-5xl font-bold font-display text-zinc-100">
+        {{ game.mName }}
+      </h1>
+      <p class="mt-1 text-lg text-zinc-400">{{ game.mShortDescription }}</p>
 
-
+      <div
+        v-html="descriptionHTML"
+        class="mt-5 pt-5 border-t border-zinc-700 prose prose-invert prose-blue"
+      ></div>
+    </div>
+    <div>
+      <div class="px-4 py-3 bg-gray-950 rounded">
+        <div class="border-b border-zinc-800 pb-3">
+          <div
+            class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap"
+          >
+            <div class="ml-4 mt-2">
+              <h3
+                class="text-base font-semibold font-display leading-6 text-zinc-100"
+              >
+                Images
+              </h3>
+            </div>
+            <div class="ml-4 mt-2 flex-shrink-0">
+              <button
+                type="button"
+                class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-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"
+              >
+                Upload
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="mt-3 grid grid-cols-2 grid-flow-dense gap-8">
+          <div
+            v-for="(image, imageIdx) in game.mImageLibrary"
+            :key="image"
+            class="group relative flex items-center"
+          >
+            <img :src="useObject(image)" class="w-full h-auto" />
+            <div
+              class="transition-all opacity-0 group-hover:opacity-100 absolute flex flex-col gap-y-1 top-1 right-1 bg-zinc-950/50 rounded-xl p-2"
+            >
+              <button
+                v-if="image !== game.mBannerId"
+                @click="() => updateBannerImage(image)"
+                type="button"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
+              >
+                Set as banner
+              </button>
+              <button
+                v-if="image !== game.mCoverId"
+                @click="() => updateCoverImage(image)"
+                type="button"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
+              >
+                Set as cover
+              </button>
+              <button
+                @click="() => deleteImage(image)"
+                type="button"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.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"
+              >
+                Delete image
+              </button>
+            </div>
+            <div
+              v-if="image === game.mBannerId && image === game.mCoverId"
+              class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
+            >
+              current banner & cover
+            </div>
+            <div
+              v-else-if="image === game.mCoverId"
+              class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
+            >
+              current cover
+            </div>
+            <div
+              v-else-if="image === game.mBannerId"
+              class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
+            >
+              current banner
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import type { Game } from "@prisma/client";
+import markdownit from "markdown-it";
 
 definePageMeta({
-    layout: 'admin',
-})
-</script>
+  layout: "admin",
+});
+
+const route = useRoute();
+const gameId = route.params.id.toString();
+const headers = useRequestHeaders(["cookie"]);
+const game = ref(
+  await $fetch<Game>(`/api/v1/admin/game?id=${encodeURIComponent(gameId)}`, {
+    headers,
+  })
+);
+
+const md = markdownit();
+const descriptionHTML = md.render(game.value?.mDescription ?? "");
+
+async function updateBannerImage(id: string) {
+  if (game.value.mBannerId == id) return;
+  const { mBannerId } = await $fetch("/api/v1/admin/game", {
+    method: "PATCH",
+    body: {
+      id: gameId,
+      mBannerId: id,
+    },
+  });
+  game.value.mBannerId = mBannerId;
+}
+
+async function updateCoverImage(id: string) {
+  if (game.value.mCoverId == id) return;
+  const { mCoverId } = await $fetch("/api/v1/admin/game", {
+    method: "PATCH",
+    body: {
+      id: gameId,
+      mCoverId: id,
+    },
+  });
+  game.value.mCoverId = mCoverId;
+}
+
+async function deleteImage(id: string) {
+  const { mBannerId, mImageLibrary } = await $fetch(
+    "/api/v1/admin/game/image",
+    {
+      method: "DELETE",
+      body: {
+        gameId: game.value.id,
+        imageId: id,
+      },
+    }
+  );
+  game.value.mImageLibrary = mImageLibrary;
+  game.value.mBannerId = mBannerId;
+}
+</script>

pages/admin/library/index.vue

@@ -28,7 +28,7 @@
   </div>
   <ul
     role="list"
-    class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+    class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
   >
     <li
       v-for="game in libraryNotifications"
@@ -41,21 +41,25 @@
           :src="useObject(game.mIconId)"
           alt=""
         />
-        <div class="flex-1 flex-col">
+        <div class="flex flex-col">
           <h3 class="text-sm font-medium text-zinc-100 font-display">
             {{ game.mName }}
+            <span
+              class="ml-2 inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
+              >{{ game.metadataSource }}</span
+            >
           </h3>
-          <dl class="mt-1 flex flex-grow flex-col justify-between">
+          <dl class="mt-1 flex flex-col justify-between">
             <dt class="sr-only">Short Description</dt>
             <dd class="text-sm text-zinc-400">{{ game.mShortDescription }}</dd>
             <dt class="sr-only">Metadata provider</dt>
-            <dd class="mt-3">
-              <span
-                class="inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
-                >{{ game.metadataSource }}</span
-              >
-            </dd>
           </dl>
+          <NuxtLink
+            :href="`/admin/library/${game.id}`"
+            class="mt-2 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"
+          >
+            Edit &rarr;
+          </NuxtLink>
         </div>
       </div>
       <div v-if="game.hasNotifications" class="flex flex-col gap-y-2 p-2">
@@ -86,7 +90,10 @@
             </div>
           </div>
         </div>
-        <div v-if="game.notifications.noVersions" class="rounded-md bg-yellow-600/10 p-4">
+        <div
+          v-if="game.notifications.noVersions"
+          class="rounded-md bg-yellow-600/10 p-4"
+        >
           <div class="flex">
             <div class="flex-shrink-0">
               <ExclamationTriangleIcon
@@ -119,7 +126,7 @@ useHead({
 
 const headers = useRequestHeaders(["cookie"]);
 const libraryState = await $fetch("/api/v1/admin/library", { headers });
-const libraryNotifications =  libraryState.games.map((e) => {
+const libraryNotifications = libraryState.games.map((e) => {
   const noVersions = e.status.noVersions;
   const toImport = e.status.unimportedVersions.length > 0;
 
@@ -130,6 +137,6 @@ const libraryNotifications =  libraryState.games.map((e) => {
       toImport,
     },
     hasNotifications: noVersions || toImport,
-  }
-})
+  };
+});
 </script>

pages/store/[id]/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="mx-auto w-full relative flex flex-col justify-center pt-24 z-10 overflow-hidden"
+  >
+    <!-- banner image -->
+    <div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20]">
+      <img :src="useObject(game.mBannerId)" class="w-full h-auto" />
+      <div
+        class="absolute inset-0 bg-gradient-to-b from-transparent to-80% to-zinc-900"
+      />
+    </div>
+    <!-- main page -->
+    <div class="max-w-7xl w-full mx-auto bg-zinc-900 px-16 py-12 rounded-md">
+      <h1
+        class="text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
+      >
+        {{ game.mName }}
+      </h1>
+
+      <div class="mt-8 grid grid-cols-4 gap-x-10">
+        <div class="col-span-3">
+          <p class="text-lg text-zinc-400">
+            {{ game.mShortDescription }}
+          </p>
+          <div
+            class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2"
+          >
+            <img
+              v-for="image in game.mImageLibrary"
+              class="h-64 w-auto rounded"
+              :src="useObject(image)"
+            />
+          </div>
+          <div
+            v-html="descriptionHTML"
+            class="mt-12 prose prose-invert prose-blue max-w-none"
+          />
+        </div>
+
+        <div class="flex flex-col gap-y-6 items-center">
+          <img class="w-full h-auto rounded" :src="useObject(game.mCoverId)" />
+          <button
+            type="button"
+            class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-xl font-semibold font-display 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"
+          >
+            Add to Library
+            <PlusIcon class="-mr-0.5 h-7 w-7" aria-hidden="true" />
+          </button>
+          <div class="inline-flex items-center gap-x-3">
+            <span class="text-zinc-100 font-semibold">Available on:</span>
+            <component
+              v-for="platform in platforms"
+              :is="icons[platform]"
+              class="text-blue-600 w-6 h-6"
+            />
+            <span
+              v-if="platforms.length == 0"
+              class="font-semibold text-blue-600"
+              >coming soon</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon } from "@heroicons/vue/20/solid";
+import { Platform, type Game, type GameVersion } from "@prisma/client";
+import MarkdownIt from "markdown-it";
+import LinuxLogo from "~/components/LinuxLogo.vue";
+import WindowsLogo from "~/components/WindowsLogo.vue";
+
+const route = useRoute();
+const gameId = route.params.id.toString();
+
+const game = await $fetch<Game & { versions: GameVersion[] }>(
+  `/api/v1/games/${gameId}`
+);
+const md = MarkdownIt();
+const descriptionHTML = md.render(game.mDescription);
+const platforms = game.versions
+  .map((e) => e.platform)
+  .flat()
+  .filter((e, i, u) => u.indexOf(e) === i);
+const icons = {
+  [Platform.Linux]: LinuxLogo,
+  [Platform.Windows]: WindowsLogo,
+};
+</script>

pages/store/index.vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>