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/search/SearchView.vue

@@ -1,51 +1,118 @@
 <!--
-  Ported from legacy henza_pwa/src/views/search/searchPage.vue. All filtering
-  happens client-side against the one flat product list (no server-side query
-  params exist for any of this — consistent with NewestView's own "single
-  fetch" adaptation from an earlier batch).
+  Ported from legacy henza_pwa/src/views/search/searchPage.vue, restyled into
+  the redesigned design language (see components/home/* and HomeView).
+
+  All filtering still happens client-side against the one flat product list
+  (no server-side query params exist for any of this — consistent with
+  NewestView's own "single fetch" adaptation from an earlier batch). The
+  filter logic, the Filters sheet, the category chips and the collection
+  tiles are all carried over unchanged; only the chrome and the cards change.
+
+  The collection tiles keep their original destination (/collection/:id with
+  the title in ?page=), and are shown above the results exactly as the legacy
+  ProductList did on this route.
 -->
 <template>
-  <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
-    <header class="w-full z-10 top-0 bg-white shadow-md fixed">
-      <div class="p-[16px]">
-        <div class="pb-[10px] flex w-fit justify-center items-center text-primary cursor-pointer" v-if="showFilter" @click="hideFilters()">
-          <Icon icon="vuesax-linear:arrow-right-1" class="ml-1" size="25" />
-          بازگشت
+  <div class="search">
+    <PageBar :title="showFilter ? 'فیلترها' : 'جستجو'" :back="showFilter" @click.capture="onBarClick">
+      <template #below>
+        <div class="search__barExtra">
+          <SearchInput @search="search" place-holder="جستجوی دسته بندی، محصولات و ..." />
+
+          <div v-if="!showFilter" class="search__chips no-scrollbar">
+            <button
+              type="button"
+              class="search__chip search__chip--filter"
+              :class="{ 'is-on': filterKeys.length > 0 }"
+              @click="showFilters"
+            >
+              <Icon icon="vuesax-linear:filter" size="15" />
+              {{ filterKeys.length > 0 ? `${filterKeys.length} فیلتر` : 'فیلتر' }}
+            </button>
+
+            <button
+              type="button"
+              class="search__chip"
+              :class="{ 'is-on': !filters.query.cats }"
+              @click="setCats(undefined)"
+            >
+              همه
+            </button>
+            <button
+              v-for="item in availableCategories"
+              :key="item.id"
+              type="button"
+              class="search__chip"
+              :class="{ 'is-on': filters.query.cats && filters.query.cats[0] === item.id }"
+              @click="setCats(item.id)"
+            >
+              {{ item.title }}
+            </button>
+          </div>
         </div>
-        <SearchInput @search="search" place-holder="جستجوی دسته بندی، محصولات و ..." />
-      </div>
-      <div class="no-scrollbar flex overflow-x-auto my-[16px] mt-0 pr-[16px]" v-if="!showFilter">
-        <Button :type="('secondary' as any)" class="btn-secondary ml-[8px] whitespace-nowrap" v-if="filterKeys.length > 0" @click="showFilters">{{ `${filterKeys.length} فیلتر` }}</Button>
-        <Button :type="('secondary' as any)" class="ml-[8px] whitespace-nowrap" v-else @click="showFilters">اعمال فیلتر</Button>
-        <div class="flex-1 flex overflow-x-auto no-scrollbar pl-[16px]">
-          <Button :type="('secondary' as any)" :ghost="!!filters.query.cats" class="last:ml-0 ml-[8px] whitespace-nowrap" @click="setCats(undefined)">همه</Button>
-          <Button
-            :type="('secondary' as any)"
-            :ghost="!(filters.query.cats && filters.query.cats[0] === item.id)"
-            class="last:ml-0 ml-[8px] whitespace-nowrap"
-            v-for="item in availableCategories"
+      </template>
+    </PageBar>
+
+    <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
+      <Filters
+        v-model:filterKeys="filterKeys"
+        v-show="showFilter"
+        v-model="filters.query"
+        :products="allProducts"
+        @change="hideFilters"
+      />
+
+      <container v-show="!showFilter" class="search__body">
+        <div v-if="availableCollections.length" class="search__collections">
+          <button
+            v-for="item in availableCollections"
             :key="item.id"
-            @click="setCats(item.id)"
-            >{{ item.title }}</Button
+            type="button"
+            class="search__collection"
+            @click="$router.push({ path: `/collection/${item.id}`, query: { page: item.title } })"
           >
+            <Icon icon="vuesax-linear:money-recive" size="19" />
+            <span>{{ item.title }}</span>
+          </button>
         </div>
-      </div>
-    </header>
 
-    <Filters v-model:filterKeys="filterKeys" v-show="showFilter" v-model="filters.query" :products="allProducts" @change="hideFilters" />
+        <SectionHead
+          v-if="filteredProducts.length"
+          title="نتایج"
+          :subtitle="`${filteredProducts.length} محصول`"
+        />
 
-    <ProductList class="px-[16px] pb-[66px]" padding="146px" v-show="!showFilter" @pull="() => {}" :value="filteredProducts" :ciny="availableCollections" :loading="false" :flag="filteredProducts.length === 0" />
-  </Spinner>
+        <div v-if="filteredProducts.length" class="search__grid">
+          <ProductCard v-for="item in visibleProducts" :key="item.id" :value="item" />
+        </div>
+
+        <!-- The catalogue is fetched in one request (no server-side paging
+             exists), but rendering all of it at once mounts hundreds of cards
+             and images on a phone. Render a window and grow it as the user
+             reaches the end — the same incremental behaviour the previous
+             ScrollFetchSearch-based list had. -->
+        <div v-if="hasMore" ref="sentinel" class="search__more">
+          <Spinner :spinning="true" :indicator="true" tip="" cls="my-[10px]" />
+        </div>
+
+        <section v-else-if="!loadingPage" class="search__empty">
+          <Icon icon="vuesax-linear:search-normal-1" size="26" />
+          <p>محصولی با این مشخصات پیدا نشد.</p>
+        </section>
+      </container>
+    </Spinner>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { Button } from 'ant-design-vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import Icon from '../../components/icon/Icon.vue'
+import PageBar from '../../components/ui/PageBar.vue'
 import Spinner from '../../components/Spinner.vue'
 import SearchInput from '../../components/search/SearchInput.vue'
 import Filters from '../../components/search/Filters.vue'
-import ProductList from '../../components/product/ProductList.vue'
+import SectionHead from '../../components/home/SectionHead.vue'
+import ProductCard from '../../components/product/ProductCard.vue'
 import { useFiltersStore } from '../../stores/filtersStore'
 import { useNavStore } from '../../stores/navStore'
 import { api, type ProductSummary } from '../../api/client'
@@ -81,11 +148,52 @@ const filteredProducts = computed(() => {
   if (q.cats && q.cats.length > 0) list = list.filter((p) => p.category && q.cats!.includes(p.category.id))
   if (q.brands.length > 0) list = list.filter((p) => p.brand && q.brands.includes(p.brand.id))
   if (q.limit_gram.length === 2) {
-    list = list.filter((p) => p.variants.some((v) => parseFloat(v.rashWeightGrams) >= q.limit_gram[0] && parseFloat(v.rashWeightGrams) <= q.limit_gram[1]))
+    list = list.filter((p) =>
+      p.variants.some(
+        (v) => parseFloat(v.rashWeightGrams) >= q.limit_gram[0] && parseFloat(v.rashWeightGrams) <= q.limit_gram[1],
+      ),
+    )
   }
   return list
 })
 
+// ── Incremental rendering ────────────────────────────────────────────────
+// The whole catalogue arrives in one request (no server-side paging exists),
+// so the filtering above is instant — but mounting every matching card at once
+// means hundreds of cards and images on a phone. Render a window instead and
+// grow it when the sentinel at the end scrolls into view.
+const PAGE_SIZE = 20
+const visibleCount = ref(PAGE_SIZE)
+const visibleProducts = computed(() => filteredProducts.value.slice(0, visibleCount.value))
+const hasMore = computed(() => visibleCount.value < filteredProducts.value.length)
+
+const sentinel = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | undefined
+
+function mountObserver() {
+  observer?.disconnect()
+  if (!sentinel.value) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((e) => e.isIntersecting) && hasMore.value) {
+        visibleCount.value += PAGE_SIZE
+      }
+    },
+    { rootMargin: '400px' },
+  )
+  observer.observe(sentinel.value)
+}
+
+// Any change to the filters restarts the window from the top.
+watch(filteredProducts, () => {
+  visibleCount.value = PAGE_SIZE
+})
+
+// The sentinel is v-if'd, so re-attach whenever it appears or is replaced.
+watch(sentinel, mountObserver)
+
+onBeforeUnmount(() => observer?.disconnect())
+
 async function loadProducts() {
   loadingPage.value = true
   try {
@@ -114,5 +222,133 @@ function hideFilters(event?: { resetFilters: boolean }) {
   }
 }
 
+// While the filter sheet is open the bar's back button closes the sheet
+// rather than leaving the route, matching the legacy "بازگشت" affordance.
+function onBarClick(e: MouseEvent) {
+  if (!showFilter.value) return
+  const btn = (e.target as HTMLElement)?.closest('button')
+  if (btn) {
+    e.stopPropagation()
+    hideFilters()
+  }
+}
+
 onMounted(loadProducts)
 </script>
+
+<style scoped lang="less">
+.search {
+  background: @canvas;
+  min-height: 100vh;
+}
+
+.search__barExtra {
+  max-width: 768px;
+  margin: 0 auto;
+  padding: 0 16px 11px;
+}
+
+.search__chips {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  margin: 11px -16px 0;
+  padding: 0 16px;
+  scroll-snap-type: x proximity;
+}
+
+.search__chip {
+  scroll-snap-align: start;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: @inkSoft;
+  background: @canvas;
+  border: 1px solid @hairline;
+  transition: all 0.2s ease;
+}
+
+.search__chip.is-on {
+  color: #fff;
+  background: @ink;
+  border-color: @ink;
+}
+
+.search__chip--filter.is-on {
+  background: @wine;
+  border-color: @wine;
+}
+
+.search__chip:active {
+  transform: scale(0.97);
+}
+
+.search__body {
+  padding-top: 16px;
+  padding-bottom: 90px;
+}
+
+.search__collections {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px;
+  margin-bottom: 22px;
+}
+
+.search__collection {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 13px 10px;
+  border-radius: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: @inkSoft;
+  background: @hairlineSoft;
+  border: 1px solid @hairline;
+  transition: all 0.2s ease;
+}
+
+.search__collection:active {
+  transform: scale(0.98);
+}
+
+.search__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 11px;
+}
+
+.search__more {
+  display: flex;
+  justify-content: center;
+  padding: 18px 0 4px;
+}
+
+.search__empty {
+  margin-top: 8px;
+  padding: 34px 20px;
+  border: 1px dashed @hairline;
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: @inkFaint;
+}
+.search__empty p {
+  margin: 0;
+  font-size: 12.5px;
+}
+</style>