From a32068422b6eb8f50a43bfe45007c738fe30ca8d Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 8 Nov 2023 17:29:47 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkChatPreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkChatPreview.vue b/packages/frontend/src/components/MkChatPreview.vue
index f11339940b..f5ca5d09c3 100644
--- a/packages/frontend/src/components/MkChatPreview.vue
+++ b/packages/frontend/src/components/MkChatPreview.vue
@@ -149,7 +149,7 @@ function isMe(message) {
 @container (max-width: 500px) {
   .message {
     > div {
-      padding: 20px 30px;
+      padding: 14px 20px;
       font-size: .9em;
     }
   }

From 11132f35c25daab7dfa5035b2f7a166e257bda1f Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 8 Nov 2023 17:29:52 +0900
Subject: [PATCH 2/5] update CHANGELOG_CHERRYPICK.md

---
 CHANGELOG_CHERRYPICK.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 615c161c78..90001d7be1 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -48,7 +48,6 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: 유저 페이지 개선
   - 요약 탭의 하이라이트를 제거 & 노트 탭으로 하이라이트를 이동
   - 요약 탭의 리액션을 제거 & 노트 탭으로 리액션을 이동
-- Enhance: 모바일에서 채팅 좌우 여백 조정
 - chore: 이모티콘 이름 필드에서 autocapitalize를 끄기 (misskey-dev/misskey#12139)
 - Fix: 외부 리소스 설치 페이지에서 페이지 캐시가 작동하는 문제 수정 (misskey-dev/misskey#12105)
 - Fix: 채널 생성/업데이트 시 실패하면 아무 것도 표시되지 않는 문제 수정 misskey-dev/misskey#11983 (misskey-dev/misskey#12142)

From f8e47718a8ce211c24fbd78d9a9cf1812f3def45 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 8 Nov 2023 17:31:49 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix(frontend):=20'=EB=AA=A8=EB=93=A0=20?=
 =?UTF-8?q?=EB=AF=B8=EB=94=94=EC=96=B4=20=EB=85=B8=ED=8A=B8=20=EA=B0=84?=
 =?UTF-8?q?=EB=9E=B5=ED=99=94=ED=95=98=EA=B8=B0'=20=EC=98=B5=EC=85=98?=
 =?UTF-8?q?=EC=9D=84=20=ED=99=9C=EC=84=B1=ED=99=94=ED=95=98=EB=A9=B4=20?=
 =?UTF-8?q?=EB=AF=B8=EB=94=94=EC=96=B4=EA=B0=80=20=EC=95=84=EB=8B=8C=20?=
 =?UTF-8?q?=EB=85=B8=ED=8A=B8=EC=97=90=EB=8F=84=20'=EB=8B=AB=EA=B8=B0'=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=B4=20=ED=91=9C=EC=8B=9C=EB=90=A0=20?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=88=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                     | 1 +
 packages/frontend/src/components/MkNote.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 90001d7be1..dcd3894d99 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -59,6 +59,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
   - 일부 페이지에서 액션 항목이 존재해도 버튼이 표시되지 않을 수 있음
 - Fix: 네비게이션 메뉴의 하단 프로필 영역이 잘못된 디자인으로 표시됨
 - Fix: 노트를 인용할 때 입력란에 자동으로 포커스가 맞춰지지 않음
+- Fix: '모든 미디어 노트 간략화하기' 옵션을 활성화하면 미디어가 아닌 노트에도 '닫기' 버튼이 표시될 수 있음
 
 ### Server
 - Feat: 연합에서 노트 수정이 반영됨 (libnare/cp-castella#1)
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 3146bd746e..4bf889b9ca 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -114,7 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<span v-if="appearNote.files.length > 0" :class="$style.label">({{ collapseLabel }})</span>
 					</span>
 				</button>
-				<button v-else-if="(isLong || (isMFM && defaultStore.state.collapseDefault) || defaultStore.state.allMediaNoteCollapse) && !collapsed" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" :class="$style.showLess" class="_button" @click="collapsed = true">
+				<button v-else-if="(isLong || (isMFM && defaultStore.state.collapseDefault) || (appearNote.files.length > 0 && defaultStore.state.allMediaNoteCollapse)) && !collapsed" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" :class="$style.showLess" class="_button" @click="collapsed = true">
 					<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
 				</button>
 			</div>

From 06fc285eb74589b7a56c9aa4d38617c22de6b04f Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 8 Nov 2023 17:31:55 +0900
Subject: [PATCH 4/5] refactor

---
 .../src/components/MkSubNoteContent.vue       | 314 ++++++++----------
 1 file changed, 143 insertions(+), 171 deletions(-)

diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 1dab7d82a4..0a72393eae 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -9,7 +9,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts._ffVisibility.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-		<Mfm v-if="note.text" :text="note.text" :author="note.user" :emojiUrls="note.emojis"/>
+		<Mfm
+			v-if="note.text"
+			:parsedNodes="parsed"
+			:text="note.text"
+			:author="note.user"
+			:nyaize="'account'"
+			:emojiUrls="note.emojis"
+			:enableEmojiMenu="true"
+			:enableEmojiMenuReaction="true"
+		/>
 		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 		<div v-if="defaultStore.state.showTranslateButtonInNote && instance.translatorAvailable && note.text" style="padding-top: 5px; color: var(--accent);">
 			<button v-if="!(translating || translation)" ref="translateButton" class="_button" @mousedown="translate()">{{ i18n.ts.translateNote }}</button>
@@ -36,21 +45,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
-	<button v-if="(isLong || (isMFM && defaultStore.state.collapseDefault) || note.files.length > 0 || note.poll || defaultStore.state.allMediaNoteCollapse) && collapsed" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" :class="$style.fade" class="_button" @click="collapsed = false;">
+	<button v-if="(isLong || (isMFM && defaultStore.state.collapseDefault) || note.files.length > 0 || note.poll) && collapsed" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" :class="$style.fade" class="_button" @click="collapsed = false;">
 		<span :class="$style.fadeLabel">
 			{{ i18n.ts.showMore }}
 			<span v-if="note.files.length > 0" :class="$style.label">({{ collapseLabel }})</span>
 		</span>
 	</button>
-	<button v-else-if="(isLong || (isMFM && defaultStore.state.collapseDefault) || note.files.length > 0 || note.poll || defaultStore.state.allMediaNoteCollapse) && !collapsed" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" :class="$style.showLess" class="_button" @click="collapsed = true;">
+	<button v-else-if="(isLong || (isMFM && defaultStore.state.collapseDefault) || note.files.length > 0 || note.poll) && !collapsed" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" :class="$style.showLess" class="_button" @click="collapsed = true;">
 		<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
 	</button>
 	<div v-if="showSubNoteFooterButton">
-		<MkReactionsViewer :note="note" :maxNumber="16">
+		<MkReactionsViewer v-show="note.cw == null || showContent" :note="note" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
 			<template #more>
-				<button class="_button" :class="$style.reactionDetailsButton" @click="showReactions">
-					{{ i18n.ts.more }}
-				</button>
+				<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
 			</template>
 		</MkReactionsViewer>
 		<footer :class="$style.footer">
@@ -101,7 +108,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, inject, Ref, ref, shallowRef } from 'vue';
+import { computed, defineAsyncComponent, inject, provide, Ref, ref, shallowRef, watch } from 'vue';
+import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
 import * as os from '@/os.js';
 import MkMediaList from '@/components/MkMediaList.vue';
@@ -119,14 +127,30 @@ import { notePage } from '@/filters/note.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
-import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js';
+import { getNoteClipMenu, getNoteMenu, getRenoteMenu, getRenoteOnly } from '@/scripts/get-note-menu.js';
 import { deepClone } from '@/scripts/clone.js';
 import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { useNoteCapture } from '@/scripts/use-note-capture.js';
-import { MenuItem } from '@/types/menu.js';
 import { concat } from '@/scripts/array.js';
 
+const props = withDefaults(defineProps<{
+  note: Misskey.entities.Note;
+  mock?: boolean;
+  showSubNoteFooterButton: boolean;
+}>(), {
+	mock: false,
+});
+
+provide('mock', props.mock);
+
+const emit = defineEmits<{
+  (ev: 'reaction', emoji: string): void;
+  (ev: 'removeReaction', emoji: string): void;
+}>();
+
+let note = $ref(deepClone(props.note));
+
 const el = shallowRef<HTMLElement>();
 const menuButton = shallowRef<HTMLElement>();
 const renoteButton = shallowRef<HTMLElement>();
@@ -141,142 +165,58 @@ const showContent = ref(true);
 const translation = ref<any>(null);
 const translating = ref(false);
 
-const collapseLabel = computed(() => {
-	return concat([
-		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length })] : [],
-	] as string[][]).join(' / ');
-});
-
-const props = defineProps<{
-	note: Misskey.entities.Note;
-  showSubNoteFooterButton: boolean;
-}>();
-
-let note = $ref(deepClone(props.note));
+const parsed = props.note.text ? mfm.parse(props.note.text) : null;
 
 const isLong = shouldCollapsed(props.note, []);
-const isMFM = shouldMfmCollapsed(props.note, []);
+const isMFM = shouldMfmCollapsed(props.note);
 
-const collapsed = $ref(isLong || (isMFM && defaultStore.state.collapseDefault) || defaultStore.state.allMediaNoteCollapse || note.files.length > 0 || note.poll);
+const collapsed = $ref(isLong || (isMFM && defaultStore.state.collapseDefault) || props.note.files.length > 0 || props.note.poll);
 
-useNoteCapture({
-	rootEl: el,
-	note: $$(note),
-	pureNote: $$(note),
-	isDeletedRef: isDeleted,
+const collapseLabel = computed(() => {
+	return concat([
+		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length })] : [],
+	] as string[][]).join(' / ');
 });
 
-useTooltip(renoteButton, async (showing) => {
-	const renotes = await os.api('notes/renotes', {
-		noteId: props.note.id,
-		limit: 11,
+if (props.mock) {
+	watch(() => props.note, (to) => {
+		note = deepClone(to);
+	}, { deep: true });
+} else {
+	useNoteCapture({
+		rootEl: el,
+		note: $$(note),
+		pureNote: $$(note),
+		isDeletedRef: isDeleted,
 	});
+}
 
-	const users = renotes.map(x => x.user);
+if (!props.mock) {
+	useTooltip(renoteButton, async (showing) => {
+		const renotes = await os.api('notes/renotes', {
+			noteId: props.note.id,
+			limit: 11,
+		});
 
-	if (users.length < 1) return;
+		const users = renotes.map(x => x.user);
 
-	os.popup(MkUsersTooltip, {
-		showing,
-		users,
-		count: props.note.renoteCount,
-		targetElement: renoteButton.value,
-	}, {}, 'closed');
-});
+		if (users.length < 1) return;
 
-function menu(viaKeyboard = false): void {
-	const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
-	os.popupMenu(menu, menuButton.value, {
-		viaKeyboard,
-	}).then(focus).finally(cleanup);
-}
-
-async function clip() {
-	os.popupMenu(await getNoteClipMenu({ note: note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
-}
-
-async function translate(): Promise<void> {
-	if (translation.value != null) return;
-	translating.value = true;
-	const res = await os.api('notes/translate', {
-		noteId: props.note.id,
-		targetLang: miLocalStorage.getItem('lang') ?? navigator.language,
+		os.popup(MkUsersTooltip, {
+			showing,
+			users,
+			count: props.note.renoteCount,
+			targetElement: renoteButton.value,
+		}, {}, 'closed');
 	});
-	translating.value = false;
-	translation.value = res;
 }
 
 function renote(viaKeyboard = false) {
 	pleaseLogin();
 	showMovedDialog();
 
-	let items = [] as MenuItem[];
-
-	if (props.note.channel) {
-		items = items.concat([{
-			text: i18n.ts.inChannelRenote,
-			icon: 'ti ti-repeat',
-			action: () => {
-				const el = renoteButton.value as HTMLElement | null | undefined;
-				if (el) {
-					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(MkRippleEffect, { x, y }, {}, 'end');
-				}
-
-				os.api('notes/create', {
-					renoteId: props.note.id,
-					channelId: props.note.channelId,
-				}).then(() => {
-					os.noteToast(i18n.ts.renoted, 'renote');
-				});
-			},
-		}, {
-			text: i18n.ts.inChannelQuote,
-			icon: 'ti ti-quote',
-			action: () => {
-				os.post({
-					renote: props.note,
-					channel: props.note.channel,
-				}, () => {
-					focus();
-				});
-			},
-		}, null]);
-	}
-
-	items = items.concat([{
-		text: i18n.ts.renote,
-		icon: 'ti ti-repeat',
-		action: () => {
-			const el = renoteButton.value as HTMLElement | null | undefined;
-			if (el) {
-				const rect = el.getBoundingClientRect();
-				const x = rect.left + (el.offsetWidth / 2);
-				const y = rect.top + (el.offsetHeight / 2);
-				os.popup(MkRippleEffect, { x, y }, {}, 'end');
-			}
-
-			os.api('notes/create', {
-				renoteId: props.note.id,
-			}).then(() => {
-				os.noteToast(i18n.ts.renoted, 'renote');
-			});
-		},
-	}, {
-		text: i18n.ts.quote,
-		icon: 'ti ti-quote',
-		action: () => {
-			os.post({
-				renote: props.note,
-			}, () => {
-				focus();
-			});
-		},
-	}]);
-
-	os.popupMenu(items, renoteButton.value, {
+	const { menu } = getRenoteMenu({ note: note, renoteButton, mock: props.mock });
+	os.popupMenu(menu, renoteButton.value, {
 		viaKeyboard,
 	});
 }
@@ -285,49 +225,14 @@ async function renoteOnly() {
 	pleaseLogin();
 	showMovedDialog();
 
-	if (defaultStore.state.showRenoteConfirmPopup) {
-		const { canceled } = await os.confirm({
-			type: 'info',
-			text: i18n.ts.renoteConfirm,
-			caption: i18n.ts.renoteConfirmDescription,
-		});
-		if (canceled) return;
-	}
-
-	if (props.note.channel) {
-		const el = renoteButton.value as HTMLElement | null | undefined;
-		if (el) {
-			const rect = el.getBoundingClientRect();
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
-			os.popup(MkRippleEffect, { x, y }, {}, 'end');
-		}
-
-		os.api('notes/create', {
-			renoteId: props.note.id,
-			channelId: props.note.channelId,
-		}).then(() => {
-			os.noteToast(i18n.ts.renoted, 'renote');
-		});
-	}
-
-	const el = renoteButton.value as HTMLElement | null | undefined;
-	if (el) {
-		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(MkRippleEffect, { x, y }, {}, 'end');
-	}
-
-	os.api('notes/create', {
-		renoteId: props.note.id,
-	}).then(() => {
-		os.noteToast(i18n.ts.renoted, 'renote');
-	});
+	await getRenoteOnly({ note: note, renoteButton, mock: props.mock });
 }
 
 function quote(viaKeyboard = false): void {
 	pleaseLogin();
+	if (props.mock) {
+		return;
+	}
 	if (props.note.channel) {
 		os.post({
 			renote: props.note,
@@ -346,8 +251,12 @@ function quote(viaKeyboard = false): void {
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
+	if (props.mock) {
+		return;
+	}
 	os.post({
 		reply: props.note,
+		channel: props.note.channel,
 		animation: !viaKeyboard,
 	}, () => {
 		focus();
@@ -358,6 +267,9 @@ function react(viaKeyboard = false): void {
 	pleaseLogin();
 	showMovedDialog();
 	if (props.note.reactionAcceptance === 'likeOnly') {
+		if (props.mock) {
+			return;
+		}
 		os.api('notes/reactions/create', {
 			noteId: props.note.id,
 			reaction: '❤️',
@@ -372,6 +284,10 @@ function react(viaKeyboard = false): void {
 	} else {
 		blur();
 		reactionPicker.show(reactButton.value, reaction => {
+			if (props.mock) {
+				emit('reaction', reaction);
+				return;
+			}
 			toggleReaction(reaction);
 		}, () => {
 			focus();
@@ -412,6 +328,11 @@ async function toggleReaction(reaction) {
 function heartReact(): void {
 	pleaseLogin();
 	showMovedDialog();
+
+	if (props.mock) {
+		return;
+	}
+
 	os.api('notes/reactions/create', {
 		noteId: props.note.id,
 		reaction: '❤️',
@@ -431,15 +352,66 @@ function heartReact(): void {
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
+
+	if (props.mock) {
+		emit('removeReaction', oldReaction);
+		return;
+	}
+
 	os.api('notes/reactions/delete', {
 		noteId: note.id,
 	});
 }
 
-function showReactions(): void {
-	os.popup(defineAsyncComponent(() => import('@/components/MkReactedUsersDialog.vue')), {
+function menu(viaKeyboard = false): void {
+	if (props.mock) {
+		return;
+	}
+
+	const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
+	os.popupMenu(menu, menuButton.value, {
+		viaKeyboard,
+	}).then(focus).finally(cleanup);
+}
+
+async function clip() {
+	if (props.mock) {
+		return;
+	}
+
+	os.popupMenu(await getNoteClipMenu({ note: note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
+}
+
+async function translate(): Promise<void> {
+	if (translation.value != null) return;
+	translating.value = true;
+
+	if (props.mock) {
+		return;
+	}
+
+	const res = await os.api('notes/translate', {
 		noteId: props.note.id,
-	}, {}, 'closed');
+		targetLang: miLocalStorage.getItem('lang') ?? navigator.language,
+	});
+	translating.value = false;
+	translation.value = res;
+}
+
+function focus() {
+	el.value.focus();
+}
+
+function blur() {
+	el.value.blur();
+}
+
+function emitUpdReaction(emoji: string, delta: number) {
+	if (delta < 0) {
+		emit('removeReaction', emoji);
+	} else if (delta > 0) {
+		emit('reaction', emoji);
+	}
 }
 </script>
 
@@ -458,7 +430,7 @@ function showReactions(): void {
 			bottom: 0;
 			left: 0;
 			width: 100%;
-			height: 64px;
+			height: 74px;
 			background: linear-gradient(0deg, var(--panel), var(--X15));
 
 			> .fadeLabel {

From d13d8a7f5aabcaf3d2cdbe0925a16dfe77557f22 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 8 Nov 2023 17:42:32 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix(frontend):=20=EC=9C=A0=EC=A0=80=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=EC=97=90=EC=84=9C=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=9D=B4=20=EC=9E=98?=
 =?UTF-8?q?=EB=AA=BB=20=ED=91=9C=EC=8B=9C=EB=90=98=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                                  | 1 +
 packages/frontend/src/components/global/CPPageHeader.vue | 5 ++++-
 packages/frontend/src/components/global/MkPageHeader.vue | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index dcd3894d99..1dbd782030 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -60,6 +60,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Fix: 네비게이션 메뉴의 하단 프로필 영역이 잘못된 디자인으로 표시됨
 - Fix: 노트를 인용할 때 입력란에 자동으로 포커스가 맞춰지지 않음
 - Fix: '모든 미디어 노트 간략화하기' 옵션을 활성화하면 미디어가 아닌 노트에도 '닫기' 버튼이 표시될 수 있음
+- Fix: 유저 프로필에서 헤더 디자인이 잘못 표시되는 문제
 
 ### Server
 - Feat: 연합에서 노트 수정이 반영됨 (libnare/cp-castella#1)
diff --git a/packages/frontend/src/components/global/CPPageHeader.vue b/packages/frontend/src/components/global/CPPageHeader.vue
index ecd5e0a28a..0c0937c041 100644
--- a/packages/frontend/src/components/global/CPPageHeader.vue
+++ b/packages/frontend/src/components/global/CPPageHeader.vue
@@ -13,7 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div v-else-if="!thin_ && narrow && !hideTitle && canBack" :class="$style.buttonsLeft"/>
 	<div v-else-if="!thin_ && canBack && (actions && actions.length > 0)" :class="$style.buttonsLeft"/>
-	<div v-if="!thin_ && canBack && (actions && actions.length === 2 && ['index', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name))" :class="$style.buttonsLeft"/>
+	<div v-if="!thin_ && canBack && (actions && actions.length > 1 && ['index', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name))" :class="$style.buttonsLeft"/>
+	<div v-if="metadata && metadata.avatar && !thin_ && mainRouter.currentRoute.value.name === 'user' && ($i != null && $i.id != metadata.avatar.id)">
+		<div style="width: 50px;"/>
+	</div>
 
 	<template v-if="metadata">
 		<div v-if="!hideTitle" :class="[$style.titleContainer, { [$style.titleContainer_canBack]: !canBack }]">
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index da6a7996e5..1fd80f81a7 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -23,6 +23,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="!thin_ && narrow && (actions && actions.length > 1) && !isFriendly && mainRouter.currentRoute.value.name !== 'index'">
 			<div style="width: 34px;"/>
 		</div>
+		<div v-if="metadata && metadata.avatar && !thin_ && mainRouter.currentRoute.value.name === 'user' && ($i != null && $i.id != metadata.avatar.id)">
+			<div style="width: 50px;"/>
+		</div>
 
 		<template v-if="metadata">
 			<div v-if="!hideTitle" :class="[$style.titleContainer, { [$style.titleContainer_canBack]: !canBack }]" @click="top">