Paginated Admin library & filter options

.vscode/settings.json

@@ -4,11 +4,7 @@
     "strings": "on"
   },
   "i18n-ally.extract.autoDetect": true,
-  "i18n-ally.extract.ignored": [
-    "string >= 14",
-    "string.alphanumeric >= 5",
-    "/api/v1/admin/import/version/preload?id=${encodeURIComponent(\n      gameId,\n    )}&version=${encodeURIComponent(version)}"
-  ],
+  "i18n-ally.extract.ignored": ["string >= 14", "string.alphanumeric >= 5"],
   "i18n-ally.extract.ignoredByFiles": {
     "components/NewsArticleCreateButton.vue": ["[", "`", "Enter"],
     "pages/admin/library/sources/index.vue": ["Filesystem"],

components/GameEditor/Version.vue

@@ -89,7 +89,7 @@
                     </div>
                   </td>
                   <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
-                    {{ version.versionPath }}
+                    {{ version.versionPath }} {{ version.delta }} {{ version.versionIndex }}
                   </td>
                   <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
                     <ul class="space-y-2">

components/LogLine.vue

@@ -1,16 +1,15 @@
 <template>
   <span class="text-xs font-mono text-zinc-400 inline-flex items-top gap-x-2"
-    ><span v-if="!short" class="text-zinc-500">{{ log.timestamp }}</span>
+    ><span v-if="!short" class="text-zinc-500">{{ log.time }}</span>
     <span
       :class="[
         colours[log.level] || 'text-green-400',
         'uppercase font-display font-semibold',
       ]"
       >{{ log.level }}</span
     >
-    <pre :class="[short ? 'line-clamp-1' : '', 'mt-[1px]']">{{
-      log.message
-    }}</pre>
+    <span v-if="log.prefix" class="text-zinc-200"> {{ log.prefix }}</span>
+    <pre :class="[short ? 'line-clamp-1' : '', 'mt-[1px]']">{{ log.msg }}</pre>
   </span>
 </template>
 

components/ProgressBar.vue

@@ -13,7 +13,7 @@
       class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
     >
       <!-- {{ $t("tasks.admin.progress", [Math.round(percentage * 10) / 10]) }} -->
-      {{ $n(Math.round(percentage) / 100, "percent") }}
+      {{ $n(Math.round(percentage * 100) / 10000, "percent") }}
     </span>
   </div>
 </template>

i18n/locales/en_us.json

@@ -368,8 +368,30 @@
     "addGames": "All Games",
     "addToLib": "Add to Library",
     "admin": {
+      "nav": {
+        "nextPagination": "Next",
+        "backPagination": "Previous",
+        "sortLabel": "Sort",
+        "filterLabel": "Filters",
+        "filterCount": "{0} filters",
+        "clearAllFilters": "Clear all",
+        "filters": {
+          "version": {
+            "title": "Versions",
+            "none": "No versions imported",
+            "available": "Available to import"
+          },
+          "metadata": {
+            "title": "Metadata",
+            "noCarousel": "No images in carousel",
+            "emptyDescription": "Empty description",
+            "featured": "Featured"
+          }
+        }
+      },
       "detectedGame": "Drop has detected you have new games to import.",
       "detectedVersion": "Drop has detected you have new versions of this game to import.",
+      "massImportTool": "Mass Import Tool",
       "fileExtSelector": {
         "add": "Add \"{0}\"",
         "noSelected": "No extensions selected."

package.json

@@ -73,6 +73,7 @@
   "devDependencies": {
     "@bufbuild/buf": "^1.65.0",
     "@bufbuild/protoc-gen-es": "^2.11.0",
+    "@golar/vue": "^0.0.13",
     "@intlify/eslint-plugin-vue-i18n": "^4.0.1",
     "@nuxt/eslint": "^1.3.0",
     "@tailwindcss/forms": "^0.5.9",
@@ -86,6 +87,7 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
+    "golar": "^0.0.13",
     "h3": "^1.15.5",
     "nitropack": "^2.11.12",
     "ofetch": "^1.4.1",

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

@@ -93,7 +93,7 @@
         <NuxtLink
           :href="`/store/${game.id}`"
           type="button"
-          class="whitespace-nowrap 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="whitespace-nowrap 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-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
         >
           {{ $t("library.admin.openStore") }}
           <ArrowTopRightOnSquareIcon

pages/admin/library/import.vue

@@ -344,6 +344,7 @@ import {
 import { XCircleIcon } from "@heroicons/vue/16/solid";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
+import { FetchError } from "ofetch";
 import type { GameType } from "~/prisma/client/enums";
 import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 
@@ -406,6 +407,11 @@ async function searchGame() {
     gameSearchLoading.value = false;
   } catch (e) {
     gameSearchLoading.value = false;
+    if (e instanceof FetchError) {
+      gameSearchResultsError.value = e.data?.message ?? t("errors.unknown");
+    } else {
+      gameSearchResultsError.value = (e as string)?.toString();
+    }
 
     throw e;
   }