enhance: 送信したチャットルームへの招待を確認できるように

1 files changed, 29 insertions, 3 deletions

diff --git a/packages/frontend/src/pages/chat/room.members.vue b/packages/frontend/src/pages/chat/room.members.vue
index d20216a81c..2b31efab38 100644
--- a/packages/frontend/src/pages/chat/room.members.vue
+++ b/packages/frontend/src/pages/chat/room.members.vue
@@ -18,6 +18,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkUserCardMini :user="membership.user"/>
 		</MkA>
 	</div>
+
+	<template v-if="isOwner">
+		<hr>
+
+		<div>{{ i18n.ts._chat.sentInvitations }}</div>
+
+		<div v-for="invitation in invitations" :key="invitation.id" :class="$style.invitation">
+			<MkA :class="$style.invitationBody" :to="`${userPage(invitation.user)}`">
+				<MkUserCardMini :user="invitation.user"/>
+			</MkA>
+		</div>
+	</template>
 </div>
 </template>
 
@@ -47,12 +59,20 @@ const isOwner = computed(() => {
 });
 
 const memberships = ref<Misskey.entities.ChatRoomMembership[]>([]);
+const invitations = ref<Misskey.entities.ChatRoomInvitation[]>([]);
 
 onMounted(async () => {
 	memberships.value = await misskeyApi('chat/rooms/members', {
 		roomId: props.room.id,
 		limit: 50,
 	});
+
+	if (isOwner.value) {
+		invitations.value = await misskeyApi('chat/rooms/invitations/outbox', {
+			roomId: props.room.id,
+			limit: 50,
+		});
+	}
 });
 </script>
 
@@ -65,9 +85,15 @@ onMounted(async () => {
 	flex: 1;
 	min-width: 0;
 	margin-right: 8px;
+}
 
-	&:hover {
-		text-decoration: none;
-	}
+.invitation {
+	display: flex;
+}
+
+.invitationBody {
+	flex: 1;
+	min-width: 0;
+	margin-right: 8px;
 }
 </style>