first commit

resources/js/views/apps/chat/ChatLeftSidebarContent.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+import { useChat } from './useChat'
+import ChatContact from '@/views/apps/chat/ChatContact.vue'
+import { useChatStore } from '@/views/apps/chat/useChatStore'
+
+const props = defineProps({
+  search: {
+    type: String,
+    required: true,
+  },
+  isDrawerOpen: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const emit = defineEmits([
+  'openChatOfContact',
+  'showUserProfile',
+  'close',
+  'update:search',
+])
+
+const { resolveAvatarBadgeVariant } = useChat()
+const search = useVModel(props, 'search', emit)
+const store = useChatStore()
+</script>
+
+<template>
+  <!-- 👉 Chat list header -->
+  <div
+    v-if="store.profileUser"
+    class="chat-list-header gap-4"
+  >
+    <VBadge
+      dot
+      location="bottom right"
+      offset-x="3"
+      offset-y="3"
+      :color="resolveAvatarBadgeVariant(store.profileUser.status)"
+      bordered
+    >
+      <VAvatar
+        class="cursor-pointer"
+        @click="$emit('showUserProfile')"
+      >
+        <VImg
+          :src="store.profileUser.avatar"
+          alt="John Doe"
+        />
+      </VAvatar>
+    </VBadge>
+
+    <VTextField
+      v-model="search"
+      placeholder="Search..."
+      prepend-inner-icon="ri-search-line"
+      density="compact"
+      class="chat-list-search"
+    />
+
+    <IconBtn
+      v-if="$vuetify.display.smAndDown"
+      @click="$emit('close')"
+    >
+      <VIcon
+        icon="ri-close-line"
+        class="text-medium-emphasis"
+      />
+    </IconBtn>
+  </div>
+  <VDivider />
+
+  <PerfectScrollbar
+    tag="ul"
+    class="chat-contacts-list px-3 d-flex flex-column gap-1"
+    :options="{ wheelPropagation: false }"
+  >
+    <li class="list-none">
+      <span class="chat-contact-header d-block text-primary text-lg font-weight-medium">Chats</span>
+    </li>
+    <ChatContact
+      v-for="contact in store.chatsContacts"
+      :key="`chat-${contact.id}`"
+      :user="contact"
+      is-chat-contact
+      @click="$emit('openChatOfContact', contact.id)"
+    />
+    <span
+      v-show="!store.chatsContacts.length"
+      class="no-chat-items-text text-disabled"
+    >No chats found</span>
+    <li class="list-none">
+      <span class="chat-contact-header d-block text-primary text-lg font-weight-medium">Contacts</span>
+    </li>
+    <ChatContact
+      v-for="contact in store.contacts"
+      :key="`chat-${contact.id}`"
+      :user="contact"
+      @click="$emit('openChatOfContact', contact.id)"
+    />
+    <span
+      v-show="!store.contacts.length"
+      class="no-chat-items-text text-disabled"
+    >No contacts found</span>
+  </PerfectScrollbar>
+</template>
+
+<style lang="scss">
+.chat-contacts-list {
+  --chat-content-spacing-x: 12px;
+
+  padding-block-end: 0.75rem;
+
+  .chat-contact-header {
+    margin-block: 1rem 4px;
+    margin-inline: 1rem;
+  }
+
+  .no-chat-items-text {
+    margin-inline: var(--chat-content-spacing-x);
+  }
+}
+</style>