feat: persist customer product and shop favorites through the live API

Replace mall fixture favorites with customer-scoped endpoints, and send signed-out shoppers back to the page they left after sign-in.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/mall/pages/goods/[id].vue

@@ -14,6 +14,7 @@ const { locale, t } = useI18n();
 const { $api } = useNuxtApp();
 const cart = useCartStore();
 const session = useSessionStore();
+const signInThenReturn = useSignInRedirect();
 
 const routeId = computed(() => {
   const value = route.params.id;
@@ -72,7 +73,7 @@ const claimedIds = ref<Set<string>>(new Set());
 
 async function claim(coupon: CouponTemplate): Promise<void> {
   if (!session.isLoggedIn) {
-    await navigateTo("/login");
+    await signInThenReturn();
     return;
   }
   claimingId.value = coupon.id;
@@ -92,6 +93,10 @@ const selectedAttributes = reactive<Record<string, string>>({});
 const quantity = ref(1);
 const galleryIndex = ref(0);
 const favorite = ref(false);
+const favoriteLoading = ref(false);
+const favoriteBusy = ref(false);
+const favoriteError = ref("");
+let favoriteRequestVersion = 0;
 const cartSuccess = ref(false);
 const activeTab = ref("detail");
 
@@ -116,7 +121,6 @@ watch(
     if (initial) Object.assign(selectedAttributes, initial.attributes);
     quantity.value = 1;
     galleryIndex.value = 0;
-    favorite.value = false;
     cartSuccess.value = false;
     activeTab.value = "detail";
   },
@@ -176,7 +180,7 @@ const addToCart = async (): Promise<boolean> => {
   } catch (error) {
     // A live cart needs a token; send a signed-out shopper to sign in and back.
     if (error instanceof ApiError && error.status === 401) {
-      await router.push(`/login?redirect=${encodeURIComponent(route.fullPath)}`);
+      await signInThenReturn();
       return false;
     }
     throw error;
@@ -198,6 +202,66 @@ const addCart = async (): Promise<void> => {
   }
 };
 
+watch(
+  () => [product.value?.id, session.isLoggedIn] as const,
+  async ([id, loggedIn]) => {
+    const version = ++favoriteRequestVersion;
+    favorite.value = false;
+    favoriteLoading.value = Boolean(id && loggedIn);
+    favoriteBusy.value = false;
+    favoriteError.value = "";
+    if (!id || !loggedIn) return;
+    try {
+      const page = await $api.listFavorites({ kind: "product", target_id: id, per_page: 1 });
+      if (version === favoriteRequestVersion && product.value?.id === id) {
+        favorite.value = page.items.length > 0;
+      }
+    } catch {
+      if (version === favoriteRequestVersion && product.value?.id === id) {
+        favoriteError.value = t("product.favoriteLoadFailed");
+      }
+    } finally {
+      if (version === favoriteRequestVersion) favoriteLoading.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+const toggleFavorite = async (): Promise<void> => {
+  const current = product.value;
+  if (!current || favoriteLoading.value || favoriteBusy.value) return;
+  if (!session.isLoggedIn) {
+    await signInThenReturn();
+    return;
+  }
+  const version = ++favoriteRequestVersion;
+  favoriteBusy.value = true;
+  favoriteError.value = "";
+  try {
+    if (favorite.value) {
+      await $api.removeProductFavorite(current.id);
+      if (version === favoriteRequestVersion && product.value?.id === current.id) {
+        favorite.value = false;
+      }
+    } else {
+      await $api.addProductFavorite(current.id);
+      if (version === favoriteRequestVersion && product.value?.id === current.id) {
+        favorite.value = true;
+      }
+    }
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) {
+      await signInThenReturn();
+      return;
+    }
+    if (version === favoriteRequestVersion && product.value?.id === current.id) {
+      favoriteError.value = t("product.favoriteFailed");
+    }
+  } finally {
+    if (version === favoriteRequestVersion) favoriteBusy.value = false;
+  }
+};
+
 // No reviews tab: there is no reviews capability, and the mall will not present
 // invented reviewers and ratings as fact. See the wave-6 design.
 const tabs = computed(() => [
@@ -256,10 +320,12 @@ const detailImages = computed(() => product.value?.images ?? []);
               type="button"
               class="favorite"
               :class="{ active: favorite }"
+              :disabled="favoriteLoading || favoriteBusy"
               :aria-label="favorite ? t('product.unfavorite') : t('product.favorite')"
-              @click="favorite = !favorite"
+              @click="toggleFavorite"
             >{{ favorite ? "♥" : "♡" }}</button>
           </div>
+          <p v-if="favoriteError" class="favorite-error">{{ favoriteError }}</p>
           <div class="price-panel">
             <span class="price-label">{{ t("product.currentPrice") }}</span>
             <strong v-if="matchedSku" class="price"><PriceText :amount-minor="matchedSku.price_minor" :currency="matchedSku.currency" /></strong>
@@ -489,9 +555,14 @@ h1 {
   padding: 13px 0;
 }
 .summary-meta .soldout,
-.stock-warning {
+.stock-warning,
+.favorite-error {
   color: var(--mall-red);
 }
+.favorite-error {
+  margin: 6px 0 0;
+  font-size: 12px;
+}
 .coupon-row,
 .attribute-row,
 .quantity-row {