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.

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;