Store overhaul (#142)

* feat: small library tweaks + company page

* feat: new store view

* fix: ci merge error

* feat: add genres to store page

* feat: sorting

* feat: lock game/version imports while their tasks are running

* feat: feature games

* feat: tag based filtering

* fix: make tags alphabetical

* refactor: move a bunch of i18n to common

* feat: add localizations for everything

* fix: title description on panel

* fix: feature carousel text

* fix: i18n footer strings

* feat: add tag page

* fix: develop merge

* feat: offline games support (don't error out if provider throws)

* feat: tag management

* feat: show library next to game import + small fixes

* feat: most of the company and tag managers

* feat: company text field editing

* fix: small fixes + tsgo experiemental

* feat: upload icon and banner

* feat: store infinite scrolling and bulk import mode

* fix: lint

* fix: add drop-base to prettier ignore

pages/admin/library/import.vue

@@ -12,9 +12,15 @@
         <ListboxButton
           class="relative w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6"
         >
-          <span v-if="currentlySelectedGame != -1" class="block truncate">{{
-            games.unimportedGames[currentlySelectedGame].game
-          }}</span>
+          <span v-if="currentlySelectedGame != -1" class="block truncate"
+            >{{ games.unimportedGames[currentlySelectedGame].game }}
+            <span
+              class="px-1 py-0.5 text-xs bg-blue-600/10 rounded-sm ring-1 ring-blue-600 text-blue-400"
+              >{{
+                games.unimportedGames[currentlySelectedGame].library.name
+              }}</span
+            ></span
+          >
           <span v-else class="block truncate text-zinc-400">{{
             $t("library.admin.import.selectDir")
           }}</span>
@@ -37,9 +43,9 @@
             class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-zinc-800 focus:outline-none sm:text-sm"
           >
             <ListboxOption
-              v-for="({ game }, gameIdx) in games.unimportedGames"
+              v-for="({ game, library }, gameIdx) in games.unimportedGames"
               :key="game"
-              v-slot="{ active, selected }"
+              v-slot="{ active }"
               as="template"
               :value="gameIdx"
             >
@@ -51,14 +57,20 @@
               >
                 <span
                   :class="[
-                    selected ? 'font-semibold' : 'font-normal',
-                    'block truncate',
+                    gameIdx === currentlySelectedGame
+                      ? 'font-semibold'
+                      : 'font-normal',
+                    'inline-flex items-center gap-x-2 block truncate py-1 w-full',
                   ]"
-                  >{{ game }}</span
+                  >{{ game }}
+                  <span
+                    class="px-1 py-0.5 text-xs bg-blue-600/10 rounded-sm ring-1 ring-blue-600 text-blue-400"
+                    >{{ library.name }}</span
+                  ></span
                 >
 
                 <span
-                  v-if="selected"
+                  v-if="gameIdx === currentlySelectedGame"
                   :class="[
                     active ? 'text-white' : 'text-blue-600',
                     'absolute inset-y-0 right-0 flex items-center pr-4',
@@ -72,6 +84,34 @@
         </transition>
       </div>
     </Listbox>
+    <div class="flex items-center justify-between gap-x-8">
+      <span class="flex grow flex-col">
+        <label
+          id="bulkImport-label"
+          class="text-sm/6 font-medium text-zinc-100"
+          >{{ $t("library.admin.import.bulkImportTitle") }}</label
+        >
+        <span id="bulkImport-description" class="text-sm text-zinc-400">{{
+          $t("library.admin.import.bulkImportDescription")
+        }}</span>
+      </span>
+      <div
+        class="group relative inline-flex w-11 shrink-0 rounded-full bg-zinc-800 p-0.5 inset-ring inset-ring-zinc-100/5 outline-offset-2 outline-blue-600 transition-colors duration-200 ease-in-out has-checked:bg-blue-600 has-focus-visible:outline-2"
+      >
+        <span
+          class="size-5 rounded-full bg-white shadow-xs ring-1 ring-zinc-100/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-5"
+        />
+        <input
+          id="bulkImport"
+          v-model="bulkImportMode"
+          type="checkbox"
+          class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
+          name="bulkImport"
+          aria-labelledby="bulkImport-label"
+          aria-describedby="bulkImport-description"
+        />
+      </div>
+    </div>
 
     <div v-if="currentlySelectedGame !== -1" class="flex flex-col gap-y-4">
       <!-- without metadata option -->
@@ -277,18 +317,20 @@ definePageMeta({
 
 const { t } = useI18n();
 
-const games = await $dropFetch("/api/v1/admin/import/game");
+const rawGames = await $dropFetch("/api/v1/admin/import/game");
+const games = ref(rawGames);
 const currentlySelectedGame = ref(-1);
 const gameSearchResultsLoading = ref(false);
 const gameSearchResultsError = ref<string | undefined>();
 const gameSearchTerm = ref("");
 const gameSearchLoading = ref(false);
+const bulkImportMode = ref(false);
 
 async function updateSelectedGame(value: number) {
   if (currentlySelectedGame.value == value) return;
   currentlySelectedGame.value = value;
   if (currentlySelectedGame.value == -1) return;
-  const option = games.unimportedGames[currentlySelectedGame.value];
+  const option = games.value.unimportedGames[currentlySelectedGame.value];
   if (!option) return;
 
   metadataResults.value = undefined;
@@ -299,12 +341,19 @@ async function updateSelectedGame(value: number) {
 }
 
 async function searchGame() {
+  gameSearchResultsError.value = undefined;
   gameSearchLoading.value = true;
-  const results = await $dropFetch(
-    `/api/v1/admin/import/game/search?q=${encodeURIComponent(gameSearchTerm.value)}`,
-  );
-  metadataResults.value = results;
-  gameSearchLoading.value = false;
+  try {
+    const results = await $dropFetch(
+      `/api/v1/admin/import/game/search?q=${encodeURIComponent(gameSearchTerm.value)}`,
+    );
+    metadataResults.value = results;
+    gameSearchLoading.value = false;
+  } catch (e) {
+    gameSearchLoading.value = false;
+
+    throw e;
+  }
 }
 
 function updateSelectedGame_wrapper(value: number) {
@@ -332,18 +381,24 @@ async function importGame(useMetadata: boolean) {
     useMetadata && metadataResults.value
       ? metadataResults.value[currentlySelectedMetadata.value]
       : undefined;
-  const option = games.unimportedGames[currentlySelectedGame.value];
+  const option = games.value.unimportedGames[currentlySelectedGame.value];
 
   const { taskId } = await $dropFetch("/api/v1/admin/import/game", {
     method: "POST",
     body: {
       path: option.game,
-      library: option.library,
+      library: option.library.id,
       metadata,
     },
   });
 
-  router.push(`/admin/task/${taskId}`);
+  if (!bulkImportMode.value) {
+    router.push(`/admin/task/${taskId}`);
+  } else {
+    games.value.unimportedGames.splice(currentlySelectedGame.value, 1);
+    currentlySelectedGame.value = -1;
+    gameSearchResultsError.value = undefined;
+  }
 }
 function importGame_wrapper(metadata = true) {
   importLoading.value = true;