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

@@ -1,25 +1,44 @@
-<!-- Ported from legacy henza_pwa/src/views/newest.vue.
-     See useProducts.ts for the pagination-simplification note. -->
+<!--
+  Ported from legacy henza_pwa/src/views/newest.vue, restyled into the
+  redesigned design language (see components/home/* and HomeView).
+  See useProducts.ts for the pagination-simplification note.
+
+  Data wiring is untouched: the same useProducts() composable, the same
+  pull-to-fetch pagination, and the same ScrollFetchSearch infinite scroll.
+  Only the chrome and the card change — AppHeader -> PageBar, and the
+  Tailwind-utility product rows -> the shared ProductCard grid.
+-->
 <template>
-  <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
-    <AppHeader>
-      <nav class="flex justify-start items-center">
-        <router-link :to="{ name: 'home' }" class="h-[25px] w-[25px]">
-          <Icon icon="vuesax-linear:arrow-right-1" class="cursor-pointer text-white" size="28" />
-        </router-link>
-        <h4 class="text-white bold mb-0 mr-[20%] md:mr-[40%]">جدید ترین محصولات</h4>
-      </nav>
-    </AppHeader>
-    <ProductList padding="81px" class="px-[16px] pb-[66px]" @pull="pull" :value="productsData.productList" :loading="loadingPull" :flag="productsData.flag" />
-  </Spinner>
+  <div class="newest">
+    <PageBar title="جدیدترین محصولات" back-to="home" />
+
+    <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
+      <ScrollFetchSearch
+        class="newest__scroll"
+        :loading="loadingPull"
+        :flag="productsData.flag"
+        padding="0px"
+        @fetch="pull"
+      >
+        <container class="newest__body">
+          <SectionHead title="تازه‌ها" subtitle="آخرین افزوده‌های مجموعه" />
+
+          <div v-if="productsData.productList.length" class="newest__grid">
+            <ProductCard v-for="item in visibleProducts" :key="item.id" :value="item" />
+          </div>
+        </container>
+      </ScrollFetchSearch>
+    </Spinner>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
-import Icon from '../components/icon/Icon.vue'
-import AppHeader from '../components/AppHeader.vue'
+import { computed, onBeforeMount, ref } from '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 ScrollFetchSearch from '../components/ui/ScrollFetchSearch.vue'
 import { useProducts } from '../composables/useProducts'
 
 const { productsData, getProducts } = useProducts()
@@ -27,10 +46,49 @@ const { productsData, getProducts } = useProducts()
 const loadingPage = ref(false)
 const loadingPull = ref(false)
 
+// ── Incremental rendering ────────────────────────────────────────────────
+// useProducts() accumulates the fetched list, and this port fetches the whole
+// (small) catalogue rather than truly paging the server. Mounting every card
+// at once puts hundreds of images on screen, so render a window and grow it
+// each time ScrollFetchSearch reports the user reached the end — which is the
+// same @fetch signal that used to drive pagination.
+const PAGE_SIZE = 20
+const visibleCount = ref(PAGE_SIZE)
+const visibleProducts = computed(() => productsData.productList.slice(0, visibleCount.value))
+
 onBeforeMount(async () => {
   await getProducts(loadingPage, false)
 })
+
 const pull = async () => {
+  // Reveal more of what is already loaded first; only go back to the server
+  // once the whole fetched list is on screen.
+  if (visibleCount.value < productsData.productList.length) {
+    visibleCount.value += PAGE_SIZE
+    return
+  }
   await getProducts(loadingPull, true)
 }
 </script>
+
+<style scoped lang="less">
+.newest {
+  background: @canvas;
+  min-height: 100vh;
+}
+
+.newest__scroll {
+  height: calc(100vh - 61px);
+}
+
+.newest__body {
+  padding-top: 16px;
+  padding-bottom: 90px;
+}
+
+.newest__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 11px;
+}
+</style>