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/components/ui/PageBar.vue

@@ -0,0 +1,115 @@
+<!--
+  Sticky translucent page bar in the redesigned design language, extracted from
+  the home screen's own `.home__bar` so every other screen gets the identical
+  chrome instead of the old dark AppHeader.
+
+  Layout mirrors the home bar exactly: a leading action (usually back), a
+  centred title, and an optional trailing action via the `trailing` slot — so
+  the bar's height, blur, hairline and icon buttons stay consistent app-wide.
+-->
+<template>
+  <header class="bar">
+    <div class="bar__inner">
+      <button v-if="back" type="button" class="bar__btn" aria-label="بازگشت" @click="onBack">
+        <Icon icon="vuesax-linear:arrow-right-1" size="20" />
+      </button>
+      <span v-else class="bar__spacer" aria-hidden="true" />
+
+      <h1 class="bar__title">{{ title }}</h1>
+
+      <div class="bar__trailing">
+        <slot name="trailing">
+          <span class="bar__spacer" aria-hidden="true" />
+        </slot>
+      </div>
+    </div>
+    <slot name="below" />
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import Icon from '../icon/Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    /** Show the back button. */
+    back?: boolean
+    /** Route name to go to instead of history.back(). */
+    backTo?: string
+  }>(),
+  { back: true },
+)
+
+const router = useRouter()
+
+function onBack() {
+  if (props.backTo) router.push({ name: props.backTo })
+  else router.back()
+}
+</script>
+
+<style scoped lang="less">
+.bar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(14px);
+  border-bottom: 1px solid @hairline;
+}
+
+.bar__inner {
+  max-width: 768px;
+  margin: 0 auto;
+  padding: 11px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.bar__title {
+  margin: 0;
+  font-size: 14.5px;
+  font-weight: 800;
+  color: @ink;
+  letter-spacing: -0.1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bar__btn {
+  position: relative;
+  flex: 0 0 auto;
+  width: 38px;
+  height: 38px;
+  border: 0;
+  cursor: pointer;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: @ink;
+  background: @hairlineSoft;
+  transition: background 0.18s ease;
+}
+
+.bar__btn:active {
+  transform: scale(0.94);
+}
+
+.bar__trailing {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bar__spacer {
+  display: block;
+  width: 38px;
+  height: 38px;
+}
+</style>