wip

src/App.vue

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

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

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

src/assets/main.css

@@ -1,3 +1,14 @@
 @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 * {
+}

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

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>

src/components/ChatListElement.vue

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

src/components/Chats/ChatsList.vue

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

src/components/Users/UsersList.vue

@@ -9,15 +9,11 @@ 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) {

src/components/simple/JustListItem.vue

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

src/main.ts

@@ -1,28 +1,19 @@
 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 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 })
 app.use(createPinia())
 
 app.mount('#app')

src/stores/menu.ts

@@ -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 }
+})

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>()
@@ -68,10 +70,11 @@ export const useSocketsStore = defineStore('sockets', () => {
           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

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

src/views/MainView.vue

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

src/views/TestView.vue

@@ -1,16 +1,156 @@
 <script setup lang="ts">
 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 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>
 
 <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" />
+  <div class="flex flex-col gap-2 w-full bg-white p-4">
+    <div class="card flex justify-center">
+      <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>
 </template>