Merge remote-tracking branch 'origin/store' into release-prep

components/Modal/CreateCollection.vue

@@ -59,7 +59,6 @@ const emit = defineEmits<{
 
 const open = defineModel<boolean>({ required: true });
 
-const { t } = useI18n();
 const collectionName = ref("");
 const createCollectionLoading = ref(false);
 const collections = await useCollections();
@@ -74,6 +73,7 @@ async function createCollection() {
     const response = await $dropFetch("/api/v1/collection", {
       method: "POST",
       body: { name: collectionName.value },
+      failTitle: "Failed to create collection",
     });
 
     // Add the game if provided
@@ -83,6 +83,7 @@ async function createCollection() {
       >(`/api/v1/collection/${response.id}/entry`, {
         method: "POST",
         body: { id: props.gameId },
+        failTitle: "Failed to add game to collection",
       });
       response.entries.push(entry);
     }
@@ -94,20 +95,6 @@ async function createCollection() {
     open.value = false;
 
     emit("created", response.id);
-  } catch (error) {
-    console.error("Failed to create collection:", error);
-
-    const err = error as { statusMessage?: string };
-    createModal(
-      ModalType.Notification,
-      {
-        title: t("errors.library.collection.create.title"),
-        description: t("errors.library.collection.create.desc", [
-          err?.statusMessage ?? t("errors.unknown"),
-        ]),
-      },
-      (_, c) => c(),
-    );
   } finally {
     createCollectionLoading.value = false;
   }

components/UserHeader/StoreNav.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="w-full bg-zinc-950 p-1 inline-flex items-center gap-x-2 fixed inset-x-0 top-0 z-100"
+  >
+    <button
+      class="p-1 text-zinc-300 hover:text-zinc-100 hover:bg-zinc-900 transition-all rounded"
+      @click="() => router.back()"
+    >
+      <ChevronLeftIcon class="size-4" />
+    </button>
+    <button
+      class="p-1 text-zinc-300 hover:text-zinc-100 hover:bg-zinc-900 transition-all rounded"
+      @click="() => router.forward()"
+    >
+      <ChevronRightIcon class="size-4" />
+    </button>
+    <span class="text-zinc-400 text-sm">
+      {{ title }}
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
+
+const router = useRouter();
+const title = ref("Loading...");
+
+onMounted(() => {
+  title.value = document.title;
+});
+
+router.afterEach(() => {
+  title.value = "Loading...";
+  // TODO: more robust after-render "detection"
+  setTimeout(() => {
+    title.value = document.title;
+  }, 500);
+});
+</script>