before liquid glass

src/components/pnChatTypeItem.vue

@@ -1,45 +1,47 @@
 <template>
    <q-item>
     <q-item-section avatar>
-      <q-avatar 
-        rounded 
-        text-color="white" 
-        :icon="chatType.icon"
-        :color="chatType.color"
-        size="md"
-      />
+      <q-icon :name="chat.icon" :color="chat.color" size="md"/>
     </q-item-section>
     <q-item-section>
       <q-item-label>
         <div class="row no-wrap items-center justify-between">
-          {{ $t(chatType.label) }}
-          <span class="text-caption text-grey" v-if="time">
-            {{ date.formatDate(time * 1000, 'DD MMM YYYY') }}
+          {{ $t(chat.label) }}
+          <span class="text-caption text-grey text-no-wrap" v-if="time">
+            {{ getDate(time) }}
           </span>
         </div>
       </q-item-label>
       <q-item-label class="text-grey text-caption">
-        {{ $t(chatType.description) }}
+        {{ $t(chat.description) }}
       </q-item-label>
     </q-item-section>
   </q-item>
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import { getChatType } from 'utils/chats'
+  import { chatAccess, chatState } from 'utils/chats'
   import { date } from 'quasar' 
-  import type { ChatType } from 'types/Chat'
 
-  const props = withDefaults(defineProps<{
-    type: ChatType
+  const props = defineProps<{
+    access?: 0 | 1 | 2
+    state?: 1 | 2 | 3 | 4  
     time?: number
-  }>(), {
-    type: 'full'
-  })
+  }>()
+
+  const chat = props.access
+    ? chatAccess(props.access)
+    : props.state
+      ? chatState(props.state)
+      : { info: '', icon: '', color: '', label: '', description: '' }
+
+  function getDate (d: number) {
+    return new Date(d * 1000).getFullYear() === new Date(Date.now()).getFullYear()
+    ? date.formatDate(d * 1000, 'DD MMM')
+    : date.formatDate(d * 1000, 'DD MMM YY')
+  }
 
-  const chatType = computed(() => getChatType(props.type))
 </script>
 
 <style scoped>
-</style>
+</style>