Merge branch 'develop' into pag-back

CHANGELOG.md

@@ -30,12 +30,13 @@
 - Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正
 - Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
 - Fix: iOSで画面を回転させるとテキストサイズが変わる問題を修正
+- Fix: タイムラインを下にスクロールしてノート画面に移動して再び戻ったら以前のスクロール位置を失う問題を修正
 
 ### Server
 - cacheRemoteFilesの初期値はfalseになりました
-- 一部のfeatured noteを照会できない問題を修正
 - ファイルアップロード時等にファイル名の拡張子を修正する関数(correctFilename)の挙動を改善
-- fix: muteがapiからのuser list timeline取得で機能しない問題を修正
+- Fix: 一部のfeatured noteを照会できない問題を修正
+- Fix: muteがapiからのuser list timeline取得で機能しない問題を修正
 
 ## 13.14.2
 

packages/frontend/src/components/MkAbuseReport.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div class="bcekxzvu _margin _panel">
 	<div class="target">
-		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
+		<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`">
 			<MkAvatar class="avatar" :user="report.targetUser" indicator/>
 			<div class="names">
 				<MkUserName class="name" :user="report.targetUser"/>

packages/frontend/src/pages/_error_.vue

@@ -9,16 +9,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-show="loaded" :class="$style.root">
 		<img :src="serverErrorImageUrl" class="_ghost" :class="$style.img"/>
 		<div class="_gaps">
-			<p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
+			<div><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></div>
-			<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
+			<div v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</div>
-			<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
+			<div v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</div>
 			<template v-else>
-				<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
+				<div>{{ i18n.ts.newVersionOfClientAvailable }}</div>
-				<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
+				<div>{{ i18n.ts.youShouldUpgradeClient }}</div>
 				<MkButton style="margin: 8px auto;" @click="reload">{{ i18n.ts.reload }}</MkButton>
 			</template>
-			<p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></p>
+			<div><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></div>
-			<p v-if="error" style="opacity: 0.7;">ERROR: {{ error }}</p>
+			<div v-if="error" style="opacity: 0.7;">ERROR: {{ error }}</div>
 		</div>
 	</div>
 </Transition>

packages/frontend/src/pages/admin-file.vue

@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
 				</MkKeyValue>
 			</div>
-			<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
+			<MkA v-if="file.user" class="user" :to="`/admin/user/${file.user.id}`">
 				<MkUserCardMini :user="file.user"/>
 			</MkA>
 			<div>

packages/frontend/src/pages/admin-user.vue

@@ -24,12 +24,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<MkInfo v-if="user.username.includes('.')">{{ i18n.ts.isSystemAccount }}</MkInfo>
 
-				<div v-if="user.url" class="_formLinksGrid">
-					<FormLink :to="userPage(user)">Profile</FormLink>
-					<FormLink :to="user.url" :external="true">Profile (remote)</FormLink>
-				</div>
-				<FormLink v-else :to="userPage(user)">Profile</FormLink>
-
 				<FormLink v-if="user.host" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
 
 				<div style="display: flex; flex-direction: column; gap: 1em;">
@@ -57,6 +51,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkKeyValue>
 				</div>
 
+				<MkTextarea v-model="moderationNote" manualSave>
+					<template #label>Moderation note</template>
+				</MkTextarea>
+
+				<!--
 				<FormSection>
 					<template #label>ActivityPub</template>
 
@@ -90,14 +89,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkFolder>
 					</div>
 				</FormSection>
-			</div>
+			-->
 
-			<div v-else-if="tab === 'moderation'" class="_gaps_m">
+				<FormSection>
+					<div class="_gaps">
 						<MkSwitch v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch>
 
 						<div>
-					<MkButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
+							<MkButton v-if="user.host == null" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
-					<MkButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
 						</div>
 
 						<MkFolder>
@@ -111,10 +110,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkFolder>
 
 						<MkFolder>
-					<template #icon><i class="ti ti-badges"></i></template>
+							<template #icon><i class="ti ti-password"></i></template>
-					<template #label>{{ i18n.ts.roles }}</template>
+							<template #label>IP</template>
-					<div class="_gaps">
+							<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-						<MkButton v-if="user.host == null && iAmModerator" primary rounded @click="assignRole"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>
+							<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
+							<template v-if="iAmAdmin && ips">
+								<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
+									<span class="date">{{ record.createdAt }}</span>
+									<span class="ip">{{ record.ip }}</span>
+								</div>
+							</template>
+						</MkFolder>
+
+						<MkButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
+					</div>
+				</FormSection>
+			</div>
+
+			<div v-else-if="tab === 'roles'" class="_gaps">
+				<MkButton v-if="user.host == null" primary rounded @click="assignRole"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>
 
 				<div v-for="role in info.roles" :key="role.id" :class="$style.roleItem">
 					<div :class="$style.roleItemMain">
@@ -130,12 +144,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</div>
-				</MkFolder>
 
-				<MkFolder v-if="user.host == null && iAmModerator">
+			<div v-else-if="tab === 'announcements'" class="_gaps">
-					<template #icon><i class="ti ti-speakerphone"></i></template>
-					<template #label>{{ i18n.ts.announcements }}</template>
-					<div class="_gaps">
 				<MkButton primary rounded @click="createAnnouncement"><i class="ti ti-plus"></i> {{ i18n.ts.new }}</MkButton>
 
 				<MkPagination :pagination="announcementsPagination">
@@ -155,30 +165,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</template>
 				</MkPagination>
 			</div>
-				</MkFolder>
 
-				<MkFolder>
+			<div v-else-if="tab === 'drive'" class="_gaps">
-					<template #icon><i class="ti ti-password"></i></template>
-					<template #label>IP</template>
-					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-					<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
-					<template v-if="iAmAdmin && ips">
-						<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
-							<span class="date">{{ record.createdAt }}</span>
-							<span class="ip">{{ record.ip }}</span>
-						</div>
-					</template>
-				</MkFolder>
-
-				<MkFolder>
-					<template #icon><i class="ti ti-cloud"></i></template>
-					<template #label>{{ i18n.ts.files }}</template>
 				<MkFileListForAdmin :pagination="filesPagination" viewMode="grid"/>
-				</MkFolder>
-
-				<MkTextarea v-model="moderationNote" manualSave>
-					<template #label>Moderation note</template>
-				</MkTextarea>
 			</div>
 
 			<div v-else-if="tab === 'chart'" class="_gaps_m">
@@ -230,7 +219,7 @@ import { url } from '@/config';
 import { userPage, acct } from '@/filters/user';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
-import { iAmAdmin, iAmModerator, $i } from '@/account';
+import { iAmAdmin, $i } from '@/account';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 
@@ -269,7 +258,6 @@ const announcementsPagination = {
 let expandedRoles = $ref([]);
 
 function createFetcher() {
-	if (iAmModerator) {
 	return () => Promise.all([os.api('users/show', {
 		userId: props.userId,
 	}), os.api('admin/show-user', {
@@ -290,13 +278,6 @@ function createFetcher() {
 			await refreshUser();
 		});
 	});
-	} else {
-		return () => os.api('users/show', {
-			userId: props.userId,
-		}).then((res) => {
-			user = res;
-		});
-	}
 }
 
 function refreshUser() {
@@ -472,11 +453,19 @@ const headerTabs = $computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
 	icon: 'ti ti-info-circle',
-}, iAmModerator ? {
+}, {
-	key: 'moderation',
+	key: 'roles',
-	title: i18n.ts.moderation,
+	title: i18n.ts.roles,
-	icon: 'ti ti-user-exclamation',
+	icon: 'ti ti-badges',
-} : null, {
+}, {
+	key: 'announcements',
+	title: i18n.ts.announcements,
+	icon: 'ti ti-speakerphone',
+}, {
+	key: 'drive',
+	title: i18n.ts.drive,
+	icon: 'ti ti-cloud',
+}, {
 	key: 'chart',
 	title: i18n.ts.charts,
 	icon: 'ti ti-chart-line',
@@ -484,11 +473,11 @@ const headerTabs = $computed(() => [{
 	key: 'raw',
 	title: 'Raw',
 	icon: 'ti ti-code',
-}].filter(x => x != null));
+}]);
 
 definePageMetadata(computed(() => ({
 	title: user ? acct(user) : i18n.ts.userInfo,
-	icon: 'ti ti-info-circle',
+	icon: 'ti ti-user-exclamation',
 })));
 </script>
 

packages/frontend/src/pages/admin/overview.moderators.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" mode="out-in">
 		<MkLoading v-if="fetching"/>
 		<div v-else :class="$style.root" class="_panel">
-			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
+			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/admin/user/${user.id}`">
 				<MkAvatar :user="user" class="avatar" indicator/>
 			</MkA>
 		</div>

packages/frontend/src/pages/admin/overview.users.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" mode="out-in">
 		<MkLoading v-if="fetching"/>
 		<div v-else class="users">
-			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
+			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/admin/user/${user.id}`" class="user">
 				<MkUserCardMini :user="user"/>
 			</MkA>
 		</div>

packages/frontend/src/pages/admin/roles.role.vue

@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div class="_gaps_s">
 									<div v-for="item in items" :key="item.user.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedItems.includes(item.id) }]">
 										<div :class="$style.userItemMain">
-											<MkA :class="$style.userItemMainBody" :to="`/user-info/${item.user.id}`">
+											<MkA :class="$style.userItemMainBody" :to="`/admin/user/${item.user.id}`">
 												<MkUserCardMini :user="item.user"/>
 											</MkA>
 											<button class="_button" :class="$style.userToggle" @click="toggleItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>

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

@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination">
 					<div :class="$style.users">
-						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" :class="$style.user" :to="`/user-info/${user.id}`">
+						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" :class="$style.user" :to="`/admin/user/${user.id}`">
 							<MkUserCardMini :user="user"/>
 						</MkA>
 					</div>
@@ -116,7 +116,7 @@ async function addUser() {
 }
 
 function show(user) {
-	os.pageWindow(`/user-info/${user.id}`);
+	os.pageWindow(`/admin/user/${user.id}`);
 }
 
 const headerActions = $computed(() => [{

packages/frontend/src/pages/instance-info.vue

@@ -102,7 +102,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else-if="tab === 'users'" class="_gaps_m">
 			<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
-				<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/user-info/${user.id}`">
+				<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
 					<MkUserCardMini :user="user"/>
 				</MkA>
 			</MkPagination>

packages/frontend/src/pages/settings/mute-block.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div class="_gaps_s">
 					<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
 						<div :class="$style.userItemMain">
-							<MkA :class="$style.userItemMainBody" :to="`/user-info/${item.mutee.id}`">
+							<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
 								<MkUserCardMini :user="item.mutee"/>
 							</MkA>
 							<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div class="_gaps_s">
 					<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
 						<div :class="$style.userItemMain">
-							<MkA :class="$style.userItemMainBody" :to="`/user-info/${item.mutee.id}`">
+							<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
 								<MkUserCardMini :user="item.mutee"/>
 							</MkA>
 							<button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
@@ -82,7 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div class="_gaps_s">
 					<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
 						<div :class="$style.userItemMain">
-							<MkA :class="$style.userItemMainBody" :to="`/user-info/${item.blockee.id}`">
+							<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
 								<MkUserCardMini :user="item.blockee"/>
 							</MkA>
 							<button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>

packages/frontend/src/router.ts

@@ -42,10 +42,6 @@ export const routes = [{
 }, {
 	path: '/clips/:clipId',
 	component: page(() => import('./pages/clip.vue')),
-}, {
-	path: '/user-info/:userId',
-	component: page(() => import('./pages/user-info.vue')),
-	hash: 'initialTab',
 }, {
 	path: '/instance-info/:host',
 	component: page(() => import('./pages/instance-info.vue')),
@@ -334,6 +330,9 @@ export const routes = [{
 }, {
 	path: '/registry',
 	component: page(() => import('./pages/registry.vue')),
+}, {
+	path: '/admin/user/:userId',
+	component: iAmModerator ? page(() => import('./pages/admin-user.vue')) : page(() => import('./pages/not-found.vue')),
 }, {
 	path: '/admin/file/:fileId',
 	component: iAmModerator ? page(() => import('./pages/admin-file.vue')) : page(() => import('./pages/not-found.vue')),

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

@@ -133,13 +133,13 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		action: () => {
 			copyToClipboard(`@${user.username}@${user.host ?? host}`);
 		},
-	}, {
+	}, ...(iAmModerator ? [{
-		icon: 'ti ti-info-circle',
+		icon: 'ti ti-user-exclamation',
-		text: i18n.ts.info,
+		text: i18n.ts.moderation,
 		action: () => {
-			router.push(`/user-info/${user.id}`);
+			router.push(`/admin/user/${user.id}`);
 		},
-	}, {
+	}] : []), {
 		icon: 'ti ti-rss',
 		text: i18n.ts.copyRSS,
 		action: () => {

packages/frontend/src/scripts/lookup-user.ts

@@ -14,7 +14,7 @@ export async function lookupUser() {
 	if (canceled) return;
 
 	const show = (user) => {
-		os.pageWindow(`/user-info/${user.id}`);
+		os.pageWindow(`/admin/user/${user.id}`);
 	};
 
 	const usernamePromise = os.api('users/show', Acct.parse(result));

packages/frontend/src/scripts/scroll.ts

@@ -30,7 +30,7 @@ export function getScrollPosition(el: HTMLElement | null): number {
 
 export function onScrollTop(el: HTMLElement, cb: () => unknown, tolerance = 1, once = false) {
 	// とりあえず評価してみる
-	if (isTopVisible(el, tolerance)) {
+	if (el.isConnected && isTopVisible(el, tolerance)) {
 		cb();
 		if (once) return null;
 	}
@@ -54,7 +54,7 @@ export function onScrollBottom(el: HTMLElement, cb: () => unknown, tolerance = 1
 	const container = getScrollContainer(el);
 
 	// とりあえず評価してみる
-	if (isBottomVisible(el, tolerance, container)) {
+	if (el.isConnected && isBottomVisible(el, tolerance, container)) {
 		cb();
 		if (once) return null;
 	}

packages/frontend/test/scroll.test.ts

@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { describe, test, assert, afterEach } from 'vitest';
+import { Window } from 'happy-dom';
+import { onScrollBottom, onScrollTop } from '@/scripts/scroll';
+
+describe('Scroll', () => {
+	describe('onScrollTop', () => {
+		test('Initial onScrollTop callback for connected elements', () => {
+			const { document } = new Window();
+			const div = document.createElement('div');
+			assert.strictEqual(div.scrollTop, 0);
+
+			document.body.append(div);
+
+			let called = false;
+			onScrollTop(div as any as HTMLElement, () => called = true);
+
+			assert.ok(called);
+		});
+
+		test('No onScrollTop callback for disconnected elements', () => {
+			const { document } = new Window();
+			const div = document.createElement('div');
+			assert.strictEqual(div.scrollTop, 0);
+
+			let called = false;
+			onScrollTop(div as any as HTMLElement, () => called = true);
+
+			assert.ok(!called);
+		});
+	});
+
+	describe('onScrollBottom', () => {
+		test('Initial onScrollBottom callback for connected elements', () => {
+			const { document } = new Window();
+			const div = document.createElement('div');
+			assert.strictEqual(div.scrollTop, 0);
+			(div as any).scrollHeight = 100; // happy-dom has no scrollHeight
+
+			document.body.append(div);
+
+			let called = false;
+			onScrollBottom(div as any as HTMLElement, () => called = true);
+
+			assert.ok(called);
+		});
+
+		test('No onScrollBottom callback for disconnected elements', () => {
+			const { document } = new Window();
+			const div = document.createElement('div');
+			assert.strictEqual(div.scrollTop, 0);
+			(div as any).scrollHeight = 100; // happy-dom has no scrollHeight
+
+			let called = false;
+			onScrollBottom(div as any as HTMLElement, () => called = true);
+
+			assert.ok(!called);
+		});
+	});
+});