wip

src/components/Messages/MessageItem.vue

@@ -1,27 +1,25 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { shortDate } from '@/helpers'
+import { useAuthStore } from '@/stores/auth.ts'
 
 interface Props {
   createdAt?: string
-  username?: string
-  onRightSide?: boolean
+  userId: number
   message?: string
 }
 
-const { message, username, createdAt } = withDefaults(defineProps<Props>(), {
-  my: false,
-  message: 'foobar',
-  username: 'robot',
-})
+const authStore = useAuthStore()
+
+const { message = 'foobar', userId, createdAt } = defineProps<Props>()
 
 const messageDate = computed(() => {
-  return createdAt
-    ? new Date(createdAt).toLocaleTimeString('ru-RU', { timeStyle: 'short' })
-    : new Date().toLocaleTimeString('ru-RU', { timeStyle: 'short' })
+  const date = createdAt ? new Date(createdAt) : new Date()
+  return shortDate(date)
 })
 
-const avatarLetter = computed(() => {
-  return username.slice(0, 1).toUpperCase()
+const isMyMessage = computed(() => {
+  return authStore.me?.id === userId
 })
 </script>
 
@@ -39,17 +37,12 @@ const avatarLetter = computed(() => {
   <!--    </div>-->
   <!--  </div>-->
 
-  <div class="flex gap-2" :class="{ 'flex-row-reverse': onRightSide }">
-    <!--    <v-avatar size="36" color="deep-purple-lighten-4">-->
-    <!--      <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
-    <!--    </v-avatar>-->
-
-    <!--    :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
-    <div class="flex gap-1 pa-4" :class="onRightSide ? 'bg-blue-400' : 'bg-white'">
-      <span class="">{{ message }}</span>
+  <VSheet class="d-flex" color="transparent" :class="{ 'flex-row-reverse': isMyMessage }">
+    <div class="flex gap-2 pa-4 rounded" :class="isMyMessage ? 'bg-blue-200' : 'bg-white'">
+      <span>{{ message }}</span>
       <span class="text-xs self-end">{{ messageDate }}</span>
     </div>
-  </div>
+  </VSheet>
 </template>
 
 <style scoped></style>

src/components/Messages/MessagesList.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import MessageData from '@/components/Messages/MessageData.vue'
-import type { Message } from '@/stores/messages.ts'
-
-const { messages } = defineProps<{ messages: Message[] }>()
-</script>
-
-<template>
-  <MessageData v-for="message in messages" :key="message.id" />
-</template>
-
-<style scoped></style>

src/components/Messages/MessagesWrapper.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
-import { useScroll } from '@vueuse/core'
-import type { User } from '@/stores/users.ts'
+import { computed } from 'vue'
 import { useChatsStore } from '@/stores/chats.ts'
 import { useMessagesStore } from '@/stores/messages.ts'
 
@@ -24,8 +22,6 @@ const chatInfo = computed(() => {
   }
   return null
 })
-
-const messages = ref([])
 </script>
 
 <template>