added profile pictures to messages and improved chat page layout

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "chatapp",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "identifier": "com.strawberries.chatapp",
   "build": {
     "beforeDevCommand": "yarn dev",

src/base.css

@@ -19,6 +19,7 @@ body,
 :root {
   --bg: #0f1116;
   --panel: #171922;
+  --panel-accent: #12141B;
   --text: #e6e6eb;
   --muted: #9aa0aa;
   --accent: #f27aa3;

src/components/ChatWindow.vue

@@ -9,7 +9,7 @@
     </div>
 
     <div v-else class="chat-container">
-    <!-- <h2 class="room-name">{{ currentRoom?.name }}</h2> -->
+        <h2 class="room-name">{{ currentRoom?.name }}</h2>
 
         <div class="messages-container" ref="messageListRef" @scroll="handleScroll">
             <MessageList :messages="messages" />
@@ -72,6 +72,8 @@ async function initializeRoom() {
             getAuthData()
         ]);
 
+        console.log("First message payload:", msgs[0]);
+
         messages.value = msgs;
         currentRoom.value = roomInfo;
         currentUser.value = auth.user;
@@ -220,10 +222,10 @@ onUnmounted(async () => {
     flex: 1;
 }
 
-/* .room-name { */
-/*   margin: 15px 0; */
-/*   text-align: center; */
-/* } */
+.room-name {
+    margin: 15px 0;
+    text-align: center;
+}
 
 .loading-more {
     text-align: center;

src/components/MessageList.vue

@@ -1,45 +1,121 @@
-<script setup lang="ts">
-import type { Message } from '../types'
-defineProps<{ messages: Message[] }>()
-</script>
-
 <template>
     <ul>
-    <li v-for="(m, i) in messages" :key="i" class="message">
-      <div class="sender">{{ m.sender }} <span class="timestamp">{{ m.sent_at }}</span></div>
+        <li v-for="(m, i) in messages" :key="i" class="message" :class="{ 'is-me': m.sender_uuid === currentUserUuid }">
+            <div class="sender-info">
+                <img :src="getAvatar(m.sender_uuid)" @error="handleAvatarError" class="sender-avatar" />
+                <div class="sender">{{ m.sender }}</div>
+                <span class="timestamp">{{ m.sent_at }}</span>
+            </div>
             <div class="message-content">{{ m.content }}</div>
         </li>
     </ul>
 </template>
 
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { Message } from '../types'
+import { getAvatar } from '../api/account.ts'
+import defaultAvatar from '../assets/default-avatar.png'
+import { getAuthData } from '../authStore';
+
+defineProps<{ messages: Message[] }>()
+
+const currentUserUuid = ref<string | null>(null)
+
+onMounted(async () => {
+    const auth = await getAuthData()
+    if (auth.user) {
+        currentUserUuid.value = auth.user.uuid
+    }
+})
+
+const handleAvatarError = (event: Event) => {
+    const img = event.target as HTMLImageElement;
+    img.src = defaultAvatar;
+};
+</script>
+
+
+
 <style scoped>
 ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
     padding: 0;
     margin: 0;
     list-style: none;
 }
 
 .message {
-  margin-bottom: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.2);
-  padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    /* gap: 0.5rem; */
+    background: var(--panel-accent);
+    padding: 0;
+    max-width: 80%;
+    width: fit-content;
+    align-self: flex-start;
+    /* border: 1px solid var(--border); */
     border-radius: var(--radius);
 }
 
+.sender-info {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.7rem;
+    /* border: 1px solid var(--border); */
+    border-bottom: 1px solid var(--border);
+    /* border-radius: var(--radius) var(--radius) 0 0; */
+    /* background-color: rgba(255, 255, 255, 0.02); */
+    width: 100%;
+    padding: 5px 10px;
+}
+
+.sender-avatar {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.message.is-me {
+    align-self: flex-end;
+    align-items: flex-end;
+}
+
+.message.is-me .sender-info {
+    flex-direction: row-reverse;
+    text-align: right;
+}
+
+.message.is-me .message-content {
+    text-align: right;
+    padding-right: 1rem;
+    padding-left: 10px;
+}
+
 .sender {
     font-weight: bold;
     font-size: 1.1rem;
-  margin-bottom: 0.25rem;
+    /* flex: 1; */
 }
 
-.sender .timestamp {
+.timestamp {
     font-weight: normal;
     opacity: 0.7;
-  font-size: 0.85rem;
-  margin-left: 0.5rem;
+    font-size: 0.7rem;
 }
 
 .message-content {
+    padding: 10px;
     padding-left: 1rem;
     white-space: pre-wrap;
     word-wrap: break-word;

src/components/RoomList.vue

@@ -51,7 +51,7 @@ onMounted(async () => {
 }
 
 .rooms-header {
-  padding: 1.5rem;
+    padding: 15px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -59,9 +59,9 @@ onMounted(async () => {
 }
 
 .rooms-header h2 {
-  font-size: 1.1rem;
+    /* font-size: 1rem; */
     margin: 0;
-  margin-left: 38px;
+    margin-left: 45px;
 }
 
 .scroll-area {
@@ -86,12 +86,13 @@ onMounted(async () => {
 }
 
 .room-item.active {
-  background: var(--accent);
-  color: rgba(0, 0, 0, 0.8);
+    /* border: 1px solid var(--border); */
+    background: var(--panel-accent);
+    color: var(--accent);
 }
 
 .room-item.active .room-owner {
-  color: rgba(0, 0, 0, 1);
+    color: var(--text);
 }
 
 .room-info {

src/pages/ChatPage.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="chat-layout">
-    <button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }" @click="isSidebarOpen = !isSidebarOpen">
+        <button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }"
+            @click="isSidebarOpen = !isSidebarOpen">
             <i class="fa-solid fa-bars"></i>
         </button>
 
@@ -69,7 +70,7 @@ const handleRoomSelection = () => {
 
 .chat-window-container {
     flex: 1;
-  padding-left: 38px;
+    /* padding-left: 38px; */
     display: flex;
     flex-direction: column;
     min-width: 0;
@@ -78,7 +79,7 @@ const handleRoomSelection = () => {
 
 .menu-toggle {
     position: absolute;
-  top: 24px;
+    top: 15px;
     left: 15px;
     z-index: 30;
     background: var(--panel);

src/pages/SettingsPage.vue

@@ -2,7 +2,8 @@
     <div class="settings-page">
         <h1>{{ $t('settings-title') }}</h1>
 
-    <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
+        <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false"
+            @updated="fetchUserData" />
         <UploadAvatarModal v-if="showAvatarModal" @close="showAvatarModal = false" @updated="fetchUserData" />
 
         <h2>{{ $t('settings-account') }}</h2>

src/types.ts

@@ -28,6 +28,7 @@ export interface Room {
 export interface Message {
     uuid: string
     sender: string
+    sender_uuid: string
     message_type: 'text'
     content: string
     sent_at: string