feat: configurable message list width

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/MessageList.vue

@@ -332,7 +332,7 @@ onBeforeUnmount(() => {
             icon="mdi-email-open-outline"
             variant="text"
             :disabled="selectionCount === 0"
-            @click="handleFlag('read', true)"
+            @click="handleFlag('seen', true)"
           >
             <v-icon>mdi-email-open-outline</v-icon>
             <v-tooltip activator="parent" location="bottom">Mark as Read</v-tooltip>
@@ -342,7 +342,7 @@ onBeforeUnmount(() => {
             icon="mdi-email-outline"
             variant="text"
             :disabled="selectionCount === 0"
-            @click="handleFlag('read', false)"
+            @click="handleFlag('seen', false)"
           >
             <v-icon>mdi-email-outline</v-icon>
             <v-tooltip activator="parent" location="bottom">Mark as Unread</v-tooltip>

src/components/MessageListItemMenu.vue

@@ -98,7 +98,7 @@ const handleDelete = () => {
     <v-list class="message-item-menu" density="compact" min-width="220">
       <v-list-item
         :prepend-icon="isRead ? 'mdi-email-outline' : 'mdi-email-open-outline'"
-        @click="handleFlag('read', !isRead)"
+        @click="handleFlag('seen', !isRead)"
       >
         <v-list-item-title>
           {{ isRead ? 'Mark as unread' : 'Mark as read' }}

src/components/settings/DisplaySettings.vue

@@ -3,11 +3,12 @@ import { storeToRefs } from 'pinia'
 import {
   folderViewModeOptions,
   messageListDensityOptions,
+  messageListWidthOptions,
   useMailSettingsStore,
 } from '@/stores/mailSettingsStore'
 
 const mailSettingsStore = useMailSettingsStore()
-const { folderViewMode, messageListDensity } = storeToRefs(mailSettingsStore)
+const { folderViewMode, messageListDensity, messageListWidth } = storeToRefs(mailSettingsStore)
 </script>
 
 <template>
@@ -46,6 +47,22 @@ const { folderViewMode, messageListDensity } = storeToRefs(mailSettingsStore)
           />
         </template>
       </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Message list width</v-list-item-title>
+        <v-list-item-subtitle>Set how wide the message list panel is</v-list-item-subtitle>
+        <template #append>
+          <v-select
+            v-model="messageListWidth"
+            :items="messageListWidthOptions"
+            item-value="value"
+            item-title="title"
+            density="compact"
+            variant="outlined"
+            style="width: 150px"
+          />
+        </template>
+      </v-list-item>
     </v-list>
   </div>
 </template>