feat: configurable message list width

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

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;