enhance(client): アップデートポップアップの改善

CHANGELOG_CHERRYPICK.md

@@ -13,8 +13,12 @@
 ### Server
 -
 
+---
+
 -->
 
+# 릴리즈 노트
+
 이 문서는 CherryPick의 변경 사항만 포함합니다.<br>
 전체 변경 사항을 확인하려면, [CHANGELOG.md](CHANGELOG.md) 문서를 참고하십시오.
 
@@ -47,7 +51,7 @@
 - 볼드체 텍스트 설정 추가
 - 노트 작성 폼의 디자인 개선
 - 헤더에 뒤로 가기 버튼 추가
-- 업데이트 팝업에 CherryPick 변경 사항을 확인할 수 있는 버튼 추가
+- 업데이트 팝업 개선 (Misskey와 CherryPick의 변경 사항을 직관적으로 볼 수 있도록)
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제

packages/frontend/src/components/MkUpdated.vue

@@ -1,13 +1,20 @@
 <template>
-<MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')">
+<MkModal v-if="!showChangelog" ref="modal" :zPriority="'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 full @click="whatIsNewCherryPick">{{ i18n.ts.whatIsNew }} (CherryPick)</MkButton>
+		<MkButton full @click="showChangelog = true; modal.value.close();">{{ i18n.ts.whatIsNew }}</MkButton>
 		<MkButton :class="$style.gotIt" primary full @click="close">{{ i18n.ts.gotIt }}</MkButton>
 	</div>
 </MkModal>
+<MkModal v-else-if="showChangelog" ref="modal" :zPriority="'middle'" @closed="$emit('closed')">
+	<div :class="$style.root">
+		<div :class="$style.title" style="margin: 0 0 1.5em; font-weight: normal;">{{ i18n.ts.whatIsNew }}</div>
+		<MkButton full @click="whatIsNew">Misskey</MkButton>
+		<MkButton full style="margin: 8px 0 0;" @click="whatIsNewCherryPick">CherryPick</MkButton>
+		<MkButton :class="$style.gotIt" primary full @click="close">{{ i18n.ts.ok }}</MkButton>
+	</div>
+</MkModal>
 </template>
 
 <script lang="ts" setup>
@@ -23,6 +30,8 @@ import * as os from '@/os';
 import { miLocalStorage } from '@/local-storage';
 import { fetchCustomEmojis } from '@/custom-emojis';
 
+let showChangelog = $ref(false);
+
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const whatIsNew = () => {
@@ -58,7 +67,7 @@ function cacheClear() {
 	miLocalStorage.removeItem('theme');
 	miLocalStorage.removeItem('emojis');
 	miLocalStorage.removeItem('lastEmojisFetchedAt');
-	fetchCustomEmojis();
+	fetchCustomEmojis(true);
 	unisonReload();
 }