fix some errors on front

front/src/store/models/Room.js

@@ -1,3 +1,11 @@
+export const roomType = {
+    ROOM: 0,
+    CHANNEL: 1,
+    GROUP: 2,
+    DM: 3,
+    THREAD: 4,
+};
+
 export default class Room {
     constructor(room, thread) {
         this.id = room.id;
@@ -6,6 +14,7 @@ export default class Room {
         this.roomName = room.roomName;
         this.mailboxId = room.mailboxId;
         this.unseen = room.unseen;
+        // this.type = room.type;
 
         this.messages = [];
         this.messagesFetched = false;

front/src/store/store.js

@@ -6,9 +6,10 @@ import Account from "./models/Account";
 const store = createStore({
     state() {
         return {
-            rooms: [new Room({ id: 12, user: "user", roomName: "room name", mailbboxId: 2 })],
+            rooms: [new Room({ id: 12, user: "user", roomName: "room name", mailbboxId: 2, type: 1 })],
             messages: [],
             accounts: [new Account(0, "ALL")],
+            addresses: [],
             activeAccount: 0,
             activeRoom: 0,
         };
@@ -89,7 +90,7 @@ const store = createStore({
         },
         fetchMessages: async (context, data) => {
             if (!data.room || data.room?.fetched == false) {
-                store.dispatch("fetchAddress", { roomId: data.roomId });
+                store.dispatch("fetchRoomMembers", { roomId: data.roomId });
                 API.getMessages(data.roomId)
                     .then((res) => {
                         context.commit("addMessages", { messages: res.data, roomId: data.roomId });

front/src/utils/string.js

@@ -1,4 +1,5 @@
 export function decodeEmojis(text) {
+    if (!text) return text;
     const regex = /\\u{([^}]+)}/g;
     const decodedText = text.replace(regex, (_, hex) => String.fromCodePoint(parseInt(hex, 16)));
     return decodedText;

front/src/views/room/Header.vue

@@ -1,24 +1,27 @@
+<script setup>
+import {defineProps} from "vue";
+const props = defineProps({ room: Object });
+
+</script>
+
+
 <template>
-    <div id="main">
-        header -> sender
-                    -> thread
-                    -> single click open side
-                    -> double click open plain
-        is thread
+    <div class="main">
+        <div>
+            {{ props }}
+            type: name / sender
+        </div>
+        <div>
+            action:
+            threads
+            message important
+        </div>
     </div>
 </template>
 
-<script>
-
-export default {
-  name: 'Header',
-  components: {
-  }
-}
-</script>
 
 <style scoped>
-#main {
+.main {
     border-bottom: 1px solid #505050;
     width: 100%;
     height: 51px;

front/src/views/room/RoomView.vue

@@ -10,8 +10,8 @@ const route = useRoute();
 let { id } = route.params;
 onBeforeMount(async () => {
     // get data
-    console.log(store.state.rooms.find((room) => room.id === id)?.fetched);
     let room = store.state.rooms.find((room) => room.id === id);
+    console.log(room)
     if (!room || room?.fetched === false) {
         // todo
         // await store.dispatch("fetchMessages", );
@@ -29,7 +29,7 @@ onBeforeRouteUpdate(async (to, from) => {
 
 <template>
     <div id="main">
-        <Header></Header>
+        <Header :room="room" ></Header>
         <div id="RoomViewBody">
             <div class="content">
                 <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />

front/src/views/sidebar/accounts/Account.vue

@@ -25,11 +25,12 @@ export default {
 
 <style scoped>
 .container {
-  max-width: 32px;
+  width: 65px;
+  text-align: center;
   white-space: normal;
   word-wrap: break-word;
   padding: 5px;
-  margin: 1px 0;
+  margin: 3px 0;
   cursor: pointer;
   border-radius: 8px;
   border: 2px solid transparent;

front/src/views/sidebar/rooms/threads/ThreadList.vue

@@ -1,16 +1,13 @@
 <script setup>
-import Thread from './Thread.vue';
-import { defineProps } from 'vue'
+import Thread from "./Thread.vue";
+import { defineProps } from "vue";
 const props = defineProps({ threads: [Object] });
-console.log(props.threads)
 </script>
 
 <template>
     <div>
-      <Thread v-for="(thread, index) in props.threads" :key="index" :thread="thread" />
+        <Thread v-for="(thread, index) in props.threads" :key="index" :thread="thread" />
     </div>
 </template>
 
-
-<style scoped>
-</style>
+<style scoped></style>