wip

2026-03-20 09:56:14 +03:00 · 2026-03-17 18:22:19 +03:00 · 2026-03-16 00:03:27 +03:00 · 2026-03-15 20:55:00 +03:00 · 2026-03-12 20:50:31 +03:00 · 2026-03-11 17:56:17 +03:00
48 changed files with 581 additions and 1009 deletions
--- a/index.html
+++ b/index.html
@@ -3,6 +3,9 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wdth@0,75..100;1,75..100&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
        "primevue": "^4.5.4",
        "tailwindcss": "^4.2.1",
        "tailwindcss-primeui": "^0.6.1",
-        "vue": "^3.5.28"
+        "vue": "^3.5.28",
+        "vuetify": "^4.0.2"
      },
      "devDependencies": {
        "@mdi/font": "^7.4.47",
@@ -5841,6 +5842,33 @@
        "typescript": ">=5.0.0"
      }
    },
+    "node_modules/vuetify": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.0.2.tgz",
+      "integrity": "sha512-klgSGmfXoLajdTuuxreilzDQjp0ojzL2U5v6Z3ZbMYtpihPPXT9rkd/FxWL3dIGevnWdgaP2Kpwoz6aS/MISDA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": ">=2.1.0",
+        "vue": "^3.5.0",
+        "webpack-plugin-vuetify": ">=3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
    "primevue": "^4.5.4",
    "tailwindcss": "^4.2.1",
    "tailwindcss-primeui": "^0.6.1",
-    "vue": "^3.5.28"
+    "vue": "^3.5.28",
+    "vuetify": "^4.0.2"
  },
  "devDependencies": {
    "@mdi/font": "^7.4.47",
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,8 +7,8 @@ const authStore = useAuthStore()
 </script>

 <template>
-  <div class="h-screen bg-gray-200">
-    <div class="h-full m-auto p-4">
+  <div class="h-screen bg-gray-500">
+    <div class="h-full m-auto py-4 md:w-full sm:w-full w-full">
      <MainView v-if="authStore.isAuth" />
      <SignInView v-else />
    </div>
--- a/src/assets/custom.css
+++ b/src/assets/custom.css
@@ -1,53 +0,0 @@
-html {
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: "Inter", sans-serif;
-  font-optical-sizing: auto;
-  font-variation-settings: normal;
-  font-weight: 400;
-}
-
-/* Light */
-:root {
-  --p-primary-color: var(--p-primary-500);
-  --p-primary-contrast-color: var(--p-surface-0);
-  --p-primary-hover-color: var(--p-primary-600);
-  --p-primary-active-color: var(--p-primary-700);
-  --p-content-border-color: var(--p-surface-200);
-  --p-content-hover-background: var(--p-surface-100);
-  --p-content-hover-color: var(--p-surface-800);
-  --p-highlight-background: var(--p-primary-50);
-  --p-highlight-color: var(--p-primary-700);
-  --p-highlight-focus-background: var(--p-primary-100);
-  --p-highlight-focus-color: var(--p-primary-800);
-  --p-text-color: var(--p-surface-700);
-  --p-text-hover-color: var(--p-surface-800);
-  --p-text-muted-color: var(--p-surface-500);
-  --p-text-hover-muted-color: var(--p-surface-600);
-}
-
-/* Dark */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --p-primary-color: var(--p-primary-400);
-    --p-primary-contrast-color: var(--p-surface-900);
-    --p-primary-hover-color: var(--p-primary-300);
-    --p-primary-active-color: var(--p-primary-200);
-    --p-content-border-color: var(--p-surface-700);
-    --p-content-hover-background: var(--p-surface-800);
-    --p-content-hover-color: var(--p-surface-0);
-    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
-    --p-highlight-color: rgba(255, 255, 255, 0.87);
-    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
-    --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
-    --p-text-color: var(--p-surface-0);
-    --p-text-hover-color: var(--p-surface-0);
-    --p-text-muted-color: var(--p-surface-400);
-    --p-text-hover-muted-color: var(--p-surface-300);
-  }
-}
-
-.p-dark {
-  color-scheme: dark;
-}
--- a/src/assets/default.css
+++ b/src/assets/default.css
@@ -1,26 +0,0 @@
-:root {
-  --p-primary-50: #ecfdf5;
-  --p-primary-100: #d1fae5;
-  --p-primary-200: #a7f3d0;
-  --p-primary-300: #6ee7b7;
-  --p-primary-400: #34d399;
-  --p-primary-500: #10b981;
-  --p-primary-600: #059669;
-  --p-primary-700: #047857;
-  --p-primary-800: #065f46;
-  --p-primary-900: #064e3b;
-  --p-primary-950: #022c22;
-  --p-surface-0: #ffffff;
-  --p-surface-50: #fafafa;
-  --p-surface-100: #f4f4f5;
-  --p-surface-200: #e4e4e7;
-  --p-surface-300: #d4d4d8;
-  --p-surface-400: #a1a1aa;
-  --p-surface-500: #71717a;
-  --p-surface-600: #52525b;
-  --p-surface-700: #3f3f46;
-  --p-surface-800: #27272a;
-  --p-surface-900: #18181b;
-  --p-surface-950: #09090b;
-  --p-content-border-radius: 6px;
-}
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,9 @@
@import "tailwindcss";
-@import "tailwindcss-primeui";
-@import "primeicons/primeicons.css";
+
+html {
+  font-size: 16px;
+  font-weight: 400;
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
--- a/src/assets/main1.css
+++ b/src/assets/main1.css
@@ -1,137 +0,0 @@
-.chat-fullscreen {
-  height: 100vh;
-}
-
-input,
-button {
-  border: 1px solid black;
-}
-
-.h-100 {
-  height: 100%;
-}
-
-.h-20r {
-  height: 20rem;
-}
-
-.h-40r {
-  height: 40rem;
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.w-5r {
-  width: 5rem
-}
-
-.w-20r {
-  width: 20rem
-}
-
-.w-40r {
-  width: 40rem
-}
-
-.w-50r {
-  width: 50rem
-}
-
-.w-60r {
-  width: 60rem
-}
-
-.margin-auto {
-  margin: 0 auto;
-}
-
-.border {
-  border: 1px solid black;
-}
-.d-flex {
-  display: flex;
-}
-.flex-column {
-  flex-direction: column;
-}
-.flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.flex-column-reverse {
-  flex-direction: column-reverse;
-}
-
-.flex-grow-0 {
-  flex-grow: 0;
-}
-
-.flex-grow-1 {
-  flex-grow: 1;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.overflow-y-auto{
-  overflow-y: auto;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-
-.ga-2 {
-  gap: .5rem;
-}
-
-.ga-4 {
-  gap: 1rem;
-}
-
-.pa-1 {
-  padding: .25rem;
-}
-.pa-2 {
-  padding: .5rem;
-}
-
-.pa-4 {
-  padding: 1rem;
-}
-
-.py-4 {
-  padding: 1rem 0;
-}
-
-.px-4 {
-  padding: 0 1rem;
-}
-
-.px-8 {
-  padding: 0 2rem;
-}
-
-.red {
-  background: #e68181;
-}
-
-.blue {
-  background: #5d5ded;
-}
-
-.green {
-  background: #82e882;
-}
-
-.yellow {
-  background: #eaea83;
-}
--- a/src/assets/main_.css
+++ b/src/assets/main_.css
@@ -0,0 +1,13 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@import "primeicons/primeicons.css";
+
+html {
+  font-size: 13px;
+  font-weight: 400;
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
+.p-component, .p-component * {}
--- a/src/components/AppMenu.vue
+++ b/src/components/AppMenu.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { JustList, JustListItem, JustNav } from '@/components/simple'
-import { ref } from 'vue'
+import { type SelectedMenu, useMenuStore } from '@/stores/menu.ts'

-const model = defineModel<string>()
+const menuStore = useMenuStore()

-function onSelect(value: string) {
-  model.value = value
+function onSelect(value: SelectedMenu) {
+  menuStore.selected = value
 }
 </script>

@@ -13,7 +13,7 @@ function onSelect(value: string) {
  <JustNav>
    <JustList>
      <JustListItem value="users" icon="mdi-account" @click="onSelect" />
-      <JustListItem value="messages" icon="mdi-message" @click="onSelect" />
+      <JustListItem value="chats" icon="mdi-message" @click="onSelect" />
      <JustListItem value="settings" icon="mdi-cog" @click="onSelect" />
    </JustList>
  </JustNav>
--- a/src/components/BackToChats.vue
+++ b/src/components/BackToChats.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useMenuStore } from '@/stores/menu.ts'
+
+const menuStore = useMenuStore()
+</script>
+
+<template>
+  <VBtn
+    icon="mdi-arrow-left"
+    color="default"
+    size="small"
+    @click="menuStore.selected = ['chats']"
+  />
+</template>
+
+<style scoped></style>
--- a/src/components/ChatListElement.vue
+++ b/src/components/ChatListElement.vue
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { Chat } from '@/stores/chats.ts'
-import { useAuthStore } from '@/stores/auth.ts'
-import { computed } from 'vue'
-
-interface Props {
-  chat: Chat
-}
-
-const { chat } = defineProps<Props>()
-const authStore = useAuthStore()
-
-const getChatName = computed(() => {
-  if (chat.type_id === 2) {
-    return chat.name
-  } else if (chat.type_id === 1) {
-    const otherUsers = chat.users.filter((user) => user.id !== authStore.me?.id)
-    return otherUsers[0]?.name ?? otherUsers[0]?.email ?? 'unknown'
-  }
-
-  return 'unknown ID'
-})
-</script>
-
-<template>
-  <div class="border p-2">
-    <!--    {{ chat }}-->
-    <div>id:{{ chat.id }}</div>
-    <div>name:{{ chat.name }}</div>
-    <div>type:{{ chat.type_id }}</div>
-    <div>chatName:{{ getChatName }}</div>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/components/Chats/ChatListElement.vue
+++ b/src/components/Chats/ChatListElement.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { type Chat, useChatsStore } from '@/stores/chats.ts'
+import { computed } from 'vue'
+import { useMessagesStore } from '@/stores/messages.ts'
+
+interface Props {
+  chat: Chat
+}
+
+const { chat } = defineProps<Props>()
+const chatsStore = useChatsStore()
+
+const chatInfo = computed(() => {
+  return chatsStore.getChatInfo(chat)
+})
+
+const convertDate = (dateString: string) => {
+  const date = new Date(dateString)
+  return date.toLocaleTimeString('ru-RU', { timeStyle: 'short' })
+}
+</script>
+
+<template>
+  <VListItem :value="chat.id">
+    <template v-slot:prepend>
+      <VAvatar color="primary" :text="chatInfo?.name.slice(0, 1).toUpperCase()" />
+    </template>
+
+    <template #title>
+      <div class="flex justify-between">
+        <div class="font-medium truncate">
+          {{ chatInfo.name }}
+        </div>
+        <div v-if="chat.message" class="text-xs">
+          {{ convertDate(chat.message.createdAt) }}
+        </div>
+      </div>
+    </template>
+
+    <template v-if="chat.message" #subtitle>
+      <div class="flex justify-between">
+        <div>{{ chat.message.message }}</div>
+        <div class="text-xs">
+          <!--          <VChip v-show="true" size="small" text="0" />-->
+        </div>
+      </div>
+    </template>
+
+    <!--    <template v-slot:append>-->
+    <!--      <div class="flex flex-col">-->
+    <!--        <div class="text-sm">{{ lastMessageCreatedAt }}</div>-->
+    <!--        <VChip v-show="true" size="small">0</VChip>-->
+    <!--      </div>-->
+    <!--    </template>-->
+  </VListItem>
+</template>
+
+<style scoped></style>
--- a/src/components/Chats/ChatsList.vue
+++ b/src/components/Chats/ChatsList.vue
@@ -1,37 +1,55 @@
 <script setup lang="ts">
 import { useChatsStore } from '@/stores/chats.ts'
 import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
-import ChatListElement from '@/components/ChatListElement.vue'
+import { watchEffect } from 'vue'
+import { useMenuStore } from '@/stores/menu.ts'
+import ChatListElement from '@/components/Chats/ChatListElement.vue'

 const chatsStore = useChatsStore()
 const socketsStore = useSocketsStore()
+const menuStore = useMenuStore()

-function onSelect(id: string) {
-  const chatId = id
-  chatsStore.selected = chatId
+watchEffect(() => getMessages(chatsStore.selected))

-  socketsStore.send({
-    type: SocketDataReq.GET_MESSAGES,
-    data: { chat_id: chatId },
-  })
+function getMessages([selected]: string[]) {
+  if (selected) {
+    socketsStore.send({
+      type: SocketDataReq.GET_MESSAGES,
+      data: { chatId: selected },
+    })
+  }
 }
 </script>

 <template>
-  <div class="flex flex-col gap-2 h-full overflow-hidden px-2">
-    <div>chats</div>
+  <div class="flex flex-col h-full">
+    <VToolbar theme="dark" class="px-2">
+      <VMenu transition="slide-y-transition">
+        <template v-slot:activator="{ props }">
+          <VBtn size="small" icon="mdi-menu" class="mr-2" color="white" v-bind="props" />
+        </template>
+        <VList
+          class="top-1"
+          width="200"
+          density="compact"
+          slim
+          v-model:selected="menuStore.selected"
+        >
+          <VListItem class="pa-0">
+            <div class="bg-amber-600 flex justify-center">HELLO WORLD</div>
+          </VListItem>
+          <VListItem value="users" title="Contacts" prepend-icon="mdi-account" />
+          <VListItem value="settings" title="Settings" prepend-icon="mdi-cog" />
+          <VDivider class="my-1" />
+          <VListItem value="logout" title="Log Out" prepend-icon="mdi-logout" />
+        </VList>
+      </VMenu>

-    <!--    <div class="overflow-y-auto">-->
-    <!--      <div v-for="i in 30" :key="i" class="pa-4 border">bla</div>-->
-    <!--    </div>-->
-    <div class="flex flex-col gap-2 h-full overflow-y-auto">
-      <chat-list-element
-        v-for="chat in chatsStore.chats"
-        :key="chat.id"
-        v-bind="{ chat }"
-        @click="onSelect(chat.id)"
-      />
-    </div>
+      <VTextField bg-color="black" prepend-inner-icon="mdi-magnify" placeholder="search chat" />
+    </VToolbar>
+    <VList theme="dark" v-model:selected="chatsStore.selected" mandatory lines="one">
+      <ChatListElement v-for="chat in chatsStore.chats" :key="chat.id" :chat />
+    </VList>
  </div>
 </template>

--- a/src/components/LeftPane.vue
+++ b/src/components/LeftPane.vue
@@ -1,46 +1,29 @@
 <script setup lang="ts">
-import ChatToolbar from '@/components/ChatToolbar.vue'
-import ChatList from '@/components/ChatList.vue'
-import { useAuthStore } from '@/stores/auth.ts'
-import { type Chat, useChatsStore } from '@/stores/chats.ts'
-import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
-import UserList from '@/components/Users/UserList.vue'
+import { useMenuStore } from '@/stores/menu.ts'
+import { computed } from 'vue'
+import ChatsList from '@/components/Chats/ChatsList.vue'
+import UsersList from '@/components/Users/UsersList.vue'
+import SettingsList from '@/components/Settings/SettingsList.vue'

-const authStore = useAuthStore()
-const chatsStore = useChatsStore()
-const socketsStore = useSocketsStore()
+const menuStore = useMenuStore()

-interface Props {
-  selected: string
-}
-
-const props = defineProps()
-
-function onSelect(value: { id: unknown }) {
-  const chatId = value.id as string
-  chatsStore.selected = chatId
-
-  socketsStore.send({
-    type: SocketDataReq.GET_MESSAGES,
-    data: { chat_id: chatId },
-  })
-}
-
-function getChatName(chat: Chat) {
-  if (chat.type_id === 2) {
-    return chat.name
-  } else if (chat.type_id === 1) {
-    const otherUsers = chat.users.filter((user) => user.id !== authStore.me?.id)
-    return otherUsers[0]?.name ?? otherUsers[0]?.email ?? 'unknown'
+const component = computed(() => {
+  switch (menuStore.selected[0]) {
+    case 'chats':
+      return ChatsList
+    case 'users':
+      return UsersList
+    case 'settings':
+      return SettingsList
+    default:
+      return ChatsList
  }
-
-  return 'unknown ID'
-}
+})
 </script>

 <template>
-  <div class="w-full flex flex-col h-full gap-2">
-    <slot />
+  <div class="flex flex-col h-full gap-2">
+    <slot :component="component" />
  </div>
 </template>

--- a/src/components/MessageForm.vue
+++ b/src/components/MessageForm.vue
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
-import { useChatsStore } from '@/stores/chats.ts'
-
-const socketsStore = useSocketsStore()
-const chatsStore = useChatsStore()
-
-const text = ref('')
-
-const sendMessage = () => {
-  if (text.value.trim()) {
-    socketsStore.send({
-      type: SocketDataReq.CREATE_MESSAGE,
-      data: {
-        chat_id: chatsStore.selected,
-        text: text.value,
-      },
-    })
-  }
-  text.value = ''
-}
-
-const isEmptyText = computed(() => {
-  return !text.value
-})
-</script>
-
-<template>
-  <div class="d-flex ga-2 border pa-4">
-    <input v-model="text" placeholder="message" @keyup.enter="sendMessage" />
-    <button><span class="mdi mdi-emoticon-outline"></span></button>
-    <button><span class="mdi mdi-paperclip"></span></button>
-    <button :disabled="isEmptyText" @click="sendMessage">
-      <span class="mdi mdi-send"></span>
-    </button>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/components/MessageToolbar.vue
+++ b/src/components/MessageToolbar.vue
@@ -1,10 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="d-flex ga-2 pa-4 border">
-    <div>V</div>
-    <div>name</div>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/components/Messages/ChatMessageTextExample.vue
+++ b/src/components/Messages/ChatMessageTextExample.vue
--- a/src/components/Messages/MessageInput.vue
+++ b/src/components/Messages/MessageInput.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
+import { useChatsStore } from '@/stores/chats.ts'
+
+const socketsStore = useSocketsStore()
+const chatsStore = useChatsStore()
+
+const message = ref('')
+
+const sendMessage = () => {
+  if (message.value && chatsStore.selectedChat) {
+    socketsStore.send({
+      type: SocketDataReq.CREATE_MESSAGE,
+      data: {
+        chatId: chatsStore.selectedChat.id,
+        message: message.value.trim().slice(0, 200),
+      },
+    })
+  }
+  message.value = ''
+}
+
+const isEmptyText = computed(() => {
+  return !message.value
+})
+</script>
+
+<template>
+  <div class="flex gap-2 pa-2 items-center">
+    <VTextField
+      prepend-inner-icon="mdi-emoticon-outline"
+      append-inner-icon="mdi-paperclip"
+      bg-color="white"
+      v-model="message"
+      placeholder="message"
+      density="default"
+      @keyup.enter="sendMessage"
+    />
+
+    <VBtn :disabled="isEmptyText" icon="mdi-send" @click="sendMessage" color="primary" />
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/components/Messages/MessageItem.vue
+++ b/src/components/Messages/MessageItem.vue
@@ -1,23 +1,27 @@
 <script setup lang="ts">
 import { computed } from 'vue'

-const props = withDefaults(
-  defineProps<{ createdAt?: string; username?: string; my?: boolean; text?: string }>(),
-  {
-    my: false,
-    text: 'foobar',
-    username: 'robot',
-  },
-)
+interface Props {
+  createdAt?: string
+  username?: string
+  onRightSide?: boolean
+  message?: string
+}

-const createdAt = computed(() => {
-  return props.createdAt
-    ? new Date(props.createdAt).toLocaleTimeString('ru-RU', { timeStyle: 'short' })
+const { message, username, createdAt } = withDefaults(defineProps<Props>(), {
+  my: false,
+  message: 'foobar',
+  username: 'robot',
+})
+
+const messageDate = computed(() => {
+  return createdAt
+    ? new Date(createdAt).toLocaleTimeString('ru-RU', { timeStyle: 'short' })
    : new Date().toLocaleTimeString('ru-RU', { timeStyle: 'short' })
 })

 const avatarLetter = computed(() => {
-  return props.username.slice(0, 1).toUpperCase()
+  return username.slice(0, 1).toUpperCase()
 })
 </script>

@@ -35,15 +39,15 @@ const avatarLetter = computed(() => {
  <!--    </div>-->
  <!--  </div>-->

-  <div class="flex gap-2 border" :class="{ 'flex-row-reverse': props.my }">
+  <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="pa-4" :class="props.my ? 'bg-blue-400' : 'bg-white'">
-      <span class="">{{ props.text }}</span>
-      <span class="">{{ createdAt }}</span>
+    <div class="flex gap-1 pa-4" :class="onRightSide ? 'bg-blue-400' : 'bg-white'">
+      <span class="">{{ message }}</span>
+      <span class="text-xs self-end">{{ messageDate }}</span>
    </div>
  </div>
 </template>
--- a/src/components/Messages/MessageToolbar.vue
+++ b/src/components/Messages/MessageToolbar.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+interface Props {
+  name?: string
+  image?: string
+}
+
+const { name, image } = defineProps<Props>()
+</script>
+
+<template>
+  <VToolbar theme="dark" class="px-2">
+    <VAvatar :text="name?.slice(0, 1).toUpperCase()" color="primary" />
+    <VToolbarTitle :text="name" />
+  </VToolbar>
+</template>
+
+<style scoped></style>
--- a/src/components/Messages/MessagesList.vue
+++ b/src/components/Messages/MessagesList.vue
@@ -0,0 +1,12 @@
+<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>
--- a/src/components/Messages/MessagesWrapper.vue
+++ b/src/components/Messages/MessagesWrapper.vue
@@ -0,0 +1,45 @@
+<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 { useChatsStore } from '@/stores/chats.ts'
+import { useMessagesStore } from '@/stores/messages.ts'
+
+const chatsStore = useChatsStore()
+const messagesStore = useMessagesStore()
+
+// 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 chatInfo = computed(() => {
+  if (chatsStore.selectedChat) {
+    return chatsStore.getChatInfo(chatsStore.selectedChat)
+  }
+  return null
+})
+
+const messages = ref([])
+</script>
+
+<template>
+  <div class="flex h-full flex-col overflow-hidden">
+    <div class="grow-0" v-if="chatsStore.selectedChat">
+      <slot name="toolbar" :info="chatInfo" />
+    </div>
+    <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
+      <slot :messages="messagesStore.messages" />
+    </div>
+    <div class="grow-0">
+      <slot name="input" />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/components/RightPane.vue
+++ b/src/components/RightPane.vue
@@ -1,54 +1,27 @@
 <script setup lang="ts">
-import MessageToolbar from '@/components/MessageToolbar.vue'
-import MessageForm from '@/components/MessageForm.vue'
-import MessageData from '@/components/MessageData.vue'
-import { useMessagesStore } from '@/stores/messages.ts'
-import { useAuthStore } from '@/stores/auth.ts'
-import { computed, nextTick, useTemplateRef, watch } from 'vue'
-import { useScroll } from '@vueuse/core'
+import MessageToolbar from '@/components/Messages/MessageToolbar.vue'
+import MessageInput from '@/components/Messages/MessageInput.vue'
 import { useChatsStore } from '@/stores/chats.ts'
+import MessageItem from '@/components/Messages/MessageItem.vue'
+import MessagesWrapper from '@/components/Messages/MessagesWrapper.vue'

-const authStore = useAuthStore()
-const messagesStore = useMessagesStore()
 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
-}
-
-watch(messages, async () => {
-  await scrollToBottom()
-})
 </script>

 <template>
-  <div class="w-full h-full bg-blue-200 border">
-    <!--    <button class="position-absolute scroll-down" @click="scrollToBottom">UP</button>-->
+  <div class="h-full bg-gray-100">
    <div class="flex flex-col h-full">
-      <div class="flex h-full flex-col overflow-hidden">
-        <message-toolbar class="grow-0" />
-
-        <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
-          <message-data
-            v-for="message in messages"
-            :key="message.id"
-            :text="message.text"
-            :my="authStore.me?.id === message.user_id"
-            :created-at="message.created_at"
-          ></message-data>
-          <!--          <div class="p-4 border" v-for="v in 101" :key="v">text {{ v }}</div>-->
-        </div>
-
-        <message-form class="grow-0 bg-green-200" />
-      </div>
+      <MessagesWrapper v-if="chatsStore.selectedChat">
+        <template #toolbar="{ info }">
+          <MessageToolbar v-bind="info" />
+        </template>
+        <template #default="{ messages }">
+          <MessageItem v-for="message in messages" :key="message.id" v-bind="message" />
+        </template>
+        <template #input>
+          <MessageInput />
+        </template>
+      </MessagesWrapper>
    </div>
  </div>
 </template>
--- a/src/components/TestMenu1.vue
+++ b/src/components/TestMenu1.vue
@@ -1,270 +0,0 @@
-<template>
-  <v-container class="d-flex" style="height: 600px; gap: 16px">
-    <!-- Постоянный rail drawer на v-card -->
-    <v-card width="72" height="100%" elevation="3" class="rail-drawer" rounded="lg">
-      <!-- Логотип/бренд -->
-      <div class="d-flex justify-center py-4">
-        <v-avatar color="primary" size="40" class="brand-avatar">
-          <span class="text-white font-weight-bold">V</span>
-        </v-avatar>
-      </div>
-
-      <v-divider></v-divider>
-
-      <!-- Основная навигация -->
-      <v-list density="compact" nav class="px-2 py-2">
-        <v-list-item
-          v-for="item in mainMenu"
-          :key="item.title"
-          :value="item.title"
-          :active="activeItem === item.title"
-          @click="activeItem = item.title"
-          class="rail-list-item mb-1"
-          :class="{ 'active-item': activeItem === item.title }"
-        >
-          <template v-slot:prepend>
-            <v-badge
-              v-if="item.badge"
-              :content="item.badge"
-              color="error"
-              dot
-              location="bottom end"
-              offset-x="2"
-              offset-y="2"
-            >
-              <v-icon :icon="item.icon" size="24"></v-icon>
-            </v-badge>
-            <v-icon v-else :icon="item.icon" size="24"></v-icon>
-          </template>
-
-          <!-- Тултип с названием -->
-          <v-tooltip
-            activator="parent"
-            location="right"
-            transition="slide-x-transition"
-            :open-delay="300"
-          >
-            {{ item.title }}
-          </v-tooltip>
-        </v-list-item>
-      </v-list>
-
-      <v-divider></v-divider>
-
-      <!-- Нижняя группа иконок -->
-      <v-list density="compact" nav class="px-2 py-2" style="margin-top: auto">
-        <v-list-item
-          v-for="item in bottomMenu"
-          :key="item.title"
-          :value="item.title"
-          :active="activeItem === item.title"
-          @click="activeItem = item.title"
-          class="rail-list-item mb-1"
-        >
-          <template v-slot:prepend>
-            <v-icon :icon="item.icon" size="24"></v-icon>
-          </template>
-
-          <v-tooltip
-            activator="parent"
-            location="right"
-            transition="slide-x-transition"
-            :open-delay="300"
-          >
-            {{ item.title }}
-          </v-tooltip>
-        </v-list-item>
-      </v-list>
-
-      <!-- Профиль пользователя внизу -->
-      <div class="mt-auto">
-        <v-divider></v-divider>
-        <div class="d-flex justify-center py-3">
-          <v-menu location="top right" offset="15">
-            <template v-slot:activator="{ props }">
-              <v-avatar
-                size="44"
-                color="grey-lighten-2"
-                v-bind="props"
-                class="profile-avatar cursor-pointer"
-              >
-                <v-img src="https://randomuser.me/api/portraits/women/44.jpg"></v-img>
-                <v-tooltip activator="parent" location="right" :open-delay="300">
-                  Профиль
-                </v-tooltip>
-              </v-avatar>
-            </template>
-
-            <!-- Меню профиля -->
-            <v-card min-width="200" rounded="lg">
-              <v-list>
-                <v-list-item
-                  prepend-avatar="https://randomuser.me/api/portraits/women/44.jpg"
-                  title="Анна Петрова"
-                  subtitle="anna@email.com"
-                ></v-list-item>
-              </v-list>
-              <v-divider></v-divider>
-              <v-list>
-                <v-list-item
-                  prepend-icon="mdi-account"
-                  title="Мой профиль"
-                  value="profile"
-                ></v-list-item>
-                <v-list-item
-                  prepend-icon="mdi-cog"
-                  title="Настройки"
-                  value="settings"
-                ></v-list-item>
-                <v-list-item prepend-icon="mdi-logout" title="Выйти" value="logout"></v-list-item>
-              </v-list>
-            </v-card>
-          </v-menu>
-        </div>
-      </div>
-    </v-card>
-
-    <!-- Основной контент -->
-    <v-card class="flex-grow-1 content-area" elevation="2" rounded="lg">
-      <!-- Хедер контента -->
-      <div class="d-flex align-center pa-4">
-        <div class="text-h5 font-weight-medium">
-          {{ getActiveTitle }}
-        </div>
-        <v-spacer></v-spacer>
-        <v-btn icon="mdi-bell-outline" variant="text" size="small"></v-btn>
-        <v-btn icon="mdi-magnify" variant="text" size="small" class="mr-2"></v-btn>
-      </div>
-
-      <v-divider></v-divider>
-
-      <!-- Контент -->
-      <div class="pa-6">
-        <div class="text-h6 mb-4">Добро пожаловать в раздел "{{ getActiveTitle }}"</div>
-        <v-row>
-          <v-col v-for="n in 6" :key="n" cols="12" md="6" lg="4">
-            <v-card elevation="1" rounded="lg" class="content-card">
-              <v-card-item>
-                <v-card-title>Карточка {{ n }}</v-card-title>
-                <v-card-subtitle>Описание карточки {{ n }}</v-card-subtitle>
-              </v-card-item>
-              <v-card-text>
-                Контент карточки {{ n }}. Здесь может быть любая информация.
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-      </div>
-    </v-card>
-  </v-container>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-
-const activeItem = ref('Главная')
-
-const mainMenu = [
-  { title: 'Главная', icon: 'mdi-home-outline', activeIcon: 'mdi-home' },
-  { title: 'Профиль', icon: 'mdi-account-outline', activeIcon: 'mdi-account' },
-  { title: 'Сообщения', icon: 'mdi-message-outline', activeIcon: 'mdi-message', badge: '3' },
-  { title: 'Файлы', icon: 'mdi-folder-outline', activeIcon: 'mdi-folder' },
-  { title: 'Аналитика', icon: 'mdi-chart-line', activeIcon: 'mdi-chart-line' },
-  { title: 'Календарь', icon: 'mdi-calendar-outline', activeIcon: 'mdi-calendar' },
-]
-
-const bottomMenu = [
-  { title: 'Настройки', icon: 'mdi-cog-outline', activeIcon: 'mdi-cog' },
-  { title: 'Помощь', icon: 'mdi-help-circle-outline', activeIcon: 'mdi-help-circle' },
-]
-
-const getActiveTitle = computed(() => {
-  const found = [...mainMenu, ...bottomMenu].find((item) => item.title === activeItem.value)
-  return found ? found.title : 'Главная'
-})
-</script>
-
-<style scoped>
-.rail-drawer {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE/Edge */
-}
-
-.rail-drawer::-webkit-scrollbar {
-  display: none; /* Chrome/Safari */
-}
-
-.rail-list-item {
-  justify-content: center !important;
-  min-height: 48px !important;
-  padding: 0 8px !important;
-  border-radius: 12px !important;
-  transition: all 0.2s ease;
-}
-
-.rail-list-item:hover {
-  background-color: rgba(var(--v-theme-primary), 0.08) !important;
-  transform: scale(1.05);
-}
-
-.rail-list-item.active-item {
-  background-color: rgb(var(--v-theme-primary)) !important;
-}
-
-.rail-list-item.active-item .v-icon {
-  color: white !important;
-}
-
-.rail-list-item .v-icon {
-  transition: transform 0.2s ease;
-}
-
-.rail-list-item:hover .v-icon {
-  transform: scale(1.1);
-}
-
-.brand-avatar {
-  transition: all 0.3s ease;
-}
-
-.brand-avatar:hover {
-  transform: rotate(10deg) scale(1.1);
-}
-
-.profile-avatar {
-  transition: all 0.2s ease;
-  border: 2px solid transparent;
-}
-
-.profile-avatar:hover {
-  border-color: rgb(var(--v-theme-primary));
-  transform: scale(1.05);
-}
-
-.content-area {
-  overflow-y: auto;
-  background-color: rgb(var(--v-theme-background)) !important;
-}
-
-.content-card {
-  transition: all 0.2s ease;
-}
-
-.content-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
-}
-
-/* Анимация для тултипов */
-:deep(.v-tooltip .v-overlay__content) {
-  background-color: rgb(var(--v-theme-primary)) !important;
-  color: white !important;
-  font-weight: 500;
-  font-size: 0.85rem;
-  padding: 6px 12px !important;
-  border-radius: 8px !important;
-}
-</style>
--- a/src/components/TestMenu2.vue
+++ b/src/components/TestMenu2.vue
@@ -1,72 +0,0 @@
-<template>
-  <v-container class="d-flex ga-4" style="height: 500px">
-    <!-- Простой rail drawer -->
-    <v-card width="72" height="100%" elevation="0" class="simple-rail">
-      <div class="d-flex flex-column align-center py-4">
-        <v-avatar color="primary" size="40" class="mb-4">
-          <v-icon icon="mdi-vuetify" color="white"></v-icon>
-        </v-avatar>
-
-        <v-divider class="w-100 mb-2"></v-divider>
-
-        <v-list density="compact" nav class="w-100 px-1">
-          <v-list-item
-            v-for="icon in icons"
-            :key="icon.name"
-            :value="icon.name"
-            :active="active === icon.name"
-            @click="active = icon.name"
-            class="simple-item"
-          >
-            <template v-slot:prepend>
-              <v-icon :icon="icon.icon"></v-icon>
-            </template>
-          </v-list-item>
-        </v-list>
-
-        <v-spacer></v-spacer>
-
-        <v-divider class="w-100 my-2"></v-divider>
-
-        <v-avatar size="44" class="mt-2 cursor-pointer" color="grey-lighten-3">
-          <v-img src="https://randomuser.me/api/portraits/men/32.jpg"></v-img>
-          <v-tooltip activator="parent" location="right">Профиль</v-tooltip>
-        </v-avatar>
-      </div>
-    </v-card>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const active = ref('Главная')
-const icons = [
-  { name: 'Главная', icon: 'mdi-home' },
-  { name: 'Профиль', icon: 'mdi-account' },
-  { name: 'Сообщения', icon: 'mdi-message' },
-  { name: 'Настройки', icon: 'mdi-cog' },
-]
-</script>
-
-<style scoped>
-.simple-rail {
-  background-color: rgb(var(--v-theme-surface)) !important;
-}
-
-.simple-item {
-  justify-content: center !important;
-  min-height: 44px !important;
-  border-radius: 10px !important;
-  margin: 2px 0 !important;
-}
-
-.simple-item:hover {
-  background-color: rgba(var(--v-theme-primary), 0.1) !important;
-}
-
-.simple-item.v-list-item--active {
-  background-color: rgb(var(--v-theme-primary)) !important;
-  color: white !important;
-}
-</style>
--- a/src/components/Users/UsersList.vue
+++ b/src/components/Users/UsersList.vue
@@ -4,20 +4,17 @@ import { onMounted } from 'vue'
 import { useUsersStore } from '@/stores/users.ts'
 import UsersListElement from '@/components/Users/UsersListElement.vue'
 import { useAuthStore } from '@/stores/auth.ts'
+import BackToChats from '@/components/BackToChats.vue'

 const socketsStore = useSocketsStore()
 const usersStore = useUsersStore()
 const authStore = useAuthStore()

-function onInit() {
+onMounted(() => {
  socketsStore.send({
    type: SocketDataReq.GET_USERS,
    data: {},
  })
-}
-
-onMounted(() => {
-  onInit()
 })

 function onStartChat(userId: number) {
@@ -26,25 +23,27 @@ function onStartChat(userId: number) {

  socketsStore.send({
    type: SocketDataReq.CREATE_CHAT,
-    data: {
-      userId: userId,
-    },
+    data: { userId: userId },
  })
 }
 </script>

 <template>
-  <div class="flex flex-col gap-2 h-full overflow-hidden px-2">
-    <div>contacts</div>
+  <div class="flex flex-col h-full">
+    <VToolbar theme="dark" class="px-2">
+      <BackToChats class="mr-2" />

-    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+      <VTextField bg-color="black" prepend-inner-icon="mdi-magnify" placeholder="search contacts" />
+    </VToolbar>
+
+    <VList>
      <UsersListElement
        v-for="user in usersStore.users"
        :key="user.id"
        v-bind:user="user"
        @click="onStartChat"
      />
-    </div>
+    </VList>
  </div>
 </template>

--- a/src/components/Users/UsersListElement.vue
+++ b/src/components/Users/UsersListElement.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { User } from '@/stores/users.ts'
-import { JustButton } from '@/components/simple'
+import { computed } from 'vue'

 interface Props {
  user: User
@@ -10,16 +10,37 @@ const { user } = defineProps<Props>()
 const emit = defineEmits<{
  click: [id: number]
 }>()
+
+const avatarText = computed(() => {
+  return user.name.slice(0, 1).toUpperCase() ?? ':)'
+})
 </script>

 <template>
-  <div class="border p-2">
-    <!--    <div>log: {{ user }}</div>-->
-    <div>id:{{ user.id }}</div>
-    <div>name:{{ user.name }}</div>
-    <div>email:{{ user.email }}</div>
-    <JustButton @click="emit('click', user.id)">start chat</JustButton>
-  </div>
+  <VListItem>
+    <template v-slot:prepend>
+      <VAvatar color="primary" :text="avatarText" />
+    </template>
+
+    <template #title>
+      <div>
+        {{ user.name }}
+      </div>
+    </template>
+
+    <template #subtitle>
+      <div>last seen never recently</div>
+    </template>
+
+    <template #append>
+      <VBtn
+        icon="mdi-message-outline"
+        variant="plain"
+        size="small"
+        @click="emit('click', user.id)"
+      />
+    </template>
+  </VListItem>
 </template>

 <style scoped></style>
--- a/src/components/simple/JustButton.vue
+++ b/src/components/simple/JustButton.vue
@@ -1,9 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <button class="border border-gray-700 rounded-md text-gray-700 px-1.5 py-1.5 flex justify-center">
-    <slot></slot>
-  </button>
-</template>
-
-<style scoped></style>
--- a/src/components/simple/JustInput.vue
+++ b/src/components/simple/JustInput.vue
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const model = defineModel()
-</script>
-
-<template>
-  <input
-    v-model="model"
-    class="border px-2 py-1.5 rounded-md bg-white outline-none focus:outline-none"
-  />
-</template>
-
-<style scoped></style>
--- a/src/components/simple/JustList.vue
+++ b/src/components/simple/JustList.vue
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { ref, useSlots } from 'vue'
-
-const model = defineModel('selected')
-function checkSlots() {
-  const slots = useSlots()
-  console.log('slots')
-  if (slots.default) {
-    // console.log('default slot', slots.default())
-
-    const a = slots.default().map((el) => el)
-    console.log('a', a)
-  }
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-2">
-    <slot />
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/components/simple/JustListItem.vue
+++ b/src/components/simple/JustListItem.vue
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import JustButton from '@/components/simple/JustButton.vue'
-
-interface Props {
-  icon: string
-  value: string
-}
-
-const { icon, value } = defineProps<Props>()
-const emit = defineEmits<{
-  click: [value: string]
-}>()
-</script>
-
-<template>
-  <JustButton @click="emit('click', value)">
-    <span class="mdi text-2xl" :class="icon"></span>
-  </JustButton>
-</template>
-
-<style scoped></style>
--- a/src/components/simple/JustNav.vue
+++ b/src/components/simple/JustNav.vue
@@ -1,9 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="w-16 flex flex-col gap-2 items-stretch p-1 border">
-    <slot></slot>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/components/simple/JustTest.vue
+++ b/src/components/simple/JustTest.vue
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  text: string
-  value: string
-}
-
-const { text, value } = defineProps<Props>()
-
-const emit = defineEmits<{
-  click: [value: string]
-}>()
-
-function onClick() {
-  emit('click', value)
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-2 border" @click="onClick">{{ text }} - {{ value }}</div>
-</template>
-
-<style scoped></style>
--- a/src/components/simple/index.ts
+++ b/src/components/simple/index.ts
@@ -1,8 +0,0 @@
-import JustInput from '@/components/simple/JustInput.vue'
-import JustButton from '@/components/simple/JustButton.vue'
-import JustList from '@/components/simple/JustList.vue'
-import JustListItem from '@/components/simple/JustListItem.vue'
-import JustNav from '@/components/simple/JustNav.vue'
-import JustTest from '@/components/simple/JustTest.vue'
-
-export { JustInput, JustButton, JustList, JustListItem, JustNav, JustTest }
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,28 +1,41 @@
 import '@mdi/font/css/materialdesignicons.css'
 import './assets/main.css'
-import './assets/default.css'
-import './assets/custom.css'

 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
+// import PrimeVue from 'primevue/config'
+
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+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)

-app.use(PrimeVue, {
-  theme: {
-    preset: Aura,
-    options: {
-      darkModeSelector: '.p-dark',
-    },
+// app.use(PrimeVue, { theme: theme })
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: { defaultTheme: 'light' },
+  icons: {
+    defaultSet: 'mdi',
+  },
+  defaults: {
+    VAvatar: { density: 'compact' },
+    VChip: { density: 'compact' },
+    VBtn: { color: 'black', variant: 'flat' },
+    VSwitch: { color: 'black', hideDetails: true },
+    VOtpInput: { density: 'compact' },
+    VTextField: { color: 'black', density: 'compact', variant: 'outlined', hideDetails: true },
  },
 })
-app.use(createPinia())
+app.use(vuetify)

+app.use(createPinia())
 app.mount('#app')
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -15,7 +15,7 @@ export const useAuthStore = defineStore('auth', () => {
        },
        body: JSON.stringify({ email: email }),
      }
-      const res = await fetch('http://localhost:5173/login', options)
+      const res = await fetch('http://localhost:5173/api/login', options)
      if (res.ok) {
        const data: { accessToken: string; refreshToken: string } = await res.json()

--- a/src/stores/chats.ts
+++ b/src/stores/chats.ts
@@ -1,17 +1,46 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { User } from '@/stores/users.ts'
+import type { Message } from '@/stores/messages.ts'
+import { useAuthStore } from '@/stores/auth.ts'

 export interface Chat {
  id: string
-  type_id: number
+  typeId: number
  name: string
  users: User[]
+  message?: Message
+  image?: string
 }

 export const useChatsStore = defineStore('chats', () => {
+  const authStore = useAuthStore()
  const chats = ref<Chat[]>([])
-  const selected = ref<string>()
+  const selected = ref<string[]>([])

-  return { chats, selected }
+  const selectedChat = computed(() => {
+    if (!selected.value.length) return
+
+    return chats.value.find((chat: Chat) => chat.id === selected.value[0])
+  })
+
+  function getChatInfo(chat: Chat) {
+    switch (chat.typeId) {
+      case 1:
+        const user = chat.users.find((user) => {
+          return user.id !== authStore.me?.id
+        })
+        return user ?? chat
+      case 2:
+        return chat
+      default:
+        return chat
+    }
+  }
+
+  function getChatLastMessage(chat: Chat) {
+    return chats.value.find((el) => el.id === chat.id)
+  }
+
+  return { chats, selected, selectedChat, getChatInfo }
 })
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export type MenuItems = 'chats' | 'users' | 'settings'
+
+export const useMenuStore = defineStore('menu', () => {
+  const selected = ref<MenuItems[]>(['chats'])
+
+  return { selected }
+})
--- a/src/stores/messages.ts
+++ b/src/stores/messages.ts
@@ -1,15 +1,22 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useChatsStore } from '@/stores/chats.ts'

 export interface Message {
  id: number
-  text: string
-  user_id: number
-  created_at: string
+  message: string
+  userId: number
+  createdAt: string
 }

 export const useMessagesStore = defineStore('messages', () => {
+  const chatsStore = useChatsStore()
  const messages = ref<Message[]>([])
+  const message = ref<Message>()

-  return { messages }
+  const lastMessage = computed(() => {
+    return message.value ?? chatsStore.selectedChat?.message ?? null
+  })
+
+  return { messages, lastMessage }
 })
--- a/src/stores/sockets.ts
+++ b/src/stores/sockets.ts
@@ -4,6 +4,7 @@ import { type Chat, useChatsStore } from '@/stores/chats.ts'
 import { useAuthStore } from '@/stores/auth.ts'
 import { type Message, useMessagesStore } from '@/stores/messages.ts'
 import { useUsersStore } from '@/stores/users.ts'
+import { useMenuStore } from '@/stores/menu.ts'

 export enum SocketDataReq {
  GET_CHATS = 'GET_CHATS',
@@ -37,6 +38,7 @@ export const useSocketsStore = defineStore('sockets', () => {
  const chatsStore = useChatsStore()
  const messagesStore = useMessagesStore()
  const usersStore = useUsersStore()
+  const menuStore = useMenuStore()

  const isConnected = ref(false)
  const error = ref<string>()
@@ -59,29 +61,35 @@ export const useSocketsStore = defineStore('sockets', () => {

      switch (type) {
        case SocketDataRes.USERS:
+          console.log('Received from back: USERS', data)
          usersStore.users = data
          break
        case SocketDataRes.USER:
+          console.log('Received from back: USER', data)
          authStore.me = data
          break
        case SocketDataRes.CHATS:
+          console.log('Received from back: CHATS', data)
          if (Array.isArray(data)) {
            chatsStore.chats = data
          } else {
-            console.log(data)
            const idx = chatsStore.chats.findIndex((chat) => chat.id === data.id)
-            console.log(idx)
            if (idx < 0) chatsStore.chats.push(data)
+
+            menuStore.selected = ['chats']
+            chatsStore.selected = [data.id]
          }

          break
        case SocketDataRes.MESSAGES:
+          console.log('Received from back: MESSAGES', data)
          messagesStore.messages = data
          // if (options.onMessage) {
          //   options.onMessage(data)
          // }
          break
        case SocketDataRes.MESSAGE:
+          console.log('Received from back: MESSAGE', data)
          messagesStore.messages.unshift(data)
          break
        case SocketDataRes.STATUS:
@@ -106,6 +114,7 @@ export const useSocketsStore = defineStore('sockets', () => {
  }

  const send = (data: unknown) => {
+    console.log(COMMAND.SEND, data)
    postMessage(COMMAND.SEND, data)
  }

--- a/src/stores/users.ts
+++ b/src/stores/users.ts
@@ -5,6 +5,7 @@ export interface User {
  id: number
  email: string
  name: string
+  image?: string
 }

 export const useUsersStore = defineStore('users', () => {
--- a/src/themes/noir.ts
+++ b/src/themes/noir.ts
@@ -0,0 +1,59 @@
+import '@primeuix/styles' // When styles change, the app will hot reload.
+
+import { definePreset } from '@primeuix/themes'
+import Aura from '@primeuix/themes/aura'
+
+export const NoirPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{surface.50}',
+      100: '{surface.100}',
+      200: '{surface.200}',
+      300: '{surface.300}',
+      400: '{surface.400}',
+      500: '{surface.500}',
+      600: '{surface.600}',
+      700: '{surface.700}',
+      800: '{surface.800}',
+      900: '{surface.900}',
+      950: '{surface.950}',
+    },
+    colorScheme: {
+      light: {
+        primary: {
+          color: '{primary.950}',
+          contrastColor: '#ffffff',
+          hoverColor: '{primary.800}',
+          activeColor: '{primary.700}',
+        },
+        highlight: {
+          background: '{primary.950}',
+          focusBackground: '{primary.700}',
+          color: '#ffffff',
+          focusColor: '#ffffff',
+        },
+      },
+      dark: {
+        primary: {
+          color: '{primary.50}',
+          contrastColor: '{primary.950}',
+          hoverColor: '{primary.200}',
+          activeColor: '{primary.300}',
+        },
+        highlight: {
+          background: '{primary.50}',
+          focusBackground: '{primary.300}',
+          color: '{primary.950}',
+          focusColor: '{primary.950}',
+        },
+      },
+    },
+  },
+})
+
+export default {
+  preset: NoirPreset,
+  options: {
+    darkModeSelector: '.p-dark',
+  },
+}
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,32 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import { useSocketsStore } from '@/stores/sockets.ts'
-import AppMenu from '@/components/AppMenu.vue'
 import LeftPane from '@/components/LeftPane.vue'
 import RightPane from '@/components/RightPane.vue'
-import UsersList from '@/components/Users/UsersList.vue'
-import SettingsList from '@/components/Settings/SettingsList.vue'
-import ChatsList from '@/components/Chats/ChatsList.vue'

 const socketsStore = useSocketsStore()

-type MenuSelected = 'chats' | 'users' | 'settings'
-
-const selected = ref<MenuSelected>()
-
-const component = computed(() => {
-  switch (selected.value) {
-    case 'chats':
-      return ChatsList
-    case 'users':
-      return UsersList
-    case 'settings':
-      return SettingsList
-    default:
-      return ChatsList
-  }
-})
-
 onMounted(() => {
  socketsStore.init()
 })
@@ -34,13 +13,16 @@ onMounted(() => {

 <template>
  <div class="flex h-full">
-    <div class="flex w-full">
-      <AppMenu v-model="selected" />
+    <div class="md:w-1/3 sm:w-1/2 w-1/2 bg-white">
      <LeftPane>
-        <component :is="component" />
+        <template #default="{ component }">
+          <component :is="component" />
+        </template>
      </LeftPane>
    </div>
-    <RightPane />
+    <div class="md:w-2/3 sm:w-1/2 w-1/2">
+      <RightPane />
+    </div>
  </div>
 </template>

--- a/src/views/SignInView.vue
+++ b/src/views/SignInView.vue
@@ -1,32 +1,48 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useAuthStore } from '@/stores/auth.ts'
-import { JustButton, JustInput } from '@/components/simple'
+// import {
+//   Button,
+//   InputText,
+//   Card,
+//   InputOtp,
+//   ToggleSwitch,
+//   Divider,
+//   IconField,
+//   InputIcon,
+// } from 'primevue'

 const authStore = useAuthStore()

 const email = ref('vadim.olonin@gmail.com')
-const name = ref('')
+const name = ref('Vadim')
+const otp = ref('123456')
+
 async function onSubmit() {
  await authStore.login(email.value)
 }
 </script>

 <template>
-  <div class="h-full flex flex-col justify-center items-center">
-    <div class="bg-white border border-gray-500 p-4 rounded-md w-64">
-      <form @submit.prevent="onSubmit">
-        <div class="flex flex-col gap-2">
-          <div class="">Sign in</div>
-          <JustInput v-model="email" placeholder="email" type="email" class="" />
-          <input v-if="false" v-model="name" placeholder="name" />
-          <div class="flex justify-end">
-            <input type="checkbox" v-if="false" />
-            <JustButton type="submit">sign in</JustButton>
+  <div class="h-full flex flex-col justify-center items-center px-4">
+    <VCard class="w-full md:w-1/2">
+      <template #title>
+        <div class="text-2xl">Sign in</div>
+      </template>
+      <template #text>
+        <form @submit.prevent="onSubmit" class="flex flex-col gap-4">
+          <VTextField v-model="email" placeholder="email" />
+          <VTextField v-model="name" placeholder="name" />
+          <div class="flex justify-center">
+            <VOtpInput v-model="otp" />
          </div>
-        </div>
-      </form>
-    </div>
+          <div class="flex items-center justify-between gap-2">
+            <VSwitch hide-details label="Keep me signed in" />
+            <VBtn type="submit">Sign In</VBtn>
+          </div>
+        </form>
+      </template>
+    </VCard>
  </div>
 </template>

--- a/src/views/SignInView2.vue
+++ b/src/views/SignInView2.vue
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useAuthStore } from '@/stores/auth.ts'
-
-const authStore = useAuthStore()
-
-const email = ref('vadim.olonin@gmail.com')
-const name = ref('')
-async function onSubmit() {
-  await authStore.login(email.value)
-}
-</script>
-
-<template>
-  <div class="h-100 d-flex flex-column align-center justify-center red">
-    <div class="w-20r border pa-4 blue">
-      <form @submit.prevent="onSubmit">
-        <div class="d-flex flex-column ga-4">
-          <div class="">Sign in</div>
-          <input v-model="email" placeholder="email" type="email" class="border" />
-          <input v-if="false" v-model="name" placeholder="name" />
-          <div class="d-flex ga-4 align-center">
-            <input type="checkbox" v-if="false" />
-            <button type="submit">login</button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { JustButton, JustInput } from '@/components/simple'
-
-const email = ref('test')
-</script>
-
-<template>
-  <div class="flex gap-1 h-full w-full bg-green-200 items-start">
-    <JustInput v-model="email" placeholder="email" type="email" />
-    <JustInput placeholder="email" type="email" />
-
-    <JustButton>sign in</JustButton>
-  </div>
-</template>
-
-<style scoped></style>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,7 +16,7 @@ export default defineConfig({
  server: {
    host: '0.0.0.0',
    proxy: {
-      '/login': 'http://localhost:3000',
+      '/api': 'http://localhost:3000',
    },
  },
 })
Author	SHA1	Message	Date
Vadim	09028e0ced	wip	2026-03-20 09:56:14 +03:00
Vadim	bc704b03cd	wip	2026-03-17 18:22:19 +03:00
vadim	ad76c710dd	wip	2026-03-16 00:03:27 +03:00
vadim	b84a76ac08	wip	2026-03-15 20:55:00 +03:00
Vadim	43366a5089	wip	2026-03-12 20:50:31 +03:00
Vadim	5a188b80e3	wip	2026-03-11 17:56:17 +03:00
Vadim	24c935df5f	wip	2026-03-09 12:30:52 +03:00
Vadim	f925ea1cf1	wip	2026-03-03 10:41:26 +03:00