merge: Feat: Implement clickable notifications (!685)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/685

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: dakkar <dakkar@thenautilus.net>

locales/en-US.yml

@@ -1229,6 +1229,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

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

locales/ja-JP.yml

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

locales/zh-CN.yml

@@ -1230,6 +1230,7 @@ refreshing: "刷新中"
 pullDownToRefresh: "下拉以刷新"
 disableStreamingTimeline: "禁止实时更新时间线"
 useGroupedNotifications: "分组显示通知"
+allowClickingNotifications: "可以点击弹出的通知"
 signupPendingError: "确认电子邮件时出现错误。链接可能已过期。"
 cwNotationRequired: "在启用「隐藏内容」时必须输入注释"
 doReaction: "回应"

locales/zh-TW.yml

@@ -1230,6 +1230,7 @@ refreshing: "載入更新中"
 pullDownToRefresh: "往下拉來更新內容"
 disableStreamingTimeline: "停用時間軸的即時更新"
 useGroupedNotifications: "分組顯示通知訊息"
+allowClickingNotifications: "可以點擊彈出的通知"
 signupPendingError: "驗證您的電子郵件地址時出現問題。連結可能已過期。"
 cwNotationRequired: "如果開啟「隱藏內容」，則需要註解說明。"
 doReaction: "做出反應"

packages/frontend/src/pages/settings/general.vue

@@ -108,6 +108,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>
@@ -338,6 +340,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

@@ -398,6 +398,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'horizontal' as 'vertical' | 'horizontal',
 	},
+	notificationClickable: {
+		where: 'device',
+		default: false,
+	},
 	enableCondensedLine: {
 		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>
@@ -96,6 +100,10 @@ if ($i) {
 		swInject();
 	}
 }
+
+function getPointerEvents() {
+	return defaultStore.state.notificationClickable ? undefined : 'none';
+}
 </script>
 
 <style lang="scss" module>
@@ -117,7 +125,6 @@ if ($i) {
 	position: fixed;
 	z-index: 3900000;
 	padding: 0 var(--MI-margin);
-	pointer-events: none;
 	display: flex;
 
 	&.notificationsPosition_leftTop {