Cherry-pick of 4 PRs

CHANGELOG.md

@@ -4,10 +4,16 @@
 -
 
 ### Client
+- Feat: 投稿フォームで画像をプレビュー可能に
+- Enhance: アンテナ、リスト等の名前をカラム名のデフォルト値にするように
 - Fix: ログインしていないときに VRTL が見えない問題
+- Fix: iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正
 
 ### Server
--
+- Enhance: スレッドミュートにおいて、リノート、引用、リアクションの通知もミュートするように
+	- なお、以下のケースでは引き続き通知がミュートされません。(ミュートを行っているユーザーをAとします)
+		- ミュート対象ノートを、当該スレッドの外にあるAへの返信/メンション付きノートにおいて引用する
+
 ## 2025.1.0 (merged to 2025.1.0-kinel.1)
 
 ### Note

packages/backend/src/core/NoteCreateService.ts

@@ -643,6 +643,7 @@ export class NoteCreateService implements OnApplicationShutdown {
 			await this.createMentionedEvents(mentionedUsers, note, nm);
 
 			// If has in reply to note
+			let isOnThreadMutedTree = false;
 			if (data.reply) {
 				// 通知
 				if (data.reply.userHost === null) {
@@ -652,6 +653,7 @@ export class NoteCreateService implements OnApplicationShutdown {
 							threadId: data.reply.threadId ?? data.reply.id,
 						},
 					});
+					isOnThreadMutedTree = isThreadMuted;
 
 					if (!isThreadMuted) {
 						nm.push(data.reply.userId, 'reply');
@@ -667,13 +669,23 @@ export class NoteCreateService implements OnApplicationShutdown {
 
 				// Notify
 				if (data.renote.userHost === null) {
-					nm.push(data.renote.userId, type);
-				}
+					const isThreadMuted = await this.noteThreadMutingsRepository.exists({
+						where: {
+							userId: data.renote.userId,
+							threadId: data.renote.threadId ?? data.renote.id,
+						},
+					});
+
+					// If the quoted note is not thread muted but the quoting note is on thread muted tree, need to mute it.
+					if (!isThreadMuted && !isOnThreadMutedTree) {
+						nm.push(data.renote.userId, type);
 
-				// Publish event
-				if ((user.id !== data.renote.userId) && data.renote.userHost === null) {
-					this.globalEventService.publishMainStream(data.renote.userId, 'renote', noteObj);
-					this.webhookService.enqueueUserWebhook(data.renote.userId, 'renote', { note: noteObj });
+						// Publish event
+						if (user.id !== data.renote.userId) {
+							this.globalEventService.publishMainStream(data.renote.userId, 'renote', noteObj);
+							this.webhookService.enqueueUserWebhook(data.renote.userId, 'renote', { note: noteObj });
+						}
+					}
 				}
 			}
 

packages/backend/src/core/ReactionService.ts

@@ -5,7 +5,7 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { DI } from '@/di-symbols.js';
-import type { EmojisRepository, NoteReactionsRepository, UsersRepository, NotesRepository, MiMeta } from '@/models/_.js';
+import type { EmojisRepository, NoteReactionsRepository, UsersRepository, NotesRepository, MiMeta, NoteThreadMutingsRepository } from '@/models/_.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
 import type { MiRemoteUser, MiUser } from '@/models/User.js';
 import type { MiNote } from '@/models/Note.js';
@@ -82,6 +82,9 @@ export class ReactionService {
 		@Inject(DI.noteReactionsRepository)
 		private noteReactionsRepository: NoteReactionsRepository,
 
+		@Inject(DI.noteThreadMutingsRepository)
+		private noteThreadMutingsRepository: NoteThreadMutingsRepository,
+
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
 
@@ -256,10 +259,19 @@ export class ReactionService {
 
 		// リアクションされたユーザーがローカルユーザーなら通知を作成
 		if (note.userHost === null) {
-			this.notificationService.createNotification(note.userId, 'reaction', {
-				noteId: note.id,
-				reaction: reaction,
-			}, user.id);
+			const isThreadMuted = await this.noteThreadMutingsRepository.exists({
+				where: {
+					userId: note.userId,
+					threadId: note.threadId ?? note.id,
+				},
+			});
+
+			if (!isThreadMuted) {
+				this.notificationService.createNotification(note.userId, 'reaction', {
+					noteId: note.id,
+					reaction: reaction,
+				}, user.id);
+			}
 		}
 
 		//#region 配信

packages/backend/test/e2e/thread-mute.ts

@@ -6,9 +6,14 @@
 process.env.NODE_ENV = 'test';
 
 import * as assert from 'assert';
-import { api, connectStream, post, signup } from '../utils.js';
+import { setTimeout } from 'node:timers/promises';
+import { api, connectStream, post, signup, react } from '../utils.js';
 import type * as misskey from 'misskey-js';
 
+function waitForPushToNotification() {
+	return setTimeout(500);
+}
+
 describe('Note thread mute', () => {
 	let alice: misskey.entities.SignupResponse;
 	let bob: misskey.entities.SignupResponse;
@@ -29,6 +34,8 @@ describe('Note thread mute', () => {
 		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
 		const carolReplyWithoutMention = await post(carol, { replyId: aliceReply.id, text: 'child note' });
 
+		await waitForPushToNotification();
+
 		const res = await api('notes/mentions', {}, alice);
 
 		assert.strictEqual(res.status, 200);
@@ -48,13 +55,15 @@ describe('Note thread mute', () => {
 
 		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
 
+		await waitForPushToNotification();
+
 		const res = await api('i', {}, alice);
 
 		assert.strictEqual(res.status, 200);
 		assert.strictEqual(res.body.hasUnreadMentions, false);
 	});
 
-	test('ミュートしているスレッドからメンションされても、ストリームに unreadMention イベントが流れてこない', () => new Promise<void>(async done => {
+	test('ミュートしているスレッドからメンションされても、ストリームに unreadMention イベントが流れてこない', async () => {
 		// 状態リセット
 		await api('i/read-all-unread-notes', {}, alice);
 
@@ -66,36 +75,80 @@ describe('Note thread mute', () => {
 
 		const ws = await connectStream(alice, 'main', async ({ type, body }) => {
 			if (type === 'unreadMention') {
-				if (body === bobNote.id) return;
-				fired = true;
+				if (body === bobNote.id) fired = true;
 			}
 		});
 
 		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
 
-		setTimeout(() => {
-			assert.strictEqual(fired, false);
-			ws.close();
-			done();
-		}, 5000);
-	}));
+		await setTimeout(5000);
+
+		assert.strictEqual(fired, false);
+		ws.close();
+	});
 
-	test('i/notifications にミュートしているスレッドの通知が含まれない', async () => {
+	test('i/notifications にミュートしているスレッドの通知(メンション, リプライ, リノート, 引用リノート, リアクション)が含まれない', async () => {
 		const bobNote = await post(bob, { text: '@alice @carol root note' });
 		const aliceReply = await post(alice, { replyId: bobNote.id, text: '@bob @carol child note' });
 
 		await api('notes/thread-muting/create', { noteId: bobNote.id }, alice);
 
 		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
 		const carolReplyWithoutMention = await post(carol, { replyId: aliceReply.id, text: 'child note' });
+		const carolRenote = await post(carol, { renoteId: aliceReply.id });
+		const carolQuote = await post(carol, { renoteId: aliceReply.id, text: 'quote note' });
+		await react(carol, aliceReply, 'like'); // react method returns nothing.
+
+		await waitForPushToNotification();
 
 		const res = await api('i/notifications', {}, alice);
 
 		assert.strictEqual(res.status, 200);
 		assert.strictEqual(Array.isArray(res.body), true);
 		assert.strictEqual(res.body.some(notification => 'note' in notification && notification.note.id === carolReply.id), false);
 		assert.strictEqual(res.body.some(notification => 'note' in notification && notification.note.id === carolReplyWithoutMention.id), false);
+		assert.strictEqual(res.body.some(notification => 'note' in notification && notification.note.id === carolRenote.id), false);
+		assert.strictEqual(res.body.some(notification => 'note' in notification && notification.note.id === carolQuote.id), false);
+		assert.strictEqual(res.body.some(notification => 'userId' in notification && notification.userId === carol.id), false);
 
 		// NOTE: bobの投稿はスレッドミュート前に行われたため通知に含まれていてもよい
 	});
+
+	test('ミュートしているスレッドへのリプライで、ミュートしていないスレッドのノートが引用されても i/notifications に通知が含まれない', async () => {
+		const bobNote = await post(bob, { text: '@alice @carol root note' });
+		const aliceReply = await post(alice, { replyId: bobNote.id, text: '@bob @carol child note' });
+		const aliceNote = await post(alice, { text: 'another root note' });
+
+		await api('notes/thread-muting/create', { noteId: bobNote.id }, alice);
+
+		const carolReplyWithQuotingAnother = await post(carol, { replyId: aliceReply.id, renoteId: aliceNote.id, text: 'child note with quoting another note' });
+
+		await waitForPushToNotification();
+
+		const res = await api('i/notifications', {}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.some(notification => 'note' in notification && notification.note.id === carolReplyWithQuotingAnother.id), false);
+	});
+
+	test('ミュートしていないスレッドでのメンション付きノートまたはリプライで、ミュートしているスレッドのノートが引用された場合は i/notifications に通知が含まれる', async () => {
+		const bobNote = await post(bob, { text: '@alice @carol root note' });
+		const aliceReply = await post(alice, { replyId: bobNote.id, text: '@bob @carol child note' });
+		const aliceNote = await post(alice, { text: 'another root note' });
+
+		await api('notes/thread-muting/create', { noteId: bobNote.id }, alice);
+
+		const carolMentionWithQuotingMuted = await post(carol, { renoteId: aliceReply.id, text: '@alice another root note with quoting muted note' });
+		const carolReplyWithQuotingMuted = await post(carol, { replyId: aliceNote.id, renoteId: aliceReply.id, text: 'another child note with quoting muted note' });
+
+		await waitForPushToNotification();
+
+		const res = await api('i/notifications', {}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.some(notification => 'note' in notification && notification.note.id === carolMentionWithQuotingMuted.id), true);
+		assert.strictEqual(res.body.some(notification => 'note' in notification && notification.note.id === carolReplyWithQuotingMuted.id), true);
+	});
 });

packages/frontend/.storybook/generate.tsx

@@ -414,6 +414,7 @@ function toStories(component: string): Promise<string> {
 		glob('src/components/MkSignupServerRules.vue'),
 		glob('src/components/MkUserSetupDialog.vue'),
 		glob('src/components/MkUserSetupDialog.*.vue'),
+		glob('src/components/MkImgPreviewDialog.vue'),
 		glob('src/components/MkInstanceCardMini.vue'),
 		glob('src/components/MkInviteCode.vue'),
 		glob('src/components/MkTagItem.vue'),

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

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { StoryObj } from '@storybook/vue3';
+import { file } from '../../.storybook/fakes.js';
+import MkImgPreviewDialog from './MkImgPreviewDialog.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkImgPreviewDialog,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkImgPreviewDialog v-bind="props" />',
+		};
+	},
+	args: {
+		file: file(),
+	},
+	parameters: {
+		chromatic: {
+			// NOTE: ロードが終わるまで待つ
+			delay: 3000,
+		},
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkImgPreviewDialog>;

packages/frontend/src/components/MkImgPreviewDialog.vue

@@ -0,0 +1,58 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="modal"
+	:width="1800"
+	:height="900"
+	@close="close"
+	@esc="close"
+	@click="close"
+>
+	<template #header>{{ file.name }}</template>
+	<div :class="$style.container">
+		<img :src="file.url" :alt="file.comment ?? file.name" :class="$style.img"/>
+	</div>
+</MkModalWindow>
+</template>
+<script lang="ts" setup>
+import { defineProps, ref } from 'vue';
+import MkModalWindow from './MkModalWindow.vue';
+import type * as Misskey from 'misskey-js';
+
+defineProps<{
+	file: Misskey.entities.DriveFile;
+}>();
+
+const modal = ref<typeof MkModalWindow | null>(null);
+
+function close() {
+	modal.value?.close();
+}
+
+</script>
+<style lang="scss" module>
+	.container {
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+
+		background-color: var(--MI_THEME-bg);
+		background-size: auto auto;
+		background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
+	}
+
+	.img {
+		width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+	}
+</style>

packages/frontend/src/components/MkPostFormAttaches.vue

@@ -22,20 +22,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</template>
 	</Sortable>
-	<p :class="[$style.remain, {
-		[$style.exceeded]: props.modelValue.length > 16,
-	}]">{{ 16 - props.modelValue.length }}/16</p>
+	<p
+		:class="[$style.remain, {
+			[$style.exceeded]: props.modelValue.length > 16,
+		}]"
+	>
+		{{ 16 - props.modelValue.length }}/16
+	</p>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, inject } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import type { MenuItem } from '@/types/menu.js';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
@@ -168,6 +172,14 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | Keyboar
 			text: i18n.ts.cropImage,
 			icon: 'ti ti-crop',
 			action: () : void => { crop(file); },
+		}, {
+			text: i18n.ts.preview,
+			icon: 'ti ti-photo-search',
+			action: () => {
+				os.popup(defineAsyncComponent(() => import('@/components/MkImgPreviewDialog.vue')), {
+					file: file,
+				});
+			},
 		});
 	}