feat: お知らせの確認待機時間・優先順位機能

b7fd6bf33a835fd73c2a86eb007074d3680f6efd によるリワーク

This reverts commit eeef3965b7
This reverts commit 04fefb2056
This reverts commit 576251200f

locales/en-US.yml

@@ -251,6 +251,7 @@ noSuchUser: "User not found"
 lookup: "Lookup"
 announcements: "Announcements"
 imageUrl: "Image URL"
+displayOrder: "Position"
 remove: "Delete"
 removed: "Successfully deleted"
 removeAreYouSure: "Are you sure that you want to remove \"{x}\"?"

locales/index.d.ts

@@ -254,6 +254,7 @@ export interface Locale {
     "lookup": string;
     "announcements": string;
     "imageUrl": string;
+    "displayOrder": string;
     "remove": string;
     "removed": string;
     "removeAreYouSure": string;
@@ -1075,6 +1076,7 @@ export interface Locale {
     "additionalEmojiDictionary": string;
     "installed": string;
     "branding": string;
+    "dialogCloseDuration": string;
     "enableServerMachineStats": string;
     "enableIdenticonGeneration": string;
     "turnOffToImprovePerformance": string;

locales/ja-JP.yml

@@ -251,6 +251,7 @@ noSuchUser: "ユーザーが見つかりません"
 lookup: "照会"
 announcements: "お知らせ"
 imageUrl: "画像URL"
+displayOrder: "表示順"
 remove: "削除"
 removed: "削除しました"
 removeAreYouSure: "「{x}」を削除しますか？"
@@ -1072,6 +1073,7 @@ goToMisskey: "Misskeyへ"
 additionalEmojiDictionary: "絵文字の追加辞書"
 installed: "インストール済み"
 branding: "ブランディング"
+dialogCloseDuration: "ダイアログを閉じるまでの待機時間"
 enableServerMachineStats: "サーバーのマシン情報を公開する"
 enableIdenticonGeneration: "ユーザーごとのIdenticon生成を有効にする"
 turnOffToImprovePerformance: "オフにするとパフォーマンスが向上します。"

packages/backend/migration/1688647797135-userannouncement.js

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class Userannouncement1688647797135 {
+    name = 'Userannouncement1688647797135'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "announcement" ADD COLUMN "userId" character varying(32)`);
+        await queryRunner.query(`ALTER TABLE "announcement" ADD COLUMN "closeDuration" integer NOT NULL DEFAULT 0`);
+        await queryRunner.query(`CREATE INDEX "IDX_fd25dfe3da37df1715f11ba6ec" ON "announcement" ("userId") `);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`DROP INDEX "public"."IDX_fd25dfe3da37df1715f11ba6ec"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "userId"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "closeDuration"`);
+    }
+}

packages/backend/migration/1690463372775-announcement-display-order.js

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class AnnouncementDisplayOrder1690463372775 {
+    name = 'AnnouncementDisplayOrder1690463372775'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "announcement" ADD "displayOrder" integer NOT NULL DEFAULT '0'`);
+        await queryRunner.query(`CREATE INDEX "IDX_b64d293ca4bef21e91963054b0" ON "announcement" ("displayOrder") `);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`DROP INDEX "public"."IDX_b64d293ca4bef21e91963054b0"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "displayOrder"`);
+    }
+}

packages/backend/src/core/AnnouncementService.ts

@@ -4,14 +4,17 @@
  */
 
 import { Inject, Injectable } from '@nestjs/common';
-import { Brackets } from 'typeorm';
-import { DI } from '@/di-symbols.js';
+import { Brackets, In } from 'typeorm';
+import type { AnnouncementReadsRepository, AnnouncementsRepository, UsersRepository } from '@/models/index.js';
 import type { User } from '@/models/entities/User.js';
-import type { AnnouncementReadsRepository, AnnouncementsRepository, Announcement, AnnouncementRead } from '@/models/index.js';
+import { Announcement, AnnouncementRead } from '@/models/index.js';
+import { AnnouncementEntityService } from '@/core/entities/AnnouncementEntityService.js';
 import { bindThis } from '@/decorators.js';
-import { Packed } from '@/misc/json-schema.js';
-import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { IdService } from '@/core/IdService.js';
+import { Packed } from '@/misc/json-schema.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
 
 @Injectable()
 export class AnnouncementService {
@@ -22,44 +25,21 @@ export class AnnouncementService {
 		@Inject(DI.announcementReadsRepository)
 		private announcementReadsRepository: AnnouncementReadsRepository,
 
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
 		private idService: IdService,
+		private userEntityService: UserEntityService,
+		private announcementEntityService: AnnouncementEntityService,
 		private globalEventService: GlobalEventService,
-	) {
-	}
+	) {}
 
 	@bindThis
-	public async getReads(userId: User['id']): Promise<AnnouncementRead[]> {
-		return this.announcementReadsRepository.findBy({
-			userId: userId,
-		});
-	}
-
-	@bindThis
-	public async getUnreadAnnouncements(user: User): Promise<Announcement[]> {
-		const readsQuery = this.announcementReadsRepository.createQueryBuilder('read')
-			.select('read.announcementId')
-			.where('read.userId = :userId', { userId: user.id });
-
-		const q = this.announcementsRepository.createQueryBuilder('announcement')
-			.where('announcement.isActive = true')
-			.andWhere(new Brackets(qb => {
-				qb.orWhere('announcement.userId = :userId', { userId: user.id });
-				qb.orWhere('announcement.userId IS NULL');
-			}))
-			.andWhere(new Brackets(qb => {
-				qb.orWhere('announcement.forExistingUsers = false');
-				qb.orWhere('announcement.createdAt > :createdAt', { createdAt: user.createdAt });
-			}))
-			.andWhere(`announcement.id NOT IN (${ readsQuery.getQuery() })`);
-
-		q.setParameters(readsQuery.getParameters());
-
-		return q.getMany();
-	}
-
-	@bindThis
-	public async create(values: Partial<Announcement>): Promise<{ raw: Announcement; packed: Packed<'Announcement'> }> {
-		const announcement = await this.announcementsRepository.insert({
+	public async create(
+		values: Partial<Announcement>,
+	): Promise<{ raw: Announcement; packed: Packed<'Announcement'> }> {
+		const announcement = await this.announcementsRepository
+			.insert({
 				id: this.idService.genId(),
 				createdAt: new Date(),
 				updatedAt: null,
@@ -70,15 +50,27 @@ export class AnnouncementService {
 				display: values.display,
 				forExistingUsers: values.forExistingUsers,
 				needConfirmationToRead: values.needConfirmationToRead,
+				closeDuration: values.closeDuration,
+				displayOrder: values.displayOrder,
 				userId: values.userId,
-		}).then(x => this.announcementsRepository.findOneByOrFail(x.identifiers[0]));
+			})
+			.then((x) =>
+				this.announcementsRepository.findOneByOrFail(x.identifiers[0]),
+			);
 
-		const packed = (await this.packMany([announcement]))[0];
+		const packed = await this.announcementEntityService.pack(
+			announcement,
+			null,
+		);
 
 		if (values.userId) {
-			this.globalEventService.publishMainStream(values.userId, 'announcementCreated', {
+			this.globalEventService.publishMainStream(
+				values.userId,
+				'announcementCreated',
+				{
 					announcement: packed,
-			});
+				},
+			);
 		} else {
 			this.globalEventService.publishBroadcastStream('announcementCreated', {
 				announcement: packed,
@@ -92,44 +84,271 @@ export class AnnouncementService {
 	}
 
 	@bindThis
-	public async read(user: User, announcementId: Announcement['id']): Promise<void> {
+	public async list(
+		userId: User['id'] | null,
+		limit: number,
+		offset: number,
+		moderator: User,
+	): Promise<(Announcement & { userInfo: Packed<'UserLite'> | null, readCount: number })[]> {
+		const query = this.announcementsRepository.createQueryBuilder('announcement');
+		if (userId) {
+			query.andWhere('announcement."userId" = :userId', { userId: userId });
+		} else {
+			query.andWhere('announcement."userId" IS NULL');
+		}
+
+		query.orderBy({
+			'announcement."displayOrder"': 'DESC',
+			'announcement."createdAt"': 'DESC',
+		});
+
+		const announcements = await query
+			.limit(limit)
+			.offset(offset)
+			.getMany();
+
+		const reads = new Map<Announcement, number>();
+
+		for (const announcement of announcements) {
+			reads.set(announcement, await this.announcementReadsRepository.countBy({
+				announcementId: announcement.id,
+			}));
+		}
+
+		const users = await this.usersRepository.findBy({
+			id: In(announcements.map(a => a.userId).filter(id => id != null)),
+		});
+		const packedUsers = await this.userEntityService.packMany(users, moderator, {
+			detail: false,
+		});
+
+		return announcements.map(announcement => ({
+			...announcement,
+			userInfo: packedUsers.find(u => u.id === announcement.userId) ?? null,
+			readCount: reads.get(announcement) ?? 0,
+		}));
+	}
+
+	@bindThis
+	public async update(
+		announcementId: Announcement['id'],
+		values: Partial<Announcement>,
+	): Promise<{ raw: Announcement; packed: Packed<'Announcement'> }> {
+		const oldAnnouncement = await this.announcementsRepository.findOneByOrFail({
+			id: announcementId,
+		});
+
+		if (oldAnnouncement.userId && oldAnnouncement.userId !== values.userId) {
+			await this.announcementReadsRepository.delete({
+				announcementId: announcementId,
+				userId: oldAnnouncement.userId,
+			});
+		}
+
+		const announcement = await this.announcementsRepository
+			.update(announcementId, {
+				updatedAt: new Date(),
+				isActive: values.isActive,
+				title: values.title,
+				text: values.text,
+				imageUrl: values.imageUrl !== '' ? values.imageUrl : null,
+				icon: values.icon,
+				display: values.display,
+				forExistingUsers: values.forExistingUsers,
+				needConfirmationToRead: values.needConfirmationToRead,
+				closeDuration: values.closeDuration,
+				displayOrder: values.displayOrder,
+				userId: values.userId,
+			})
+			.then(() =>
+				this.announcementsRepository.findOneByOrFail({ id: announcementId }),
+			);
+
+		const packed = await this.announcementEntityService.pack(
+			announcement,
+			values.userId ? { id: values.userId } : null,
+		);
+
+		if (values.userId) {
+			this.globalEventService.publishMainStream(
+				values.userId,
+				'announcementCreated',
+				{
+					announcement: packed,
+				},
+			);
+		} else {
+			this.globalEventService.publishBroadcastStream('announcementCreated', {
+				announcement: packed,
+			});
+		}
+
+		return {
+			raw: announcement,
+			packed: packed,
+		};
+	}
+
+	@bindThis
+	public async delete(announcementId: Announcement['id']): Promise<void> {
+		await this.announcementReadsRepository.delete({
+			announcementId: announcementId,
+		});
+		await this.announcementsRepository.delete({ id: announcementId });
+	}
+
+	@bindThis
+	public async getAnnouncements(
+		me: User | null,
+		limit: number,
+		offset: number,
+		isActive?: boolean,
+	): Promise<Packed<'Announcement'>[]> {
+		const query = this.announcementsRepository.createQueryBuilder('announcement');
+		if (me) {
+			query.leftJoin(
+				AnnouncementRead,
+				'read',
+				'read."announcementId" = announcement.id AND read."userId" = :userId',
+				{ userId: me.id },
+			);
+			query.select([
+				'announcement.*',
+				'CASE WHEN read.id IS NULL THEN FALSE ELSE TRUE END as "isRead"',
+			]);
+			query
+				.andWhere(
+					new Brackets((qb) => {
+						qb.orWhere('announcement."userId" = :userId', { userId: me.id });
+						qb.orWhere('announcement."userId" IS NULL');
+					}),
+				)
+				.andWhere(
+					new Brackets((qb) => {
+						qb.orWhere('announcement."forExistingUsers" = false');
+						qb.orWhere('announcement."createdAt" > :createdAt', {
+							createdAt: me.createdAt,
+						});
+					}),
+				);
+		} else {
+			query.select([
+				'announcement.*',
+				'NULL as "isRead"',
+			]);
+			query.andWhere('announcement."userId" IS NULL');
+			query.andWhere('announcement."forExistingUsers" = false');
+		}
+
+		if (isActive !== undefined) {
+			query.andWhere('announcement."isActive" = :isActive', {
+				isActive: isActive,
+			});
+		}
+
+		query.orderBy({
+			'"isRead"': 'ASC',
+			'announcement."displayOrder"': 'DESC',
+			'announcement."createdAt"': 'DESC',
+		});
+
+		return this.announcementEntityService.packMany(
+			await query
+				.limit(limit)
+				.offset(offset)
+				.getRawMany<Announcement & { isRead?: boolean | null }>(),
+			me,
+		);
+	}
+
+	@bindThis
+	public async getUnreadAnnouncements(me: User): Promise<Packed<'Announcement'>[]> {
+		const query = this.announcementsRepository.createQueryBuilder('announcement');
+		query.leftJoinAndSelect(
+			AnnouncementRead,
+			'read',
+			'read."announcementId" = announcement.id AND read."userId" = :userId',
+			{ userId: me.id },
+		);
+		query.andWhere('read.id IS NULL');
+		query.andWhere('announcement."isActive" = true');
+
+		query
+			.andWhere(
+				new Brackets((qb) => {
+					qb.orWhere('announcement."userId" = :userId', { userId: me.id });
+					qb.orWhere('announcement."userId" IS NULL');
+				}),
+			)
+			.andWhere(
+				new Brackets((qb) => {
+					qb.orWhere('announcement."forExistingUsers" = false');
+					qb.orWhere('announcement."createdAt" > :createdAt', {
+						createdAt: me.createdAt,
+					});
+				}),
+			);
+
+		query.orderBy({
+			'announcement."displayOrder"': 'DESC',
+			'announcement."createdAt"': 'DESC',
+		});
+
+		return this.announcementEntityService.packMany(
+			await query.getMany(),
+			me,
+		);
+	}
+
+	@bindThis
+	public async countUnreadAnnouncements(me: User): Promise<number> {
+		const query = this.announcementsRepository.createQueryBuilder('announcement');
+		query.leftJoinAndSelect(
+			AnnouncementRead,
+			'read',
+			'read."announcementId" = announcement.id AND read."userId" = :userId',
+			{ userId: me.id },
+		);
+		query.andWhere('read.id IS NULL');
+		query.andWhere('announcement."isActive" = true');
+
+		query
+			.andWhere(
+				new Brackets((qb) => {
+					qb.orWhere('announcement."userId" = :userId', { userId: me.id });
+					qb.orWhere('announcement."userId" IS NULL');
+				}),
+			)
+			.andWhere(
+				new Brackets((qb) => {
+					qb.orWhere('announcement."forExistingUsers" = false');
+					qb.orWhere('announcement."createdAt" > :createdAt', {
+						createdAt: me.createdAt,
+					});
+				}),
+			);
+
+		return query.getCount();
+	}
+
+	@bindThis
+	public async markAsRead(
+		me: User,
+		announcementId: Announcement['id'],
+	): Promise<void> {
 		try {
 			await this.announcementReadsRepository.insert({
 				id: this.idService.genId(),
 				createdAt: new Date(),
 				announcementId: announcementId,
-				userId: user.id,
+				userId: me.id,
 			});
 		} catch (e) {
 			return;
 		}
 
-		if ((await this.getUnreadAnnouncements(user)).length === 0) {
-			this.globalEventService.publishMainStream(user.id, 'readAllAnnouncements');
+		if ((await this.countUnreadAnnouncements(me)) === 0) {
+			this.globalEventService.publishMainStream(me.id, 'readAllAnnouncements');
 		}
 	}
-
-	@bindThis
-	public async packMany(
-		announcements: Announcement[],
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			reads?: AnnouncementRead[];
-		},
-	): Promise<Packed<'Announcement'>[]> {
-		const reads = me ? (options?.reads ?? await this.getReads(me.id)) : [];
-		return announcements.map(announcement => ({
-			id: announcement.id,
-			createdAt: announcement.createdAt.toISOString(),
-			updatedAt: announcement.updatedAt?.toISOString() ?? null,
-			text: announcement.text,
-			title: announcement.title,
-			imageUrl: announcement.imageUrl,
-			icon: announcement.icon,
-			display: announcement.display,
-			needConfirmationToRead: announcement.needConfirmationToRead,
-			forYou: announcement.userId === me?.id,
-			isRead: reads.some(read => read.announcementId === announcement.id),
-		}));
-	}
 }

packages/backend/src/core/CoreModule.ts

@@ -72,6 +72,7 @@ import PerUserDriveChart from './chart/charts/per-user-drive.js';
 import ApRequestChart from './chart/charts/ap-request.js';
 import { ChartManagementService } from './chart/ChartManagementService.js';
 import { AbuseUserReportEntityService } from './entities/AbuseUserReportEntityService.js';
+import { AnnouncementEntityService } from './entities/AnnouncementEntityService.js';
 import { AntennaEntityService } from './entities/AntennaEntityService.js';
 import { AppEntityService } from './entities/AppEntityService.js';
 import { AuthSessionEntityService } from './entities/AuthSessionEntityService.js';
@@ -198,6 +199,7 @@ const $ApRequestChart: Provider = { provide: 'ApRequestChart', useExisting: ApRe
 const $ChartManagementService: Provider = { provide: 'ChartManagementService', useExisting: ChartManagementService };
 
 const $AbuseUserReportEntityService: Provider = { provide: 'AbuseUserReportEntityService', useExisting: AbuseUserReportEntityService };
+const $AnnouncementEntityService: Provider = { provide: 'AnnouncementEntityService', useExisting: AnnouncementEntityService };
 const $AntennaEntityService: Provider = { provide: 'AntennaEntityService', useExisting: AntennaEntityService };
 const $AppEntityService: Provider = { provide: 'AppEntityService', useExisting: AppEntityService };
 const $AuthSessionEntityService: Provider = { provide: 'AuthSessionEntityService', useExisting: AuthSessionEntityService };
@@ -324,6 +326,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		ApRequestChart,
 		ChartManagementService,
 		AbuseUserReportEntityService,
+		AnnouncementEntityService,
 		AntennaEntityService,
 		AppEntityService,
 		AuthSessionEntityService,
@@ -445,6 +448,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		$ApRequestChart,
 		$ChartManagementService,
 		$AbuseUserReportEntityService,
+		$AnnouncementEntityService,
 		$AntennaEntityService,
 		$AppEntityService,
 		$AuthSessionEntityService,
@@ -566,6 +570,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		ApRequestChart,
 		ChartManagementService,
 		AbuseUserReportEntityService,
+		AnnouncementEntityService,
 		AntennaEntityService,
 		AppEntityService,
 		AuthSessionEntityService,
@@ -686,6 +691,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		$ApRequestChart,
 		$ChartManagementService,
 		$AbuseUserReportEntityService,
+		$AnnouncementEntityService,
 		$AntennaEntityService,
 		$AppEntityService,
 		$AuthSessionEntityService,

packages/backend/src/core/entities/AnnouncementEntityService.ts

@@ -0,0 +1,71 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import type {
+	AnnouncementReadsRepository,
+	AnnouncementsRepository,
+} from '@/models/index.js';
+import type { Packed } from '@/misc/json-schema.js';
+import { bindThis } from '@/decorators.js';
+import { Announcement, User } from '@/models/index.js';
+
+@Injectable()
+export class AnnouncementEntityService {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
+
+		@Inject(DI.announcementReadsRepository)
+		private announcementReadsRepository: AnnouncementReadsRepository,
+	) {
+	}
+
+	@bindThis
+	public async pack(
+		src: Announcement['id'] | Announcement & { isRead?: boolean | null },
+		me: { id: User['id'] } | null | undefined,
+	): Promise<Packed<'Announcement'>> {
+		const announcement = typeof src === 'object'
+			? src
+			: await this.announcementsRepository.findOneByOrFail({
+				id: src,
+			}) as Announcement & { isRead?: boolean | null };
+
+		if (me && announcement.isRead === undefined) {
+			announcement.isRead = await this.announcementReadsRepository.countBy({
+				announcementId: announcement.id,
+				userId: me.id,
+			}).then(count => count > 0);
+		}
+
+		return {
+			id: announcement.id,
+			createdAt: announcement.createdAt.toISOString(),
+			updatedAt: announcement.updatedAt?.toISOString() ?? null,
+			title: announcement.title,
+			text: announcement.text,
+			imageUrl: announcement.imageUrl,
+			icon: announcement.icon,
+			display: announcement.display,
+			forYou: announcement.userId === me?.id,
+			needConfirmationToRead: announcement.needConfirmationToRead,
+			closeDuration: announcement.closeDuration,
+			displayOrder: announcement.displayOrder,
+			isRead: announcement.isRead !== null ? announcement.isRead : undefined,
+		};
+	}
+
+	@bindThis
+	public async packMany(
+		announcements: (Announcement['id'] | Announcement & { isRead?: boolean | null } | Announcement)[],
+		me: { id: User['id'] } | null | undefined,
+	) : Promise<Packed<'Announcement'>[]> {
+		return (await Promise.allSettled(announcements.map(x => this.pack(x, me))))
+			.filter(result => result.status === 'fulfilled')
+			.map(result => (result as PromiseFulfilledResult<Packed<'Announcement'>>).value);
+	}
+}

packages/backend/src/models/entities/Announcement.ts

@@ -60,12 +60,26 @@ export class Announcement {
 	})
 	public needConfirmationToRead: boolean;
 
+	@Column('integer', {
+		nullable: false,
+		default: 0,
+	})
+	public closeDuration: number;
+
 	@Index()
 	@Column('boolean', {
 		default: true,
 	})
 	public isActive: boolean;
 
+	// UIに表示する際の並び順用(大きいほど先頭)
+	@Index()
+	@Column('integer', {
+		nullable: false,
+		default: 0,
+	})
+	public displayOrder: number;
+
 	@Index()
 	@Column('boolean', {
 		default: false,

packages/backend/src/models/json-schema/announcement.ts

@@ -50,6 +50,14 @@ export const packedAnnouncementSchema = {
 			type: 'boolean',
 			optional: false, nullable: false,
 		},
+		closeDuration: {
+			type: 'number',
+			optional: false, nullable: false,
+		},
+		displayOrder: {
+			type: 'number',
+			optional: false, nullable: false,
+		},
 		isRead: {
 			type: 'boolean',
 			optional: true, nullable: false,

packages/backend/src/server/api/endpoints/admin/announcements/create.ts

@@ -45,6 +45,34 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			icon: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			display: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			forExistingUsers: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
+			needConfirmationToRead: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
+			closeDuration: {
+				type: 'number',
+				optional: false, nullable: false,
+			},
+			displayOrder: {
+				type: 'number',
+				optional: false, nullable: false,
+			},
+			userId: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 		},
 	},
 } as const;
@@ -59,6 +87,8 @@ export const paramDef = {
 		display: { type: 'string', enum: ['normal', 'banner', 'dialog'], default: 'normal' },
 		forExistingUsers: { type: 'boolean', default: false },
 		needConfirmationToRead: { type: 'boolean', default: false },
+		closeDuration: { type: 'number', default: 0 },
+		displayOrder: { type: 'number', default: 0 },
 		userId: { type: 'string', format: 'misskey:id', nullable: true, default: null },
 	},
 	required: ['title', 'text', 'imageUrl'],
@@ -81,10 +111,26 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				display: ps.display,
 				forExistingUsers: ps.forExistingUsers,
 				needConfirmationToRead: ps.needConfirmationToRead,
+				closeDuration: ps.closeDuration,
+				displayOrder: ps.displayOrder,
 				userId: ps.userId,
 			});
 
-			return packed;
+			return {
+				id: packed.id,
+				createdAt: packed.createdAt,
+				updatedAt: packed.updatedAt,
+				title: packed.title,
+				text: packed.text,
+				imageUrl: packed.imageUrl,
+				icon: packed.icon,
+				display: packed.display,
+				forExistingUsers: raw.forExistingUsers,
+				needConfirmationToRead: packed.needConfirmationToRead,
+				closeDuration: packed.closeDuration,
+				displayOrder: packed.displayOrder,
+				userId: raw.userId,
+			};
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/announcements/delete.ts

@@ -5,9 +5,10 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { AnnouncementsRepository } from '@/models/index.js';
+import { ApiError } from '@/server/api/error.js';
 import { DI } from '@/di-symbols.js';
-import { ApiError } from '../../../error.js';
+import type { AnnouncementsRepository } from '@/models/index.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -38,13 +39,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	constructor(
 		@Inject(DI.announcementsRepository)
 		private announcementsRepository: AnnouncementsRepository,
+
+		private announcementService: AnnouncementService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const announcement = await this.announcementsRepository.findOneBy({ id: ps.id });
 
 			if (announcement == null) throw new ApiError(meta.errors.noSuchAnnouncement);
 
-			await this.announcementsRepository.delete(announcement.id);
+			await this.announcementService.delete(announcement.id);
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/announcements/list.ts

@@ -3,12 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Inject, Injectable } from '@nestjs/common';
-import type { AnnouncementsRepository, AnnouncementReadsRepository } from '@/models/index.js';
-import type { Announcement } from '@/models/entities/Announcement.js';
+import { Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import { QueryService } from '@/core/QueryService.js';
-import { DI } from '@/di-symbols.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -39,19 +36,56 @@ export const meta = {
 					optional: false, nullable: true,
 					format: 'date-time',
 				},
-				text: {
-					type: 'string',
+				isActive: {
+					type: 'boolean',
 					optional: false, nullable: false,
 				},
 				title: {
 					type: 'string',
 					optional: false, nullable: false,
 				},
+				text: {
+					type: 'string',
+					optional: false, nullable: false,
+				},
 				imageUrl: {
 					type: 'string',
 					optional: false, nullable: true,
 				},
-				reads: {
+				icon: {
+					type: 'string',
+					optional: false, nullable: false,
+				},
+				display: {
+					type: 'string',
+					optional: false, nullable: false,
+				},
+				forExistingUsers: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+				needConfirmationToRead: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+				closeDuration: {
+					type: 'number',
+					optional: false, nullable: false,
+				},
+				displayOrder: {
+					type: 'number',
+					optional: false, nullable: false,
+				},
+				userId: {
+					type: 'string',
+					optional: false, nullable: true,
+				},
+				user: {
+					type: 'object',
+					optional: false, nullable: true,
+					ref: 'UserLite',
+				},
+				readCount: {
 					type: 'number',
 					optional: false, nullable: false,
 				},
@@ -64,8 +98,7 @@ export const paramDef = {
 	type: 'object',
 	properties: {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
-		sinceId: { type: 'string', format: 'misskey:id' },
-		untilId: { type: 'string', format: 'misskey:id' },
+		offset: { type: 'integer', default: 0 },
 		userId: { type: 'string', format: 'misskey:id', nullable: true },
 	},
 	required: [],
@@ -75,46 +108,28 @@ export const paramDef = {
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> {
 	constructor(
-		@Inject(DI.announcementsRepository)
-		private announcementsRepository: AnnouncementsRepository,
-
-		@Inject(DI.announcementReadsRepository)
-		private announcementReadsRepository: AnnouncementReadsRepository,
-
-		private queryService: QueryService,
+		private announcementService: AnnouncementService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const query = this.queryService.makePaginationQuery(this.announcementsRepository.createQueryBuilder('announcement'), ps.sinceId, ps.untilId);
-			if (ps.userId) {
-				query.andWhere('announcement.userId = :userId', { userId: ps.userId });
-			} else {
-				query.andWhere('announcement.userId IS NULL');
-			}
-
-			const announcements = await query.limit(ps.limit).getMany();
-
-			const reads = new Map<Announcement, number>();
-
-			for (const announcement of announcements) {
-				reads.set(announcement, await this.announcementReadsRepository.countBy({
-					announcementId: announcement.id,
-				}));
-			}
+			const announcements = await this.announcementService.list(ps.userId ?? null, ps.limit, ps.offset, me);
 
 			return announcements.map(announcement => ({
 				id: announcement.id,
 				createdAt: announcement.createdAt.toISOString(),
 				updatedAt: announcement.updatedAt?.toISOString() ?? null,
+				isActive: announcement.isActive,
 				title: announcement.title,
 				text: announcement.text,
 				imageUrl: announcement.imageUrl,
 				icon: announcement.icon,
 				display: announcement.display,
-				isActive: announcement.isActive,
 				forExistingUsers: announcement.forExistingUsers,
 				needConfirmationToRead: announcement.needConfirmationToRead,
+				closeDuration: announcement.closeDuration,
+				displayOrder: announcement.displayOrder,
 				userId: announcement.userId,
-				reads: reads.get(announcement)!,
+				user: announcement.userInfo,
+				readCount: announcement.readCount,
 			}));
 		});
 	}

packages/backend/src/server/api/endpoints/admin/announcements/update.ts

@@ -5,9 +5,10 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { AnnouncementsRepository } from '@/models/index.js';
+import { ApiError } from '@/server/api/error.js';
 import { DI } from '@/di-symbols.js';
-import { ApiError } from '../../../error.js';
+import type { AnnouncementsRepository } from '@/models/index.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -35,6 +36,8 @@ export const paramDef = {
 		display: { type: 'string', enum: ['normal', 'banner', 'dialog'] },
 		forExistingUsers: { type: 'boolean' },
 		needConfirmationToRead: { type: 'boolean' },
+		closeDuration: { type: 'number', default: 0 },
+		displayOrder: { type: 'number', default: 0 },
 		isActive: { type: 'boolean' },
 	},
 	required: ['id'],
@@ -46,24 +49,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	constructor(
 		@Inject(DI.announcementsRepository)
 		private announcementsRepository: AnnouncementsRepository,
+
+		private announcementService: AnnouncementService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const announcement = await this.announcementsRepository.findOneBy({ id: ps.id });
 
 			if (announcement == null) throw new ApiError(meta.errors.noSuchAnnouncement);
 
-			await this.announcementsRepository.update(announcement.id, {
-				updatedAt: new Date(),
-				title: ps.title,
-				text: ps.text,
-				/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- 空の文字列の場合、nullを渡すようにするため */
-				imageUrl: ps.imageUrl || null,
-				display: ps.display,
-				icon: ps.icon,
-				forExistingUsers: ps.forExistingUsers,
-				needConfirmationToRead: ps.needConfirmationToRead,
-				isActive: ps.isActive,
-			});
+			await this.announcementService.update(announcement.id, ps);
 		});
 	}
 }

packages/backend/src/server/api/endpoints/announcements.ts

@@ -31,8 +31,7 @@ export const paramDef = {
 	type: 'object',
 	properties: {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
-		sinceId: { type: 'string', format: 'misskey:id' },
-		untilId: { type: 'string', format: 'misskey:id' },
+		offset: { type: 'integer', default: 0 },
 		isActive: { type: 'boolean', default: true },
 	},
 	required: [],
@@ -52,16 +51,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private announcementService: AnnouncementService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const query = this.queryService.makePaginationQuery(this.announcementsRepository.createQueryBuilder('announcement'), ps.sinceId, ps.untilId)
-				.where('announcement.isActive = :isActive', { isActive: ps.isActive })
-				.andWhere(new Brackets(qb => {
-					if (me) qb.orWhere('announcement.userId = :meId', { meId: me.id });
-					qb.orWhere('announcement.userId IS NULL');
-				}));
-
-			const announcements = await query.limit(ps.limit).getMany();
-
-			return this.announcementService.packMany(announcements, me);
+			return this.announcementService.getAnnouncements(me, ps.limit, ps.offset, ps.isActive);
 		});
 	}
 }

packages/backend/src/server/api/endpoints/i/read-announcement.ts

@@ -33,7 +33,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private announcementService: AnnouncementService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			await this.announcementService.read(me, ps.announcementId);
+			await this.announcementService.markAsRead(me, ps.announcementId);
 		});
 	}
 }

packages/backend/test/unit/AnnouncementService.ts

@@ -5,18 +5,19 @@
 
 process.env.NODE_ENV = 'test';
 
-import { jest } from '@jest/globals';
 import { ModuleMocker } from 'jest-mock';
 import { Test } from '@nestjs/testing';
-import { GlobalModule } from '@/GlobalModule.js';
-import { AnnouncementService } from '@/core/AnnouncementService.js';
+import { jest } from '@jest/globals';
 import type { Announcement, AnnouncementsRepository, AnnouncementReadsRepository, UsersRepository, User } from '@/models/index.js';
-import { DI } from '@/di-symbols.js';
-import { genAid } from '@/misc/id/aid.js';
-import { CacheService } from '@/core/CacheService.js';
-import { IdService } from '@/core/IdService.js';
-import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { secureRndstr } from '@/misc/secure-rndstr.js';
+import { GlobalModule } from '@/GlobalModule.js';
+import { IdService } from '@/core/IdService.js';
+import { AnnouncementEntityService } from '@/core/entities/AnnouncementEntityService.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';
+import { DI } from '@/di-symbols.js';
+import { CacheService } from '@/core/CacheService.js';
+import { genAid } from '@/misc/id/aid.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 import type { TestingModule } from '@nestjs/testing';
 import type { MockFunctionMetadata } from 'jest-mock';
 
@@ -60,6 +61,7 @@ describe('AnnouncementService', () => {
 				GlobalModule,
 			],
 			providers: [
+				AnnouncementEntityService,
 				AnnouncementService,
 				CacheService,
 				IdService,

packages/frontend/src/boot/main-boot.ts

@@ -89,15 +89,6 @@ export async function mainBoot() {
 			}, {}, 'closed');
 		}
 
-		stream.on('announcementCreated', (ev) => {
-			const announcement = ev.announcement;
-			if (announcement.display === 'dialog') {
-				popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
-					announcement,
-				}, {}, 'closed');
-			}
-		});
-
 		if ($i.isDeleted) {
 			alert({
 				type: 'warning',
@@ -224,6 +215,20 @@ export async function mainBoot() {
 			updateAccount(i);
 		});
 
+		main.on('announcementCreated', (ev) => {
+			const announcement = ev.announcement;
+			updateAccount({
+				hasUnreadAnnouncement: true,
+				unreadAnnouncements: [...($i?.unreadAnnouncements ?? []), announcement],
+			});
+
+			if (announcement.display === 'dialog') {
+				popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
+					announcement,
+				}, {}, 'closed');
+			}
+		});
+
 		main.on('readAllNotifications', () => {
 			updateAccount({ hasUnreadNotification: false });
 		});
@@ -257,8 +262,25 @@ export async function mainBoot() {
 			sound.play('antenna');
 		});
 
+		stream.on('announcementCreated', (ev) => {
+			const announcement = ev.announcement;
+			updateAccount({
+				hasUnreadAnnouncement: true,
+				unreadAnnouncements: [...($i?.unreadAnnouncements ?? []), announcement],
+			});
+
+			if (announcement.display === 'dialog') {
+				popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
+					announcement,
+				}, {}, 'closed');
+			}
+		});
+
 		main.on('readAllAnnouncements', () => {
-			updateAccount({ hasUnreadAnnouncement: false });
+			updateAccount({
+				hasUnreadAnnouncement: false,
+				unreadAnnouncements: [],
+			});
 		});
 
 		// トークンが再生成されたとき

packages/frontend/src/components/MkAnnouncementDialog.vue

@@ -13,16 +13,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
 				<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
 			</span>
-			<span :class="$style.title">{{ announcement.title }}</span>
+			<Mfm :text="announcement.title"/>
 		</div>
-		<div :class="$style.text"><Mfm :text="announcement.text"/></div>
-		<MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton>
+		<div :class="$style.content"><Mfm :text="announcement.text"/></div>
+		<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}<span v-if="secVisible"> ({{ sec }})</span></MkButton>
 	</div>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, shallowRef } from 'vue';
+import { onMounted, ref, shallowRef } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
 import MkModal from '@/components/MkModal.vue';
@@ -37,8 +37,11 @@ const props = withDefaults(defineProps<{
 
 const rootEl = shallowRef<HTMLDivElement>();
 const modal = shallowRef<InstanceType<typeof MkModal>>();
+const gotItDisabled = ref(true);
+const secVisible = ref(true);
+const sec = ref(props.announcement.closeDuration);
 
-async function ok() {
+async function gotIt(): Promise<void> {
 	if (props.announcement.needConfirmationToRead) {
 		const confirm = await os.confirm({
 			type: 'question',
@@ -48,15 +51,19 @@ async function ok() {
 		if (confirm.canceled) return;
 	}
 
-	modal.value.close();
-	os.api('i/read-announcement', { announcementId: props.announcement.id });
+	await os.api('i/read-announcement', { announcementId: props.announcement.id });
+	if ($i) {
 		updateAccount({
-		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== props.announcement.id),
+			unreadAnnouncements: $i.unreadAnnouncements.filter((a: { id: string; }) => a.id !== props.announcement.id),
 		});
 	}
+	modal.value?.close();
+}
 
-function onBgClick() {
-	rootEl.value.animate([{
+function onBgClick(): void {
+	if (sec.value > 0) return;
+
+	rootEl.value?.animate([{
 		offset: 0,
 		transform: 'scale(1)',
 	}, {
@@ -71,6 +78,21 @@ function onBgClick() {
 }
 
 onMounted(() => {
+	if (sec.value > 0 ) {
+		const waitTimer = setInterval(() => {
+			if (sec.value === 0) {
+				clearInterval(waitTimer);
+				gotItDisabled.value = false;
+				secVisible.value = false;
+			} else {
+				gotItDisabled.value = true;
+			}
+			sec.value = sec.value - 1;
+		}, 1000);
+	} else {
+		gotItDisabled.value = false;
+		secVisible.value = false;
+	}
 });
 </script>
 
@@ -94,11 +116,7 @@ onMounted(() => {
 	margin-right: 0.5em;
 }
 
-.title {
-	font-weight: bold;
-}
-
-.text {
+.content {
 	margin: 1em 0;
 }
 </style>

packages/frontend/src/components/MkUserAnnouncementEditDialog.vue

@@ -6,8 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkModalWindow
 	ref="dialog"
-	:width="400"
-	@close="dialog.close()"
+	:width="800"
+	:height="600"
+	:withOkButton="false"
+	:okButtonDisabled="false"
+	@close="dialog?.close()"
 	@closed="$emit('closed')"
 >
 	<template v-if="announcement" #header>:{{ announcement.title }}:</template>
@@ -16,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div>
 		<MkSpacer :marginMin="20" :marginMax="28">
 			<div class="_gaps_m">
-				<MkInput v-model="title">
-					<template #label>{{ i18n.ts.title }}</template>
+				<MkInput ref="announceTitleEl" v-model="title" :large="false">
+					<template #label>{{ i18n.ts.title }}&nbsp;<button v-tooltip="i18n.ts.emoji" :class="['_button']" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button></template>
 				</MkInput>
 				<MkTextarea v-model="text">
 					<template #label>{{ i18n.ts.text }}</template>
@@ -39,6 +42,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					{{ i18n.ts._announcement.needConfirmationToRead }}
 					<template #caption>{{ i18n.ts._announcement.needConfirmationToReadDescription }}</template>
 				</MkSwitch>
+				<MkInput v-model="closeDuration" type="number">
+					<template #label>{{ i18n.ts.dialogCloseDuration }}</template>
+					<template #suffix>{{ i18n.ts._time.second }}</template>
+				</MkInput>
+				<MkInput v-model="displayOrder" type="number">
+					<template #label>{{ i18n.ts.displayOrder }}</template>
+				</MkInput>
+				<p v-if="readCount">{{ i18n.t('nUsersRead', { n: readCount }) }}</p>
+				<MkUserCardMini v-if="props.user.id" :user="props.user"></MkUserCardMini>
 				<MkButton v-if="announcement" danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
 		</MkSpacer>
@@ -50,35 +62,44 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
 import * as misskey from 'misskey-js';
-import MkModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
-import MkTextarea from '@/components/MkTextarea.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkRadios from '@/components/MkRadios.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
 
 const props = defineProps<{
-	user: misskey.entities.User,
+	user: misskey.entities.UserLite,
 	announcement?: any,
 }>();
 
-let dialog = $ref(null);
 let title: string = $ref(props.announcement ? props.announcement.title : '');
 let text: string = $ref(props.announcement ? props.announcement.text : '');
 let icon: string = $ref(props.announcement ? props.announcement.icon : 'info');
 let display: string = $ref(props.announcement ? props.announcement.display : 'dialog');
-let needConfirmationToRead = $ref(props.announcement ? props.announcement.needConfirmationToRead : false);
+let needConfirmationToRead: boolean = $ref(props.announcement ? props.announcement.needConfirmationToRead : false);
+let closeDuration: number = $ref(props.announcement ? props.announcement.closeDuration : 0);
+let displayOrder: number = $ref(props.announcement ? props.announcement.displayOrder : 0);
+let readCount: number = $ref(props.announcement ? props.announcement.readCount : 0);
 
 const emit = defineEmits<{
 	(ev: 'done', v: { deleted?: boolean; updated?: any; created?: any }): void,
 	(ev: 'closed'): void
 }>();
 
-async function done() {
+const dialog = $shallowRef<typeof MkModalWindow | null>(null);
+const announceTitleEl = $shallowRef<HTMLInputElement | null>(null);
+
+function insertEmoji(ev: MouseEvent): void {
+	os.openEmojiPicker((ev.currentTarget ?? ev.target) as HTMLElement, {}, announceTitleEl);
+}
+
+async function done(): Promise<void> {
 	const params = {
 		title: title,
 		text: text,
@@ -86,6 +107,9 @@ async function done() {
 		imageUrl: null,
 		display: display,
 		needConfirmationToRead: needConfirmationToRead,
+		closeDuration: closeDuration,
+		displayOrder: displayOrder,
+		readCount: readCount,
 		userId: props.user.id,
 	};
 
@@ -102,7 +126,7 @@ async function done() {
 			},
 		});
 
-		dialog.close();
+		dialog?.close();
 	} else {
 		const created = await os.apiWithDialog('admin/announcements/create', params);
 
@@ -110,11 +134,11 @@ async function done() {
 			created: created,
 		});
 
-		dialog.close();
+		dialog?.close();
 	}
 }
 
-async function del() {
+async function del(): Promise<void> {
 	const { canceled } = await os.confirm({
 		type: 'warning',
 		text: i18n.t('removeAreYouSure', { x: title }),
@@ -127,7 +151,7 @@ async function del() {
 		emit('done', {
 			deleted: true,
 		});
-		dialog.close();
+		dialog?.close();
 	});
 }
 </script>

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

@@ -8,7 +8,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900">
 		<div class="_gaps">
-			<MkInfo v-if="announcements.length > 5" warn>{{ i18n.ts._announcement.tooManyActiveAnnouncementDescription }}</MkInfo>
+			<MkFolder>
+				<template #label>{{ i18n.ts.options }}</template>
+
+				<MkFolder>
+					<template #label>{{ i18n.ts.specifyUser }}</template>
+					<template v-if="user" #suffix>@{{ user.username }}</template>
+
+					<div style="text-align: center;" class="_gaps">
+						<div v-if="user">@{{ user.username }}</div>
+						<div>
+							<MkButton v-if="user == null" primary rounded inline @click="selectUserFilter">{{ i18n.ts.selectUser }}</MkButton>
+							<MkButton v-else danger rounded inline @click="user = null">{{ i18n.ts.remove }}</MkButton>
+						</div>
+					</div>
+				</MkFolder>
+			</MkFolder>
 
 			<MkFolder v-for="announcement in announcements" :key="announcement.id ?? announcement._id" :defaultOpen="announcement.id == null">
 				<template #label>{{ announcement.title }}</template>
@@ -21,8 +36,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #caption>{{ announcement.text }}</template>
 
 				<div class="_gaps_m">
-					<MkInput v-model="announcement.title">
-						<template #label>{{ i18n.ts.title }}</template>
+					<MkInput ref="announceTitleEl" v-model="announcement.title" :large="false">
+						<template #label>{{ i18n.ts.title }}&nbsp;<button v-tooltip="i18n.ts.emoji" :class="['_button']" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button></template>
 					</MkInput>
 					<MkTextarea v-model="announcement.text">
 						<template #label>{{ i18n.ts.text }}</template>
@@ -49,40 +64,69 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkSwitch v-model="announcement.needConfirmationToRead" :helpText="i18n.ts._announcement.needConfirmationToReadDescription">
 						{{ i18n.ts._announcement.needConfirmationToRead }}
 					</MkSwitch>
-					<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
+					<MkInput v-model="announcement.closeDuration" type="number">
+						<template #label>{{ i18n.ts.dialogCloseDuration }}</template>
+						<template #suffix>{{ i18n.ts._time.second }}</template>
+					</MkInput>
+					<MkInput v-model="announcement.displayOrder" type="number">
+						<template #label>{{ i18n.ts.displayOrder }}</template>
+					</MkInput>
+					<p v-if="announcement.readCount">{{ i18n.t('nUsersRead', { n: announcement.readCount }) }}</p>
+					<MkUserCardMini v-if="announcement.userId" :user="announcement.user" @click="editUser(announcement)"></MkUserCardMini>
+					<MkButton v-else class="button" inline primary @click="editUser(announcement)">{{ i18n.ts.specifyUser }}</MkButton>
 					<div class="buttons _buttons">
-						<MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton v-if="announcement.id != null" class="button" inline @click="archive(announcement)"><i class="ti ti-check"></i> {{ i18n.ts._announcement.end }} ({{ i18n.ts.archive }})</MkButton>
+						<MkButton v-if="announcement.id == null || announcement.isActive" class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+						<MkButton v-if="announcement.id != null && announcement.isActive" class="button" inline @click="archive(announcement)"><i class="ti ti-check"></i> {{ i18n.ts._announcement.end }} ({{ i18n.ts.archive }})</MkButton>
 						<MkButton v-if="announcement.id != null" class="button" inline danger @click="del(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 					</div>
 				</div>
 			</MkFolder>
+			<MkButton v-if="hasMore" :class="$style.more" :disabled="!hasMore" primary rounded @click="fetch()">{{ i18n.ts.loadMore }}</MkButton>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { ref, watch } from 'vue';
+import * as misskey from 'misskey-js';
 import XHeader from './_header_.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/MkInput.vue';
-import MkTextarea from '@/components/MkTextarea.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+
+const announceTitleEl = $shallowRef<HTMLInputElement | null>(null);
+const user = ref<misskey.entities.UserLite | null>(null);
+const offset = ref(0);
+const hasMore = ref(false);
 
 let announcements: any[] = $ref([]);
 
-os.api('admin/announcements/list').then(announcementResponse => {
-	announcements = announcementResponse;
+function selectUserFilter(): void {
+	os.selectUser().then(_user => {
+		user.value = _user;
 	});
+}
 
-function add() {
+function editUser(announcement): void {
+	os.selectUser().then(_user => {
+		announcement.userId = _user.id;
+		announcement.user = _user;
+	});
+}
+
+function insertEmoji(ev: MouseEvent): void {
+	os.openEmojiPicker((ev.currentTarget ?? ev.target) as HTMLElement, {}, announceTitleEl);
+}
+
+function add(): void {
 	announcements.unshift({
 		_id: Math.random().toString(36),
 		id: null,
@@ -93,10 +137,12 @@ function add() {
 		display: 'normal',
 		forExistingUsers: false,
 		needConfirmationToRead: false,
+		closeDuration: 0,
+		displayOrder: 0,
 	});
 }
 
-function del(announcement) {
+function del(announcement): void {
 	os.confirm({
 		type: 'warning',
 		text: i18n.t('deleteAreYouSure', { x: announcement.title }),
@@ -107,30 +153,43 @@ function del(announcement) {
 	});
 }
 
-async function archive(announcement) {
+async function archive(announcement): Promise<void> {
 	await os.apiWithDialog('admin/announcements/update', {
 		...announcement,
 		isActive: false,
 	});
-	refresh();
+	fetch(true);
 }
 
-async function save(announcement) {
+async function save(announcement): Promise<void> {
 	if (announcement.id == null) {
 		await os.apiWithDialog('admin/announcements/create', announcement);
-		refresh();
 	} else {
-		os.apiWithDialog('admin/announcements/update', announcement);
+		await os.apiWithDialog('admin/announcements/update', announcement);
 	}
+	fetch(true);
 }
 
-function refresh() {
-	os.api('admin/announcements/list').then(announcementResponse => {
-		announcements = announcementResponse;
+function fetch(resetOffset = false): void {
+	if (resetOffset) {
+		announcements = [];
+		offset.value = 0;
+	}
+
+	os.api('admin/announcements/list', {
+		offsetMode: true,
+		offset: offset.value,
+		limit: 10,
+		userId: user.value?.id,
+	}).then(announcementResponse => {
+		announcements = announcements.concat(announcementResponse);
+		hasMore.value = announcementResponse?.length === 10;
+		offset.value += announcements.length;
 	});
 }
 
-refresh();
+watch(user, () => fetch(true));
+fetch(true);
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
@@ -146,3 +205,10 @@ definePageMetadata({
 	icon: 'ti ti-speakerphone',
 });
 </script>
+
+<style lang="scss" module>
+.more {
+	margin-left: auto;
+	margin-right: auto;
+}
+</style>

packages/frontend/src/pages/announcements.vue

@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
 							<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
 						</span>
-						<span>{{ announcement.title }}</span>
+						<Mfm :text="announcement.title"/>
 					</div>
 					<div :class="$style.content">
 						<Mfm :text="announcement.text"/>
@@ -40,17 +40,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
+import { ref, watch } from 'vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i, updateAccount } from '@/account';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInfo from '@/components/MkInfo.vue';
 
 const paginationCurrent = {
 	endpoint: 'announcements' as const,
+	offsetMode: true,
 	limit: 10,
 	params: {
 		isActive: true,
@@ -59,6 +60,7 @@ const paginationCurrent = {
 
 const paginationPast = {
 	endpoint: 'announcements' as const,
+	offsetMode: true,
 	limit: 10,
 	params: {
 		isActive: false,
@@ -66,10 +68,9 @@ const paginationPast = {
 };
 
 const paginationEl = ref<InstanceType<typeof MkPagination>>();
-
 const tab = ref('current');
 
-async function read(announcement) {
+async function read(announcement): Promise<void> {
 	if (announcement.needConfirmationToRead) {
 		const confirm = await os.confirm({
 			type: 'question',
@@ -84,11 +85,13 @@ async function read(announcement) {
 		a.isRead = true;
 		return a;
 	});
-	os.api('i/read-announcement', { announcementId: announcement.id });
+	await os.api('i/read-announcement', { announcementId: announcement.id });
+	if ($i) {
 		updateAccount({
-		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
+			unreadAnnouncements: $i.unreadAnnouncements.filter((a: { id: string; }) => a.id !== announcement.id),
 		});
 	}
+}
 
 const headerActions = $computed(() => []);
 
@@ -106,6 +109,15 @@ definePageMetadata({
 	title: i18n.ts.announcements,
 	icon: 'ti ti-speakerphone',
 });
+
+const unreadCount = ref($i?.unreadAnnouncements.length ?? 0);
+watch(() => $i?.unreadAnnouncements.length ?? 0, () => {
+	// 未読が増えた場合はリロード
+	if (($i?.unreadAnnouncements.length ?? 0) > unreadCount.value) {
+		paginationEl.value?.reload();
+	}
+	unreadCount.value = $i?.unreadAnnouncements.length ?? 0;
+});
 </script>
 
 <style lang="scss" module>

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

@@ -139,7 +139,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div class="_gaps">
 						<MkButton primary rounded @click="createAnnouncement"><i class="ti ti-plus"></i> {{ i18n.ts.new }}</MkButton>
 
-						<MkPagination :pagination="announcementsPagination">
+						<MkPagination ref="announcementsPaginationEl" :pagination="announcementsPagination">
 							<template #default="{ items }">
 								<div class="_gaps_s">
 									<div v-for="announcement in items" :key="announcement.id" v-panel :class="$style.announcementItem" @click="editAnnouncement(announcement)">
@@ -211,29 +211,30 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, watch } from 'vue';
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import MkChart from '@/components/MkChart.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import MkTextarea from '@/components/MkTextarea.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkSelect from '@/components/MkSelect.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os';
 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 FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkChart from '@/components/MkChart.vue';
+import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkObjectView from '@/components/MkObjectView.vue';
+import MkPagination from '@/components/MkPagination.vue';
 import MkRolePreview from '@/components/MkRolePreview.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import { updateColumn } from '@/ui/deck/deck-store';
 
 const props = withDefaults(defineProps<{
 	userId: string;
@@ -261,8 +262,10 @@ const filesPagination = {
 		userId: props.userId,
 	})),
 };
+const announcementsPaginationEl = ref<InstanceType<typeof MkPagination>>();
 const announcementsPagination = {
 	endpoint: 'admin/announcements/list' as const,
+	offsetMode: true,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.userId,
@@ -442,17 +445,25 @@ function toggleRoleItem(role) {
 	}
 }
 
-function createAnnouncement() {
+function createAnnouncement(): void {
 	os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
 		user,
-	}, {}, 'closed');
+	}, {
+		done: async () => {
+			announcementsPaginationEl.value?.reload();
+		},
+	}, 'closed');
 }
 
-function editAnnouncement(announcement) {
+function editAnnouncement(announcement): void {
 	os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
 		user,
 		announcement,
-	}, {}, 'closed');
+	}, {
+		done: async () => {
+			announcementsPaginationEl.value?.reload();
+		},
+	}, 'closed');
 }
 
 watch(() => props.userId, () => {

packages/frontend/src/ui/visitor.vue

@@ -96,6 +96,7 @@ provideMetadataReceiver((info) => {
 
 const announcements = {
 	endpoint: 'announcements',
+	offsetMode: true,
 	limit: 10,
 };
 

packages/misskey-js/etc/misskey-js.api.md

@@ -33,6 +33,8 @@ type Announcement = {
     display: 'normal' | 'banner' | 'dialog';
     icon: 'info' | 'warning' | 'error' | 'success';
     needConfirmationToRead: boolean;
+    closeDuration: number;
+    displayOrder: number;
     forYou: boolean;
     isRead?: boolean;
 };
@@ -568,10 +570,9 @@ export type Endpoints = {
     };
     'announcements': {
         req: {
+            isActive?: boolean;
             limit?: number;
-            withUnreads?: boolean;
-            sinceId?: Announcement['id'];
-            untilId?: Announcement['id'];
+            offset?: number;
         };
         res: Announcement[];
     };

packages/misskey-js/src/api.types.ts

@@ -77,7 +77,7 @@ export type Endpoints = {
 	'admin/relays/remove': { req: TODO; res: TODO; };
 
 	// announcements
-	'announcements': { req: { limit?: number; withUnreads?: boolean; sinceId?: Announcement['id']; untilId?: Announcement['id']; }; res: Announcement[]; };
+	'announcements': { req: { isActive?: boolean; limit?: number; offset?: number; }; res: Announcement[]; };
 
 	// antennas
 	'antennas/create': { req: TODO; res: Antenna; };

packages/misskey-js/src/entities.ts

@@ -422,6 +422,8 @@ export type Announcement = {
 	display: 'normal' | 'banner' | 'dialog';
 	icon: 'info' | 'warning' | 'error' | 'success';
 	needConfirmationToRead: boolean;
+	closeDuration: number;
+	displayOrder: number;
 	forYou: boolean;
 	isRead?: boolean;
 };