feat(announcement): 個別のお知らせにリンクで飛べるように (#639)

packages/backend/src/core/AnnouncementService.ts

@@ -4,7 +4,7 @@
  */
 
 import { Inject, Injectable } from '@nestjs/common';
-import { Brackets, In } from 'typeorm';
+import { Brackets, EntityNotFoundError, In } from 'typeorm';
 import { DI } from '@/di-symbols.js';
 import type { MiUser } from '@/models/User.js';
 import type { AnnouncementReadsRepository, AnnouncementsRepository, MiAnnouncement, UsersRepository } from '@/models/_.js';
@@ -254,6 +254,24 @@ export class AnnouncementService {
 		}
 	}
 
+	@bindThis
+	public async getAnnouncement(announcementId: MiAnnouncement['id'], me: MiUser | null): Promise<Packed<'Announcement'>> {
+		const announcement = await this.announcementsRepository.findOneByOrFail({ id: announcementId });
+		if (me) {
+			if (announcement.userId && announcement.userId !== me.id) {
+				throw new EntityNotFoundError(this.announcementsRepository.metadata.target, { id: announcementId });
+			}
+
+			const read = await this.announcementReadsRepository.findOneBy({
+				announcementId: announcement.id,
+				userId: me.id,
+			});
+			return this.announcementEntityService.pack({ ...announcement, isRead: read !== null }, me);
+		} else {
+			return this.announcementEntityService.pack(announcement, null);
+		}
+	}
+
 	@bindThis
 	public async getAnnouncements(
 		me: MiUser | null,

packages/backend/src/server/api/EndpointsModule.ts

@@ -95,6 +95,7 @@ import * as ep___admin_sso_create from './endpoints/admin/sso/create.js';
 import * as ep___admin_sso_delete from './endpoints/admin/sso/delete.js';
 import * as ep___admin_sso_list from './endpoints/admin/sso/list.js';
 import * as ep___admin_sso_update from './endpoints/admin/sso/update.js';
+import * as ep___announcement from './endpoints/announcement.js';
 import * as ep___announcements from './endpoints/announcements.js';
 import * as ep___antennas_create from './endpoints/antennas/create.js';
 import * as ep___antennas_delete from './endpoints/antennas/delete.js';
@@ -484,6 +485,7 @@ const $admin_sso_create: Provider = { provide: 'ep:admin/sso/create', useClass:
 const $admin_sso_delete: Provider = { provide: 'ep:admin/sso/delete', useClass: ep___admin_sso_delete.default };
 const $admin_sso_list: Provider = { provide: 'ep:admin/sso/list', useClass: ep___admin_sso_list.default };
 const $admin_sso_update: Provider = { provide: 'ep:admin/sso/update', useClass: ep___admin_sso_update.default };
+const $announcement: Provider = { provide: 'ep:announcement', useClass: ep___announcement.default };
 const $announcements: Provider = { provide: 'ep:announcements', useClass: ep___announcements.default };
 const $antennas_create: Provider = { provide: 'ep:antennas/create', useClass: ep___antennas_create.default };
 const $antennas_delete: Provider = { provide: 'ep:antennas/delete', useClass: ep___antennas_delete.default };
@@ -877,6 +879,7 @@ const $reversi_verify: Provider = { provide: 'ep:reversi/verify', useClass: ep__
 		$admin_sso_delete,
 		$admin_sso_list,
 		$admin_sso_update,
+		$announcement,
 		$announcements,
 		$antennas_create,
 		$antennas_delete,
@@ -1264,6 +1267,7 @@ const $reversi_verify: Provider = { provide: 'ep:reversi/verify', useClass: ep__
 		$admin_sso_delete,
 		$admin_sso_list,
 		$admin_sso_update,
+		$announcement,
 		$announcements,
 		$antennas_create,
 		$antennas_delete,

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

@@ -95,6 +95,7 @@ import * as ep___admin_sso_create from './endpoints/admin/sso/create.js';
 import * as ep___admin_sso_delete from './endpoints/admin/sso/delete.js';
 import * as ep___admin_sso_list from './endpoints/admin/sso/list.js';
 import * as ep___admin_sso_update from './endpoints/admin/sso/update.js';
+import * as ep___announcement from './endpoints/announcement.js';
 import * as ep___announcements from './endpoints/announcements.js';
 import * as ep___antennas_create from './endpoints/antennas/create.js';
 import * as ep___antennas_delete from './endpoints/antennas/delete.js';
@@ -482,6 +483,7 @@ const eps = [
 	['admin/sso/delete', ep___admin_sso_delete],
 	['admin/sso/list', ep___admin_sso_list],
 	['admin/sso/update', ep___admin_sso_update],
+	['announcement', ep___announcement],
 	['announcements', ep___announcements],
 	['antennas/create', ep___antennas_create],
 	['antennas/delete', ep___antennas_delete],

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

@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AnnouncementService } from '@/core/AnnouncementService.js';
+import { EntityNotFoundError } from "typeorm";
+import { ApiError } from "../error.js";
+
+export const meta = {
+	tags: ['meta'],
+
+	requireCredential: false,
+
+	res: {
+		type: 'object',
+		optional: false, nullable: false,
+		ref: 'Announcement',
+	},
+
+	errors: {
+		noSuchAnnouncement: {
+			message: 'No such announcement.',
+			code: 'NO_SUCH_ANNOUNCEMENT',
+			id: 'b57b5e1d-4f49-404a-9edb-46b00268f121',
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		announcementId: { type: 'string', format: 'misskey:id' },
+	},
+	required: ['announcementId'],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		private announcementService: AnnouncementService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			try {
+				return await this.announcementService.getAnnouncement(ps.announcementId, me);
+			} catch (err) {
+				if (err instanceof EntityNotFoundError) throw new ApiError(meta.errors.noSuchAnnouncement);
+				throw err;
+			}
+		});
+	}
+}

packages/frontend/src/pages/announcement.vue

@@ -0,0 +1,139 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="800">
+		<Transition
+			:enterActiveClass="defaultStore.state.animation ? $style.fadeEnterActive : ''"
+			:leaveActiveClass="defaultStore.state.animation ? $style.fadeLeaveActive : ''"
+			:enterFromClass="defaultStore.state.animation ? $style.fadeEnterFrom : ''"
+			:leaveToClass="defaultStore.state.animation ? $style.fadeLeaveTo : ''"
+			mode="out-in"
+		>
+			<div v-if="announcement" :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.silence && !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>
+					<Mfm :text="announcement.title"/>
+				</div>
+				<div :class="$style.content">
+					<Mfm :text="announcement.text"/>
+					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+					<MkA :to="`/announcements/${announcement.id}`">
+						<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
+							{{ i18n.ts.createdAt }}: <MkTime :time="announcement.createdAt" mode="detail"/>
+						</div>
+						<div v-if="announcement.updatedAt" style="opacity: 0.7; font-size: 85%;">
+							{{ i18n.ts.updatedAt }}: <MkTime :time="announcement.updatedAt" mode="detail"/>
+						</div>
+					</MkA>
+				</div>
+				<div v-if="$i && !announcement.silence && !announcement.isRead" :class="$style.footer">
+					<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+				</div>
+			</div>
+			<MkError v-else-if="error" @retry="fetch()"/>
+			<MkLoading v-else/>
+		</Transition>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { $i, updateAccount } from '@/account.js';
+import { defaultStore } from '@/store.js';
+
+const props = defineProps<{
+	announcementId: string;
+}>();
+
+const announcement = ref<Misskey.entities.Announcement | null>(null);
+const error = ref<any>(null);
+const path = computed(() => props.announcementId);
+
+function fetch() {
+	announcement.value = null;
+	misskeyApi('announcement', {
+		announcementId: props.announcementId,
+	}).then(async _announcement => {
+		announcement.value = _announcement;
+	}).catch(err => {
+		error.value = err;
+	});
+}
+
+async function read(announcement): Promise<void> {
+	if (announcement.needConfirmationToRead) {
+		const confirm = await os.confirm({
+			type: 'question',
+			title: i18n.ts._announcement.readConfirmTitle,
+			text: i18n.tsx._announcement.readConfirmText({ title: announcement.title }),
+		});
+		if (confirm.canceled) return;
+	}
+
+	announcement.isRead = true;
+	await misskeyApi('i/read-announcement', { announcementId: announcement.id });
+	if ($i) {
+		updateAccount({
+			unreadAnnouncements: $i.unreadAnnouncements.filter((a: { id: string; }) => a.id !== announcement.id),
+		});
+	}
+}
+
+watch(() => path.value, fetch, { immediate: true });
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => []);
+
+definePageMetadata(() => ({
+	title: announcement.value ? `${i18n.ts.announcements}: ${announcement.value.title}` : i18n.ts.announcements,
+	icon: 'ti ti-speakerphone',
+}));
+</script>
+
+<style lang="scss" module>
+.announcement {
+	padding: 16px;
+}
+
+.forYou {
+	display: flex;
+	align-items: center;
+	line-height: 24px;
+	font-size: 90%;
+	white-space: pre;
+	color: #d28a3f;
+}
+
+.header {
+	margin-bottom: 16px;
+	font-weight: bold;
+	font-size: 120%;
+}
+
+.content {
+	> img {
+		display: block;
+		max-height: 300px;
+		max-width: 100%;
+	}
+}
+
+.footer {
+	margin-top: 16px;
+}
+</style>

packages/frontend/src/pages/announcements.vue

@@ -26,9 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div :class="$style.content">
 							<Mfm :text="announcement.text"/>
 							<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-							<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
-								<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
-							</div>
+							<MkA :to="`/announcements/${announcement.id}`">
+								<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
+									{{ i18n.ts.createdAt }}: <MkTime :time="announcement.createdAt" mode="detail"/>
+								</div>
+								<div v-if="announcement.updatedAt" style="opacity: 0.7; font-size: 85%;">
+									{{ i18n.ts.updatedAt }}: <MkTime :time="announcement.updatedAt" mode="detail"/>
+								</div>
+							</MkA>
 						</div>
 						<div v-if="$i && !announcement.silence && !announcement.isRead" :class="$style.footer">
 							<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>

packages/frontend/src/router/definition.ts

@@ -197,6 +197,9 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/announcements',
 	component: page(() => import('@/pages/announcements.vue')),
+}, {
+	path: '/announcements/:announcementId',
+	component: page(() => import('@/pages/announcement.vue')),
 }, {
 	path: '/about',
 	component: page(() => import('@/pages/about.vue')),

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

@@ -393,6 +393,12 @@ type AnnouncementCreated = {
     announcement: Announcement;
 };
 
+// @public (undocumented)
+type AnnouncementRequest = operations['announcement']['requestBody']['content']['application/json'];
+
+// @public (undocumented)
+type AnnouncementResponse = operations['announcement']['responses']['200']['content']['application/json'];
+
 // @public (undocumented)
 type AnnouncementsRequest = operations['announcements']['requestBody']['content']['application/json'];
 
@@ -1308,6 +1314,8 @@ declare namespace entities {
         AdminSsoListRequest,
         AdminSsoListResponse,
         AdminSsoUpdateRequest,
+        AnnouncementRequest,
+        AnnouncementResponse,
         AnnouncementsRequest,
         AnnouncementsResponse,
         AntennasCreateRequest,

packages/misskey-js/src/autogen/apiClientJSDoc.ts

@@ -983,6 +983,17 @@ declare module '../api.js' {
       credential?: string | null,
     ): Promise<SwitchCaseResponseType<E, P>>;
 
+    /**
+     * No description provided.
+     * 
+     * **Credential required**: *No*
+     */
+    request<E extends 'announcement', P extends Endpoints[E]['req']>(
+      endpoint: E,
+      params: P,
+      credential?: string | null,
+    ): Promise<SwitchCaseResponseType<E, P>>;
+
     /**
      * No description provided.
      * 

packages/misskey-js/src/autogen/endpoint.ts

@@ -119,6 +119,8 @@ import type {
 	AdminSsoListRequest,
 	AdminSsoListResponse,
 	AdminSsoUpdateRequest,
+	AnnouncementRequest,
+	AnnouncementResponse,
 	AnnouncementsRequest,
 	AnnouncementsResponse,
 	AntennasCreateRequest,
@@ -670,6 +672,7 @@ export type Endpoints = {
 	'admin/sso/delete': { req: AdminSsoDeleteRequest; res: EmptyResponse };
 	'admin/sso/list': { req: AdminSsoListRequest; res: AdminSsoListResponse };
 	'admin/sso/update': { req: AdminSsoUpdateRequest; res: EmptyResponse };
+	'announcement': { req: AnnouncementRequest; res: AnnouncementResponse };
 	'announcements': { req: AnnouncementsRequest; res: AnnouncementsResponse };
 	'antennas/create': { req: AntennasCreateRequest; res: AntennasCreateResponse };
 	'antennas/delete': { req: AntennasDeleteRequest; res: EmptyResponse };

packages/misskey-js/src/autogen/entities.ts

@@ -122,6 +122,8 @@ export type AdminSsoDeleteRequest = operations['admin___sso___delete']['requestB
 export type AdminSsoListRequest = operations['admin___sso___list']['requestBody']['content']['application/json'];
 export type AdminSsoListResponse = operations['admin___sso___list']['responses']['200']['content']['application/json'];
 export type AdminSsoUpdateRequest = operations['admin___sso___update']['requestBody']['content']['application/json'];
+export type AnnouncementRequest = operations['announcement']['requestBody']['content']['application/json'];
+export type AnnouncementResponse = operations['announcement']['responses']['200']['content']['application/json'];
 export type AnnouncementsRequest = operations['announcements']['requestBody']['content']['application/json'];
 export type AnnouncementsResponse = operations['announcements']['responses']['200']['content']['application/json'];
 export type AntennasCreateRequest = operations['antennas___create']['requestBody']['content']['application/json'];