v2 download API and Admin UI fixes (#177)

* fix: small ui fixes

* feat: #171

* fix: improvements to library scanning on admin UI

* feat: v2 download API

* fix: add download context cleanup

* fix: lint

pages/admin/metadata/companies/[id]/index.vue

@@ -30,7 +30,7 @@
             {{ company.mName }}
             <button @click="() => editName()">
               <PencilIcon
-                class="transition duration-200 opacity-0 group-hover/name:opacity-100 size-8"
+                class="transition duration-200 xl:opacity-0 group-hover/name:opacity-100 size-8"
               />
             </button>
           </h1>
@@ -43,17 +43,20 @@
             }}
             <button @click="() => editShortDescription()">
               <PencilIcon
-                class="transition duration-200 opacity-0 group-hover/description:opacity-100 size-5"
+                class="transition duration-200 xl:opacity-0 group-hover/description:opacity-100 size-5"
               />
             </button>
           </p>
           <p
             class="group/website mt-1 text-zinc-500 inline-flex items-center gap-x-3"
           >
-            {{ company.mWebsite }}
+            {{
+              company.mWebsite ||
+              $t("library.admin.metadata.companies.editor.websitePlaceholder")
+            }}
             <button @click="() => editWebsite()">
               <PencilIcon
-                class="transition duration-200 opacity-0 group-hover/website:opacity-100 size-4"
+                class="transition duration-200 xl:opacity-0 group-hover/website:opacity-100 size-4"
               />
             </button>
           </p>

pages/admin/metadata/companies/index.vue

@@ -10,20 +10,12 @@
         </p>
       </div>
       <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-        <NuxtLink
-          to="/admin/library/sources"
+        <button
           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"
+          @click="() => (createCompanyOpen = true)"
         >
-          <i18n-t
-            keypath="library.admin.sources.link"
-            tag="span"
-            scope="global"
-          >
-            <template #arrow>
-              <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
-            </template>
-          </i18n-t>
-        </NuxtLink>
+          {{ $t("common.create") }}
+        </button>
       </div>
     </div>
     <div class="mt-2 grid grid-cols-1">
@@ -105,6 +97,10 @@
         {{ $t("library.admin.metadata.companies.noCompanies") }}
       </p>
     </ul>
+    <ModalCreateCompany
+      v-model="createCompanyOpen"
+      @created="(company) => createCompany(company)"
+    />
   </div>
 </template>
 
@@ -122,9 +118,12 @@ useHead({
   title: t("library.admin.metadata.companies.title"),
 });
 
+const createCompanyOpen = ref(false);
+
 const searchQuery = ref("");
 
-const companies = ref(await $dropFetch("/api/v1/admin/company"));
+const rawCompanies = await $dropFetch("/api/v1/admin/company");
+const companies = ref(rawCompanies);
 
 const filteredCompanies = computed(() =>
   companies.value.filter((e: CompanyModel) => {
@@ -147,4 +146,8 @@ async function deleteCompany(id: string) {
   const index = companies.value.findIndex((e) => e.id === id);
   companies.value.splice(index, 1);
 }
+
+function createCompany(company: (typeof companies.value)[number]) {
+  companies.value.push(company);
+}
 </script>

pages/store/index.vue

@@ -59,13 +59,30 @@
     </VueCarousel>
     <div
       v-else
-      class="w-full h-full flex items-center justify-center bg-zinc-950/50 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
+      class="w-full h-full flex flex-col items-center justify-center bg-zinc-950/50 px-6 py-32 sm:px-12 sm:py-40 lg:px-16 gap-4"
     >
       <h2
         class="uppercase text-xl font-bold tracking-tight text-zinc-700 sm:text-3xl"
       >
-        {{ $t("store.noGame") }}
+        {{ $t("store.noFeatured") }}
       </h2>
+      <NuxtLink
+        v-if="user?.admin"
+        to="/admin/library"
+        type="button"
+        class="inline-flex 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 duration-200 hover:scale-105 active:scale-95"
+      >
+        <i18n-t
+          keypath="store.openFeatured"
+          tag="span"
+          scope="global"
+          class="inline-flex items-center gap-x-1"
+        >
+          <template #arrow>
+            <ArrowTopRightOnSquareIcon class="size-4" />
+          </template>
+        </i18n-t>
+      </NuxtLink>
     </div>
 
     <StoreView />
@@ -73,8 +90,12 @@
 </template>
 
 <script setup lang="ts">
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+
 const recent = await $dropFetch("/api/v1/store/featured");
 
+const user = useUser();
+
 const { t } = useI18n();
 
 useHead({