change

src/pages/project-page/ProjectPageChats.vue

@@ -1,21 +1,33 @@
 <template>
   <div class="q-pa-none flex column col-grow no-scroll">
-    <pn-scroll-list>
+    <pn-scroll-list
+      :hideHeader="chats.length === 0"
+      >
       <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 filled
-            class="col-grow"
-            v-if="chats.length !== 0"
+        <pn-action-bar
+          v-model="search"
+          placeholder="chats__search"
+          :show-calendar-btn="false"
+          :filter-active="showFiltersDialog"
+          :filter-badge="!checkFiltersSelect"
+           @open-filters="showFiltersDialog = true"
+        />
+      </template>
+
+      <template #card-body-btn>
+        <div class="w100 flex justify-end q-px-md">
+          <q-btn
+            @click="showDialogHelp = !showDialogHelp"
+            flat dense no-caps
+            class="q-my-xs"
             >
-            <template #prepend>
-              <q-icon name="mdi-magnify" />
-            </template>
-          </q-input>
+            <div class="text-caption flex no-wrap items-center q-px-xs text-grey">
+              <span class="q-pr-xs">
+                {{ $t("chats__help_chat_type") }}
+              </span>
+              <q-icon name="mdi-help-circle-outline" size="xs"/>
+            </div>
+          </q-btn>
         </div>
       </template>
 
@@ -50,12 +62,28 @@
               <q-item-label caption lines="2">
                 {{ item.description }}
               </q-item-label>
-              <q-item-label caption lines="1">
-
-              </q-item-label>
             </q-item-section>
             <q-item-section side>
+              <div class="row no-wrap items-center">
+                <span class="text-caption q-pr-xs">
+                  {{ showDate(item.bot_access_date) }}
+                </span>
+                <q-icon 
+                  :name="getChatType(item.bot_access).icon"
+                  :color="getChatType(item.bot_access).color"
+                  size="xs"
+                />
+              </div>
+
               <div class="flex items-center no-wrap text-caption">
+                <q-icon
+                  v-if="item.restore_date"
+                  :name="getChatType('reconnect').icon"
+                  :color="getChatType('reconnect').color"
+                  size="xs"
+                  class="q-pr-sm"
+                />
+
                 <q-icon name="mdi-account-outline"/>
                 <span>{{ item.user_count }}</span>
               </div>
@@ -80,82 +108,172 @@
       </div>
     </pn-scroll-list>
 
-  <q-page-sticky
-    :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
-    position="bottom-right"
-    :offset="[0, 18]"
-    class="fix-fab-offset"
-    >
-    <transition
-      appear
-      enter-active-class="animated zoomIn"
+    <q-page-sticky
+      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
+      position="bottom-right"
+      :offset="[0, 18]"
+      class="fix-fab-offset"
       >
-      <q-fab
-        v-model="fabState"
-        v-if="showFab"
-        icon="add"
-        color="brand"
-        direction="up"
-        vertical-actions-align="right"
-        @click="showOverlay = !showOverlay"
-        :disable="!tg.initData"
+      <transition
+        appear
+        enter-active-class="animated zoomIn"
         >
-        <template #tooltip>
-          <q-tooltip
-            v-if="!tg.initData"
-            anchor="center left" self="center end"
-            style="width: calc(min(100vw, var(--body-width)) - 102px) !important;"
-            >
-            {{ $t('chats_disabled_FAB')}} 
-          </q-tooltip>
-        </template>
-        <q-fab-action
-          v-for="item in fabMenu"
-          :key="item.id"
-          square
-          clickable
-          v-ripple
-          class="bg-white change-fab-action"
-          @click="item.func()"
+        <q-fab
+          v-model="fabState"
+          v-if="showFab"
+          icon="add"
+          color="brand"
+          direction="up"
+          vertical-actions-align="right"
+          @click="showOverlay = !showOverlay"
+          :disable="!tg.initData"
           >
-          
-          <template #icon>
-            <q-item class="q-pa-xs w100">
-              <q-item-section avatar class="items-center">
-                <q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
-              </q-item-section>
+          <q-fab-action
+            square
+            clickable
+            v-ripple
+            class="bg-white change-fab-action q-pa-none"
+            style="cursor: default"
+            label-style=""
+            >
+            
+            <template #icon>
+              <q-list class="q-py-sm">
+                <q-item
+                  v-for="item in fabMenu"
+                  :key="item.id" 
+                  class="w100"
+                  :clickable="item.type !== 'header'"
+                  v-ripple
+                  @click="item.type !== 'header' && item.func ? item?.func() : () => {}"
+                  >
+                  <template v-if="item.type === 'header'">
+                    <div class="w100 column" :class="item.id === 4 ? 'q-pt-md' : ''">
+                      <span
+                        class="w100 text-center text-bold"
+                        :class="'text-' + item.color"
+                        style="line-height: 1rem;">
+                        {{ $t(item.title) }}
+                      </span>
+                      <div class="text-caption text-center text-grey fab-action-item">
+                        {{ $t(item.description) }}
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else>
+                  <q-item-section avatar class="items-center">
+                    <q-avatar :color="item.color" rounded text-color="white" :icon="item.icon" />
+                  </q-item-section>
 
-              <q-item-section class="items-start">
-                  <q-item-label class="fab-action-item">
-                    {{ $t(item.name) }}
-                  </q-item-label>
-                  <q-item-label caption class="fab-action-item">
-                    {{ $t(item.description) }}
-                  </q-item-label>
+                  <q-item-section class="items-start">
+                      <q-item-label class="fab-action-item">
+                        {{ $t(item.title) }}
+                      </q-item-label>
+                      <q-item-label caption class="fab-action-item text-left">
+                        {{ $t(item.description) }}
+                      </q-item-label>
+                  </q-item-section>
+                  </template>
+                </q-item>
+              </q-list>
+            </template>
+          </q-fab-action>
+        </q-fab>
+      </transition>
+    </q-page-sticky>
+  </div>
 
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-fab-action>
-      </q-fab>
-    </transition>
-  </q-page-sticky>
-</div>
+  <pn-overlay v-if="showOverlay"/>
 
-<pn-overlay v-if="showOverlay"/>
+  <pn-small-dialog
+    v-model="showDialogDeleteChat"
+    icon="mdi-link-off"
+    color="negative"
+    title="chats__dialog_unlink_title"
+    message1="chats__dialog_unlink_message"
+    message2="chats__dialog_unlink_message2"
+    mainBtnLabel="chats__dialog_unlink_ok"
+    @clickMainBtn="onConfirm()"
+    @close="onCancel()"
+    @before-hide="onDialogBeforeHide()"
+  />
 
-<pn-small-dialog
-  v-model="showDialogDeleteChat"
-  icon="mdi-link-off"
-  color="negative"
-  title="chats__dialog_unlink_title"
-  message1="chats__dialog_unlink_message"
-  message2="chats__dialog_unlink_message2"
-  mainBtnLabel="chats__dialog_unlink_ok"
-  @clickMainBtn="onConfirm()"
-  @close="onCancel()"
-  @before-hide="onDialogBeforeHide()"
-/>
+  <pn-simple-scroll-dialog
+    v-model="showDialogHelp"
+    title="chat__help_title"
+    >
+    <div class="q-py-none q-px-md q-ma-none">
+      <q-list class="q-pt-sm">
+        <pn-chat-type-item
+          v-for="item in [0, 1, 2, 9, 10] as const"
+          :key="item"
+          :type="item"
+          class="q-px-none"
+        />
+      </q-list>
+      <q-separator class="q-mt-md"/>
+      <div class="text-caption q-pt-md">
+        {{ $t('chat_type__dialog_func_title') }}
+        <ol class="q-px-md q-my-xs">
+          <li>{{ $t('chat_type__dialog_func_point1') }}</li>
+          <li>{{ $t('chat_type__dialog_func_point2') }}</li>
+          <li>{{ $t('chat_type__dialog_func_point3') }}</li>
+        </ol>
+        <div class="q-pt-md">
+          {{ $t('chat_type__dialog_administrator_rights')}}
+        </div>
+      </div>
+    </div>
+  </pn-simple-scroll-dialog>
+
+  <!-- filter dialog -->
+   <pn-bottom-sheet-dialog
+    title="chats__filters"
+    v-model="showFiltersDialog"
+    >
+    <template #btnSlot>
+      <div>
+        <q-btn
+          v-if="!checkFiltersSelect"
+          @click="resetFilters"
+          flat
+          no-caps
+          dense
+          color="grey-6"
+          >
+          {{ $t('chats__filters_reset')}}
+        </q-btn>
+      </div>
+    </template>
+
+    <template #footer>
+      <q-btn
+        rounded
+        class="w100"
+        color="primary"
+        @click="showFiltersDialog = false"
+        >
+        {{$t('chats__filters_continue')}}
+      </q-btn>
+    </template>
+
+    <div class="q-pl-sm text-bold text-caption">
+      {{ $t('chats__filters_type') }}
+    </div>
+    <div class="flex column">
+      <div
+        v-for="(item,idx) in chatTypeOptions"
+        :key="idx"
+        >
+        <q-checkbox
+          v-model="filters.chatType"
+          :val="item.value"
+          >
+          {{ $t(item.label) }}
+        </q-checkbox>
+      </div>
+    </div>
+  </pn-bottom-sheet-dialog>
 
 </template>
 
@@ -163,8 +281,15 @@
   import { ref, computed, onActivated, onDeactivated, onBeforeUnmount, inject } from 'vue'
   import { useChatsStore } from 'stores/chats'
   import type { WebApp } from '@twa-dev/types'
+  import type { Chat, ChatType } from 'types/Chat'
   import { useI18n } from "vue-i18n"
+  import { date } from 'quasar'
   import { useRouter, useRoute } from 'vue-router'
+  import pnChatTypeItem from 'components/pnChatTypeItem.vue'
+  import pnSimpleScrollDialog from 'components/pnSimpleScrollDialog.vue'
+  import pnActionBar from 'components/pnActionBar.vue'
+  import pnBottomSheetDialog from 'components/pnBottomSheetDialog.vue'
+  import { getChatType } from 'utils/chats'
   
   const router = useRouter()
   const route = useRoute()
@@ -178,6 +303,7 @@
   const deleteChatId = ref<number | undefined>(undefined)
   const currentSlideEvent = ref<SlideEvent | null>(null)
   const closedByUserAction = ref(false)
+  const showDialogHelp = ref(false)
   const tg = inject('tg') as WebApp
 
   const fabState = ref(false)
@@ -190,19 +316,30 @@
   const chatsInit = computed(() => chatsStore.isInit)
 
   const fabMenu = [
-    {id: 1, icon: 'mdi-chat-plus-outline', name: 'chats__attach_chat', description: 'chats__attach_chat_description', func: attachChat},
-    {id: 2, icon: 'mdi-share-outline', name: 'chats__send_chat', description: 'chats__send_chat_description', func: sendChat},
+    { id: 1, type: 'header', title: 'chats__attach_chat_private_title', description: 'chats__attach_chat_private_title_description', color: 'info' },
+    { id: 2, icon: 'mdi-chat-plus-outline', title: 'chats__attach_private_chat', description: 'chats__attach_private_chat_description', func: attachPrivateChat, color: 'info' },
+    { id: 3, icon: 'mdi-share-outline', title: 'chats__send_private_chat', description: 'chats__send_private_chat_description', func: sendPrivateChat, color: 'info'},
+    { id: 4, type: 'header', title: 'chats__attach_chat_title', description: 'chats__attach_chat_title_description', color: 'primary' },
+    { id: 5, icon: 'mdi-chat-plus-outline', title: 'chats__attach_chat', description: 'chats__attach_chat_description', func: attachChat, color: 'primary' },
+    { id: 6, icon: 'mdi-share-outline', title: 'chats__send_chat', description: 'chats__send_chat_description', func: sendChat, color: 'primary' }
   ]
 
   const displayChats = computed(() => {
-    if (!search.value || !(search.value && search.value.trim())) return chats.value
-    const searchValue = search.value.trim().toLowerCase()
-    const arrOut = chats.value
-      .filter(el =>
-        el.name.toLowerCase().includes(searchValue) ||
+    return chats.value
+      .filter(searchChats)
+      .filter(chatsType)
+
+    function searchChats (el: Chat) {
+      if (!search.value || !(search.value && search.value.trim())) return true
+      const searchValue = search.value.trim().toLowerCase()
+      return el.name.toLowerCase().includes(searchValue) ||
         el.description && el.description.toLowerCase().includes(searchValue)
-      )
-    return arrOut
+    }
+
+    function chatsType (el: Chat) {
+      if (filters.value.chatType.length === 0) return true
+      return filters.value.chatType.includes(el.bot_access)
+    }
   })
 
   function handleSlide (event: SlideEvent, id: number) {
@@ -235,23 +372,33 @@
   }
 
   const botName = 'ready_or_not_2025_bot'
-  const urlAdmin = 'https://t.me/' + botName + '?startgroup='
+  const url = 'https://t.me/' + botName + '?startgroup='
   const urlAdminPermission='&admin=' +
-  'post_messages+' +
-  'edit_messages+' + 
-  'delete_messages+' +
   'pin_messages+' +
-  'restrict_members+' +
-  'invite_users'
+  'restrict_members'
   
   async function attachChat () {
     const key = await chatsStore.getKey()
-    tg.openTelegramLink(urlAdmin + key + urlAdminPermission)
+    tg.openTelegramLink(url + key + urlAdminPermission)
   }
 
   async function sendChat () {
     const key = await chatsStore.getKey()
-    const message = urlAdmin + key + urlAdminPermission
+    const message = url + key + urlAdminPermission
+    const tgShareUrl = 'https://t.me/share/url?url=' +
+      encodeURIComponent( t('chats__send_chat_title')) +
+      '&text=' + `${encodeURIComponent(message)}`
+    tg.openTelegramLink(tgShareUrl)
+  }
+
+  async function attachPrivateChat () {
+    const key = await chatsStore.getKey()
+    tg.openTelegramLink(url + key)
+  }
+
+  async function sendPrivateChat () {
+    const key = await chatsStore.getKey()
+    const message = url + key
     const tgShareUrl = 'https://t.me/share/url?url=' +
       encodeURIComponent( t('chats__send_chat_title')) +
       '&text=' + `${encodeURIComponent(message)}`
@@ -283,6 +430,40 @@
   onBeforeUnmount(() => {
     if (timerId.value) clearTimeout(timerId.value)
   })
+
+  // filter chat
+  const showFiltersDialog = ref(false)
+  interface Filters {
+    chatType: number[]
+  }
+  
+  const defaultFilters = {
+    chatType: []
+  }
+  
+  const filters = ref<Filters>({ ...defaultFilters })
+
+  const checkFiltersSelect = computed(() => (
+    Object.values(filters.value).every(el => el.length === 0)
+  ))
+
+  function resetFilters() {
+    (Object.keys(filters.value) as (keyof Filters)[]).forEach(key => filters.value[key] = [])
+  }
+
+  const chatTypeOptions = computed(() => {
+    return [2, 1, 0, 9].map(el => ({
+      id: el,
+      value: el,
+      label: getChatType(el as Partial<ChatType>).label
+    }))
+  })
+
+ function showDate (d: number) {
+    return new Date(d * 1000).getFullYear() === new Date(Date.now()).getFullYear()
+    ? date.formatDate(d * 1000, 'DD MMM')
+    : date.formatDate(d * 1000, 'MMM YY')
+  }
    
 </script>
 
@@ -292,13 +473,21 @@
     max-height: none;
   }
 
+  .change-fab-action :deep(.q-focus-helper) {
+    visibility: hidden;
+  }
+
+  .q-item :deep(.q-focus-helper) {
+    visibility: visible;
+  }
+
   .change-fab-action {
     width: calc(min(100vw, var(--body-width)) - 48px) !important;
+    border-radius: var(--top-radius)
   }
 
   .fab-action-item {
     text-wrap: auto !important; 
-    text-align: left;
   }
   
   /* fix mini border after slide */

src/pages/project-page/ProjectPageCompanies.vue

@@ -1,27 +1,31 @@
 <template>
   <div class="q-pa-none flex column col-grow no-scroll">
-    <pn-scroll-list>
-      <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>
+    <pn-scroll-list
+      hideHeader
+      >
+      <template #card-body-btn>
+        <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>
 
       <q-list separator v-if="companies.length !== 0">
         <q-slide-item
@@ -55,7 +59,15 @@
                   {{ $t('companies__my_company') }}
                 </div>
               </q-item-label>
-              <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+              <q-item-label lines="1" class="text-bold">
+                {{ item.name }}
+                <q-icon
+                  v-if="companiesStore.checkCompanyMasked(item.id)"
+                  name="mdi-domino-mask"
+                  color="grey"
+                  size="sm"
+                />
+              </q-item-label>
               <q-item-label
                 caption lines="2"
                 style="max-width: -webkit-fill-available; white-space: pre-line"
@@ -63,20 +75,13 @@
                 {{ item.description }}
               </q-item-label>
             </q-item-section>
-            <q-item-section side top>
+            
+            <q-item-section side>
                 <div class="flex items-end column">
                   <span class="text-caption flex items-center">
                     <q-icon name="mdi-account-outline" color="grey" />
                     <span>{{ getQtyUsers(item.id) }}</span>
                   </span>
-
-                  <q-icon
-                    v-if="companiesStore.checkCompanyMasked(item.id)"
-                    name="mdi-domino-mask"
-                    color="grey"
-                    size="xs"
-                  />
-
                   <div class="flex items-center row text-caption">
                     <q-icon v-if="item.site" name="mdi-web"/>
                     <q-icon v-if="item.address" name="mdi-map-marker-outline"/>

src/pages/project-page/ProjectPageHeader.vue

@@ -38,6 +38,7 @@
           <div class="flex column text-white fit q-pl-sm">
             <div
               class="text-h6 q-pl-sm text-field"
+              style="line-height: 1.45rem;"
               >
               {{ project.name }}
             </div>

src/pages/project-page/ProjectPageUsers.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="q-pa-none flex column col-grow no-scroll">
-    <pn-scroll-list>
+    <pn-scroll-list
+      :hideHeader="users.length === 0"
+      >
       <template #card-body-header>
-        <div class="flex row q-ma-md justify-between" v-if="users.length !== 0">
+        <div class="flex row q-ma-md justify-between">
           <q-input
             v-model="search"
             clearable
@@ -42,9 +44,9 @@
               />
             </q-item-section>
             <q-item-section>
-              <q-item-label lines="1" v-if="!item.is_terms_accepted">
-                <q-badge  color="secondary">
-                  {{ $t('user_block__user_pending') }}
+              <q-item-label lines="1" v-if="getUserStatus(item) && getUserStatus(item)?.status">
+                <q-badge  :color="getUserStatus(item)?.color">
+                  {{ $t(getUserStatus(item)?.text ?? '') }}
                 </q-badge>
               </q-item-label>
               <q-item-label lines="1" class="text-bold" v-if="item.section1">
@@ -244,6 +246,7 @@
   import { useUsersStore } from 'stores/users'
   import { useCompaniesStore } from 'stores/companies'
   import { useUserSection } from 'composables/useUserSection'
+  import { getUserStatus } from 'utils/users'
   
   defineOptions({ inheritAttrs: false })