enhance(client): ロールをより簡単に付与できるように

CHANGELOG.md

@@ -13,6 +13,7 @@ You should also include the user name that made the change.
 
 ### Improvements
 - コンディショナルロールもバッジとして表示可能に
+- enhance(client): ロールをより簡単に付与できるように
 - enhance(client): 一度見たノートのRenoteは省略して表示するように
 - 一部のMFM構文をopt-outに
 

packages/frontend/src/components/MkUserPreview.vue

@@ -24,6 +24,7 @@
 					<p>{{ $ts.followers }}</p><span>{{ user.followersCount }}</span>
 				</div>
 			</div>
+			<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
 			<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
 		</div>
 		<div v-else>
@@ -40,6 +41,7 @@ import * as misskey from 'misskey-js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
+import { getUserMenu } from '@/scripts/get-user-menu';
 
 const props = defineProps<{
 	showing: boolean;
@@ -58,6 +60,10 @@ let user = $ref<misskey.entities.UserDetailed | null>(null);
 let top = $ref(0);
 let left = $ref(0);
 
+function showMenu(ev: MouseEvent) {
+	os.popupMenu(getUserMenu(user), ev.currentTarget ?? ev.target);
+}
+
 onMounted(() => {
 	if (typeof props.q === 'object') {
 		user = props.q;
@@ -174,6 +180,13 @@ onMounted(() => {
 			}
 		}
 
+		> .menu {
+			position: absolute;
+			top: 8px;
+			right: 42px;
+			padding: 8px;
+		}
+
 		> .koudoku-button {
 			position: absolute;
 			top: 8px;

packages/frontend/src/scripts/get-user-menu.ts

@@ -203,6 +203,20 @@ export function getUserMenu(user, router: Router = mainRouter) {
 				action: () => {
 					router.push('/user-info/' + user.id + '#moderation');
 				},
+			}, {
+				icon: 'ti ti-badges',
+				text: i18n.ts.roles,
+				action: async () => {
+					const roles = await os.api('admin/roles/list');
+
+					const { canceled, result: roleId } = await os.select({
+						title: i18n.ts._role.chooseRoleToAssign,
+						items: roles.map(r => ({ text: r.name, value: r.id })),
+					});
+					if (canceled) return;
+
+					await os.apiWithDialog('admin/roles/assign', { roleId, userId: user.id });
+				},
 			}]);
 		}
 	}