feat: message list density

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

src/components/MessageList.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from 'vue'
+import { storeToRefs } from 'pinia'
 import type { EntityIdentifier } from '@MailManager/types/common'
 import type { EntityObject } from '@MailManager/models'
 import type { CollectionObject } from '@MailManager/models/collection'
+import { messageListDensityConfig, useMailSettingsStore } from '@/stores/mailSettingsStore'
 import RecipientDetails from '@/components/common/RecipientDetails.vue'
 import MessageListItemMenu from '@/components/MessageListItemMenu.vue'
 
@@ -39,6 +41,10 @@ const emit = defineEmits<{
   selectionFlag: [flag: string, value: boolean]
 }>()
 
+const mailSettingsStore = useMailSettingsStore()
+const { messageListDensity } = storeToRefs(mailSettingsStore)
+const densityConfig = computed(() => messageListDensityConfig[messageListDensity.value])
+
 const longPressTimer = ref<number | null>(null)
 const longPressActivated = ref(false)
 const suppressNextClick = ref(false)
@@ -377,7 +383,7 @@ onBeforeUnmount(() => {
     <v-virtual-scroll
       v-else
       :items="sortedMessages"
-      :item-height="80"
+      :item-height="densityConfig.itemHeight"
       class="message-virtual-scroll"
     >
       <template v-slot:default="{ item: message }">
@@ -397,7 +403,7 @@ onBeforeUnmount(() => {
           @touchend="handleTouchEnd"
           @touchcancel="handleTouchEnd"
           @touchmove="handleTouchMove"
-          lines="three"
+          :lines="densityConfig.lines"
         >
           <template v-slot:prepend>
             <div class="message-item-prepend">
@@ -419,7 +425,7 @@ onBeforeUnmount(() => {
           </template>
 
           <v-list-item-title class="d-flex align-center">
-            <span class="flex-grow-1 text-truncate">
+            <span class="message-sender text-truncate">
               <RecipientDetails
                 :address="message.properties.from"
                 @clicked="handleRecipientClick(message)"
@@ -429,16 +435,22 @@ onBeforeUnmount(() => {
                 </template>
               </RecipientDetails>
             </span>
-            <span class="text-caption text-medium-emphasis ml-2">
+            <span
+              v-if="!densityConfig.showSubjectLine"
+              class="message-inline-subject text-medium-emphasis text-truncate ml-2"
+            >
+              {{ message.properties.subject || '(No subject)' }}
+            </span>
+            <span class="message-date text-caption text-medium-emphasis ml-2">
               {{ formatDate(timeStamp(message)) }}
             </span>
           </v-list-item-title>
 
-          <v-list-item-subtitle class="text-truncate">
+          <v-list-item-subtitle v-if="densityConfig.showSubjectLine" class="text-truncate">
             {{ message.properties.subject || '(No subject)' }}
           </v-list-item-subtitle>
 
-          <v-list-item-subtitle class="text-caption text-truncate">
+          <v-list-item-subtitle v-if="densityConfig.showThirdLine" class="text-caption text-truncate">
             {{ '' }}
           </v-list-item-subtitle>
 
@@ -632,6 +644,21 @@ onBeforeUnmount(() => {
   background-color: rgba(var(--v-theme-primary), 0.14);
 }
 
+.message-sender {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.message-inline-subject {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.message-date {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 .message-person-link {
   display: inline-block;
   max-width: 100%;

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>