feat: Add cache clear popup

Added a popup prompting to clear cache on client update

CHANGELOG_CHERRYPICK.md

@@ -26,6 +26,7 @@
 - 클라이언트: UI 애니메이션 줄이기 옵션이 활성화된 경우 새 노트 알림의 애니메이션을 비활성화함
 - 클라이언트: 노트를 작성할 때, 단축키로 공개 범위를 전환할 수 있음
 - 클라이언트: 작성한 노트를 복사 후 편집할 수 있는 기능 추가
+- 클라이언트: 클라이언트 업데이트 시 캐시를 지우도록 유도하는 팝업 추가
 
 ### Bugfixes
 - 클라이언트: (friendly) 타임라인이 아닌 페이지에서 헤더에 블러가 적용되는 문제

locales/en-US.yml

@@ -6,6 +6,9 @@ useEnterToSend: "Press Enter to send"
 useEnterToSendDescription: "When the option is enabled, you can use the Shift + Enter key for line break."
 postFormVisibilityHotkey: "Toggle visibility with a hotkey"
 postFormVisibilityHotkeyDescription: "When writing a note, press Ctrl(control) + Shift to switch the visibility range. The hotkey to make it Local only is Ctrl(command or control) + Alt(option)."
+cherrypickUpdatedCacheClearTitle: "Clear the cache?"
+cherrypickUpdatedCacheClear: "It is <b>recommended to clear the cache</b> after the client is updated, as changes such as theme, color, and locale may not be reflected properly.\nYour account login status remains the same!"
+cherrypickUpdatedCacheClearLater: "If you want to clear the cache later, you can do it in <b>Settings</b> - <b>Clear Cache</b>!"
 headlineMisskey: "A network connected by notes"
 introMisskey: "Welcome! CherryPick is an open source, decentralized microblogging service.\nCreate \"notes\" to share your thoughts with everyone around you. 📡\nWith \"reactions\", you can also quickly express your feelings about everyone's notes. 👍\nLet's explore a new world! 🚀"
 poweredByMisskeyDescription: "{name} is one of the services powered by the open source platform <b>CherryPick</b> (referred to as a \"CherryPick instance\")."

locales/ja-JP.yml

@@ -6,6 +6,9 @@ useEnterToSend: "Enterキーを押して送信"
 useEnterToSendDescription: "オプションを有効にすると、行替えはShift＋Enterキーでできます。"
 postFormVisibilityHotkey: "ショートカットキーで公開範囲を切り替える"
 postFormVisibilityHotkeyDescription: "ノートを作成する際、Ctrl(control) + Shiftキーを押すと公開範囲を切り替えることができます。ローカルのみショートカットキーは、Ctrl(commandまたはcontrol) + Alt(option)キーです。"
+cherrypickUpdatedCacheClearTitle: "キャッシュをクリアしましょうか？"
+cherrypickUpdatedCacheClear: "テーマや色、ロケールなどの変更が正しく反映されない可能性があるため、クライアントが更新されたら<b>キャッシュをクリアすることをお勧め</b>します。\nアカウントログイン状態はそのまま維持されます！"
+cherrypickUpdatedCacheClearLater: "あとでキャッシュをクリアするには、<b>設定</b> - <b>キャッシュをクリア</b>でできます！"
 headlineMisskey: "ノートでつながるネットワーク"
 introMisskey: "ようこそ！CherryPickは、オープンソースの分散型マイクロブログサービスです。\n「ノート」を作成して、いま起こっていることを共有したり、あなたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素早く反応を追加することもできます👍\n新しい世界を探検しよう🚀"
 poweredByMisskeyDescription: "{name}は、オープンソースのプラットフォーム<b>CherryPick</b>を使ったサービス(CherryPickインスタンスと呼ばれます)のひとつです。"

locales/ko-KR.yml

@@ -6,6 +6,9 @@ useEnterToSend: "Enter 키를 눌러 보내기"
 useEnterToSendDescription: "옵션을 활성화하면 줄 바꿈은 Shift + Enter 키로 할 수 있어요."
 postFormVisibilityHotkey: "단축키로 공개 범위 전환하기"
 postFormVisibilityHotkeyDescription: "노트를 작성할 때, Ctrl(control) + Shift 키를 누르면 공개 범위를 전환할 수 있어요. 로컬에만 보이게 하는 단축키는 Ctrl(command 또는 control) + Alt(option) 키예요."
+cherrypickUpdatedCacheClearTitle: "캐시를 지울까요?"
+cherrypickUpdatedCacheClear: "테마 및 색상, 로케일 등의 변경 사항이 제대로 반영되지 않을 수 있기 때문에, 클라이언트가 업데이트되면 <b>캐시를 지울 것을 권장</b>해요.\n계정 로그인 상태는 그대로 유지돼요!"
+cherrypickUpdatedCacheClearLater: "나중에 캐시를 지우려면 <b>설정</b> - <b>캐시 지우기</b>에서 할 수 있어요!"
 headlineMisskey: "노트로 연결되는 네트워크"
 introMisskey: "어서오세요! CherryPick은 오픈 소스 분산형 마이크로 블로그 서비스에요.\n\"노트\" 를 작성해서, 지금 일어나고 있는 일을 공유하거나, 당신만의 이야기를 모두에게 발신할 수 있어요📡\n\"리액션\" 기능으로, 친구의 노트에 총알같이 반응을 추가할 수도 있어요👍\n새로운 세계를 탐험해 보세요🚀"
 poweredByMisskeyDescription: "{name}은(는) 오픈소스 플랫폼 <b>CherryPick</b>을 사용한 서비스(CherryPick 인스턴스라고 불려요) 중 하나예요."

packages/frontend/src/components/MkUpdated.vue

@@ -1,10 +1,10 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
 	<div :class="$style.root">
 		<div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
 		<div :class="$style.version">✨{{ version }}🚀</div>
 		<MkButton full @click="whatIsNew">{{ i18n.ts.whatIsNew }}</MkButton>
-		<MkButton :class="$style.gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
+		<MkButton :class="$style.gotIt" primary full @click="close">{{ i18n.ts.gotIt }}</MkButton>
 	</div>
 </MkModal>
 </template>
@@ -17,14 +17,45 @@ import MkSparkle from '@/components/MkSparkle.vue';
 import { version } from '@/config';
 import { i18n } from '@/i18n';
 import { confetti } from '@/scripts/confetti';
+import { unisonReload } from '@/scripts/unison-reload';
+import * as os from '@/os';
+import { miLocalStorage } from '@/local-storage';
+import { fetchCustomEmojis } from '@/custom-emojis';
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const whatIsNew = () => {
-	modal.value.close();
+	// modal.value.close();
 	window.open(`https://misskey-hub.net/docs/releases.html#_${version.replace(/\./g, '-')}`, '_blank');
 };
 
+const close = async () => {
+	modal.value.close();
+	const { canceled } = await os.confirm({
+		type: 'info',
+		title: i18n.ts.cherrypickUpdatedCacheClearTitle,
+		text: i18n.ts.cherrypickUpdatedCacheClear,
+	});
+	if (canceled) {
+		await os.alert({
+			type: 'info',
+			text: i18n.ts.cherrypickUpdatedCacheClearLater,
+		});
+		return;
+	}
+	cacheClear();
+};
+
+function cacheClear() {
+	os.waiting();
+	miLocalStorage.removeItem('locale');
+	miLocalStorage.removeItem('theme');
+	miLocalStorage.removeItem('emojis');
+	miLocalStorage.removeItem('lastEmojisFetchedAt');
+	fetchCustomEmojis();
+	unisonReload();
+}
+
 onMounted(() => {
 	confetti({
 		duration: 1000 * 3,
@@ -56,4 +87,8 @@ onMounted(() => {
 .gotIt {
 	margin: 8px 0 0 0;
 }
+
+.cacheClear {
+	composes: gotIt;
+}
 </style>