cleaned up code

frontend/pages/products/[...slug].vue

@@ -1,16 +1,5 @@
 <script setup lang="ts">
-// import
-
-import useGetProducts, { type GetProductsFilters } from "~/composables/api/products/useGetProducts";
-import { PRODUCT_RANGE } from "~/constants";
-
-// state
-
-const route = useRoute();
-
-useSeoMeta({
-    title: "محصولات",
-});
+// meta
 
 definePageMeta({
     validate: (route) => {
@@ -22,53 +11,36 @@ definePageMeta({
     },
 });
 
-const params: GetProductsFilters = useUrlSearchParams("history", {
-    removeFalsyValues: true,
-    removeNullishValues: true,
-});
+// import
 
-const filters = computed(() => {
-    return {
-        sort: params.sort ?? "newest",
-        search: params.search ?? "",
-        price_gte: params.price_gte ?? PRODUCT_RANGE.min,
-        price_lte: params.price_lte ?? PRODUCT_RANGE.max,
-        in_stock: params.in_stock ?? false,
-        has_discount: params.has_discount ?? false,
-        category: Array.isArray(route.params.slug) ? route.params.slug[1] ?? undefined : undefined,
-        page: route.query["page"] ?? 1,
-    };
-});
+import { useAppParams } from "~/composables/global/useAppParams";
+import useGetProducts from "~/composables/api/products/useGetProducts";
 
-const search = ref(params.search ?? "");
-const searchDebounced = refDebounced(search, 1000);
+// state
 
-// provide / inject
-
-provide("params", params);
+const { search } = useAppParams();
 
 // queries
 
-const { data, isLoading: productsIsLoading } = useGetProducts(filters);
+const { data, isLoading: productsIsLoading } = useGetProducts();
+
+// computed
 
 const products = computed(() => {
     return data.value?.results.flat();
 });
 
 const paginationData = computed(() => {
-    return data!.value?.results.map((_, i: number) => {
+    return data.value?.results.map((_, i: number) => {
         return { type: "page", value: i };
     });
 });
 
-// watch
+// seo
 
-watch(
-    () => searchDebounced.value,
-    (newValue) => {
-        params.search = newValue;
-    }
-);
+useSeoMeta({
+    title: "محصولات",
+});
 </script>
 
 <template>
@@ -133,7 +105,7 @@ watch(
             class="w-full h-max"
         >
             <div
-                v-if="!products!.length"
+                v-if="!products?.length"
                 class="flex flex-grow w-full"
             >
                 <Placeholder