From b8066619b6c84451e8277b268c6d56ff795d6d4a Mon Sep 17 00:00:00 2001
From: suzulu <suzulu.activity@gmail.com>
Date: Fri, 13 Sep 2024 20:19:53 +0900
Subject: [PATCH] =?UTF-8?q?=E5=85=B1=E5=90=8C=E7=AE=A1=E7=90=86=E8=80=85?=
 =?UTF-8?q?=E3=81=AE=E7=B7=A8=E9=9B=86=E3=82=92=E3=81=84=E3=81=84=E6=84=9F?=
 =?UTF-8?q?=E3=81=98=E3=81=AB=E3=81=97=E3=81=9F(#22)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/channel-editor.vue     | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index 138bf210fe54..eaeede6cf77a 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -68,9 +68,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkButton @click="addUser()">
 						{{ i18n.ts._channel.addCollaborator }}
 					</MkButton>
-					<div v-for="user in collaboratorUsers" :class="$style.collaborator">
-						<MkAvatar :user="user" style="height: 48px; width: 48px"/>
-						<MkAcct :user="user"/>
+					<div v-for="( user, i ) in collaboratorUsers" :class="$style.userItem">
+						<div :class="$style.userItemMain">
+							<MkA :class="$style.userItemMainBody" :to="`${userPage(user)}`">
+								<MkUserCardMini :user="user"/>
+							</MkA>
+							<button class="_button" :class="$style.unassign" @click="collaboratorUserDelete(i)"><i class="ti ti-x"></i></button>
+						</div>
 					</div>
 				</div>
 			</MkFolder>
@@ -110,6 +114,8 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import { useRouter } from '@/router/supplier.js';
 import { $i, iAmModerator } from '@/account.js';
+import { userPage } from '@/filters/user';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
@@ -206,6 +212,10 @@ function addUser() {
 	});
 }
 
+function collaboratorUserDelete (i:number) {
+	collaboratorUsers.value.splice( i, 1 );
+}
+
 fetchChannel();
 
 async function addPinnedNote() {
@@ -319,4 +329,26 @@ definePageMetadata(() => ({
 	margin: 8px 0;
 	align-items: center;
 }
+
+.userItemMain {
+	display: flex;
+}
+
+.userItemMainBody {
+	flex: 1;
+	min-width: 0;
+	margin-right: 8px;
+
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.unassign {
+	width: 32px;
+	height: 32px;
+	align-self: center;
+	color: #ff2a2a;
+}
+
 </style>