additional polish and QoL features

error.vue

@@ -17,7 +17,16 @@ async function signIn() {
 useHead({
     title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`,
 });
-console.log(props.error);
+
+const errorCode = props.error?.statusCode;
+if (errorCode != undefined) {
+    switch (errorCode) {
+        case 403:
+        case 401:
+            if (!user.value) signIn();
+            break;
+    }
+}
 </script>
 
 <template>
@@ -42,8 +51,8 @@ console.log(props.error);
                     Oh no!
                 </h1>
                 <p class="mt-6 text-base leading-7 text-zinc-400">
-          An error occurred while responding to your request. If you believe
-          this to be a bug, please report it.
+                    An error occurred while responding to your request. If you
+                    believe this to be a bug, please report it.
                 </p>
                 <div class="mt-10">
                     <!-- full app reload to fix errors -->

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

@@ -1,10 +1,15 @@
 <template>
-  <div v-if="game" class="grid grid-cols-2 gap-16">
+    <div
+        v-if="game && unimportedVersions !== undefined"
+        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>
+            <p class="mt-1 text-lg text-zinc-400">
+                {{ game.mShortDescription }}
+            </p>
 
             <div
                 v-html="descriptionHTML"
@@ -68,7 +73,10 @@
                             </button>
                         </div>
                         <div
-              v-if="image === game.mBannerId && image === game.mCoverId"
+                            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
@@ -92,14 +100,18 @@
                 <h1 class="text-2xl font-semibold font-display text-zinc-100">
                     Manage version order
                 </h1>
-        <div class="text-center w-full text-sm text-zinc-600">lowest</div>
+                <div class="text-center w-full text-sm text-zinc-600">
+                    lowest
+                </div>
                 <draggable
                     @update="() => updateVersionOrder()"
                     :list="game.versions"
                     handle=".handle"
                     class="mt-2 space-y-4"
                 >
-          <template #item="{ element: item }: { element: GameVersion }">
+                    <template
+                        #item="{ element: item }: { element: GameVersion }"
+                    >
                         <div
                             class="w-full inline-flex items-center px-4 py-2 bg-zinc-900 rounded justify-between"
                         >
@@ -110,15 +122,57 @@
                                 {{ item.delta ? "Upgrade mode" : "" }}
                             </div>
                             <div class="inline-flex gap-x-2">
-                <Bars3Icon class="cursor-move w-6 h-6 text-zinc-400 handle" />
-                <button @click="() => deleteVersion(item.versionName)">
+                                <Bars3Icon
+                                    class="cursor-move w-6 h-6 text-zinc-400 handle"
+                                />
+                                <button
+                                    @click="
+                                        () => deleteVersion(item.versionName)
+                                    "
+                                >
                                     <TrashIcon class="w-5 h-5 text-red-600" />
                                 </button>
                             </div>
                         </div>
                     </template>
                 </draggable>
-        <div class="mt-2 text-center w-full text-sm text-zinc-600">highest</div>
+                <div
+                    class="text-center font-bold text-zinc-400 my-3"
+                    v-if="game.versions.length == 0"
+                >
+                    no versions added
+                </div>
+                <div class="mt-2 text-center w-full text-sm text-zinc-600">
+                    highest
+                </div>
+            </div>
+            <div
+                v-if="unimportedVersions.length > 0"
+                class="rounded-md bg-blue-600/10 p-4"
+            >
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <InformationCircleIcon
+                            class="h-5 w-5 text-blue-400"
+                            aria-hidden="true"
+                        />
+                    </div>
+                    <div class="ml-3 flex-1 md:flex md:justify-between">
+                        <p class="text-sm text-blue-400">
+                            Drop has detected you have new verions of this game
+                            to import.
+                        </p>
+                        <p class="mt-3 text-sm md:ml-6 md:mt-0">
+                            <NuxtLink
+                                :href="`/admin/library/${game.id}/import`"
+                                class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
+                            >
+                                Import
+                                <span aria-hidden="true"> &rarr;</span>
+                            </NuxtLink>
+                        </p>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -132,6 +186,7 @@
 </template>
 
 <script setup lang="ts">
+import { InformationCircleIcon } from "@heroicons/vue/20/solid";
 import { Bars3Icon, TrashIcon } from "@heroicons/vue/16/solid";
 import type { Game, GameVersion } from "@prisma/client";
 import markdownit from "markdown-it";
@@ -146,14 +201,13 @@ const showUploadModal = ref(false);
 const route = useRoute();
 const gameId = route.params.id.toString();
 const headers = useRequestHeaders(["cookie"]);
-const game = ref(
-  await $fetch(
+const { game: rawGame, unimportedVersions } = await $fetch(
     `/api/v1/admin/game?id=${encodeURIComponent(gameId)}`,
     {
         headers,
-    }
-  )
+    },
 );
+const game = ref(rawGame);
 
 const md = markdownit();
 const descriptionHTML = md.render(game.value?.mDescription ?? "");
@@ -191,7 +245,7 @@ async function deleteImage(id: string) {
                 gameId: game.value.id,
                 imageId: id,
             },
-    }
+        },
     );
     game.value.mImageLibrary = mImageLibrary;
     game.value.mBannerId = mBannerId;
@@ -212,7 +266,7 @@ async function deleteVersion(versionName: string) {
     });
     game.value.versions.splice(
         game.value.versions.findIndex((e) => e.versionName === versionName),
-    1
+        1,
     );
 }
 

server/api/v1/admin/game/index.get.ts

@@ -1,4 +1,5 @@
 import prisma from "~/server/internal/db/database";
+import libraryManager from "~/server/internal/library";
 
 export default defineEventHandler(async (h3) => {
   const user = await h3.context.session.getAdminUser(h3);
@@ -26,7 +27,7 @@ export default defineEventHandler(async (h3) => {
           versionName: true,
           platform: true,
           delta: true,
-        }
+        },
       },
     },
   });
@@ -34,5 +35,9 @@ export default defineEventHandler(async (h3) => {
   if (!game)
     throw createError({ statusCode: 404, statusMessage: "Game ID not found" });
 
-  return game;
+  const unimportedVersions = await libraryManager.fetchUnimportedVersions(
+    game.id,
+  );
+
+  return { game, unimportedVersions };
 });

server/api/v1/admin/import/version/index.post.ts

@@ -15,7 +15,7 @@ export default defineEventHandler(async (h3) => {
     throw createError({
       statusCode: 400,
       statusMessage:
-        "Missing id, version, platform, setup or startup from body",
+        "ID, version, platform, setup and startup (if not in upgrade mode) are required. ",
     });
 
   const taskId = await libraryManager.importVersion(
@@ -26,7 +26,7 @@ export default defineEventHandler(async (h3) => {
       startup,
       setup,
     },
-    delta
+    delta,
   );
   if (!taskId)
     throw createError({

server/api/v1/client/http/chunk.get.ts

@@ -0,0 +1,9 @@
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+
+export default defineClientEventHandler(async (h3) => {
+  const query = getQuery(h3);
+
+  const gameId = query.game;
+  const versionName = query.version;
+  const chunkId = query.chunk;
+});

server/internal/metadata/index.ts

@@ -26,10 +26,10 @@ export abstract class MetadataProvider {
   abstract search(query: string): Promise<GameMetadataSearchResult[]>;
   abstract fetchGame(params: _FetchGameMetadataParams): Promise<GameMetadata>;
   abstract fetchPublisher(
-    params: _FetchPublisherMetadataParams
+    params: _FetchPublisherMetadataParams,
   ): Promise<PublisherMetadata>;
   abstract fetchDeveloper(
-    params: _FetchDeveloperMetadataParams
+    params: _FetchDeveloperMetadataParams,
   ): Promise<DeveloperMetadata>;
 }
 
@@ -56,7 +56,7 @@ export class MetadataHandler {
             Object.assign({}, result, {
               sourceId: provider.id(),
               sourceName: provider.name(),
-            })
+            }),
         );
         resolve(mappedResults);
       });
@@ -74,7 +74,7 @@ export class MetadataHandler {
 
   async createGame(
     result: InternalGameMetadataResult,
-    libraryBasePath: string
+    libraryBasePath: string,
   ) {
     const provider = this.providers.get(result.sourceId);
     if (!provider)
@@ -92,7 +92,7 @@ export class MetadataHandler {
 
     const [createObject, pullObjects, dumpObjects] = this.objectHandler.new(
       {},
-      ["internal:read"]
+      ["internal:read"],
     );
 
     let metadata;
@@ -144,7 +144,7 @@ export class MetadataHandler {
     return (await this.fetchDeveloperPublisher(
       query,
       "fetchDeveloper",
-      "developer"
+      "developer",
     )) as Developer;
   }
 
@@ -152,16 +152,16 @@ export class MetadataHandler {
     return (await this.fetchDeveloperPublisher(
       query,
       "fetchPublisher",
-      "publisher"
+      "publisher",
     )) as Publisher;
   }
 
   // Careful with this function, it has no typechecking
-  // TODO: fix typechecking
+  // Type-checking this thing is impossible
   private async fetchDeveloperPublisher(
     query: string,
     functionName: any,
-    databaseName: any
+    databaseName: any,
   ) {
     const existing = await (prisma as any)[databaseName].findFirst({
       where: {
@@ -173,12 +173,12 @@ export class MetadataHandler {
     for (const provider of this.providers.values() as any) {
       const [createObject, pullObjects, dumpObjects] = this.objectHandler.new(
         {},
-        ["internal:read"]
+        ["internal:read"],
       );
       let result;
       try {
         result = await provider[functionName]({ query, createObject });
-      } catch(e) {
+      } catch (e) {
         console.warn(e);
         dumpObjects();
         continue;
@@ -206,7 +206,7 @@ export class MetadataHandler {
     }
 
     throw new Error(
-      `No metadata provider found a ${databaseName} for "${query}"`
+      `No metadata provider found a ${databaseName} for "${query}"`,
     );
   }
 }

server/internal/utils/types.d.ts

@@ -0,0 +1,7 @@
+export type FilterConditionally<Source, Condition> = Pick<
+  Source,
+  { [K in keyof Source]: Source[K] extends Condition ? K : never }[keyof Source]
+>;
+export type KeyOfType<T, V> = keyof {
+  [P in keyof T as T[P] extends V ? P : never]: any;
+};