From 5085c39440d471b00319eb4ebb2b3169f0cefcd7 Mon Sep 17 00:00:00 2001
From: CenTdemeern1 <timo.herngreen@gmail.com>
Date: Sun, 13 Oct 2024 00:57:41 +0200
Subject: [PATCH] Implement clickable notifications

I'm not sure about the get function pattern here as it doesn't include a value to base reactivity on; I might be too used to Svelte though and maybe that's fine
---
 locales/en-US.yml                                |  1 +
 locales/index.d.ts                               |  4 ++++
 locales/ja-JP.yml                                |  1 +
 packages/frontend/src/pages/settings/general.vue |  3 +++
 packages/frontend/src/store.ts                   |  4 ++++
 packages/frontend/src/ui/_common_/common.vue     | 11 +++++++++--
 6 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index ab09ccaf86..191feb4fc9 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1301,6 +1301,7 @@ refreshing: "Refreshing..."
 pullDownToRefresh: "Pull down to refresh"
 disableStreamingTimeline: "Disable real-time timeline updates"
 useGroupedNotifications: "Display grouped notifications"
+allowClickingNotifications: "Allow clicking on pop-up notifications"
 signupPendingError: "There was a problem verifying the email address. The link may have expired."
 cwNotationRequired: "If \"Hide content\" is enabled, a description must be provided."
 doReaction: "Add reaction"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 742bab2341..8e7bc661d4 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5221,6 +5221,10 @@ export interface Locale extends ILocale {
      * 通知をグルーピングして表示する
      */
     "useGroupedNotifications": string;
+    /**
+     * Allow clicking on pop-up notifications
+     */
+    "allowClickingNotifications": string;
     /**
      * メールアドレスの確認中に問題が発生しました。リンクの有効期限が切れている可能性があります。
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 67a4580560..29590b09bf 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1301,6 +1301,7 @@ refreshing: "リロード中"
 pullDownToRefresh: "引っ張ってリロード"
 disableStreamingTimeline: "タイムラインのリアルタイム更新を無効にする"
 useGroupedNotifications: "通知をグルーピングして表示する"
+allowClickingNotifications: "Allow clicking on pop-up notifications"
 signupPendingError: "メールアドレスの確認中に問題が発生しました。リンクの有効期限が切れている可能性があります。"
 cwNotationRequired: "「内容を隠す」がオンの場合は注釈の記述が必要です。"
 doReaction: "リアクションする"
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 41046a4bd9..ebf397bf5b 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -170,6 +170,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
 			</MkRadios>
 
+			<MkSwitch v-model="notificationClickable">{{ i18n.ts.allowClickingNotifications }}</MkSwitch>
+
 			<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
 		</div>
 	</FormSection>
@@ -411,6 +413,7 @@ const showAvatarDecorations = computed(defaultStore.makeGetterSetter('showAvatar
 const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
 const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
+const notificationClickable = computed(defaultStore.makeGetterSetter('notificationClickable'));
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 8665cdaf76..fe8fb25219 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -468,6 +468,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'horizontal' as 'vertical' | 'horizontal',
 	},
+	notificationClickable: {
+		where: 'device',
+		default: false,
+	},
 	enableCondensedLineForAcct: {
 		where: 'device',
 		default: false,
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 442b6479dd..2f4deddfcd 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -30,7 +30,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:enterFromClass="defaultStore.state.animation ? $style.transition_notification_enterFrom : ''"
 	:leaveToClass="defaultStore.state.animation ? $style.transition_notification_leaveTo : ''"
 >
-	<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
+	<div
+		v-for="notification in notifications" :key="notification.id" :class="$style.notification" :style="{
+			pointerEvents: getPointerEvents()
+		}"
+	>
 		<XNotification :notification="notification"/>
 	</div>
 </TransitionGroup>
@@ -101,6 +105,10 @@ if ($i) {
 		swInject();
 	}
 }
+
+function getPointerEvents() {
+	return defaultStore.state.notificationClickable ? undefined : 'none';
+}
 </script>
 
 <style lang="scss" module>
@@ -122,7 +130,6 @@ if ($i) {
 	position: fixed;
 	z-index: 3900000;
 	padding: 0 var(--margin);
-	pointer-events: none;
 	display: flex;
 
 	&.notificationsPosition_leftTop {