connected to new url param

frontend/pages/profile/tickets/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 // imports
 
-import useGetAllTickets, { type GetAllTicketsRequest } from "~/composables/api/tickets/useGetAllTickets";
+import useGetAllTickets from "~/composables/api/tickets/useGetAllTickets";
+import { useAppParams } from "~/composables/global/useAppParams";
 
 // meta
 
@@ -16,20 +17,9 @@ definePageMeta({
 
 // state
 
-const params: GetAllTicketsRequest = useUrlSearchParams("history", {
-    initialValue: {
-        page: 1,
-    },
-    writeMode: "push",
-});
+const route = useRoute();
 
-const filters = computed(() => {
-    return {
-        sort: params.sort ?? "created_at",
-        status: params.status ?? "",
-        page: params.page ?? 1,
-    };
-});
+const { sort, status } = useAppParams();
 
 const tableHeads = ref(["دسته بندی", "موضوع", "تاریخ ایجاد و بروز رسانی", "وضعیت", "عملیات"]);
 
@@ -59,13 +49,9 @@ const statusFilters = ref([
     },
 ]);
 
-// provide / inject
-
-provide("params", params);
-
 // queries
 
-const { data, isPending: ticketsIsPending } = useGetAllTickets(filters);
+const { data, isPending: ticketsIsPending } = useGetAllTickets();
 
 // computed
 
@@ -76,9 +62,9 @@ const tickets = computed(() => {
 const hasTickets = computed(() => data.value && data.value.count > 0);
 
 const hasFilters = computed(() =>
-    Object.keys(params)
+    Object.keys(route.query)
         .filter((key) => key != "page")
-        .some((key) => (params as any)[key] != undefined)
+        .some((key) => (route.query as any)[key] != undefined)
 );
 
 const paginationData = computed(() => {
@@ -90,8 +76,8 @@ const paginationData = computed(() => {
 // methods
 
 const clearFilters = () => {
-    params.sort = undefined;
-    params.status = undefined;
+    sort.value = "";
+    status.value = "";
 };
 </script>
 
@@ -110,7 +96,7 @@ const clearFilters = () => {
                     >
                         <span class="text-xs lg:text-sm">ترتیب بر اساس</span>
                         <Select
-                            v-model="params.sort!"
+                            v-model="sort"
                             triggerRootClass="!py-2.5"
                             class="w-[6rem]"
                         >
@@ -143,7 +129,7 @@ const clearFilters = () => {
                     >
                         <span class="text-xs lg:text-sm">وضعیت</span>
                         <Select
-                            v-model="params.status!"
+                            v-model="status"
                             triggerRootClass="!py-2.5"
                             class="w-[6rem]"
                         >