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

b7fd6bf33a835fd73c2a86eb007074d3680f6efd によるリワーク

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

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

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

packages/frontend/src/components/MkAnnouncementDialog.vue

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

packages/frontend/src/components/MkUserAnnouncementEditDialog.vue

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

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

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

packages/frontend/src/pages/announcements.vue

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

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

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

packages/frontend/src/ui/visitor.vue

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