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

@@ -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"

locales/index.d.ts

@@ -5221,6 +5221,10 @@ export interface Locale extends ILocale {
      * 通知をグルーピングして表示する
      */
     "useGroupedNotifications": string;
+    /**
+     * Allow clicking on pop-up notifications
+     */
+    "allowClickingNotifications": string;
     /**
      * メールアドレスの確認中に問題が発生しました。リンクの有効期限が切れている可能性があります。
      */

locales/ja-JP.yml

@@ -1301,6 +1301,7 @@ refreshing: "リロード中"
 pullDownToRefresh: "引っ張ってリロード"
 disableStreamingTimeline: "タイムラインのリアルタイム更新を無効にする"
 useGroupedNotifications: "通知をグルーピングして表示する"
+allowClickingNotifications: "Allow clicking on pop-up notifications"
 signupPendingError: "メールアドレスの確認中に問題が発生しました。リンクの有効期限が切れている可能性があります。"
 cwNotationRequired: "「内容を隠す」がオンの場合は注釈の記述が必要です。"
 doReaction: "リアクションする"

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'));

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,

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 {