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/CollectionView.vue

@@ -1,56 +1,59 @@
 <!--
-  Ported from legacy henza_pwa/src/views/search/collection/index.vue.
+  Ported from legacy henza_pwa/src/views/search/collection/index.vue, restyled
+  into the redesigned design language (see components/home/* and HomeView).
+
   Filters the one flat product list client-side by collection id (route
   param) — no server-side ciny_id query param exists; consistent with the
-  rest of this port's "small catalog, client-side filtering" approach.
+  rest of this port's "small catalog, client-side filtering" approach. That
+  logic is carried over unchanged.
+
+  The view no longer owns a Drawer: ProductCard opens the product detail
+  itself, the same way it does on every other catalogue screen, so the
+  detail behaviour is identical everywhere instead of re-implemented here.
 -->
 <template>
-  <div>
-    <AppHeader>
-      <nav class="grid grid-cols-10 justify-center items-center">
-        <div class="w-full col-span-1" @click="router.push({ name: 'search' })">
-          <Icon icon="vuesax-linear:arrow-right-1" class="ml-2 text-white" size="19" />
+  <div class="coll">
+    <PageBar :title="collectionTitle" back-to="search" />
+
+    <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
+      <container class="coll__body">
+        <SectionHead title="محصولات این مجموعه" subtitle="برای دیدن جزئیات، روی محصول ضربه بزنید" />
+
+        <div v-if="collectionProducts.length" class="coll__grid">
+          <ProductCard v-for="item in collectionProducts" :key="item.id" :value="item" />
         </div>
-        <div class="w-full col-span-8 flex mb-0 justify-center items-center h-[19px]">
-          <Icon icon="vuesax-linear:money-2" class="ml-2 text-white" size="19" />
-          <h4 class="bold mb-0 text-white">{{ route.query.page }}</h4>
-        </div>
-        <div class="w-full col-span-1"></div>
-      </nav>
-    </AppHeader>
-    <div class="flex flex-col gap-4 m-4 p-2 bg-gray-50 h-[90vh] rounded-lg">
-      <span class="text-center font-bold mt-2">برای مشاهده جزئیات محصول روی آیتم ضربه بزنید</span>
-      <Spin :spinning="loadingPage">
-        <div class="grid grid-cols-4 gap-8 overflow-y-auto mx-4 max-h-[85vh] pb-10">
-          <CollectionCard v-for="item in collectionProducts" :key="item.id" @click="openDrawer(item.id)" :item="item" />
-        </div>
-      </Spin>
-    </div>
+
+        <section v-else-if="!loadingPage" class="coll__empty">
+          <Icon icon="vuesax-linear:box" size="26" />
+          <p>در این مجموعه محصولی ثبت نشده است.</p>
+        </section>
+      </container>
+    </Spinner>
   </div>
-  <Drawer v-model:visible="visible" placement="bottom" :closable="false" class="rtl" height="100vh" :bodyStyle="{ padding: 0, position: 'relative' }">
-    <SingleProduct v-if="activeProductId" :id="activeProductId" @closeDrawer="closeDrawer" :key="activeProductId" />
-  </Drawer>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Drawer, Spin } from 'ant-design-vue'
+import { useRoute } from 'vue-router'
 import Icon from '../../components/icon/Icon.vue'
-import AppHeader from '../../components/AppHeader.vue'
-import CollectionCard from '../../components/product/CollectionCard.vue'
-import SingleProduct from '../../components/product/SingleProduct.vue'
+import PageBar from '../../components/ui/PageBar.vue'
+import Spinner from '../../components/Spinner.vue'
+import SectionHead from '../../components/home/SectionHead.vue'
+import ProductCard from '../../components/product/ProductCard.vue'
 import { api, type ProductSummary } from '../../api/client'
 
 const route = useRoute()
-const router = useRouter()
 
-const visible = ref(false)
-const activeProductId = ref<string | null>(null)
 const loadingPage = ref(false)
 const allProducts = ref<ProductSummary[]>([])
 
-const collectionProducts = computed(() => allProducts.value.filter((p) => p.collections.some((c) => c.collectionId === route.params.id)))
+// legacy passed the collection's title through as ?page=<title>; kept, with a
+// neutral fallback so the bar is never blank on a direct link.
+const collectionTitle = computed(() => (route.query.page as string) || 'مجموعه')
+
+const collectionProducts = computed(() =>
+  allProducts.value.filter((p) => p.collections.some((c) => c.collectionId === route.params.id)),
+)
 
 onMounted(async () => {
   loadingPage.value = true
@@ -60,12 +63,38 @@ onMounted(async () => {
     loadingPage.value = false
   }
 })
-
-function openDrawer(id: string) {
-  activeProductId.value = id
-  visible.value = true
-}
-function closeDrawer() {
-  visible.value = false
-}
 </script>
+
+<style scoped lang="less">
+.coll {
+  background: @canvas;
+  min-height: 100vh;
+}
+
+.coll__body {
+  padding-top: 16px;
+  padding-bottom: 90px;
+}
+
+.coll__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 11px;
+}
+
+.coll__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;
+}
+.coll__empty p {
+  margin: 0;
+  font-size: 12.5px;
+}
+</style>