...

apis/hadithaApi.js

@@ -1,7 +1,7 @@
 export default {
   search: {
     list: "repo/monir/search/@index_key/@search_type/@type_key/@listkey/@field_collapsed/@offset/@limit/@q=none",
-    show: "repo/public/get/byid/@index_key/@id",
+    show: "repo/public/get/byid/@index_key/@id/tbookmark",
     synonym: "synonym/get/words",
     prevNextHadith: "monir/next/@index_key/@vol_id/@parag_order/@step",
     getDataTree: "@appname/book/tree/@offset/@limit/@vol_id/@q"

assets/haditha/font-icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.7158C0 7.87926 7.16344 0.71582 16 0.71582C24.8366 0.71582 32 7.87926 32 16.7158C32 25.5524 24.8366 32.7158 16 32.7158C7.16344 32.7158 0 25.5524 0 16.7158Z" fill="#F0F1F4"/>
+<path d="M11 21.7158L21 11.7158" stroke="#1B2132" stroke-linecap="round"/>
+<path d="M11 11.7158L21 21.7158" stroke="#1B2132" stroke-linecap="round"/>
+</svg>

components/haditha/AutoComplation.vue

@@ -57,6 +57,7 @@ const search_type = ref("normal");
 const type_key = ref("hadith");
 const typeModelValue = ref("normal");
 const typeModelValueFa = ref("");
+// const showclearButton = ref(false);
 
 // If you want to share state across multiple components,
 // you can use the same key in useState. Nuxt will ensure
@@ -168,17 +169,27 @@ const clearSimilar = () => {
 // const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
 //   console.info("onUpdateModel", newVal);
 // };
+// const searchButtonIcon = computed(() => {
+//   return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
+// });
+
+// const handleSearchClearButton = ()=>{
+//   showclearButton.value = true;
+//   sendQuery();
+// }
 
 const onKeyDown = () => {
-  clearTimeout(typingTimer.value);
+  // showclearButton.value = false;
-};
+  // clearTimeout(typingTimer.value);
-const onKeyUp = () => {
-  clearTimeout(typingTimer.value);
-  typingTimer.value = setTimeout(() => {
-    if (props.autoRedirection) sendQuery();
-  }, doneTypingInterval.value);
 };
 
+// const onKeyUp = () => {
+//   clearTimeout(typingTimer.value);
+//   typingTimer.value = setTimeout(() => {
+//     if (props.autoRedirection) sendQuery();
+//   }, doneTypingInterval.value);
+// };
+
 const setType = (type: string) => {
   search_type.value = type;
   sendQuery();
@@ -224,13 +235,14 @@ const sendQuery = async (payload = {}) => {
   return await httpService
     .postRequest(url, payload)
     .then((res) => {
-      // pass res and search query to the parent.
       emit("response-ready", {
         res: res,
         searchQuery: searchTerm.value,
         disableAutoRedirect: true,
       });
 
+      // pass res and search query to the parent.
+
       loading.value = false;
       // check if search term is not empty
       if (searchTerm.value) userSearchHistory.value.add(searchTerm.value); // Add the value to the Set
@@ -238,6 +250,30 @@ const sendQuery = async (payload = {}) => {
       // close the history dropdown menu
       open.value = false;
 
+      // show clear button
+      // if (showclearButton.value) {
+      //   searchTerm.value = "";
+
+      //   emit("response-ready", {
+      //     res: {
+      //       hits:{
+      //         total:0,
+      //         hits:[]
+      //       }
+      //     },
+      //     searchQuery: searchTerm.value,
+      //     disableAutoRedirect: true,
+      //   });
+      // } else {
+      //   emit("response-ready", {
+      //     res: res,
+      //     searchQuery: searchTerm.value,
+      //     disableAutoRedirect: true,
+      //   });
+      // }
+
+      // showclearButton.value = !showclearButton.value;
+
       // store search phrase
       useStorage("searchPhrase", searchTerm.value);
     })
@@ -405,7 +441,6 @@ onMounted(() => {
           @blur="open = false"
           @change="sendQuery"
           @keydown="onKeyDown"
-          @keyup="onKeyUp"
           @keydown.enter="sendQuery"
         >
           <!-- @update:modelValue="onUpdateModel" -->
@@ -417,6 +452,7 @@ onMounted(() => {
         @click.prevent="sendQuery"
         icon="i-haditha-search"
       >
+        <!-- // @click.prevent="handleSearchClearButton" // :icon="searchButtonIcon" -->
         <!-- <UIcon  name="i-lucide-search" /> -->
       </UButton>
       <!-- </client-only> -->
@@ -574,7 +610,7 @@ onMounted(() => {
           {{ state.phrase.label }}
           <UIcon
             v-if="search_type == 'phrase'"
-            @click.self="search_type = 'normal'"
+            @click.self="setType('normal')"
             name="i-haditha-close-bg-circle"
             size="20px"
           >
@@ -765,6 +801,13 @@ onMounted(() => {
       ); */
     }
   }
+  .close-mode {
+    background: #f0f1f4;
+    color: #000; /* رنگ خاکستری */
+    &:hover {
+      background: #e0e0e0; /* رنگ خاکستری */
+    }
+  }
   .haditha-search-input {
     z-index: 0;
 

components/haditha/CardList.vue

@@ -30,146 +30,89 @@ const goToLibraryShow = (item) => {
 </script>
 
 <template>
-  <div class="library-list-contianer">
+  <UCard
-    <div class="page-header flex items-center">
+    v-if="props.list?.length"
-      <span class="title">کتابخانه</span>
+    v-for="(item, index) in props.list"
+    :key="index"
+    variant="solid"
+    :ui="{
+      root: 'ring ring-[white] divide-y divide-[var(--ui-border)] rounded-0 shadow-none bg-transparent library-list-item',
+      header: 'header',
+      body: 'sm:p-0 p-0 bg-transparent',
+      footer: 'footer',
+    }"
+  >
+    <!-- <template #header></template> -->
+
+    <ULink
+      v-if="item?._source?.id"
+      :to="{
+        name: 'hadithaLibraryShow',
+        params: {
+          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"
+      :ui="{
+        leadingIcon: 'text-(--ui-primary)',
+      }"
+    >
       <img
         fit="auto"
         quality="80"
         placeholder
-        src="/img/haditha/haditha-title.svg"
+        src="/img/haditha/sample-bgi.svg"
       />
-    </div>
+      <p class="title">{{ item?._source?.title }}</p>
+      <p class="version">
+        {{ item?._source?.vol_title + item?._source?.vol_num }}
+      </p>
+    </ULink>
 
-    <div
+    <!-- <template #footer> </template> -->
-      class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-5 md:gap-x-28 md:gap-y-12 mx-6"
+  </UCard>
-    >
-      <UCard
-        class="mx-auto"
-        v-if="props.list.length"
-        v-for="(item, index) in props.list"
-        :key="index"
-        variant="solid"
-        :ui="{
-          root: 'ring ring-[white] divide-y divide-[var(--ui-border)] rounded-0 shadow-none bg-transparent library-list-item',
-          header: 'header',
-          body: 'sm:p-0 p-0 bg-transparent',
-          footer: 'footer',
-        }"
-      >
-        <!-- <template #header></template> -->
 
-        <ULink
+  <no-data
-          v-if="item?._source?.id"
+    class="h-full w-full flex flex-col justify-center items-center"
-          :to="{
+    v-else
-            name: 'hadithaLibraryShow',
+  >
-            params: {
+    <img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
-              id: item?._source?.id,
+    <p class="no-data-text">{{ props.noDataText }}</p>
-              slug: item?._source?.title,
+  </no-data>
-            },
-            query: {
-              page_first: item._source.page_first,
-              page_last: item._source.page_last,
-              page_count: item._source.page_count,
-            },
-          }"
-          color="neutral"
-          variant="outline"
-          :ui="{
-            leadingIcon: 'text-(--ui-primary)',
-          }"
-        >
-          <img
-            fit="auto"
-            quality="80"
-            placeholder
-            src="/img/haditha/sample-bgi.svg"
-          />
-          <p class="title">{{ item?._source?.title }}</p>
-          <p class="version">
-            {{ item?._source?.vol_title + item?._source?.vol_num }}
-          </p>
-        </ULink>
-
-        <!-- <template #footer> </template> -->
-      </UCard>
-
-      <no-data
-        class="h-full w-full flex flex-col justify-center items-center"
-        v-else
-      >
-        <img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
-        <p class="no-data-text">{{ props.noDataText }}</p>
-      </no-data>
-    </div>
-  </div>
 </template>
 
 <style scoped>
-.library-list-contianer {
+.library-list-item {
-  margin-top: 10em;
+  width: 140;
-  max-width: 1200px;
+  height: 200;
-  width: 100%;
+  border-radius: 8px;
-  margin: 0 1em;
-  margin-right: auto;
-  margin-left: auto;
-  height: 100%;
 
-  .page-header {
+  .title {
-    margin-bottom: 2em;
+    margin-top: 0.7em;
-    .title {
-      margin-left: 0.4em;
-      font-family: IRANSansX;
-      font-weight: 300;
-      font-size: 24px;
-      line-height: 36px;
-      letter-spacing: 0%;
-      text-align: center;
-
-      color: var(--ui-color-two);
-    }
-  }
-
-  .library-list {
-    /* padding: 1em 1.3em; */
-    height: calc(100dvh - 13.5em);
-    overflow-y: auto;
-    /* margin: 0 24px; */
-
-    .library-list-item {
-      width: 140;
-      height: 200;
-      border-radius: 8px;
-
-      .title {
-        margin-top: 0.7em;
-        font-family: IRANSansX;
-        font-weight: 400;
-        font-size: 13px;
-        line-height: 19.5px;
-        letter-spacing: 0%;
-        text-align: right;
-        color: #444444;
-      }
-
-      .version {
-        font-family: IRANSansX;
-        font-weight: 400;
-        font-size: 10px;
-        line-height: 15px;
-        letter-spacing: 0%;
-        text-align: right;
-        color: #444444;
-      }
-    }
-  }
-  .no-data-text {
     font-family: IRANSansX;
-    font-weight: 300;
+    font-weight: 400;
-    font-size: 16px;
+    font-size: 13px;
-    line-height: 24px;
+    line-height: 19.5px;
     letter-spacing: 0%;
-    text-align: center;
+    text-align: right;
+    color: #444444;
+  }
+
+  .version {
+    font-family: IRANSansX;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 15px;
+    letter-spacing: 0%;
+    text-align: right;
+    color: #444444;
   }
   @media screen and (max-width: 719.99px) {
     .library-list {

components/haditha/NavigationMenu.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { useAuthStore } from "@stores/authStore";
 
+// {
+//     label: "چت بات",
+//     icon: "i-haditha-chat-bot",
+//     to: "/haditha/chat-bot",
+//     slot: "chat-bot",
+//     class: "flex flex-col lg:flex-row justify-center items-center",
+//   },
+
 const items = ref([
   {
     label: "حانه",
@@ -16,13 +24,7 @@ const items = ref([
     slot: "search",
     class: "flex flex-col lg:flex-row justify-center items-center",
   },
-  {
+
-    label: "چت بات",
-    icon: "i-haditha-chat-bot",
-    to: "/haditha/chat-bot",
-    slot: "chat-bot",
-    class: "flex flex-col lg:flex-row justify-center items-center",
-  },
   {
     label: "کتابخانه",
     icon: "i-haditha-library",
@@ -124,7 +126,7 @@ const leftItem = computed(() => [
 
 const isMobile = ref(false);
 const rerenderNavigation = ref(1);
-const { isAuthenticatedGetter } = useAuthStore();
+const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
 
 const setMenu = () => {
   if (isAuthenticatedGetter) {
@@ -150,6 +152,9 @@ const setMenu = () => {
 
 setMenu();
 
+// if(!(isAuthenticatedGetter && isRealUserGetter))
+// items.value = items.value.filter((item) => item.to != "/haditha/favorites");
+
 onMounted(() => {
   if (window?.outerWidth < 991) {
     isMobile.value = true;
@@ -161,7 +166,7 @@ onMounted(() => {
 
 <template>
   <div class="fixed bottom-2 lg:bottom-auto lg:top-2 right-0 left-0">
-    <UContainer class="flex  my-navbar mx-3 lg:mx-auto">
+    <UContainer class="flex my-navbar mx-3 lg:mx-auto">
       <!-- :disableHoverTrigge="isMobile" -->
       <UNavigationMenu
         :key="rerenderNavigation"

components/haditha/search-page/SearchList.vue

@@ -1,4 +1,6 @@
 <script setup>
+import hadithaApi from "@haditha/apis/hadithaApi";
+const httpService = useNuxtApp()["$http"];
 const props = defineProps({
   list: {
     default() {
@@ -16,6 +18,7 @@ const props = defineProps({
   },
 });
 const router = useRouter();
+const route = useRoute();
 
 // const modal = useModal();
 // const isModalOpen = ref(false);
@@ -23,11 +26,21 @@ const router = useRouter();
 function openModal(selectedItem) {
   // modal.open(SearchShow, { title: "Welcome" });
   // isModalOpen.value = true;
+
+  const slug = selectedItem?._source?.content
+    .split(" ")
+    .filter((v, i) => i < 4)
+    .join("-");
+
   router.push({
     name: "hadithaSearchShow",
     params: {
-      id: selectedItem._id,
+      id: selectedItem?._source?.id,
-      slug: "no-slug",
+      slug: slug,
+    },
+    query: {
+      firstPage: 1,
+      page_count: props.total,
     },
   });
 }
@@ -45,6 +58,20 @@ function openModal(selectedItem) {
 // const SearchShow = defineAsyncComponent(() =>
 //   import("@haditha/components/haditha/search-page/SearchShow.vue")
 // );
+const removeFromFavorites = async (item = {}, index = 0) => {
+  let url = repoUrl() + hadithaApi.favorite.deleteByRefid;
+  url = url.replace("{{data_type}}", "bookmark");
+  url = url.replace("{{index_key}}", "dhparag");
+  url = url.replace("{{ref_id}}", item._id);
+
+  const formData = {
+    ref_id: item._id,
+    title: item?._source?.title,
+  };
+  httpService.postRequest(url, formData).then((res) => {
+    // this.updateListAnswer(index, "tbookmark", 0);
+  });
+};
 </script>
 
 <template>
@@ -61,20 +88,43 @@ function openModal(selectedItem) {
         v-for="(item, index) in props.list"
         :key="index"
       >
-        <p @click="openModal(item)" class="from-person">
+        <div class="flex justify-between mt-4 mb-2">
-          {{
+          <a
-            item?._source?.meta?.hadith_masoum ??
+            :href="`/haditha/search/${item?._source?.id}/${
-            item?._source?.meta?.hadith_sanad ??
+              item?._source?.meta?.hadith_masoum ??
-            "بدون عنوان"
+              item?._source?.meta?.hadith_sanad
-          }}
+            }`"
-        </p>
+            @click.prevent="openModal(item)"
-        <p @click="openModal(item)" class="arabic-text">
+            class="from-person block"
+          >
+            {{
+              item?._source?.meta?.hadith_masoum ??
+              item?._source?.meta?.hadith_sanad
+            }}
+          </a>
+          <UButton
+            v-if="route.name == 'hadithaFavorites'"
+            @click="removeFromFavorites(item)"
+            variant="ghost"
+            color="error"
+            class="copy-btn"
+            label="حذف"
+          />
+        </div>
+
+        <a
+          @click.prevent="openModal(item)"
+          class="arabic-text block"
+          :href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
+        >
           {{ item?._source?.content_ar }}
-        </p>
+        </a>
-        <p
+        <a
-          class="persian-text"
+          @click.prevent="openModal(item)"
+          :href="`/haditha/search/${item?._source?.id}/${item?._source?.content}`"
+          class="persian-text block"
           v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
-        ></p>
+        ></a>
         <div class="flex justify-end">
           <p class="reference">
             {{ item?._source?.address?.vol_title }}، صفحه
@@ -195,7 +245,7 @@ function openModal(selectedItem) {
       .reference {
         height: 24px;
         gap: 4px;
-        padding-top: 0.25em;  /*4px*/
+        padding-top: 0.25em; /*4px*/
         padding-right: 0.5em; /*8px*/
         padding-bottom: 0.25em; /*4px*/
         padding-left: 0.5em; /*8px*/
@@ -224,7 +274,7 @@ function openModal(selectedItem) {
     font-family: IRANSansX;
     font-weight: 300;
     font-size: 1rem;
-    line-height: 1.5rem;  /*24px*/
+    line-height: 1.5rem; /*24px*/
     letter-spacing: 0%;
     text-align: center;
   }
@@ -241,7 +291,7 @@ function openModal(selectedItem) {
   box-shadow: 0px 8px 20px 0px #0000001a;
   background: #ffffff;
   width: 100%;
-  max-width: 720px;  /*18px*/
+  max-width: 720px; /*18px*/
   border-radius: 16px; /*18px*/
   gap: 8px;
   border-width: 0.3px;
@@ -304,4 +354,28 @@ function openModal(selectedItem) {
 .modal-overlay {
   background: #00000033;
 }
+.copy-btn {
+  padding: 0.2em 1em;
+
+  /* width: 44px; */
+  /* height: 24px; */
+  gap: 4px;
+  border-radius: 6px;
+  border-width: 0.5px;
+  padding-top: 4px;
+  padding-right: 12px;
+  padding-bottom: 4px;
+  padding-left: 12px;
+  /* background: #ffffff; */
+  /* border: 0.5px solid #d9d9d9; */
+
+  font-family: IRANSansX;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  text-align: right;
+
+  /* color: #a71111; */
+}
 </style>

pages/haditha/library/index.vue

@@ -1,5 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import hadithaApi from "@haditha/apis/hadithaApi";
+import headLinks from "@haditha/json/haditha/headLinks";
+import headMetas from "@haditha/json/haditha/headMetas";
+import { useInfiniteScroll } from "@vueuse/core";
 
 definePageMeta({
   layout: false,
@@ -10,153 +13,99 @@ 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",
-    },
-  ],
 });
 
 // #region refs
-const loading = ref(false);
+const el = useTemplateRef<HTMLElement>("el");
 const httpService = useNuxtApp()["$http"];
-
+const route = useRoute();
+const page = ref(Number(route.query.page) || 1);
 // #endregion refs
 
 // #region reactive
 const state = reactive({
-  list: [],
+  pagination: {
-  counts: [],
+    offset: 0,
-  totalCounts: [],
+    limit: 10,
-  libraryList: new Array(20).fill(0),
+    page: 1,
+    pages: 1,
+  },
 });
-// #endregion reactive
 
 // #region methods
 
 const getLibraryList = async (dataType = "bookmark") => {
-  if (loading.value) return;
-
-  loading.value = true;
-
   let url = repoUrl() + hadithaApi.library.list;
   url = url.replace("@field_collapsed", "normal");
-  url = url.replace("@offset", 0);
+  url = url.replace("@offset", state.pagination.offset);
-  url = url.replace("@limit", 20);
+  url = url.replace("@limit", state.pagination.limit);
   url = url.replace("@q", "none");
 
-  return await httpService
+  return await httpService.postRequest(url);
-    .postRequest(url)
-    .then((res) => {
-      state.libraryList = res.hits.hits;
-      console.info(state.libraryList)
-    })
-    .catch((err) => {
-      console.info(err);
-      loading.value = false;
-    })
-    .finally(() => (loading.value = false));
 };
-// #endregion methods
 
-// #region hooks
+// Server-side initial load
-onMounted(() => {
+const { data: initialItems } = await useAsyncData(
-  getLibraryList();
+  "libraryList",
-});
+  () => getLibraryList(),
+  {
+    transform: (data) => data.hits.hits,
+    getCachedData: (key) => {
+      return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
+    },
+    watch: [page],
+  }
+);
+
+// Client-side state
+const loadedItems = ref([]);
+const loading = ref(false);
+const hasMore = ref(true);
+const loader = ref(null);
+const totalPages = ref(10); // Set based on your API response
+
+// Client-side infinite scroll
+useInfiniteScroll(
+  el,
+  async () => {
+    if (!hasMore.value || loading.value) return;
+
+    loading.value = true;
+    try {
+      // const nextPage = page.value + 1;
+      await getLibraryList().then((res) => {
+        const hits = res.hits.hits;
+
+        if (hits.length) {
+          loadedItems.value.push(...hits);
+          state.pagination.offset += state.pagination.limit;
+        } else {
+          hasMore.value = false;
+        }
+      });
+    } finally {
+      loading.value = false;
+    }
+  },
+  { distance: 100 }
+);
 // #endregion methods
 
 // components declaration
-const HadithaLayout = defineAsyncComponent(() =>
+const HadithaLayout = defineAsyncComponent(
-  import("@haditha/layouts/HadithaLayout.vue")
+  () => import("@haditha/layouts/HadithaLayout.vue")
 );
-const NavigationMenu = defineAsyncComponent(() =>
+const NavigationMenu = defineAsyncComponent(
-  import("@haditha/components/haditha/NavigationMenu.vue")
+  () => import("@haditha/components/haditha/NavigationMenu.vue")
 );
-const CardList = defineAsyncComponent(() =>
+const CardList = defineAsyncComponent(
-  import("@haditha/components/haditha/CardList.vue")
+  () => import("@haditha/components/haditha/CardList.vue")
 );
 </script>
 
@@ -165,11 +114,30 @@ const CardList = defineAsyncComponent(() =>
     <div class="search-box-container h-full flex flex-col justify-center">
       <navigation-menu></navigation-menu>
 
-      <card-list
+      <div class="library-list-contianer">
-        no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
+        <div class="page-header flex items-center">
-        no-data-icon="/img/haditha/no-data.png"
+          <span class="title">کتابخانه</span>
-        :list="state.libraryList"
+          <img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
-      ></card-list>
+        </div>
+
+        <div ref="el" class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
+          <!-- Client-side loaded content -->
+          <card-list
+            v-if="loadedItems.length"
+            no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
+            no-data-icon="/img/haditha/no-data.png"
+            :list="loadedItems"
+          ></card-list>
+
+          <!-- Server-rendered initial content -->
+          <card-list
+            v-else
+            no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
+            no-data-icon="/img/haditha/no-data.png"
+            :list="initialItems"
+          ></card-list>
+        </div>
+      </div>
     </div>
   </HadithaLayout>
 </template>
@@ -178,6 +146,44 @@ const CardList = defineAsyncComponent(() =>
 .search-box-container {
   padding-top: 8.3em;
   background: #f7fffd;
+
+  .library-list-contianer {
+    margin-top: 10em;
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 1em;
+    margin-right: auto;
+    margin-left: auto;
+
+    .page-header {
+      margin-bottom: 2em;
+      .title {
+        margin-left: 0.4em;
+        font-family: IRANSansX;
+        font-weight: 300;
+        font-size: 24px;
+        line-height: 36px;
+        letter-spacing: 0%;
+        text-align: center;
+
+        color: var(--ui-color-two);
+      }
+    }
+
+    .library-list {
+      /* padding: 1em 1.3em; */
+      height: calc(100dvh - 13.5em);
+      overflow-y: auto;
+    }
+    .no-data-text {
+      font-family: IRANSansX;
+      font-weight: 300;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0%;
+      text-align: center;
+    }
+  }
 }
 
 @media screen and (max-width: 719.99px) {

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

@@ -132,6 +132,7 @@ const route = useRoute();
 const router = useRouter();
 const loading = ref(false);
 const httpService = useNuxtApp()["$http"];
+const toast = useToast();
 
 const state = reactive({
   selectedItem: {} as HadithResponseShowModel,
@@ -174,7 +175,13 @@ const goToTheChatbot = () => {
 };
 
 const handleFavorite = async () => {
-  addToFavorites(state.selectedItem);
+  if (state.selectedItem?._source?.tbookmark) {
+    await removeFromFavorites(state.selectedItem);
+    state.selectedItem._source.tbookmark = false;
+  } else {
+    await addToFavorites(state.selectedItem);
+    state.selectedItem._source.tbookmark = true;
+  }
 
   // // add
   // if (!state.selectedItem._source.tbookmark) {
@@ -196,6 +203,21 @@ const addToFavorites = async (item = {}) => {
   };
   httpService.postRequest(url, formData).then((res) => {
     // this.updateListAnswer(index, "tbookmark", 1);
+
+    try {
+      toast.add({
+        title: "انجام شد.",
+        description: "به نشان شده ها افزوده شد",
+        color: "success",
+      });
+    } catch (err) {
+      console.log(err.message);
+      toast.add({
+        title: "انجام شد.",
+        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
+        color: "error",
+      });
+    }
   });
 };
 
@@ -211,6 +233,21 @@ const removeFromFavorites = async (item = {}, index = 0) => {
   };
   httpService.postRequest(url, formData).then((res) => {
     // this.updateListAnswer(index, "tbookmark", 0);
+
+    try {
+      toast.add({
+        title: "انجام شد.",
+        description: "از لیست نشان شده ها حذف شد",
+        color: "success",
+      });
+    } catch (err) {
+      console.log(err.message);
+      toast.add({
+        title: "انجام شد.",
+        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
+        color: "error",
+      });
+    }
   });
 };
 
@@ -220,8 +257,8 @@ 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", state.selectedItem?._source?.address?.vol_id);
-  url = url.replace("@parag_order", state.selectedItem._source.parag_order);
+  url = url.replace("@parag_order", state.selectedItem?._source?.parag_order);
   url = url.replace("@step", prevNextIndicator);
 
   httpService
@@ -305,14 +342,19 @@ const handlePagination = (prevNextIndicator: string) => {
                     <span class="section-title">
                       {{
                         state.selectedItem?._source?.meta?.hadith_masoum ??
-                        "بدون عنوان"
+                        state.selectedItem?._source?.meta?.hadith_sanad
                       }}
                     </span>
 
                     <UButton
+                      v-if="
+                        state.selectedItem?._source?.meta?.hadith_masoum
+                          ?.length ||
+                        state.selectedItem?._source?.meta?.hadith_sanad
+                      "
                       @click="
                         copyTextToClipboard(
-                          state.selectedItem?._source?.meta?.hadith_masoum ?? ''
+                          state.selectedItem?._source?.content_ar ?? ''
                         )
                       "
                       variant="ghost"
@@ -320,8 +362,13 @@ const handlePagination = (prevNextIndicator: string) => {
                       label="کپی"
                     />
                   </div>
-                  <div class="arabic-text">
+                  <div
-                    <p>بدون متن عربی</p>
+                    v-if="state.selectedItem?._source?.content_ar?.length"
+                    class="arabic-text"
+                  >
+                    <p>
+                      {{ state.selectedItem?._source?.content_ar ?? "" }}
+                    </p>
                   </div>
                 </div>
 
@@ -345,7 +392,7 @@ const handlePagination = (prevNextIndicator: string) => {
                   <p class="from">
                     {{
                       state.selectedItem?._source?.meta?.hadith_masoum ??
-                      "بدون عنوان"
+                      state.selectedItem?._source?.meta?.hadith_sanad
                     }}:
                   </p>
                   <p
@@ -356,13 +403,16 @@ const handlePagination = (prevNextIndicator: string) => {
 
                 <div class="separator"></div>
 
-                <div class="text-description-section">
+                <div
+                  v-if="state.selectedItem?._source?.description?.length"
+                  class="text-description-section"
+                >
                   <div class="section-header">
                     <span class="section-title"> شرح </span>
                     <UButton
                       @click="
                         copyTextToClipboard(
-                          state.selectedItem?._source?.content
+                          state.selectedItem?._source?.description
                         )
                       "
                       variant="ghost"
@@ -372,14 +422,17 @@ const handlePagination = (prevNextIndicator: string) => {
                   </div>
                   <p
                     class="description-item"
-                    v-html="state.selectedItem?._source?.content"
+                    v-html="state.selectedItem?._source?.description"
                   ></p>
                 </div>
 
                 <div class="separator"></div>
 
                 <div class="text-description-section">
-                  <div class="text-sm mb-1">
+                  <div
+                    v-if="state.selectedItem?._source?.ai_keywords?.length"
+                    class="text-sm mb-1"
+                  >
                     <span class=""> کلیدواژگان: </span>
                     <span
                       class="me-1 text-gray-400 font-light"
@@ -392,7 +445,10 @@ const handlePagination = (prevNextIndicator: string) => {
                     </span>
                   </div>
 
-                  <div class="text-sm">
+                  <div
+                    class="text-sm"
+                    v-if="state.selectedItem?._source?.ai_classes?.length"
+                  >
                     <span class=""> دسته بندی ها: </span>
                     <span
                       class="me-1 text-gray-400 font-light"
@@ -413,7 +469,7 @@ const handlePagination = (prevNextIndicator: string) => {
 
       <div class="body-footer">
         <div class="mt-5 z-2">
-          <div class="flex justify-between actions">
+          <!-- <div class="flex justify-between actions">
             <UButton
               disabled
               class="similar-btn"
@@ -421,8 +477,8 @@ const handlePagination = (prevNextIndicator: string) => {
               label="مشابه"
               color="neutral"
               variant="outline"
+              @click.prevent="goToTheSearch('similar')"
             />
-            <!-- @click.prevent="goToTheSearch('similar')" -->
             <UButton
               class="explore-btn"
               trailing-icon="i-haditha-explore"
@@ -430,7 +486,7 @@ const handlePagination = (prevNextIndicator: string) => {
               variant="solid"
               @click.prevent="goToTheChatbot"
             />
-          </div>
+          </div> -->
           <div class="flex justify-between pagination">
             <UButton
               @click="handlePagination('-1')"

pages/haditha/search/index.vue

@@ -90,7 +90,7 @@ const SearchList = defineAsyncComponent(() =>
           </div>
           <div
             v-if="searchQuery?.length == 0"
-            class="flex justify-center flex-col items-center"
+            class="flex justify-center flex-col items-center mt-10"
           >
             <img
               fit="auto"
@@ -100,7 +100,7 @@ const SearchList = defineAsyncComponent(() =>
             />
             <div class="title">
               کاوش با
-              <span class="badge-style"> هوش مصنوعی </span>
+              <span class="badge-style mx-1">هوش مصنوعی</span>
               در احادیث اسلامی
             </div>
           </div>