update

src/pages/project-page/ProjectPageChats.vue

@@ -2,14 +2,13 @@
   <div class="q-pa-none flex column col-grow no-scroll">
     <pn-scroll-list>
       <template #card-body-header>
-        
         <div class="flex row q-ma-md justify-between" v-if="chats.length !== 0">
           <q-input
             v-model="search"
             clearable
             clear-icon="close"
             :placeholder="$t('chats__search')"
-            dense
+            dense filled
             class="col-grow"
             v-if="chats.length !== 0"
             >
@@ -52,18 +51,15 @@
                 {{ item.description }}
               </q-item-label>
               <q-item-label caption lines="1">
-                <div class = "flex justify-start items-center no-wrap">
-                  <div class="q-mr-sm flex items-center no-wrap">
-                    <q-icon name="mdi-account-multiple-outline" class="q-mr-xs"/>
-                    <span>{{ item.user_count }}</span>
-                  </div>
-                  <div class="q-mx-sm flex items-center no-wrap ellipsis" v-if="item.owner_id">
-                    <q-icon name="mdi-key" class="q-mr-xs"/>
-                    <span class="ellipsis">{{ usersStore.userNameById(item.owner_id) }} </span>
-                  </div>
-                </div>
+
               </q-item-label>
             </q-item-section>
+            <q-item-section side>
+              <div class="flex items-center no-wrap text-caption">
+                <q-icon name="mdi-account-outline"/>
+                <span>{{ item.user_count }}</span>
+              </div>
+            </q-item-section>
           </q-item>
         </q-slide-item>
       </q-list>
@@ -166,7 +162,6 @@
 <script setup lang="ts">
   import { ref, computed, onActivated, onDeactivated, onBeforeUnmount, inject } from 'vue'
   import { useChatsStore } from 'stores/chats'
-  import { useUsersStore } from 'stores/users'
   import type { WebApp } from '@twa-dev/types'
   import { useI18n } from "vue-i18n"
   import { useRouter, useRoute } from 'vue-router'
@@ -179,7 +174,6 @@
   const search = ref('')
   const showOverlay = ref<boolean>(false)
   const chatsStore = useChatsStore()
-  const usersStore = useUsersStore()
   const showDialogDeleteChat = ref<boolean>(false)
   const deleteChatId = ref<number | undefined>(undefined)
   const currentSlideEvent = ref<SlideEvent | null>(null)
@@ -192,7 +186,7 @@
     reset: () => void
   }
 
-  const chats = chatsStore.getChats
+  const chats = computed(() => chatsStore.chats)
   const chatsInit = computed(() => chatsStore.isInit)
 
   const fabMenu = [
@@ -201,9 +195,9 @@
   ]
 
   const displayChats = computed(() => {
-    if (!search.value || !(search.value && search.value.trim())) return chats
+    if (!search.value || !(search.value && search.value.trim())) return chats.value
     const searchValue = search.value.trim().toLowerCase()
-    const arrOut = chats
+    const arrOut = chats.value
       .filter(el =>
         el.name.toLowerCase().includes(searchValue) ||
         el.description && el.description.toLowerCase().includes(searchValue)