enhance(frontend): 요약 탭의 리액션을 제거 & 노트 탭으로 리액션을 이동

CHANGELOG_CHERRYPICK.md

@@ -38,8 +38,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: 노트 작성 폼에서 노트를 게시한 뒤에 textarea의 높이를 원래대로 되돌림
 - Enhance: 노트 상세 페이지의 답글 목록 개선
 - Enhance: 유저 페이지 개선
-  - 요약 탭의 하이라이트를 제거
+  - 요약 탭의 하이라이트를 제거 & 노트 탭으로 하이라이트를 이동
-  - 노트 탭으로 하이라이트를 이동
+  - 요약 탭의 리액션을 제거 & 노트 탭으로 리액션을 이동
 - chore: 이모티콘 이름 필드에서 autocapitalize를 끄기 (misskey-dev/misskey#12139)
 - Fix: 외부 리소스 설치 페이지에서 페이지 캐시가 작동하는 문제 수정 (misskey-dev/misskey#12105)
 - Fix: 채널 생성/업데이트 시 실패하면 아무 것도 표시되지 않는 문제 수정 misskey-dev/misskey#11983 (misskey-dev/misskey#12142)

packages/frontend/src/pages/user/index.timeline.vue

@@ -11,9 +11,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<option value="all">{{ i18n.ts.all }}</option>
 			<option value="featured">{{ i18n.ts.featured }}</option>
 			<option value="files">{{ i18n.ts.withFiles }}</option>
+			<option value="reactions">{{ i18n.ts.reaction }}</option>
 		</MkTab>
 	</template>
 	<MkNotes v-if="include === 'featured'" :noGap="true" :pagination="featuredPagination" :class="$style.tl"/>
+	<XReactions v-else-if="include === 'reactions' && (($i && ($i.id === user.id)) || user.publicReactions)" :user="user"></XReactions>
 	<MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/>
 </MkStickyContainer>
 </template>
@@ -23,7 +25,9 @@ import { ref, computed } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
+import XReactions from '@/pages/user/reactions.vue';
 import { i18n } from '@/i18n.js';
+import { $i } from '@/account.js';
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;

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

@@ -15,7 +15,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XEvent v-else-if="tab === 'events'" :user="user"/>
 			<XActivity v-else-if="tab === 'activity'" :user="user"/>
 			<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
-			<XReactions v-else-if="tab === 'reactions'" :user="user"/>
 			<XClips v-else-if="tab === 'clips'" :user="user"/>
 			<XLists v-else-if="tab === 'lists'" :user="user"/>
 			<XPages v-else-if="tab === 'pages'" :user="user"/>
@@ -52,7 +51,6 @@ const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XEvent = defineAsyncComponent(() => import('./events.vue'));
 const XActivity = defineAsyncComponent(() => import('./activity.vue'));
 const XAchievements = defineAsyncComponent(() => import('./achievements.vue'));
-const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
 const XClips = defineAsyncComponent(() => import('./clips.vue'));
 const XLists = defineAsyncComponent(() => import('./lists.vue'));
 const XPages = defineAsyncComponent(() => import('./pages.vue'));
@@ -106,11 +104,7 @@ const headerTabs = $computed(() => user ? [{
 	key: 'achievements',
 	title: i18n.ts.achievements,
 	icon: 'ti ti-medal',
-}] : []), ...($i && ($i.id === user.id)) || user.publicReactions ? [{
+}] : []), {
-	key: 'reactions',
-	title: i18n.ts.reaction,
-	icon: 'ti ti-mood-happy',
-}] : [], {
 	key: 'clips',
 	title: i18n.ts.clips,
 	icon: 'ti ti-paperclip',

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

@@ -4,18 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkSpacer :contentMax="700">
+<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+	<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="_panel _margin">
-		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="_panel _margin">
+		<div :class="$style.header">
-			<div :class="$style.header">
+			<MkAvatar :class="$style.avatar" :user="user"/>
-				<MkAvatar :class="$style.avatar" :user="user"/>
+			<MkReactionIcon :class="$style.reaction" :reaction="item.type" :noStyle="true"/>
-				<MkReactionIcon :class="$style.reaction" :reaction="item.type" :noStyle="true"/>
+			<MkTime :time="item.createdAt" :class="$style.createdAt"/>
-				<MkTime :time="item.createdAt" :class="$style.createdAt"/>
-			</div>
-			<MkNote :key="item.id" :note="item.note"/>
 		</div>
-	</MkPagination>
+		<MkNote :key="item.id" :note="item.note"/>
-</MkSpacer>
+	</div>
+</MkPagination>
 </template>
 
 <script lang="ts" setup>