wip

src/components/Messages/MessageToolbar.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import type { User } from '@/stores/users.ts'
+interface Props {
+  name: string
+  image?: string
+}
 
-const {user} = defineProps<{ user: User }>()
+const { name, image } = defineProps<Props>()
 </script>
 
 <template>
-  <VToolbar class="px-2">
+  <VToolbar theme="dark" class="px-2">
     <VAvatar text="A" color="primary" />
-    <VToolbarTitle :text="user.name" />
+    <VToolbarTitle :text="name" />
   </VToolbar>
 </template>
 

src/components/Messages/MessagesForm.vue

@@ -2,33 +2,27 @@
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 import { useScroll } from '@vueuse/core'
 import type { User } from '@/stores/users.ts'
+import { useChatsStore } from '@/stores/chats.ts'
 
-const area = useTemplateRef('messageArea')
+const chatsStore = useChatsStore()
 
+// const area = useTemplateRef('messageArea')
 // const { y, arrivedState } = useScroll(area)
-
 // const messages = computed(() => {
 // return [...messagesStore.messages]
 // })
-
 // async function scrollToBottom() {
 //   await nextTick()
 //   if (area.value) y.value = area.value?.scrollHeight
 // }
 
-const user = ref<User>({
-  id: 1,
-  name: 'test',
-  email: 'test@test.ru',
-})
-
 const messages = ref([])
 </script>
 
 <template>
   <div class="flex h-full flex-col overflow-hidden">
-    <div class="grow-0">
-      <slot name="toolbar" :user="user" />
+    <div class="grow-0" v-if="chatsStore.selectedChat">
+      <slot name="toolbar" :toolBarData="chatsStore.getChatInfo(chatsStore.selectedChat)" />
     </div>
     <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
       <slot :messages="messages" />

src/components/Messages/MessagesList.vue

@@ -7,29 +7,6 @@ const { messages } = defineProps<{ messages: Message[] }>()
 
 <template>
   <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData on-right-side>Hello world</MessageData>
-  <MessageData on-right-side>Hello world</MessageData>
-  <MessageData on-right-side>Hello world</MessageData>
-  <MessageData on-right-side>Hello world</MessageData>
-  <MessageData on-right-side>Hello world</MessageData>
-  <MessageData on-right-side>Hello world</MessageData>
-  <MessageData on-right-side>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
-  <MessageData>Hello world</MessageData>
 </template>
 
 <style scoped></style>