From 54fa90b2a5b5202e0e5df63847d0c703b4653196 Mon Sep 17 00:00:00 2001 From: Vadim Date: Thu, 26 Feb 2026 22:34:44 +0300 Subject: [PATCH] wip --- package-lock.json | 85 +++--- package.json | 5 +- src/App.vue | 22 +- src/assets/clean.css | 415 ++++++++++++++++++++++++++ src/assets/main.css | 137 +++++++++ src/components/AppMenu.vue | 17 ++ src/components/ChatList.vue | 41 ++- src/components/ChatToolbar.vue | 14 +- src/components/ChatsPane.vue | 34 ++- src/components/MessageData.vue | 22 +- src/components/MessageForm.vue | 39 +-- src/components/MessageToolbar.vue | 8 +- src/components/MessagesPane.vue | 69 +++-- src/components/TestMenu1.vue | 270 +++++++++++++++++ src/components/TestMenu2.vue | 72 +++++ src/components/WebSocketComponent.vue | 88 ------ src/composables/useSharedWebSocket.ts | 141 --------- src/main.ts | 20 +- src/stores/auth.ts | 1 - src/stores/sockets.ts | 4 +- src/views/ChatView.vue | 14 +- src/views/SignInView.vue | 41 +-- 22 files changed, 1108 insertions(+), 451 deletions(-) create mode 100644 src/assets/clean.css create mode 100644 src/assets/main.css create mode 100644 src/components/AppMenu.vue create mode 100644 src/components/TestMenu1.vue create mode 100644 src/components/TestMenu2.vue delete mode 100644 src/components/WebSocketComponent.vue delete mode 100644 src/composables/useSharedWebSocket.ts diff --git a/package-lock.json b/package-lock.json index edb80f2..3ae4f70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,9 @@ "name": "chat-client", "version": "0.0.0", "dependencies": { - "@fontsource/roboto": "^5.2.9", + "@vueuse/core": "^14.2.1", "pinia": "^3.0.4", - "vue": "^3.5.28", - "vuetify": "^3.11.8" + "vue": "^3.5.28" }, "devDependencies": { "@mdi/font": "^7.4.47", @@ -1143,15 +1142,6 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, - "node_modules/@fontsource/roboto": { - "version": "5.2.9", - "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.9.tgz", - "integrity": "sha512-ZTkyHiPk74B/aj8BZWbsxD5Yu+Lq+nR64eV4wirlrac2qXR7jYk2h6JlLYuOuoruTkGQWNw2fMuKNavw7/rg0w==", - "license": "OFL-1.1", - "funding": { - "url": "https://github.com/sponsors/ayuhito" - } - }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -2016,6 +2006,12 @@ "undici-types": "~7.16.0" } }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz", + "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==", + "license": "MIT" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.56.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz", @@ -2635,6 +2631,44 @@ } } }, + "node_modules/@vueuse/core": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz", + "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==", + "license": "MIT", + "dependencies": { + "@types/web-bluetooth": "^0.0.21", + "@vueuse/metadata": "14.2.1", + "@vueuse/shared": "14.2.1" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, + "node_modules/@vueuse/metadata": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz", + "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz", + "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, "node_modules/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", @@ -5215,33 +5249,6 @@ "typescript": ">=5.0.0" } }, - "node_modules/vuetify": { - "version": "3.11.8", - "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.11.8.tgz", - "integrity": "sha512-4iKnntOnLFFklygZjzlVfcHrtLO8+iK4HOhiia6HP2U8v82x+ngaSCgm+epvPrGyCMfCpfuEttqD2qElrr1axw==", - "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", diff --git a/package.json b/package.json index d3d2cd4..d13d824 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,9 @@ "format": "prettier --write --experimental-cli src/" }, "dependencies": { - "@fontsource/roboto": "^5.2.9", + "@vueuse/core": "^14.2.1", "pinia": "^3.0.4", - "vue": "^3.5.28", - "vuetify": "^3.11.8" + "vue": "^3.5.28" }, "devDependencies": { "@mdi/font": "^7.4.47", diff --git a/src/App.vue b/src/App.vue index 4cef5f2..2b343fa 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,19 +7,13 @@ const authStore = useAuthStore() - + diff --git a/src/assets/clean.css b/src/assets/clean.css new file mode 100644 index 0000000..779a084 --- /dev/null +++ b/src/assets/clean.css @@ -0,0 +1,415 @@ +/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */ + +/* Reset box-model and set borders */ +/* ============================================ */ + +*, +::before, +::after { + box-sizing: border-box; + border-style: solid; + border-width: 0; + min-width: 0; +} + +/* Document */ +/* ============================================ */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + * 3. Remove gray overlay on links for iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -webkit-tap-highlight-color: transparent; /* 3*/ +} + +/* Sections */ +/* ============================================ */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/* Vertical rhythm */ +/* ============================================ */ + +p, +table, +blockquote, +address, +pre, +iframe, +form, +figure, +dl { + margin: 0; +} + +/* Headings */ +/* ============================================ */ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; + margin: 0; +} + +/* Lists (enumeration) */ +/* ============================================ */ + +ul, +ol { + margin: 0; + padding: 0; + list-style: none; +} + +/* Lists (definition) */ +/* ============================================ */ + +dt { + font-weight: bold; +} + +dd { + margin-left: 0; +} + +/* Grouping content */ +/* ============================================ */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + border-top-width: 1px; + margin: 0; + clear: both; + color: inherit; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: inherit; /* 2 */ +} + +address { + font-style: inherit; +} + +/* Text-level semantics */ +/* ============================================ */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; + text-decoration: none; + color: inherit; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: inherit; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Replaced content */ +/* ============================================ */ + +/** + * Prevent vertical alignment issues. + */ + +svg, +img, +embed, +object, +iframe { + vertical-align: bottom; +} + +/* Forms */ +/* ============================================ */ + +/** + * Reset form fields to make them styleable. + * 1. Make form elements stylable across systems iOS especially. + * 2. Inherit text-transform from parent. + */ + +button, +input, +optgroup, +select, +textarea { + -webkit-appearance: none; /* 1 */ + appearance: none; + vertical-align: middle; + color: inherit; + font: inherit; + background: transparent; + padding: 0; + margin: 0; + border-radius: 0; + text-align: inherit; + text-transform: inherit; /* 2 */ +} + +/** + * Correct cursors for clickable elements. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + cursor: pointer; +} + +button:disabled, +[type="button"]:disabled, +[type="reset"]:disabled, +[type="submit"]:disabled { + cursor: default; +} + +/** + * Improve outlines for Firefox and unify style with input elements & buttons. + */ + +:-moz-focusring { + outline: auto; +} + +select:disabled { + opacity: inherit; +} + +/** + * Remove padding + */ + +option { + padding: 0; +} + +/** + * Reset to invisible + */ + +fieldset { + margin: 0; + padding: 0; + min-width: 0; +} + +legend { + padding: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * Correct the outline style in Safari. + */ + +[type="search"] { + outline-offset: -2px; /* 1 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Fix font inheritance. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/** + * Fix appearance for Firefox + */ +[type="number"] { + -moz-appearance: textfield; +} + +/** + * Clickable labels + */ + +label[for] { + cursor: pointer; +} + +/* Interactive */ +/* ============================================ */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* + * Remove outline for editable content. + */ + +[contenteditable]:focus { + outline: auto; +} + +/* Tables */ +/* ============================================ */ + +/** +1. Correct table border color inheritance in all Chrome and Safari. +*/ + +table { + border-color: inherit; /* 1 */ + border-collapse: collapse; +} + +caption { + text-align: left; +} + +td, +th { + vertical-align: top; + padding: 0; +} + +th { + text-align: left; + font-weight: bold; +} diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..3fcdecd --- /dev/null +++ b/src/assets/main.css @@ -0,0 +1,137 @@ +.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; +} diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue new file mode 100644 index 0000000..87b9fcc --- /dev/null +++ b/src/components/AppMenu.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/src/components/ChatList.vue b/src/components/ChatList.vue index a783271..c3e71c9 100644 --- a/src/components/ChatList.vue +++ b/src/components/ChatList.vue @@ -7,10 +7,8 @@ const authStore = useAuthStore() const chatsStore = useChatsStore() const socketsStore = useSocketsStore() -function onSelect(value: { id: unknown }) { - console.log('onSelectChat', value.id) - - const chatId = value.id as string +function onSelect(id: string) { + const chatId = id chatsStore.selected = chatId socketsStore.send({ @@ -32,26 +30,21 @@ function getChatName(chat: Chat) { diff --git a/src/components/ChatToolbar.vue b/src/components/ChatToolbar.vue index f6d3e25..79e5b9e 100644 --- a/src/components/ChatToolbar.vue +++ b/src/components/ChatToolbar.vue @@ -6,18 +6,8 @@ const search = ref('') diff --git a/src/components/ChatsPane.vue b/src/components/ChatsPane.vue index 31f259d..4e398a2 100644 --- a/src/components/ChatsPane.vue +++ b/src/components/ChatsPane.vue @@ -1,13 +1,43 @@ diff --git a/src/components/MessageData.vue b/src/components/MessageData.vue index a68f5ea..5bdab06 100644 --- a/src/components/MessageData.vue +++ b/src/components/MessageData.vue @@ -35,29 +35,17 @@ const avatarLetter = computed(() => { - +
- +
{{ props.text }} {{ createdAt }} - - +
+
- + diff --git a/src/components/MessageForm.vue b/src/components/MessageForm.vue index 4ccd1ca..e59a25c 100644 --- a/src/components/MessageForm.vue +++ b/src/components/MessageForm.vue @@ -27,37 +27,14 @@ const isEmptyText = computed(() => { diff --git a/src/components/MessageToolbar.vue b/src/components/MessageToolbar.vue index a799bb7..de0c3d6 100644 --- a/src/components/MessageToolbar.vue +++ b/src/components/MessageToolbar.vue @@ -1,10 +1,10 @@ diff --git a/src/components/MessagesPane.vue b/src/components/MessagesPane.vue index c16138b..a5f10cb 100644 --- a/src/components/MessagesPane.vue +++ b/src/components/MessagesPane.vue @@ -4,41 +4,64 @@ 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 } from 'vue' +import { computed, nextTick, useTemplateRef, watch } from 'vue' +import { useScroll } from '@vueuse/core' +import { useChatsStore } from '@/stores/chats.ts' 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() +}) - + diff --git a/src/components/TestMenu1.vue b/src/components/TestMenu1.vue new file mode 100644 index 0000000..d07593c --- /dev/null +++ b/src/components/TestMenu1.vue @@ -0,0 +1,270 @@ + + + + + diff --git a/src/components/TestMenu2.vue b/src/components/TestMenu2.vue new file mode 100644 index 0000000..378965c --- /dev/null +++ b/src/components/TestMenu2.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/src/components/WebSocketComponent.vue b/src/components/WebSocketComponent.vue deleted file mode 100644 index 165e712..0000000 --- a/src/components/WebSocketComponent.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - - - diff --git a/src/composables/useSharedWebSocket.ts b/src/composables/useSharedWebSocket.ts deleted file mode 100644 index ed47dd1..0000000 --- a/src/composables/useSharedWebSocket.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { ref, onUnmounted, onMounted } from 'vue' - -export interface Message { - id: number - text: string - userId: string - createdAt: string -} - -export interface Chat { - id: string - type_id: number - users: User[] -} - -export interface User { - id: number - email: string -} - -export interface WsData { - type: WsDataType2 - // data: Chat | Message | User | User[] | Message[] | Chat[] - data: unknown -} - -export enum WsDataType2 { - GET_CHATS = 'GET_CHATS', - GET_USERS = 'GET_USERS', - GET_MESSAGES = 'GET_MESSAGES', - CREATE_MESSAGE = 'CREATE_MESSAGE', - CHATS = 'CHATS', - USER = 'USER', - MESSAGES = 'MESSAGES', - STATUS = 'STATUS', - ERROR = 'ERROR', -} - -export enum COMMAND2 { - CONNECT = 'CONNECT', - SEND = 'SEND', - CLOSE = 'CLOSE', -} - -export function useSharedWebSocket(options?: { url?: string; autoConnect?: true }) { - const url = options?.url || 'ws://localhost:3000/ws' - const autoConnect = options?.autoConnect ?? false - const messages = ref([]) - const chats = ref([]) - const users = ref([]) - const isConnected = ref(false) - const error = ref() - const worker = ref() - - const init = () => { - console.log('INIT WORKER') - - if (!window.SharedWorker) { - console.log('SharedWorker not supported') - error.value = 'SharedWorker not supported' - } - - worker.value = new SharedWorker(new URL('@/workers/worker.js', import.meta.url), { - type: 'module', - }) - - worker.value.port.onmessage = (event) => { - const { type, data, connected, message } = event.data - - switch (type) { - case WsDataType2.USER: - break - case WsDataType2.CHATS: - chats.value = data - break - case WsDataType2.MESSAGES: - messages.value = data - // if (options.onMessage) { - // options.onMessage(data) - // } - break - case WsDataType2.CREATE_MESSAGE: - messages.value.push(data) - break - case WsDataType2.STATUS: - isConnected.value = connected - break - case WsDataType2.ERROR: - error.value = message - logout() - break - } - } - - worker.value.port.postMessage({ - command: COMMAND2.CONNECT, - data: { url: url, token: getToken() }, - }) - } - - function logout() { - return localStorage.removeItem('token') - } - - function getToken() { - return localStorage.getItem('token') - } - - const send = (data: WsData) => { - if (worker.value) { - worker.value.port.postMessage({ - command: COMMAND2.SEND, - data: data, - }) - } - } - - const close = () => { - if (worker.value) { - worker.value.port.postMessage({ command: COMMAND2.CLOSE }) - } - } - - onMounted(() => { - if (autoConnect) init() - }) - - onUnmounted(() => { - if (worker.value) close() - }) - - return { - messages, - chats, - isConnected, - error, - send, - close, - init, - } -} diff --git a/src/main.ts b/src/main.ts index a6d1513..e1cf1ee 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,28 +1,12 @@ -import '@fontsource/roboto/100.css' -import '@fontsource/roboto/300.css' -import '@fontsource/roboto/400.css' import '@mdi/font/css/materialdesignicons.css' - +import './assets/clean.css' +import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' -import 'vuetify/styles' -import { createVuetify } from 'vuetify' -import * as components from 'vuetify/components' -import * as directives from 'vuetify/directives' - const app = createApp(App) app.use(createPinia()) -const vuetify = createVuetify({ - components, - directives, - icons: { - defaultSet: 'mdi', - }, -}) -app.use(vuetify) - app.mount('#app') diff --git a/src/stores/auth.ts b/src/stores/auth.ts index 88821f2..63031d7 100644 --- a/src/stores/auth.ts +++ b/src/stores/auth.ts @@ -1,6 +1,5 @@ import { defineStore } from 'pinia' import { computed, ref } from 'vue' -import type { WsData } from '@/composables/useSharedWebSocket.ts' import type { User } from '@/stores/users.ts' export const useAuthStore = defineStore('auth', () => { diff --git a/src/stores/sockets.ts b/src/stores/sockets.ts index fc5ea78..a689af2 100644 --- a/src/stores/sockets.ts +++ b/src/stores/sockets.ts @@ -70,14 +70,14 @@ export const useSocketsStore = defineStore('sockets', () => { case SocketDataRes.MESSAGES: console.log('MESSAGES', data) - messagesStore.messages = data.reverse() + messagesStore.messages = data // if (options.onMessage) { // options.onMessage(data) // } break case SocketDataRes.MESSAGE: console.log('MESSAGE', data) - messagesStore.messages.push(data) + messagesStore.messages.unshift(data) break case SocketDataRes.STATUS: isConnected.value = connected diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue index 859d62d..6c2821a 100644 --- a/src/views/ChatView.vue +++ b/src/views/ChatView.vue @@ -4,6 +4,7 @@ import ChatsPane from '@/components/ChatsPane.vue' import MessagesPane from '@/components/MessagesPane.vue' import { useSocketsStore } from '@/stores/sockets.ts' import { useChatsStore } from '@/stores/chats.ts' +import AppMenu from '@/components/AppMenu.vue' const socketsStore = useSocketsStore() // const { messages, chats, isConnected, error, send } = useSharedWebSocket({ autoConnect: true }) @@ -42,14 +43,13 @@ onMounted(() => { diff --git a/src/views/SignInView.vue b/src/views/SignInView.vue index c2306f6..1993f21 100644 --- a/src/views/SignInView.vue +++ b/src/views/SignInView.vue @@ -5,37 +5,28 @@ 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) }