From 2a5f878608e9cc9e508ab4de70337c2673344596 Mon Sep 17 00:00:00 2001
From: mustafa-rezae <mustafa.rezae01@gmail.com>
Date: Tue, 11 Mar 2025 13:45:25 +0330
Subject: [PATCH] Debug and refactor

---
 apis/chatApi.js                             |   8 +
 assets/chat/scss/chat.scss                  |   7 +-
 assets/chat/scss/mixin.scss                 | 174 +++++++++
 assets/chat/scss/placeholder.scss           | 225 ++++++++++++
 components/chat/components/Group.vue        | 380 +++++++++-----------
 components/chat/components/MobileFooter.vue |  14 +-
 layouts/default.vue                         | 241 -------------
 layouts/readme.md                           |   5 -
 pages/Chat.vue                              | 158 ++++++++
 pages/chat/index.vue                        |  44 ---
 pages/chat/pages/Chat.vue                   | 181 ----------
 pages/index.vue                             |  46 +++
 stores/chatStore.ts                         | 221 ++++++++++++
 13 files changed, 1019 insertions(+), 685 deletions(-)
 create mode 100644 assets/chat/scss/mixin.scss
 create mode 100644 assets/chat/scss/placeholder.scss
 delete mode 100644 layouts/default.vue
 delete mode 100644 layouts/readme.md
 create mode 100644 pages/Chat.vue
 delete mode 100644 pages/chat/index.vue
 delete mode 100644 pages/chat/pages/Chat.vue
 create mode 100644 pages/index.vue
 create mode 100644 stores/chatStore.ts

diff --git a/apis/chatApi.js b/apis/chatApi.js
index 6fa6c18..473edb2 100644
--- a/apis/chatApi.js
+++ b/apis/chatApi.js
@@ -22,6 +22,14 @@ export default {
     leave: 'group/ed/leave',
 
   },
+  forms:{
+    // get:'keyvalue/forms/get',
+    // list:'keyvalue/forms/list',
+    // add:'keyvalue/forms/add',
+    // edit:'keyvalue/forms/edit',
+    // delete:'keyvalue/forms/delete',
+    groupTypes:'entity/types/list'
+  },
   lobbies: {
     list: 'group/ve/get/lobby/1',
     create:  'group/ed/set',
diff --git a/assets/chat/scss/chat.scss b/assets/chat/scss/chat.scss
index 3b8e9f4..1932ce2 100644
--- a/assets/chat/scss/chat.scss
+++ b/assets/chat/scss/chat.scss
@@ -1,5 +1,5 @@
-@import "../../common/scss/mixin";
-@import "../../common/scss/placeholder";
+@import "./mixin.scss";
+@import "./placeholder";
 
 // @import "./javad/list-mixins";
 // @import "./javad/list-variables";
@@ -50,7 +50,6 @@
           color: #bdc6d0;
         }
       }
-     
 
       @import "./components/group/group";
     }
@@ -70,7 +69,7 @@
   opacity: 0.8;
 
   .title {
-    font-family: 'sahel-semi-bold';
+    font-family: "sahel-semi-bold";
     font-size: 1.3rem;
   }
 }
diff --git a/assets/chat/scss/mixin.scss b/assets/chat/scss/mixin.scss
new file mode 100644
index 0000000..e4ee57c
--- /dev/null
+++ b/assets/chat/scss/mixin.scss
@@ -0,0 +1,174 @@
+
+@mixin textOverflow($maxWidth) {
+  max-width: $maxWidth;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  // &:hover {
+  //   overflow:visible;
+  // }
+}
+
+@mixin transition($all) {
+  -webkit-transition: $all;
+  -ms-transition: $all;
+  transition: $all;
+}
+
+@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@mixin transform($transforms) {
+  -webkit-transform: $transforms;
+  -moz-transform: $transforms;
+  -ms-transform: $transforms;
+  transform: $transforms;
+}
+
+@mixin transition($all) {
+  -webkit-transition: $all;
+  -ms-transition: $all;
+  transition: $all;
+}
+@mixin lineclamp($num) {
+  display: -webkit-box;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+@mixin hexagon($color, $width, $height) {
+  background: $color;
+  position: relative;
+  width: $width;
+  height: $height;
+  &::before {
+    content: "";
+    position: absolute;
+    top: -($height / 2) + 1;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-left: ($width / 2) solid transparent;
+    border-right: $width / 2 solid transparent;
+    border-bottom: $height / 2 solid $color;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -($height / 2) + 1;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-left: $width / 2 solid transparent;
+    border-right: $width / 2 solid transparent;
+    border-top: $height / 2 solid $color;
+  }
+}
+
+@mixin section-backgrounds($pic-address) {
+  //background-image: url($pic-address);
+  background-size: cover;
+  position: relative;
+  background-position: center;
+  &::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("../img/dot-pattern.png");
+    z-index: 1;
+  }
+  &::after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($color: #000000, $alpha: 0.15);
+    z-index: 1;
+  }
+}
+%horizontal-center {
+  @include flexbox;
+  align-items: center;
+}
+
+%flex-center {
+  @include flexbox;
+  align-items: center;
+  justify-content: center;
+}
+
+%normal-transition {
+  @include transition(all 0.3s ease-in-out);
+}
+
+%cover-link {
+  position: relative;
+  .cover-link {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+
+//mixin
+
+// @mixin bordersolid-w-t-pos($width, $type, $color, $bt: null) {
+//     @if $bt {
+//       #{$bt}: $width $type $color;
+//     } @else {
+//       border: $width $type $color;
+//     }
+//   }
+
+//mixin - border
+
+@mixin border-transparent($width) {
+  border: $width solid transparent;
+}
+@mixin border($width, $color) {
+  border: $width solid $color;
+}
+@mixin border-top($width, $color) {
+  border-top: $width solid $color;
+}
+@mixin border-bottom($width, $color) {
+  border-bottom: $width solid $color;
+}
+
+@mixin border-left($width, $color) {
+  border-left: $width solid $color;
+}
+@mixin border-right($width, $color) {
+  border-right: $width solid $color;
+}
+// End - mixin - border
+
+@mixin btn-primary {
+  @extend %simple-btn;
+  border-color: var(--color-1);
+  border-radius: 20px;
+  min-width: 64px;
+  font-size: 14px;
+  height: 32px;
+}
+
+@mixin font-icon-background-color($color) {
+  background: $color;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/assets/chat/scss/placeholder.scss b/assets/chat/scss/placeholder.scss
new file mode 100644
index 0000000..531250e
--- /dev/null
+++ b/assets/chat/scss/placeholder.scss
@@ -0,0 +1,225 @@
+
+%horizontal-center {
+  @include flexbox;
+  align-items: center;
+}
+
+%flex-center {
+  @include flexbox;
+  align-items: center;
+  justify-content: center;
+}
+
+%normal-transition {
+  @include transition(all 0.3s ease-in-out);
+}
+
+%cover-link {
+  position: relative;
+
+  .cover-link {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 3;
+  }
+}
+
+%overlay-position {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+}
+
+%fixed-images {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+}
+
+%pic-before-hover {
+  &::before {
+    content: " ";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: all 0.3s ease-in-out;
+    background: radial-gradient(
+                    circle,
+                    rgba(0, 0, 0, 0) 0%,
+                    rgba(0, 0, 0, 0.2413165949973739) 50%,
+                    rgba(0, 0, 0, 0.4514006286108193) 100%
+    );
+    opacity: 0;
+    z-index: 2;
+  }
+}
+
+%simple-input {
+  border: 2px solid #f1f1f1;
+  color: var(--color-2);
+  font-size: 18px;
+  height: 48px;
+  outline: none;
+  align-items: center;
+  border-radius: 10px;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+%simple-btn {
+  min-width: 112px;
+  height: 48px;
+  border: 2px solid #f1f1f1;
+  color: var(--color-1);
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: auto;
+  background: unset;
+  border-radius: 10px;
+  transition: all 0.5s ease-in-out;
+  text-align: left;
+
+  &:hover {
+    border-color: var(--color-1);
+  }
+
+  &:disabled {
+    filter: grayscale(1);
+    opacity: 0.7;
+    background-color: #eee;
+  }
+}
+
+%pastil-color {
+  .color-1:hover {
+    a {
+      border-color: #00b6e3;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .active.color-1 {
+    background-color: #e8fcff;
+
+    a {
+      border-color: #00b6e3;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .color-2:hover {
+    a {
+      border-color: #b03bd9;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#b03bd9 0%, #dcbbff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .active.color-2 {
+    background-color: #fef3ff;
+
+    a {
+      border-color: #b03bd9;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#b03bd9 0%, #dcbbff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .color-3:hover {
+    a {
+      border-color: #fb0;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#fb0 0%, #ffdd81 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .active.color-3 {
+    background-color: #fffbe1;
+
+    a {
+      border-color: #fb0;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#fb0 0%, #ffdd81 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .color-4:hover {
+    a {
+      border-color: #39b778;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#39b778 0%, #88f57c 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .active.color-4 {
+    background-color: #e7fce7;
+
+    a {
+      border-color: #39b778;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#39b778 0%, #88f57c 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .active.color-5 {
+    background-color: #e7fce7;
+
+    a {
+      border-color: #c1d4da;
+    }
+
+    i {
+      background: -webkit-linear-gradient(#c1d4da 0%, #e2e8ef 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
diff --git a/components/chat/components/Group.vue b/components/chat/components/Group.vue
index 4208c09..38188cc 100644
--- a/components/chat/components/Group.vue
+++ b/components/chat/components/Group.vue
@@ -223,7 +223,7 @@
         class="d-flex align-items-center align-items-center border-bottom mb-3"
         v-if="isGroupFilterActive"
       >
-        <multiselect
+        <USelectMenu
           v-model="selectedGroupFilter"
           class="mb-3"
           id="group-filter"
@@ -231,7 +231,7 @@
           placeholder="فیلتر گروه ها"
           label="title"
           :multiple="true"
-          :options="groupfilters"
+          :items="groupfilters"
           :allow-empty="true"
           :searchable="true"
           :options-limit="300"
@@ -247,14 +247,14 @@
           :clear-on-select="false"
           :preserve-search="true"
         >
-          <div slot="selection" slot-scope="{ values, search, isOpen }"
-            ><span
+          <div slot="selection" slot-scope="{ values, search, isOpen }">
+            <span
               class="multiselect__single"
               v-if="values.length"
               v-show="!isOpen"
               >{{ values.length }} فیلتر</span
-            ></div
-          >
+            >
+          </div>
           <div slot="noResult" slot-scope="{ values, search, isOpen }">
             چیزی یافت نشد.
           </div>
@@ -281,7 +281,7 @@
               <span class="option__title">{{ props.option.lable }}</span>
             </div>
           </div> -->
-        </multiselect>
+        </USelectMenu>
 
         <!-- <button
           @click="showGroupFilter()"
@@ -314,7 +314,7 @@
               >
                 <div class="group-row enable-hover">
                   <div class="group-picture-container">
-                    <context-menu
+                    <!-- <context-menu
                       height="auto"
                       maxHeight="13em"
                       dataOffset="0,0"
@@ -326,8 +326,7 @@
                       @remove-item="removeItem(groupItem)"
                       @other="makeLink(groupItem)"
                     >
-                      <!-- @generate-invite-post="openCreateForm('privates', groupItem)" -->
-                    </context-menu>
+                    </context-menu> -->
 
                     <img
                       class="group-picture"
@@ -393,7 +392,7 @@
               >
                 <div class="group-row enable-hover">
                   <div class="group-picture-container">
-                    <context-menu
+                    <!-- <context-menu
                       height="auto"
                       maxHeight="13em"
                       dataOffset="0,0"
@@ -407,7 +406,7 @@
                       @join-to-group="openGroupSearchForm('groups', groupItem)"
                       @other="openInvitePostModal(groupItem)"
                     >
-                    </context-menu>
+                    </context-menu> -->
 
                     <img
                       class="group-picture"
@@ -468,13 +467,14 @@
 
             <div v-else-if="$route.name == 'unReads'">
               <div
+                v-if="groups.length"
                 class="group-item unReads"
                 v-for="(groupItem, index) in groups"
                 :key="index"
               >
                 <div class="group-row">
                   <div class="group-picture-container">
-                    <context-menu
+                    <!-- <context-menu
                       height="auto"
                       maxHeight="13em"
                       dataOffset="0,0"
@@ -487,7 +487,7 @@
                       @edit-item="editItem(groups, groupItem, index)"
                       @other="makeLink(groupItem)"
                     >
-                    </context-menu>
+                    </context-menu> -->
 
                     <img
                       class="group-picture"
@@ -533,7 +533,7 @@
                           <svg class="icon icon-Component-112--1">
                             <use xlink:href="#icon-Component-112--1"></use>
                           </svg>
-                          {{ groupItem.seen_messages.count }}
+                          {{ groupItem.seen_messages?.count }}
                         </button>
 
                         <!-- replay info -->
@@ -602,7 +602,7 @@
                       :aria-controls="'collapse' + key"
                     >
                       <div class="group-picture-container">
-                        <context-menu
+                        <!-- <context-menu
                           height="auto"
                           maxHeight="13em"
                           v-if="isGroupAdmin(lobby)"
@@ -616,7 +616,7 @@
                           @edit-item="editItem(groups, lobby, key)"
                           @other="makeLink(lobby)"
                         >
-                        </context-menu>
+                        </context-menu> -->
 
                         <img
                           class="group-picture"
@@ -730,7 +730,7 @@
                             :class="{ 'enable-hover': isGroupAdmin(group) }"
                           >
                             <div class="group-picture-container">
-                              <context-menu
+                              <!-- <context-menu
                                 height="auto"
                                 maxHeight="13em"
                                 v-if="isGroupAdmin(group)"
@@ -743,7 +743,7 @@
                                 @edit-item="editItem(groups, group, j)"
                                 @remove-item="removeItem(group)"
                               >
-                              </context-menu>
+                              </context-menu> -->
 
                               <img
                                 class="group-picture"
@@ -872,12 +872,12 @@
       <div v-if="showUserSearchForm">
         <div class="form-group">
           <label for="users">انتخاب کاربر: </label>
-          <multiselect
+          <USelectMenu
             id="users"
             track-by="user_id"
             placeholder="جستجوی..."
             :show-labels="false"
-            :options="foundUsers"
+            :items="foundUsers"
             :searchable="true"
             :internal-search="false"
             :clear-on-select="false"
@@ -915,7 +915,7 @@
                 >Oops! No elements found. Consider changing the search
                 query.</span
               > -->
-          </multiselect>
+          </USelectMenu>
         </div>
       </div>
 
@@ -923,12 +923,12 @@
       <div v-if="showGroupSearchForm">
         <div class="form-group">
           <label for="add-member-group">جستجوی گروه: </label>
-          <multiselect
+          <USelectMenu
             id="add-member-group"
             track-by="id"
             label="title"
             placeholder="جستجوی..."
-            :options="foundGroups"
+            :items="foundGroups"
             :searchable="true"
             :internal-search="false"
             :clear-on-select="false"
@@ -941,7 +941,7 @@
             @select="addGroupToSelectedGroup"
             @close="resetFoundGroups"
           >
-          </multiselect>
+          </USelectMenu>
         </div>
       </div>
 
@@ -953,7 +953,7 @@
         <div v-if="formType == 'lobbies'" class="form-group">
           <label for="exampleFormControlTextarea1">انتخاب گروه: </label>
           <div class="d-flex align-items-center">
-            <multiselect
+            <USelectMenu
               :allow-empty="true"
               :searchable="true"
               :close-on-select="true"
@@ -962,7 +962,7 @@
               track-by="id"
               placeholder="انتخاب تالار"
               v-model="form.parent"
-              :options="groups"
+              :items="groups"
               :hide-selected="false"
               :limit-text="
                 (count) => {
@@ -971,7 +971,7 @@
               "
               :max-height="350"
             >
-            </multiselect>
+            </USelectMenu>
             <div class="dropdown create-group-inner-form">
               <button
                 type="button"
@@ -1032,7 +1032,7 @@
           class="d-flex align-items-center align-items-center border-bottom mb-3"
           v-if="isGroupFilterActive"
         >
-          <multiselect
+          <USelectMenu
             v-model="selectedGroupFilter"
             class="mb-3"
             id="group-filter"
@@ -1040,7 +1040,7 @@
             placeholder="فیلتر گروه ها"
             label="title"
             :multiple="true"
-            :options="groupfilters"
+            :items="groupfilters"
             :allow-empty="true"
             :searchable="true"
             :options-limit="300"
@@ -1056,14 +1056,14 @@
             :clear-on-select="false"
             :preserve-search="true"
           >
-            <div slot="selection" slot-scope="{ values, search, isOpen }"
-              ><span
+            <div slot="selection" slot-scope="{ values, search, isOpen }">
+              <span
                 class="multiselect__single"
                 v-if="values.length"
                 v-show="!isOpen"
                 >{{ values.length }} فیلتر</span
-              ></div
-            >
+              >
+            </div>
             <div slot="noResult" slot-scope="{ values, search, isOpen }">
               چیزی یافت نشد.
             </div>
@@ -1090,7 +1090,7 @@
               <span class="option__title">{{ props.option.lable }}</span>
             </div>
           </div> -->
-          </multiselect>
+          </USelectMenu>
 
           <!-- <button
           @click="showGroupFilter()"
@@ -1160,12 +1160,12 @@
           <div v-if="showAddUserForm">
             <div class="form-group">
               <label for="users">جستجوی کاربر: </label>
-              <multiselect
+              <USelectMenu
                 id="users"
                 track-by="user_id"
                 placeholder="جستجوی..."
                 :show-labels="false"
-                :options="foundUsers"
+                :items="foundUsers"
                 :searchable="true"
                 :internal-search="false"
                 :clear-on-select="false"
@@ -1183,7 +1183,7 @@
                 @select="addUserToGroup"
                 @close="resetFoundUsers"
               >
-              </multiselect>
+              </USelectMenu>
             </div>
           </div>
         </div>
@@ -1204,45 +1204,47 @@
             class="image-uploader-container"
             :class="{ 'hide-preview': hasImage }"
           >
-            <image-uploader
-              ref="file-uploader"
-              :preview="true"
-              :debug="1"
-              :maxWidth="300"
-              :maxHeight="300"
-              :maxSize="2"
-              :quality="1"
-              :autoRotate="true"
-              outputFormat="file"
-              accept="image/*"
-              :className="['fileinput', { 'fileinput--loaded': hasImage }]"
-              :capture="false"
-              @input="setImage"
-            >
-              <label class="upload-label" for="fileInput" slot="upload-label">
-                <img
-                  v-if="
-                    form.avatar?.length &&
-                    (getFileExtension(form.avatar) == 'png' ||
-                      getFileExtension(form.avatar) == 'jpg' ||
-                      getFileExtension(form.avatar) == 'jpeg')
-                  "
-                  :src="form.avatar"
-                  class="img-fluid"
-                  :alt="form.avatar"
-                />
+            <client-only>
+              <ImageCropper
+                ref="file-uploader"
+                :preview="true"
+                :debug="1"
+                :maxWidth="300"
+                :maxHeight="300"
+                :maxSize="2"
+                :quality="1"
+                :autoRotate="true"
+                outputFormat="file"
+                accept="image/*"
+                :className="['fileinput', { 'fileinput--loaded': hasImage }]"
+                :capture="false"
+                @input="setImage"
+              >
+                <label class="upload-label" for="fileInput" slot="upload-label">
+                  <img
+                    v-if="
+                      form.avatar?.length &&
+                      (getFileExtension(form.avatar) == 'png' ||
+                        getFileExtension(form.avatar) == 'jpg' ||
+                        getFileExtension(form.avatar) == 'jpeg')
+                    "
+                    :src="form.avatar"
+                    class="img-fluid"
+                    :alt="form.avatar"
+                  />
 
-                <span
-                  v-else-if="form.avatar?.length"
-                  class="tavasi"
-                  :class="`tavasi-${getFileExtension(form.avatar)}-file`"
-                ></span>
+                  <span
+                    v-else-if="form.avatar?.length"
+                    class="tavasi"
+                    :class="`tavasi-${getFileExtension(form.avatar)}-file`"
+                  ></span>
 
-                <!-- replace image src with incoming src -->
+                  <!-- replace image src with incoming src -->
 
-                <span v-else class="tavasi tavasi-cloud-upload"></span>
-              </label>
-            </image-uploader>
+                  <span v-else class="tavasi tavasi-cloud-upload"></span>
+                </label>
+              </ImageCropper>
+            </client-only>
           </div>
         </div>
 
@@ -1258,7 +1260,7 @@
       </form>
     </div>
 
-    <base-modal
+    <!-- <base-modal-v2
       v-if="showInvitePostModal"
       modalSize="modal-lg"
       modalTitle="فرم ایجاد پست دعوت نامه"
@@ -1269,31 +1271,33 @@
         @close="closeAndResetInvitePostModal"
         :group="groupToInvite"
       ></invite-post>
-    </base-modal>
+    </base-modal-v2> -->
   </div>
 </template>
 
 <script>
-// import { dragDropMoveMixin } from "~/list/mixins/dragDropMoveMixin";
-// import { searchMixin } from "~/list/mixins/searchMixin";
-import ImageUploader from "vue-image-upload-resize";
-import chatApi from "~/apis/chatApi";
-import keyValueApi from "~/apis/keyValueApi";
-import {  mapState, mapActions } from "pinia";
+import chatApi from "@chat/apis/chatApi";
+import { mapState, mapActions } from "pinia";
 
+import privatesContextMenu from "@chat/json/chat/json/privatesContextMenu.json";
+import groupsContextMenu from "@chat/json/chat/json/groupsContextMenu.json";
 
-import privatesContextMenu from "~/json/chat/json/privatesContextMenu.json";
-import groupsContextMenu from "~/json/chat/json/groupsContextMenu.json";
-// import lobbiesContextMenu from "~/json/chat/json/lobbiesContextMenu.json";
+import lobbiesChildContextMenu from "@chat/json/chat/json/lobbiesChildContextMenu.json";
+import lobbiesParentContextMenu from "@chat/json/chat/json/lobbiesParentContextMenu.json";
 
-import lobbiesChildContextMenu from "~/json/chat/json/lobbiesChildContextMenu.json";
-import lobbiesParentContextMenu from "~/json/chat/json/lobbiesParentContextMenu.json";
-
-import menu from "~/json/chat/json/menu.json";
+import menu from "@chat/json/chat/json/menu.json";
+import { useCommonStore } from "@stores/commonStore";
+import { useChatStore } from "@chat/stores/chatStore";
 
 export default {
+  name: "group",
+  setup() {
+    definePageMeta({
+      name: "group",
+    });
+  },
   // mixins: [dragDropMoveMixin],
-  emits: ["list-changed", "list-item-changed"],
+  emits: ["list-changed", "list-item-changed", "update-messages"],
   props: {
     statusPagHedear: {
       default: 1,
@@ -1317,9 +1321,9 @@ export default {
   beforeMount() {
     const { $eventBus } = useNuxtApp();
     // fired from chat.vue footer menu
-    // $eventBus.on("open-list", (value) => {
-    //   this.showSidebarInMobile = value;
-    // });
+    $eventBus.on("open-list", (value) => {
+      this.showSidebarInMobile = value;
+    });
 
     // listening to the chat-list component.
     $eventBus.on("add-to-lobby", () => {
@@ -1367,10 +1371,7 @@ export default {
     //   "app-version-code": import.meta.env.VITE_APP_VERSION,
     // };
 
-    this.httpService = new HttpService(
-      import.meta.env.VITE_BASE_URL
-      // headers
-    );
+    this.httpService = useNuxtApp()["$http"];
 
     // this.authHttpService = new HttpService(import.meta.env.VITE_AUTH_BASE_URL);
     // this.keyValueHttpService = new HttpService(
@@ -1416,13 +1417,14 @@ export default {
 
     // when user forward a message.
     if (this.getForwardItem) {
-      this.groupId = this.getForwardItem?.to.id;
+      this.groupId = this.getForwardItem?.to?.id;
       // this.isRedirectedFromOtherSystems = true;
     }
 
     this.getAll(this.$route.name);
 
     // event fired from authMixin.js
+    const { $eventBus } = useNuxtApp();
     $eventBus.on("authenticated-by-modal", (inviteId) => {
       // const headers = {
       //   "app-id": import.meta.env.VITE_APP_ID,
@@ -1430,11 +1432,6 @@ export default {
       //   "app-version-code": import.meta.env.VITE_APP_VERSION,
       // };
 
-      this.httpService = new HttpService(
-        import.meta.env.VITE_BASE_URL
-        // headers
-      );
-
       // this.authHttpService = new HttpService(import.meta.env.VITE_AUTH_BASE_URL);
 
       this.isRedirectedFromOtherSystems = true;
@@ -1585,29 +1582,21 @@ export default {
   },
 
   computed: {
-    ...mapState([
-      "isSidebarCollapsed",
-      "getForwardItem",
+    ...mapState(useCommonStore, [
       "userPermisionGetter",
-      "getPanelStatus",
       "sidebarListStatusGetter",
     ]),
-    ...mapState("list", ["listGetter"]),
+    ...mapState(useChatStore, ["listGetter", "getForwardItem"]),
   },
   methods: {
-    ...mapActions([
-      "TOGGLE_PANEL",
-      "checkPermissions",
-      "sidebarCollapsedSetter",
-      "SET_SIDEBAR_LIST_STATUS",
-    ]),
-    ...mapActions("list", ["SET_LIST"]),
-    // groupAvatarMaker(avatarUrl) {
-    //   return import.meta.env.VITE_BASE_URL + fileUrl() + avatarUrl;
-    // },
+    ...mapActions(useChatStore, ["SET_LIST", "SET_SIDEBAR_LIST_STATUS"]),
+    handleImageSrcOnError({ target }, isUserAvatar = true) {
+      if (isUserAvatar) target.classList.add("human-avatar");
+      target.classList.add("error");
+    },
     getGroupTypes() {
       this.httpService
-        .postRequest("keyvalue/" + keyValueApi.forms.groupTypes)
+        .postRequest("keyvalue/" + chatApi.forms.groupTypes)
         .then((response) => {
           this.groupfilters = response.data;
         });
@@ -1646,13 +1635,13 @@ export default {
 
       try {
         await navigator.clipboard.writeText(link);
-        mySwalToast({
-          html: "لینک کپی شد.",
-        });
+        // mySwalToast({
+        //   html: "لینک کپی شد.",
+        // });
       } catch (err) {
-        mySwalToast({
-          html: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
-        });
+        // mySwalToast({
+        //   html: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
+        // });
       }
     },
     resetFoundUsers() {
@@ -1709,7 +1698,7 @@ export default {
         this.redirectViaInviteLink = true;
       }
 
-      const tempGroupFilter = structuredClone(this.selectedGroupFilter);
+      const tempGroupFilter = this.selectedGroupFilter;
       const payload = {
         type: tempGroupFilter.map((item) => item.id),
       };
@@ -1793,7 +1782,7 @@ export default {
           }
           return response;
         })
-        
+
         .finally(() => {
           this.fetchingData = false;
           this.busy = false;
@@ -1818,7 +1807,7 @@ export default {
       // if (formType == "groups") urlPrefix =
       // else if (formType == "lobbies") urlPrefix = chatApi.lobbies.create
       // else if (formType == "privates") urlPrefix = chatApi.privates.create
-      // const payload  = structuredClone(this.form);
+      // const payload  = this.form
 
       this.form.members = JSON.stringify(this.form.members);
       this.form.admins = undefined;
@@ -1853,8 +1842,7 @@ export default {
             logout(this.$route);
             this.fetchingData = false;
           }
-        })
-        
+        });
     },
     // remove group/remove lobby group
     removeItem(groupItem) {
@@ -1886,7 +1874,7 @@ export default {
     },
 
     editItem(groups, groupItem, index) {
-      this.form = structuredClone(groupItem);
+      this.form = groupItem;
       this.markActive(groups, index);
       this.openGroupCreateForm(this.convertGroupIntegerToString[this.formType]);
     },
@@ -1951,7 +1939,7 @@ export default {
 
       // const methodType = listType == "unReads" ? 'postRequest' : 'getRequest'
 
-      const tempGroupFilter = structuredClone(this.selectedGroupFilter);
+      const tempGroupFilter = this.selectedGroupFilter;
       const payload = {
         type: tempGroupFilter.map((item) => item.id),
       };
@@ -2048,7 +2036,6 @@ export default {
         this.prevSelectedItemIndex = index;
         this.$set(groups[index], "active", true);
       } catch (err) {
-        
         this.prevSelectedItemIndex = undefined;
       }
     },
@@ -2058,7 +2045,9 @@ export default {
     },
 
     showMessages(groups, groupItem, index) {
+      const { $eventBus } = useNuxtApp();
       $eventBus.emit("close-replays");
+
       // for mobile mode, closes the panel.
       if (this.resizeAction()) {
         this.SET_SIDEBAR_LIST_STATUS();
@@ -2191,7 +2180,7 @@ export default {
           .then((response) => {
             this.foundGroups = response.data ?? [];
           })
-          
+
           .finally(() => {
             // this.isLoading = false;
           });
@@ -2205,11 +2194,11 @@ export default {
       let url = "message/" + chatApi[this.$route.name].parent;
 
       if (comboSelectedGroup.parent_id) {
-        mySwalToast({
-          title: "",
-          icon: "warning",
-          html: "این گروه قبلا عضو تالاری شده است و امکان عضویت در تالار دوم را ندارد.",
-        });
+        // mySwalToast({
+        //   title: "",
+        //   icon: "warning",
+        //   html: "این گروه قبلا عضو تالاری شده است و امکان عضویت در تالار دوم را ندارد.",
+        // });
         return;
       }
 
@@ -2221,13 +2210,13 @@ export default {
       this.httpService
         .formDataRequest(url, payload)
         .then((res) => {
-          mySwalToast({
-            title: "",
-            html: res.message,
-          });
+          // mySwalToast({
+          //   title: "",
+          //   html: res.message,
+          // });
           this.closeCreateForm();
         })
-        
+
         .finally(() => {
           this.fetchingData = false;
         });
@@ -2250,18 +2239,15 @@ export default {
             parent_id: 0,
           };
 
-          this.httpService
-            .formDataRequest(url, payload)
-            .then((res) => {
-              this.fetchingData = false;
+          this.httpService.formDataRequest(url, payload).then((res) => {
+            this.fetchingData = false;
 
-              // mySwalToast({
-              //   html: res.message,
-              // });
-              this.resetPagination();
-              this.getAll("lobbies");
-            })
-            
+            // mySwalToast({
+            //   html: res.message,
+            // });
+            this.resetPagination();
+            this.getAll("lobbies");
+          });
         }
       });
     },
@@ -2303,44 +2289,37 @@ export default {
 
         this.findUser(payload);
       } else {
-        this.httpService
-          .postRequest(url, payload)
-          .then((response) => {
-            this.groups = response.data;
-            this.users = response.users;
-            this.pagination = { ...this.pagination, ...response.pagination };
-
-            if (this.searchText == "") {
-              this.groups = [];
-            }
-          })
-          
-      }
-    },
-    findUser(query) {
-      const url = loginUrl() + "/user/suggestion";
-      this.httpService
-        .postRequest(url, query)
-        .then((response) => {
-          response.data.forEach((i) => {
-            i["user"] = i.user_id;
-            i["title"] = i.full_name;
-            i["created_at"] = i.full_name;
-            i["title"] = i.full_name;
-          });
-
+        this.httpService.postRequest(url, payload).then((response) => {
           this.groups = response.data;
-          // this.users = response.users;
-          // this.pagination = { ...this.pagination, ...response.pagination };
+          this.users = response.users;
+          this.pagination = { ...this.pagination, ...response.pagination };
 
           if (this.searchText == "") {
             this.groups = [];
           }
-        })
-        
-        
+        });
+      }
     },
-    replayCount(replays) {
+    findUser(query) {
+      const url = loginUrl() + "/user/suggestion";
+      this.httpService.postRequest(url, query).then((response) => {
+        response.data.forEach((i) => {
+          i["user"] = i.user_id;
+          i["title"] = i.full_name;
+          i["created_at"] = i.full_name;
+          i["title"] = i.full_name;
+        });
+
+        this.groups = response.data;
+        // this.users = response.users;
+        // this.pagination = { ...this.pagination, ...response.pagination };
+
+        if (this.searchText == "") {
+          this.groups = [];
+        }
+      });
+    },
+    replayCount(replays = []) {
       let sum = 0;
       replays.forEach((item) => {
         sum += item.count;
@@ -2360,9 +2339,7 @@ export default {
           .then((response) => {
             // this.isLoading = false;
             this.foundUsers = response.data ?? [];
-          })
-          
-          
+          });
       }
     },
 
@@ -2418,7 +2395,7 @@ export default {
           this.closeCreateForm();
           // this.getAll();
         })
-        
+
         .finally(() => {
           this.uploading = false;
         });
@@ -2436,14 +2413,14 @@ export default {
       this.httpService
         .postRequest(url, payload)
         .then((res) => {
-          mySwalToast({
-            title: "",
-            html: res.message,
-          });
+          // mySwalToast({
+          //   title: "",
+          //   html: res.message,
+          // });
           // this.closeCreateForm();
           // this.getAll();
         })
-        
+
         .finally(() => {
           this.resetFoundUsers();
           this.fetchingData = false;
@@ -2466,10 +2443,7 @@ export default {
 
           this.getAll(this.$route.name);
         })
-        .catch((err) => {
-          
-        })
-        
+        .catch((err) => {});
     },
 
     // #region mehdi
@@ -2520,6 +2494,10 @@ export default {
     },
     // #endregion
   },
-
+  components: {
+    ImageCropper: defineAsyncComponent(() =>
+      import("@components/other/ImageCropper.vue")
+    ),
+  },
 };
 </script>
diff --git a/components/chat/components/MobileFooter.vue b/components/chat/components/MobileFooter.vue
index a9a9ab4..f7580d1 100644
--- a/components/chat/components/MobileFooter.vue
+++ b/components/chat/components/MobileFooter.vue
@@ -109,6 +109,7 @@
 
 <script>
 import { mapState, mapActions } from "pinia";
+import { useChatStore } from "~/systems/chat_ui/stores/chatStore";
 
 export default {
   data() {
@@ -119,12 +120,11 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      "getPanelStatus",
+    ...mapState(useCommonStore, [
       "isSidebarCollapsed",
       "sidebarListStatusGetter",
     ]),
-    ...mapState("list", [
+    ...mapState(useChatStore, [
       "listComponentNameGetter",
       "selectedProjectGetter",
       "listIdGetter",
@@ -133,21 +133,17 @@ export default {
     ]),
   },
   methods: {
-    ...mapActions([
-      "TOGGLE_PANEL",
+    ...mapActions(useChatStore, [
       "sidebarCollapsedSetter",
       "SET_SIDEBAR_LIST_STATUS",
-    ]),
-    ...mapActions("list", [
       "SET_LIST_COMPONENT_NAME",
       "SET_SELECTED_ITEM",
       "SET_SELECTED_PROJECT",
       "SET_LIST_ID",
       "SET_LIST",
       "SET_LIST_ID",
+      "chatSidebarListStatusReactor",
     ]),
-    ...mapActions(["chatSidebarListStatusReactor"]),
-
     setSidebarMenu(actionName) {
       this.footerAction = actionName;
       this.sidebarCollapsedSetter(!this.isSidebarCollapsed);
diff --git a/layouts/default.vue b/layouts/default.vue
deleted file mode 100644
index 869574b..0000000
--- a/layouts/default.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<!-- layouts/default.vue -->
-<template>
-  <div>
-    <header v-if="buildName() != 'majles'">
-      <!-- //////////////////// begin navbar //////////////////// -->
-      <nav
-        class="navbar navbar-expand-md navbar-light bg-light"
-        :class="{ expanded: !isSidebarCollapsed }"
-      >
-        <!-- sidebar menu toggler -->
-        <button-component
-          @click="sidebarCollapsedSetter(false)"
-          classes="p-0 d-lg-none"
-          buttonText=""
-        >
-          <svg class="icon icon-Component-68--1">
-            <use xlink:href="#icon-Component-68--1"></use>
-          </svg>
-        </button-component>
-        <a
-          class="navbar-brand d-none d-lg-inline-block"
-          style="color: #00b6e3"
-          >{{ navTitle }}</a
-        >
-        <a class="navbar-brand d-lg-none" style="color: #00b6e3">{{
-          navShortTitle
-        }}</a>
-        <button
-          class="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarSupportedContent"
-          aria-controls="navbarSupportedContent"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="navbar-collapse" id="navbarSupportedContent">
-          <div class="collapse-mobile-header">
-            <div>
-              <img
-                src="assets/common/img/logo/gray-logo.png"
-                alt="هم فهمی"
-                class="img-fluid"
-                style="width: 2em; filter: invert(0)"
-              />
-              هم فهمی
-            </div>
-
-            <button
-              class="btn p-0 me-auto"
-              type="button"
-              data-bs-toggle="collapse"
-              data-bs-target="#navbarSupportedContent"
-              aria-controls="navbarSupportedContent"
-              aria-expanded="false"
-              aria-label="Toggle navigation"
-            >
-              <svg class="icon icon-Component-71--1">
-                <use xlink:href="#icon-Component-71--1"></use>
-              </svg>
-            </button>
-          </div>
-          <ul class="navbar-nav ms-auto me-md-5">
-            <!-- <li class="nav-item active">
-              <a class="nav-link" href="#"
-                >پیشخوان <span class="sr-only">(current)</span></a
-              >
-            </li> -->
-            <!-- <li class="nav-item">
-                      <a class="nav-link" href="#">سامانه‌ها</a>
-                    </li> -->
-            <li class="nav-item dropdown">
-              <a
-                class="nav-link dropdown-toggle"
-                id="navbarDropdown"
-                role="button"
-                data-bs-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >
-                {{ $t("Systems") }}
-              </a>
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <!-- <my-system class="list" layout="list"></my-system> -->
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a
-                class="nav-link dropdown-toggle"
-                href="#"
-                id="navbarDropdown"
-                role="button"
-                data-bs-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >
-                {{ $t("Portal") }}
-              </a>
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a
-                  class="dropdown-item"
-                  href="http://pub.hamfahmi.ir/public"
-                  target="_blank"
-                  >{{ $t("PersonalFolder") }}</a
-                >
-                <a
-                  class="dropdown-item"
-                  href="http://pub.hamfahmi.ir/wiki"
-                  target="_blank"
-                  >{{ $t("WikiFarhangestan") }}</a
-                >
-                <a
-                  class="dropdown-item"
-                  href="http://pub.hamfahmi.ir:91/"
-                  target="_blank"
-                  >{{ $t("ResearchPortal") }}</a
-                >
-                <a
-                  class="dropdown-item"
-                  href="http://pub.hamfahmi.ir:94/"
-                  target="_blank"
-                  >{{ $t("ResearchSoftware") }}</a
-                >
-              </div>
-            </li>
-          </ul>
-
-          <ul class="navbar-nav ms-md-3 me-auto">
-            <li class="nav-item">
-              <notification></notification>
-            </li>
-            <li class="nav-item">
-              <select-language-dropdown
-                toggleClass="dropdown-toggle"
-              ></select-language-dropdown>
-            </li>
-            <li class="nav-item">
-              <user-avatar-dropdown
-                class="position-static"
-              ></user-avatar-dropdown>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <!-- //////////////////// end navbar //////////////////// -->
-    </header>
-    <!-- <the-sidebar :showUserAvatar="true" :menu="menu"></the-sidebar> -->
-    <the-sidebar
-      :showUserAvatar="true"
-      :menu="$attrs.menu"
-      @statusPag="statusPag"
-    ></the-sidebar>
-
-    <main class="main-page__content" :class="{ expanded: !isSidebarCollapsed }">
-      <!-- <div class="pages list-page"> -->
-      <!-- <div class="pages-content align-items-stretch p-0"> -->
-      <!-- <div class="flex-grow-1"> -->
-
-      <slot></slot>
-      <!-- </div> -->
-      <!-- </div> -->
-      <!-- </div> -->
-    </main>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "pinia";
-import { useCommonStore } from "~/stores/commonStore";
-
-import { clearBodyClass } from "@manuals/utilities";
-export default {
-  mounted() {
-    // this.setBodyClass("default-dashboard");
-  },
-  beforeUnmount() {
-    this.sidebarMenuSetter();
-  },
-  data() {
-    return {
-      menu: undefined,
-      // #region mehdi
-      statusPag: 0,
-      nomber: 0,
-      statusPagHedear: 1,
-      // #endregion
-    };
-  },
-  computed: {
-    ...mapState(useCommonStore, [
-      "getPanelStatus",
-      "getRefreshForm",
-      "isSidebarCollapsed",
-      "sidebarMenuGetter",
-    ]),
-    navTitle() {
-      return import.meta.env.VITE_TITLE;
-    },
-    navShortTitle() {
-      return import.meta.env.VITE_SHORT_TITLE;
-    },
-    // sidbarMenu() {
-    //   if (buildName() == "majles") return majlesMenu;
-    //   return monirMenu;
-    // },
-  },
-
-  methods: {
-    ...mapActions(useCommonStore, [
-      "setBodyClass",
-      "TOGGLE_PANEL",
-      "sidebarCollapsedSetter",
-      "SET_SIDEBAR_LIST_STATUS",
-      "sidebarMenuSetter",
-    ]),
-
-    showPortal() {
-      return buildName() == "monir" && buildState() != 2;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "../assets/default-dashboard/scss/default-dashboard";
-</style>
-
-<style scoped lang="scss">
-.dropdown-menu {
-  float: right;
-  min-width: 13rem;
-  font-size: 0.9rem;
-  border: none;
-  border-radius: 0.1em;
-  text-align: right;
-  min-width: 20em;
-}
-</style>
diff --git a/layouts/readme.md b/layouts/readme.md
deleted file mode 100644
index e11d43e..0000000
--- a/layouts/readme.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Layouts are wrappers around pages that contain a common User Interface for several pages, such as
-a header and footer display. Layouts are Vue files using <slot /> components to display the page
-content. The layouts/default.vue file will be used by default. Custom layouts can be set as part of
-your page metadata.
-If you only have a single layout in your application, we recommend using app.vue with <NuxtPage /> instead.
\ No newline at end of file
diff --git a/pages/Chat.vue b/pages/Chat.vue
new file mode 100644
index 0000000..7fc2353
--- /dev/null
+++ b/pages/Chat.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <group
+      ref="chat-list-panel"
+      @update-messages="rerenderChatList++"
+      :show-header="statusPagHedear"
+      id="group"
+    ></group>
+
+    <div class="flex-grow-1">
+      <div class="position-relative d-flex justify-content-center"></div>
+      <div v-if="listGetter">
+        <!-- <chat-list
+          ref="chat-content"
+          :key="rerenderChatList"
+          @show="statusPage"
+          @my-event="openPagGrup"
+        ></chat-list> -->
+      </div>
+
+      <div v-else class="no-group-selected" :class="$route.name">
+        <img
+          style="width: 10em"
+          class="img-fluid"
+          src="assets/common/img/logo/gray-logo.png"
+          alt="هم فهمی"
+        />
+        <p class="title m-0">
+          {{ selectedListBackTitle($route.name) }}
+        </p>
+      </div>
+      <!-- </div> -->
+    </div>
+
+    <!-- <mobile-footer></mobile-footer> -->
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "pinia";
+import { useChatStore } from "@chat/stores/chatStore";
+import { useCommonStore } from "@stores/commonStore";
+
+export default {
+  name: "chat",
+  setup() {
+    definePageMeta({
+      name: "chat",
+    });
+  },
+  mounted() {
+    this.TOGGLE_PANEL(false);
+  },
+  watch: {
+    getPanelStatus(status) {
+      if (status) this.openForm();
+      else this.closeModal();
+    },
+    $route: {
+      handler: function () {
+        this.sidebarCollapsedSetter(true);
+      },
+      deep: true,
+      immediate: true,
+    },
+    // listIdGetter(newId) {
+    //   this.filterBy(this.selectedFilter);
+    // },
+  },
+  data() {
+    return {
+      // #region mehdi
+      nomber: 0,
+      statusPagHedear: 1,
+
+      // #endregion
+      rerenderChatList: 1,
+      showListPanel: false,
+    };
+  },
+  computed: {
+    ...mapState(useCommonStore, [
+      "getPanelStatus",
+      "isSidebarCollapsed",
+      "sidebarListStatusGetter",
+      "listGetter",
+    ]),
+  },
+  methods: {
+    ...mapActions(useChatStore, [
+      "SET_LIST_COMPONENT_NAME",
+      "SET_SELECTED_ITEM",
+      "SET_SELECTED_PROJECT",
+      "SET_LIST_ID",
+      "SET_LIST",
+    ]),
+    ...mapActions(useCommonStore, [
+      "SET_SIDEBAR_LIST_STATUS",
+      "checkPermissions",
+      "sidebarCollapsedSetter",
+      "TOGGLE_PANEL",
+    ]),
+    selectedListBackTitle(name) {
+      if (name == "groups") return "دانشتو با بقیه به اشتراک بزار.";
+      if (name == "privates") return "به هر کی دوست داری، پیام بده.";
+      if (name == "lobbies") return "به تالار گفتگو خوش اومدی";
+    },
+    // showSearch() {
+    // search in current group, not all groups.
+    // this.$refs["chat-list-panel"].showSearchs(true);
+    // },
+
+    // #region mehdi
+    statusPage($event) {
+      const number = $event;
+
+      if (number == 1) {
+        if (this.$refs["chat-list-panel"].showMainpag == false) {
+          this.$refs["chat-list-panel"].showMainpag = true;
+        }
+      } else {
+        if (this.$refs["chat-list-panel"].showMainpag == false) {
+          this.$refs["chat-list-panel"].showMainpag = true;
+        }
+      }
+    },
+    // #endregion
+
+    toggleSidebarMenu() {
+      this.TOGGLE_SIDEBAR_MENU();
+    },
+    showToggleListPanel() {
+      this.showListPanel = !this.showListPanel;
+      this.$refs["chat-list-panel"].showMainpag = true;
+    },
+
+    // #region mehdi
+    openPagGrup(data) {
+      this.enablePanelToggling = data;
+      if (this.enablePanelToggling == 1) {
+        this.showToggleListPanel();
+      }
+    },
+    // #endregion
+  },
+  components: {
+    Group: defineAsyncComponent(() =>
+      import("@chat/components/chat/components/Group.vue")
+    ),
+    ChatList: defineAsyncComponent(() =>
+      import("@chat/components/chat/components/ChatList.vue")
+    ),
+    // MobileFooter: defineAsyncComponent(() =>
+    //   import("@chat/components/chat/components/MobileFooter.vue")
+    // ),
+  },
+};
+</script>
diff --git a/pages/chat/index.vue b/pages/chat/index.vue
deleted file mode 100644
index 087e32e..0000000
--- a/pages/chat/index.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <router-view :key="$route.fullPath"></router-view>
-</template>
-
-<script>
-import { mapActions } from "pinia";
-import {clearBodyClass} from "@manuals/utilities"
-
-
-export default {
-  data() {
-    return {
-      userLastStateIsLoaded: true,
-      modalComponentName: "",
-      actionMode: 1,
-    };
-  },
-
-  methods: {
-    ...mapActions(["setBodyClass", "getState"]),
-  },
-
-  beforeCreate() {
-    ApiService.init(import.meta.env.VITE_LIST_BASE_URL);
-  },
-  beforeMount() {
-    clearBodyClass();
-  },
-  mounted() {
-    this.setBodyClass(import.meta.env.VITE_CHAT_SYSTEM);
-    document.title = import.meta.env.VITE_CHAT_PAGE_TITLE;
-  },
-  destroyed() {
-    clearBodyClass();
-  },
-};
-</script>
-
-<style lang="scss">
-/*@import "../assets/tahrir/scss/tahrir";*/
-@import "../../assets/chat/scss/chat";
-//@import '/animate.css';
-
-</style>
diff --git a/pages/chat/pages/Chat.vue b/pages/chat/pages/Chat.vue
deleted file mode 100644
index 9b09d9b..0000000
--- a/pages/chat/pages/Chat.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-  <section>
-    <!-- <the-sidebar :showUserAvatar="true" :menu="menu"></the-sidebar> -->
-    <the-sidebar
-      :showUserAvatar="true"
-      :menu="menu"
-      @statusPage="statusPage"
-    ></the-sidebar>
-
-      <main
-        class="main-page__content"
-        :class="{ expanded: !isSidebarCollapsed }"
-      >
-        <!-- <div class="pages list-page"> -->
-        <!-- <div class="pages-content align-items-stretch p-0"> -->
-        <group
-          ref="chat-list-panel"
-          @update-messages="rerenderChatList++"
-          :show-header="statusPagHedear"
-          id="group"
-        ></group>
-
-        <div class="flex-grow-1">
-          <div class="position-relative d-flex justify-content-center"></div>
-          <div v-if="listGetter">
-            <!-- <keep-alive max="30" :exclude="['projects']"> -->
-            <!-- <chat-list :key="rerenderChatList"></chat-list> -->
-            <chat-list
-              ref="chat-content"
-              :key="rerenderChatList"
-              @show="statusPage"
-              @my-event="openPagGrup"
-            ></chat-list>
-            <!-- </keep-alive> -->
-          </div>
-
-          <div v-else class="no-group-selected" :class="$route.name">
-            <img
-              style="width: 10em"
-              class="img-fluid"
-              src="assets/common/img/logo/gray-logo.png"
-              alt="هم فهمی"
-            />
-            <p class="title m-0">
-              {{ selectedListBackTitle($route.name) }}
-            </p>
-          </div>
-          <!-- </div> -->
-        </div>
-
-        <mobile-footer></mobile-footer>
-        <!-- </div> -->
-        <!-- </div> -->
-      </main>
-  </section>
-</template>
-
-<script>
-// import commentMixin from "~/mixins/commentMixin";
-// import apis from "~/apis/listApi";
-import { mapState, mapActions } from "pinia";
-// import { handleErrors } from "";
-import menu from "~/json/chat/json/menu.json";
-
-export default {
-  // mixins: [commentMixin],
-
-  mounted() {
-    this.TOGGLE_PANEL(false);
-  },
-  watch: {
-    getPanelStatus(status) {
-      if (status) this.openForm();
-      else this.closeModal();
-    },
-    $route: {
-      handler: function () {
-        this.sidebarCollapsedSetter(true);
-      },
-      deep: true,
-      immediate: true,
-    },
-    // listIdGetter(newId) {
-    //   this.filterBy(this.selectedFilter);
-    // },
-  },
-  data() {
-    return {
-      // #region mehdi
-      nomber: 0,
-      statusPagHedear: 1,
-
-      // #endregion
-      rerenderChatList: 1,
-      showListPanel: false,
-      menu: menu,
-    };
-  },
-  computed: {
-    ...mapState(["getPanelStatus", "isSidebarCollapsed","sidebarListStatusGetter"]),
-    ...mapState("list", [
-      "listComponentNameGetter",
-      "selectedProjectGetter",
-      "listIdGetter",
-      "selectedItemGetter",
-      "listGetter",
-    ]),
-  },
-  methods: {
-    ...mapActions([
-      "TOGGLE_PANEL",
-      "sidebarCollapsedSetter",
-      "SET_SIDEBAR_LIST_STATUS",
-          "SET_LIST_COMPONENT_NAME",
-      "SET_SELECTED_ITEM",
-      "SET_SELECTED_PROJECT",
-      "SET_LIST_ID",
-      "SET_LIST",
-          ]),
-    ...mapActions(["checkPermissions", "storeState", "getState"]),
-    selectedListBackTitle(name) {
-      if (name == "groups") return "دانشتو با بقیه به اشتراک بزار.";
-      if (name == "privates") return "به هر کی دوست داری، پیام بده.";
-      if (name == "lobbies") return "به تالار گفتگو خوش اومدی";
-    },
-    // showSearch() {
-      // search in current group, not all groups.
-      // this.$refs["chat-list-panel"].showSearchs(true);
-    // },
-
-    // #region mehdi
-    statusPage($event) {
-      const number = $event;
-
-      if (number == 1) {
-        if (this.$refs["chat-list-panel"].showMainpag == false) {
-          this.$refs["chat-list-panel"].showMainpag = true;
-        }
-      } else {
-        if (this.$refs["chat-list-panel"].showMainpag == false) {
-          this.$refs["chat-list-panel"].showMainpag = true;
-        }
-      }
-    },
-    // #endregion
-
-    toggleSidebarMenu() {
-      this.TOGGLE_SIDEBAR_MENU();
-    },
-    showToggleListPanel() {
-      this.showListPanel = !this.showListPanel;
-      this.$refs["chat-list-panel"].showMainpag = true;
-    },
-
-    // #region mehdi
-    openPagGrup(data) {
-      this.enablePanelToggling = data;
-      if (this.enablePanelToggling == 1) {
-        this.showToggleListPanel();
-      }
-    },
-    // #endregion
-  },
-
-
-};
-</script>
-
-<style lang="scss">
-// #region mehdi
-// @media only screen and (min-width: 768px) and (max-width: 991.98px) {
-// }
-// @media only screen and (min-width: 576px) and (max-width: 766.98px) {
-// }
-// @media (max-width: 575.98px) {
-//   .pages-content {
-//     top: 0rem !important;
-//   }
-// }
-// #endregion
-</style>
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..9726806
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <NuxtLayout name="default" :menu="menu">
+    <router-view></router-view>
+  </NuxtLayout>
+</template>
+
+<script>
+import { clearBodyClass } from "@manuals/utilities";
+import menu from "@chat/json/chat/json/menu.json";
+
+export default {
+  name: "chatRouterView",
+  setup() {
+    useHead({
+      title: import.meta.env.VITE_CHAT_PAGE_TITLE,
+      meta: [{ name: "description", content: "My page description" }],
+      bodyAttrs: {
+        class: import.meta.env.VITE_CHAT_SYSTEM,
+      },
+      bodyAttrs: {
+        class: import.meta.env.VITE_CHAT_SYSTEM,
+      },
+    });
+
+    definePageMeta({
+      name: "chatRouterView",
+      layout: false,
+    });
+  },
+
+  destroyed() {
+    clearBodyClass();
+  },
+  data() {
+    return {
+      menu: menu,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+/*@import "../assets/tahrir/scss/tahrir";*/
+@import "../assets/chat/scss/chat.scss";
+//@import '/animate.css';
+</style>
diff --git a/stores/chatStore.ts b/stores/chatStore.ts
new file mode 100644
index 0000000..621042d
--- /dev/null
+++ b/stores/chatStore.ts
@@ -0,0 +1,221 @@
+import type { ForwardItem } from "~/types/commonTypes";
+import type {
+  list,
+  listComponentName,
+  listId,
+  selectedItem,
+  selectedProject,
+} from "~/types/listTypes";
+
+export const useChatStore = defineStore("chatStore", {
+  persist: {
+    storage: piniaPluginPersistedstate.localStorage(),
+  },
+  state: () => ({
+    forwardItem: {} as ForwardItem,
+
+    sidebarListStatus: false,
+
+    selectedProject: undefined as selectedProject | undefined,
+    // isReturnFromItemshowPage: false as isReturnFromItemshowPage,
+    list: undefined as list | undefined,
+    listId: undefined as listId | undefined,
+    listComponentName: "ItemList" as listComponentName | undefined,
+    // projects: [] as projects[],
+    // // pieData: [],
+    selectedItem: undefined as selectedItem | undefined,
+    // domainActive: undefined as Domain | undefined,
+    // // activeTab: undefined,
+    // searchActiveTab: undefined as searchActiveTab | undefined,
+    // searchSchema: undefined as searchSchema | undefined,
+    // helpSchema: undefined as helpSchema | undefined,
+    // searchActiveSchema: undefined as searchActiveTab | undefined,
+    // helpActiveSchema: undefined as helpActiveSchema | undefined,
+    // searchListActiveTab: undefined as searchListActiveTab | undefined,
+    // searchListSchema: undefined as searchListActiveTab[] | undefined,
+    // activeSearchListSchema: undefined as activeSearchListSchema | undefined,
+    // searchChartActiveTab: undefined as searchChartActiveTab | undefined,
+    // searchChartSchema: undefined as searchChartActiveTab[] | undefined,
+    // activeSearchChartSchema: undefined as activeSearchChartSchema | undefined,
+    // searchSynonymTitle: undefined as searchSynonymTitle | undefined,
+    // searchSynonymForm: undefined as searchSynonymForm | undefined,
+    // selectionFilterItems: [] as selectionFilterItems,
+  }),
+  getters: {
+    getForwardItem: (state) => state.forwardItem,
+
+    sidebarListStatusGetter: (state) => state.sidebarListStatus,
+
+    // projectsGetter(state) {
+    //   return state.projects;
+    // },
+    selectedProjectGetter(state) {
+      return state.selectedProject;
+    },
+    listIdGetter(state) {
+      return state.listId;
+    },
+    listComponentNameGetter(state) {
+      return state.listComponentName;
+    },
+    selectedItemGetter(state) {
+      return state.selectedItem;
+    },
+    // isReturnFromItemshowPageGetter(state) {
+    //   return state.isReturnFromItemshowPage;
+    // },
+    listGetter(state) {
+      return state.list;
+    },
+    // searchSynonymTitleGetter(state) {
+    //   return state.searchSynonymTitle;
+    // },
+    // searchSynonymFormGetter(state) {
+    //   return state.searchSynonymForm;
+    // },
+    // domainActiveGetter(state) {
+    //   return state.domainActive;
+    // },
+    // // activeTabGetter(state) {
+    // //   return state.activeTab;
+    // // },
+    // // search page
+    // searchActiveTabGetter(state) {
+    //   return state.searchActiveTab;
+    // },
+    // searchSchemaGetter(state) {
+    //   return state.searchSchema;
+    // },
+    // helpSchemaGetter(state) {
+    //   return state.helpSchema;
+    // },
+    // helpActiveSchemaGetter(state) {
+    //   return state.helpActiveSchema;
+    // },
+    // searchActiveSchemaGetter(state) {
+    //   return state.searchActiveSchema;
+    // },
+    // // search list
+    // searchListActiveTabGetter(state) {
+    //   return state.searchListActiveTab;
+    // },
+    // searchListSchemaGetter(state) {
+    //   return state.searchListSchema;
+    // },
+    // searchListActiveSchemaGetter(state) {
+    //   return state.activeSearchListSchema;
+    // },
+    // // search chart
+    // searchChartActiveTabGetter(state) {
+    //   return state.searchChartActiveTab;
+    // },
+    // searchChartSchemaGetter(state) {
+    //   return state.searchChartSchema;
+    // },
+    // searchChartActiveSchemaGetter(state) {
+    //   return state.activeSearchChartSchema;
+    // },
+    // selectionFilterItemsGetter(state) {
+    //   return state.selectionFilterItems;
+    // },
+  },
+  actions: {
+    SET_FORWARD_ITEM(forwardItem: ForwardItem) {
+      this.forwardItem = forwardItem;
+    },
+    chatSidebarListStatusReactor(newState: boolean) {
+      // this.SET_SIDEBAR_LIST_STATUS = newVal;
+
+      this.sidebarListStatus =
+        newState != undefined || newState != null
+          ? newState
+          : !this.sidebarListStatus;
+    },
+    SET_SIDEBAR_LIST_STATUS(newState = undefined) {
+      this.sidebarListStatus =
+        newState != undefined || newState != null
+          ? newState
+          : !this.sidebarListStatus;
+    },
+    SET_SELECTED_PROJECT(selectedProject = undefined) {
+      this.selectedProject = selectedProject;
+    },
+    SET_LIST_ID(listId = undefined) {
+      this.listId = listId;
+    },
+    SET_LIST_COMPONENT_NAME(
+      payload = { selectedItem: undefined, listComponentName: undefined }
+    ) {
+      this.selectedItem = payload.selectedItem;
+      this.listComponentName = payload.listComponentName;
+    },
+    SET_SELECTED_ITEM(selectedItem = undefined) {
+      this.selectedItem = selectedItem;
+    },
+    // SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(isReturnFromItemshowPage = false) {
+    //   this.isReturnFromItemshowPage = isReturnFromItemshowPage;
+    // },
+    SET_LIST(list = undefined) {
+      this.list = list;
+    },
+    // searchSynonymFormSetter(searchSynonymForm = undefined) {
+    //   this.searchSynonymForm = searchSynonymForm;
+    // },
+    // searchSynonymTitleSetter(searchSynonymTitle = undefined) {
+    //   this.searchSynonymTitle = searchSynonymTitle;
+    // },
+    // domainActiveSetter(domain = undefined) {
+    //   this.domainActive = domain;
+    // },
+    // // activeTabSetter(activeTab = undefined) {
+    // //   this.activeTab = activeTab;
+    // // },
+    // // search page
+    // searchActiveTabSetter(searchActiveTab: searchActiveTab = undefined) {
+    //   this.searchActiveTab = searchActiveTab;
+    // },
+    // searchSchemaSetter(searchSchema = undefined) {
+    //   this.searchSchema = searchSchema;
+    // },
+    // helpSchemaSetter(helpSchema = undefined) {
+    //   this.helpSchema = helpSchema;
+    // },
+    // helpActiveSchemaSetter(helpActiveSchema = undefined) {
+    //   this.helpActiveSchema = helpActiveSchema;
+    // },
+    // searchActiveSchemaSetter(searchActiveSchema = undefined) {
+    //   this.searchActiveSchema = searchActiveSchema;
+    // },
+    // // search list
+    // searchListActiveTabSetter(searchListActiveTab = undefined) {
+    //   this.searchListActiveTab = searchListActiveTab;
+    // },
+    // searchListSchemaSetter(searchListSchema = undefined) {
+    //   this.searchListSchema = searchListSchema;
+    // },
+    // searchListActiveSchemaSetter(activeSearchListSchema = undefined) {
+    //   this.activeSearchListSchema = activeSearchListSchema;
+    // },
+    // // search chart
+    // searchChartActiveTabSetter(searchChartActiveTab = undefined) {
+    //   this.searchChartActiveTab = searchChartActiveTab;
+    // },
+    // searchChartSchemaSetter(searchChartSchema = undefined) {
+    //   this.searchChartSchema = searchChartSchema;
+    // },
+    // searchChartActiveSchemaSetter(activeSearchChartSchema = undefined) {
+    //   this.activeSearchChartSchema = activeSearchChartSchema;
+    // },
+    // selectionFilterItemsSetter(selectionFilterItems = []) {
+    //   this.selectionFilterItems = <selectionFilterItems>selectionFilterItems;
+    // },
+  },
+});
+// export default {
+//   namespaced:true,
+
+//   state,
+//   actions,
+//   mutations,
+//   getters
+// };