Merge remote-branch 'misskey/develop'

2023-08-16 17:13:56 +09:00 · 2023-08-16 17:13:56 +09:00 · 6958bcf1a3
parent fc5583a625 9264ca336b
commit 6958bcf1a3
76 changed files with 1511 additions and 425 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -10,28 +10,23 @@ updates:
  schedule:
    interval: daily
  open-pull-requests-limit: 100
+
+# Add only the root, not each workspace item
+# https://github.com/dependabot/dependabot-core/issues/4993#issuecomment-1289133027
 - package-ecosystem: npm
  directory: "/"
  schedule:
    interval: daily
-  open-pull-requests-limit: 100
- package-ecosystem: npm
-  directory: "/packages/backend"
-  schedule:
-    interval: daily
-  open-pull-requests-limit: 100
- package-ecosystem: npm
-  directory: "/packages/frontend"
-  schedule:
-    interval: daily
-  open-pull-requests-limit: 100
- package-ecosystem: npm
-  directory: "/packages/sw"
-  schedule:
-    interval: daily
-  open-pull-requests-limit: 100
- package-ecosystem: npm
-  directory: "/packages/misskey-js"
-  schedule:
-    interval: daily
-  open-pull-requests-limit: 100
+  # PNPM has an issue with dependabot. See:
+  # https://github.com/dependabot/dependabot-core/issues/7258
+  # https://github.com/pnpm/pnpm/issues/6530
+  # TODO: Restore this when the issue is solved
+  open-pull-requests-limit: 0
+  groups:
+    swc:
+      patterns:
+        - "@swc/*"
+    storybook:
+      patterns:
+        - "storybook*"
+        - "@storybook/*"
--- a/.github/workflows/api-cherrypick-js.yml
+++ b/.github/workflows/api-cherrypick-js.yml
@ -9,12 +9,12 @@ jobs:

    steps:
      - name: Checkout
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v3.5.3

      - run: corepack enable

      - name: Setup Node.js
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v3.8.0
        with:
          node-version-file: '.node-version'
          cache: 'pnpm'
--- a/.github/workflows/check_copyright_year.yml
+++ b/.github/workflows/check_copyright_year.yml
@ -10,7 +10,7 @@ jobs:
  check_copyright_year:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3.2.0
+    - uses: actions/checkout@v3.5.3
    - run: |
        if [ "$(grep Copyright COPYING | sed -e 's/.*2014-\([0-9]*\) .*/\1/g')" -ne "$(date +%Y)" ]; then
          echo "Please change copyright year!"
--- a/.github/workflows/docker-develop.yml
+++ b/.github/workflows/docker-develop.yml
@ -13,10 +13,10 @@ jobs:
    if: github.repository == 'kokonect-link/cherrypick'
    steps:
      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v3.5.3
      - name: Set up Docker Buildx
        id: buildx
-        uses: docker/setup-buildx-action@v2.3.0
+        uses: docker/setup-buildx-action@v2.9.1
        with:
          platforms: linux/amd64,linux/arm64
      - name: Docker meta
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@ -12,10 +12,10 @@ jobs:

    steps:
      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v3.5.3
      - name: Set up Docker Buildx
        id: buildx
-        uses: docker/setup-buildx-action@v2.3.0
+        uses: docker/setup-buildx-action@v2.9.1
        with:
          platforms: linux/amd64,linux/arm64
      - name: Docker meta
--- a/.github/workflows/dockle.yml
+++ b/.github/workflows/dockle.yml
@ -14,7 +14,7 @@ jobs:
    env:
      DOCKER_CONTENT_TRUST: 1
    steps:
-      - uses: actions/checkout@v3.2.0
+      - uses: actions/checkout@v3.5.3
      - run: |
          curl -L -o dockle.deb "https://github.com/goodwithtech/dockle/releases/download/v0.4.10/dockle_0.4.10_Linux-64bit.deb"
          sudo dpkg -i dockle.deb
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -11,7 +11,7 @@ jobs:
  pnpm_install:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      with:
        fetch-depth: 0
        submodules: true
@ -19,7 +19,7 @@ jobs:
      with:
        version: 8
        run_install: false
-    - uses: actions/setup-node@v3.6.0
+    - uses: actions/setup-node@v3.8.0
      with:
        node-version-file: '.node-version'
        cache: 'pnpm'
@ -38,7 +38,7 @@ jobs:
        - sw
        - cherrypick-js
    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      with:
        fetch-depth: 0
        submodules: true
@ -46,7 +46,7 @@ jobs:
      with:
        version: 7
        run_install: false
-    - uses: actions/setup-node@v3.6.0
+    - uses: actions/setup-node@v3.8.0
      with:
        node-version-file: '.node-version'
        cache: 'pnpm'
@ -64,7 +64,7 @@ jobs:
        - backend
        - cherrypick-js
    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      with:
        fetch-depth: 0
        submodules: true
@ -72,7 +72,7 @@ jobs:
      with:
        version: 7
        run_install: false
-    - uses: actions/setup-node@v3.6.0
+    - uses: actions/setup-node@v3.8.0
      with:
        node-version-file: '.node-version'
        cache: 'pnpm'
--- a/.github/workflows/ok-to-test.yml
+++ b/.github/workflows/ok-to-test.yml
@ -23,7 +23,7 @@ jobs:
        private_key: ${{ secrets.DEPLOYBOT_PRIVATE_KEY }}

    - name: Slash Command Dispatch
-      uses: peter-evans/slash-command-dispatch@v1
+      uses: peter-evans/slash-command-dispatch@v3
      env:
        TOKEN: ${{ steps.generate_token.outputs.token }}
      with:
--- a/.github/workflows/pr-preview-deploy.yml
+++ b/.github/workflows/pr-preview-deploy.yml
@ -53,7 +53,7 @@ jobs:

    # Check out merge commit
    - name: Fork based /deploy checkout
-      uses: actions/checkout@v3.3.0
+      uses: actions/checkout@v3.5.3
      with:
        ref: 'refs/pull/${{ github.event.client_payload.pull_request.number }}/merge'

--- a/.github/workflows/reviewer_lottery.yml
+++ b/.github/workflows/reviewer_lottery.yml
@ -7,7 +7,7 @@ jobs:
  test:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v1
-    - uses: uesteibar/reviewer-lottery@v2
+    - uses: actions/checkout@v3.5.3
+    - uses: uesteibar/reviewer-lottery@v3
      with:
        repo-token: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@ -15,12 +15,12 @@ jobs:
      NODE_OPTIONS: "--max_old_space_size=7168"

    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      if: github.event_name != 'pull_request_target'
      with:
        fetch-depth: 0
        submodules: true
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      if: github.event_name == 'pull_request_target'
      with:
        fetch-depth: 0
@ -38,7 +38,7 @@ jobs:
        version: 8
        run_install: false
    - name: Use Node.js 20.x
-      uses: actions/setup-node@v3.6.0
+      uses: actions/setup-node@v3.8.0
      with:
        node-version-file: '.node-version'
        cache: 'pnpm'
--- a/.github/workflows/test-backend.yml
+++ b/.github/workflows/test-backend.yml
@ -29,7 +29,7 @@ jobs:
          - 56312:6379

    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      with:
        submodules: true
    - name: Install pnpm
@ -38,7 +38,7 @@ jobs:
        version: 8
        run_install: false
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3.6.0
+      uses: actions/setup-node@v3.8.0
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
--- a/.github/workflows/test-cherrypick-js.yml
+++ b/.github/workflows/test-cherrypick-js.yml
@ -21,12 +21,12 @@ jobs:

    steps:
      - name: Checkout
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v3.5.3

      - run: corepack enable

      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v3.8.0
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
--- a/.github/workflows/test-frontend.yml
+++ b/.github/workflows/test-frontend.yml
@ -16,7 +16,7 @@ jobs:
        node-version: [20.x]

    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      with:
        submodules: true
    - name: Install pnpm
@ -25,7 +25,7 @@ jobs:
        version: 8
        run_install: false
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3.6.0
+      uses: actions/setup-node@v3.8.0
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
@ -68,7 +68,7 @@ jobs:
          - 56312:6379

    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      with:
        submodules: true
    # https://github.com/cypress-io/cypress-docker-images/issues/150
@ -83,7 +83,7 @@ jobs:
        version: 7
        run_install: false
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3.6.0
+      uses: actions/setup-node@v3.8.0
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
--- a/.github/workflows/test-production.yml
+++ b/.github/workflows/test-production.yml
@ -19,7 +19,7 @@ jobs:
        node-version: [20.x]

    steps:
-    - uses: actions/checkout@v3.3.0
+    - uses: actions/checkout@v3.5.3
      with:
        submodules: true
    - name: Install pnpm
@ -28,7 +28,7 @@ jobs:
        version: 8
        run_install: false
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3.6.0
+      uses: actions/setup-node@v3.8.0
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -16,6 +16,10 @@

 ### General
 - OAuth 2.0のサポート
+- お知らせ機能の強化
+	- ユーザー個別のお知らせを作成可能に
+	- お知らせのバナー表示やダイアログ表示が可能に
+	- お知らせのアイコンを設定可能に
 - チャンネルをセンシティブ指定できるようになりました

 ### Client
@ -26,12 +30,14 @@
 - Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正
 - Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
 - Fix: iOSで画面を回転させるとテキストサイズが変わる問題を修正
+- Fix: word mute for sub note is not applied
+- 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

--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@ -32,7 +32,6 @@
 - 리노트를 신고할 수 있도록 (misskey-dev/misskey#11466)

 ### Client
- 이모티콘 피커의 검색 건수를 100개로 증가 (misskey-dev/misskey#11371)
 - about-misskey 페이지에서 클라이언트 버전을 누르면 변경 사항을 볼 수 있음
 - 새로운 신고가 있는 경우, 네비게이션 바의 제어판 아이콘과 제어판 페이지의 신고 섹션에 점을 표시
 - 스크롤 시 요소 표시 기능을 Friendly 이외의 UI에도 대응
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -1160,10 +1160,26 @@ export interface Locale {
    "doYouAgree": string;
    "beSureToReadThisAsItIsImportant": string;
    "iHaveReadXCarefullyAndAgree": string;
+    "dialog": string;
+    "icon": string;
+    "forYou": string;
+    "currentAnnouncements": string;
+    "pastAnnouncements": string;
+    "youHaveUnreadAnnouncements": string;
    "additionalPermissionsForFlash": string;
    "thisFlashRequiresTheFollowingPermissions": string;
    "doYouWantToAllowThisPlayToAccessYourAccount": string;
    "translateProfile": string;
+    "_announcement": {
+        "forExistingUsers": string;
+        "forExistingUsersDescription": string;
+        "needConfirmationToRead": string;
+        "needConfirmationToReadDescription": string;
+        "end": string;
+        "tooManyActiveAnnouncementDescription": string;
+        "readConfirmTitle": string;
+        "readConfirmText": string;
+    };
    "_group": {
        "leader": string;
        "banish": string;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -368,7 +368,7 @@ watch: "ウォッチ"
 unwatch: "ウォッチ解除"
 accept: "許可"
 reject: "拒否"
-normal: "正常"
+normal: "通常"
 instanceName: "サーバー名"
 instanceDescription: "サーバーの紹介"
 maintainerName: "管理者の名前"
@ -1157,11 +1157,27 @@ expired: "期限切れ"
 doYouAgree: "同意しますか？"
 beSureToReadThisAsItIsImportant: "重要ですので必ずお読みください。"
 iHaveReadXCarefullyAndAgree: "「{x}」の内容をよく読み、同意します。"
+dialog: "ダイアログ"
+icon: "アイコン"
+forYou: "あなたへ"
+currentAnnouncements: "現在のお知らせ"
+pastAnnouncements: "過去のお知らせ"
+youHaveUnreadAnnouncements: "未読のお知らせがあります。"
 additionalPermissionsForFlash: "Playへの追加許可"
 thisFlashRequiresTheFollowingPermissions: "このPlayは以下の権限を要求しています"
 doYouWantToAllowThisPlayToAccessYourAccount: "このPlayによるアカウントへのアクセスを許可しますか？"
 translateProfile: "プロフィールを翻訳する"

+_announcement:
+  forExistingUsers: "既存ユーザーのみ"
+  forExistingUsersDescription: "有効にすると、このお知らせ作成時点で存在するユーザーにのみお知らせが表示されます。無効にすると、このお知らせ作成後にアカウントを作成したユーザーにもお知らせが表示されます。"
+  needConfirmationToRead: "既読にするのに確認が必要"
+  needConfirmationToReadDescription: "有効にすると、このお知らせを既読にする際に確認ダイアログが表示されます。また、一括既読操作の対象になりません。"
+  end: "お知らせを終了"
+  tooManyActiveAnnouncementDescription: "アクティブなお知らせが多いため、UXが低下する可能性があります。終了したお知らせはアーカイブすることを検討してください。"
+  readConfirmTitle: "既読にしますか？"
+  readConfirmText: "「{title}」の内容を読み、既読にします。"
+
 _group:
  leader: "グループオーナー"
  banish: "追放"
--- a/packages/backend/migration/1690782653311-SensitiveChannel.js
+++ b/packages/backend/migration/1690782653311-SensitiveChannel.js
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 */

--- a/packages/backend/migration/1691649257651-refine-announcement.js
+++ b/packages/backend/migration/1691649257651-refine-announcement.js
@ -0,0 +1,27 @@
+export class RefineAnnouncement1691649257651 {
+    name = 'RefineAnnouncement1691649257651'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "announcement" ADD "display" character varying(256) NOT NULL DEFAULT 'normal'`);
+        await queryRunner.query(`ALTER TABLE "announcement" ADD "needConfirmationToRead" boolean NOT NULL DEFAULT false`);
+        await queryRunner.query(`ALTER TABLE "announcement" ADD "isActive" boolean NOT NULL DEFAULT true`);
+        await queryRunner.query(`ALTER TABLE "announcement" ADD "forExistingUsers" boolean NOT NULL DEFAULT false`);
+        await queryRunner.query(`ALTER TABLE "announcement" ADD "userId" character varying(32)`);
+        await queryRunner.query(`CREATE INDEX "IDX_bc1afcc8ef7e9400cdc3c0a87e" ON "announcement" ("isActive") `);
+        await queryRunner.query(`CREATE INDEX "IDX_da795d3a83187e8832005ba19d" ON "announcement" ("forExistingUsers") `);
+        await queryRunner.query(`CREATE INDEX "IDX_fd25dfe3da37df1715f11ba6ec" ON "announcement" ("userId") `);
+        await queryRunner.query(`ALTER TABLE "announcement" ADD CONSTRAINT "FK_fd25dfe3da37df1715f11ba6ec8" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "announcement" DROP CONSTRAINT "FK_fd25dfe3da37df1715f11ba6ec8"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_fd25dfe3da37df1715f11ba6ec"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_da795d3a83187e8832005ba19d"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_bc1afcc8ef7e9400cdc3c0a87e"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "userId"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "forExistingUsers"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "isActive"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "needConfirmationToRead"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "display"`);
+    }
+}
--- a/packages/backend/migration/1691657412740-refine-announcement-2.js
+++ b/packages/backend/migration/1691657412740-refine-announcement-2.js
@ -0,0 +1,11 @@
+export class RefineAnnouncement21691657412740 {
+    name = 'RefineAnnouncement21691657412740'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "announcement" ADD "icon" character varying(256) NOT NULL DEFAULT 'info'`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "icon"`);
+    }
+}
--- a/packages/backend/src/core/AnnouncementService.ts
+++ b/packages/backend/src/core/AnnouncementService.ts
@ -0,0 +1,135 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { Brackets } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import type { User } from '@/models/entities/User.js';
+import type { AnnouncementReadsRepository, AnnouncementsRepository, Announcement, AnnouncementRead } from '@/models/index.js';
+import { bindThis } from '@/decorators.js';
+import { Packed } from '@/misc/json-schema.js';
+import { IdService } from '@/core/IdService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+
+@Injectable()
+export class AnnouncementService {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
+
+		@Inject(DI.announcementReadsRepository)
+		private announcementReadsRepository: AnnouncementReadsRepository,
+
+		private idService: IdService,
+		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({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			updatedAt: null,
+			title: values.title,
+			text: values.text,
+			imageUrl: values.imageUrl,
+			icon: values.icon,
+			display: values.display,
+			forExistingUsers: values.forExistingUsers,
+			needConfirmationToRead: values.needConfirmationToRead,
+			userId: values.userId,
+		}).then(x => this.announcementsRepository.findOneByOrFail(x.identifiers[0]));
+
+		const packed = (await this.packMany([announcement]))[0];
+
+		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 read(user: User, announcementId: Announcement['id']): Promise<void> {
+		try {
+			await this.announcementReadsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				announcementId: announcementId,
+				userId: user.id,
+			});
+		} catch (e) {
+			return;
+		}
+
+		if ((await this.getUnreadAnnouncements(user)).length === 0) {
+			this.globalEventService.publishMainStream(user.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),
+		}));
+	}
+}
--- a/packages/backend/src/core/CoreModule.ts
+++ b/packages/backend/src/core/CoreModule.ts
@ -7,6 +7,7 @@ import { Module } from '@nestjs/common';
 import { AccountMoveService } from './AccountMoveService.js';
 import { AccountUpdateService } from './AccountUpdateService.js';
 import { AiService } from './AiService.js';
+import { AnnouncementService } from './AnnouncementService.js';
 import { AntennaService } from './AntennaService.js';
 import { AppLockService } from './AppLockService.js';
 import { AchievementService } from './AchievementService.js';
@ -135,6 +136,7 @@ const $LoggerService: Provider = { provide: 'LoggerService', useExisting: Logger
 const $AccountMoveService: Provider = { provide: 'AccountMoveService', useExisting: AccountMoveService };
 const $AccountUpdateService: Provider = { provide: 'AccountUpdateService', useExisting: AccountUpdateService };
 const $AiService: Provider = { provide: 'AiService', useExisting: AiService };
+const $AnnouncementService: Provider = { provide: 'AnnouncementService', useExisting: AnnouncementService };
 const $AntennaService: Provider = { provide: 'AntennaService', useExisting: AntennaService };
 const $AppLockService: Provider = { provide: 'AppLockService', useExisting: AppLockService };
 const $AchievementService: Provider = { provide: 'AchievementService', useExisting: AchievementService };
@ -267,6 +269,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		AccountMoveService,
 		AccountUpdateService,
 		AiService,
+		AnnouncementService,
 		AntennaService,
 		AppLockService,
 		AchievementService,
@ -392,6 +395,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		$AccountMoveService,
 		$AccountUpdateService,
 		$AiService,
+		$AnnouncementService,
 		$AntennaService,
 		$AppLockService,
 		$AchievementService,
@ -518,6 +522,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		AccountMoveService,
 		AccountUpdateService,
 		AiService,
+		AnnouncementService,
 		AntennaService,
 		AppLockService,
 		AchievementService,
@ -642,6 +647,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		$AccountMoveService,
 		$AccountUpdateService,
 		$AiService,
+		$AnnouncementService,
 		$AntennaService,
 		$AppLockService,
 		$AchievementService,
--- a/packages/backend/src/core/entities/UserEntityService.ts
+++ b/packages/backend/src/core/entities/UserEntityService.ts
@ -16,13 +16,13 @@ import { awaitAll } from '@/misc/prelude/await-all.js';
 import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
 import type { LocalUser, PartialLocalUser, PartialRemoteUser, RemoteUser, User } from '@/models/entities/User.js';
 import { birthdaySchema, descriptionSchema, localUsernameSchema, locationSchema, nameSchema, passwordSchema } from '@/models/entities/User.js';
-import type { UsersRepository, UserSecurityKeysRepository, FollowingsRepository, FollowRequestsRepository, BlockingsRepository, MutingsRepository, DriveFilesRepository, NoteUnreadsRepository, UserNotePiningsRepository, UserProfilesRepository, AnnouncementReadsRepository, AnnouncementsRepository,  MessagingMessagesRepository, UserGroupJoiningsRepository, UserProfile, RenoteMutingsRepository, UserMemoRepository } from '@/models/index.js';
+import type { UsersRepository, UserSecurityKeysRepository, FollowingsRepository, FollowRequestsRepository, BlockingsRepository, MutingsRepository, DriveFilesRepository, NoteUnreadsRepository, UserNotePiningsRepository, UserProfilesRepository, AnnouncementReadsRepository, AnnouncementsRepository, MessagingMessagesRepository, UserGroupJoiningsRepository, UserProfile, RenoteMutingsRepository, UserMemoRepository, Announcement } from '@/models/index.js';
 import { bindThis } from '@/decorators.js';
 import { RoleService } from '@/core/RoleService.js';
 import { ApPersonService } from '@/core/activitypub/models/ApPersonService.js';
 import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
 import type { OnModuleInit } from '@nestjs/common';
-import type { AntennaService } from '../AntennaService.js';
+import type { AnnouncementService } from '../AnnouncementService.js';
 import type { CustomEmojiService } from '../CustomEmojiService.js';
 import type { NoteEntityService } from './NoteEntityService.js';
 import type { DriveFileEntityService } from './DriveFileEntityService.js';
@ -58,7 +58,7 @@ export class UserEntityService implements OnModuleInit {
 	private driveFileEntityService: DriveFileEntityService;
 	private pageEntityService: PageEntityService;
 	private customEmojiService: CustomEmojiService;
-	private antennaService: AntennaService;
+	private announcementService: AnnouncementService;
 	private roleService: RoleService;
 	private federatedInstanceService: FederatedInstanceService;

@ -104,15 +104,15 @@ export class UserEntityService implements OnModuleInit {
 		@Inject(DI.userProfilesRepository)
 		private userProfilesRepository: UserProfilesRepository,

-		@Inject(DI.announcementReadsRepository)
-		private announcementReadsRepository: AnnouncementReadsRepository,
-
 		@Inject(DI.messagingMessagesRepository)
 		private messagingMessagesRepository: MessagingMessagesRepository,

 		@Inject(DI.userGroupJoiningsRepository)
 		private userGroupJoiningsRepository: UserGroupJoiningsRepository,

+		@Inject(DI.announcementReadsRepository)
+		private announcementReadsRepository: AnnouncementReadsRepository,
+
 		@Inject(DI.announcementsRepository)
 		private announcementsRepository: AnnouncementsRepository,

@ -134,7 +134,7 @@ export class UserEntityService implements OnModuleInit {
 		this.driveFileEntityService = this.moduleRef.get('DriveFileEntityService');
 		this.pageEntityService = this.moduleRef.get('PageEntityService');
 		this.customEmojiService = this.moduleRef.get('CustomEmojiService');
-		this.antennaService = this.moduleRef.get('AntennaService');
+		this.announcementService = this.moduleRef.get('AnnouncementService');
 		this.roleService = this.moduleRef.get('RoleService');
 		this.federatedInstanceService = this.moduleRef.get('FederatedInstanceService');
 	}
@ -237,26 +237,13 @@ export class UserEntityService implements OnModuleInit {
 					...(mute.length > 0 ? { userId: Not(In(mute.map(x => x.muteeId))) } : {}),
 				},
 				take: 1,
-			}).then(count => count > 0),
+			}).then((count: number) => count > 0),
 			groupQs,
 		]);

 		return withUser || withGroups.some(x => x);
 	}

-	@bindThis
-	public async getHasUnreadAnnouncement(userId: User['id']): Promise<boolean> {
-		const reads = await this.announcementReadsRepository.findBy({
-			userId: userId,
-		});
-
-		const count = await this.announcementsRepository.countBy(reads.length > 0 ? {
-			id: Not(In(reads.map(read => read.announcementId))),
-		} : {});
-
-		return count > 0;
-	}
-
 	@bindThis
 	public async getHasUnreadAntenna(userId: User['id']): Promise<boolean> {
 		/*
@ -383,6 +370,7 @@ export class UserEntityService implements OnModuleInit {

 		const isModerator = isMe && opts.detail ? this.roleService.isModerator(user) : null;
 		const isAdmin = isMe && opts.detail ? this.roleService.isAdministrator(user) : null;
+		const unreadAnnouncements = isMe && opts.detail ? await this.announcementService.getUnreadAnnouncements(user) : null;

 		const falsy = opts.detail ? false : undefined;

@ -492,7 +480,8 @@ export class UserEntityService implements OnModuleInit {
 					where: { userId: user.id, isMentioned: true },
 					take: 1,
 				}).then(count => count > 0),
-				hasUnreadAnnouncement: this.getHasUnreadAnnouncement(user.id),
+				hasUnreadAnnouncement: unreadAnnouncements!.length > 0,
+				unreadAnnouncements,
 				hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
 				hasUnreadChannel: false, // 後方互換性のため
 				hasUnreadMessagingMessage: this.getHasUnreadMessagingMessage(user.id),
--- a/packages/backend/src/misc/correct-filename.ts
+++ b/packages/backend/src/misc/correct-filename.ts
@ -43,6 +43,8 @@ export function correctFilename(filename: string, ext: string | null) {
 		// jpeg, tiffを同一視
 		dotExt === '.jpg' && filenameExt === '.jpeg' ||
 		dotExt === '.tif' && filenameExt === '.tiff' ||
+		// dllもexeもportable executableなので判定が正しく行われない
+		dotExt === '.exe' && filenameExt === '.dll' ||

 		// 圧縮形式っぽければ下手に拡張子を変えない
 		// https://github.com/misskey-dev/misskey/issues/11482
--- a/packages/backend/src/misc/json-schema.ts
+++ b/packages/backend/src/misc/json-schema.ts
@ -37,6 +37,7 @@ import { packedQueueCountSchema } from '@/models/json-schema/queue.js';
 import { packedGalleryPostSchema } from '@/models/json-schema/gallery-post.js';
 import { packedEmojiDetailedSchema, packedEmojiSimpleSchema } from '@/models/json-schema/emoji.js';
 import { packedFlashSchema } from '@/models/json-schema/flash.js';
+import { packedAnnouncementSchema } from '@/models/json-schema/announcement.js';

 export const refs = {
 	UserLite: packedUserLiteSchema,
@ -49,6 +50,7 @@ export const refs = {

 	UserList: packedUserListSchema,
 	UserGroup: packedUserGroupSchema,
+	Announcement: packedAnnouncementSchema,
 	App: packedAppSchema,
 	MessagingMessage: packedMessagingMessageSchema,
 	Note: packedNoteSchema,
--- a/packages/backend/src/models/entities/Announcement.ts
+++ b/packages/backend/src/models/entities/Announcement.ts
@ -3,8 +3,9 @@
 * SPDX-License-Identifier: AGPL-3.0-only
 */

-import { Entity, Index, Column, PrimaryColumn } from 'typeorm';
+import { Entity, Index, Column, PrimaryColumn, ManyToOne, JoinColumn } from 'typeorm';
 import { id } from '../id.js';
+import { User } from './User.js';

@Entity()
 export class Announcement {
@ -38,6 +39,52 @@ export class Announcement {
 	})
 	public imageUrl: string | null;

+	// info, warning, error, success
+	@Column('varchar', {
+		length: 256, nullable: false,
+		default: 'info',
+	})
+	public icon: string;
+
+	// normal ... お知らせページ掲載
+	// banner ... お知らせページ掲載 + バナー表示
+	// dialog ... お知らせページ掲載 + ダイアログ表示
+	@Column('varchar', {
+		length: 256, nullable: false,
+		default: 'normal',
+	})
+	public display: string;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public needConfirmationToRead: boolean;
+
+	@Index()
+	@Column('boolean', {
+		default: true,
+	})
+	public isActive: boolean;
+
+	@Index()
+	@Column('boolean', {
+		default: false,
+	})
+	public forExistingUsers: boolean;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public userId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
 	constructor(data: Partial<Announcement>) {
 		if (data == null) return;

--- a/packages/backend/src/models/json-schema/announcement.ts
+++ b/packages/backend/src/models/json-schema/announcement.ts
@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export const packedAnnouncementSchema = {
+	type: 'object',
+	properties: {
+		id: {
+			type: 'string',
+			optional: false, nullable: false,
+			format: 'id',
+			example: 'xxxxxxxxxx',
+		},
+		createdAt: {
+			type: 'string',
+			optional: false, nullable: false,
+			format: 'date-time',
+		},
+		updatedAt: {
+			type: 'string',
+			optional: false, nullable: true,
+			format: 'date-time',
+		},
+		text: {
+			type: 'string',
+			optional: false, nullable: false,
+		},
+		title: {
+			type: 'string',
+			optional: false, nullable: false,
+		},
+		imageUrl: {
+			type: 'string',
+			optional: false, nullable: true,
+		},
+		icon: {
+			type: 'string',
+			optional: false, nullable: false,
+		},
+		display: {
+			type: 'string',
+			optional: false, nullable: false,
+		},
+		forYou: {
+			type: 'boolean',
+			optional: false, nullable: false,
+		},
+		needConfirmationToRead: {
+			type: 'boolean',
+			optional: false, nullable: false,
+		},
+		isRead: {
+			type: 'boolean',
+			optional: true, nullable: false,
+		},
+	},
+} as const;
--- a/packages/backend/src/server/api/endpoints/admin/announcements/create.ts
+++ b/packages/backend/src/server/api/endpoints/admin/announcements/create.ts
@ -3,11 +3,9 @@
 * SPDX-License-Identifier: AGPL-3.0-only
 */

-import { Inject, Injectable } from '@nestjs/common';
+import { Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { AnnouncementsRepository } from '@/models/index.js';
-import { IdService } from '@/core/IdService.js';
-import { DI } from '@/di-symbols.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';

 export const meta = {
 	tags: ['admin'],
@ -57,6 +55,11 @@ export const paramDef = {
 		title: { type: 'string', minLength: 1 },
 		text: { type: 'string', minLength: 1 },
 		imageUrl: { type: 'string', nullable: true, minLength: 1 },
+		icon: { type: 'string', enum: ['info', 'warning', 'error', 'success'], default: 'info' },
+		display: { type: 'string', enum: ['normal', 'banner', 'dialog'], default: 'normal' },
+		forExistingUsers: { type: 'boolean', default: false },
+		needConfirmationToRead: { type: 'boolean', default: false },
+		userId: { type: 'string', format: 'misskey:id', nullable: true, default: null },
 	},
 	required: ['title', 'text', 'imageUrl'],
 } as const;
@ -65,22 +68,23 @@ export const paramDef = {
@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> {
 	constructor(
-		@Inject(DI.announcementsRepository)
-		private announcementsRepository: AnnouncementsRepository,
-
-		private idService: IdService,
+		private announcementService: AnnouncementService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const announcement = await this.announcementsRepository.insert({
-				id: this.idService.genId(),
+			const { raw, packed } = await this.announcementService.create({
 				createdAt: new Date(),
 				updatedAt: null,
 				title: ps.title,
 				text: ps.text,
 				imageUrl: ps.imageUrl,
-			}).then(x => this.announcementsRepository.findOneByOrFail(x.identifiers[0]));
+				icon: ps.icon,
+				display: ps.display,
+				forExistingUsers: ps.forExistingUsers,
+				needConfirmationToRead: ps.needConfirmationToRead,
+				userId: ps.userId,
+			});

-			return Object.assign({}, announcement, { createdAt: announcement.createdAt.toISOString(), updatedAt: null });
+			return packed;
 		});
 	}
 }
--- a/packages/backend/src/server/api/endpoints/admin/announcements/list.ts
+++ b/packages/backend/src/server/api/endpoints/admin/announcements/list.ts
@ -66,6 +66,7 @@ export const paramDef = {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
 		sinceId: { type: 'string', format: 'misskey:id' },
 		untilId: { type: 'string', format: 'misskey:id' },
+		userId: { type: 'string', format: 'misskey:id', nullable: true },
 	},
 	required: [],
 } as const;
@ -84,6 +85,11 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	) {
 		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();

@ -102,6 +108,12 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				title: announcement.title,
 				text: announcement.text,
 				imageUrl: announcement.imageUrl,
+				icon: announcement.icon,
+				display: announcement.display,
+				isActive: announcement.isActive,
+				forExistingUsers: announcement.forExistingUsers,
+				needConfirmationToRead: announcement.needConfirmationToRead,
+				userId: announcement.userId,
 				reads: reads.get(announcement)!,
 			}));
 		});
--- a/packages/backend/src/server/api/endpoints/admin/announcements/update.ts
+++ b/packages/backend/src/server/api/endpoints/admin/announcements/update.ts
@ -31,8 +31,13 @@ export const paramDef = {
 		title: { type: 'string', minLength: 1 },
 		text: { type: 'string', minLength: 1 },
 		imageUrl: { type: 'string', nullable: true, minLength: 0 },
+		icon: { type: 'string', enum: ['info', 'warning', 'error', 'success'] },
+		display: { type: 'string', enum: ['normal', 'banner', 'dialog'] },
+		forExistingUsers: { type: 'boolean' },
+		needConfirmationToRead: { type: 'boolean' },
+		isActive: { type: 'boolean' },
 	},
-	required: ['id', 'title', 'text', 'imageUrl'],
+	required: ['id'],
 } as const;

 // eslint-disable-next-line import/no-default-export
@ -53,6 +58,11 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				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,
 			});
 		});
 	}
--- a/packages/backend/src/server/api/endpoints/announcements.ts
+++ b/packages/backend/src/server/api/endpoints/announcements.ts
@ -4,8 +4,10 @@
 */

 import { Inject, Injectable } from '@nestjs/common';
+import { Brackets } from 'typeorm';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { QueryService } from '@/core/QueryService.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';
 import { DI } from '@/di-symbols.js';
 import type { AnnouncementReadsRepository, AnnouncementsRepository } from '@/models/index.js';

@ -20,40 +22,7 @@ export const meta = {
 		items: {
 			type: 'object',
 			optional: false, nullable: false,
-			properties: {
-				id: {
-					type: 'string',
-					optional: false, nullable: false,
-					format: 'id',
-					example: 'xxxxxxxxxx',
-				},
-				createdAt: {
-					type: 'string',
-					optional: false, nullable: false,
-					format: 'date-time',
-				},
-				updatedAt: {
-					type: 'string',
-					optional: false, nullable: true,
-					format: 'date-time',
-				},
-				text: {
-					type: 'string',
-					optional: false, nullable: false,
-				},
-				title: {
-					type: 'string',
-					optional: false, nullable: false,
-				},
-				imageUrl: {
-					type: 'string',
-					optional: false, nullable: true,
-				},
-				isRead: {
-					type: 'boolean',
-					optional: true, nullable: false,
-				},
-			},
+			ref: 'Announcement',
 		},
 	},
 } as const;
@ -62,9 +31,9 @@ export const paramDef = {
 	type: 'object',
 	properties: {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
-		withUnreads: { type: 'boolean', default: false },
 		sinceId: { type: 'string', format: 'misskey:id' },
 		untilId: { type: 'string', format: 'misskey:id' },
+		isActive: { type: 'boolean', default: true },
 	},
 	required: [],
 } as const;
@ -80,27 +49,19 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		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);
+			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();

-			if (me) {
-				const reads = (await this.announcementReadsRepository.findBy({
-					userId: me.id,
-				})).map(x => x.announcementId);
-
-				for (const announcement of announcements) {
-					(announcement as any).isRead = reads.includes(announcement.id);
-				}
-			}
-
-			return (ps.withUnreads ? announcements.filter((a: any) => !a.isRead) : announcements).map((a) => ({
-				...a,
-				createdAt: a.createdAt.toISOString(),
-				updatedAt: a.updatedAt?.toISOString() ?? null,
-			}));
+			return this.announcementService.packMany(announcements, me);
 		});
 	}
 }
--- a/packages/backend/src/server/api/endpoints/i/read-announcement.ts
+++ b/packages/backend/src/server/api/endpoints/i/read-announcement.ts
@ -3,14 +3,9 @@
 * SPDX-License-Identifier: AGPL-3.0-only
 */

-import { Inject, Injectable } from '@nestjs/common';
+import { Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import { IdService } from '@/core/IdService.js';
-import type { AnnouncementReadsRepository, AnnouncementsRepository } from '@/models/index.js';
-import { GlobalEventService } from '@/core/GlobalEventService.js';
-import { UserEntityService } from '@/core/entities/UserEntityService.js';
-import { DI } from '@/di-symbols.js';
-import { ApiError } from '../../error.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';

 export const meta = {
 	tags: ['account'],
@ -20,11 +15,6 @@ export const meta = {
 	kind: 'write:account',

 	errors: {
-		noSuchAnnouncement: {
-			message: 'No such announcement.',
-			code: 'NO_SUCH_ANNOUNCEMENT',
-			id: '184663db-df88-4bc2-8b52-fb85f0681939',
-		},
 	},
 } as const;

@ -40,47 +30,10 @@ 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 userEntityService: UserEntityService,
-		private idService: IdService,
-		private globalEventService: GlobalEventService,
+		private announcementService: AnnouncementService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			// Check if announcement exists
-			const announcementExist = await this.announcementsRepository.exist({ where: { id: ps.announcementId } });
-
-			if (!announcementExist) {
-				throw new ApiError(meta.errors.noSuchAnnouncement);
-			}
-
-			// Check if already read
-			const alreadyRead = await this.announcementReadsRepository.exist({
-				where: {
-					announcementId: ps.announcementId,
-					userId: me.id,
-				},
-			});
-
-			if (alreadyRead) {
-				return;
-			}
-
-			// Create read
-			await this.announcementReadsRepository.insert({
-				id: this.idService.genId(),
-				createdAt: new Date(),
-				announcementId: ps.announcementId,
-				userId: me.id,
-			});
-
-			if (!await this.userEntityService.getHasUnreadAnnouncement(me.id)) {
-				this.globalEventService.publishMainStream(me.id, 'readAllAnnouncements');
-			}
+			await this.announcementService.read(me, ps.announcementId);
 		});
 	}
 }
--- a/packages/backend/src/server/api/stream/types.ts
+++ b/packages/backend/src/server/api/stream/types.ts
@ -66,6 +66,9 @@ export interface BroadcastTypes {
 			[other: string]: any;
 		}[];
 	};
+	announcementCreated: {
+		announcement: Packed<'Announcement'>;
+	};
 }

 export interface MainStreamTypes {
@ -110,6 +113,9 @@ export interface MainStreamTypes {
 	driveFileCreated: Packed<'DriveFile'>;
 	readAntenna: Antenna;
 	receiveFollowRequest: Packed<'User'>;
+	announcementCreated: {
+		announcement: Packed<'Announcement'>;
+	};
 }

 export interface DriveStreamTypes {
--- a/packages/backend/test/e2e/users.ts
+++ b/packages/backend/test/e2e/users.ts
@ -161,6 +161,7 @@ describe('ユーザー', () => {
 			hasUnreadChannel: user.hasUnreadChannel,
 			hasUnreadNotification: user.hasUnreadNotification,
 			hasPendingReceivedFollowRequest: user.hasPendingReceivedFollowRequest,
+			unreadAnnouncements: user.unreadAnnouncements,
 			mutedWords: user.mutedWords,
 			mutedInstances: user.mutedInstances,
 			mutingNotificationTypes: user.mutingNotificationTypes,
@ -407,6 +408,7 @@ describe('ユーザー', () => {
 		assert.strictEqual(response.hasUnreadChannel, false);
 		assert.strictEqual(response.hasUnreadNotification, false);
 		assert.strictEqual(response.hasPendingReceivedFollowRequest, false);
+		assert.deepStrictEqual(response.unreadAnnouncements, []);
 		assert.deepStrictEqual(response.mutedWords, []);
 		assert.deepStrictEqual(response.mutedInstances, []);
 		assert.deepStrictEqual(response.mutingNotificationTypes, []);
--- a/packages/backend/test/unit/AnnouncementService.ts
+++ b/packages/backend/test/unit/AnnouncementService.ts
@ -0,0 +1,194 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+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 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 type { TestingModule } from '@nestjs/testing';
+import type { MockFunctionMetadata } from 'jest-mock';
+
+const moduleMocker = new ModuleMocker(global);
+
+describe('AnnouncementService', () => {
+	let app: TestingModule;
+	let announcementService: AnnouncementService;
+	let usersRepository: UsersRepository;
+	let announcementsRepository: AnnouncementsRepository;
+	let announcementReadsRepository: AnnouncementReadsRepository;
+	let globalEventService: jest.Mocked<GlobalEventService>;
+
+	function createUser(data: Partial<User> = {}) {
+		const un = secureRndstr(16);
+		return usersRepository.insert({
+			id: genAid(new Date()),
+			createdAt: new Date(),
+			username: un,
+			usernameLower: un,
+			...data,
+		})
+			.then(x => usersRepository.findOneByOrFail(x.identifiers[0]));
+	}
+
+	function createAnnouncement(data: Partial<Announcement> = {}) {
+		return announcementsRepository.insert({
+			id: genAid(new Date()),
+			createdAt: new Date(),
+			updatedAt: null,
+			title: 'Title',
+			text: 'Text',
+			...data,
+		})
+			.then(x => announcementsRepository.findOneByOrFail(x.identifiers[0]));
+	}
+
+	beforeEach(async () => {
+		app = await Test.createTestingModule({
+			imports: [
+				GlobalModule,
+			],
+			providers: [
+				AnnouncementService,
+				CacheService,
+				IdService,
+			],
+		})
+			.useMocker((token) => {
+				if (token === GlobalEventService) {
+					return {
+						publishMainStream: jest.fn(),
+						publishBroadcastStream: jest.fn(),
+					};
+				}
+				if (typeof token === 'function') {
+					const mockMetadata = moduleMocker.getMetadata(token) as MockFunctionMetadata<any, any>;
+					const Mock = moduleMocker.generateFromMetadata(mockMetadata);
+					return new Mock();
+				}
+			})
+			.compile();
+
+		app.enableShutdownHooks();
+
+		announcementService = app.get<AnnouncementService>(AnnouncementService);
+		usersRepository = app.get<UsersRepository>(DI.usersRepository);
+		announcementsRepository = app.get<AnnouncementsRepository>(DI.announcementsRepository);
+		announcementReadsRepository = app.get<AnnouncementReadsRepository>(DI.announcementReadsRepository);
+		globalEventService = app.get<GlobalEventService>(GlobalEventService) as jest.Mocked<GlobalEventService>;
+	});
+
+	afterEach(async () => {
+		await Promise.all([
+			app.get(DI.metasRepository).delete({}),
+			usersRepository.delete({}),
+			announcementsRepository.delete({}),
+			announcementReadsRepository.delete({}),
+		]);
+
+		await app.close();
+	});
+
+	describe('getUnreadAnnouncements', () => {
+		test('通常', async () => {
+			const user = await createUser();
+			const announcement = await createAnnouncement({
+				title: '1',
+			});
+
+			const result = await announcementService.getUnreadAnnouncements(user);
+
+			expect(result.length).toBe(1);
+			expect(result[0].title).toBe(announcement.title);
+		});
+
+		test('isActiveがfalseは除外', async () => {
+			const user = await createUser();
+			await createAnnouncement({
+				isActive: false,
+			});
+
+			const result = await announcementService.getUnreadAnnouncements(user);
+
+			expect(result.length).toBe(0);
+		});
+
+		test('forExistingUsers', async () => {
+			const user = await createUser();
+			const [announcementAfter, announcementBefore, announcementBefore2] = await Promise.all([
+				createAnnouncement({
+					title: 'after',
+					createdAt: new Date(),
+					forExistingUsers: true,
+				}),
+				createAnnouncement({
+					title: 'before',
+					createdAt: new Date(Date.now() - 1000),
+					forExistingUsers: true,
+				}),
+				createAnnouncement({
+					title: 'before2',
+					createdAt: new Date(Date.now() - 1000),
+					forExistingUsers: false,
+				}),
+			]);
+
+			const result = await announcementService.getUnreadAnnouncements(user);
+
+			expect(result.length).toBe(2);
+			expect(result.some(a => a.title === announcementAfter.title)).toBe(true);
+			expect(result.some(a => a.title === announcementBefore.title)).toBe(false);
+			expect(result.some(a => a.title === announcementBefore2.title)).toBe(true);
+		});
+	});
+
+	describe('create', () => {
+		test('通常', async () => {
+			const result = await announcementService.create({
+				title: 'Title',
+				text: 'Text',
+			});
+
+			expect(result.raw.title).toBe('Title');
+			expect(result.packed.title).toBe('Title');
+
+			expect(globalEventService.publishBroadcastStream).toHaveBeenCalled();
+			expect(globalEventService.publishBroadcastStream.mock.lastCall![0]).toBe('announcementCreated');
+			expect((globalEventService.publishBroadcastStream.mock.lastCall![1] as any).announcement).toBe(result.packed);
+		});
+
+		test('ユーザー指定', async () => {
+			const user = await createUser();
+			const result = await announcementService.create({
+				title: 'Title',
+				text: 'Text',
+				userId: user.id,
+			});
+
+			expect(result.raw.title).toBe('Title');
+			expect(result.packed.title).toBe('Title');
+
+			expect(globalEventService.publishBroadcastStream).not.toHaveBeenCalled();
+			expect(globalEventService.publishMainStream).toHaveBeenCalled();
+			expect(globalEventService.publishMainStream.mock.lastCall![0]).toBe(user.id);
+			expect(globalEventService.publishMainStream.mock.lastCall![1]).toBe('announcementCreated');
+			expect((globalEventService.publishMainStream.mock.lastCall![2] as any).announcement).toBe(result.packed);
+		});
+	});
+
+	describe('read', () => {
+		// TODO
+	});
+});
+
--- a/packages/backend/test/unit/misc/correct-filename.ts
+++ b/packages/backend/test/unit/misc/correct-filename.ts
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 */

--- a/packages/cherrypick-js/etc/cherrypick-js.api.md
+++ b/packages/cherrypick-js/etc/cherrypick-js.api.md
@ -30,6 +30,10 @@ type Announcement = {
    text: string;
    title: string;
    imageUrl: string | null;
+    display: 'normal' | 'banner' | 'dialog';
+    icon: 'info' | 'warning' | 'error' | 'success';
+    needConfirmationToRead: boolean;
+    forYou: boolean;
    isRead?: boolean;
 };

@ -2509,6 +2513,7 @@ type MeDetailed = UserDetailed & {
    noCrawle: boolean;
    receiveAnnouncementEmail: boolean;
    usePasswordLessLogin: boolean;
+    unreadAnnouncements: Announcement[];
    [other: string]: any;
 };

--- a/packages/cherrypick-js/src/entities.ts
+++ b/packages/cherrypick-js/src/entities.ts
@ -104,6 +104,7 @@ export type MeDetailed = UserDetailed & {
 	noCrawle: boolean;
 	receiveAnnouncementEmail: boolean;
 	usePasswordLessLogin: boolean;
+	unreadAnnouncements: Announcement[];
 	[other: string]: any;
 };

@ -421,6 +422,10 @@ export type Announcement = {
 	text: string;
 	title: string;
 	imageUrl: string | null;
+	display: 'normal' | 'banner' | 'dialog';
+	icon: 'info' | 'warning' | 'error' | 'success';
+	needConfirmationToRead: boolean;
+	forYou: boolean;
 	isRead?: boolean;
 };

--- a/packages/frontend/src/account.ts
+++ b/packages/frontend/src/account.ts
@ -134,7 +134,6 @@ export async function removeAccount(idOrToken: Account['id']) {

 function fetchAccount(token: string, id?: string, forceShowDialog?: boolean): Promise<Account> {
 	return new Promise((done, fail) => {
-		// Fetch user
 		window.fetch(`${apiUrl}/i`, {
 			method: 'POST',
 			body: JSON.stringify({
@ -146,8 +145,8 @@ function fetchAccount(token: string, id?: string, forceShowDialog?: boolean): Pr
 		})
 			.then(res => new Promise<Account | { error: Record<string, any> }>((done2, fail2) => {
 				if (res.status >= 500 && res.status < 600) {
-				// サーバーエラー(5xx)の場合をrejectとする
-				// （認証エラーなど4xxはresolve）
+					// サーバーエラー(5xx)の場合をrejectとする
+					// （認証エラーなど4xxはresolve）
 					return fail2(res);
 				}
 				res.json().then(done2, fail2);
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@ -85,6 +85,21 @@ export async function mainBoot() {
 			}
 		});

+		for (const announcement of ($i.unreadAnnouncements ?? []).filter(x => x.display === 'dialog')) {
+			popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
+				announcement,
+			}, {}, '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',
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/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"/>
--- a/packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts
+++ b/packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts
@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import MkAnnouncementDialog from './MkAnnouncementDialog.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAnnouncementDialog,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkAnnouncementDialog v-bind="props" />',
+		};
+	},
+	args: {
+		announcement: {
+			id: '1',
+			title: 'Title',
+			text: 'Text',
+			createdAt: new Date().toISOString(),
+			updatedAt: null,
+			icon: 'info',
+			imageUrl: null,
+			display: 'dialog',
+			needConfirmationToRead: false,
+			forYou: true,
+		},
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkAnnouncementDialog>;
--- a/packages/frontend/src/components/MkAnnouncementDialog.vue
+++ b/packages/frontend/src/components/MkAnnouncementDialog.vue
@ -0,0 +1,104 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')" @click="onBgClick">
+	<div ref="rootEl" :class="$style.root">
+		<div :class="$style.header">
+			<span :class="$style.icon">
+				<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+				<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+				<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>
+		</div>
+		<div :class="$style.text"><Mfm :text="announcement.text"/></div>
+		<MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, shallowRef } from 'vue';
+import * as misskey from 'misskey-js';
+import * as os from '@/os';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import { $i, updateAccount } from '@/account';
+
+const props = withDefaults(defineProps<{
+	announcement: misskey.entities.Announcement;
+}>(), {
+});
+
+const rootEl = shallowRef<HTMLDivElement>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+async function ok() {
+	if (props.announcement.needConfirmationToRead) {
+		const confirm = await os.confirm({
+			type: 'question',
+			title: i18n.ts._announcement.readConfirmTitle,
+			text: i18n.t('_announcement.readConfirmText', { title: props.announcement.title }),
+		});
+		if (confirm.canceled) return;
+	}
+
+	modal.value.close();
+	os.api('i/read-announcement', { announcementId: props.announcement.id });
+	updateAccount({
+		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== props.announcement.id),
+	});
+}
+
+function onBgClick() {
+	rootEl.value.animate([{
+		offset: 0,
+		transform: 'scale(1)',
+	}, {
+		offset: 0.5,
+		transform: 'scale(1.1)',
+	}, {
+		offset: 1,
+		transform: 'scale(1)',
+	}], {
+		duration: 100,
+	});
+}
+
+onMounted(() => {
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.header {
+	font-size: 120%;
+}
+
+.icon {
+	margin-right: 0.5em;
+}
+
+.title {
+	font-weight: bold;
+}
+
+.text {
+	margin: 1em 0;
+}
+</style>
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@ -212,7 +212,6 @@ import { instance } from '@/instance';

 const props = defineProps<{
 	note: misskey.entities.Note;
-	pinned?: boolean;
 }>();

 const inChannel = inject('inChannel', null);
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@ -54,7 +54,6 @@ import MkInstanceTicker from '@/components/MkInstanceTicker.vue';

 const props = defineProps<{
 	note: misskey.entities.Note;
-	pinned?: boolean;
 }>();

 let note = $ref(deepClone(props.note));
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@ -40,7 +40,6 @@ let showEl = $ref(false);

 const props = defineProps<{
 	note: misskey.entities.Note;
-	pinned?: boolean;
 }>();

 const showContent = $ref(false);
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div :class="[$style.root, { [$style.children]: depth > 1 }]">
+<div v-if="!muted" :class="[$style.root, { [$style.children]: depth > 1 }]">
 	<div v-if="!defaultStore.state.hideAvatarsInNote && !hideLine" :class="$style.line"></div>
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@ -30,10 +30,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
 	</div>
 </div>
+<div v-else :class="$style.muted" @click="muted = false">
+	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+		<template #name>
+			<MkA v-user-preview="note.userId" :to="userPage(note.user)">
+				<MkUserName :user="note.user"/>
+			</MkA>
+		</template>
+	</I18n>
+</div>
 </template>

 <script lang="ts" setup>
-import { } from 'vue';
+import { ref } from 'vue';
 import * as misskey from 'cherrypick-js';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
@ -43,6 +52,8 @@ import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import { userPage } from '@/filters/user';
+import { checkWordMute } from '@/scripts/check-word-mute';
 import { defaultStore } from '@/store';

 let hideLine = $ref(false);
@ -57,6 +68,8 @@ const props = withDefaults(defineProps<{
 	depth: 1,
 });

+const muted = ref(checkWordMute(props.note, $i, defaultStore.state.mutedWords));
+
 let showContent = $ref(false);
 let replies: misskey.entities.Note[] = $ref([]);

@ -186,4 +199,12 @@ if (props.detail) {
 		height: 46px;
 	}
 }
+
+.muted {
+	text-align: center;
+	padding: 8px !important;
+	border: 1px solid var(--divider);
+	margin: 8px 8px 0 8px;
+	border-radius: 8px;
+}
 </style>
--- a/packages/frontend/src/components/MkSwitch.button.vue
+++ b/packages/frontend/src/components/MkSwitch.button.vue
@ -1,5 +1,5 @@
 <!--
-SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
 SPDX-License-Identifier: AGPL-3.0-only
 -->

--- a/packages/frontend/src/components/MkSwitch.vue
+++ b/packages/frontend/src/components/MkSwitch.vue
@ -12,10 +12,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:class="$style.input"
 		@keydown.enter="toggle"
 	>
-	<XButton :checked="checked" :disabled="disabled" @toggle="toggle" />
+	<XButton :checked="checked" :disabled="disabled" @toggle="toggle"/>
 	<span :class="$style.body">
 		<!-- TODO: 無名slotの方は廃止 -->
-		<span :class="$style.label" @click="toggle"><slot name="label"></slot><slot></slot></span>
+		<span :class="$style.label">
+			<span @click="toggle">
+				<slot name="label"></slot><slot></slot>
+			</span>
+			<span v-if="helpText" v-tooltip:dialog="helpText" class="_button _help" :class="$style.help"><i class="ti ti-help-circle"></i></span>
+		</span>
 		<p :class="$style.caption"><slot name="caption"></slot></p>
 	</span>
 </div>
@ -28,6 +33,7 @@ import XButton from '@/components/MkSwitch.button.vue';
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
 	disabled?: boolean;
+	helpText?: string;
 }>();

 const emit = defineEmits<{
@ -38,10 +44,6 @@ const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;
 	emit('update:modelValue', !checked.value);
-
-	if (!checked.value) {
-
-	}
 };
 </script>

@ -98,4 +100,10 @@ const toggle = () => {
 		display: none;
 	}
 }
+
+.help {
+	margin-left: 0.5em;
+	font-size: 85%;
+	vertical-align: top;
+}
 </style>
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@ -28,7 +28,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 <template v-else-if="tweetId && tweetExpanded">
 	<div ref="twitter">
-		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
+		<iframe
+			ref="tweet"
+			allow="fullscreen;web-share"
+			sandbox="allow-popups allow-scripts allow-same-origin"
+			scrolling="no"
+			:style="{ position: 'relative', width: '100%', height: `${tweetHeight}px`, border: 0 }"
+			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
+		></iframe>
 	</div>
 	<div :class="$style.action">
 		<MkButton :small="true" inline @click="tweetExpanded = false">
--- a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
+++ b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
@ -0,0 +1,145 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="400"
+	@close="dialog.close()"
+	@closed="$emit('closed')"
+>
+	<template v-if="announcement" #header>:{{ announcement.title }}:</template>
+	<template v-else #header>New announcement</template>
+
+	<div>
+		<MkSpacer :marginMin="20" :marginMax="28">
+			<div class="_gaps_m">
+				<MkInput v-model="title">
+					<template #label>{{ i18n.ts.title }}</template>
+				</MkInput>
+				<MkTextarea v-model="text">
+					<template #label>{{ i18n.ts.text }}</template>
+				</MkTextarea>
+				<MkRadios v-model="icon">
+					<template #label>{{ i18n.ts.icon }}</template>
+					<option value="info"><i class="ti ti-info-circle"></i></option>
+					<option value="warning"><i class="ti ti-alert-triangle" style="color: var(--warn);"></i></option>
+					<option value="error"><i class="ti ti-circle-x" style="color: var(--error);"></i></option>
+					<option value="success"><i class="ti ti-check" style="color: var(--success);"></i></option>
+				</MkRadios>
+				<MkRadios v-model="display">
+					<template #label>{{ i18n.ts.display }}</template>
+					<option value="normal">{{ i18n.ts.normal }}</option>
+					<option value="banner">{{ i18n.ts.banner }}</option>
+					<option value="dialog">{{ i18n.ts.dialog }}</option>
+				</MkRadios>
+				<MkSwitch v-model="needConfirmationToRead">
+					{{ i18n.ts._announcement.needConfirmationToRead }}
+					<template #caption>{{ i18n.ts._announcement.needConfirmationToReadDescription }}</template>
+				</MkSwitch>
+				<MkButton v-if="announcement" danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+			</div>
+		</MkSpacer>
+		<div :class="$style.footer">
+			<MkButton primary rounded style="margin: 0 auto;" @click="done"><i class="ti ti-check"></i> {{ props.announcement ? i18n.ts.update : i18n.ts.create }}</MkButton>
+		</div>
+	</div>
+</MkModalWindow>
+</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 MkRadios from '@/components/MkRadios.vue';
+
+const props = defineProps<{
+	user: misskey.entities.User,
+	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);
+
+const emit = defineEmits<{
+	(ev: 'done', v: { deleted?: boolean; updated?: any; created?: any }): void,
+	(ev: 'closed'): void
+}>();
+
+async function done() {
+	const params = {
+		title: title,
+		text: text,
+		icon: icon,
+		imageUrl: null,
+		display: display,
+		needConfirmationToRead: needConfirmationToRead,
+		userId: props.user.id,
+	};
+
+	if (props.announcement) {
+		await os.apiWithDialog('admin/announcements/update', {
+			id: props.announcement.id,
+			...params,
+		});
+
+		emit('done', {
+			updated: {
+				id: props.announcement.id,
+				...params,
+			},
+		});
+
+		dialog.close();
+	} else {
+		const created = await os.apiWithDialog('admin/announcements/create', params);
+
+		emit('done', {
+			created: created,
+		});
+
+		dialog.close();
+	}
+}
+
+async function del() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: title }),
+	});
+	if (canceled) return;
+
+	os.api('admin/announcements/delete', {
+		id: props.announcement.id,
+	}).then(() => {
+		emit('done', {
+			deleted: true,
+		});
+		dialog.close();
+	});
+}
+</script>
+
+<style lang="scss" module>
+.footer {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	padding: 12px;
+	border-top: solid 0.5px var(--divider);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+}
+</style>
--- a/packages/frontend/src/pages/_error_.vue
+++ b/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>
-			<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
-			<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
+			<div><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></div>
+			<div v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</div>
+			<div v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</div>
 			<template v-else>
-				<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
-				<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
+				<div>{{ i18n.ts.newVersionOfClientAvailable }}</div>
+				<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>
-			<p v-if="error" style="opacity: 0.7;">ERROR: {{ error }}</p>
+			<div><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></div>
+			<div v-if="error" style="opacity: 0.7;">ERROR: {{ error }}</div>
 		</div>
 	</div>
 </Transition>
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/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>
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/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,70 +89,85 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkFolder>
 					</div>
 				</FormSection>
+			-->
+
+				<FormSection>
+					<div class="_gaps">
+						<MkSwitch v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch>
+
+						<div>
+							<MkButton v-if="user.host == null" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
+						</div>
+
+						<MkFolder>
+							<template #icon><i class="ti ti-license"></i></template>
+							<template #label>{{ i18n.ts._role.policies }}</template>
+							<div class="_gaps">
+								<div v-for="policy in Object.keys(info.policies)" :key="policy">
+									{{ policy }} ... {{ info.policies[policy] }}
+								</div>
+							</div>
+						</MkFolder>
+
+						<MkFolder>
+							<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>
+
+						<MkButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
+					</div>
+				</FormSection>
 			</div>

-			<div v-else-if="tab === 'moderation'" class="_gaps_m">
-				<MkSwitch v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch>
+			<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>
-					<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="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
+				<div v-for="role in info.roles" :key="role.id" :class="$style.roleItem">
+					<div :class="$style.roleItemMain">
+						<MkRolePreview :class="$style.role" :role="role" :forModeration="true"/>
+						<button class="_button" :class="$style.roleToggle" @click="toggleRoleItem(role)"><i class="ti ti-chevron-down"></i></button>
+						<button v-if="role.target === 'manual'" class="_button" :class="$style.roleUnassign" @click="unassignRole(role, $event)"><i class="ti ti-x"></i></button>
+						<button v-else class="_button" :class="$style.roleUnassign" disabled><i class="ti ti-ban"></i></button>
+					</div>
+					<div v-if="expandedRoles.includes(role.id)" :class="$style.roleItemSub">
+						<div>Assigned: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id).createdAt" mode="detail"/></div>
+						<div v-if="info.roleAssigns.find(a => a.roleId === role.id).expiresAt">Period: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id).expiresAt).toLocaleString() }}</div>
+						<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+					</div>
 				</div>
+			</div>

-				<MkFolder>
-					<template #icon><i class="ti ti-license"></i></template>
-					<template #label>{{ i18n.ts._role.policies }}</template>
-					<div class="_gaps">
-						<div v-for="policy in Object.keys(info.policies)" :key="policy">
-							{{ policy }} ... {{ info.policies[policy] }}
-						</div>
-					</div>
-				</MkFolder>
+			<div v-else-if="tab === 'announcements'" class="_gaps">
+				<MkButton primary rounded @click="createAnnouncement"><i class="ti ti-plus"></i> {{ i18n.ts.new }}</MkButton>

-				<MkFolder>
-					<template #icon><i class="ti ti-badges"></i></template>
-					<template #label>{{ i18n.ts.roles }}</template>
-					<div class="_gaps">
-						<MkButton v-if="user.host == null && iAmModerator" 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">
-								<MkRolePreview :class="$style.role" :role="role" :forModeration="true"/>
-								<button class="_button" :class="$style.roleToggle" @click="toggleRoleItem(role)"><i class="ti ti-chevron-down"></i></button>
-								<button v-if="role.target === 'manual'" class="_button" :class="$style.roleUnassign" @click="unassignRole(role, $event)"><i class="ti ti-x"></i></button>
-								<button v-else class="_button" :class="$style.roleUnassign" disabled><i class="ti ti-ban"></i></button>
+				<MkPagination :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)">
+								<span style="margin-right: 0.5em;">
+									<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+									<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+									<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>
+								<span v-if="announcement.reads > 0" style="margin-left: auto; opacity: 0.7;">{{ i18n.ts.messageRead }}</span>
 							</div>
-							<div v-if="expandedRoles.includes(role.id)" :class="$style.roleItemSub">
-								<div>Assigned: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id).createdAt" mode="detail"/></div>
-								<div v-if="info.roleAssigns.find(a => a.roleId === role.id).expiresAt">Period: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id).expiresAt).toLocaleString() }}</div>
-								<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
-							</div>
-						</div>
-					</div>
-				</MkFolder>
-
-				<MkFolder>
-					<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>
+				</MkPagination>
+			</div>

-				<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 v-else-if="tab === 'drive'" class="_gaps">
+				<MkFileListForAdmin :pagination="filesPagination" viewMode="grid"/>
 			</div>

 			<div v-else-if="tab === 'chart'" class="_gaps_m">
@ -185,7 +199,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, defineAsyncComponent, watch } from 'vue';
 import * as misskey from 'cherrypick-js';
 import MkChart from '@/components/MkChart.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
@ -205,8 +219,9 @@ 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';

 const props = withDefaults(defineProps<{
 	userId: string;
@ -233,37 +248,36 @@ const filesPagination = {
 		userId: props.userId,
 	})),
 };
+const announcementsPagination = {
+	endpoint: 'admin/announcements/list' as const,
+	limit: 10,
+	params: computed(() => ({
+		userId: props.userId,
+	})),
+};
 let expandedRoles = $ref([]);

 function createFetcher() {
-	if (iAmModerator) {
-		return () => Promise.all([os.api('users/show', {
-			userId: props.userId,
-		}), os.api('admin/show-user', {
-			userId: props.userId,
-		}), iAmAdmin ? os.api('admin/get-user-ips', {
-			userId: props.userId,
-		}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
-			user = _user;
-			info = _info;
-			ips = _ips;
-			moderator = info.isModerator;
-			silenced = info.isSilenced;
-			suspended = info.isSuspended;
-			moderationNote = info.moderationNote;
+	return () => Promise.all([os.api('users/show', {
+		userId: props.userId,
+	}), os.api('admin/show-user', {
+		userId: props.userId,
+	}), iAmAdmin ? os.api('admin/get-user-ips', {
+		userId: props.userId,
+	}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
+		user = _user;
+		info = _info;
+		ips = _ips;
+		moderator = info.isModerator;
+		silenced = info.isSilenced;
+		suspended = info.isSuspended;
+		moderationNote = info.moderationNote;

-			watch($$(moderationNote), async () => {
-				await os.api('admin/update-user-note', { userId: user.id, text: moderationNote });
-				await refreshUser();
-			});
+		watch($$(moderationNote), async () => {
+			await os.api('admin/update-user-note', { userId: user.id, text: moderationNote });
+			await refreshUser();
 		});
-	} else {
-		return () => os.api('users/show', {
-			userId: props.userId,
-		}).then((res) => {
-			user = res;
-		});
-	}
+	});
 }

 function refreshUser() {
@ -406,6 +420,19 @@ function toggleRoleItem(role) {
 	}
 }

+function createAnnouncement() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
+		user,
+	}, {}, 'closed');
+}
+
+function editAnnouncement(announcement) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
+		user,
+		announcement,
+	}, {}, 'closed');
+}
+
 watch(() => props.userId, () => {
 	init = createFetcher();
 }, {
@ -426,11 +453,19 @@ const headerTabs = $computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
 	icon: 'ti ti-info-circle',
-}, iAmModerator ? {
-	key: 'moderation',
-	title: i18n.ts.moderation,
-	icon: 'ti ti-user-exclamation',
-} : null, {
+}, {
+	key: 'roles',
+	title: i18n.ts.roles,
+	icon: 'ti ti-badges',
+}, {
+	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',
@ -438,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>

@ -569,4 +604,11 @@ definePageMetadata(computed(() => ({
 	margin-left: 8px;
 	align-self: center;
 }
+
+.announcementItem {
+	display: flex;
+	padding: 8px 12px;
+	border-radius: 6px;
+	cursor: pointer;
+}
 </style>
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@ -7,9 +7,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900">
-		<div class="_gaps_m">
-			<section v-for="announcement in announcements" class="">
-				<div class="_panel _gaps_m" style="padding: 24px;">
+		<div class="_gaps">
+			<MkInfo v-if="announcements.length > 5" warn>{{ i18n.ts._announcement.tooManyActiveAnnouncementDescription }}</MkInfo>
+
+			<MkFolder v-for="announcement in announcements" :key="announcement.id ?? announcement._id" :defaultOpen="announcement.id == null">
+				<template #label>{{ announcement.title }}</template>
+				<template #icon>
+					<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+					<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+					<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>
+				</template>
+				<template #caption>{{ announcement.text }}</template>
+
+				<div class="_gaps_m">
 					<MkInput v-model="announcement.title">
 						<template #label>{{ i18n.ts.title }}</template>
 					</MkInput>
@ -19,13 +30,33 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInput v-model="announcement.imageUrl">
 						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
+					<MkRadios v-model="announcement.icon">
+						<template #label>{{ i18n.ts.icon }}</template>
+						<option value="info"><i class="ti ti-info-circle"></i></option>
+						<option value="warning"><i class="ti ti-alert-triangle" style="color: var(--warn);"></i></option>
+						<option value="error"><i class="ti ti-circle-x" style="color: var(--error);"></i></option>
+						<option value="success"><i class="ti ti-check" style="color: var(--success);"></i></option>
+					</MkRadios>
+					<MkRadios v-model="announcement.display">
+						<template #label>{{ i18n.ts.display }}</template>
+						<option value="normal">{{ i18n.ts.normal }}</option>
+						<option value="banner">{{ i18n.ts.banner }}</option>
+						<option value="dialog">{{ i18n.ts.dialog }}</option>
+					</MkRadios>
+					<MkSwitch v-model="announcement.forExistingUsers" :helpText="i18n.ts._announcement.forExistingUsersDescription">
+						{{ i18n.ts._announcement.forExistingUsers }}
+					</MkSwitch>
+					<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>
 					<div class="buttons _buttons">
 						<MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton class="button" inline danger @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</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" class="button" inline danger @click="del(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 					</div>
 				</div>
-			</section>
+			</MkFolder>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@ -37,9 +68,13 @@ 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 MkFolder from '@/components/MkFolder.vue';

 let announcements: any[] = $ref([]);

@ -49,17 +84,22 @@ os.api('admin/announcements/list').then(announcementResponse => {

 function add() {
 	announcements.unshift({
+		_id: Math.random().toString(36),
 		id: null,
-		title: '',
+		title: 'New announcement',
 		text: '',
 		imageUrl: null,
+		icon: 'info',
+		display: 'normal',
+		forExistingUsers: false,
+		needConfirmationToRead: false,
 	});
 }

-function remove(announcement) {
+function del(announcement) {
 	os.confirm({
 		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: announcement.title }),
+		text: i18n.t('deleteAreYouSure', { x: announcement.title }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
 		announcements = announcements.filter(x => x !== announcement);
@ -67,32 +107,20 @@ function remove(announcement) {
 	});
 }

-function save(announcement) {
+async function archive(announcement) {
+	await os.apiWithDialog('admin/announcements/update', {
+		...announcement,
+		isActive: false,
+	});
+	refresh();
+}
+
+async function save(announcement) {
 	if (announcement.id == null) {
-		os.api('admin/announcements/create', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
-			});
-			refresh();
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
+		await os.apiWithDialog('admin/announcements/create', announcement);
+		refresh();
 	} else {
-		os.api('admin/announcements/update', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
-			});
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
+		os.apiWithDialog('admin/announcements/update', announcement);
 	}
 }

--- a/packages/frontend/src/pages/admin/overview.moderators.vue
+++ b/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>
--- a/packages/frontend/src/pages/admin/overview.users.vue
+++ b/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>
--- a/packages/frontend/src/pages/admin/roles.role.vue
+++ b/packages/frontend/src/pages/admin/roles.role.vue
@ -33,7 +33,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>
--- a/packages/frontend/src/pages/admin/users.vue
+++ b/packages/frontend/src/pages/admin/users.vue
@ -47,7 +47,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>
@ -118,7 +118,7 @@ async function addUser() {
 }

 function show(user) {
-	os.pageWindow(`/user-info/${user.id}`);
+	os.pageWindow(`/admin/user/${user.id}`);
 }

 const headerActions = $computed(() => [{
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@ -5,20 +5,36 @@ SPDX-License-Identifier: AGPL-3.0-only

 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<MkPagination ref="paginationEl" v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m">
-			<section v-for="announcement in items" :key="announcement.id" class="announcement _panel">
-				<div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
-				<div class="content">
-					<Mfm :text="announcement.text"/>
-					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-				</div>
-				<div v-if="$i && !announcement.isRead" class="footer">
-					<MkButton primary @click="read(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
-				</div>
-			</section>
-		</MkPagination>
+		<div class="_gaps">
+			<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
+			<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
+				<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
+					<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
+					<div :class="$style.header">
+						<span v-if="$i && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
+						<span style="margin-right: 0.5em;">
+							<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+							<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+							<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>
+					</div>
+					<div :class="$style.content">
+						<Mfm :text="announcement.text"/>
+						<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+						<div style="opacity: 0.7; font-size: 85%;">
+							<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
+						</div>
+					</div>
+					<div v-if="tab !== 'past' && $i && !announcement.isRead" :class="$style.footer">
+						<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+					</div>
+				</section>
+			</MkPagination>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -27,30 +43,64 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
+import { $i, updateAccount } from '@/account';

-const pagination = {
+const paginationCurrent = {
 	endpoint: 'announcements' as const,
 	limit: 10,
+	params: {
+		isActive: true,
+	},
+};
+
+const paginationPast = {
+	endpoint: 'announcements' as const,
+	limit: 10,
+	params: {
+		isActive: false,
+	},
 };

 const paginationEl = ref<InstanceType<typeof MkPagination>>();

-function read(id: string) {
+const tab = ref('current');
+
+async function read(announcement) {
+	if (announcement.needConfirmationToRead) {
+		const confirm = await os.confirm({
+			type: 'question',
+			title: i18n.ts._announcement.readConfirmTitle,
+			text: i18n.t('_announcement.readConfirmText', { title: announcement.title }),
+		});
+		if (confirm.canceled) return;
+	}
+
 	if (!paginationEl.value) return;
-	paginationEl.value.updateItem(id, announcement => {
-		announcement.isRead = true;
-		return announcement;
+	paginationEl.value.updateItem(announcement.id, a => {
+		a.isRead = true;
+		return a;
+	});
+	os.api('i/read-announcement', { announcementId: announcement.id });
+	updateAccount({
+		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
 	});
-	os.api('i/read-announcement', { announcementId: id });
 }

 const headerActions = $computed(() => []);

-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	key: 'current',
+	title: i18n.ts.currentAnnouncements,
+	icon: 'ti ti-flare',
+}, {
+	key: 'past',
+	title: i18n.ts.pastAnnouncements,
+	icon: 'ti ti-point',
+}]);

 definePageMetadata({
 	title: i18n.ts.announcements,
@ -58,27 +108,34 @@ definePageMetadata({
 });
 </script>

-<style lang="scss" scoped>
-.ruryvtyk {
-	> .announcement {
-		padding: 16px;
+<style lang="scss" module>
+.announcement {
+	padding: 16px;
+}

-		> .header {
-			margin-bottom: 16px;
-			font-weight: bold;
-		}
+.forYou {
+	display: flex;
+	align-items: center;
+	line-height: 24px;
+	font-size: 90%;
+	white-space: pre;
+	color: #d28a3f;
+}

-		> .content {
-			> img {
-				display: block;
-				max-height: 300px;
-				max-width: 100%;
-			}
-		}
+.header {
+	margin-bottom: 16px;
+	font-weight: bold;
+}

-		> .footer {
-			margin-top: 16px;
-		}
+.content {
+	> img {
+		display: block;
+		max-height: 300px;
+		max-width: 100%;
 	}
 }
+
+.footer {
+	margin-top: 16px;
+}
 </style>
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 				<MkSwitch v-model="isSensitive">isSensitive</MkSwitch>
 				<MkSwitch v-model="localOnly">{{ i18n.ts.localOnly }}</MkSwitch>
-				<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+				<MkButton v-if="emoji" danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
 		</MkSpacer>
 		<div :class="$style.footer">
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@ -85,7 +85,7 @@ const tagUsersPagination = $computed(() => ({
 	endpoint: 'hashtags/users' as const,
 	limit: 30,
 	params: {
-		tag: this.tag,
+		tag: props.tag,
 		origin: 'combined',
 		sort: '+follower',
 	},
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/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>
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/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>
--- a/packages/frontend/src/router.ts
+++ b/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')),
@ -346,6 +342,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')),
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@ -156,13 +156,13 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		action: () => {
 			copyToClipboard(`@${user.username}@${user.host ?? host}`);
 		},
-	}, {
-		icon: 'ti ti-info-circle',
-		text: i18n.ts.info,
+	}, ...(iAmModerator ? [{
+		icon: 'ti ti-user-exclamation',
+		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: () => {
--- a/packages/frontend/src/scripts/lookup-user.ts
+++ b/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));
--- a/packages/frontend/src/scripts/scroll.ts
+++ b/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)) {
+	if (el.isConnected && isTopVisible(el)) {
 		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;
 	}
--- a/packages/frontend/src/ui/_common_/announcements.vue
+++ b/packages/frontend/src/ui/_common_/announcements.vue
@ -0,0 +1,80 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<MkA
+		v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')"
+		:key="announcement.id"
+		:class="$style.item"
+		to="/announcements"
+	>
+		<span :class="$style.icon">
+			<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+			<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+			<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>
+		<span :class="$style.body">{{ announcement.text }}</span>
+	</MkA>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { $i } from '@/account';
+</script>
+
+<style lang="scss" module>
+.root {
+	font-size: 15px;
+	background: var(--panel);
+}
+
+.item {
+	--height: 24px;
+	font-size: 0.85em;
+
+	display: flex;
+	vertical-align: bottom;
+	width: 100%;
+	line-height: var(--height);
+	height: var(--height);
+	overflow: clip;
+	contain: strict;
+	background: var(--accent);
+	color: var(--fgOnAccent);
+
+	@container (max-width: 1000px) {
+		display: block;
+		text-align: center;
+
+		> .body {
+			display: none;
+		}
+	}
+}
+
+.icon {
+	margin-left: 10px;
+}
+
+.title {
+	padding: 0 10px;
+	font-weight: bold;
+
+	&:empty {
+		display: none;
+	}
+}
+
+.body {
+	min-width: 0;
+	flex: 1;
+	overflow: clip;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+</style>
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XSidebar v-if="!isMobile"/>

 	<div :class="$style.main">
+		<XAnnouncements v-if="$i" :class="$style.announcements"/>
 		<XStatusBars/>
 		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
 			<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
@ -113,6 +114,7 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue';
 import XDirectColumn from '@/ui/deck/direct-column.vue';
 import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));

 const columnComponents = {
 	main: XMainColumn,
--- a/packages/frontend/src/ui/friendly.vue
+++ b/packages/frontend/src/ui/friendly.vue
@ -8,7 +8,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>

 	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
-		<template #header><XStatusBars :class="$style.statusbars"/></template>
+		<template #header>
+			<div>
+				<XAnnouncements v-if="$i" :class="$style.announcements"/>
+				<XStatusBars :class="$style.statusbars"/>
+			</div>
+		</template>
 		<RouterView/>
 		<div v-if="!(['messaging-room', 'messaging-room-group'].includes(<string>mainRouter.currentRoute.value.name))" :class="$style.spacer"></div>
 	</MkStickyContainer>
@ -119,6 +124,7 @@ const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XNotifications = defineAsyncComponent(() => import('@/pages/notifications.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/friendly/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));

 miLocalStorage.setItem('ui', 'friendly');

--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@ -8,7 +8,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>

 	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
-		<template #header><XStatusBars :class="$style.statusbars"/></template>
+		<template #header>
+			<div>
+				<XAnnouncements v-if="$i" :class="$style.announcements"/>
+				<XStatusBars :class="$style.statusbars"/>
+			</div>
+		</template>
 		<RouterView/>
 		<div :class="$style.spacer"></div>
 	</MkStickyContainer>
@ -85,18 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import {
-  defineAsyncComponent,
-  provide,
-  onMounted,
-  computed,
-  ref,
-  ComputedRef,
-  watch,
-  shallowRef,
-  Ref,
-  onBeforeUnmount
-} from 'vue';
+import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref, onBeforeUnmount } from 'vue';
 import XCommon from './_common_/common.vue';
 import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 import { instanceName } from '@/config';
@ -117,6 +111,7 @@ import {eventBus} from "@/scripts/cherrypick/eventBus";
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));

 const DESKTOP_THRESHOLD = 1100;
 const MOBILE_THRESHOLD = 500;
--- a/packages/frontend/test/scroll.test.ts
+++ b/packages/frontend/test/scroll.test.ts
@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick 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);
+		});
+	});
+});
--- a/packages/frontend/test/url-preview.test.ts
+++ b/packages/frontend/test/url-preview.test.ts
@ -13,7 +13,7 @@ import MkUrlPreview from '@/components/MkUrlPreview.vue';

 type SummalyResult = Awaited<ReturnType<typeof summaly>>;

-describe('MkMediaImage', () => {
+describe('MkUrlPreview', () => {
 	const renderPreviewBy = async (summary: Partial<SummalyResult>): Promise<RenderResult> => {
 		if (!summary.player) {
 			summary.player = {
@ -143,4 +143,13 @@ describe('MkMediaImage', () => {
 		assert.exists(iframe, 'iframe should exist');
 		assert.strictEqual(iframe?.parentElement?.style.paddingTop, '200px');
 	});
+
+	test('Loading a tweet in iframe', async () => {
+		const iframe = await renderAndOpenPreview({
+			url: 'https://twitter.com/i/web/status/1685072521782325249',
+		});
+		assert.exists(iframe, 'iframe should exist');
+		assert.strictEqual(iframe?.getAttribute('allow'), 'fullscreen;web-share');
+		assert.strictEqual(iframe?.getAttribute('sandbox'), 'allow-popups allow-scripts allow-same-origin');
+	});
 });