responsived and added filter response message

frontend/components/global/products/FilterProducts.vue

@@ -27,6 +27,8 @@ const in_stock = ref(JSON.parse(params.in_stock ?? false));
 
 const sliderValueDebounced = refDebounced(sliderValue, 1000);
 
+const filtersSuccessMessage = ref<{ title: string; status: string } | null>("");
+
 // queries
 
 const filters = computed(() => {
@@ -46,7 +48,8 @@ const { data: categories, suspense } = useGetCategories();
 
 await suspense();
 
-const { isPending: productsIsPending } = useGetProducts(filters);
+const { isPending: productsIsPending, status: productsStatus } =
+    useGetProducts(filters);
 
 // computed
 
@@ -92,6 +95,26 @@ watch(
         params.in_stock = newInStock;
     }
 );
+
+watch(
+    () => productsStatus.value,
+    (nv) => {
+        if (nv == "success") {
+            filtersSuccessMessage.value = {
+                title: "فیلتر اعمال شد",
+                status: nv,
+            };
+        } else if (nv == "error") {
+            filtersSuccessMessage.value = {
+                title: "خطایی در اعمال فیلتر رخ داد",
+                status: nv,
+            };
+        }
+        setTimeout(() => {
+            filtersSuccessMessage.value = null;
+        }, 4000);
+    }
+);
 </script>
 
 <template>
@@ -188,22 +211,50 @@ watch(
             </div>
         </div>
 
-        <Button
-            :disabled="productsIsPending"
-            variant="solid"
-            @click="resetFilters"
-            class="rounded-full py-4 !cursor-pointer disabled:pointer-events-none"
-        >
-            <Transition name="fade" mode="out-in">
-                <span v-if="productsIsPending" class="flex-center gap-3">
-                    در حال دریافت اطلاعات
-                    <Icon name="svg-spinners:3-dots-bounce" size="20" />
-                </span>
-                <span v-else class="flex-center gap-3">
-                    بازنشانی به پیش‌ فرض
-                    <Icon name="ci:close" size="20" />
-                </span>
+        <div class="w-full flex flex-col items-center gap-5">
+            <Transition
+                enter-active-class="animate__animated animate__fadeInUp animate__faster"
+                leave-active-class="animate__animated animate__fadeOutDown animate__faster"
+            >
+                <div
+                    v-if="!!filtersSuccessMessage"
+                    class="w-full flex-center gap-0.5"
+                    :class="
+                        filtersSuccessMessage.status == 'success'
+                            ? 'text-success-500'
+                            : 'text-danger-500'
+                    "
+                >
+                    <span class="text-sm">{{
+                        filtersSuccessMessage.title
+                    }}</span>
+                    <Icon
+                        :name="
+                            filtersSuccessMessage.status == 'success'
+                                ? 'bi:check'
+                                : 'bi:x'
+                        "
+                        size="20"
+                    />
+                </div>
             </Transition>
-        </Button>
+            <Button
+                :disabled="productsIsPending"
+                variant="solid"
+                @click="resetFilters"
+                class="w-full rounded-full py-4 !cursor-pointer disabled:pointer-events-none"
+            >
+                <Transition name="fade" mode="out-in">
+                    <span v-if="productsIsPending" class="flex-center gap-3">
+                        در حال دریافت اطلاعات
+                        <Icon name="svg-spinners:3-dots-bounce" size="20" />
+                    </span>
+                    <span v-else class="flex-center gap-3">
+                        بازنشانی به پیش‌ فرض
+                        <Icon name="ci:close" size="20" />
+                    </span>
+                </Transition>
+            </Button>
+        </div>
     </div>
 </template>