From 7b9c16487b0840b6b9ec64a60f3282195853dbb1 Mon Sep 17 00:00:00 2001
From: Mar0xy <marie@kaifa.ch>
Date: Mon, 27 Nov 2023 23:35:18 +0100
Subject: [PATCH] upd: add fields to user popup

Closes transfem-org/Sharkey#173
---
 .../frontend/src/components/MkUserPopup.vue   | 55 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index 1ddae40b9d..d958b325e5 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -28,9 +28,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.username"><MkAcct :user="user"/></div>
 			</div>
 			<div :class="$style.description">
-				<Mfm v-if="user.description" :class="$style.mfm" :text="user.description" :author="user"/>
+				<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>
 			</div>
+			<div v-if="user.fields.length > 0" :class="$style.fields">
+				<dl v-for="(field, i) in user.fields" :key="i" :class="$style.field">
+					<dt :class="$style.fieldname">
+						<Mfm :text="field.name" :nyaize="false" :plain="true" :colored="false"/>
+					</dt>
+					<dd :class="$style.fieldvalue">
+						<Mfm :text="field.value" :nyaize="false" :author="user" :colored="false"/>
+						<i v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink" class="ph-seal-check ph-bold ph-lg" :class="$style.verifiedLink"></i>
+					</dd>
+				</dl>
+			</div>
 			<div :class="$style.status">
 				<div :class="$style.statusItem">
 					<div :class="$style.statusItemLabel">{{ i18n.ts.notes }}</div>
@@ -221,6 +232,48 @@ onMounted(() => {
 	border-bottom: solid 1px var(--divider);
 }
 
+.fields {
+	font-size: 0.8em;
+	padding: 16px;
+	border-top: solid 1px var(--divider);
+	border-bottom: solid 1px var(--divider);
+}
+
+.field {
+	display: flex;
+	padding: 0;
+	margin: 0;
+
+	&:not(:last-child) {
+		margin-bottom: 8px;
+	}
+
+	:deep(span) {
+		white-space: nowrap !important;
+	}
+}
+
+.fieldvalue {
+	width: 70%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	word-wrap: nowrap;
+	margin: 0;
+}
+
+.fieldname {
+	width: 100px;
+	max-height: 45px;
+	overflow: hidden;
+	white-space: nowrap;
+	display: inline;
+	text-overflow: ellipsis;
+	font-weight: bold;
+	text-align: center;
+	padding-inline-end: 10px;
+}
+
 .mfm {
 	display: -webkit-box;
 	-webkit-line-clamp: 5;