feat: 個人宛てお知らせ機能 (#107)

* feat: 個人宛てお知らせ機能

* Remove unused import

* Update packages/backend/src/server/api/endpoints/admin/announcements/create.ts

Co-authored-by: riku6460 <17585784+riku6460@users.noreply.github.com>

* Update packages/frontend/src/pages/announcements.vue

Co-authored-by: riku6460 <17585784+riku6460@users.noreply.github.com>

* Restore breakline

* 一般向けAPIにはuserオブジェクトを提供しない

* fix

* Fix

* Update packages/misskey-js/src/entities.ts

Co-authored-by: riku6460 <17585784+riku6460@users.noreply.github.com>

* Fix

* Update misskey-js.api.md

* Fix lint

* 他のテーブルに合わせて character varying(32) にした

* count クエリを1つにまとめた

* user を pack するようにした

* いろいろ修正

* 個人宛てのお知らせの表示を改善

* Update misskey-js.api.md

* Merge migration scripts

* Fix

* Update packages/backend/migration/1688647797135-userannouncement.js

Co-authored-by: riku6460 <17585784+riku6460@users.noreply.github.com>

* Update packages/backend/src/models/entities/Announcement.ts

Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com>

* Fix

* Update migration script

---------

Co-authored-by: CyberRex <hspwinx86@gmail.com>
Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com>

packages/frontend/src/components/MkNewUserAnnouncementModal.vue

@@ -0,0 +1,60 @@
+<template>
+<MkModal ref="modal" :zPriority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div :class="$style.root">
+		<div :class="$style.title">{{ i18n.ts.newUserAnnouncementAvailable }}</div>
+		<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}</MkButton>
+	</div>
+</MkModal>
+</template>
+
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import { useRouter } from '@/router';
+import { api } from '@/os';
+const router = useRouter();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+const props = defineProps<{
+	title: string;
+	text: string;
+	announcementId: string;
+}>();
+
+async function gotIt() {
+	await api('i/read-announcement', { announcementId: props.announcementId });
+}
+ 
+function jumpTo() {
+	modal.value.close();
+	router.push('/announcements');
+}
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.title {
+	font-weight: bold;
+}
+
+.version {
+	margin: 1em 0;
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+</style>

packages/frontend/src/components/MkUserAnnouncementModal.vue

@@ -0,0 +1,90 @@
+<template>
+<MkModal ref="modal" :zPriority="'middle'" @click="closeModal" @closed="$emit('closed')">
+	<div :class="$style.root">
+		<div :class="$style.title"><Mfm :text="props.title"/></div>
+		<div :class="$style.text">
+			<Mfm :text="props.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 setup lang="ts">
+import { onMounted, ref, shallowRef } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import { api } from '@/os';
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+const gotItDisabled = ref(true);
+const secVisible = ref(true);
+
+const props = defineProps<{
+	title: string;
+	text: string;
+	announcementId: string | null;
+	closeDuration: number;
+}>();
+
+const sec = ref(props.closeDuration);
+
+async function gotIt() {
+	gotItDisabled.value = true;
+	if (props.announcementId) {
+		await api('i/read-announcement', { announcementId: props.announcementId });
+	}
+	modal.value.close();
+}
+
+function closeModal() {
+	if (sec.value === 0) {
+		modal.value.close();
+	}
+}
+
+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>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.title {
+	font-weight: bold;
+}
+
+.text {
+	margin: 1em 0;
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+</style>