Merge pull request 'fix: read and unread' (#45) from fix/read-unread into main

Reviewed-on: #45

src/components/MessageList.vue

@@ -242,9 +242,6 @@ onBeforeUnmount(() => {
             hide-details
             @update:model-value="handleSelectionToggleAll"
           />
-          <span class="text-caption text-medium-emphasis">
-            {{ selectionCount > 0 ? `${selectionCount} selected` : 'Select all loaded' }}
-          </span>
         </div>
 
         <div class="selection-actions">
@@ -270,14 +267,24 @@ onBeforeUnmount(() => {
           </v-btn>
           <v-btn
             size="small"
-            icon="mdi-read"
+            icon="mdi-email-open-outline"
             variant="text"
             :disabled="selectionCount === 0"
             @click="handleFlag('read', true)"
           >
-            <v-icon>mdi-read</v-icon>
+            <v-icon>mdi-email-open-outline</v-icon>
             <v-tooltip activator="parent" location="bottom">Mark as Read</v-tooltip>
           </v-btn>
+          <v-btn
+            size="small"
+            icon="mdi-email-outline"
+            variant="text"
+            :disabled="selectionCount === 0"
+            @click="handleFlag('read', false)"
+          >
+            <v-icon>mdi-email-outline</v-icon>
+            <v-tooltip activator="parent" location="bottom">Mark as Unread</v-tooltip>
+          </v-btn>
           <v-btn
             size="small"
             icon="mdi-close"
@@ -496,6 +503,20 @@ onBeforeUnmount(() => {
   :deep(.v-list-item-subtitle:first-of-type) {
     font-weight: 600;
   }
+
+  :deep(.v-list-item-title),
+  :deep(.v-list-item-subtitle:first-of-type),
+  :deep(.v-list-item-title .text-caption) {
+    color: rgb(var(--v-theme-on-surface));
+  }
+}
+
+.message-item.unread:hover {
+  background-color: rgba(var(--v-theme-primary), 0.1);
+}
+
+.message-item.unread.selected:not(.opened) {
+  background-color: rgba(var(--v-theme-primary), 0.14);
 }
 
 @media (max-width: 960px) {

src/stores/mailUiStore.ts

@@ -152,6 +152,7 @@ export const useMailUiStore = defineStore('mailUiStore', () => {
     closeCompose()
     messageSelectionModeDeactivate()
     clearMessageReadTimer()
+    selectedMessage.value = null
     selectedFolder.value = folder
     await mailStore.selectFolder(folder)
   }
@@ -160,7 +161,7 @@ export const useMailUiStore = defineStore('mailUiStore', () => {
     closeCompose()
     messageSelectionModeDeactivate()
     createMessageReadTimer(message)
-    // mailStore.selectMessage(message)
+    selectedMessage.value = message
   }
 
   function createMessageReadTimer(entity: EntityObject | null) {