вложения, канальчики, бим-бим + бам-бам

client/app/composables/use-auth.ts

@@ -16,7 +16,7 @@ export const useAuth = createGlobalState(() => {
 
   async function login(username: string, password: string): Promise<void> {
     try {
-      const result = await chadApi<Me>('/login', {
+      const result = await chadApi<Me>('/auth/login', {
         method: 'POST',
         body: {
           username,
@@ -33,7 +33,7 @@ export const useAuth = createGlobalState(() => {
 
   async function register(username: string, password: string): Promise<void> {
     try {
-      const result = await chadApi<Me>('/register', {
+      const result = await chadApi<Me>('/auth/register', {
         method: 'POST',
         body: {
           username,
@@ -50,7 +50,7 @@ export const useAuth = createGlobalState(() => {
 
   async function logout(): Promise<void> {
     try {
-      await chadApi('/logout', { method: 'POST' })
+      await chadApi('/auth/logout', { method: 'POST' })
 
       setMe(undefined)
 

client/app/composables/use-chat.ts

@@ -1,22 +1,25 @@
+import chadApi from '#shared/chad-api'
 import { createGlobalState } from '@vueuse/core'
 
 export interface ChatClientMessage {
   text: string
-  replyTo?: {
-    messageId: string
-  }
+  // replyTo?: {
+  //   messageId: string
+  // }
 }
 
 export interface ChatMessage {
   id: string
-  sender: string
+  senderId: string
   text: string
   createdAt: string
-  replyTo?: {
-    messageId: string
-    sender: string
-    text: string
-  }
+  updatedAt: string
+  attachments: string[]
+  // replyTo?: {
+  //   messageId: string
+  //   sender: string
+  //   text: string
+  // }
 }
 
 export const useChat = createGlobalState(() => {
@@ -41,16 +44,16 @@ export const useChat = createGlobalState(() => {
     })
   }, { immediate: true, flush: 'sync' })
 
-  function sendMessage(message: ChatClientMessage) {
-    if (!signaling.connected.value)
-      return
-
+  async function sendMessage(message: ChatClientMessage) {
     message.text = message.text.trim()
 
     if (!message.text.length)
       return
 
-    signaling.socket.value!.emit('chat:message', message)
+    await chadApi<ChatMessage>('/chat/send', {
+      method: 'POST',
+      body: message,
+    })
   }
 
   return {

client/app/composables/use-preferences.ts

@@ -42,7 +42,7 @@ export const usePreferences = createGlobalState(() => {
     async ([toggleInputHotkey, toggleOutputHotkey]) => {
       try {
         await chadApi(
-          '/preferences',
+          '/user/preferences',
           {
             method: 'PATCH',
             body: {

client/app/middleware/01.auth.global.ts

@@ -5,7 +5,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
   if (!me.value) {
     try {
-      setMe(await chadApi('/me', { method: 'GET' }))
+      setMe(await chadApi('/auth/me', { method: 'GET' }))
 
       if (to.meta.auth !== false)
         return navigateTo({ name: 'Index' })

client/app/middleware/02.user-preferences.global.ts

@@ -13,7 +13,7 @@ export default defineNuxtRouteMiddleware(async () => {
     return
 
   try {
-    const preferences = await chadApi<SyncedPreferences>('/preferences', { method: 'GET' })
+    const preferences = await chadApi<SyncedPreferences>('/user/preferences', { method: 'GET' })
 
     if (!preferences)
       return

client/app/pages/index.vue

@@ -10,25 +10,35 @@
         :key="message.id"
         class="w-fit max-w-[60%]"
         :class="{
-          'ml-auto': message.sender === me?.username,
+          'ml-auto': message.senderId === me?.userId,
         }"
       >
         <p
-          v-if="message.sender !== me?.username"
+          v-if="message.senderId !== me?.userId"
           class="text-sm text-muted-color mb-1"
         >
-          {{ message.sender }}
+          {{ message.senderId }}
         </p>
 
         <div
           class="px-3 py-2 rounded-lg"
           :class="{
-            'bg-surface-800': message.sender !== me?.username,
-            'bg-surface-700': message.sender === me?.username,
+            'bg-surface-800 rounded-tl': message.senderId !== me?.userId,
+            'bg-surface-700 rounded-tr': message.senderId === me?.userId,
           }"
         >
           <p class="[&>a]:break-all" @click="handleMessageClick" v-html="parseMessageText(message.text)" />
 
+          <div v-if="message.attachments.length > 0" class="flex flex-col gap-2 mt-2">
+            <img
+              v-for="attachmentId in message.attachments"
+              :key="attachmentId"
+              class="rounded-xl max-w-60"
+              :src="`http://localhost:4000/chad/attachment/${attachmentId}`"
+              :alt="attachmentId"
+            >
+          </div>
+
           <p class="mt-1 text-right text-sm text-muted-color" :title="formatDate(message.createdAt, 'dd.MM.yyyy, HH:mm')">
             {{ formatDate(message.createdAt) }}
           </p>

client/app/pages/profile.vue

@@ -52,7 +52,7 @@ async function save() {
 
   saving.value = true
 
-  const updatedMe = await chadApi('/profile', {
+  const updatedMe = await chadApi('/user/profile', {
     method: 'PATCH',
     body: {
       displayName: displayName.value,