tehran_taj/apps/user-app-v2/src/views/NewestView.vue

<!--
  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>
  <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>

          <!-- Previously this view rendered its heading over blank space when
               the catalogue came back empty. Same empty state the other
               catalogue screens use, chained to the results above it. -->
          <section v-else-if="!loadingPage" class="newest__empty">
            <Icon icon="vuesax-linear:box" size="26" />
            <p>هنوز محصولی در مجموعه ثبت نشده است.</p>
          </section>
        </container>
      </ScrollFetchSearch>
    </Spinner>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue'
import Icon from '../components/icon/Icon.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 ScrollFetchSearch from '../components/ui/ScrollFetchSearch.vue'
import { useProducts } from '../composables/useProducts'

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: @page;
  min-height: 100vh;
}

.newest__scroll {
  height: calc(100vh - 61px);
}

.newest__body {
  padding-top: 76px;
  padding-bottom: 90px;
}

.newest__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

// Same empty state the other catalogue screens draw.
.newest__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;
}
.newest__empty p {
  margin: 0;
  font-size: 12.5px;
}
</style>