enhance(frontend): Extend links to profile pages (#16417)

* feat(frontend): Add a link to profile to banner and avatar

Increase the area of links to click easily.

* chore(frontend): Change the link of notes count

Move to the notes tab for better userbility.

* feat(frontend): Add links to notes, followers and following

For easy transition to the shown information.

* docs(changelog): Add a description about this change

Users can notice what's changed by this PR.

* style(frontend): Fix the linter error

Remove the duplicated space.

* refactor(frontend): Don't surround the banners with links

It may conflict with the follow buttons.

* docs(changelog): Move the changes to the latest version

This feature is not merged and will be released in the latest version.

Signed-off-by: Souma <101255979+5ouma@users.noreply.github.com>

---------

Signed-off-by: Souma <101255979+5ouma@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### Client
 - Enhance: 管理しているチャンネルの見分けがつきやすくなるように
+- Enhance: プロフィールへのリンクをユーザーポップアップのアバターに追加
+- Enhance: ユーザーのノート、フォロー、フォロワーページへのリンクをユーザーポップアップに追加
 - Enhance: プッシュ通知を行うための権限確認をより確実に行うように
 - Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
 - Fix: ナビゲーションバーのリアルタイムモード切替ボタンの状態をよりわかりやすく表示するように

packages/frontend/src/components/MkUserInfo.vue

@@ -6,7 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div class="_panel" :class="$style.root">
 	<div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${prefer.s.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` } : ''"></div>
-	<MkAvatar :class="$style.avatar" :user="user" indicator/>
+	<MkA :to="userPage(user)">
+		<MkAvatar :class="$style.avatar" :user="user" indicator/>
+	</MkA>
 	<div :class="$style.title">
 		<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p :class="$style.username"><MkAcct :user="user"/></p>
@@ -19,15 +21,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
 	</div>
 	<div :class="$style.status">
-		<div :class="$style.statusItem">
+		<MkA :class="$style.statusItem" :to="userPage(user, 'notes')">
 			<p :class="$style.statusItemLabel">{{ i18n.ts.notes }}</p><span :class="$style.statusItemValue">{{ number(user.notesCount) }}</span>
-		</div>
+		</MkA>
-		<div v-if="isFollowingVisibleForMe(user)" :class="$style.statusItem">
+		<MkA v-if="isFollowingVisibleForMe(user)" :class="$style.statusItem" :to="userPage(user, 'following')">
 			<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue">{{ number(user.followingCount) }}</span>
-		</div>
+		</MkA>
-		<div v-if="isFollowersVisibleForMe(user)" :class="$style.statusItem">
+		<MkA v-if="isFollowersVisibleForMe(user)" :class="$style.statusItem" :to="userPage(user, 'followers')">
 			<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue">{{ number(user.followersCount) }}</span>
-		</div>
+		</MkA>
 	</div>
 	<MkFollowButton v-if="user.id != $i?.id" :class="$style.follow" :user="user" mini/>
 </div>

packages/frontend/src/components/MkUserPopup.vue

@@ -22,7 +22,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<path d="M64,32C81.661,32 96,46.339 96,64C95.891,72.184 104,72 104,72C104,72 74.096,80 64,80C52.755,80 24,72 24,72C24,72 31.854,72.018 32,64C32,46.339 46.339,32 64,32Z" style="fill: var(--MI_THEME-popup);"/>
 				</g>
 			</svg>
-			<MkAvatar :class="$style.avatar" :user="user" indicator/>
+			<MkA :to="userPage(user)">
+				<MkAvatar :class="$style.avatar" :user="user" indicator/>
+			</MkA>
 			<div :class="$style.title">
 				<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 				<div :class="$style.username"><MkAcct :user="user"/></div>
@@ -32,18 +34,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</div>
 			</div>
 			<div :class="$style.status">
-				<div :class="$style.statusItem">
+				<MkA :class="$style.statusItem" :to="userPage(user, 'notes')">
 					<div :class="$style.statusItemLabel">{{ i18n.ts.notes }}</div>
 					<div>{{ number(user.notesCount) }}</div>
-				</div>
+				</MkA>
-				<div v-if="isFollowingVisibleForMe(user)" :class="$style.statusItem">
+				<MkA v-if="isFollowingVisibleForMe(user)" :class="$style.statusItem" :to="userPage(user, 'following')">
 					<div :class="$style.statusItemLabel">{{ i18n.ts.following }}</div>
 					<div>{{ number(user.followingCount) }}</div>
-				</div>
+				</MkA>
-				<div v-if="isFollowersVisibleForMe(user)" :class="$style.statusItem">
+				<MkA v-if="isFollowersVisibleForMe(user)" :class="$style.statusItem" :to="userPage(user, 'followers')">
 					<div :class="$style.statusItemLabel">{{ i18n.ts.followers }}</div>
 					<div>{{ number(user.followersCount) }}</div>
-				</div>
+				</MkA>
 			</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/>

packages/frontend/src/pages/user/home.vue

@@ -113,7 +113,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</dl>
 						</div>
 						<div class="status">
-							<MkA :to="userPage(user)">
+							<MkA :to="userPage(user, 'notes')">
 								<b>{{ number(user.notesCount) }}</b>
 								<span>{{ i18n.ts.notes }}</span>
 							</MkA>