fix MkRoleSelectDialog.vue and storybook scenario

packages/frontend/.storybook/fakes.ts

@@ -149,3 +149,50 @@ export function inviteCode(isUsed = false, hasExpiration = false, isExpired = fa
 		used: isUsed,
 	}
 }
+
+export function role(params: {
+	id?: string,
+	name?: string,
+	color?: string | null,
+	iconUrl?: string | null,
+	description?: string,
+	isModerator?: boolean,
+	isAdministrator?: boolean,
+	displayOrder?: number,
+	createdAt?: string,
+	updatedAt?: string,
+	target?: 'manual' | 'conditional',
+	isPublic?: boolean,
+	isExplorable?: boolean,
+	asBadge?: boolean,
+	canEditMembersByModerator?: boolean,
+	usersCount?: number,
+}): entities.Role {
+	const prefix = params.displayOrder ? params.displayOrder.toString().padStart(3, '0') + '-' : '';
+	const genId = Math.random().toString(36).substring(10);
+
+	return {
+		id: params.id ?? genId,
+		name: params.name ?? `${prefix}TestRole-${genId}`,
+		color: params.color ?? '#445566',
+		iconUrl: params.iconUrl ?? null,
+		description: params.description ?? '',
+		isModerator: params.isModerator ?? false,
+		isAdministrator: params.isAdministrator ?? false,
+		displayOrder: params.displayOrder ?? 0,
+		createdAt: params.createdAt ?? new Date().toISOString(),
+		updatedAt: params.updatedAt ?? new Date().toISOString(),
+		target: params.target ?? 'manual',
+		isPublic: params.isPublic ?? true,
+		isExplorable: params.isExplorable ?? true,
+		asBadge: params.asBadge ?? true,
+		canEditMembersByModerator: params.canEditMembersByModerator ?? false,
+		usersCount: params.usersCount ?? 10,
+		condFormula: {
+			id: '',
+			type: 'or',
+			values: []
+		},
+		policies: {},
+	}
+}

packages/frontend/.storybook/generate.tsx

@@ -410,6 +410,7 @@ function toStories(component: string): Promise<string> {
 		glob('src/components/MkUserSetupDialog.*.vue'),
 		glob('src/components/MkInviteCode.vue'),
 		glob('src/components/MkTagItem.vue'),
+		glob('src/components/MkRoleSelectDialog.vue'),
 		glob('src/pages/user/home.vue'),
 	]);
 	const components = globs.flat();

packages/frontend/src/components/MkModal.vue

@@ -276,6 +276,7 @@ const align = () => {
 const onOpened = () => {
 	emit('opened');
 
+	nextTick(() => {
 		// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 		const el = content.value!.children[0];
 		el.addEventListener('mousedown', ev => {
@@ -287,6 +288,7 @@ const onOpened = () => {
 				}, 100);
 			}, { passive: true, once: true });
 		}, { passive: true });
+	});
 };
 
 const alignObserver = new ResizeObserver((entries, observer) => {

packages/frontend/src/components/MkRoleSelectDialog.stories.impl.ts

@@ -0,0 +1,68 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { http, HttpResponse } from 'msw';
+import { role } from '../../.storybook/fakes.js';
+import { commonHandlers } from '../../.storybook/mocks.js';
+import MkRoleSelectDialog from '@/components/MkRoleSelectDialog.vue';
+
+const roles = [
+	role({ displayOrder: 1 }), role({ displayOrder: 1 }), role({ displayOrder: 1 }), role({ displayOrder: 1 }),
+	role({ displayOrder: 2 }), role({ displayOrder: 2 }), role({ displayOrder: 3 }), role({ displayOrder: 3 }),
+	role({ displayOrder: 4 }), role({ displayOrder: 5 }), role({ displayOrder: 6 }), role({ displayOrder: 7 }),
+];
+
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkRoleSelectDialog,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkRoleSelectDialog v-bind="props" />',
+		};
+	},
+	args: {
+		initialRoleIds: undefined,
+		infoMessage: undefined,
+		title: undefined,
+		publicOnly: true,
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				http.post('/api/admin/roles/list', ({ params }) => {
+					return HttpResponse.json(roles);
+				}),
+			],
+		},
+	},
+	decorators: [() => ({
+		template: '<div style="width:100cqmin"><story/></div>',
+	})],
+} satisfies StoryObj<typeof MkRoleSelectDialog>;
+
+export const InitialIds = {
+	...Default,
+	args: {
+		...Default.args,
+		initialRoleIds: [roles[0].id, roles[1].id, roles[4].id, roles[6].id],
+	},
+} satisfies StoryObj<typeof MkRoleSelectDialog>;

packages/frontend/src/components/MkRoleSelectDialog.vue

@@ -11,12 +11,11 @@
 	<template #header>{{ title }}</template>
 	<MkSpacer :marginMin="20" :marginMax="28">
 		<MkLoading v-if="fetching"/>
-		<div v-else class="_gaps">
+		<div v-else class="_gaps" :class="$style.root">
 			<div :class="$style.header">
 				<MkButton rounded @click="addRole"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			</div>
 
-			<div>
 			<div v-if="selectedRoles.length > 0" class="_gaps" :class="$style.roleItemArea">
 				<div v-for="role in selectedRoles" :key="role.id" :class="$style.roleItem">
 					<MkRolePreview :class="$style.role" :role="role" :forModeration="true" :detailed="false" style="pointer-events: none;"/>
@@ -27,7 +26,6 @@
 			<div v-else :class="$style.roleItemArea" style="text-align: center">
 				何も選択されていません
 			</div>
-			</div>
 
 			<MkInfo v-if="infoMessage">{{ infoMessage }}</MkInfo>
 
@@ -134,10 +132,18 @@ fetchRoles();
 </script>
 
 <style module lang="scss">
+.root {
+	max-height: 410px;
+	height: 410px;
+	display: flex;
+	flex-direction: column;
+}
+
 .roleItemArea {
 	background-color: var(--acrylicBg);
 	border-radius: var(--radius);
 	padding: 12px;
+	overflow-y: auto;
 }
 
 .roleItem {
@@ -180,6 +186,7 @@ fetchRoles();
 	justify-content: center;
 	align-items: center;
 	gap: 8px;
+	margin-top: auto;
 }
 
 .divider {