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)

src/pages/project-page/ProjectPageCompanies.vue

@@ -1,29 +1,27 @@
 <template>
   <div class="q-pa-none flex column col-grow no-scroll">
     <pn-scroll-list>
-      <template #card-body-header>
-        <div class="flex items-center justify-end q-pa-sm w100" v-if="companies.length !== 0">
-          <q-btn
-            :color="companies.length <= 2 ? 'grey-6' : 'primary'"
-            flat
-            no-caps
-            @click="maskCompany"
-            :disable="companies.length <= 2"
-            class="q-pr-md"
-            rounded
-            >
-            <q-icon
-              left
-              size="sm"
-              name="mdi-domino-mask"
-              class="q-mr-xs"
-            />
-            <div>
-              {{ $t('companies__mask')}}
-            </div>
-          </q-btn>
-        </div>
-      </template>
+      <div class="flex items-center justify-end q-pa-sm w100" v-if="companies.length !== 0">
+        <q-btn
+          :color="companies.length <= 2 ? 'grey-6' : 'primary'"
+          flat
+          no-caps
+          @click="maskCompany"
+          :disable="companies.length <= 2"
+          class="q-pr-md"
+          rounded
+          >
+          <q-icon
+            left
+            size="sm"
+            name="mdi-domino-mask"
+            class="q-mr-xs"
+          />
+          <div>
+            {{ $t('companies__mask')}}
+          </div>
+        </q-btn>
+      </div>
 
       <q-list separator v-if="companies.length !== 0">
         <q-slide-item

src/pages/project-page/ProjectPageHeader.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     id="project-info"
+    v-if="project"
     :style="{ height: headerHeight + 'px', minHeight: '48px' }"
     class="flex row items-center justify-between no-wrap w100 q-gutter-x-sm"
     style="overflow: hidden; transition: height 0.3s ease-in-out; margin-left: 0"
@@ -34,7 +35,7 @@
             size="lg"
           />
 
-          <div class="flex column text-white fit">
+          <div class="flex column text-white fit q-pl-sm">
             <div
               class="text-h6 q-pl-sm text-field"
               >
@@ -85,18 +86,15 @@
       return currentProject
         ? {
           name: currentProject.name,
-          description: currentProject.description ?? '',
-          logo: currentProject.logo ?? ''
-        }
-        : {
-          name: '',
-          description: '',
-          logo: ''
+          description: currentProject.description,
+          logo: currentProject.logo
         }
+        : null
   })
   
   function toggleExpand () {
-    expandProjectInfo.value = !expandProjectInfo.value
+    if (project.value && (project.value.description || project.value.logo))
+      expandProjectInfo.value = !expandProjectInfo.value
   }
 
   async function toProjects () {

src/pages/project-page/ProjectPageUsers.vue

@@ -8,7 +8,7 @@
             clearable
             clear-icon="close"
             :placeholder="$t('users__search')"
-            dense
+            dense filled
             class="col-grow"
             >
             <template #prepend>
@@ -254,7 +254,7 @@
   const usersStore = useUsersStore()
   const companiesStore = useCompaniesStore()
 
-  const users = usersStore.getUsers
+  const users = computed(() => usersStore.users)
   const usersInit = computed(() => usersStore.isInit)
 
   const blockUserId = ref<number | undefined>(undefined)
@@ -263,7 +263,7 @@
   const closedByUserAction = ref(false)
   const { userSection } = useUserSection()
 
-  const mapUsers = computed(() => users.map(el => ({
+  const mapUsers = computed(() => users.value.map(el => ({
     ...el,
     ...userSection(el),
     companyName: el.company_id && companiesStore.companyById(el.company_id)