merge: Display instance follow/following relationships in instance view (partial implementation of 648) (!665)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/665

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: Marie <github@yuugi.dev>

packages/backend/src/server/api/endpoints/federation/followers.ts

@@ -33,6 +33,8 @@ export const paramDef = {
 		sinceId: { type: 'string', format: 'misskey:id' },
 		untilId: { type: 'string', format: 'misskey:id' },
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
+		includeFollower: { type: 'boolean', default: false },
+		includeFollowee: { type: 'boolean', default: true },
 	},
 	required: ['host'],
 } as const;
@@ -54,7 +56,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				.limit(ps.limit)
 				.getMany();
 
-			return await this.followingEntityService.packMany(followings, me, { populateFollowee: true });
+			return await this.followingEntityService.packMany(followings, me, { populateFollowee: ps.includeFollowee, populateFollower: ps.includeFollower });
 		});
 	}
 }

packages/backend/src/server/api/endpoints/federation/following.ts

@@ -33,6 +33,8 @@ export const paramDef = {
 		sinceId: { type: 'string', format: 'misskey:id' },
 		untilId: { type: 'string', format: 'misskey:id' },
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
+		includeFollower: { type: 'boolean', default: false },
+		includeFollowee: { type: 'boolean', default: true },
 	},
 	required: ['host'],
 } as const;
@@ -54,7 +56,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				.limit(ps.limit)
 				.getMany();
 
-			return await this.followingEntityService.packMany(followings, me, { populateFollowee: true });
+			return await this.followingEntityService.packMany(followings, me, { populateFollowee: ps.includeFollowee, populateFollower: ps.includeFollower });
 		});
 	}
 }

packages/frontend/src/pages/instance-info.vue

@@ -131,6 +131,36 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkA>
 				</MkPagination>
 			</div>
+			<div v-else-if="tab === 'following'" key="following" class="_gaps_m">
+				<MkPagination v-slot="{items}" :pagination="followingPagination">
+					<div class="follow-relations-list">
+						<div v-for="followRelationship in items" :key="followRelationship.id" class="follow-relation">
+							<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.followee.updatedAt)}`" :to="`/admin/user/${followRelationship.followee.id}`" class="user">
+								<MkUserCardMini :user="followRelationship.followee" :withChart="false"/>
+							</MkA>
+							<span class="arrow">→</span>
+							<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.follower.updatedAt)}`" :to="`/admin/user/${followRelationship.follower.id}`" class="user">
+								<MkUserCardMini :user="followRelationship.follower" :withChart="false"/>
+							</MkA>
+						</div>
+					</div>
+				</MkPagination>
+			</div>
+			<div v-else-if="tab === 'followers'" key="followers" class="_gaps_m">
+				<MkPagination v-slot="{items}" :pagination="followersPagination">
+					<div class="follow-relations-list">
+						<div v-for="followRelationship in items" :key="followRelationship.id" class="follow-relation">
+							<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.followee.updatedAt)}`" :to="`/admin/user/${followRelationship.followee.id}`" class="user">
+								<MkUserCardMini :user="followRelationship.followee" :withChart="false"/>
+							</MkA>
+							<span class="arrow">←</span>
+							<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.follower.updatedAt)}`" :to="`/admin/user/${followRelationship.follower.id}`" class="user">
+								<MkUserCardMini :user="followRelationship.follower" :withChart="false"/>
+							</MkA>
+						</div>
+					</div>
+				</MkPagination>
+			</div>
 			<div v-else-if="tab === 'raw'" key="raw" class="_gaps_m">
 				<MkObjectView tall :value="instance">
 				</MkObjectView>
@@ -210,6 +240,26 @@ const usersPagination = {
 	offsetMode: true,
 };
 
+const followingPagination = {
+	endpoint: 'federation/following' as const,
+	limit: 10,
+	params: {
+		host: props.host,
+		includeFollower: true,
+	},
+	offsetMode: false,
+};
+
+const followersPagination = {
+	endpoint: 'federation/followers' as const,
+	limit: 10,
+	params: {
+		host: props.host,
+		includeFollower: true,
+	},
+	offsetMode: false,
+};
+
 watch(moderationNote, async () => {
 	await misskeyApi('admin/federation/update-instance', { host: instance.value.host, moderationNote: moderationNote.value });
 });
@@ -363,6 +413,14 @@ const headerTabs = computed(() => [{
 	key: 'users',
 	title: i18n.ts.users,
 	icon: 'ti ti-users',
+}, {
+	key: 'following',
+	title: i18n.ts.following,
+	icon: 'ti ti-arrow-right',
+}, {
+	key: 'followers',
+	title: i18n.ts.followers,
+	icon: 'ti ti-arrow-left',
 }, {
 	key: 'raw',
 	title: 'Raw',
@@ -405,4 +463,31 @@ definePageMetadata(() => ({
 		}
 	}
 }
+
+.follow-relations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .follow-relation {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+
+    .user {
+      flex: 1;
+      max-width: 45%;
+      flex-shrink: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .arrow {
+      font-size: 1.5em;
+      flex-shrink: 0;
+    }
+  }
+}
 </style>