From 479b40deee16dbceb8f92eb1150ea164c0011f18 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 29 Apr 2025 16:35:43 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=AB=E3=81=97=E3=81=AA=E3=81=84=E3=81=A8=E9=96=89=E3=81=98?=
 =?UTF-8?q?=E3=82=89=E3=82=8C=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  4 ++
 locales/ja-JP.yml                             |  1 +
 .../src/components/MkAnnouncementDialog.vue   | 43 ++++++++++++++++---
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 1ee01d52f4..455e4369fb 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5409,6 +5409,10 @@ export interface Locale extends ILocale {
      * フォルダを作って整理することもできます。
      */
     "driveAboutTip": string;
+    /**
+     * スクロールして閉じる
+     */
+    "scrollToClose": string;
     "_chat": {
         /**
          * まだメッセージはありません
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index edb7914110..76c8bc387f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1347,6 +1347,7 @@ readonly: "読み取り専用"
 goToDeck: "デッキへ戻る"
 federationJobs: "連合ジョブ"
 driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。<br>\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。<br>\n<b>ファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。</b><br>\nフォルダを作って整理することもできます。"
+scrollToClose: "スクロールして閉じる"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"
diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue
index 904ba1796d..81c92bfb5c 100644
--- a/packages/frontend/src/components/MkAnnouncementDialog.vue
+++ b/packages/frontend/src/components/MkAnnouncementDialog.vue
@@ -16,15 +16,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span :class="$style.title">{{ announcement.title }}</span>
 		</div>
 		<div :class="$style.text"><Mfm :text="announcement.text"/></div>
+		<div ref="bottomEl"></div>
 		<div :class="$style.footer">
-			<MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton>
+			<MkButton
+				primary
+				full
+				:disabled="!hasReachedBottom"
+				@click="ok"
+			>{{ hasReachedBottom ? i18n.ts.close : i18n.ts.scrollToClose }}</MkButton>
 		</div>
 	</div>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef } from 'vue';
+import { onMounted, ref, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -34,12 +40,12 @@ import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { updateCurrentAccountPartial } from '@/accounts.js';
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
 	announcement: Misskey.entities.Announcement;
-}>(), {
-});
+}>();
 
 const rootEl = useTemplateRef('rootEl');
+const bottomEl = useTemplateRef('bottomEl');
 const modal = useTemplateRef('modal');
 
 async function ok() {
@@ -74,7 +80,34 @@ function onBgClick() {
 	});
 }
 
+const hasReachedBottom = ref(false);
+
 onMounted(() => {
+	if (bottomEl.value && rootEl.value) {
+		const bottomElRect = bottomEl.value.getBoundingClientRect();
+		const rootElRect = rootEl.value.getBoundingClientRect();
+		if (
+			bottomElRect.top >= rootElRect.top &&
+			bottomElRect.top <= (rootElRect.bottom - 66) // 66 ≒ 75 * 0.9 (modalのアニメーション分)
+		) {
+			hasReachedBottom.value = true;
+			return;
+		}
+
+		const observer = new IntersectionObserver(entries => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					hasReachedBottom.value = true;
+					observer.disconnect();
+				}
+			}
+		}, {
+			root: rootEl.value,
+			rootMargin: '0px 0px -75px 0px',
+		});
+
+		observer.observe(bottomEl.value);
+	}
 });
 </script>