Merge branch 'enh-tweak-signin-dialog' of https://github.com/kakkokari-gtyih/misskey into enh-tweak-signin-dialog

packages/backend/package.json

@@ -101,7 +101,7 @@
 		"bcryptjs": "2.4.3",
 		"blurhash": "2.0.5",
 		"body-parser": "1.20.3",
-		"bullmq": "5.13.2",
+		"bullmq": "5.15.0",
 		"cacheable-lookup": "7.0.0",
 		"cbor": "9.0.2",
 		"chalk": "5.3.0",
@@ -166,7 +166,7 @@
 		"rename": "1.0.4",
 		"rss-parser": "3.13.0",
 		"rxjs": "7.8.1",
-		"sanitize-html": "2.13.0",
+		"sanitize-html": "2.13.1",
 		"secure-json-parse": "2.7.0",
 		"sharp": "0.33.5",
 		"slacc": "0.0.10",
@@ -194,7 +194,7 @@
 		"@types/archiver": "6.0.2",
 		"@types/bcryptjs": "2.4.6",
 		"@types/body-parser": "1.19.5",
-		"@types/color-convert": "2.0.3",
+		"@types/color-convert": "2.0.4",
 		"@types/content-disposition": "0.5.8",
 		"@types/fluent-ffmpeg": "2.1.26",
 		"@types/htmlescape": "1.1.3",

packages/frontend-embed/package.json

@@ -18,7 +18,7 @@
 		"@tabler/icons-webfont": "3.3.0",
 		"@twemoji/parser": "15.1.1",
 		"@vitejs/plugin-vue": "5.1.4",
-		"@vue/compiler-sfc": "3.5.10",
+		"@vue/compiler-sfc": "3.5.11",
 		"astring": "1.9.0",
 		"buraha": "0.0.1",
 		"estree-walker": "3.0.3",
@@ -27,8 +27,8 @@
 		"frontend-shared": "workspace:*",
 		"punycode": "2.3.1",
 		"rollup": "4.22.5",
-		"sass": "1.79.3",
+		"sass": "1.79.4",
-		"shiki": "1.12.0",
+		"shiki": "1.21.0",
 		"tinycolor2": "1.6.0",
 		"tsc-alias": "1.8.10",
 		"tsconfig-paths": "4.2.0",
@@ -36,7 +36,7 @@
 		"uuid": "10.0.0",
 		"json5": "2.2.3",
 		"vite": "5.4.8",
-		"vue": "3.5.10"
+		"vue": "3.5.11"
 	},
 	"devDependencies": {
 		"@misskey-dev/summaly": "5.1.0",
@@ -51,10 +51,10 @@
 		"@typescript-eslint/eslint-plugin": "7.17.0",
 		"@typescript-eslint/parser": "7.17.0",
 		"@vitest/coverage-v8": "1.6.0",
-		"@vue/runtime-core": "3.5.10",
+		"@vue/runtime-core": "3.5.11",
 		"acorn": "8.12.1",
 		"cross-env": "7.0.3",
-		"eslint-plugin-import": "2.30.0",
+		"eslint-plugin-import": "2.31.0",
 		"eslint-plugin-vue": "9.28.0",
 		"fast-glob": "3.3.2",
 		"happy-dom": "10.0.3",

packages/frontend/package.json

@@ -28,7 +28,7 @@
 		"@tabler/icons-webfont": "3.3.0",
 		"@twemoji/parser": "15.1.1",
 		"@vitejs/plugin-vue": "5.1.4",
-		"@vue/compiler-sfc": "3.5.10",
+		"@vue/compiler-sfc": "3.5.11",
 		"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.11",
 		"astring": "1.9.0",
 		"broadcast-channel": "7.0.0",
@@ -39,7 +39,7 @@
 		"chartjs-chart-matrix": "2.0.1",
 		"chartjs-plugin-gradient": "0.6.1",
 		"chartjs-plugin-zoom": "2.0.1",
-		"chromatic": "11.10.4",
+		"chromatic": "11.11.0",
 		"compare-versions": "6.1.1",
 		"cropperjs": "2.0.0-rc.2",
 		"date-fns": "2.30.0",
@@ -58,7 +58,7 @@
 		"photoswipe": "5.4.4",
 		"punycode": "2.3.1",
 		"rollup": "4.22.5",
-		"sanitize-html": "2.13.0",
+		"sanitize-html": "2.13.1",
 		"sass": "1.79.3",
 		"shiki": "1.21.0",
 		"strict-event-emitter-types": "2.0.0",
@@ -72,29 +72,29 @@
 		"uuid": "10.0.0",
 		"v-code-diff": "1.13.1",
 		"vite": "5.4.8",
-		"vue": "3.5.10",
+		"vue": "3.5.11",
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
 		"@misskey-dev/summaly": "5.1.0",
-		"@storybook/addon-actions": "8.3.3",
+		"@storybook/addon-actions": "8.3.4",
-		"@storybook/addon-essentials": "8.3.3",
+		"@storybook/addon-essentials": "8.3.4",
-		"@storybook/addon-interactions": "8.3.3",
+		"@storybook/addon-interactions": "8.3.4",
-		"@storybook/addon-links": "8.3.3",
+		"@storybook/addon-links": "8.3.4",
-		"@storybook/addon-mdx-gfm": "8.3.3",
+		"@storybook/addon-mdx-gfm": "8.3.4",
-		"@storybook/addon-storysource": "8.3.3",
+		"@storybook/addon-storysource": "8.3.4",
-		"@storybook/blocks": "8.3.3",
+		"@storybook/blocks": "8.3.4",
-		"@storybook/components": "8.3.3",
+		"@storybook/components": "8.3.4",
-		"@storybook/core-events": "8.3.3",
+		"@storybook/core-events": "8.3.4",
-		"@storybook/manager-api": "8.3.3",
+		"@storybook/manager-api": "8.3.4",
-		"@storybook/preview-api": "8.3.3",
+		"@storybook/preview-api": "8.3.4",
-		"@storybook/react": "8.3.3",
+		"@storybook/react": "8.3.4",
-		"@storybook/react-vite": "8.3.3",
+		"@storybook/react-vite": "8.3.4",
-		"@storybook/test": "8.3.3",
+		"@storybook/test": "8.3.4",
-		"@storybook/theming": "8.3.3",
+		"@storybook/theming": "8.3.4",
-		"@storybook/types": "8.3.3",
+		"@storybook/types": "8.3.4",
-		"@storybook/vue3": "8.3.3",
+		"@storybook/vue3": "8.3.4",
-		"@storybook/vue3-vite": "8.3.3",
+		"@storybook/vue3-vite": "8.3.4",
 		"@testing-library/vue": "8.1.0",
 		"@types/estree": "1.0.6",
 		"@types/matter-js": "0.19.7",
@@ -110,11 +110,11 @@
 		"@typescript-eslint/eslint-plugin": "7.17.0",
 		"@typescript-eslint/parser": "7.17.0",
 		"@vitest/coverage-v8": "1.6.0",
-		"@vue/runtime-core": "3.5.10",
+		"@vue/runtime-core": "3.5.11",
 		"acorn": "8.12.1",
 		"cross-env": "7.0.3",
 		"cypress": "13.15.0",
-		"eslint-plugin-import": "2.30.0",
+		"eslint-plugin-import": "2.31.0",
 		"eslint-plugin-vue": "9.28.0",
 		"fast-glob": "3.3.2",
 		"happy-dom": "10.0.3",
@@ -128,7 +128,7 @@
 		"react-dom": "18.3.1",
 		"seedrandom": "3.0.5",
 		"start-server-and-test": "2.0.8",
-		"storybook": "8.3.3",
+		"storybook": "8.3.4",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"vite-plugin-turbosnap": "1.0.3",
 		"vitest": "1.6.0",

packages/frontend/src/components/MkAbuseReport.vue

@@ -4,64 +4,99 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="bcekxzvu _margin _panel">
+<MkFolder>
-	<div class="target">
+	<template #icon>
-		<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'">
+		<i v-if="report.resolved" class="ti ti-check" style="color: var(--success)"></i>
-			<MkAvatar class="avatar" :user="report.targetUser" indicator/>
+		<i v-else class="ti ti-exclamation-circle" style="color: var(--warn)"></i>
-			<div class="names">
+	</template>
-				<MkUserName class="name" :user="report.targetUser"/>
+	<template #label><MkAcct :user="report.targetUser"/> (by <MkAcct :user="report.reporter"/>)</template>
-				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+	<template #caption>{{ report.comment }}</template>
+	<template #suffix><MkTime :time="report.createdAt"/></template>
+	<template v-if="!report.resolved" #footer>
+		<div class="_buttons">
+			<MkButton primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
+			<template v-if="report.targetUser.host == null || report.resolved">
+				<MkButton primary @click="resolveAndForward">{{ i18n.ts.forwardReport }}</MkButton>
+				<div v-tooltip:dialog="i18n.ts.forwardReportIsAnonymous" class="_button _help"><i class="ti ti-help-circle"></i></div>
+			</template>
 		</div>
-		</MkA>
+	</template>
-		<MkKeyValue>
+
-			<template #key>{{ i18n.ts.registeredDate }}</template>
+	<div :class="$style.root" class="_gaps_s">
-			<template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
+		<MkFolder :withSpacer="false">
-		</MkKeyValue>
+			<template #icon><MkAvatar :user="report.targetUser" style="width: 18px; height: 18px;"/></template>
+			<template #label>Target: <MkAcct :user="report.targetUser"/></template>
+			<template #suffix>#{{ report.targetUserId.toUpperCase() }}</template>
+
+			<div style="container-type: inline-size;">
+				<RouterView :router="targetRouter"/>
 			</div>
-	<div class="detail">
+		</MkFolder>
+
+		<MkFolder :defaultOpen="true">
+			<template #icon><i class="ti ti-message-2"></i></template>
+			<template #label>{{ i18n.ts.details }}</template>
 			<div>
 				<Mfm :text="report.comment" :linkNavigationBehavior="'window'"/>
 			</div>
-		<hr/>
+		</MkFolder>
-		<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div>
+
+		<MkFolder :withSpacer="false">
+			<template #icon><MkAvatar :user="report.reporter" style="width: 18px; height: 18px;"/></template>
+			<template #label>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></template>
+			<template #suffix>#{{ report.reporterId.toUpperCase() }}</template>
+
+			<div style="container-type: inline-size;">
+				<RouterView :router="reporterRouter"/>
+			</div>
+		</MkFolder>
+
 		<div v-if="report.assignee">
 			{{ i18n.ts.moderator }}:
 			<MkAcct :user="report.assignee"/>
 		</div>
-		<div><MkTime :time="report.createdAt"/></div>
-		<div class="action">
-			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-				{{ i18n.ts.forwardReport }}
-				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
-			</MkSwitch>
-			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
 	</div>
-	</div>
+</MkFolder>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { provide, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { dateString } from '@/filters/date.js';
+import MkFolder from '@/components/MkFolder.vue';
+import RouterView from '@/components/global/RouterView.vue';
+import { useRouterFactory } from '@/router/supplier';
 
 const props = defineProps<{
-	report: any;
+	report: Misskey.entities.AdminAbuseUserReportsResponse[number];
 }>();
 
 const emit = defineEmits<{
 	(ev: 'resolved', reportId: string): void;
 }>();
 
-const forward = ref(props.report.forwarded);
+const routerFactory = useRouterFactory();
+const targetRouter = routerFactory(`/admin/user/${props.report.targetUserId}`);
+targetRouter.init();
+const reporterRouter = routerFactory(`/admin/user/${props.report.reporterId}`);
+reporterRouter.init();
 
 function resolve() {
 	os.apiWithDialog('admin/resolve-abuse-user-report', {
-		forward: forward.value,
+		reportId: props.report.id,
+	}).then(() => {
+		emit('resolved', props.report.id);
+	});
+}
+
+function resolveAndForward() {
+	os.apiWithDialog('admin/resolve-abuse-user-report', {
+		forward: true,
 		reportId: props.report.id,
 	}).then(() => {
 		emit('resolved', props.report.id);
@@ -69,47 +104,7 @@ function resolve() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.bcekxzvu {
+.root {
-	display: flex;
-
-	> .target {
-		width: 35%;
-		box-sizing: border-box;
-		text-align: left;
-		padding: 24px;
-		border-right: solid 1px var(--divider);
-
-		> .info {
-			display: flex;
-			box-sizing: border-box;
-			align-items: center;
-			padding: 14px;
-			border-radius: 8px;
-			--c: rgb(255 196 0 / 15%);
-			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-			background-size: 16px 16px;
-
-			> .avatar {
-				width: 42px;
-				height: 42px;
-			}
-
-			> .names {
-				margin-left: 0.3em;
-				padding: 0 8px;
-				flex: 1;
-
-				> .name {
-					font-weight: bold;
-				}
-			}
-		}
-	}
-
-	> .detail {
-		flex: 1;
-		padding: 24px;
-	}
 }
 </style>

packages/frontend/src/components/MkFolder.vue

@@ -38,9 +38,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<KeepAlive>
 					<div v-show="opened">
-						<MkSpacer :marginMin="14" :marginMax="22">
+						<MkSpacer v-if="withSpacer" :marginMin="14" :marginMax="22">
 							<slot></slot>
 						</MkSpacer>
+						<div v-else>
+							<slot></slot>
+						</div>
 						<div v-if="$slots.footer" :class="$style.footer">
 							<slot name="footer"></slot>
 						</div>
@@ -59,9 +62,11 @@ import { defaultStore } from '@/store.js';
 const props = withDefaults(defineProps<{
 	defaultOpen?: boolean;
 	maxHeight?: number | null;
+	withSpacer?: boolean;
 }>(), {
 	defaultOpen: false,
 	maxHeight: null,
+	withSpacer: true,
 });
 
 const getBgColor = (el: HTMLElement) => {

packages/frontend/src/components/global/RouterView.vue

@@ -27,6 +27,7 @@ import MkLoadingPage from '@/pages/_loading_.vue';
 
 const props = defineProps<{
 	router?: IRouter;
+	nested?: boolean;
 }>();
 
 const router = props.router ?? inject('router');
@@ -39,6 +40,8 @@ const currentDepth = inject('routerCurrentDepth', 0);
 provide('routerCurrentDepth', currentDepth + 1);
 
 function resolveNested(current: Resolved, d = 0): Resolved | null {
+	if (!props.nested) return current;
+
 	if (d === currentDepth) {
 		return current;
 	} else {

packages/frontend/src/pages/admin/abuses.vue

@@ -44,8 +44,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			-->
 
-			<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
+			<MkPagination v-slot="{items}" ref="reports" :pagination="pagination">
+				<div class="_gaps">
 					<XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/>
+				</div>
 			</MkPagination>
 		</div>
 	</MkSpacer>

packages/frontend/src/pages/admin/index.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkSpacer>
 	</div>
 	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-		<RouterView/>
+		<RouterView nested/>
 	</div>
 </div>
 </template>

packages/frontend/src/pages/settings/index.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
 					<div class="bkzroven" style="container-type: inline-size;">
-						<RouterView/>
+						<RouterView nested/>
 					</div>
 				</div>
 			</div>