From 80ffe13894751d966f35cddeed13b8c8d199ca7a Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Mon, 27 Jan 2025 19:25:54 -0500
Subject: [PATCH] automatically update the profile UI badges after clicking the
 "follow" button

---
 packages/frontend/src/pages/user/home.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index f1329deafe..2cd307fb68 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</ul>
 						<div :class="$style.actions" class="actions">
 							<button :class="$style.actionsMenu" class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
-							<MkFollowButton v-if="$i?.id != user.id" v-model:user="user" :class="$style.actionsFollow" :disabled="disableFollowControls" :inline="true" :transparent="false" :full="true" class="koudoku" @update:wait="d => disableFollowControls = d"/>
+							<MkFollowButton v-if="$i?.id != user.id" v-model:user="user" :class="$style.actionsFollow" :disabled="disableFollowControls" :inline="true" :transparent="false" :full="true" class="koudoku" @update:wait="onFollowButtonDisabledChanged"/>
 							<div v-if="hasFollowRequest" :class="$style.actionsBanner">{{ i18n.ts.receiveFollowRequest }}</div>
 							<MkButton v-if="hasFollowRequest" :class="$style.actionsAccept" :disabled="disableFollowControls" :inline="true" :transparent="false" :full="true" rounded primary @click="acceptFollowRequest"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
 							<MkButton v-if="hasFollowRequest" :class="$style.actionsReject" :disabled="disableFollowControls" :inline="true" :transparent="false" :full="true" rounded danger @click="rejectFollowRequest"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
@@ -392,6 +392,17 @@ const disableFollowControls = ref(false);
 const hasFollowRequest = computed(() => user.value.hasPendingFollowRequestToYou);
 const useTallBanner = computed(() => hasFollowRequest.value && narrow.value);
 
+async function onFollowButtonDisabledChanged(disabled: boolean) {
+	try {
+		// Refresh the UI after MkFollowButton changes the follow relation
+		if (!disabled) {
+			user.value = await os.apiWithDialog('users/show', { userId: user.value.id });
+		}
+	} finally {
+		disableFollowControls.value = disabled;
+	}
+}
+
 async function acceptFollowRequest() {
 	try {
 		disableFollowControls.value = true;