fixup! feat: compact view for mail layouts

Signed-off-by: greta <[email protected]>

Author: GretaD

src/components/AppSettingsMenu.vue

@@ -83,9 +83,7 @@
 					<NcFormBoxSwitch
 						v-model="compactMode"
 						:label="t('mail', 'Compact mode')"
-						:description="t('mail', 'Compact mode')"
-						@update:modelValue="compactMode = $event" />
-					{{ compactMode }}
+						:description="t('mail', 'Compact mode')" />
 				</NcFormBox>
 
 				<NcRadioGroup :model-value="sortOrder" :label="t('mail', 'Sorting')" @update:modelValue="onSortByDate">

src/components/Envelope.vue

@@ -64,10 +64,15 @@
 				</template>
 				<template v-else>
 					<Avatar
+						v-if="!compactMode"
 						:display-name="addresses"
 						:email="avatarEmail"
 						:fetch-avatar="data.fetchAvatarFromClient"
 						:avatar="data.avatar" />
+					<div
+						v-else
+						class="compact-avatar-ball">
+					</div>
 				</template>
 			</div>
 		</template>
@@ -575,11 +580,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-
-		compactMode: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	data() {
@@ -620,6 +620,10 @@ export default {
 			return this.mainStore.getPreference('layout-message-view', 'threaded') === 'threaded'
 		},
 
+		compactMode() {
+			return this.mainStore.getPreference('compact-mode', 'false') === 'true'
+		},
+
 		hasMultipleRecipients() {
 			if (!this.account) {
 				console.error('account is undefined', {
@@ -1609,4 +1613,12 @@ export default {
 	justify-content: center;
 }
 
+.compact-avatar-ball {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	background-color: var(--color-main-text);
+	display: inline-block;
+	vertical-align: middle;
+}
 </style>

src/components/MailboxThread.vue

@@ -290,10 +290,6 @@ export default {
 			return this.mainStore.getPreference('layout-mode', 'vertical-split')
 		},
 
-		compactMode() {
-			return this.mainStore.getPreference('compact-mode', 'false') === 'true'
-		},
-
 		horizontalListMinWidth() {
 			return this.layoutMode === 'horizontal-split' ? 40 : 30
 		},