feat(frontend): 通知の表示をカスタマイズできるように

CHANGELOG.md

@@ -24,6 +24,7 @@
     （デスクトップ表示ではusernameの右側のボタンからも追加可能）
 
 ### Client
+- 通知の表示をカスタマイズできるように
 - コントロールパネルのカスタム絵文字ページおよびaboutのカスタム絵文字の検索インプットで、`:emojiname1::emojiname2:`のように検索して絵文字を検索できるように
   * 絵文字ピッカーから入力可能になります
 - データセーバーモードを追加

locales/ja-JP.yml

@@ -1001,6 +1001,15 @@ accountMoved: "このユーザーは新しいアカウントに引っ越しま
 forceShowAds: "常に広告を表示する"
 addMemo: "メモを追加"
 editMemo: "メモを編集"
+notificationDisplay: "通知の表示"
+leftTop: "左上"
+rightTop: "右上"
+leftBottom: "左下"
+rightBottom: "右下"
+stackAxis: "スタック方向"
+vertical: "縦"
+horizontal: "横"
+position: "位置"
 
 _accountMigration:
   moveTo: "このアカウントを新しいアカウントに引っ越す"

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

@@ -92,6 +92,26 @@
 		</div>
 	</FormSection>
 
+	<FormSection>
+		<template #label>{{ i18n.ts.notificationDisplay }}</template>
+
+		<div class="_gaps_m">
+			<MkRadios v-model="notificationPosition">
+				<template #label>{{ i18n.ts.position }}</template>
+				<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
+				<option value="rightTop"><i class="ti ti-align-box-right-top"></i> {{ i18n.ts.rightTop }}</option>
+				<option value="leftBottom"><i class="ti ti-align-box-left-bottom"></i> {{ i18n.ts.leftBottom }}</option>
+				<option value="rightBottom"><i class="ti ti-align-box-right-bottom"></i> {{ i18n.ts.rightBottom }}</option>
+			</MkRadios>
+
+			<MkRadios v-model="notificationStackAxis">
+				<template #label>{{ i18n.ts.stackAxis }}</template>
+				<option value="vertical"><i class="ti ti-carousel-vertical"></i> {{ i18n.ts.vertical }}</option>
+				<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
+			</MkRadios>
+		</div>
+	</FormSection>
+
 	<FormSection>
 		<MkSwitch v-model="aiChanMode">{{ i18n.ts.aiChanMode }}</MkSwitch>
 	</FormSection>
@@ -181,6 +201,8 @@ const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
 const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
 const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
+const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
+const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);

packages/frontend/src/store.ts

@@ -314,6 +314,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'expand' as 'expand' | '16_9' | '1_1' | '2_3',
 	},
+	notificationPosition: {
+		where: 'device',
+		default: 'rightBottom' as 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom',
+	},
+	notificationStackAxis: {
+		where: 'device',
+		default: 'horizontal' as 'vertical' | 'horizontal',
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期

packages/frontend/src/ui/_common_/common.vue

@@ -10,14 +10,16 @@
 <XUpload v-if="uploads.length > 0"/>
 
 <TransitionGroup
-	tag="div" :class="$style.notifications"
+	tag="div" :class="[$style.notifications, $style[`notificationsPosition-${defaultStore.state.notificationPosition}`], $style[`notificationsStackAxis-${defaultStore.state.notificationStackAxis}`]]"
 	:move-class="defaultStore.state.animation ? $style.transition_notification_move : ''"
 	:enter-active-class="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
 	:leave-active-class="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
 	:enter-from-class="defaultStore.state.animation ? $style.transition_notification_enterFrom : ''"
 	:leave-to-class="defaultStore.state.animation ? $style.transition_notification_leaveTo : ''"
 >
-	<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" :class="$style.notification"/>
+	<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
+		<XNotification :notification="notification"/>
+	</div>
 </TransitionGroup>
 
 <XStreamIndicator/>
@@ -30,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 import * as misskey from 'misskey-js';
 import { swInject } from './sw-inject';
 import XNotification from './notification.vue';
@@ -85,7 +87,10 @@ if ($i) {
 .transition_notification_leaveActive {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.transition_notification_enterFrom,
+.transition_notification_enterFrom {
+	opacity: 0;
+	transform: translateX(250px);
+}
 .transition_notification_leaveTo {
 	opacity: 0;
 	transform: translateX(-250px);
@@ -94,35 +99,90 @@ if ($i) {
 .notifications {
 	position: fixed;
 	z-index: 3900000;
-	left: 0;
-	width: 250px;
-	top: 32px;
-	padding: 0 32px;
+	padding: 0 var(--margin);
 	pointer-events: none;
-	container-type: inline-size;
-}
+	display: flex;
 
-.notification {
-	& + .notification {
-		margin-top: 8px;
+	&.notificationsPosition-leftTop {
+		top: var(--margin);
+		left: 0;
+	}
+
+	&.notificationsPosition-rightTop {
+		top: var(--margin);
+		right: 0;
+	}
+
+	&.notificationsPosition-leftBottom {
+		bottom: calc(var(--minBottomSpacing) + var(--margin));
+		left: 0;
 	}
-}
 
-@media (max-width: 500px) {
-	.notifications {
-		top: initial;
+	&.notificationsPosition-rightBottom {
 		bottom: calc(var(--minBottomSpacing) + var(--margin));
-		padding: 0 var(--margin);
-		display: flex;
-		flex-direction: column-reverse;
+		right: 0;
 	}
 
-	.notification {
-		& + .notification {
-			margin-top: 0;
-			margin-bottom: 8px;
+	&.notificationsStackAxis-vertical {
+		width: 250px;
+
+		&.notificationsPosition-leftTop,
+		&.notificationsPosition-rightTop {
+			flex-direction: column;
+
+			.notification {
+				& + .notification {
+					margin-top: 8px;
+				}
+			}
+		}
+
+		&.notificationsPosition-leftBottom,
+		&.notificationsPosition-rightBottom {
+			flex-direction: column-reverse;
+
+			.notification {
+				& + .notification {
+					margin-bottom: 8px;
+				}
+			}
 		}
 	}
+
+	&.notificationsStackAxis-horizontal {
+		width: 100%;
+
+		&.notificationsPosition-leftTop,
+		&.notificationsPosition-leftBottom {
+			flex-direction: row;
+
+			.notification {
+				& + .notification {
+					margin-left: 8px;
+				}
+			}
+		}
+
+		&.notificationsPosition-rightTop,
+		&.notificationsPosition-rightBottom {
+			flex-direction: row-reverse;
+
+			.notification {
+				& + .notification {
+					margin-right: 8px;
+				}
+			}
+		}
+
+		.notification {
+			width: 250px;
+			flex-shrink: 0;
+		}
+	}
+}
+
+.notification {
+	container-type: inline-size;
 }
 </style>