enhance(frontend): 사용자 팝업 개선

CHANGELOG_CHERRYPICK.md

@@ -60,6 +60,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: 페이지를 새로 불러오지 않고 알림 컴포넌트를 갱신할 수 있음
 - Enhance: 리노트 개선 #400
   - 리노트 시 공개 범위를 설정할 수 있음
+- Enhance: 사용자 팝업 개선
+  - 자신의 프로필인 경우, 팔로우 버튼을 프로필 편집 버튼으로 표시함
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 리액션이 '더 보기'를 눌러야 표시됨
 - Fix: 채널 이름이 긴 경우 게시 양식 표시가 깨지는 문제 (misskey-dev/misskey#12524)

packages/frontend/src/components/MkFollowButton.vue

@@ -34,6 +34,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</template>
 </button>
 <div v-else-if="disableIfFollowing && isFollowing"><i class="ti ti-circle-check"></i><span style="padding-left: 3px;">{{ i18n.ts.alreadyFollowed }}</span></div>
+<button
+	v-else-if="$i && $i.id == user.id"
+	class="_button"
+	:class="[$style.root, $style.active, { [$style.full]: full, [$style.large]: large }]"
+	@click="editProfile"
+>
+	<i class="ti ti-pencil"></i>
+</button>
 </template>
 
 <script lang="ts" setup>
@@ -48,8 +56,10 @@ import { userName } from '@/filters/user.js';
 import { globalEvents } from '@/events.js';
 import { vibrate } from '@/scripts/vibrate.js';
 import { defaultStore } from '@/store.js';
+import { useRouter } from '@/router.js';
 
 const showFollowButton = ref(false);
+const router = useRouter();
 
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.UserDetailed,
@@ -145,6 +155,10 @@ async function onClick() {
 	}
 }
 
+function editProfile() {
+	router.push('/settings/profile');
+}
+
 onMounted(() => {
 	connection.on('follow', onFollowChange);
 	connection.on('unfollow', onFollowChange);

packages/frontend/src/components/MkUserPopup.vue

@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 			<button class="_button" :class="$style.menu" @click="showMenu"><i class="ti ti-dots"></i></button>
-			<MkFollowButton v-if="$i && user.id != $i.id" v-model:user="user" :class="$style.follow" mini/>
+			<MkFollowButton v-model:user="user" :class="$style.follow" mini/>
 		</div>
 		<div v-else>
 			<MkLoading/>