vadim/microchat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Vadim
2026-03-03 10:41:26 +03:00
parent 944e53df63
commit f925ea1cf1
17 changed files with 271 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -3,6 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>Vite App</title>
</head> </head>

6
src/App.vue
View File

@@ -2,6 +2,7 @@
import { useAuthStore } from '@/stores/auth.ts' import { useAuthStore } from '@/stores/auth.ts'
import SignInView from '@/views/SignInView.vue' import SignInView from '@/views/SignInView.vue'
import MainView from '@/views/MainView.vue' import MainView from '@/views/MainView.vue'
import TestView from '@/views/TestView.vue'
const authStore = useAuthStore() const authStore = useAuthStore()
</script> </script>
@@ -9,8 +10,9 @@ const authStore = useAuthStore()
<template> <template>
<div class="h-screen bg-gray-200"> <div class="h-screen bg-gray-200">
<div class="h-full m-auto p-4"> <div class="h-full m-auto p-4">
<MainView v-if="authStore.isAuth" /> <!-- <MainView v-if="authStore.isAuth" />-->
<SignInView v-else /> <!-- <SignInView v-else />-->
<TestView />
</div> </div>
</div> </div>
</template> </template>

53
src/assets/custom.css
View File

@@ -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;
}

26
src/assets/default.css
View File

@@ -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;
}

11
src/assets/main.css
View File

@@ -1,3 +1,14 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tailwindcss-primeui"; @import "tailwindcss-primeui";
@import "primeicons/primeicons.css"; @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 * {
}

137
src/assets/main1.css
View File

@@ -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;
}

10
src/components/AppMenu.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { JustList, JustListItem, JustNav } from '@/components/simple' 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) { function onSelect(value: SelectedMenu) {
model.value = value menuStore.selected = value
} }
</script> </script>
@@ -13,7 +13,7 @@ function onSelect(value: string) {
<JustNav> <JustNav>
<JustList> <JustList>
<JustListItem value="users" icon="mdi-account" @click="onSelect" /> <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" /> <JustListItem value="settings" icon="mdi-cog" @click="onSelect" />
</JustList> </JustList>
</JustNav> </JustNav>

9
src/components/ChatListElement.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Chat } from '@/stores/chats.ts' import { type Chat, useChatsStore } from '@/stores/chats.ts'
import { useAuthStore } from '@/stores/auth.ts' import { useAuthStore } from '@/stores/auth.ts'
import { computed } from 'vue' import { computed } from 'vue'
@@ -9,6 +9,7 @@ interface Props {
const { chat } = defineProps<Props>() const { chat } = defineProps<Props>()
const authStore = useAuthStore() const authStore = useAuthStore()
const chatsStore = useChatsStore()
const getChatName = computed(() => { const getChatName = computed(() => {
if (chat.type_id === 2) { if (chat.type_id === 2) {
@@ -20,10 +21,14 @@ const getChatName = computed(() => {
return 'unknown ID' return 'unknown ID'
}) })
const isSelected = computed(() => {
return chatsStore.selected === chat.id
})
</script> </script>
<template> <template>
<div class="border p-2"> <div class="border p-2" :class="{ 'bg-gray-400': isSelected }">
<!-- {{ chat }}--> <!-- {{ chat }}-->
<div>id:{{ chat.id }}</div> <div>id:{{ chat.id }}</div>
<div>name:{{ chat.name }}</div> <div>name:{{ chat.name }}</div>

15
src/components/Chats/ChatsList.vue
View File

@@ -2,19 +2,26 @@
import { useChatsStore } from '@/stores/chats.ts' import { useChatsStore } from '@/stores/chats.ts'
import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts' import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
import ChatListElement from '@/components/ChatListElement.vue' import ChatListElement from '@/components/ChatListElement.vue'
import { onMounted, watchEffect } from 'vue'
const chatsStore = useChatsStore() const chatsStore = useChatsStore()
const socketsStore = useSocketsStore() const socketsStore = useSocketsStore()
function onSelect(id: string) { watchEffect(() => getMessages(chatsStore.selected))
const chatId = id
chatsStore.selected = chatId
function getMessages(chatId?: string) {
if (!chatId) return
socketsStore.send({ socketsStore.send({
type: SocketDataReq.GET_MESSAGES, type: SocketDataReq.GET_MESSAGES,
data: { chat_id: chatId }, data: { chatId: chatId },
}) })
} }
function onSelect(id: string) {
chatsStore.selected = id
}
onMounted(() => console.log('CHAT LIST'))
</script> </script>
<template> <template>

6
src/components/Users/UsersList.vue
View File

@@ -9,15 +9,11 @@ const socketsStore = useSocketsStore()
const usersStore = useUsersStore() const usersStore = useUsersStore()
const authStore = useAuthStore() const authStore = useAuthStore()
function onInit() { onMounted(() => {
socketsStore.send({ socketsStore.send({
type: SocketDataReq.GET_USERS, type: SocketDataReq.GET_USERS,
data: {}, data: {},
}) })
}
onMounted(() => {
onInit()
}) })
function onStartChat(userId: number) { function onStartChat(userId: number) {

5
src/components/simple/JustListItem.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import JustButton from '@/components/simple/JustButton.vue' import JustButton from '@/components/simple/JustButton.vue'
import type { SelectedMenu } from '@/stores/menu.ts'
interface Props { interface Props {
icon: string icon: string
value: string value: SelectedMenu
} }
const { icon, value } = defineProps<Props>() const { icon, value } = defineProps<Props>()
const emit = defineEmits<{ const emit = defineEmits<{
click: [value: string] click: [value: SelectedMenu]
}>() }>()
</script> </script>

13
src/main.ts
View File

@@ -1,28 +1,19 @@
import '@mdi/font/css/materialdesignicons.css' import '@mdi/font/css/materialdesignicons.css'
import './assets/main.css' import './assets/main.css'
import './assets/default.css'
import './assets/custom.css'
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import PrimeVue from 'primevue/config' import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'
import App from './App.vue' import App from './App.vue'
import { version } from 'vue' import { version } from 'vue'
import theme from '@/themes/noir.ts'
const app = createApp(App) const app = createApp(App)
console.log('version', version) console.log('version', version)
app.use(PrimeVue, { app.use(PrimeVue, { theme: theme })
theme: {
preset: Aura,
options: {
darkModeSelector: '.p-dark',
},
},
})
app.use(createPinia()) app.use(createPinia())
app.mount('#app') app.mount('#app')

10
src/stores/menu.ts Normal file
View File

@@ -0,0 +1,10 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export type SelectedMenu = 'chats' | 'users' | 'settings'
export const useMenuStore = defineStore('menu', () => {
const selected = ref<SelectedMenu>('chats')
return { selected }
})

7
src/stores/sockets.ts
View File

@@ -4,6 +4,7 @@ import { type Chat, useChatsStore } from '@/stores/chats.ts'
import { useAuthStore } from '@/stores/auth.ts' import { useAuthStore } from '@/stores/auth.ts'
import { type Message, useMessagesStore } from '@/stores/messages.ts' import { type Message, useMessagesStore } from '@/stores/messages.ts'
import { useUsersStore } from '@/stores/users.ts' import { useUsersStore } from '@/stores/users.ts'
import { useMenuStore } from '@/stores/menu.ts'
export enum SocketDataReq { export enum SocketDataReq {
GET_CHATS = 'GET_CHATS', GET_CHATS = 'GET_CHATS',
@@ -37,6 +38,7 @@ export const useSocketsStore = defineStore('sockets', () => {
const chatsStore = useChatsStore() const chatsStore = useChatsStore()
const messagesStore = useMessagesStore() const messagesStore = useMessagesStore()
const usersStore = useUsersStore() const usersStore = useUsersStore()
const menuStore = useMenuStore()
const isConnected = ref(false) const isConnected = ref(false)
const error = ref<string>() const error = ref<string>()
@@ -68,10 +70,11 @@ export const useSocketsStore = defineStore('sockets', () => {
if (Array.isArray(data)) { if (Array.isArray(data)) {
chatsStore.chats = data chatsStore.chats = data
} else { } else {
console.log(data)
const idx = chatsStore.chats.findIndex((chat) => chat.id === data.id) const idx = chatsStore.chats.findIndex((chat) => chat.id === data.id)
console.log(idx)
if (idx < 0) chatsStore.chats.push(data) if (idx < 0) chatsStore.chats.push(data)
menuStore.selected = 'chats'
chatsStore.selected = data.id
} }
break break

59
src/themes/noir.ts Normal file
View File

@@ -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',
},
}

12
src/views/MainView.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref } from 'vue' import { computed, onMounted } from 'vue'
import { useSocketsStore } from '@/stores/sockets.ts' import { useSocketsStore } from '@/stores/sockets.ts'
import AppMenu from '@/components/AppMenu.vue' import AppMenu from '@/components/AppMenu.vue'
import LeftPane from '@/components/LeftPane.vue' import LeftPane from '@/components/LeftPane.vue'
@@ -7,15 +7,13 @@ import RightPane from '@/components/RightPane.vue'
import UsersList from '@/components/Users/UsersList.vue' import UsersList from '@/components/Users/UsersList.vue'
import SettingsList from '@/components/Settings/SettingsList.vue' import SettingsList from '@/components/Settings/SettingsList.vue'
import ChatsList from '@/components/Chats/ChatsList.vue' import ChatsList from '@/components/Chats/ChatsList.vue'
import { useMenuStore } from '@/stores/menu.ts'
const socketsStore = useSocketsStore() const socketsStore = useSocketsStore()
const menuStore = useMenuStore()
type MenuSelected = 'chats' | 'users' | 'settings'
const selected = ref<MenuSelected>()
const component = computed(() => { const component = computed(() => {
switch (selected.value) { switch (menuStore.selected) {
case 'chats': case 'chats':
return ChatsList return ChatsList
case 'users': case 'users':
@@ -35,7 +33,7 @@ onMounted(() => {
<template> <template>
<div class="flex h-full"> <div class="flex h-full">
<div class="flex w-full"> <div class="flex w-full">
<AppMenu v-model="selected" /> <AppMenu />
<LeftPane> <LeftPane>
<component :is="component" /> <component :is="component" />
</LeftPane> </LeftPane>

150
src/views/TestView.vue
View File

@@ -1,16 +1,156 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { JustButton, JustInput } from '@/components/simple' import { JustInput } from '@/components/simple'
import {
ButtonGroup,
Button,
InputText,
Card,
ScrollPanel,
InputOtp,
ToggleSwitch,
Divider,
Toolbar,
IconField,
InputIcon,
SplitButton,
Menu,
} from 'primevue'
const email = ref('test') const email = ref('test')
const value = ref('1234')
const checked = ref(true)
const items = ref([
{
label: 'Update',
icon: 'pi pi-refresh',
},
{
label: 'Delete',
icon: 'pi pi-times',
},
])
const menu = ref()
const toggle = (event: Event) => {
menu.value.toggle(event)
}
</script> </script>
<template> <template>
<div class="flex gap-1 h-full w-full bg-green-200 items-start"> <div class="flex flex-col gap-2 w-full bg-white p-4">
<JustInput v-model="email" placeholder="email" type="email" /> <div class="card flex justify-center">
<JustInput placeholder="email" type="email" /> <Button
type="button"
icon="pi pi-ellipsis-v"
@click="toggle"
aria-haspopup="true"
aria-controls="overlay_menu"
/>
<Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
</div>
<div class="card">
<Toolbar>
<template #start>
<Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
<Button icon="pi pi-print" class="mr-2" severity="secondary" text />
<Button icon="pi pi-upload" severity="secondary" text />
</template>
<JustButton>sign in</JustButton> <template #center>
<IconField>
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText placeholder="Search" />
</IconField>
</template>
<template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
</Toolbar>
</div>
<Divider />
<div class="flex gap-2 items-start">
<Button label="Submit" />
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div>
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warn" severity="warn" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />
</div>
<div>
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>
</div>
<div>
<InputOtp v-model="value" />
</div>
<div>
<ToggleSwitch v-model="checked" />
</div>
<div>
<InputText type="text" placeholder="Normal" />
</div>
<Card>
<template #title>Simple Card</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error
repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa
ratione quam perferendis esse, cupiditate neque quas!
</p>
</template>
</Card>
<Card>
<template #content>
<ScrollPanel style="width: 100%; height: 100px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<Divider />
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque
nihil impedit quo minus.
</p>
<p class="m-0">
Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores
alias consequatur aut perferendis doloribus asperiores repellat
</p>
</ScrollPanel>
</template>
</Card>
</div> </div>
</template> </template>