feat(client): 翻訳をIndexedDBに保存・プッシュ通知を翻訳 (#6396)

* wip

* tabun ok

* better msg

* oops

* fix lint

* Update gulpfile.ts

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* Update src/client/scripts/set-i18n-contexts.ts

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* refactor

Co-authored-by: acid-chicken <root@acid-chicken.com>

* ✨

* wip

* fix lint

* たぶんおk

* fix flush

* Translate Notification

* remove console.log

* fix

* add notifications

* remove san

* wip

* ok

* ✌️

* Update src/prelude/array.ts

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* wip

* i18n refactor

* Update init.ts

* ✌️

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

src/client/scripts/compose-notification.ts

@@ -1,58 +1,95 @@
 import getNoteSummary from '../../misc/get-note-summary';
 import getUserName from '../../misc/get-user-name';
+import { clientDb, get, bulkGet } from '../db';
+import { fromEntries } from '../../prelude/array';
 
-type Notification = {
-	title: string;
-	body: string;
-	icon: string;
-	onclick?: any;
-};
+const getTranslation = (text: string): Promise<string> => get(text, clientDb.i18n);
 
-// TODO: i18n
+export default async function(type, data): Promise<[string, NotificationOptions]> {
+	const contexts = ['deletedNote', 'invisibleNote', 'withNFiles', '_cw.poll'];
+	const locale = fromEntries(await bulkGet(contexts, clientDb.i18n) as [string, string][]);
 
-export default function(type, data): Notification {
 	switch (type) {
-		case 'driveFileCreated':
-			return {
-				title: 'File uploaded',
+		case 'driveFileCreated': // TODO (Server Side)
+			return [await getTranslation('_notification.fileUploaded'), {
 				body: data.name,
 				icon: data.url
-			};
-
+			}];
 		case 'notification':
 			switch (data.type) {
 				case 'mention':
-					return {
-						title: `${getUserName(data.user)}:`,
-						body: getNoteSummary(data),
+					return [(await getTranslation('_notification.youGotMention')).replace('{name}', getUserName(data.user)), {
+						body: getNoteSummary(data.note, locale),
 						icon: data.user.avatarUrl
-					};
+					}];
 
 				case 'reply':
-					return {
-						title: `You got reply from ${getUserName(data.user)}:`,
-						body: getNoteSummary(data),
+					return [(await getTranslation('_notification.youGotReply')).replace('{name}', getUserName(data.user)), {
+						body: getNoteSummary(data.note, locale),
 						icon: data.user.avatarUrl
-					};
+					}];
+
+				case 'renote':
+					return [(await getTranslation('_notification.youRenoted')).replace('{name}', getUserName(data.user)), {
+						body: getNoteSummary(data.note, locale),
+						icon: data.user.avatarUrl
+					}];
 
 				case 'quote':
-					return {
-						title: `${getUserName(data.user)}:`,
-						body: getNoteSummary(data),
+					return [(await getTranslation('_notification.youGotQuote')).replace('{name}', getUserName(data.user)), {
+						body: getNoteSummary(data.note, locale),
 						icon: data.user.avatarUrl
-					};
+					}];
 
 				case 'reaction':
-					return {
-						title: `${getUserName(data.user)}: ${data.reaction}:`,
-						body: getNoteSummary(data.note),
+					return [`${data.reaction} ${getUserName(data.user)}`, {
+						body: getNoteSummary(data.note, locale),
 						icon: data.user.avatarUrl
-					};
+					}];
+
+				case 'pollVote':
+					return [(await getTranslation('_notification.youGotPoll')).replace('{name}', getUserName(data.user)), {
+						body: getNoteSummary(data.note, locale),
+						icon: data.user.avatarUrl
+					}];
+
+				case 'follow':
+					return [await getTranslation('_notification.youWereFollowed'), {
+						body: getUserName(data.user),
+						icon: data.user.avatarUrl
+					}];
+
+				case 'receiveFollowRequest':
+					return [await getTranslation('_notification.youReceivedFollowRequest'), {
+						body: getUserName(data.user),
+						icon: data.user.avatarUrl
+					}];
+
+				case 'followRequestAccepted':
+					return [await getTranslation('_notification.yourFollowRequestAccepted'), {
+						body: getUserName(data.user),
+						icon: data.user.avatarUrl
+					}];
+
+				case 'groupInvited':
+					return [await getTranslation('_notification.youWereInvitedToGroup'), {
+						body: data.group.name
+					}];
 
 				default:
 					return null;
 			}
-
+		case 'unreadMessagingMessage':
+			if (data.groupId === null) {
+				return [(await getTranslation('_notification.youGotMessagingMessageFromUser')).replace('{name}', getUserName(data.user)), {
+					icon: data.user.avatarUrl,
+					tag: `messaging:user:${data.user.id}`
+				}];
+			}
+			return [(await getTranslation('_notification.youGotMessagingMessageFromGroup')).replace('{name}', data.group.name), {
+				icon: data.user.avatarUrl,
+				tag: `messaging:group:${data.group.id}`
+			}];
 		default:
 			return null;
 	}

src/client/scripts/set-i18n-contexts.ts

@@ -0,0 +1,18 @@
+import VueI18n from 'vue-i18n';
+import { clientDb, clear, bulkSet } from '../db';
+import { deepEntries, delimitEntry } from 'deep-entries';
+import { fromEntries } from '../../prelude/array';
+
+export function setI18nContexts(lang: string, version: string, i18n: VueI18n, cleardb = false) {
+	return Promise.all([
+		cleardb ? clear(clientDb.i18n) : Promise.resolve(),
+		fetch(`/assets/locales/${lang}.${version}.json`)
+	])
+	.then(([, response]) => response.json())
+	.then(locale => {
+		const flatLocaleEntries = deepEntries(locale, delimitEntry) as [string, string][];
+		bulkSet(flatLocaleEntries, clientDb.i18n);
+		i18n.locale = lang;
+		i18n.setLocaleMessage(lang, fromEntries(flatLocaleEntries));
+	});
+}