Refactor

apis/hadithaApi.js

@@ -22,7 +22,9 @@ export default {
   },
   library: {
     list: "monir/book/volume/@field_collapsed/@offset/@limit/@q",
-    show: "@appname/book/page/@page_start/@page_end/@vol_id",
+    show: "@appname/book/page/@page_start/@page_len/@vol_id",
     prevNextHadith: "monir/nextpage/@index_key/@vol_id/@page_num/@step",
+    getVolumeInfo: "public/get/byids/dhvolume",
+    get: "public/get/byid/dhvolume/@vol_id",
   },
 };

assets/haditha/images/font-icons/user-icon.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99984 8.21598C9.84079 8.21598 11.3332 6.7236 11.3332 4.88265C11.3332 3.0417 9.84079 1.54932 7.99984 1.54932C6.15889 1.54932 4.6665 3.0417 4.6665 4.88265C4.6665 6.7236 6.15889 8.21598 7.99984 8.21598Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8061 10.7106L10.446 13.0707C10.3527 13.164 10.266 13.3373 10.246 13.464L10.1194 14.364C10.0727 14.6906 10.2994 14.9173 10.626 14.8706L11.526 14.744C11.6527 14.724 11.8327 14.6373 11.9194 14.544L14.2794 12.184C14.686 11.7773 14.8794 11.304 14.2794 10.704C13.686 10.1106 13.2127 10.304 12.8061 10.7106Z" stroke="url(#paint0_linear_67_3867)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.4663 11.0498C12.6663 11.7698 13.2263 12.3298 13.9463 12.5298" stroke="url(#paint1_linear_67_3867)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.27344 14.8825C2.27344 12.3025 4.84012 10.2158 8.00012 10.2158C8.69346 10.2158 9.3601 10.3158 9.9801 10.5025" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_3867" x1="14.6902" y1="10.3286" x2="9.81875" y2="10.4184" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_67_3867" x1="13.956" y1="11.0498" x2="12.3704" y2="11.079" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>

assets/haditha/scss/haditha.css

@@ -16,9 +16,13 @@
 /* custom imports */
 @import "../../../../../assets/common/scss/_IRANSansX.scss";
 @import "../../../../../assets/common/scss/_takrim.scss";
+@import "../../../../../assets/common/scss/_vazir.scss";
+@import "../../../../../assets/common/scss/_estedad.scss";
+@import "../../../../../assets/common/scss/_sahel-single-font-weight.scss";
 
 @theme {
-  --font-sans: "IRANSansX", "Public Sans", sans-serif;
+  --font: vazir, sahel, estadad, IRANSansX, "Public Sans", sans-serif;
+  --ar-font: Takrim;
   --breakpoint-sm: 360px;
   --breakpoint-md: 720px;
   --breakpoint-lg: 992px;
@@ -49,18 +53,23 @@ html {
   height: 100%;
   direction: rtl;
   text-align: right;
-  font-family: IRANSansX;
+  font-family: var(--font);
   scroll-behavior: smooth;
 
   body {
     height: 100%;
     direction: rtl;
     text-align: right;
-    font-family: IRANSansX;
+    font-family: var(--font);
     scroll-behavior: smooth;
+
+    padding: 0 !important;
+    margin: 0px !important;
+    overflow: auto !important;
   }
 }
-.haditha-system {
+.haditha-system,
+.hadith-system {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -68,7 +77,18 @@ html {
   .isolate {
     flex-grow: 1;
   }
+
+  .text__orange {
+    padding: 0 3px;
+    background-color: rgb(255, 250, 155);
+    /* background-color: rgb(255, 223, 203); */
+  }
+  /* .iconify  { */
+    /* width: 1.72em; */
+    /* height: 1.72em; */
+  /* } */
 }
+
 .firefox-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: #ccc #eee;

components/haditha/AutoComplation.vue

@@ -162,7 +162,7 @@ const state = reactive({
 // #region methods
 
 const clearSimilar = () => {
-  console.info("clearSimilar");
+  // console.info("clearSimilar");
 };
 
 // const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
@@ -418,7 +418,8 @@ onMounted(() => {
 
       <!-- <client-only> -->
       <div class="search-input">
-        <UInputMenu
+        <!-- <UInputMenu -->
+        <UInput
           class="w-full focus:placeholder-gray-800"
           :items="<any>Array.from(userSearchHistory)"
           v-model="searchTerm"
@@ -444,7 +445,7 @@ onMounted(() => {
         >
           <!-- @update:modelValue="onUpdateModel" -->
           <!-- @update:searchTerm="onUpdateModel" -->
-        </UInputMenu>
+        </UInput>
       </div>
       <UButton
         class="my-trailing-button"
@@ -726,7 +727,7 @@ onMounted(() => {
         padding: 5px 7px;
         background: #1b213266;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 500;
         font-size: 10px;
         line-height: 15px;
@@ -735,7 +736,7 @@ onMounted(() => {
         color: #ffffff;
       }
       .text {
-        font-family: Takrim;
+        font-family: var(--ar-font);
         font-weight: 400;
         font-size: 16px;
         line-height: 32px;
@@ -823,7 +824,7 @@ onMounted(() => {
     border: 0.3px solid #e0e0e0;
     box-shadow: 0px 1px 4px 0px #0000000d;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 14px;
     line-height: 21px;
@@ -846,7 +847,7 @@ onMounted(() => {
       border: 0.3px solid #e0e0e0;
       box-shadow: 0px 1px 4px 0px #0000000d;
       color: #8a92a8;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 13px;
       line-height: 20px;
@@ -904,7 +905,7 @@ onMounted(() => {
 
   .synonymItem {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 14px;
       line-height: 100%;
@@ -928,7 +929,7 @@ onMounted(() => {
       border: 0.3px solid #d9d9d9;
       background: #f0f1f4;
 
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 12px;
       line-height: 100%;

components/haditha/CardList.vue

@@ -53,11 +53,6 @@ const goToLibraryShow = (item) => {
           id: item?._source?.id,
           slug: item?._source?.title,
         },
-        query: {
-          page_first: item._source.page_first,
-          page_last: item._source.page_last,
-          page_count: item._source.page_count,
-        },
       }"
       color="neutral"
       variant="outline"
@@ -69,8 +64,9 @@ const goToLibraryShow = (item) => {
         fit="auto"
         quality="80"
         placeholder
-        src="/img/haditha/sample-bgi.svg"
+        src="/img/haditha/library/totally.webp"
         />
+        <!-- src="/img/haditha/sample-bgi.svg" -->
       <p class="title">{{ item?._source?.title }}</p>
       <p class="version">
         {{ item?._source?.vol_title + item?._source?.vol_num }}
@@ -97,7 +93,7 @@ const goToLibraryShow = (item) => {
 
   .title {
     margin-top: 0.7em;
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 13px;
     line-height: 19.5px;
@@ -107,7 +103,7 @@ const goToLibraryShow = (item) => {
   }
 
   .version {
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 10px;
     line-height: 15px;

components/haditha/NavigationMenu.vue

@@ -3,7 +3,7 @@ import { useAuthStore } from "@stores/authStore";
 
 // {
 //     label: "چت بات",
-//     icon: "i-haditha-chat-bot",
+//     icon: "haditha:chat-bot",
 //     to: "/haditha/chat-bot",
 //     slot: "chat-bot",
 //     class: "flex flex-col lg:flex-row justify-center items-center",
@@ -11,15 +11,15 @@ import { useAuthStore } from "@stores/authStore";
 
 const items = ref([
   {
-    label: "حانه",
+    label: "خانه",
-    icon: "i-haditha-home",
+    icon: "haditha:home",
     to: "/haditha",
     descrption: "صفحه اصلی",
     class: "flex flex-col lg:flex-row justify-center items-center hide-label",
   },
   {
     label: "جستجو",
-    icon: "i-haditha-search",
+    icon: "haditha:search",
     to: "/haditha/search",
     slot: "search",
     class: "flex flex-col lg:flex-row justify-center items-center",
@@ -27,7 +27,7 @@ const items = ref([
 
   {
     label: "کتابخانه",
-    icon: "i-haditha-library",
+    icon: "haditha:library",
     to: "/haditha/library",
     slot: "library",
     class: "flex flex-col lg:flex-row justify-center items-center",
@@ -35,46 +35,46 @@ const items = ref([
 
   {
     label: "نشان شده ها",
-    icon: "i-haditha-bookmark",
+    icon: "haditha:bookmark",
     to: "/haditha/favorites",
     class: "flex flex-col lg:hidden justify-center items-center",
   },
 
   {
     label: "دیگر",
-    icon: "i-haditha-menu",
+    icon: "haditha:menu",
 
     class:
-      "flex flex-col lg:hidden justify-center items-center hide-chevron other /haditha/other",
+      "flex flex-col lg:hidden justify-center items-center hide-chevron other haditha:other",
     children: [
       {
         label: "ورود / ثبت نام",
-        icon: "i-haditha-user",
+        icon: "haditha:user-icon",
         to: "/haditha/login",
       },
       {
         label: "کتابخانه",
-        icon: "i-haditha-library",
+        icon: "haditha:library",
         to: "/haditha/library",
       },
       {
         label: "در باره ما",
-        icon: "i-haditha-about-us",
+        icon: "haditha:about-us",
         to: "/haditha/about-us",
       },
       {
         label: "تماس با ما",
-        icon: "i-haditha-contact-us",
+        icon: "haditha:contact-us",
         to: "/haditha/contact-us",
       },
       {
         label: "قوانین و مقررات",
-        icon: "i-haditha-copyright",
+        icon: "haditha:copyright",
         to: "/haditha/rules",
       },
       {
         label: "خروج از حساب",
-        icon: "i-haditha-logout",
+        icon: "haditha:logout",
         type: "button" as const,
         onSelect(e: Event) {
           e.preventDefault();
@@ -85,35 +85,41 @@ const items = ref([
   },
 ]);
 
-const leftItem = computed(() => [
+const desktopLeftMenu = ref([
   {
     label: "نشان شده ها",
-    icon: "i-haditha-bookmark",
+    icon: "haditha:bookmark",
     to: "/haditha/favorites",
   },
 
   {
     label: "Guide",
-    icon: "i-haditha-menu",
+    icon: "haditha:menu",
     children: [
+      {
+        label: "ورود / ثبت نام",
+        icon: "haditha:user-icon",
+        to: "/haditha/login",
+      },
+
       {
         label: "در باره ما",
-        icon: "i-haditha-about-us",
+        icon: "haditha:about-us",
         to: "/haditha/about-us",
       },
       {
         label: "تماس با ما",
-        icon: "i-haditha-contact-us",
+        icon: "haditha:contact-us",
         to: "/haditha/contact-us",
       },
       {
         label: "قوانین و مقررات",
-        icon: "i-haditha-copyright",
+        icon: "haditha:copyright",
         to: "/haditha/rules",
       },
       {
         label: "خروج از حساب",
-        icon: "i-haditha-logout",
+        icon: "haditha:logout",
         type: "button" as const,
         onSelect(e: Event) {
           e.preventDefault();
@@ -128,28 +134,50 @@ const isMobile = ref(false);
 const rerenderNavigation = ref(1);
 const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
 
-const setMenu = () => {
+const filterLeftItem = () => {
+  if (isAuthenticatedGetter) {
+    let otherItemChildren = desktopLeftMenu.value[1].children.filter(
+      (i) => i.icon != "haditha:user-icon"
+    );
+    desktopLeftMenu.value[1].children = otherItemChildren;
+  } else {
+    let otherItemChildren = desktopLeftMenu.value[1].children.filter(
+      (i) => i.icon != "haditha:logout"
+    );
+
+    desktopLeftMenu.value[1].children = otherItemChildren;
+    rerenderNavigation.value++;
+  }
+};
+const filterRightItem = () => {
   if (isAuthenticatedGetter) {
     let otherItem = items.value.find((item) => {
-      return item.class.includes("/haditha/other");
+      return item.class.includes("haditha:other");
     });
 
     let otherItemChildren = otherItem.children.filter(
-      (i) => i.to != "/haditha/login"
+      (i) => i.icon != "haditha:user-icon"
     );
     otherItem.children = otherItemChildren;
   } else {
-    let otherItem = items.value.find((item) => {
+    let otherItemIndex = items.value.findIndex((item) => {
-      return item.class.includes("/haditha/other");
+      return item.class.includes("haditha:other");
     });
 
-    let otherItemChildren = otherItem.children.filter(
+    let otherItemChildren = items.value[otherItemIndex].children.filter(
-      (i) => i.icon != "i-haditha-logout"
+      (i) => i.icon != "haditha:logout"
     );
-    otherItem.children = otherItemChildren;
+
+    items.value[otherItemIndex].children = otherItemChildren;
+    rerenderNavigation.value++;
   }
 };
 
+const setMenu = () => {
+  filterRightItem();
+  filterLeftItem();
+};
+
 setMenu();
 
 // if(!(isAuthenticatedGetter && isRealUserGetter))
@@ -185,8 +213,8 @@ onMounted(() => {
           linkTrailingBadge: 'linkTrailingBadge',
         }"
       />
-      <div class="hidden lg:flex items-center">
+      <div class="hidden lg:flex items-center hamburger-menu">
-        <template v-for="(item, index) in leftItem">
+        <template v-for="(item, index) in desktopLeftMenu">
           <UDropdownMenu
             v-if="item.children?.length"
             :items="item.children"
@@ -202,9 +230,14 @@ onMounted(() => {
               itemLeadingAvatarSize: 'itemLeadingAvatarSize',
               itemTrailing: 'itemTrailing',
             }"
+            :content="{
+              align: 'end',
+              side: 'bottom',
+              sideOffset: 15,
+            }"
           >
             <UButton
-              icon="i-haditha-menu"
+              icon="haditha:menu"
               variant="ghost"
               :ui="{
                 base: 'string[]',
@@ -257,6 +290,7 @@ onMounted(() => {
 
       .isolate.min-w-0.flex.items-center.list {
         li {
+          margin-left: 0.5em;
           padding: 0;
 
           .group {
@@ -265,11 +299,16 @@ onMounted(() => {
             }
 
             &:hover {
-              &::before {
+              background: linear-gradient(
-                background-color: color-mix(in oklab, #00a762 50%, transparent);
+                320.71deg,
-                box-shadow: 0px 4px 10px 0px #00745933;
+                #b9fde0 6.56%,
-                border-radius: 0.75em; //12px;
+                #e4f9f0 69.69%
-              }
+              );
+              // &::before {
+              //   background-color: color-mix(in oklab, #00a762 50%, transparent);
+              //   box-shadow: 0px 4px 10px 0px #00745933;
+              //   border-radius: 0.75em; //12px;
+              // }
             }
 
             // max-width: 112px;
@@ -281,7 +320,7 @@ onMounted(() => {
             padding-bottom: 0.37em; /*6px*/
             padding-left: 1.2em;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 400;
             font-size: 0.87rem; /*14px*/
             line-height: 1.3rem; /*6px*/
@@ -342,6 +381,11 @@ onMounted(() => {
     }
   }
 }
+.group.item {
+  &:hover {
+    background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
+  }
+}
 
 @media screen and (max-width: 991.99px) {
   .fixed {
@@ -386,7 +430,7 @@ onMounted(() => {
               border-radius: 8px;
               padding: 12px;
 
-              font-family: IRANSansX;
+              font-family: var(--font);
               font-weight: 400;
               font-size: 14px;
               line-height: 100%;

components/haditha/hero-page/SectionFive.vue

@@ -2,28 +2,28 @@
 const state = reactive({
   items: [
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
         "این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است.",
     },
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
         "این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است.",
     },
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
         "این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است.",
     },
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
@@ -106,7 +106,7 @@ const state = reactive({
 
   .header {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1.25rem; /* 20px;*/
       line-height: 1.87rem; /* 30px;*/
@@ -118,7 +118,7 @@ const state = reactive({
   }
   .carousel-item {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 1rem;
       line-height: 1.5rem; /* 24px;*/
@@ -141,7 +141,7 @@ const state = reactive({
     }
 
     .job {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1rem;
       line-height: 1.5rem;
@@ -153,7 +153,7 @@ const state = reactive({
     .summary {
       /* padding: 2.5em 0 2.5em; */
       margin-bottom: 0.3em;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1rem;
       line-height: 1.5rem;

components/haditha/hero-page/SectionFour.vue

@@ -9,12 +9,12 @@ const state = reactive({
     },
     {
       img: "/img/haditha/section-four_card-two.png",
-      title: "تشخیص موجودیت",
+      title: "خلاصه سازی",
       description: "تجمیع نکات کلیدی از احادیث و شروح مختلف",
     },
     {
       img: "/img/haditha/section-four_card-three.png",
-      title: "تشخیص موجودیت",
+      title: "چت بات هوشمند",
       description:
         "امکان تعامل مستقیم با سامانه برای پاسخ به سوالات یا دریافت توضیحات از مفاهیم حدیثی",
     },
@@ -86,7 +86,7 @@ const state = reactive({
 
   .header {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1.25rem; /* 20px;*/
       line-height: 1.87rem; /* 30px;*/
@@ -101,7 +101,7 @@ const state = reactive({
       border: none;
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 600;
         font-size: 1rem;
         line-height: 1.5rem; /* 24px;*/
@@ -109,7 +109,7 @@ const state = reactive({
         text-align: center;
       }
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 0.87rem; /* 14px;*/
         line-height: 1.31rem; /* 21px;*/

components/haditha/hero-page/SectionOne.vue

@@ -42,7 +42,7 @@ const AutoComplation = defineAsyncComponent(() =>
       <navigation-menu></navigation-menu>
 
       <div class="logo-container flex justify-center flex-col items-center">
-        <img fit="auto" quality="80" placeholder src="/img/haditha/logo.webp" />
+        <img fit="auto" quality="80" placeholder src="/img/haditha/logo.png" />
         <div class="title">
           کاوش با
           <span class="badge-style me-1"> هوش مصنوعی </span>
@@ -78,7 +78,7 @@ const AutoComplation = defineAsyncComponent(() =>
 
     .title {
       margin-top: 3.5em;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-size: 14px;
       line-height: 21px;
       letter-spacing: 0%;

components/haditha/hero-page/SectionThree.vue

@@ -17,7 +17,25 @@ const img = useImage();
 </script>
 <template>
   <section class="section-three flex">
-    <div class="section-container md:flex md:flex-col md:items-center xl:block mx-auto">
+    <!-- <video class="background-video" loop autoplay>
+       <source
+        src="/img/haditha/video/section-three-gif.mp4"
+        type="video/webm"
+      /> 
+    
+
+      <source src="/img/haditha/video/section-three-gif.mp4" type="video/mp4" />
+
+      Download the
+       <a href="/img/haditha/video/section-three-gif.mp4">WEBM</a>
+       or
+      <a href="/img/haditha/video/section-three-gif.mp4">MP4</a>
+      video.F
+    </video> -->
+
+    <div
+      class="section-container md:flex md:flex-col md:items-center xl:block mx-auto"
+    >
       <div class="header flex items-center mb-2">
         <img
           fit="auto"
@@ -53,11 +71,25 @@ const img = useImage();
   padding-left: 2em; /*32px;*/
   background-color: #1b2132;
   background-size: cover;
+  position: relative;
 
+  .background-video {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    height: 36.5em;
+    object-fit:fill;
+    aspect-ratio: 16 / 9; /* Replace with your desired ratio (e.g., 4/3, 1/1) */
+    width: 100%; /* Adjust width as needed */
+  }
   .section-container {
     width: 56.7em; /*907px;*/
     /*height: 15.5em; 249px;*/
     gap: 9px;
+    z-index:1;
 
     .header {
       max-width: 30em; /*480px;*/
@@ -77,7 +109,7 @@ const img = useImage();
         height: 2.1em; /*"34";*/
       }
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 2rem; /*32px;*/
         line-height: 3rem; /*48px;*/
@@ -100,7 +132,7 @@ const img = useImage();
       border-radius: 1em;
       background: #1b2132cc;
 
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1rem;
       line-height: 1.5rem; /*24px;*/
@@ -113,7 +145,7 @@ const img = useImage();
 
 @media screen and (max-width: 1199.99px) {
   .section-three {
-    background-image: url("/img/haditha/mobile/section-three-bgi_md.png");
+    background-image: url("/img/haditha/section-three-bgi.webp");
     height: 46.87em;
     background-position: center 65%;
     padding-top: 7.5em;
@@ -139,7 +171,7 @@ const img = useImage();
 
       .content {
         background: transparent;
-        color: #626b84;
+        /* color: #626b84; */
         max-width: 40em; /*480px;*/
 
         font-size: 1rem;

components/haditha/hero-page/SectionTwo.vue

@@ -30,7 +30,7 @@
             fit="auto"
             quality="80"
             placeholder
-            src="/img/haditha/card-one.webp"
+            src="/img/haditha/card-one.png"
           />
         </div>
       </div>
@@ -48,7 +48,7 @@
             fit="auto"
             quality="80"
             placeholder
-            src="/img/haditha/card-two.webp"
+            src="/img/haditha/card-two.png"
           />
         </div>
       </div>
@@ -68,7 +68,7 @@
             fit="auto"
             quality="80"
             placeholder
-            src="/img/haditha/card-three.webp"
+            src="/img/haditha/card-three.png"
           />
         </div>
       </div>
@@ -95,7 +95,7 @@
       margin: auto;
     }
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 700;
       font-size: 1.5rem; /*24px*/
       line-height: 2.25rem; /* 36px;*/

components/haditha/icons/AboutUsIcon.vue

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="17"
+  viewBox="0 0 16 17"
+  fill="none"
+>
+    <path d="M10.6668 1.83301H5.3335C2.66683 1.83301 1.3335 3.16634 1.3335 5.83301V14.4997C1.3335 14.8663 1.6335 15.1663 2.00016 15.1663H10.6668C13.3335 15.1663 14.6668 13.833 14.6668 11.1663V5.83301C14.6668 3.16634 13.3335 1.83301 10.6668 1.83301Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4.66748 6.83301H11.3341" stroke="url(#paint0_linear_67_3319)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4.66748 10.166H9.33415" stroke="#1B2132" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <defs>
+    <linearGradient id="paint0_linear_67_3319" x1="11.378" y1="6.83301" x2="4.33954" y2="7.69806" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#D284FF"/>
+    <stop offset="1" stop-color="#4D00FF"/>
+    </linearGradient>
+    </defs>
+    </svg>

components/haditha/library-show/AccordionMenu..vue

@@ -139,7 +139,7 @@ function toggleAccordion(id, event) {
 <style scoped>
 .accordion-menu {
   .accordion-menu-item {
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 13px;
     line-height: 19.5px;

components/haditha/library-show/UTree.vue

@@ -45,7 +45,7 @@ const props = defineProps({
 <style scoped>
 .tree-item[aria-expanded="true"] {
   background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
-  font-family: IRANSansX;
+  font-family: var(--font);
   font-weight: 400;
   font-size: 13px;
   line-height: 19.5px;

components/haditha/login/EnterMobile.vue

@@ -134,7 +134,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 
       .title {
         margin-bottom: 1.2em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 20px;
         line-height: 30px;
@@ -156,7 +156,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       }
 
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 14px;
         line-height: 21px;
@@ -185,7 +185,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -225,7 +225,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 100%;

components/haditha/login/EnterVerifyCode.vue

@@ -139,7 +139,7 @@ onMounted(() => {
 
       .title {
         margin-bottom: 1.2em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 20px;
         line-height: 30px;
@@ -161,7 +161,7 @@ onMounted(() => {
       }
 
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 14px;
         line-height: 21px;
@@ -190,7 +190,7 @@ onMounted(() => {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -230,7 +230,7 @@ onMounted(() => {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 100%;

components/haditha/search-page/SearchList.vue

@@ -26,6 +26,11 @@ const route = useRoute();
 // const modal = useModal();
 // const isModalOpen = ref(false);
 
+const hadithAddress = (item) => {
+  return `${item?._source?.address?.vol_title}، صفحه
+   ${item?._source?.address?.page_num}`;
+};
+
 function goToSearchShowPage(selectedItem) {
   // modal.open(SearchShow, { title: "Welcome" });
   // isModalOpen.value = true;
@@ -111,8 +116,8 @@ const removeFromFavorites = async (item = {}, index = 0) => {
       @click.prevent="goToSearchShowPage(item)"
       class="arabic-text block"
       :href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
+      v-html="item?._source?.content_ar"
     >
-      {{ item?._source?.content_ar }}
     </a>
     <a
       @click.prevent="goToSearchShowPage(item)"
@@ -121,10 +126,28 @@ const removeFromFavorites = async (item = {}, index = 0) => {
       v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
     ></a>
     <div class="flex justify-end">
-      <p class="reference">
+      <ULink
+        :to="{
+          name: 'hadithaLibraryShow',
+          params: {
+            id: item?._source?.address.vol_id,
+            slug: hadithAddress(item),
+          },
+        }"
+        color="neutral"
+        variant="outline"
+        :ui="{
+          leadingIcon: 'text-(--ui-primary)',
+        }"
+        class="reference"
+      >
+        {{ hadithAddress(item) ?? "" }}
+      </ULink>
+
+      <!-- <p class="reference">
         {{ item?._source?.address?.vol_title }}، صفحه
         {{ item?._source?.address?.page_num }}
-      </p>
+      </p> -->
     </div>
   </div>
 
@@ -155,7 +178,7 @@ const removeFromFavorites = async (item = {}, index = 0) => {
 <style scoped>
 .search-list-item {
   .from-person {
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 0.75rem; /*12px*/
     line-height: 1.125rem; /*18px*/
@@ -172,7 +195,7 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     }
   }
   .arabic-text {
-    font-family: Takrim;
+    font-family: var(--ar-font);
     font-weight: 400;
     font-size: 1.125rem; /*18px*/
     line-height: 2rem; /*23px*/
@@ -189,9 +212,9 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     }
   }
   .persian-text {
-    font-family: Takrim;
+    font-family: var(--font);
     font-weight: 400;
-    font-size: 1rem; /*16px*/
+    font-size: 0.8rem; /*16px*/
     line-height: 1.375rem; /*22px*/
     letter-spacing: 0%;
     text-align: right;
@@ -209,10 +232,10 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     border-width: 0.5px;
     border: 0.5px solid #d9d9d9;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 0.625rem; /*10px*/
-    line-height: 0.9rem; /*15px*/
+    line-height: 1.1rem; /*15px*/
     letter-spacing: 0%;
     text-align: right;
     color: #8a92a8;

components/haditha/search-page/SearchShow.vue

@@ -215,7 +215,7 @@ const closeModal = () => {
         background: #ffffff;
         border: 0.5px solid #d9d9d9;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 18px;
@@ -227,7 +227,7 @@ const closeModal = () => {
 
         span {
           margin-left: 0.1em;
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
           font-size: 12px;
           line-height: 18px;
@@ -252,7 +252,7 @@ const closeModal = () => {
           margin-bottom: 0.5em;
 
           .section-title {
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 400;
             font-size: 14px;
             line-height: 21px;
@@ -293,7 +293,7 @@ const closeModal = () => {
             background: #ffffff;
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 12px;
             line-height: 18px;
@@ -307,7 +307,7 @@ const closeModal = () => {
           padding: 2em 0;
 
           .arabic-text {
-            font-family: Takrim;
+            font-family: var(--ar-font);
             font-weight: 400;
             font-size: 18px;
             line-height: 32px;
@@ -327,7 +327,7 @@ const closeModal = () => {
 
           .from,
           .persian-text {
-            font-family: Takrim;
+            font-family: var(--ar-font);
             font-weight: 400;
             font-size: 18px;
             line-height: 30px;
@@ -336,7 +336,7 @@ const closeModal = () => {
             color: var(--ui-color-two);
           }
           /* .persian-text {
-            font-family: Takrim;
+        font-family: var(--ar-font);
             font-weight: 400;
             font-size: 16px;
             line-height: 22px;
@@ -350,7 +350,7 @@ const closeModal = () => {
           padding: 2em 0;
 
           .description-item {
-            font-family: Takrim;
+            font-family: var(--ar-font);
             font-weight: 400;
             font-size: 18px;
             line-height: 30px;
@@ -369,7 +369,7 @@ const closeModal = () => {
             border-width: 0.5px;
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 10px;
             line-height: 15px;
@@ -420,7 +420,7 @@ const closeModal = () => {
         );
         box-shadow: 0px 8px 20px 0px #0000001a;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 15px;
         line-height: 22.5px;
@@ -440,7 +440,7 @@ const closeModal = () => {
         background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);
         box-shadow: 0px 8px 20px 0px #0000001a;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 16px;
         line-height: 24px;
@@ -464,7 +464,7 @@ const closeModal = () => {
       box-shadow: 0px 8px 20px 0px #0000001a;
 
       .prev-haditha {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 20px;
@@ -473,7 +473,7 @@ const closeModal = () => {
         color: var(--ui-color-two);
       }
       .next-haditha {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 20px;

pages/haditha/chat-bot.vue

@@ -356,7 +356,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           );
         }
         .message {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 14px;
           line-height: 27px;
@@ -392,7 +392,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 13px;
           line-height: 26px;
@@ -419,7 +419,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           padding: 8px;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 11px;
           line-height: 16.5px;
@@ -476,7 +476,7 @@ const NavigationMenu = defineAsyncComponent(() =>
         );
         box-shadow: 0px 1px 4px 0px #0000000d;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;

pages/haditha/favorites/index.vue

@@ -252,14 +252,15 @@ const SearchList = defineAsyncComponent(() =>
 }
 
 .search-list-contianer {
-  max-width: 41em; /*656px*/
+  /*max-width: 41em; 656px*/
+  max-width: 75em; /*1200px*/
   width: 100%;
   margin: 0 1em;
 
   .total {
     padding: 0.5em 1.8em;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 0.68rem; /*11px*/
     line-height: 1rem;

pages/haditha/library/[id]/[slug]/index.vue

@@ -34,26 +34,26 @@ useHead({
     ...headMetas,
   ],
   bodyAttrs: {
-    class: import.meta.env.VITE_HADITH_SYSTEM,
+    class: [import.meta.env.VITE_HADITH_SYSTEM, "library-show-page"],
   },
   link: headLinks,
 });
 // #endregion imports
 // #region props
 
-const props = defineProps({
+// const props = defineProps({
-  list: {
+//   list: {
-    default() {
+//     default() {
-      return [];
+//       return [];
-    },
+//     },
-  },
+//   },
-  noDataText: {
+//   noDataText: {
-    default: "نتیجه‌ای یافت نشد!",
+//     default: "نتیجه‌ای یافت نشد!",
-  },
+//   },
-  noDataIcon: {
+//   noDataIcon: {
-    default: "/img/haditha/no-data.png",
+//     default: "/img/haditha/no-data.png",
-  },
+//   },
-});
+// });
 // #endregion props
 
 // #region refs and reactives
@@ -132,48 +132,72 @@ const state = reactive({
     { title: "فصل چهارم", icon: "vscode-icons:file-type-vue" },
     { title: "فصل پنجم", icon: "vscode-icons:file-type-nuxt" },
   ],
+  volumeInfo: {},
 });
 
 const pageIsLessThanOne = computed(() => {
-  console.info("pageIsLessThanOne");
   return page_num.value <= 1;
 });
 const pageIsBiggerThanTotal = computed(() => {
-  console.info("pageIsBiggerThanTotal");
+  const page_count = state.volumeInfo._source?.page_count;
-  const page_count = +route.query.page_count;
   return page_num.value + 1 >= page_count;
 });
 // #endregion refs and reactives
 
 // #region methods
 const fetchData = async () => {
+  let url = repoUrl() + hadithaApi.library.show;
+  url = url.replace("@appname", "monir");
+  url = url.replace("@page_start", state.volumeInfo._source?.page_first);
+  url = url.replace("@page_len", 1);
+  url = url.replace("@vol_id", state.volumeInfo?._source.id);
+
+  // const { data, status, error, refresh, clear } =
+  //   await useHadithaSearchComposable<HadithResponseModel>(url, {
+  //     method: "get",
+  //   });
+
+  // if (status.value == "success") {
+  //   state.selectedItem = <Hit[]>data.value.hits.hits;
+
+  //   loading.value = false;
+  // }
+
+  httpService
+    .getRequest(url)
+    .then((res: HadithResponseModel) => {
+      state.selectedItem = <Hit[]>res.hits.hits;
+    })
+    .finally(() => (loading.value = false));
+};
+const fetchVolume = async () => {
   if (loading.value) return;
   loading.value = true;
 
-  let page_first = +route.query.page_first;
   const volId = route.params.id;
 
-  let url = repoUrl() + hadithaApi.library.show;
+  let url = repoUrl() + hadithaApi.library.get;
-  url = url.replace("@appname", "monir");
-  url = url.replace("@page_start", 0);
-  url = url.replace("@page_end", 1);
   url = url.replace("@vol_id", volId);
 
-  console.info("urlurlurlurl", url);
   // fetch search list from backend(ssr)
-  const { data, status, error, refresh, clear } =
+  // const { data, status, error, refresh, clear } =
-    await useHadithaSearchComposable<HadithResponseModel>(url, {
+  //   await useHadithaSearchComposable<HadithResponseModel>(url, {
-      method: "get",
+  //     method: "get",
+  //   });
+
+  // if (status.value == "success") {
+  //   state.volumeInfo = data.value;
+  //   page_num.value = state.volumeInfo._source.page_first;
+  // }
+
+  httpService.getRequest(url).then((res: HadithResponseModel) => {
+    state.volumeInfo = res;
+    page_num.value = state.volumeInfo._source?.page_first;
+    fetchData();
   });
-
-  if (status.value == "success") {
-    state.selectedItem = <Hit[]>data.value.hits.hits;
-  }
-
-  loading.value = false;
 };
 
-fetchData();
+fetchVolume();
 
 const goToTheLibrary = (type: string) => {
   router.push({
@@ -181,17 +205,14 @@ const goToTheLibrary = (type: string) => {
   });
 };
 const onOpenList = () => {
-  console.info("onOpenList");
   isModalOpen.value = true;
 };
 const onSearch = () => {
-  // console.info("onSearch");
   router.push({
     name: "hadithaSearch",
   });
 };
 const onClose = () => {
-  console.info("onClose");
   router.push({
     name: "hadithLibrary",
   });
@@ -205,8 +226,8 @@ const handlePagination = (
   loading.value = true;
 
   const volId = route.params.id;
-  const page_count = +route.query.page_count;
+  const page_count = state.volumeInfo._source?.page_count;
-  const page_first = +route.query.page_first;
+
   const isPageBiggerThanOne = +page_num.value + prevNextIndicator > 0;
   const isPageLessThanTotal = +page_num.value + prevNextIndicator < page_count;
 
@@ -264,9 +285,6 @@ const prepareTreeData = (data) => {
 
 getDataTree();
 
-onMounted(() => {
-  page_num.value = +route.query.page_first;
-});
 // #endregion methods
 
 // components declaration
@@ -276,6 +294,9 @@ const HadithaLayout = defineAsyncComponent(
 const UTree = defineAsyncComponent(
   () => import("@haditha/components/haditha/library-show/UTree.vue")
 );
+const NavigationMenu = defineAsyncComponent(
+  () => import("@haditha/components/haditha/NavigationMenu.vue")
+);
 // const AccordionMenu = defineAsyncComponent(
 //   () => import("@haditha/components/haditha/library-show/AccordionMenu..vue")
 // );
@@ -286,10 +307,12 @@ const UTree = defineAsyncComponent(
     <div class="page-container h-full">
       <UContainer
         ui="{
-          base: 'sm:px-6 lg:px-4',
+          base: 'sm:px-6 lg:px-4 ',
         }"
         class="page-inner-container sm:px-6 lg:px-4"
       >
+        <navigation-menu></navigation-menu>
+
         <div class="page-header py-4 flex justify-between items-center">
           <div class="flex items-center">
             <UButton
@@ -327,17 +350,18 @@ const UTree = defineAsyncComponent(
         <div class="separator"></div>
 
         <div class="page-content firefox-scrollbar py-14 p-2">
-          <!-- <h2></h2> -->
+          <template v-if="state.selectedItem?.length">
             <p
-            v-if="state.selectedItem?.length"
               v-for="(parag, index) in state.selectedItem"
               :key="index"
               v-html="parag?._source?.content"
             ></p>
+          </template>
+          <no-data v-else></no-data>
         </div>
 
         <div class="body-footer">
-          <div class="mt-5 z-2">
+          <div class="mt-5 pb-5 z-2">
             <div class="flex justify-between pagination">
               <UButton
                 @click="handlePagination(-1)"
@@ -349,7 +373,9 @@ const UTree = defineAsyncComponent(
                 :disabled="pageIsLessThanOne"
               />
               <div class="flex items-center">
-                <span class="total-pages">{{ route.query.page_count }}</span>
+                <span class="total-pages">{{
+                  state.volumeInfo._source?.page_count
+                }}</span>
                 <span class="mx-2">/</span>
                 <UInput
                   :disabled="loading"
@@ -417,15 +443,16 @@ const UTree = defineAsyncComponent(
 
 <style scoped>
 .page-container {
-  background: #f7fffd;
+  /* background: #f7fffd; */
 
   .page-inner-container {
+    padding-top: 6em;
     /* position: relative; */
     /* padding-bottom: 4em; */
-    /* width: 100%; */
+    width: 100%;
-    /* max-width: 1200px; */
+    max-width: 1200px;
-    /* margin-right: auto; */
+    margin-right: auto;
-    /* margin-left: auto; */
+    margin-left: auto;
     .page-header {
       color: var(--ui-color-two);
 
@@ -436,9 +463,12 @@ const UTree = defineAsyncComponent(
         margin-left: 2.2em;
       }
       .title {
-        font-family: IRANSansX;
+        /* font-family: IRANSansX; */
+        font-family: var(--font);
+
         font-weight: 400;
-        font-size: 16px;
+        /* font-size: 16px; */
+        font-size: 0.9rem;
         line-height: 20px;
         letter-spacing: 0%;
         text-align: right;
@@ -473,22 +503,32 @@ const UTree = defineAsyncComponent(
       );
     }
     .page-content {
+      padding-bottom: 5em;
       /* margin: 1.5em; */
 
-      font-family: Takrim;
+      /* font-family: var(--ar-font); */
+      font-family: var(--font);
       font-weight: 400;
-      font-size: 20px;
+      /* font-size: 20px; */
+      font-size: 0.9rem;
       line-height: 40px;
       letter-spacing: 0%;
       text-align: right;
 
       color: var(--ui-color-two);
 
-      height: calc(100dvh - 8em);
+      /* height: calc(100dvh - 13em); */
-      overflow-y: auto;
+      /* overflow-y: auto; */
     }
 
     .body-footer {
+      position: fixed;
+      bottom: 0em;
+      left: 0;
+      right: 0;
+      max-width: 1200px;
+      margin: auto;
+
       .actions {
         margin-bottom: 1em;
 
@@ -512,7 +552,7 @@ const UTree = defineAsyncComponent(
           );
           box-shadow: 0px 8px 20px 0px #0000001a;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 15px;
           line-height: 22.5px;
@@ -536,7 +576,7 @@ const UTree = defineAsyncComponent(
           );
           box-shadow: 0px 8px 20px 0px #0000001a;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -560,7 +600,7 @@ const UTree = defineAsyncComponent(
         box-shadow: 0px 8px 20px 0px #0000001a;
 
         .total-pages {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 12px;
           line-height: 100%;
@@ -569,23 +609,32 @@ const UTree = defineAsyncComponent(
           color: #8a92a8;
         }
         .prev-haditha {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
-          font-size: 12px;
+          font-size: 0.6rem;
           line-height: 20px;
           letter-spacing: 0%;
           text-align: right;
           color: var(--ui-color-two);
         }
         .next-haditha {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
-          font-size: 12px;
+          /* font-size: 12px; */
+          font-size: 0.6rem;
           line-height: 20px;
           letter-spacing: 0%;
           text-align: right;
           color: var(--ui-color-two);
         }
+
+        .prev-haditha,
+        .next-haditha {
+          &:hover {
+            cursor: pointer;
+            background-color: #eee;
+          }
+        }
       }
     }
   }
@@ -593,6 +642,9 @@ const UTree = defineAsyncComponent(
 </style>
 
 <style>
+body.hadith-system.library-show-page {
+  background-color: #f7fffd;
+}
 .page-container {
   .page-inner-container {
     .body-footer {
@@ -608,7 +660,7 @@ const UTree = defineAsyncComponent(
           border-width: 0.5px;
           border: 0.3px solid #e0e0e0;
           box-shadow: 0px 8px 20px 0px #0000001a;
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 0.75rem;
           line-height: 100%;
@@ -621,3 +673,5 @@ const UTree = defineAsyncComponent(
   }
 }
 </style>
+
+<!-- http://localhost:3000/haditha/library/vdh9971/%D8%AA%D8%B1%D8%AC%D9%85%D9%87%20%D8%A7%D8%B5%D9%88%D9%84%20%DA%A9%D8%A7%D9%81%DB%8C%20%D8%AC%D9%84%D8%AF%20%D8%A7%D9%88%D9%84%D8%8C%20%D8%B5%D9%81%D8%AD%D9%87%0A%20%20%20384 -->

pages/haditha/library/index.vue

@@ -26,6 +26,9 @@ const el = useTemplateRef<HTMLElement>("el");
 const httpService = useNuxtApp()["$http"];
 const total = ref(0);
 const currentPage = useState("currentPage", () => 0);
+// Client-side state
+const loading = ref(false);
+const hasMore = ref(true);
 // #endregion refs
 
 // #region reactive
@@ -57,7 +60,27 @@ const getLibraryList = async (dataType = "bookmark") => {
 // Server-side initial load
 const { data: loadedItems } = await useAsyncData(
   "libraryList",
-  () => getLibraryList(),
+  async () => {
+    if (loading.value) return;
+    loading.value = true;
+
+    let url = repoUrl() + hadithaApi.library.list;
+    url = url.replace("@field_collapsed", "normal");
+    url = url.replace("@offset", currentPage.value);
+    url = url.replace("@limit", state.pagination.limit);
+    url = url.replace("@q", "none");
+
+    return await httpService
+      .postRequest(url)
+      .then((res) => {
+        total.value = res.hits.total.value ?? 0;
+        currentPage.value += state.pagination.limit;
+        return res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  },
   {
     transform: (data) => data.hits.hits,
     getCachedData: (key) => {
@@ -66,10 +89,6 @@ const { data: loadedItems } = await useAsyncData(
   }
 );
 
-// Client-side state
-const loading = ref(false);
-const hasMore = ref(true);
-
 // Client-side infinite scroll
 useInfiniteScroll(
   el,
@@ -121,11 +140,11 @@ const CardList = defineAsyncComponent(
 
         <div
           ref="el"
-          class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-3 md:gap-x-28 md:gap-y-12 lg:grid-cols-5 lg:gap-x-28 lg:gap-y-12 mx-6"
+          class="library-list pl-4 firefox-scrollbar grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-3 md:gap-x-28 md:gap-y-12 lg:grid-cols-5 lg:gap-x-28 lg:gap-y-12 mx-6"
         >
           <!-- Client-side loaded content -->
           <card-list
-            v-if="loadedItems.length"
+            v-if="loadedItems?.length"
             no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
             no-data-icon="/img/haditha/no-data.png"
             :list="loadedItems"
@@ -154,7 +173,7 @@ const CardList = defineAsyncComponent(
       margin-bottom: 2em;
       .title {
         margin-left: 0.4em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -171,7 +190,7 @@ const CardList = defineAsyncComponent(
       overflow-y: auto;
     }
     .no-data-text {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 16px;
       line-height: 24px;

pages/haditha/login.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import headLinks from "@haditha/json/haditha/headLinks";
+import headMetas from "@haditha/json/haditha/headMetas";
+
 definePageMeta({
   layout: false,
   name: "hadithaLogin",
@@ -7,94 +10,12 @@ useHead({
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ورود`,
   meta: [
     { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
-    {
+    ...headMetas,
-      name: "msapplication-TileImage",
-      content: "/img/haditha/fav-icons/ms-icon-144x144.png",
-    },
-    { name: "theme-color", content: "#ffffff" },
   ],
   bodyAttrs: {
     class: import.meta.env.VITE_HADITH_SYSTEM,
   },
-  link: [
+  link: headLinks,
-    {
-      rel: "icon",
-      type: "image/x-icon",
-      href: "/img/haditha/fav-icons/favicon.ico",
-    },
-    { rel: "manifest", href: "/img/haditha/fav-icons/manifest.json" },
-    // rel: icon
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "16x16",
-      href: "/img/haditha/fav-icons/favicon-16x16.png",
-    },
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "32x32",
-      href: "/img/haditha/fav-icons/favicon-32x32.png",
-    },
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "96x96",
-      href: "/img/haditha/fav-icons/favicon-96x96.png",
-    },
-    {
-      rel: "icon",
-      sizes: "192x192",
-      type: "image/png",
-      href: "/img/haditha/fav-icons/android-icon-192x192.png",
-    },
-    // rel: apple
-    {
-      rel: "apple-touch-icon",
-      sizes: "57x57",
-      href: "/img/haditha/fav-icons/apple-icon-57x57.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "60x60",
-      href: "/img/haditha/fav-icons/android-icon-60x60.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "72x72",
-      href: "/img/haditha/fav-icons/android-icon-72x72.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "76x76",
-      href: "/img/haditha/fav-icons/android-icon-76x76.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "114x114",
-      href: "/img/haditha/fav-icons/android-icon-114x114.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "120x120",
-      href: "/img/haditha/fav-icons/android-icon-120x120.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "144x144",
-      href: "/img/haditha/fav-icons/android-icon-144x144.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "152x152",
-      href: "/img/haditha/fav-icons/android-icon-152x152.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "180x180",
-      href: "/img/haditha/fav-icons/android-icon-180x180.png",
-    },
-  ],
 });
 
 const stepOne = ref(true);
@@ -155,7 +76,7 @@ const EnterVerifyCode = defineAsyncComponent(
 
       .title {
         margin-bottom: 1.2em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 20px;
         line-height: 30px;
@@ -177,7 +98,7 @@ const EnterVerifyCode = defineAsyncComponent(
       }
 
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 14px;
         line-height: 21px;
@@ -206,7 +127,7 @@ const EnterVerifyCode = defineAsyncComponent(
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -246,7 +167,7 @@ const EnterVerifyCode = defineAsyncComponent(
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 100%;

pages/haditha/public-pages/about-us.vue

@@ -89,7 +89,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -104,7 +104,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       p {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;

pages/haditha/public-pages/contactus.vue

@@ -144,7 +144,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -159,7 +159,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       .label {
         display: inline-block;
         margin-inline-end: 1em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;
@@ -170,7 +170,7 @@ const NavigationMenu = defineAsyncComponent(() =>
         height: 21;
       }
       .value {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;

pages/haditha/public-pages/index.vue

@@ -163,7 +163,7 @@ onMounted(() => {
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -176,7 +176,7 @@ onMounted(() => {
       color: var(--ui-color-two);
 
       p {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;

pages/haditha/public-pages/rules.vue

@@ -102,7 +102,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -116,7 +116,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       overflow: auto;
       color: var(--ui-color-two);
       ul li {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;

pages/haditha/search/[id]/[slug]/index.vue

@@ -22,6 +22,9 @@ definePageMeta({
   name: "hadithaSearchShow",
 });
 
+const route = useRoute();
+const router = useRouter();
+
 useHead({
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE}`,
   meta: [
@@ -29,7 +32,7 @@ useHead({
     ...headMetas,
   ],
   bodyAttrs: {
-    class: import.meta.env.VITE_HADITH_SYSTEM,
+    class: [import.meta.env.VITE_HADITH_SYSTEM, "search-show-page"],
   },
   link: headLinks,
 });
@@ -48,40 +51,27 @@ useHead({
 
 // #region refs and reactives
 const emit = defineEmits(["close"]);
-const route = useRoute();
-const router = useRouter();
 const loading = ref(false);
 const httpService = useNuxtApp()["$http"];
 const toast = useToast();
 
-const state = reactive({
-  selectedItem: {} as HadithResponseShowModel,
-});
 // #endregion refs and reactives
 
 // #region methods
-const fetchData = async () => {
+const fetchData = () => {
-  if (loading.value) return;
-  loading.value = true;
-
   let url = hadithaApi.search.show;
   url = url.replace("@index_key", "dhparag");
   url = url.replace("@id", route.params.id);
 
-  // fetch search list from backend(ssr)
+  return httpService.getRequest(url);
-  const { data, status, error, refresh, clear } =
-    await useHadithaSearchComposable<HadithResponseShowModel>(url, {
-      method: "get",
-    });
-
-  if (status.value == "success") {
-    state.selectedItem = <HadithResponseShowModel>data.value;
-  }
-
-  loading.value = false;
 };
 
-fetchData();
+const { data: selectedItem } = useAsyncData("parags", () => fetchData());
+
+const hadithAddress = computed(() => {
+  return `${selectedItem.value?._source?.address?.vol_title}، صفحه
+   ${selectedItem.value?._source?.address?.page_num}`;
+});
 
 const goToTheSearch = (type: string) => {
   router.push({
@@ -91,29 +81,20 @@ const goToTheSearch = (type: string) => {
     },
   });
 };
-const goToTheChatbot = () => {
+// const goToTheChatbot = () => {
-  router.push({
+//   router.push({
-    name: "hadithaChatBot",
+//     name: "hadithaChatBot",
-  });
+//   });
-};
+// };
 
 const handleFavorite = async () => {
-  if (state.selectedItem?._source?.tbookmark) {
+  if (selectedItem.value?._source?.tbookmark) {
-    await removeFromFavorites(state.selectedItem);
+    await removeFromFavorites(selectedItem.value);
-    state.selectedItem._source.tbookmark = false;
+    selectedItem.value._source.tbookmark = false;
   } else {
-    await addToFavorites(state.selectedItem);
+    await addToFavorites(selectedItem.value);
-    state.selectedItem._source.tbookmark = true;
+    selectedItem.value._source.tbookmark = true;
   }
-
-  // // add
-  // if (!state.selectedItem._source.tbookmark) {
-  //   addToFavorites(state.selectedItem);
-  // }
-  // // delete
-  // else {
-  //   removeFromFavorites(state.selectedItem);
-  // }
 };
 
 const addToFavorites = async (item = {}) => {
@@ -124,23 +105,21 @@ const addToFavorites = async (item = {}) => {
     ref_id: item._id,
     title: item._source.content,
   };
-  httpService.postRequest(url, formData).then((res) => {
+  httpService
-    // this.updateListAnswer(index, "tbookmark", 1);
+    .postRequest(url, formData)
-
+    .then((res) => {
-    try {
       toast.add({
         title: "انجام شد.",
         description: "به نشان شده ها افزوده شد",
         color: "success",
       });
-    } catch (err) {
+    })
-      console.log(err.message);
+    .catch((err) => {
       toast.add({
-        title: "انجام شد.",
+        title: "خطا",
         description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
         color: "error",
       });
-    }
     });
 };
 
@@ -154,23 +133,21 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     ref_id: item._id,
     title: item._source.title,
   };
-  httpService.postRequest(url, formData).then((res) => {
+  httpService
-    // this.updateListAnswer(index, "tbookmark", 0);
+    .postRequest(url, formData)
-
+    .then((res) => {
-    try {
       toast.add({
         title: "انجام شد.",
-        description: "از لیست نشان شده ها حذف شد",
+        description: "به نشان شده ها افزوده شد",
         color: "success",
       });
-    } catch (err) {
+    })
-      console.log(err.message);
+    .catch((err) => {
       toast.add({
-        title: "انجام شد.",
+        title: "خطا",
         description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
         color: "error",
       });
-    }
     });
 };
 
@@ -180,18 +157,36 @@ const handlePagination = (prevNextIndicator: string) => {
 
   let url = repoUrl() + hadithaApi.search.prevNextHadith;
   url = url.replace("@index_key", "dhparag");
-  url = url.replace("@vol_id", state.selectedItem?._source?.address?.vol_id);
+  url = url.replace("@vol_id", selectedItem.value?._source?.address?.vol_id);
-  url = url.replace("@parag_order", state.selectedItem?._source?.parag_order);
+  url = url.replace("@parag_order", selectedItem.value?._source?.parag_order);
   url = url.replace("@step", prevNextIndicator);
 
   httpService
     .getRequest(url)
     .then((res) => {
-      state.selectedItem = res.hits.hits?.[0];
+      selectedItem.value = res.hits.hits?.[0];
     })
     .finally(() => (loading.value = false));
 };
 
+const onKeyWordClick = (keyword) => {
+  router.push({
+    name: "hadithaSearch",
+    query: {
+      q: route.query.q ?? "",
+      f_aik: keyword ?? "",
+    },
+  });
+};
+const onClassClick = (aiclass) => {
+  router.push({
+    name: "hadithaSearch",
+    query: {
+      q: route.query.q ?? "",
+      f_aik: aiclass ?? "",
+    },
+  });
+};
 // const localCopyTextToClipboard = (text: string) => {
 //   copyTextToClipboard(text);
 // };
@@ -202,16 +197,27 @@ const handlePagination = (prevNextIndicator: string) => {
 //   console.info("mounted");
 // });
 // #endregion methods
+// components declaration
+const HadithaLayout = defineAsyncComponent(
+  () => import("@haditha/layouts/HadithaLayout.vue")
+);
+const NavigationMenu = defineAsyncComponent(
+  () => import("@haditha/components/haditha/NavigationMenu.vue")
+);
 </script>
 
 <template>
+  <HadithaLayout>
+    <div class="page-container h-full">
       <UContainer
         ui="{
           base: 'sm:px-6 lg:px-4',
         }"
         class="page-inner-container sm:px-6 lg:px-4 py-8"
       >
-    <div class="search-show-page">
+        <navigation-menu></navigation-menu>
+
+        <div class="search-show-page py">
           <div class="body-header">
             <span class="top-left-bgi z-0"></span>
             <div class="modal-title flex justify-between">
@@ -220,14 +226,18 @@ const handlePagination = (prevNextIndicator: string) => {
                 :to="{ name: 'haditha' }"
                 class="flex justify-center items-center me-3"
               >
-            <img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
+                <img
+                  fit="auto"
+                  quality="80"
+                  src="/img/haditha/haditha-title.svg"
+                />
               </ULink>
 
               <UButton
                 icon="i-haditha-close"
                 color="neutral"
                 variant="ghost"
-            class="close-btn"
+                class="close-btn text-[var(--ui-color-two)] hover:bg-gray-300"
                 @click="goToTheSearch('normal')"
               />
             </div>
@@ -240,22 +250,36 @@ const handlePagination = (prevNextIndicator: string) => {
                   <UButton
                     @click="handleFavorite"
                     :variant="
-                  state.selectedItem?._source?.tbookmark ? 'soft' : 'ghost'
+                      selectedItem?._source?.tbookmark ? 'soft' : 'ghost'
                     "
                     color="primary"
                     class="bookmark-btn"
                     :icon="
-                  state.selectedItem?._source?.tbookmark
+                      selectedItem?._source?.tbookmark
                         ? 'i-haditha-tag-active'
                         : 'i-haditha-tag'
                     "
                   >
                   </UButton>
-              <div class="referene">
+
+                  <ULink
+                    :to="{
+                      name: 'hadithaLibraryShow',
+                      params: {
+                        id: selectedItem?._source?.address.vol_id,
+                        slug: hadithAddress,
+                      },
+                    }"
+                    color="neutral"
+                    variant="ghost"
+                    :ui="{
+                      leadingIcon: 'text-(--ui-primary)',
+                    }"
+                    class="referene bg-white hover:bg-gray-100"
+                  >
                     <span> نشانی: </span>
-                {{ state.selectedItem?._source?.address?.vol_title }}، صفحه
+                    {{ hadithAddress ?? "" }}
-                {{ state.selectedItem?._source?.address?.page_num }}
+                  </ULink>
-              </div>
                 </div>
 
                 <div class="content firefox-scrollbar">
@@ -264,20 +288,20 @@ const handlePagination = (prevNextIndicator: string) => {
                       <div class="section-header">
                         <span class="section-title">
                           {{
-                        state.selectedItem?._source?.meta?.hadith_masoum ??
+                            selectedItem?._source?.meta?.hadith_masoum ??
-                        state.selectedItem?._source?.meta?.hadith_sanad
+                            selectedItem?._source?.meta?.hadith_sanad
                           }}
                         </span>
 
                         <UButton
                           v-if="
-                        state.selectedItem?._source?.meta?.hadith_masoum
+                            selectedItem?._source?.meta?.hadith_masoum
                               ?.length ||
-                        state.selectedItem?._source?.meta?.hadith_sanad
+                            selectedItem?._source?.meta?.hadith_sanad
                           "
                           @click="
                             copyTextToClipboard(
-                          state.selectedItem?._source?.content_ar ?? ''
+                              selectedItem?._source?.content_ar ?? ''
                             )
                           "
                           variant="ghost"
@@ -286,11 +310,11 @@ const handlePagination = (prevNextIndicator: string) => {
                         />
                       </div>
                       <div
-                    v-if="state.selectedItem?._source?.content_ar?.length"
+                        v-if="selectedItem?._source?.content_ar?.length"
                         class="arabic-text"
                       >
                         <p>
-                      {{ state.selectedItem?._source?.content_ar ?? "" }}
+                          {{ selectedItem?._source?.content_ar ?? "" }}
                         </p>
                       </div>
                     </div>
@@ -302,9 +326,7 @@ const handlePagination = (prevNextIndicator: string) => {
                         <span class="section-title"> ترجمه </span>
                         <UButton
                           @click="
-                        copyTextToClipboard(
+                            copyTextToClipboard(selectedItem?._source?.content)
-                          state.selectedItem?._source?.content
-                        )
                           "
                           variant="ghost"
                           class="copy-btn"
@@ -314,20 +336,20 @@ const handlePagination = (prevNextIndicator: string) => {
 
                       <p class="from">
                         {{
-                      state.selectedItem?._source?.meta?.hadith_masoum ??
+                          selectedItem?._source?.meta?.hadith_masoum ??
-                      state.selectedItem?._source?.meta?.hadith_sanad
+                          selectedItem?._source?.meta?.hadith_sanad
                         }}:
                       </p>
                       <p
                         class="persian-text"
-                    v-html="state.selectedItem?._source?.content"
+                        v-html="selectedItem?._source?.content"
                       ></p>
                     </div>
 
                     <div class="separator"></div>
 
                     <div
-                  v-if="state.selectedItem?._source?.description?.length"
+                      v-if="selectedItem?._source?.description?.length"
                       class="text-description-section"
                     >
                       <div class="section-header">
@@ -335,7 +357,7 @@ const handlePagination = (prevNextIndicator: string) => {
                         <UButton
                           @click="
                             copyTextToClipboard(
-                          state.selectedItem?._source?.description
+                              selectedItem?._source?.description
                             )
                           "
                           variant="ghost"
@@ -345,7 +367,7 @@ const handlePagination = (prevNextIndicator: string) => {
                       </div>
                       <p
                         class="description-item"
-                    v-html="state.selectedItem?._source?.description"
+                        v-html="selectedItem?._source?.description"
                       ></p>
                     </div>
 
@@ -353,35 +375,36 @@ const handlePagination = (prevNextIndicator: string) => {
 
                     <div class="text-description-section">
                       <div
-                    v-if="state.selectedItem?._source?.ai_keywords?.length"
+                        v-if="selectedItem?._source?.ai_keywords?.length"
-                    class="text-sm mb-1"
+                        class="mb-4"
                       >
-                    <span class=""> کلیدواژگان: </span>
+                        <span class="text-sm"> کلیدواژگان: </span>
-                    <span
+                        <UButton
-                      class="me-1 text-gray-400 font-light"
+                          class="me-1 text-sm"
-                      v-for="(aiClass, i) in state.selectedItem?._source
+                          v-for="(keyword, i) in selectedItem?._source
                             ?.ai_keywords"
                           :key="i"
+                          @click.prevent="onKeyWordClick(keyword)"
+                          variant="soft"
                         >
-                      {{ i > 0 ? "," : "" }}
+                          <!-- {{ i > 0 ? "," : "" }} -->
-                      {{ aiClass }}
+                          {{ keyword }}
-                    </span>
+                        </UButton>
                       </div>
 
-                  <div
+                      <div v-if="selectedItem?._source?.ai_classes?.length">
-                    class="text-sm"
+                        <span class="text-sm"> دسته بندی ها: </span>
-                    v-if="state.selectedItem?._source?.ai_classes?.length"
+                        <UButton
-                  >
+                          class="me-1 text-sm"
-                    <span class=""> دسته بندی ها: </span>
+                          v-for="(aiClass, i) in selectedItem?._source
-                    <span
-                      class="me-1 text-gray-400 font-light"
-                      v-for="(aiClass, i) in state.selectedItem?._source
                             ?.ai_classes"
                           :key="i"
+                          @click.prevent="onClassClick(aiClass)"
+                          variant="soft"
                         >
-                      {{ i > 0 ? "," : "" }}
+                          <!-- {{ i > 0 ? "," : "" }} -->
                           {{ aiClass.label }}
-                    </span>
+                        </UButton>
                       </div>
                     </div>
                   </div>
@@ -391,7 +414,7 @@ const handlePagination = (prevNextIndicator: string) => {
           </div>
 
           <div class="body-footer">
-        <div class="mt-5 z-2">
+            <div class="mt-5 pb-5 z-2">
               <!-- <div class="flex justify-between actions">
             <UButton
               disabled
@@ -432,26 +455,35 @@ const handlePagination = (prevNextIndicator: string) => {
           </div>
         </div>
       </UContainer>
+    </div>
+  </HadithaLayout>
 </template>
 
 <!-- because of the buttons, using without scoped. -->
 <style>
+body.hadith-system.search-show-page {
+  background-color: #f7fffd;
+}
+
 .page-inner-container {
   height: 100%;
+  max-width: 1200px;
+  width: 100%;
 }
 .search-show-page {
   .body-header {
+    padding-top: 5em;
     .modal-title {
       padding: 0 0.5em 1.5em;
       margin-bottom: 2.5em;
 
       .close-btn {
-        color: var(--ui-color-two);
+        /* color: var(--ui-color-two); */
 
         /* width: 24px; */
         /* height: 24px; */
         padding: 0.2em;
-        background-color: transparent;
+        /* background-color: transparent; */
       }
     }
   }
@@ -491,10 +523,10 @@ const handlePagination = (prevNextIndicator: string) => {
         padding-right: 12px;
         padding-bottom: 4px;
         padding-left: 12px;
-        background: #ffffff;
+        /* background-color: #ffffff; */
         border: 0.5px solid #d9d9d9;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 18px;
@@ -506,7 +538,7 @@ const handlePagination = (prevNextIndicator: string) => {
 
         span {
           margin-left: 0.1em;
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
           font-size: 12px;
           line-height: 18px;
@@ -517,11 +549,12 @@ const handlePagination = (prevNextIndicator: string) => {
       }
     }
     .content {
-      height: calc(100dvh - 15em);
+      /* height: calc(100dvh - 15em); */
-      overflow-y: auto;
+      /* overflow-y: auto; */
+      padding-bottom: 5em;
 
       .search-item {
-        padding: 1em 0 1em 0.1em;
+        padding: 1em 0 1em 1em;
 
         .section-header {
           display: flex;
@@ -531,7 +564,7 @@ const handlePagination = (prevNextIndicator: string) => {
           margin-bottom: 0.5em;
 
           .section-title {
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 400;
             font-size: 14px;
             line-height: 21px;
@@ -572,7 +605,7 @@ const handlePagination = (prevNextIndicator: string) => {
             /* background: #ffffff; */
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 12px;
             line-height: 18px;
@@ -586,7 +619,7 @@ const handlePagination = (prevNextIndicator: string) => {
           padding: 2em 0;
 
           .arabic-text {
-            font-family: Takrim;
+            font-family: var(--ar-font);
             font-weight: 400;
             font-size: 18px;
             line-height: 32px;
@@ -606,16 +639,18 @@ const handlePagination = (prevNextIndicator: string) => {
 
           .from,
           .persian-text {
-            font-family: Takrim;
+            /* font-family: Takrim; */
+            font-family: var(--font);
             font-weight: 400;
-            font-size: 18px;
+            /* font-size: 18px; */
+            font-size: 0.85rem;
             line-height: 30px;
             letter-spacing: 0%;
             text-align: right;
             color: var(--ui-color-two);
           }
           /* .persian-text {
-            font-family: Takrim;
+        font-family: var(--ar-font);
             font-weight: 400;
             font-size: 16px;
             line-height: 22px;
@@ -629,9 +664,11 @@ const handlePagination = (prevNextIndicator: string) => {
           padding: 2em 0;
 
           .description-item {
-            font-family: Takrim;
+            font-family: var(--font);
             font-weight: 400;
-            font-size: 18px;
+            /* font-size: 18px; */
+            font-size: 0.85rem;
+
             line-height: 30px;
             letter-spacing: 0%;
             text-align: right;
@@ -648,7 +685,7 @@ const handlePagination = (prevNextIndicator: string) => {
             border-width: 0.5px;
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 10px;
             line-height: 15px;
@@ -676,6 +713,13 @@ const handlePagination = (prevNextIndicator: string) => {
     }
   }
   .body-footer {
+    position: fixed;
+    bottom: 0em;
+    left: 0;
+    right: 0;
+    max-width: 1200px;
+    margin: auto;
+
     .actions {
       margin-bottom: 1em;
 
@@ -699,7 +743,7 @@ const handlePagination = (prevNextIndicator: string) => {
         );
         box-shadow: 0px 8px 20px 0px #0000001a;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 15px;
         line-height: 22.5px;
@@ -719,7 +763,7 @@ const handlePagination = (prevNextIndicator: string) => {
         background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);
         box-shadow: 0px 8px 20px 0px #0000001a;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 16px;
         line-height: 24px;
@@ -743,7 +787,7 @@ const handlePagination = (prevNextIndicator: string) => {
       box-shadow: 0px 8px 20px 0px #0000001a;
 
       .prev-haditha {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 20px;
@@ -752,7 +796,7 @@ const handlePagination = (prevNextIndicator: string) => {
         color: var(--ui-color-two);
       }
       .next-haditha {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 20px;
@@ -760,17 +804,25 @@ const handlePagination = (prevNextIndicator: string) => {
         text-align: right;
         color: var(--ui-color-two);
       }
+
+      .prev-haditha,
+      .next-haditha {
+        &:hover {
+          cursor: pointer;
+          background-color: #eee;
         }
       }
-}
-@media screen and (max-width: 719.99px) {
-  .search-show-page {
-    .body-content {
-      .content {
-        height: calc(100dvh - 15em);
-        overflow-y: auto;
-      }
     }
   }
 }
+/* @media screen and (max-width: 719.99px) { */
+/* .search-show-page { */
+/* .body-content { */
+/* .content { */
+/* height: calc(100dvh - 15em); */
+/* overflow-y: auto; */
+/* } */
+/* } */
+/* } */
+/* } */
 </style>

pages/haditha/search/index.vue

@@ -83,6 +83,7 @@ const isSynonymPopupOpen = ref(false);
 const Formstate = reactive({
   name: "",
 });
+const showNoData = ref(false);
 // #endregion refs
 
 // #region reactive
@@ -166,7 +167,7 @@ const backgroundImageStyle = computed(() => {
   // });
   let optimizedImageUrl = "/img/haditha/background.webp";
 
-  if (searchTerm.value?.length) {
+  if (showNoData.value) {
     // optimizedImageUrl = img("/img/haditha/sub-header-bgi.webp", {
     //   quality: 80,
     // });
@@ -181,9 +182,9 @@ const backgroundImageStyle = computed(() => {
     backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
   };
 });
-// const searchButtonIcon = computed(() => {
+const searchButtonIcon = computed(() => {
-//   return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
+  return searchTerm.value?.length ? "i-lucide-x" : "i-haditha-search";
-// });
+});
 const synonymIsSwitchedOn = computed(() => {
   return AutoComplationState.synonym.items.filter((i) => i.enable).length;
 });
@@ -192,7 +193,16 @@ const synonymIsSwitchedOn = computed(() => {
 // #region methods
 
 // خروج از حالت مشابه
-const exitSimilarMode = () => {};
+const exitSimilarMode = () => {
+  history?.pushState(
+    {},
+    document?.title,
+    route.path + `?q=${searchTerm.value}`
+  );
+  delete route.query.f_aik;
+
+  sendQuery();
+};
 // ارسال درخواست
 const sendQuery = async (payload = {}) => {
   let url = hadithaApi.search.list;
@@ -210,15 +220,19 @@ const sendQuery = async (payload = {}) => {
     typeModelValue.value == "translations" ||
     typeModelValue.value == "descriptions";
 
+  if (searchTerm.value.length) {
     url = url.replace(
       "@q=none",
-    searchTerm.value.length
+      `q=${isTypeSelected ? "#" + typeModelValueFa.value + " " : ""}${
-      ? `q=${isTypeSelected ? "#" + typeModelValueFa.value + " " : ""}${
         searchTerm.value
       }`
-      : "q=none"
     );
 
+    // if (route.query.f_aik?.length) url += `&f_aik=${route.query.f_aik}`;
+  }
+
+  console.info(url);
+
   return await httpService.postRequest(url, payload).then((res) => {
     total.value = res.hits.total.value ?? 0;
     offset.value += mainState.pagination.limit;
@@ -239,8 +253,12 @@ const { data: loadedItems } = await useAsyncData("search", () => sendQuery(), {
     return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
   },
 });
+showNoData.value = Boolean(loadedItems.value?.length);
 
 const onBeforeSendQuery = (from) => {
+  if (loading.value) return;
+  loading.value = true;
+
   history?.pushState(
     {},
     document?.title,
@@ -249,9 +267,18 @@ const onBeforeSendQuery = (from) => {
 
   offset.value = 0;
 
+  if (searchTerm.value?.length) {
     sendQuery().then((res) => {
       loadedItems.value = res.hits.hits;
+      showNoData.value = Boolean(loadedItems.value?.length);
+      loading.value = false;
     });
+  } else {
+    searchTerm.value = "";
+    loadedItems.value = [];
+    showNoData.value = false;
+    loading.value = false;
+  }
 };
 // Client-side infinite scroll
 useInfiniteScroll(
@@ -278,11 +305,23 @@ useInfiniteScroll(
   { distance: 100 }
 );
 // دکمه جستجو کردن
-const handleSearchClearButton = () => {
+const onSearchButtonClick = () => {
+  if (loading.value) return;
+  loading.value = true;
+
   // showclearButton.value = true;
+  if (searchTerm.value?.length) {
+    searchTerm.value = "";
+    loadedItems.value = [];
+    showNoData.value = false;
+    loading.value = false;
+  } else {
     sendQuery().then((res) => {
       loadedItems.value = res.hits.hits;
+      showNoData.value = Boolean(loadedItems.value?.length);
+      loading.value = false;
     });
+  }
 };
 
 // وقتی کاربر کلیدی فشار میدهد
@@ -304,6 +343,7 @@ const setType = (type: string) => {
   offset.value = 0;
   sendQuery().then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 // const setKey = (type: string) => {
@@ -344,6 +384,7 @@ const onTypeSelectChanged = (value: string) => {
 
   sendQuery().then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 
@@ -397,6 +438,7 @@ const prepareSynonym = () => {
 const onUpdateSwitch = () => {
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 const onUpdateSubTitle = (subTitle) => {
@@ -404,6 +446,7 @@ const onUpdateSubTitle = (subTitle) => {
 
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 const onAddNewTitle = (subTitles) => {
@@ -415,6 +458,7 @@ const onAddNewTitle = (subTitles) => {
 
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 // #endregion methods
@@ -446,17 +490,14 @@ const SearchList = defineAsyncComponent(
             <div class="haditha-search-root-wrapper search-page">
               <div
                 class="haditha-search-root"
-                :class="{ 'no-backdrop': showPrevSearch }"
+                :class="{ 'no-backdrop': route.query.f_aik?.length }"
               >
                 <!-- وقتی کاربر در صفحه نمایش بر روی مشابه کلیک میکند و به صفحه جستجو وارد میشود. -->
-                <div
+                <!-- v-if="route.query.f_aik?.length" -->
-                  v-if="showPrevSearch"
+                <div v-if="false" class="prev-search-item flex items-center">
-                  class="prev-search-item flex items-center"
+                  <!-- <span class="total">۴۷ مشابه </span> -->
-                >
-                  <span class="total">۴۷ مشابه </span>
                   <span class="text me-auto">
-                    عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
+                    {{ route.query.f_aik }}
-                    قَالَ:
                   </span>
                   <UButton
                     icon="i-lucide:x"
@@ -469,9 +510,10 @@ const SearchList = defineAsyncComponent(
 
                 <!-- <client-only> -->
                 <div class="search-input">
-                  <UInputMenu
+                  <!-- :items="<any>Array.from(userSearchHistory)" -->
+
+                  <UInput
                     class="w-full focus:placeholder-gray-800"
-                    :items="<any>Array.from(userSearchHistory)"
                     v-model="searchTerm"
                     v-model:open="open"
                     v-model:search-term="searchTerm"
@@ -495,13 +537,16 @@ const SearchList = defineAsyncComponent(
                     <!-- @keydown="onKeyDown" -->
                     <!-- @update:modelValue="onUpdateModel" -->
                     <!-- @update:searchTerm="onUpdateModel" -->
-                  </UInputMenu>
+                  </UInput>
                 </div>
+                <!-- 'similar-mode': route.query.f_aik?.length, -->
                 <UButton
                   class="my-trailing-button"
-                  :class="{ 'close-mode': showclearButton }"
+                  :class="{
-                  @click.prevent="handleSearchClearButton"
+                    'close-mode': searchTerm.length,
-                  icon="i-haditha-search"
+                  }"
+                  @click.prevent="onSearchButtonClick"
+                  :icon="searchButtonIcon"
                 >
                   <!-- <UIcon name="i-lucide-search" /> -->
                 </UButton>
@@ -509,7 +554,7 @@ const SearchList = defineAsyncComponent(
               </div>
               <div
                 class="search-filter flex items-center my-3 justify-between"
-                v-if="searchTerm.length"
+                v-if="showNoData"
               >
                 <div class="flex items-center space-x-2">
                   <!-- #region  معنایی -->
@@ -737,7 +782,7 @@ const SearchList = defineAsyncComponent(
             </div>
           </div>
           <div
-            v-if="searchTerm?.length == 0 && loadedItems?.length == 0"
+            v-if="!showNoData"
             class="flex justify-center flex-col items-center mt-10"
           >
             <img
@@ -754,7 +799,7 @@ const SearchList = defineAsyncComponent(
           </div>
 
           <div
-            v-else-if="searchTerm?.length && loadedItems?.length"
+            v-show="showNoData"
             class="search-box-container pb-0 bg-white flex justify-center"
           >
             <div class="search-list-contianer">
@@ -763,6 +808,7 @@ const SearchList = defineAsyncComponent(
                 نتیجه
               </div>
 
+              <!-- v-show="!loading" -->
               <div ref="el" class="search-list firefox-scrollbar">
                 <search-list
                   no-data-text="نتیجه‌ای یافت نشد!"
@@ -771,16 +817,22 @@ const SearchList = defineAsyncComponent(
                   :list="loadedItems"
                   :searchTerm="searchTerm"
                 ></search-list>
-              </div>
+
-            </div>
+                <!-- <no-data
-          </div>
-          <no-data
                   class="h-full w-full flex flex-col justify-center items-center"
-            v-else
+                  v-if="showNoData"
                 >
                   <img fit="auto" quality="80" src="/img/haditha/no-data.png" />
                   <p class="no-data-text">"نتیجه‌ای یافت نشد!</p>
-          </no-data>
+                </no-data> -->
+              </div>
+
+              <!-- <the-content-loading
+                v-show="loading"
+                class="absolute-positioning"
+              ></the-content-loading> -->
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -801,7 +853,7 @@ const SearchList = defineAsyncComponent(
 
   .title {
     margin-top: 3.5em;
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-size: 14px;
     line-height: 21px;
     letter-spacing: 0%;
@@ -832,14 +884,17 @@ const SearchList = defineAsyncComponent(
 }
 
 .search-list-contianer {
-  max-width: 41em; /*656px*/
+  position: relative;
+  /*max-width: 41em;656px*/
+  max-width: 75em; /*1200px*/
+
   width: 100%;
   margin: 0 1em;
 
   .total {
     padding: 0.5em 1.8em;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 0.68rem; /*11px*/
     line-height: 1rem;
@@ -916,7 +971,7 @@ const SearchList = defineAsyncComponent(
         padding: 5px 7px;
         background: #1b213266;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 500;
         font-size: 10px;
         line-height: 15px;
@@ -925,7 +980,7 @@ const SearchList = defineAsyncComponent(
         color: #ffffff;
       }
       .text {
-        font-family: Takrim;
+        font-family: var(--ar-font);
         font-weight: 400;
         font-size: 16px;
         line-height: 32px;
@@ -974,6 +1029,10 @@ const SearchList = defineAsyncComponent(
     margin: auto;
     transition: all 0.2s ease-in-out;
 
+    &.similar-mode {
+      top: 60px;
+    }
+
     &:hover {
       transition: all 0.2s ease-in-out;
       background: linear-gradient(320.71deg, #54ecaa 6.56%, #b6f0d9 69.69%);
@@ -990,13 +1049,7 @@ const SearchList = defineAsyncComponent(
       ); */
     }
   }
-  .close-mode {
+
-    background: #f0f1f4;
-    color: #000; /* رنگ خاکستری */
-    &:hover {
-      background: #e0e0e0; /* رنگ خاکستری */
-    }
-  }
   .haditha-search-input {
     z-index: 0;
 
@@ -1013,7 +1066,7 @@ const SearchList = defineAsyncComponent(
     border: 0.3px solid #e0e0e0;
     box-shadow: 0px 1px 4px 0px #0000000d;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 14px;
     line-height: 21px;
@@ -1036,7 +1089,7 @@ const SearchList = defineAsyncComponent(
       border: 0.3px solid #e0e0e0;
       box-shadow: 0px 1px 4px 0px #0000000d;
       color: #8a92a8;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 13px;
       line-height: 20px;
@@ -1070,6 +1123,15 @@ const SearchList = defineAsyncComponent(
           width: 25px;
           height: 25px;
         }
+
+        &.close-mode {
+          background: #f0f1f4;
+          color: #000; /* رنگ خاکستری */
+
+          &:hover {
+            background: #e0e0e0; /* رنگ خاکستری */
+          }
+        }
       }
       .haditha-search-input {
         height: 56px;
@@ -1094,7 +1156,7 @@ const SearchList = defineAsyncComponent(
 
   .synonymItem {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 14px;
       line-height: 100%;
@@ -1118,7 +1180,7 @@ const SearchList = defineAsyncComponent(
       border: 0.3px solid #d9d9d9;
       background: #f0f1f4;
 
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 12px;
       line-height: 100%;