wip

locales/index.d.ts

@@ -1109,7 +1109,8 @@ export interface Locale {
         "forExistingUsersDescription": string;
         "needConfirmationToRead": string;
         "needConfirmationToReadDescription": string;
-        "deactivate": string;
+        "end": string;
+        "tooManyActiveAnnouncementDescription": string;
     };
     "_initialAccountSetting": {
         "accountCreated": string;

locales/ja-JP.yml

@@ -1107,7 +1107,8 @@ _announcement:
   forExistingUsersDescription: "有効にすると、このお知らせ作成時点で存在するユーザーにのみお知らせが表示されます。無効にすると、このお知らせ作成後にアカウントを作成したユーザーにもお知らせが表示されます。"
   needConfirmationToRead: "既読にするのに確認が必要"
   needConfirmationToReadDescription: "有効にすると、このお知らせを既読にする際に確認ダイアログが表示されます。また、一括既読操作の対象になりません。"
-  deactivate: "お知らせを終了"
+  end: "お知らせを終了"
+  tooManyActiveAnnouncementDescription: "アクティブなお知らせが多いため、UXが低下する可能性があります。終了したお知らせはアーカイブすることを検討してください。"
 
 _initialAccountSetting:
   accountCreated: "アカウントの作成が完了しました！"

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" :key="announcement.id ?? announcement._id" 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>
@@ -41,11 +52,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<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 v-if="announcement.id != null" class="button" inline @click="deactivate(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts._announcement.deactivate }}</MkButton>
-						<MkButton v-if="announcement.id != null" 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>
@@ -59,9 +70,11 @@ 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([]);
 
@@ -73,7 +86,7 @@ function add() {
 	announcements.unshift({
 		_id: Math.random().toString(36),
 		id: null,
-		title: '',
+		title: 'New announcement',
 		text: '',
 		imageUrl: null,
 		icon: 'info',
@@ -83,10 +96,10 @@ function add() {
 	});
 }
 
-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);
@@ -94,7 +107,7 @@ function remove(announcement) {
 	});
 }
 
-async function deactivate(announcement) {
+async function archive(announcement) {
 	await os.apiWithDialog('admin/announcements/update', {
 		...announcement,
 		isActive: false,