Add support for hasSharedConnectionsOptOut

src/assets/scss/themes/_theme.dark_styles.scss

@@ -266,6 +266,10 @@ div.x-friend-list
     border-color: $--theme-border-2;
 }
 
+.el-button.is-text:not(.is-disabled):hover {
+    background-color: unset;
+}
+
 .el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
 .el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
     color: $--theme-text-1 !important;

src/components/dialogs/UserDialog/UserDialog.vue

@@ -435,6 +435,20 @@
                                     }}</span>
                                 </div>
                             </div>
+                            <div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
+                                    <span
+                                        v-if="!currentUser.hasSharedConnectionsOptOut"
+                                        class="extra"
+                                        style="color: #67c23a"
+                                        >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
+                                    >
+                                    <span v-else class="extra" style="color: #f56c6c">{{
+                                        t('dialog.user.info.avatar_cloning_deny')
+                                    }}</span>
+                                </div>
+                            </div>
                         </template>
                         <template v-else>
                             <div class="x-friend-item" style="cursor: default">
@@ -2164,6 +2178,9 @@
     }
 
     async function getUserMutualFriends(userId) {
+        if (currentUser.value.hasSharedConnectionsOptOut) {
+            return;
+        }
         userDialog.value.isMutualFriendsLoading = true;
         userDialog.value.mutualFriends = [];
         const params = {
@@ -2414,6 +2431,12 @@
         });
     }
 
+    function toggleSharedConnectionsOptOut() {
+        userRequest.saveCurrentUser({
+            hasSharedConnectionsOptOut: !currentUser.value.hasSharedConnectionsOptOut
+        });
+    }
+
     function resetHome() {
         ElMessageBox.confirm('Continue? Reset Home', 'Confirm', {
             confirmButtonText: 'Confirm',

src/localization/en/en.json

@@ -886,7 +886,8 @@
                 "instance_hard_closed": "Instance hard closed",
                 "close_instance": "Close Instance",
                 "instance_age_gated": "age gated",
-                "open_previous_instance": "Open Previous Instances"
+                "open_previous_instance": "Open Previous Instances",
+                "show_mutual_friends": "Show Mutual Friends"
             },
             "groups": {
                 "header": "Groups",

src/stores/user.js

@@ -99,6 +99,7 @@ export const useUserStore = defineStore('User', () => {
         hasEmail: false,
         hasLoggedInFromClient: false,
         hasPendingEmail: false,
+        hasSharedConnectionsOptOut: false,
         hideContentFilterSettings: false,
         homeLocation: '',
         id: '',
@@ -961,14 +962,21 @@ export const useUserStore = defineStore('User', () => {
                                     D.isShowAvatar = true;
                                 }
                             });
-                            userRequest
-                                .getMutualCounts({ userId })
-                                .then((args) => {
-                                    if (args.params.userId === D.id) {
-                                        D.mutualFriendCount = args.json.friends;
-                                        D.mutualGroupCount = args.json.groups;
-                                    }
-                                });
+                            if (!currentUser.value.hasSharedConnectionsOptOut) {
+                                userRequest
+                                    .getMutualCounts({ userId })
+                                    .then((args) => {
+                                        if (args.params.userId === D.id) {
+                                            D.mutualFriendCount =
+                                                args.json.friends;
+                                            D.mutualGroupCount =
+                                                args.json.groups;
+                                        }
+                                    })
+                                    .catch((error) => {
+                                        console.error(error);
+                                    });
+                            }
                         } else {
                             D.previousDisplayNames =
                                 currentUser.value.pastDisplayNames;