Show message preview in envelope list

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

lib/Db/Message.php

@@ -316,6 +316,7 @@ function (Tag $tag) {
 			'inReplyTo' => $this->getInReplyTo(),
 			'references' => empty($this->getReferences()) ? null: json_decode($this->getReferences(), true),
 			'threadRootId' => $this->getThreadRootId(),
+			'previewText' => $this->getPreviewText(),
 		];
 	}
 }

src/components/Envelope.vue

@@ -7,7 +7,7 @@
 			draggableLabel,
 			selectedEnvelopes,
 		}"
-		class="list-item-style"
+		class="list-item-style envelope"
 		:class="{seen: data.flags.seen, draft, selected: selected}"
 		:to="link"
 		:data-envelope-id="data.databaseId"
@@ -53,7 +53,7 @@
 			</div>
 		</template>
 		<template #subtitle>
-			<div class="subtitle">
+			<div class="envelope__subtitle">
 				<Reply v-if="data.flags.answered"
 					class="seen-icon-style"
 					:size="18" />
@@ -63,7 +63,13 @@
 				<span v-else-if="draft" class="draft">
 					<em>{{ t('mail', 'Draft: ') }}</em>
 				</span>
-				{{ subjectForSubtitle }}
+				<span class="envelope__subtitle__subject">
+					{{ subjectForSubtitle }}
+				</span>
+			</div>
+			<div v-if="data.previewText"
+				class="envelope__preview-text">
+				{{ data.previewText }}
 			</div>
 		</template>
 		<template #actions>
@@ -445,7 +451,7 @@ export default {
 		/**
 		 * Subject of envelope or "No Subject".
 		 *
-		 * @returns {string}
+		 * @return {string}
 		 */
 		subjectForSubtitle() {
 			// We have to use || here (instead of ??) because the subject might be '', null
@@ -565,6 +571,29 @@ export default {
 	z-index: 1;
 }
 
+.envelope {
+	.app-content-list-item-icon {
+		height: 40px; // To prevent some unexpected spacing below the avatar
+	}
+
+	&__subtitle {
+		display: flex;
+		gap: 4px;
+
+		&__subject {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+	&__preview-text {
+		color: var(--color-text-lighter);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-weight: initial;
+	}
+}
+
 .icon-important {
 	::v-deep path {
 	fill: #ffcc00;
@@ -610,7 +639,7 @@ export default {
 .junk-icon-style {
 	opacity: .2;
 	display: flex;
-	top: 6px;
+	top: 17px;
 	left: 34px;
 	background-size: 16px;
 	height: 20px;
@@ -710,7 +739,7 @@ list-item-style.draft .app-content-list-item-line-two {
 }
 ::v-deep.icon-important.app-content-list-item-star {
 	position: absolute;
-	top: 7px;
+	top: 17px;
 	z-index: 1;
 }
 .app-content-list-item-star.favorite-icon-style {
@@ -728,10 +757,6 @@ list-item-style.draft .app-content-list-item-line-two {
 	height: 16px;
 	width: 16px;
 }
-.subtitle {
-	display: flex;
-	gap: 4px;
-}
 .seen-icon-style {
 	opacity: .6;
 }

src/components/Imip.vue

@@ -98,43 +98,43 @@ export default {
 	},
 	computed: {
 		/**
-		 * @returns {string}
+		 * @return {string}
 		 */
 		method() {
 			return this.scheduling.method
 		},
 
 		/**
-		 * @returns {boolean}
+		 * @return {boolean}
 		 */
 		isRequest() {
 			return this.method === REQUEST
 		},
 
 		/**
-		 * @returns {boolean}
+		 * @return {boolean}
 		 */
 		isReply() {
 			return this.method === REPLY
 		},
 
 		/**
-		 * @returns {boolean}
+		 * @return {boolean}
 		 */
 		isCancel() {
 			return this.method === CANCEL
 		},
 
 		/**
-		 * @returns {boolean}
+		 * @return {boolean}
 		 */
 		wasUpdated() {
 			// TODO: ask backend whether invitation is new or was updated
 			return false
 		},
 
 		/**
-		 * @returns {EventComponent|undefined}
+		 * @return {EventComponent|undefined}
 		 */
 		parsedEvent() {
 			const parserManager = getParserManager()
@@ -151,7 +151,7 @@ export default {
 		},
 
 		/**
-		 * @returns {boolean}
+		 * @return {boolean}
 		 */
 		eventIsInFuture() {
 			return this.parsedEvent.startDate.jsDate.getTime() > new Date().getTime()

src/components/NavigationMailbox.vue

@@ -395,7 +395,7 @@ export default {
 		 * Generate unique key id for a specific mailbox
 		 *
 		 * @param {object} mailbox the mailbox to gen id for
-		 * @returns {string}
+		 * @return {string}
 		 */
 		genId(mailbox) {
 			return 'mailbox-' + mailbox.databaseId

src/components/imip/EventData.vue

@@ -71,7 +71,7 @@ import { removeMailtoPrefix } from '../../util/eventAttendee'
  *
  * @param {Date} a Date a
  * @param {Date} b Date b
- * @returns {boolean} True if both dates a and b are on the same day, month and year.
+ * @return {boolean} True if both dates a and b are on the same day, month and year.
  */
 function isSameDay(a, b) {
 	return a.getFullYear() === b.getFullYear()
@@ -84,7 +84,7 @@ function isSameDay(a, b) {
  * If timezone is floating, undefined will be returned.
  *
  * @param {DateTimeValue} date Date
- * @returns {string|undefined} Human readable timezone name or undefined
+ * @return {string|undefined} Human readable timezone name or undefined
  */
 function getTimezoneFromDate(date) {
 	const timezoneId = date.timezoneId
@@ -110,15 +110,15 @@ export default {
 	},
 	computed: {
 		/**
-		 * @returns {string}
+		 * @return {string}
 		 */
 		title() {
 			// Use || here to handle empty strings as well
 			return this.event.title || this.t('mail', 'Untitled event')
 		},
 
 		/**
-		 * @returns {string}
+		 * @return {string}
 		 */
 		startDate() {
 			if (this.event.isAllDay()) {
@@ -129,7 +129,7 @@ export default {
 		},
 
 		/**
-		 * @returns {string|undefined}
+		 * @return {string|undefined}
 		 */
 		endDate() {
 			const start = this.event.startDate.jsDate
@@ -155,28 +155,28 @@ export default {
 		},
 
 		/**
-		 * @returns {string|undefined}
+		 * @return {string|undefined}
 		 */
 		startTimezone() {
 			return getTimezoneFromDate(this.event.startDate)
 		},
 
 		/**
-		 * @returns {string|undefined}
+		 * @return {string|undefined}
 		 */
 		endTimezone() {
 			return getTimezoneFromDate(this.event.endDate)
 		},
 
 		/**
-		 * @returns {string|undefined|null}
+		 * @return {string|undefined|null}
 		 */
 		location() {
 			return this.event.location
 		},
 
 		/**
-		 * @returns {{name: string, isOrganizer: boolean}[]}
+		 * @return {{name: string, isOrganizer: boolean}[]}
 		 */
 		attendees() {
 			const attendees = []

src/components/tags.js

@@ -17,6 +17,7 @@
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
  */
 
 export const hiddenTags = {