enhance(client): emojisはIndexedDBに保存する (#10121)

* enhance(client): emojisはIndexedDBに保存する

* lastEmojisFetchedAt

2 files changed, 19 insertions, 10 deletions

diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 9ce370e7e8..a89a420d77 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -3,9 +3,10 @@ import * as Misskey from 'misskey-js';
 import { api, apiGet } from './os';
 import { miLocalStorage } from './local-storage';
 import { stream } from '@/stream';
+import { get, set } from '@/scripts/idb-proxy';
 
-const storageCache = miLocalStorage.getItem('emojis');
-export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
+const storageCache = await get('emojis');
+export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(Array.isArray(storageCache) ? storageCache : []);
 export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 	const categories = new Set<string>();
 	for (const emoji of customEmojis.value) {
@@ -18,31 +19,39 @@ export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 
 stream.on('emojiAdded', emojiData => {
 	customEmojis.value = [emojiData.emoji, ...customEmojis.value];
+	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiUpdated', emojiData => {
 	customEmojis.value = customEmojis.value.map(item => emojiData.emojis.find(search => search.name === item.name) as Misskey.entities.CustomEmoji ?? item);
+	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiDeleted', emojiData => {
 	customEmojis.value = customEmojis.value.filter(item => !emojiData.emojis.some(search => search.name === item.name));
+	set('emojis', customEmojis.value);
 });
 
 export async function fetchCustomEmojis(force = false) {
 	const now = Date.now();
+	const needsMigration = miLocalStorage.getItem('emojis') != null;
 
 	let res;
-	if (force) {
+	if (force || needsMigration) {
 		res = await api('emojis', {});
 	} else {
-		const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
-		if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
+		const lastFetchedAt = await get('lastEmojisFetchedAt');
+		if (lastFetchedAt && (now - lastFetchedAt) < 1000 * 60 * 60) return;
 		res = await apiGet('emojis', {});
 	}
 
 	customEmojis.value = res.emojis;
-	miLocalStorage.setItem('emojis', JSON.stringify(res.emojis));
-	miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
+	set('emojis', res.emojis);
+	set('lastEmojisFetchedAt', now);
+	if (needsMigration) {
+		miLocalStorage.removeItem('emojis');
+		miLocalStorage.removeItem('lastEmojisFetchedAt');
+	}
 }
 
 let cachedTags;
diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts
index e6b828696c..38462c8a65 100644
--- a/packages/frontend/src/local-storage.ts
+++ b/packages/frontend/src/local-storage.ts
@@ -2,8 +2,6 @@ type Keys =
 	'v' |
 	'lastVersion' |
 	'instance' |
-	'emojis' | // TODO: indexed db
-	'lastEmojisFetchedAt' |
 	'account' |
 	'accounts' |
 	'latestDonationInfoShownAt' |
@@ -28,7 +26,9 @@ type Keys =
 	`miux:${string}` |
 	`ui:folder:${string}` |
 	`themes:${string}` |
-	`aiscript:${string}`;
+	`aiscript:${string}` |
+	'lastEmojisFetchedAt' | // DEPRECATED, stored in indexeddb (13.9.0~)
+	'emojis' // DEPRECATED, stored in indexeddb (13.9.0~);
 
 export const miLocalStorage = {
 	getItem: (key: Keys) => window.localStorage.getItem(key),