feat: configurable message list width

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

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>