Admin library multi-issue

components/DropLogo.vue

@@ -10,6 +10,16 @@
       d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
       stroke="currentColor"
       stroke-width="2"
+      stroke-dasharray="100"
+      :stroke-dashoffset="dashArray"
     />
   </svg>
 </template>
+
+<script setup lang="ts">
+const props = defineProps<{ progress?: number }>();
+
+const dashArray = computed(() =>
+  props.progress === undefined ? 0 : ((100 - props.progress) / 100) * 50 + 50,
+);
+</script>

components/LogLine.vue

@@ -0,0 +1,27 @@
+<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
+      :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>
+</template>
+
+<script setup lang="ts">
+import type { TaskLog } from "~/server/internal/tasks";
+
+defineProps<{ log: typeof TaskLog.infer; short?: boolean }>();
+
+const colours: { [key: string]: string } = {
+  info: "text-blue-400",
+  warn: "text-yellow-400",
+  error: "text-red-400",
+};
+</script>

components/TaskWidget.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    v-if="task"
+    class="flex w-full items-center justify-between space-x-6 p-6"
+  >
+    <div class="flex-1 truncate">
+      <div class="flex items-center space-x-1">
+        <div>
+          <CheckCircleIcon v-if="task.success" class="size-5 text-green-600" />
+          <XMarkIcon v-else-if="task.error" class="size-5 text-red-600" />
+          <div
+            v-else
+            class="size-2 bg-blue-600 rounded-full animate-pulse m-1"
+          />
+        </div>
+        <h3 class="truncate text-sm font-medium text-zinc-100">
+          {{ task.name }}
+        </h3>
+      </div>
+      <div
+        v-if="active"
+        class="mt-2 w-full rounded-full overflow-hidden bg-zinc-900"
+      >
+        <div
+          :style="{ width: `${task.progress}%` }"
+          class="bg-blue-600 h-[3px] transition-all"
+        />
+      </div>
+      <div class="mt-2 bg-zinc-950 px-2 pb-1 rounded-sm">
+        <LogLine :short="true" :log="parseTaskLog(task.log.at(-1))" />
+      </div>
+      <NuxtLink
+        type="button"
+        :href="`/admin/task/${task.id}`"
+        class="mt-3 ml-1 rounded-md text-xs font-medium text-zinc-100 hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-100 focus:ring-offset-2"
+      >
+        <i18n-t keypath="tasks.admin.viewTask" tag="span" scope="global">
+          <template #arrow>
+            <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+          </template>
+        </i18n-t>
+      </NuxtLink>
+    </div>
+  </div>
+  <div v-else>
+    <!-- renders server side when we don't want to access the current tasks -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/24/solid";
+import type { TaskMessage } from "~/server/internal/tasks";
+
+defineProps<{ task: TaskMessage | undefined; active?: boolean }>();
+</script>

i18n/locales/en_us.json

@@ -137,6 +137,10 @@
       "usernameTaken": "Username already taken."
     },
     "backHome": "{arrow} Back to home",
+    "externalUrl": {
+      "subtitle": "This message is only visible to admins.",
+      "title": "Accessing over different EXTERNAL_URL. Please check the docs."
+    },
     "game": {
       "banner": {
         "description": "Drop failed to update the banner image: {0}",
@@ -212,10 +216,6 @@
         "desc": "Drop encountered an error while updating the version: {error}",
         "title": "There an error while updating the version order"
       }
-    },
-    "externalUrl": {
-      "title": "Accessing over different EXTERNAL_URL. Please check the docs.",
-      "subtitle": "This message is only visible to admins."
     }
   },
   "footer": {
@@ -327,32 +327,31 @@
           "description": "Companies organize games by who they were developed or published by.",
           "editor": {
             "action": "Add Game {plus}",
+            "descriptionPlaceholder": "{'<'}description{'>'}",
             "developed": "Developed",
             "libraryDescription": "Add, remove, or customise what this company has developed and/or published.",
             "libraryTitle": "Game Library",
             "noDescription": "(no description)",
             "published": "Published",
             "uploadBanner": "Upload banner",
             "uploadIcon": "Upload icon",
-            "descriptionPlaceholder": "{'<'}description{'>'}",
             "websitePlaceholder": "{'<'}website{'>'}"
           },
           "modals": {
+            "createDescription": "Create a company to further organize your games.",
+            "createFieldDescription": "Company Description",
+            "createFieldDescriptionPlaceholder": "A small indie studio that...",
+            "createFieldName": "Company Name",
+            "createFieldNamePlaceholder": "My New Company...",
+            "createFieldWebsite": "Company Website",
+            "createFieldWebsitePlaceholder": "https://example.com/",
+            "createTitle": "Create a company",
             "nameDescription": "Edit the company's name. Used to match to new game imports.",
             "nameTitle": "Edit company name",
             "shortDeckDescription": "Edit the company's description. Doesn't affect long (markdown) description.",
             "shortDeckTitle": "Edit company description",
             "websiteDescription": "Edit the company's website. Note: this will be a link, and won't have redirect protection.",
-            "websiteTitle": "Edit company website",
-
-            "createTitle": "Create a company",
-            "createDescription": "Create a company to further organize your games.",
-            "createFieldName": "Company Name",
-            "createFieldNamePlaceholder": "My New Company...",
-            "createFieldDescription": "Company Description",
-            "createFieldDescriptionPlaceholder": "A small indie studio that...",
-            "createFieldWebsite": "Company Website",
-            "createFieldWebsitePlaceholder": "https://example.com/"
+            "websiteTitle": "Edit company website"
           },
           "noCompanies": "No companies",
           "noGames": "No games",
@@ -373,6 +372,8 @@
       },
       "metadataProvider": "Metadata provider",
       "noGames": "No games imported",
+      "libraryHint": "No libraries configured.",
+      "libraryHintDocsLink": "What does this mean? {arrow}",
       "offline": "Drop couldn't access this game.",
       "offlineTitle": "Game offline",
       "openEditor": "Open in Editor {arrow}",
@@ -382,12 +383,15 @@
         "create": "Create source",
         "createDesc": "Drop will use this source to access your game library, and make them available.",
         "desc": "Configure your library sources, where Drop will look for new games and versions to import.",
+        "documentationLink": "Documentation {arrow}",
         "edit": "Edit source",
         "fsDesc": "Imports games from a path on disk. Requires version-based folder structure, and supports archived games.",
         "fsFlatDesc": "Imports games from a path on disk, but without a separate version subfolder. Useful when migrating an existing library to Drop.",
+        "fsFlatTitle": "Compatibility",
         "fsPath": "Path",
         "fsPathDesc": "An absolute path to your game library.",
         "fsPathPlaceholder": "/mnt/games",
+        "fsTitle": "Drop-style",
         "link": "Sources {arrow}",
         "nameDesc": "The name of your source, for reference.",
         "namePlaceholder": "My New Source",
@@ -514,13 +518,13 @@
     "images": "Game Images",
     "lookAt": "Check it out",
     "noDevelopers": "No developers",
-    "noGame": "NO GAME",
     "noFeatured": "NO FEATURED GAMES",
-    "openFeatured": "Star games in Admin Library {arrow}",
+    "noGame": "NO GAME",
     "noImages": "No images",
     "noPublishers": "No publishers.",
     "noTags": "No tags",
     "openAdminDashboard": "Open in Admin Dashboard",
+    "openFeatured": "Star games in Admin Library {arrow}",
     "platform": "Platform | Platform | Platforms",
     "publishers": "Publishers | Publisher | Publishers",
     "rating": "Rating",
@@ -560,7 +564,9 @@
         "cleanupSessionsName": "Clean up sessions."
       },
       "viewTask": "View {arrow}",
-      "weeklyScheduledTitle": "Weekly scheduled tasks"
+      "weeklyScheduledTitle": "Weekly scheduled tasks",
+      "progress": "{0}%",
+      "execute": "{arrow} Execute"
     }
   },
   "title": "Drop",
@@ -585,7 +591,6 @@
     "admin": {
       "adminHeader": "Admin?",
       "adminUserLabel": "Admin user",
-      "authLink": "Authentication {arrow}",
       "authentication": {
         "configure": "Configure",
         "description": "Drop supports a variety of \"authentication mechanisms\". As you enable or disable them, they are shown on the sign in screen for users to select from. Click the dot menu to configure the authentication mechanism.",
@@ -597,6 +602,7 @@
         "srOpenOptions": "Open options",
         "title": "Authentication"
       },
+      "authLink": "Authentication {arrow}",
       "authoptionsHeader": "Auth Options",
       "delete": "Delete",
       "deleteUser": "Delete user {0}",
@@ -609,7 +615,7 @@
         "createInvitation": "Create invitation",
         "description": "Simple authentication uses a system of 'invitations' to create users. You can create an invitation, and optionally specify a username or email for the user, and then it will generate a magic URL that can be used to create an account.",
         "expires": "Expires: {expiry}",
-        "invitationTitle": "invitations",
+        "invitationTitle": "Invitations",
         "invite3Days": "3 days",
         "invite6Months": "6 months",
         "inviteAdminSwitchDescription": "Create this user as an administrator",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drop",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": true,
   "type": "module",
   "license": "AGPL-3.0-or-later",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@discordapp/twemoji": "^16.0.1",
-    "@drop-oss/droplet": "2.3.0",
+    "@drop-oss/droplet": "2.3.1",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
     "@lobomfz/prismark": "0.0.3",

pages/admin/library/index.vue

@@ -242,11 +242,40 @@
         {{ $t("common.noResults") }}
       </p>
       <p
-        v-if="filteredLibraryGames.length == 0 && libraryGames.length == 0"
+        v-if="
+          filteredLibraryGames.length == 0 &&
+          libraryGames.length == 0 &&
+          libraryState.hasLibraries
+        "
         class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
       >
         {{ $t("library.admin.noGames") }}
       </p>
+      <p
+        v-else-if="!libraryState.hasLibraries"
+        class="flex flex-col gap-2 text-zinc-600 text-center col-span-4"
+      >
+        <span class="text-sm font-display font-bold uppercase">{{
+          $t("library.admin.libraryHint")
+        }}</span>
+
+        <NuxtLink
+          class="transition text-xs text-zinc-600 hover:underline hover:text-zinc-400"
+          href="https://docs.droposs.org/docs/library"
+          target="_blank"
+        >
+          <i18n-t
+            keypath="library.admin.libraryHintDocsLink"
+            tag="span"
+            scope="global"
+            class="inline-flex items-center gap-x-1"
+          >
+            <template #arrow>
+              <ArrowTopRightOnSquareIcon class="size-4" />
+            </template>
+          </i18n-t>
+        </NuxtLink>
+      </p>
     </ul>
   </div>
 </template>
@@ -256,7 +285,11 @@ import {
   ExclamationTriangleIcon,
   ExclamationCircleIcon,
 } from "@heroicons/vue/16/solid";
-import { InformationCircleIcon, StarIcon } from "@heroicons/vue/20/solid";
+import {
+  ArrowTopRightOnSquareIcon,
+  InformationCircleIcon,
+  StarIcon,
+} from "@heroicons/vue/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 
 const { t } = useI18n();