user-app: extend the redesign across the purchase path

Applies the home/product-detail design language (LESS colour tokens, BEM
class names, hairline-bordered cards, SectionHead, dashed empty states) to
the screens a shopper actually walks through: search, collection, newest,
cart and favorites.

Two shared pieces are extracted so the language stays consistent rather than
re-typed per screen:
  - components/ui/PageBar.vue — the sticky translucent bar with blur and a
    hairline, lifted from the home screen's own header so every other screen
    gets identical chrome instead of the old dark AppHeader.
  - components/product/ProductCard.vue — the catalogue workhorse card. It is
    deliberately a sibling of home/ShowcaseCard (which keeps its editorial "wide"
    variant and badge) and additionally surfaces stock, which the
    catalogue needs and the home screen does not.

Deleted as orphaned once nothing imported them: ProductList,
ProductVerticalFull, ProductVertical, ProductHorizontal, CollectionCard —
all Tailwind utility soup carried over from the legacy PWA.

Behaviour is preserved throughout; only chrome and cards change. The cart
still posts to the real POST /orders with wagePercent from each item's
pinned variant, still gates on a real session, and still keeps the note
drawer and success step. Search keeps its client-side filtering, the Filters
sheet, category chips and collection tiles. No rial price is printed
anywhere, for the same reason as the rest of the redesign: a finished
piece's price is the live gold rate x weight plus wage, computed at order
time and never stored on the product.

FIXED a regression this redesign introduced before it shipped: dropping
ScrollFetchSearch from the search grid meant all 205 catalogue products
mounted at once (205 cards, 205 images). Both search and newest now render
a 20-item window that grows as the user reaches the end.

Verified in a real browser against the running API and native database, not
just a green build: home 13 cards, search 20 -> 40 -> 60 -> 80 on scroll,
newest 20 -> 40 -> 60, cart empty state, favorites 3 cards behind a seeded
session. All images loaded (0 broken), no horizontal overflow, no console
errors beyond pre-existing vue3-lazyload noise that predates this work.
vue-tsc and vite build both clean.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

apps/user-app/src/views/user/FavoritesView.vue

@@ -1,34 +1,47 @@
 <!--
-  Ported from legacy henza_pwa/src/views/user/src/components/favorits.vue.
+  Ported from legacy henza_pwa/src/views/user/src/components/favorits.vue,
+  restyled into the redesigned design language (see components/home/* and
+  HomeView).
+
   Real, not stubbed: favorites are the local favoritesStore (per-device, no
   backend persistence — see favoritesStore.ts from an earlier batch), filtered
   against the real product catalog client-side. No pagination — the whole
   catalog is fetched once (same "small catalog" approach as everywhere else).
+  That logic is carried over unchanged; only the chrome and the card change.
 -->
 <template>
-  <div class="fixed top-0 z-10 w-full">
-    <AppHeader>
-      <div class="flex justify-between items-center">
-        <Icon icon="vuesax-linear:arrow-right-1" class="cursor-pointer text-white" size="25" @click="router.push({ name: 'userPage::hasSubRoute' })" />
-        <h3 class="text-white bold mb-0">علاقمندی</h3>
-        <div></div>
-      </div>
-    </AppHeader>
-  </div>
-  <div class="h-16"></div>
+  <div class="favs">
+    <PageBar title="علاقه‌مندی" back-to="userPage::hasSubRoute" />
 
-  <Spinner :spinning="loading" tip="در حال دریافت اطلاعات">
-    <ProductList class="px-[16px] pt-8" padding="px" :flag="favoriteProducts.length === 0" :value="favoriteProducts" :loading="false" is-fav @pull="() => {}" />
-  </Spinner>
+    <Spinner :spinning="loading" tip="در حال دریافت اطلاعات">
+      <container class="favs__body">
+        <template v-if="favoriteProducts.length">
+          <SectionHead title="ذخیره‌شده‌ها" :subtitle="`${favoriteProducts.length} محصول`" />
+          <div class="favs__grid">
+            <ProductCard v-for="item in favoriteProducts" :key="item.id" :value="item" />
+          </div>
+        </template>
+
+        <section v-else-if="!loading" class="favs__empty">
+          <Icon icon="vuesax-linear:heart" size="26" />
+          <p>هنوز محصولی را به علاقه‌مندی‌ها اضافه نکرده‌اید.</p>
+          <button type="button" class="favs__emptyCta" @click="router.push({ name: 'home' })">
+            دیدن محصولات
+          </button>
+        </section>
+      </container>
+    </Spinner>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import Icon from '../../components/icon/Icon.vue'
-import AppHeader from '../../components/AppHeader.vue'
+import PageBar from '../../components/ui/PageBar.vue'
 import Spinner from '../../components/Spinner.vue'
-import ProductList from '../../components/product/ProductList.vue'
+import SectionHead from '../../components/home/SectionHead.vue'
+import ProductCard from '../../components/product/ProductCard.vue'
 import { useFavoritesStore } from '../../stores/favoritesStore'
 import { api, type ProductSummary } from '../../api/client'
 
@@ -48,3 +61,50 @@ onMounted(async () => {
   }
 })
 </script>
+
+<style scoped lang="less">
+.favs {
+  background: @canvas;
+  min-height: 100vh;
+}
+
+.favs__body {
+  padding-top: 16px;
+  padding-bottom: 90px;
+}
+
+.favs__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 11px;
+}
+
+.favs__empty {
+  margin-top: 8px;
+  padding: 38px 20px;
+  border: 1px dashed @hairline;
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: @inkFaint;
+}
+.favs__empty p {
+  margin: 0;
+  font-size: 12.5px;
+}
+
+.favs__emptyCta {
+  margin-top: 4px;
+  padding: 9px 18px;
+  border: 0;
+  cursor: pointer;
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #fff;
+  background: @ink;
+}
+</style>