enhance(frontend): 유저 페이지 개선

CHANGELOG_CHERRYPICK.md

@@ -32,6 +32,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Feat: 본문 미리보기의 프로필을 표시하지 않도록 설정할 수 있음
 - Enhance: 노트 작성 폼에서 노트를 게시한 뒤에 textarea의 높이를 원래대로 되돌리도록
 - Enhance: 노트 상세 페이지의 답글 목록 개선
+- Enhance: 유저 페이지 개선
+  - 요약 탭의 하이라이트를 제거
+  - 노트 탭으로 하이라이트를 이동
 - Fix: 외부 리소스 설치 페이지에서 페이지 캐시가 작동하는 문제 수정 (misskey-dev/misskey#12105)
 
 ### Server

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

@@ -148,10 +148,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<XFiles :key="user.id" :user="user"/>
 					<XActivity :key="user.id" :user="user"/>
 				</template>
-				<div v-if="!disableNotes">
-					<div style="margin-bottom: 8px;">{{ i18n.ts.featured }}</div>
-					<MkNotes :class="$style.tl" :noGap="true" :pagination="pagination"/>
-				</div>
+        <MkNotes v-if="!disableNotes" :class="$style.tl" :noGap="true" :pagination="pagination"/>
 			</div>
 		</div>
 		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
@@ -237,7 +234,7 @@ watch($$(moderationNote), async () => {
 });
 
 const pagination = {
-	endpoint: 'users/featured-notes' as const,
+	endpoint: 'users/notes' as const,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.user.id,

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

@@ -10,10 +10,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkTab v-model="include" :class="$style.tab">
 				<option :value="null">{{ i18n.ts.notes }}</option>
 				<option value="all">{{ i18n.ts.all }}</option>
+        <option value="featured">{{ i18n.ts.featured }}</option>
 				<option value="files">{{ i18n.ts.withFiles }}</option>
 			</MkTab>
 		</template>
-		<MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
+    <MkNotes v-if="include === 'featured'" :noGap="true" :pagination="featuredPagination" :class="$style.tl"/>
+		<MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/>
 	</MkStickyContainer>
 </MkSpacer>
 </template>
@@ -29,10 +31,10 @@ const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
 
-const include = ref<string | null>('all');
+const include = ref<string | null>(null);
 
 const pagination = {
-	endpoint: 'users/notes' as const,
+	endpoint: include.value === 'featured' ? 'users/featured-notes' : 'users/notes' as const,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.user.id,
@@ -42,6 +44,14 @@ const pagination = {
 		withFiles: include.value === 'files',
 	})),
 };
+
+const featuredPagination = {
+  endpoint: 'users/featured-notes' as const,
+  limit: 10,
+  params: computed(() => ({
+    userId: props.user.id,
+  })),
+};
 </script>
 
 <style lang="scss" module>