wip

src/components/Chats/ChatListElement.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type Chat, useChatsStore } from '@/stores/chats.ts'
 import { computed } from 'vue'
-import { useMessagesStore } from '@/stores/messages.ts'
+import { shortDate } from '@/helpers'
 
 interface Props {
   chat: Chat
@@ -15,8 +15,7 @@ const chatInfo = computed(() => {
 })
 
 const convertDate = (dateString: string) => {
-  const date = new Date(dateString)
-  return date.toLocaleTimeString('ru-RU', { timeStyle: 'short' })
+  return shortDate(new Date(dateString))
 }
 </script>
 
@@ -39,7 +38,7 @@ const convertDate = (dateString: string) => {
 
     <template v-if="chat.message" #subtitle>
       <div class="flex justify-between">
-        <div>{{ chat.message.message }}</div>
+        <div class="truncate text-nowrap">{{ chat.message.message }}</div>
         <div class="text-xs">
           <!--          <VChip v-show="true" size="small" text="0" />-->
         </div>

src/components/LeftPane.vue

@@ -22,9 +22,9 @@ const component = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full gap-2">
+  <VSheet theme="dark" class="d-flex flex-col h-100">
     <slot :component="component" />
-  </div>
+  </VSheet>
 </template>
 
 <style scoped></style>

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>

src/helpers/index.ts

@@ -0,0 +1,3 @@
+export function shortDate(date: Date) {
+  return date.toLocaleTimeString('ru-RU', { timeStyle: 'short' })
+}

src/main.ts

@@ -12,7 +12,6 @@ import * as directives from 'vuetify/directives'
 
 import App from './App.vue'
 import { version } from 'vue'
-import theme from '@/themes/noir.ts'
 
 const app = createApp(App)
 console.log('version', version)
@@ -29,7 +28,7 @@ const vuetify = createVuetify({
   defaults: {
     VAvatar: { density: 'compact' },
     VChip: { density: 'compact' },
-    VBtn: { color: 'black', variant: 'flat' },
+    VBtn: { variant: 'flat' },
     VSwitch: { color: 'black', hideDetails: true },
     VOtpInput: { density: 'compact' },
     VTextField: { color: 'black', density: 'compact', variant: 'outlined', hideDetails: true },