feat: message list density

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

src/components/settings/DisplaySettings.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { folderViewModeOptions, useMailSettingsStore } from '@/stores/mailSettingsStore'
+import {
+  folderViewModeOptions,
+  messageListDensityOptions,
+  useMailSettingsStore,
+} from '@/stores/mailSettingsStore'
 
 const mailSettingsStore = useMailSettingsStore()
-const { folderViewMode } = storeToRefs(mailSettingsStore)
+const { folderViewMode, messageListDensity } = storeToRefs(mailSettingsStore)
 </script>
 
 <template>
@@ -26,6 +30,22 @@ const { folderViewMode } = storeToRefs(mailSettingsStore)
           />
         </template>
       </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Message list density</v-list-item-title>
+        <v-list-item-subtitle>Control row height and how much detail is shown</v-list-item-subtitle>
+        <template #append>
+          <v-select
+            v-model="messageListDensity"
+            :items="messageListDensityOptions"
+            item-value="value"
+            item-title="title"
+            density="compact"
+            variant="outlined"
+            style="width: 150px"
+          />
+        </template>
+      </v-list-item>
     </v-list>
   </div>
 </template>