From ece1eb5f5978f81db98a9a9b4f7fb758f223dbe4 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Fri, 8 Dec 2023 11:32:15 +0000
Subject: [PATCH] show user memo in popup

(the styling is still a bit off)

People set memos to remind themselves about, among other things, how
to (not) interact with other users: do they like being boosted? are
they argumentative? what timezone are they in?

Having this sort of information in the popup means you don't have to
remember to go to the user's profile to get them.
---
 .../frontend/src/components/MkUserPopup.vue   | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index d958b325e..368cb8927 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -27,6 +27,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 				<div :class="$style.username"><MkAcct :user="user"/></div>
 			</div>
+			<div v-if="user.memo" :class="$style.memo">
+				<div :class="$style.heading" v-text="i18n.ts.memo"/>
+				<div :class="$style.memo-body">{{ user.memo }}</div>
+			</div>
 			<div :class="$style.description">
 				<Mfm v-if="user.description" :nyaize="false" :class="$style.mfm" :text="user.description" :author="user"/>
 				<div v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</div>
@@ -224,6 +228,34 @@ onMounted(() => {
 	opacity: 0.7;
 }
 
+.memo {
+	padding: 8px 8px 16px 8px;
+	margin: 0 8px 0 8px;
+	background: transparent;
+	color: var(--fg);
+	border: 1px solid var(--divider);
+	border-radius: var(--radius-sm);
+	line-height: 0;
+
+	> .heading {
+		text-align: left;
+		color: var(--fgTransparent);
+		line-height: 1.5;
+		font-size: 85%;
+	}
+
+	> .memo-body {
+		width: 100%;
+		height: auto;
+		min-height: 0;
+		line-height: 1.5;
+		color: var(--fg);
+		overflow: hidden;
+		background: transparent;
+		font-family: inherit;
+	}
+}
+
 .description {
 	padding: 16px 26px;
 	font-size: 0.8em;