Add apply filter button

frontend/components/global/FilterButton.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts"></script>
 
 <template>
-    <SideModal title="فیلتر محصولات">
+    <SideModal
+        modalId="product-filters"
+        title="فیلتر محصولات"
+    >
         <template #button>
             <Button
                 end-icon="ci:filter"

frontend/components/global/SideModal.vue

@@ -3,13 +3,15 @@
 
 type Props = {
     title: string;
+    modalId: string;
 };
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const { modalId } = toRefs(props);
 
 // state
 
-const isSideShow = ref(false);
+const isSideShow = useState(`side-modal-${modalId.value}`, () => false);
 
 const isLocked = useScrollLock(window);
 

frontend/components/products/FilterProducts.vue

@@ -12,6 +12,8 @@ const router = useRouter();
 
 const params = inject("params") as GetProductsFilters;
 
+const isSideShow = useState("side-modal-product-filters");
+
 const currentCategory = computed({
     get: () => {
         return Array.isArray(route.params.slug) ? route.params.slug[1] ?? undefined : undefined;
@@ -238,38 +240,59 @@ watch(
                     />
                 </div>
             </Transition>
-            <Button
-                :disabled="productsIsPending"
-                variant="solid"
-                @click="resetFilters"
-                class="w-full rounded-full py-4 !cursor-pointer disabled:pointer-events-none z-[3]"
-            >
-                <Transition
-                    name="fade"
-                    mode="out-in"
+            <div class="flex items-center gap-4 w-full">
+                <Button
+                    :disabled="productsIsPending"
+                    variant="primary"
+                    @click="() => (isSideShow = false)"
+                    class="w-full rounded-full py-4 !cursor-pointer disabled:pointer-events-none z-[3]"
                 >
-                    <span
-                        v-if="productsIsPending"
-                        class="flex-center gap-3"
+                    <Transition
+                        name="fade"
+                        mode="out-in"
                     >
-                        در حال دریافت اطلاعات
-                        <Icon
-                            name="svg-spinners:3-dots-bounce"
-                            size="20"
-                        />
-                    </span>
-                    <span
-                        v-else
-                        class="flex-center gap-3"
+                        <span class="flex-center gap-3">
+                            ثبت فیلتر جدید
+                            <Icon
+                                name="ci:plus"
+                                size="20"
+                            />
+                        </span>
+                    </Transition>
+                </Button>
+                <Button
+                    :disabled="productsIsPending"
+                    variant="solid"
+                    @click="resetFilters"
+                    class="w-full rounded-full py-4 !cursor-pointer disabled:pointer-events-none z-[3]"
+                >
+                    <Transition
+                        name="fade"
+                        mode="out-in"
                     >
-                        بازنشانی به پیش‌ فرض
-                        <Icon
-                            name="ci:close"
-                            size="20"
-                        />
-                    </span>
-                </Transition>
-            </Button>
+                        <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>
     </div>
 </template>