wip

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

@@ -66,7 +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' },
+		userId: { type: 'string', format: 'misskey:id', nullable: true },
 	},
 	required: [],
 } as const;

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

@@ -37,7 +37,7 @@ export const paramDef = {
 		needConfirmationToRead: { type: 'boolean' },
 		isActive: { type: 'boolean' },
 	},
-	required: ['id', 'title', 'text', 'imageUrl', 'icon', 'display', 'forExistingUsers', 'needConfirmationToRead', 'isActive'],
+	required: ['id'],
 } as const;
 
 // eslint-disable-next-line import/no-default-export

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

@@ -138,9 +138,22 @@ 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>
 
-						<div v-for="announcement in info.announcements" :key="announcement.id" :class="$style.announcementItem">
-							{{ announcement.title }}
-						</div>
+						<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>
+							</template>
+						</MkPagination>
 					</div>
 				</MkFolder>
 
@@ -219,6 +232,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { iAmAdmin, iAmModerator, $i } from '@/account';
 import MkRolePreview from '@/components/MkRolePreview.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
 
 const props = withDefaults(defineProps<{
 	userId: string;
@@ -245,6 +259,13 @@ 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() {
@@ -424,6 +445,13 @@ function createAnnouncement() {
 	}, {}, 'closed');
 }
 
+function editAnnouncement(announcement) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
+		user,
+		announcement,
+	}, {}, 'closed');
+}
+
 watch(() => props.userId, () => {
 	init = createFetcher();
 }, {
@@ -587,4 +615,11 @@ definePageMetadata(computed(() => ({
 	margin-left: 8px;
 	align-self: center;
 }
+
+.announcementItem {
+	display: flex;
+	padding: 8px 12px;
+	border-radius: 6px;
+	cursor: pointer;
+}
 </style>