feat: initial commit

apps/user-app/src/components/ui/ScrollFetchAfterSearch.vue

@@ -0,0 +1,48 @@
+<!--
+  Ported from legacy henza_pwa/src/components/ui/ScrollFetchAfterSearch.vue.
+  Legacy imported emp_after_search.svg / emp_before_search.svg and an `isSearch`
+  prop to pick between them, but the live template used neither — it rendered
+  `ordersEmpty.svg` unconditionally. Ported as-is (unused imports dropped,
+  `isSearch` kept since it is part of the component's declared prop contract).
+-->
+<template>
+  <main
+    class="overflow-auto no-scrollbar w-[100vw] h-screen max-w-screen-md m-auto"
+    :style="{ paddingTop: padding || transition.headerHeight + 'px' }"
+    ref="scrollArea"
+  >
+    <slot></slot>
+    <Spinner cls="my-[10px]" :spinning="loading" :indicator="true" tip="درحال دریافت اطلاعات" />
+    <EmptyState v-if="flag && !loading" :image="ordersEmpty" />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useInfiniteScroll } from '@vueuse/core'
+import Spinner from '../Spinner.vue'
+import EmptyState from '../EmptyState.vue'
+import ordersEmpty from '../../assets/img/empty/ordersEmpty.svg'
+import { useTransitionStore } from '../../stores/transitionStore'
+
+withDefaults(
+  defineProps<{
+    loading: boolean
+    flag: boolean
+    padding?: string
+    isSearch?: boolean
+  }>(),
+  {},
+)
+const emit = defineEmits<{ (e: 'fetch'): void }>()
+const transition = useTransitionStore()
+const scrollArea = ref(null)
+
+useInfiniteScroll(
+  scrollArea,
+  () => {
+    emit('fetch')
+  },
+  { distance: 50 },
+)
+</script>