From b899672313108eca928ddfa913d2863b893086e3 Mon Sep 17 00:00:00 2001
From: Mar0xy <marie@kaifa.ch>
Date: Tue, 3 Oct 2023 21:22:54 +0200
Subject: [PATCH] upd: follow approval required indicator on popup

Closes transfem-org/Sharkey#49
---
 .../frontend/src/components/MkUserPopup.vue   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index da75bbc1c..aa4d57533 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="user != null">
 			<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
 				<span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
+				<span v-if="user.isLocked && $i && $i.id != user.id && !user.isFollowing" :title="i18n.ts.isLocked" :class="$style.locked"><i class="ph-lock ph-bold ph-lg"></i></span>
 			</div>
 			<svg viewBox="0 0 128 128" :class="$style.avatarBack">
 				<g transform="matrix(1.6,0,0,1.6,-38.4,-51.2)">
@@ -148,6 +149,28 @@ onMounted(() => {
 	border-radius: 5px;
 }
 
+.locked:first-child {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	padding: 4px 8px;
+	color: #fff;
+	background: rgba(0, 0, 0, 0.7);
+	font-size: 0.7em;
+	border-radius: 5px;
+}
+
+.locked:not(:first-child) {
+	position: absolute;
+	top: 34px;
+	left: 12px;
+	padding: 4px 8px;
+	color: #fff;
+	background: rgba(0, 0, 0, 0.7);
+	font-size: 0.7em;
+	border-radius: 5px;
+}
+
 .avatarBack {
 	width: 100px;
 	position: absolute;