From c16a2343111ee1efce1eb260ebbda4f2b08dd4e3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 11 Aug 2023 15:03:11 +0900
Subject: [PATCH] wip

---
 locales/index.d.ts                            |  1 +
 locales/ja-JP.yml                             |  1 +
 .../src/components/MkAnnouncementDialog.vue   | 20 ++++++-
 .../src/components/MkNoteDetailed.vue         |  1 -
 .../frontend/src/components/MkNoteHeader.vue  |  1 -
 .../frontend/src/components/MkNoteSimple.vue  |  1 -
 packages/frontend/src/pages/announcements.vue | 58 +++++++++++--------
 .../src/ui/_common_/announcements.vue         |  6 +-
 8 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 5cab76136a..66ee7619a0 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1100,6 +1100,7 @@ export interface Locale {
     "iHaveReadXCarefullyAndAgree": string;
     "dialog": string;
     "icon": string;
+    "forYou": string;
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2db6dcf283..b4bbc0e00f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1097,6 +1097,7 @@ beSureToReadThisAsItIsImportant: "重要ですので必ずお読みください
 iHaveReadXCarefullyAndAgree: "「{x}」の内容をよく読み、同意します。"
 dialog: "ダイアログ"
 icon: "アイコン"
+forYou: "あなたへ"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"
diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue
index 075bdf8f49..b2e42e2f62 100644
--- a/packages/frontend/src/components/MkAnnouncementDialog.vue
+++ b/packages/frontend/src/components/MkAnnouncementDialog.vue
@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')">
-	<div :class="$style.root">
+<MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')" @click="onBgClick">
+	<div ref="rootEl" :class="$style.root">
 		<div :class="$style.header">
 			<span :class="$style.icon">
 				<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
@@ -34,6 +34,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
+const rootEl = shallowRef<HTMLDivElement>();
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 function ok() {
@@ -41,6 +42,21 @@ function ok() {
 	os.api('i/read-announcement', { announcementId: props.announcement.id });
 }
 
+function onBgClick() {
+	rootEl.value.animate([{
+		offset: 0,
+		transform: 'scale(1)',
+	}, {
+		offset: 0.5,
+		transform: 'scale(1.1)',
+	}, {
+		offset: 1,
+		transform: 'scale(1)',
+	}], {
+		duration: 100,
+	});
+}
+
 onMounted(() => {
 });
 </script>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 8acd4e4707..2a00b8db8e 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -172,7 +172,6 @@ import { showMovedDialog } from '@/scripts/show-moved-dialog';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
-	pinned?: boolean;
 }>();
 
 const inChannel = inject('inChannel', null);
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 559133ef46..fcde45405e 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -37,7 +37,6 @@ import { userPage } from '@/filters/user';
 
 defineProps<{
 	note: misskey.entities.Note;
-	pinned?: boolean;
 }>();
 </script>
 
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 9648b7230a..e3c9e2bd5f 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -31,7 +31,6 @@ import { $i } from '@/account';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
-	pinned?: boolean;
 }>();
 
 const showContent = $ref(false);
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index dd166d3c51..3a811a3102 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -7,14 +7,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<MkPagination ref="paginationEl" v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m">
-			<section v-for="announcement in items" :key="announcement.id" class="announcement _panel">
-				<div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
-				<div class="content">
+		<MkPagination ref="paginationEl" v-slot="{items}" :pagination="pagination" class="_gaps_m">
+			<section v-for="announcement in items" :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.isRead">🆕 </span>{{ announcement.title }}</div>
+				<div :class="$style.content">
 					<Mfm :text="announcement.text"/>
 					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+					<div style="opacity: 0.7; font-size: 85%;">
+						<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
+					</div>
 				</div>
-				<div v-if="$i && !announcement.isRead" class="footer">
+				<div v-if="$i && !announcement.isRead" :class="$style.footer">
 					<MkButton primary @click="read(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
 				</div>
 			</section>
@@ -58,27 +62,35 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
-.ruryvtyk {
-	> .announcement {
-		padding: 16px;
+<style lang="scss" module>
+.announcement {
+	padding: 16px;
+}
 
-		> .header {
-			margin-bottom: 16px;
-			font-weight: bold;
-		}
+.forYou {
+	display: flex;
+	align-items: center;
+	padding: 16px 32px 8px 32px;
+	line-height: 24px;
+	font-size: 90%;
+	white-space: pre;
+	color: #d28a3f;
+}
 
-		> .content {
-			> img {
-				display: block;
-				max-height: 300px;
-				max-width: 100%;
-			}
-		}
+.header {
+	margin-bottom: 16px;
+	font-weight: bold;
+}
 
-		> .footer {
-			margin-top: 16px;
-		}
+.content {
+	> img {
+		display: block;
+		max-height: 300px;
+		max-width: 100%;
 	}
 }
+
+.footer {
+	margin-top: 16px;
+}
 </style>
diff --git a/packages/frontend/src/ui/_common_/announcements.vue b/packages/frontend/src/ui/_common_/announcements.vue
index 56fd5ec736..83b1e4a417 100644
--- a/packages/frontend/src/ui/_common_/announcements.vue
+++ b/packages/frontend/src/ui/_common_/announcements.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root">
 	<div
-		v-for="announcement in $i.unreadAnnouncements" :key="announcement.id" :class="$style.item"
+		v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')" :key="announcement.id" :class="$style.item"
 	>
 		<span :class="$style.icon">
 			<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
@@ -45,6 +45,10 @@ import { $i } from '@/account';
 	color: var(--fgOnAccent);
 }
 
+.icon {
+	margin-left: 10px;
+}
+
 .title {
 	padding: 0 10px;
 	font-weight: bold;