Collapse plain text signatures into a detail element

Signatures are a bit of clutter when you view a conversation. So let's
collapse them and only show on click.

Luckily there is an HTML element we can use for this: `<details>`.

If the design should be improved then let's do a follow-up. This PR
focuses on the splittig logic.

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

src/components/MessagePlainTextBody.vue

 <template>
 	<div>
-		<div id="mail-content" v-html="htmlBody" />
-		<div v-if="signature" class="mail-signature" v-html="htmlSignature" />
+		<div id="mail-content" v-html="nl2br(body)" />
+		<details v-if="signature" class="mail-signature">
+			<summary>{{ signatureSummaryAndBody.summary }}</summary>
+			<span v-html="nl2br(signatureSummaryAndBody.body)" />
+		</details>
 	</div>
 </template>
 
 <script>
+const regFirstParagraph = /(.+\n\r?)+(\n\r?)+/
+
 export default {
 	name: 'MessagePlainTextBody',
 	props: {
@@ -19,11 +24,26 @@ export default {
 		},
 	},
 	computed: {
-		htmlBody() {
-			return this.nl2br(this.body)
+		signatureSummaryAndBody() {
+			const matches = this.signature.match(regFirstParagraph)
+
+			if (matches[0]) {
+				return {
+					summary: matches[0],
+					body: this.signature.substring(matches[0].length),
+				}
+			}
+
+			const lines = this.signature.trim().split(/\r?\n/)
+			return {
+				summary: lines[0],
+				body: lines.slice(1).join('\n'),
+			}
 		},
-		htmlSignature() {
-			return this.nl2br(this.signature)
+		signatureSummary() {
+			console.info(this.signature.match(regFirstParagraph))
+
+			return this.signatureSummaryAndBody.summary
 		},
 	},
 	methods: {
@@ -34,7 +54,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+#mail-content, .mail-signature {
+	white-space: pre;
+}
 .mail-signature {
 	color: var(--color-text-maxcontrast)
 }