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>

src/pages/MailPage.vue

@@ -5,6 +5,7 @@ import { useDisplay } from 'vuetify'
 import { useModuleStore } from '@KTXC'
 import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import { useMailOperationsStore } from '@/stores/mailOperationsStore'
+import { useMailSettingsStore } from '@/stores/mailSettingsStore'
 import { useMailUiStore } from '@/stores/mailUiStore'
 import type { CollectionObject, EntityObject } from '@MailManager/models'
 import { ComposerMode } from '@/types/composer'
@@ -32,6 +33,8 @@ const collectionsStore = useCollectionsStore()
 // Mail module store
 const mailOperationsStore = useMailOperationsStore()
 const mailUiStore = useMailUiStore()
+const mailSettingsStore = useMailSettingsStore()
+const { messageListWidth } = storeToRefs(mailSettingsStore)
 
 // storeToRefs preserves reactivity for state and computed properties
 const {
@@ -288,7 +291,10 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
       <div class="mail-main">
         <div class="mail-wrapper">
           <!-- Message list panel -->
-          <div class="mail-list-panel">
+          <div
+            class="mail-list-panel"
+            :style="{ '--mail-list-width': messageListWidth + '%' }"
+          >
             <MessageList
               :messages="currentMessages"
               :selected-collection="selectedFolder"
@@ -453,9 +459,10 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
 }
 
 .mail-list-panel {
-  width: 320px;
+  flex: 0 0 var(--mail-list-width, 35%);
+  width: var(--mail-list-width, 35%);
   min-width: 280px;
-  max-width: 450px;
+  max-width: 70%;
   border-right: 1px solid rgb(var(--v-border-color));
   overflow-y: auto;
   display: flex;
@@ -477,6 +484,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
   }
   
   .mail-list-panel {
+    flex: 0 0 auto;
     width: 100%;
     max-width: 100%;
     border-right: none;

src/stores/mailSettingsStore.ts

@@ -6,11 +6,13 @@ const MESSAGE_READ_ENABLED_KEY = 'mail.behaviour.messageReadEnabled'
 const MESSAGE_READ_DELAY_KEY = 'mail.behaviour.messageReadDelay'
 const FOLDER_VIEW_MODE_KEY = 'mail.folderViewMode'
 const MESSAGE_LIST_DENSITY_KEY = 'mail.messageListDensity'
+const MESSAGE_LIST_WIDTH_KEY = 'mail.messageListWidth'
 
 const DEFAULT_MESSAGE_READ_ENABLED = false
 const DEFAULT_MESSAGE_READ_DELAY = 5
 const DEFAULT_FOLDER_VIEW_MODE = 'tree'
 const DEFAULT_MESSAGE_LIST_DENSITY = 'cozy'
+const DEFAULT_MESSAGE_LIST_WIDTH = 35
 
 export type FolderViewMode = 'tree' | 'page'
 
@@ -33,6 +35,16 @@ export const messageListDensityConfig: Record<MessageListDensity, {
   comfortable: { itemHeight: 96, lines: 'three', showSubjectLine: true, showThirdLine: true },
 }
 
+// Width of the message list panel, as a percentage of the split area. Only applies to
+// the side-by-side (vertical reading pane) view; future layout views own their own sizing.
+export type MessageListWidth = 25 | 35 | 50
+
+export const messageListWidthOptions = [
+  { value: 25, title: 'Narrow' },
+  { value: 35, title: 'Medium' },
+  { value: 50, title: 'Wide' },
+]
+
 export const messageReadDelayOptions = [
   { value: 2, title: '2 seconds' },
   { value: 5, title: '5 seconds' },
@@ -67,6 +79,10 @@ function normalizeMessageListDensity(value: unknown, fallback: MessageListDensit
   return value === 'compact' || value === 'cozy' || value === 'comfortable' ? value : fallback
 }
 
+function normalizeMessageListWidth(value: unknown, fallback: MessageListWidth): MessageListWidth {
+  return value === 25 || value === 35 || value === 50 ? value : fallback
+}
+
 export const useMailSettingsStore = defineStore('mailSettingsStore', () => {
   const userStore = useUserStore()
 
@@ -99,9 +115,18 @@ export const useMailSettingsStore = defineStore('mailSettingsStore', () => {
     ),
   })
 
+  const messageListWidth = computed({
+    get: () => normalizeMessageListWidth(userStore.getSetting(MESSAGE_LIST_WIDTH_KEY), DEFAULT_MESSAGE_LIST_WIDTH),
+    set: (value: MessageListWidth) => userStore.setSetting(
+      MESSAGE_LIST_WIDTH_KEY,
+      normalizeMessageListWidth(value, DEFAULT_MESSAGE_LIST_WIDTH),
+    ),
+  })
+
   return {
     folderViewMode,
     messageListDensity,
+    messageListWidth,
     messageReadEnabled,
     messageReadDelay,
   }