From e567b00b6cd02b14d26ad682e1bf6a08ed32511d Mon Sep 17 00:00:00 2001
From: eiiko6 <myeiiko6@gmail.com>
Date: Sun, 11 Jan 2026 21:00:33 +0100
Subject: [PATCH] added profile pictures to messages and improved chat page
 layout

---
 src-tauri/tauri.conf.json      |   2 +-
 src/assets/default-avatar.png  | Bin 0 -> 29018 bytes
 src/base.css                   |   1 +
 src/components/ChatWindow.vue  | 316 +++++++++++++++++----------------
 src/components/MessageList.vue | 132 +++++++++++---
 src/components/RoomList.vue    | 131 +++++++-------
 src/pages/ChatPage.vue         | 179 +++++++++----------
 src/pages/SettingsPage.vue     | 229 ++++++++++++------------
 src/types.ts                   |  57 +++---
 9 files changed, 565 insertions(+), 482 deletions(-)
 create mode 100644 src/assets/default-avatar.png

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index e843125..d3b8714 100644
--- a/src-tauri/tauri.conf.json
+++ b/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",
diff --git a/src/assets/default-avatar.png b/src/assets/default-avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d7653936fc0e6fa89359ef14792d34dc1d61849
GIT binary patch
literal 29018
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
SR$UAX3=E#GelF{r5}E*Kp6EdU

literal 0
HcmV?d00001

diff --git a/src/base.css b/src/base.css
index 5d7b302..d9e856e 100644
--- a/src/base.css
+++ b/src/base.css
@@ -19,6 +19,7 @@ body,
 :root {
   --bg: #0f1116;
   --panel: #171922;
+  --panel-accent: #12141B;
   --text: #e6e6eb;
   --muted: #9aa0aa;
   --accent: #f27aa3;
diff --git a/src/components/ChatWindow.vue b/src/components/ChatWindow.vue
index 87f37e1..5267643 100644
--- a/src/components/ChatWindow.vue
+++ b/src/components/ChatWindow.vue
@@ -1,29 +1,29 @@
 <template>
-  <InvitePeopleModal v-if="showInviteModal" :room_uuid=props.uuid @close="showInviteModal = false" />
+    <InvitePeopleModal v-if="showInviteModal" :room_uuid=props.uuid @close="showInviteModal = false" />
 
-  <div v-if="uuid === 'none'" class="no-room">
-    <div class="empty-state">
-      <i class="fa-solid fa-comments"></i>
-      <p>{{ $t('chat-no-room') }}</p>
-    </div>
-  </div>
-
-  <div v-else class="chat-container">
-    <!-- <h2 class="room-name">{{ currentRoom?.name }}</h2> -->
-
-    <div class="messages-container" ref="messageListRef" @scroll="handleScroll">
-      <MessageList :messages="messages" />
+    <div v-if="uuid === 'none'" class="no-room">
+        <div class="empty-state">
+            <i class="fa-solid fa-comments"></i>
+            <p>{{ $t('chat-no-room') }}</p>
+        </div>
     </div>
 
-    <div class="input-container">
-      <button v-if="isOwner && !currentRoom?.global" class="invite-btn" @click="showInviteModal = true"
-        :title="$t('chat-invite-title')">
-        <i class="fa-solid fa-users"></i>
-      </button>
+    <div v-else class="chat-container">
+        <h2 class="room-name">{{ currentRoom?.name }}</h2>
 
-      <MessageInput ref="messageInputRef" @send="onSend" />
+        <div class="messages-container" ref="messageListRef" @scroll="handleScroll">
+            <MessageList :messages="messages" />
+        </div>
+
+        <div class="input-container">
+            <button v-if="isOwner && !currentRoom?.global" class="invite-btn" @click="showInviteModal = true"
+                :title="$t('chat-invite-title')">
+                <i class="fa-solid fa-users"></i>
+            </button>
+
+            <MessageInput ref="messageInputRef" @send="onSend" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,220 +52,222 @@ const showInviteModal = ref(false);
 let socket: WebSocket | null = null;
 
 const isOwner = computed(() => {
-  if (!currentUser.value || !currentRoom.value) return false;
-  return currentUser.value.uuid === currentRoom.value.owner_uuid;
+    if (!currentUser.value || !currentRoom.value) return false;
+    return currentUser.value.uuid === currentRoom.value.owner_uuid;
 });
 
 async function initializeRoom() {
-  if (socket) { await socket.disconnect(); socket = null; }
+    if (socket) { await socket.disconnect(); socket = null; }
 
-  messages.value = [];
-  hasMore.value = true;
-  currentRoom.value = null;
+    messages.value = [];
+    hasMore.value = true;
+    currentRoom.value = null;
 
-  if (props.uuid === 'none') return;
+    if (props.uuid === 'none') return;
 
-  try {
-    const [msgs, roomInfo, auth] = await Promise.all([
-      fetchMessages(props.uuid, undefined, 40), // Load first 40
-      fetchRoomInfo(props.uuid),
-      getAuthData()
-    ]);
+    try {
+        const [msgs, roomInfo, auth] = await Promise.all([
+            fetchMessages(props.uuid, undefined, 40), // Load first 40
+            fetchRoomInfo(props.uuid),
+            getAuthData()
+        ]);
 
-    messages.value = msgs;
-    currentRoom.value = roomInfo;
-    currentUser.value = auth.user;
-    if (msgs.length < 40) hasMore.value = false;
+        console.log("First message payload:", msgs[0]);
 
-    await nextTick();
-    scrollToBottom();
+        messages.value = msgs;
+        currentRoom.value = roomInfo;
+        currentUser.value = auth.user;
+        if (msgs.length < 40) hasMore.value = false;
 
-    const wsToken = await getWsToken(props.uuid);
-    const url = `${API_WS}/rooms/${props.uuid}?token=${wsToken}`;
-    socket = await WebSocket.connect(url);
+        await nextTick();
+        scrollToBottom();
 
-    socket.addListener((msg) => {
-      if (msg.type === 'Text') {
-        const data: Message = JSON.parse(msg.data);
-        if (!messages.value.some(m => m.uuid === data.uuid)) {
-          messages.value.push(data);
-          nextTick().then(scrollToBottomIfAtEnd);
-        }
-      }
-    });
-  } catch (err) {
-    console.error("Room initialization failed:", err);
-  }
+        const wsToken = await getWsToken(props.uuid);
+        const url = `${API_WS}/rooms/${props.uuid}?token=${wsToken}`;
+        socket = await WebSocket.connect(url);
+
+        socket.addListener((msg) => {
+            if (msg.type === 'Text') {
+                const data: Message = JSON.parse(msg.data);
+                if (!messages.value.some(m => m.uuid === data.uuid)) {
+                    messages.value.push(data);
+                    nextTick().then(scrollToBottomIfAtEnd);
+                }
+            }
+        });
+    } catch (err) {
+        console.error("Room initialization failed:", err);
+    }
 }
 
 async function handleScroll() {
-  const el = messageListRef.value;
-  if (!el) return;
+    const el = messageListRef.value;
+    if (!el) return;
 
-  // If user scrolls to the top, is not already loading, and there's more data
-  if (el.scrollTop < 50 && !isLoadingMore.value && hasMore.value) {
-    await loadMore();
-  }
+    // If user scrolls to the top, is not already loading, and there's more data
+    if (el.scrollTop < 50 && !isLoadingMore.value && hasMore.value) {
+        await loadMore();
+    }
 }
 
 async function loadMore() {
-  if (messages.value.length === 0) return;
+    if (messages.value.length === 0) return;
 
-  isLoadingMore.value = true;
-  const oldestMsgUuid = messages.value[0].uuid;
+    isLoadingMore.value = true;
+    const oldestMsgUuid = messages.value[0].uuid;
 
-  try {
-    const olderMsgs = await fetchMessages(props.uuid, oldestMsgUuid, 30);
+    try {
+        const olderMsgs = await fetchMessages(props.uuid, oldestMsgUuid, 30);
 
-    if (olderMsgs.length === 0) {
-      hasMore.value = false;
-      return;
+        if (olderMsgs.length === 0) {
+            hasMore.value = false;
+            return;
+        }
+
+        // Capture height before adding messages to maintain scroll position
+        const el = messageListRef.value;
+        const previousScrollHeight = el?.scrollHeight || 0;
+
+        messages.value = [...olderMsgs, ...messages.value];
+
+        await nextTick();
+
+        // Restore scroll position so the view doesn't jump
+        if (el) {
+            el.scrollTop = el.scrollHeight - previousScrollHeight;
+        }
+
+        if (olderMsgs.length < 30) hasMore.value = false;
+    } catch (err) {
+        console.error("Failed to load more messages:", err);
+    } finally {
+        isLoadingMore.value = false;
     }
-
-    // Capture height before adding messages to maintain scroll position
-    const el = messageListRef.value;
-    const previousScrollHeight = el?.scrollHeight || 0;
-
-    messages.value = [...olderMsgs, ...messages.value];
-
-    await nextTick();
-
-    // Restore scroll position so the view doesn't jump
-    if (el) {
-      el.scrollTop = el.scrollHeight - previousScrollHeight;
-    }
-
-    if (olderMsgs.length < 30) hasMore.value = false;
-  } catch (err) {
-    console.error("Failed to load more messages:", err);
-  } finally {
-    isLoadingMore.value = false;
-  }
 }
 
 function scrollToBottom() {
-  if (messageListRef.value) {
-    messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
-  }
+    if (messageListRef.value) {
+        messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+    }
 }
 
 // Only scroll to bottom for new messages if the user is already near the bottom
 function scrollToBottomIfAtEnd() {
-  const el = messageListRef.value;
-  if (!el) return;
-  const threshold = 150;
-  const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
-  if (isAtBottom) scrollToBottom();
+    const el = messageListRef.value;
+    if (!el) return;
+    const threshold = 150;
+    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    if (isAtBottom) scrollToBottom();
 }
 
 
 
 const handleGlobalKeyDown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    const active = document.activeElement?.tagName.toLowerCase();
-    const isTyping = active === 'input' || active === 'textarea';
-    if (!isTyping && messageInputRef.value) {
-      event.preventDefault();
-      messageInputRef.value.focus();
+    if (event.key === 'Enter') {
+        const active = document.activeElement?.tagName.toLowerCase();
+        const isTyping = active === 'input' || active === 'textarea';
+        if (!isTyping && messageInputRef.value) {
+            event.preventDefault();
+            messageInputRef.value.focus();
+        }
     }
-  }
 };
 
 async function onSend(content: string) {
-  if (props.uuid === 'none') return;
-  await sendMessage(props.uuid, content);
+    if (props.uuid === 'none') return;
+    await sendMessage(props.uuid, content);
 }
 
 watch(() => props.uuid, () => {
-  initializeRoom();
+    initializeRoom();
 });
 
 onMounted(() => {
-  initializeRoom();
-  window.addEventListener('keydown', handleGlobalKeyDown);
+    initializeRoom();
+    window.addEventListener('keydown', handleGlobalKeyDown);
 });
 
 onUnmounted(async () => {
-  if (socket) {
-    await socket.disconnect();
-  }
-  window.removeEventListener('keydown', handleGlobalKeyDown);
+    if (socket) {
+        await socket.disconnect();
+    }
+    window.removeEventListener('keydown', handleGlobalKeyDown);
 });
 </script>
 
 <style scoped>
 .chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .messages-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  scroll-behavior: auto;
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem;
+    scroll-behavior: auto;
 }
 
 .input-container {
-  display: flex;
-  gap: 10px;
-  align-items: flex-end;
-  padding: 10px;
-  border-top: 1px solid var(--border);
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+    padding: 10px;
+    border-top: 1px solid var(--border);
 }
 
 /* Ensure the MessageInput component expands to fill the width */
 :deep(.input-container > *:last-child) {
-  flex: 1;
+    flex: 1;
 }
 
-/* .room-name { */
-/*   margin: 15px 0; */
-/*   text-align: center; */
-/* } */
+.room-name {
+    margin: 15px 0;
+    text-align: center;
+}
 
 .loading-more {
-  text-align: center;
-  padding: 10px;
-  font-size: 0.8rem;
-  color: var(--muted);
+    text-align: center;
+    padding: 10px;
+    font-size: 0.8rem;
+    color: var(--muted);
 }
 
 .invite-btn {
-  margin: 0;
-  padding: 18px;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius);
-  border: none;
-  background: transparent;
-  color: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    margin: 0;
+    padding: 18px;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius);
+    border: none;
+    background: transparent;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 
 .no-room {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--muted);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
 }
 
 .empty-state {
-  text-align: center;
-  font-size: 1.2rem;
-  user-select: none;
-  -webkit-user-select: none;
+    text-align: center;
+    font-size: 1.2rem;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .empty-state i {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.3;
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.3;
 }
 </style>
diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
index abc6ff0..dd3559b 100644
--- a/src/components/MessageList.vue
+++ b/src/components/MessageList.vue
@@ -1,49 +1,125 @@
+<template>
+    <ul>
+        <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>
 
-<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>
-      <div class="message-content">{{ m.content }}</div>
-    </li>
-  </ul>
-</template>
+
 
 <style scoped>
 ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
+    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;
-  border-radius: var(--radius);
+    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;
+    font-weight: bold;
+    font-size: 1.1rem;
+    /* flex: 1; */
 }
 
-.sender .timestamp {
-  font-weight: normal;
-  opacity: 0.7;
-  font-size: 0.85rem;
-  margin-left: 0.5rem;
+.timestamp {
+    font-weight: normal;
+    opacity: 0.7;
+    font-size: 0.7rem;
 }
 
 .message-content {
-  padding-left: 1rem;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  max-width: 100%;
-  display: block;
+    padding: 10px;
+    padding-left: 1rem;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    max-width: 100%;
+    display: block;
 }
 </style>
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index de26347..e28ad3a 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="room-list">
-    <header class="rooms-header">
-      <h2>{{ $t('chat-room-list-title') }}</h2>
-      <button class="create-btn" @click="showCreate = true" :title="$t('chat-create-title')">
-        <i class="fa-solid fa-plus"></i>
-      </button>
-    </header>
+    <div class="room-list">
+        <header class="rooms-header">
+            <h2>{{ $t('chat-room-list-title') }}</h2>
+            <button class="create-btn" @click="showCreate = true" :title="$t('chat-create-title')">
+                <i class="fa-solid fa-plus"></i>
+            </button>
+        </header>
 
-    <Teleport to="body">
-      <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
-    </Teleport>
+        <Teleport to="body">
+            <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
+        </Teleport>
 
-    <div class="scroll-area">
-      <router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="btn room-item"
-        :class="{ active: route.params.uuid === room.uuid }" @click="emit('select-room')">
-        <div class="room-info">
-          <span class="room-name">{{ room.name }}</span>
-          <span class="room-owner">{{ $t('chat-room-owner', { owner: room.owner_name }) }}</span>
+        <div class="scroll-area">
+            <router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="btn room-item"
+                :class="{ active: route.params.uuid === room.uuid }" @click="emit('select-room')">
+                <div class="room-info">
+                    <span class="room-name">{{ room.name }}</span>
+                    <span class="room-owner">{{ $t('chat-room-owner', { owner: room.owner_name }) }}</span>
+                </div>
+            </router-link>
         </div>
-      </router-link>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,93 +37,94 @@ const rooms = ref<Room[]>([]);
 const emit = defineEmits(['select-room']);
 
 onMounted(async () => {
-  rooms.value = await fetchRooms();
+    rooms.value = await fetchRooms();
 });
 </script>
 
 <style scoped>
 .room-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  user-select: none;
-  -webkit-user-select: none;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .rooms-header {
-  padding: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--border);
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border);
 }
 
 .rooms-header h2 {
-  font-size: 1.1rem;
-  margin: 0;
-  margin-left: 38px;
+    /* font-size: 1rem; */
+    margin: 0;
+    margin-left: 45px;
 }
 
 .scroll-area {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem;
 }
 
 .room-item {
-  display: block;
-  padding: 0.75rem 1rem;
-  margin-bottom: 0.25rem;
-  border-radius: 8px;
-  text-decoration: none;
-  color: var(--muted);
-  transition: all 0.2s;
+    display: block;
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.25rem;
+    border-radius: 8px;
+    text-decoration: none;
+    color: var(--muted);
+    transition: all 0.2s;
 }
 
 .room-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text);
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text);
 }
 
 .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 {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .room-name {
-  font-weight: 500;
+    font-weight: 500;
 }
 
 .room-owner {
-  font-size: 0.75rem;
-  opacity: 0.6;
+    font-size: 0.75rem;
+    opacity: 0.6;
 }
 
 .create-btn {
-  margin: 0;
-  padding: 18px;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius);
-  border: none;
-  background: transparent;
-  color: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    margin: 0;
+    padding: 18px;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius);
+    border: none;
+    background: transparent;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .create-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.05);
 }
 </style>
diff --git a/src/pages/ChatPage.vue b/src/pages/ChatPage.vue
index dd0bc4f..ca993ee 100644
--- a/src/pages/ChatPage.vue
+++ b/src/pages/ChatPage.vue
@@ -1,21 +1,22 @@
 <template>
-  <div class="chat-layout">
-    <button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }" @click="isSidebarOpen = !isSidebarOpen">
-      <i class="fa-solid fa-bars"></i>
-    </button>
+    <div class="chat-layout">
+        <button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }"
+            @click="isSidebarOpen = !isSidebarOpen">
+            <i class="fa-solid fa-bars"></i>
+        </button>
 
-    <aside class="sidebar" :class="{ 'is-open': isSidebarOpen }">
-      <div class="sidebar-content">
-        <RoomList @select-room="handleRoomSelection" />
-      </div>
-    </aside>
+        <aside class="sidebar" :class="{ 'is-open': isSidebarOpen }">
+            <div class="sidebar-content">
+                <RoomList @select-room="handleRoomSelection" />
+            </div>
+        </aside>
 
-    <div v-if="isSidebarOpen" class="sidebar-overlay" @click="isSidebarOpen = false"></div>
+        <div v-if="isSidebarOpen" class="sidebar-overlay" @click="isSidebarOpen = false"></div>
 
-    <main class="chat-window-container" :class="{ 'sidebar-is-open': isSidebarOpen }">
-      <ChatWindow :uuid="uuid" />
-    </main>
-  </div>
+        <main class="chat-window-container" :class="{ 'sidebar-is-open': isSidebarOpen }">
+            <ChatWindow :uuid="uuid" />
+        </main>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -27,117 +28,117 @@ defineProps<{ uuid: string }>();
 const isSidebarOpen = ref(true);
 
 const handleRoomSelection = () => {
-  if (window.innerWidth <= 720) {
-    isSidebarOpen.value = false;
-  }
+    if (window.innerWidth <= 720) {
+        isSidebarOpen.value = false;
+    }
 };
 </script>
 
 <style scoped>
 .chat-layout {
-  position: relative;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  max-width: 1200px;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    max-width: 1200px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
 }
 
 .sidebar {
-  width: 300px;
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  background: var(--panel);
-  transition: width 0.3s ease, transform 0.3s ease;
-  z-index: 20;
-  overflow: hidden;
+    width: 300px;
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    background: var(--panel);
+    transition: width 0.3s ease, transform 0.3s ease;
+    z-index: 20;
+    overflow: hidden;
 }
 
 .sidebar:not(.is-open) {
-  width: 0;
-  border-right: none;
+    width: 0;
+    border-right: none;
 }
 
 .sidebar-content {
-  width: 300px;
-  height: 100%;
+    width: 300px;
+    height: 100%;
 }
 
 .chat-window-container {
-  flex: 1;
-  padding-left: 38px;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  transition: all 0.3s ease;
+    flex: 1;
+    /* padding-left: 38px; */
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    transition: all 0.3s ease;
 }
 
 .menu-toggle {
-  position: absolute;
-  top: 24px;
-  left: 15px;
-  z-index: 30;
-  background: var(--panel);
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: left 0.3s ease;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    z-index: 30;
+    background: var(--panel);
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: left 0.3s ease;
 }
 
 .menu-toggle.sidebar-closed {
-  left: 15px;
+    left: 15px;
 }
 
 .menu-toggle i {
-  font-size: 1.6rem;
+    font-size: 1.6rem;
 }
 
 @media (min-width: 721px) {
-  .chat-window-container.sidebar-is-open {
-    padding-left: 0;
-  }
+    .chat-window-container.sidebar-is-open {
+        padding-left: 0;
+    }
 }
 
 @media (max-width: 720px) {
-  .sidebar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 280px;
-    transform: translateX(-100%);
-  }
+    .sidebar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 280px;
+        transform: translateX(-100%);
+    }
 
-  .sidebar.is-open {
-    transform: translateX(0);
-    width: 280px;
-  }
+    .sidebar.is-open {
+        transform: translateX(0);
+        width: 280px;
+    }
 
-  .sidebar:not(.is-open) {
-    width: 280px;
-    transform: translateX(-100%);
-  }
+    .sidebar:not(.is-open) {
+        width: 280px;
+        transform: translateX(-100%);
+    }
 
-  .sidebar-content {
-    width: 280px;
-  }
+    .sidebar-content {
+        width: 280px;
+    }
 
-  .sidebar-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.3);
-    z-index: 15;
-  }
+    .sidebar-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.3);
+        z-index: 15;
+    }
 
-  .menu-toggle:hover i {
-    color: var(--muted);
-  }
+    .menu-toggle:hover i {
+        color: var(--muted);
+    }
 }
 </style>
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 1484843..3f2ddf0 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -1,48 +1,49 @@
 <template>
-  <div class="settings-page">
-    <h1>{{ $t('settings-title') }}</h1>
+    <div class="settings-page">
+        <h1>{{ $t('settings-title') }}</h1>
 
-    <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
-    <UploadAvatarModal v-if="showAvatarModal" @close="showAvatarModal = 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>
-    <div v-if="user" class="info-card">
-      <div class="avatar-display">
-        <img :src="user.avatar_url || '/tauri.svg'" class="avatar-img" />
+        <h2>{{ $t('settings-account') }}</h2>
+        <div v-if="user" class="info-card">
+            <div class="avatar-display">
+                <img :src="user.avatar_url || '/tauri.svg'" class="avatar-img" />
 
-        <button class="update-btn" @click="showAvatarModal = true">
-          {{ $t('settings-upload-avatar-btn') || 'Change Avatar' }}
-        </button>
-      </div>
+                <button class="update-btn" @click="showAvatarModal = true">
+                    {{ $t('settings-upload-avatar-btn') || 'Change Avatar' }}
+                </button>
+            </div>
 
-      <div class="info-display">
-        <div class="left">
-          <p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
-          <p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
+            <div class="info-display">
+                <div class="left">
+                    <p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
+                    <p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
+                </div>
+
+                <button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
+            </div>
+        </div>
+        <div v-else class="loading-state">
+            <p>{{ $t('settings-loading') }}</p>
         </div>
 
-        <button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
-      </div>
-    </div>
-    <div v-else class="loading-state">
-      <p>{{ $t('settings-loading') }}</p>
-    </div>
+        <h2>{{ $t('settings-language') }}</h2>
+        <div class="input-group">
+            <div class="lang-grid">
+                <button v-for="lang in languages" :key="lang.code" class="lang-btn"
+                    :class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
+                    {{ lang.name }}
+                </button>
+            </div>
+        </div>
 
-    <h2>{{ $t('settings-language') }}</h2>
-    <div class="input-group">
-      <div class="lang-grid">
-        <button v-for="lang in languages" :key="lang.code" class="lang-btn"
-          :class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
-          {{ lang.name }}
+        <button class="logout-btn" @click="logout">
+            <i class="fa-solid fa-right-from-bracket"></i>
+            <span>{{ $t('settings-logout-btn') }}</span>
         </button>
-      </div>
     </div>
-
-    <button class="logout-btn" @click="logout">
-      <i class="fa-solid fa-right-from-bracket"></i>
-      <span>{{ $t('settings-logout-btn') }}</span>
-    </button>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -67,80 +68,80 @@ const currentLang = ref('')
 const languages = computed(() => getSupportedLanguagesMetadata())
 
 async function fetchUserData() {
-  try {
-    const auth = await getAuthData()
-    user.value = auth.user
-  } catch (err) {
-    console.error("Failed to load user data:", err)
-  }
+    try {
+        const auth = await getAuthData()
+        user.value = auth.user
+    } catch (err) {
+        console.error("Failed to load user data:", err)
+    }
 }
 
 onMounted(async () => {
-  const pref = await getLocalePreference()
-  // Synchronize the UI state with the actual active language
-  currentLang.value = pref || (navigator.language.split('-')[0])
+    const pref = await getLocalePreference()
+    // Synchronize the UI state with the actual active language
+    currentLang.value = pref || (navigator.language.split('-')[0])
 
-  fetchUserData()
+    fetchUserData()
 })
 
 async function changeLanguage(code: string) {
-  const actual = setLanguage(code)
-  currentLang.value = actual
-  await saveLocalePreference(actual)
+    const actual = setLanguage(code)
+    currentLang.value = actual
+    await saveLocalePreference(actual)
 }
 
 function logout() {
-  authLogout()
-  router.push('/login')
+    authLogout()
+    router.push('/login')
 }
 </script>
 
 <style scoped>
 .settings-page {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
 h2 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 
 .info-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 1rem;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 1rem;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
 }
 
 .avatar-display,
 .info-display {
-  display: flex;
-  /* border: 1px solid var(--border); */
-  /* border-radius: var(--radius); */
-  /* background-color: rgba(255, 255, 255, 0.02); */
-  /* padding: 1rem; */
-  flex-direction: row;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
+    display: flex;
+    /* border: 1px solid var(--border); */
+    /* border-radius: var(--radius); */
+    /* background-color: rgba(255, 255, 255, 0.02); */
+    /* padding: 1rem; */
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
 .avatar-img {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--border);
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--border);
 }
 
 /* .update-btn { */
@@ -150,63 +151,63 @@ h2 {
 /* } */
 
 .lang-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 0.5rem;
-  margin-top: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 0.5rem;
+    margin-top: 0.5rem;
 }
 
 .lang-btn {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  color: var(--text);
-  margin: 0;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    color: var(--text);
+    margin: 0;
 }
 
 .lang-btn.active {
-  background: var(--accent);
-  color: #000;
-  border-color: var(--accent);
+    background: var(--accent);
+    color: #000;
+    border-color: var(--accent);
 }
 
 .logout-btn {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 30px;
-  padding: 10px 20px;
-  color: var(--text);
-  background-color: transparent;
-  border: 1px solid var(--error);
-  border-radius: var(--radius);
-  width: fit-content;
-  transition: all 0.2s ease;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 30px;
+    padding: 10px 20px;
+    color: var(--text);
+    background-color: transparent;
+    border: 1px solid var(--error);
+    border-radius: var(--radius);
+    width: fit-content;
+    transition: all 0.2s ease;
 }
 
 .logout-btn:hover {
-  color: rgba(255, 80, 80, 0.8);
+    color: rgba(255, 80, 80, 0.8);
 }
 
 .logout-btn:hover i {
-  color: rgba(255, 80, 80, 0.8);
+    color: rgba(255, 80, 80, 0.8);
 }
 
 .logout-btn i {
-  font-size: 1.25rem;
+    font-size: 1.25rem;
 }
 
 .loading-state {
-  padding: 2rem;
-  text-align: center;
-  color: var(--muted);
+    padding: 2rem;
+    text-align: center;
+    color: var(--muted);
 }
 
 @media screen and (max-width: 720px) {
 
-  .avatar-display,
-  .info-display {
-    justify-content: center;
-  }
+    .avatar-display,
+    .info-display {
+        justify-content: center;
+    }
 }
 </style>
diff --git a/src/types.ts b/src/types.ts
index 18e71f3..45c8d3a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,51 +1,52 @@
 export interface User {
-  uuid: string
-  username: string
-  email: string
-  avatar_url: string
+    uuid: string
+    username: string
+    email: string
+    avatar_url: string
 }
 
 export interface LoginResponse {
-  uuid: string
-  username: string
-  email: string
-  token: string
+    uuid: string
+    username: string
+    email: string
+    token: string
 }
 
 export interface UpdateUserResponse {
-  username: string
-  email: string
+    username: string
+    email: string
 }
 
 export interface Room {
-  uuid: string
-  owner_name: string
-  owner_uuid: string
-  name: string
-  global: boolean
+    uuid: string
+    owner_name: string
+    owner_uuid: string
+    name: string
+    global: boolean
 }
 
 export interface Message {
-  uuid: string
-  sender: string
-  message_type: 'text'
-  content: string
-  sent_at: string
+    uuid: string
+    sender: string
+    sender_uuid: string
+    message_type: 'text'
+    content: string
+    sent_at: string
 }
 
 export interface Friend {
-  uuid: string
-  username: string
+    uuid: string
+    username: string
 }
 
 export interface FriendRequest {
-  sender_uuid: string
-  sender_username: string
+    sender_uuid: string
+    sender_username: string
 }
 
 export interface RoomInvite {
-  room_uuid: string
-  room_name: string
-  sender_uuid: string
-  sender_username: string
+    room_uuid: string
+    room_name: string
+    sender_uuid: string
+    sender_username: string
 }