tehran_taj/apps/user-app-v2/src/views/search/SearchView.vue

<!--
  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>
  <div class="search">
    <PageBar title="جستجو" :back="false">
      <template #below>
        <div class="search__barExtra">
          <SearchInput @search="search" place-holder="جستجوی دسته بندی، محصولات و ..." />

          <div 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>
      </template>
    </PageBar>

    <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
      <AppPullRefresh v-model="refreshing" @refresh="onRefresh">
        <container class="search__body">
          <div v-if="rows.length" class="search__grid">
            <ProductCard v-for="item in rows" :key="item.id" :value="item" />
          </div>

          <div v-if="hasMore || loadingMore" ref="sentinel" class="search__more">
            <Spinner :spinning="true" :indicator="true" :fixed="false" tip="" cls="my-[10px]" />
          </div>

          <section v-if="!rows.length && !loadingPage" class="search__empty">
            <Icon icon="vuesax-linear:search-normal-1" size="26" />
            <p>محصولی با این مشخصات پیدا نشد.</p>
          </section>
        </container>
      </AppPullRefresh>
    </Spinner>

    <Filters
      v-model:show="showFilter"
      v-model:filterKeys="filterKeys"
      v-model="filters.query"
      :facets="facets"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import AppPullRefresh from '../../components/ui/AppPullRefresh.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 ProductCard from '../../components/product/ProductCard.vue'
import { api, type CatalogFacets, type ProductQuery } from '../../api/client'
import { useFiltersStore } from '../../stores/filtersStore'
import { usePagedProducts } from '../../composables/usePagedProducts'

const filters = useFiltersStore()
const { rows, loading, loadingMore, hasMore, resetAndLoad, loadMore } = usePagedProducts()

const loadingPage = computed(() => loading.value && rows.value.length === 0)
const refreshing = ref(false)
const showFilter = ref(false)
const filterKeys = ref<string[]>([])
const facets = ref<CatalogFacets | null>(null)

const availableCategories = computed(() => facets.value?.categories ?? [])

function toServerQuery(): ProductQuery {
  const q = filters.query
  const out: ProductQuery = { sort: 'newest' }
  if (q.text?.trim()) out.search = q.text.trim()
  if (q.cats?.[0]) out.categoryId = q.cats[0]
  if (q.brands.length) out.brandId = q.brands.join(',')
  if (q.limit_gram.length === 2) {
    out.minGram = q.limit_gram[0]
    out.maxGram = q.limit_gram[1]
  }
  return out
}

async function loadFacets() {
  try {
    facets.value = await api.getCatalogFacets()
  } catch (e) {
    console.log(e)
  }
}

async function reload(opts: { preserveRows?: boolean } = {}) {
  try {
    await resetAndLoad(toServerQuery(), opts)
  } catch (e) {
    console.log(e)
  }
}

async function onRefresh() {
  try {
    await Promise.all([loadFacets(), reload({ preserveRows: true })])
  } finally {
    refreshing.value = false
  }
}

function search(value: string | undefined) {
  filters.query.text = value
}
function setCats(id: string | undefined) {
  filters.query.cats = id ? [id] : undefined
}
function showFilters() {
  showFilter.value = true
}

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) {
        void loadMore(toServerQuery())
      }
    },
    { rootMargin: '400px' },
  )
  observer.observe(sentinel.value)
}

watch(sentinel, mountObserver)
onBeforeUnmount(() => observer?.disconnect())

let textTimer: ReturnType<typeof setTimeout> | undefined
watch(
  () => filters.query.text,
  () => {
    clearTimeout(textTimer)
    textTimer = setTimeout(() => void reload(), 300)
  },
)
watch(
  () => [filters.query.cats, filters.query.brands, filters.query.limit_gram] as const,
  () => void reload(),
  { deep: true },
)

onMounted(async () => {
  await loadFacets()
  await reload()
})
</script>

<style scoped lang="less">
.search {
  background: @page;
  min-height: 100vh;
}

.search__barExtra {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px 0;
}

.search__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 12px 0px 10px -16px;
  // `padding` alone on an RTL flex scroller can get its edge padding
  // collapsed by the browser once content overflows — explicit spacer
  // elements hold the same 16px gap reliably at both scroll extremes.
  scroll-snap-type: x proximity;
}

.search__chips::before,
.search__chips::after {
  content: '';
  flex: 0 0 16px;
}

// The mock's filter row: tall outlined pills, the active one filled solid
// @ink. Roomier than the previous chips so they read as the page's primary
// navigation rather than as dense metadata.
.search__chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  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: @wine;
  border-color: @wine;
}

.search__chip--filter.is-on {
  background: @wineDeep;
  border-color: @wineDeep;
}

.search__chip:active {
  transform: scale(0.97);
}

// Clears the fixed bar: its own row, plus the search field and the chip row
// the `below` slot adds. Grew with them — the field is 48px and the chips 40px
// now, where they were 44 and ~32.
.search__body {
  padding-top: 176px;
  padding-bottom: 90px;
}

.search__body > *:first-child {
  margin-top: 16px;
}

.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: 14px;
}

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