show notifications front

back/mails/saveMessage.ts

@@ -76,6 +76,7 @@ export default class RegisterMessageInApp {
     }
 
     async incrementNotSeen(roomId: number) {
+        // todo it appears there is an error with notifications
         if (!this.isSeen) {
             await incrementNotSeenRoom(roomId);
         }

front/src/components/Badge.vue

@@ -13,11 +13,11 @@ export default {
         },
         color: {
             type: String,
-            default: "#007bff",
         },
         type: {
             type: String,
             default: "badge-primary",
+            number: "badge-number",
         },
     },
 };
@@ -41,5 +41,8 @@ export default {
     background-color: #007bff;
 }
 
-/* add more type classes for other types/colors */
+.badge-number {
+    color: var(--primary-text);
+    background-color: #4d5970;
+}
 </style>

front/src/store/models/model.ts

@@ -23,7 +23,7 @@ export interface Room {
     mailboxId: number;
     user: string;
     userId: number;
-    unseen: number;
+    notSeen: number;
     messages: Message[];
     messageLoading: LoadingState;
     threadIds: number[];

front/src/store/store.ts

@@ -11,7 +11,7 @@ interface RoomFromBack {
     mailboxId: number;
     user: string;
     userId: number;
-    unseen: number;
+    notSeen: number;
     parent_id?: number;
     // todo thread
 }
@@ -31,7 +31,7 @@ function createRoom(options: RoomFromBack): Room {
         mailboxId: options.mailboxId,
         userId: options.userId,
         user: options.user,
-        unseen: 0,
+        notSeen: options.notSeen,
         messages: [],
         messageLoading: LoadingState.notLoaded,
         threadIds: [],

front/src/views/room/Message.vue

@@ -98,15 +98,17 @@ const displayAddresses = (addressesId) => {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    background-color: blue;
+    background-color: var(--quaternary-background);
-    padding: 3px;
+    padding: 3px 10px;
     margin-bottom: 6px;
+    border-radius: 4px;
 }
 
 iframe {
     overflow-y: auto;
     max-height: 300px;
     width: 100%;
+    border: none;
     padding: 2px 10px;
     max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
     background-color: rgb(234, 234, 234);

front/src/views/sidebar/rooms/Room.vue

@@ -34,9 +34,8 @@ const router = useRouter();
                 <div class="sender">{{ props.data.user }}</div>
                 <div class="object">{{ props.data.roomName }}</div>
             </div>
-            <Badge class="badge" v-if="props.data.unseen > 0"
+            {{ props.data.unseen }}
-                ><template v-slot:body>{{ props.data.unseen }}</template>
+            <Badge class="badge" v-if="props.data.notSeen > 0" :value="props.data.notSeen" type="badge-number" />
-            </Badge>
         </div>
         <ThreadList :threadIds="props.data.threadIds" />
     </div>

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

@@ -18,6 +18,7 @@ const router = useRouter();
         class="room"
     >
         {{ room.roomName }}
+        <Badge class="badge" v-if="room.notSeen > 0" :value="room.notSeen" type="badge-number" />
     </div>
 </template>