From 390602837bf85a01e0c2f91deb3bab6770a87f0d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 16 Dec 2023 11:56:58 +0900
Subject: [PATCH] enhance(frontend): tweak user home page
---
packages/frontend/src/pages/user/home.vue | 12 +----
.../src/pages/user/index.timeline.vue | 48 ++++++++++---------
packages/frontend/src/pages/user/index.vue | 4 +-
3 files changed, 31 insertions(+), 33 deletions(-)
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index a0163bfc68..a87e03e761 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -136,9 +136,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkLazy>
</template>
<div v-if="!disableNotes">
- <div style="margin-bottom: 8px;">{{ i18n.ts.featured }}</div>
<MkLazy>
- <MkNotes :class="$style.tl" :noGap="true" :pagination="pagination"/>
+ <XTimeline :user="user"/>
</MkLazy>
</div>
</div>
@@ -193,6 +192,7 @@ function calcAge(birthdate: string): number {
const XFiles = defineAsyncComponent(() => import('./index.files.vue'));
const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
+const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed;
@@ -219,14 +219,6 @@ watch(moderationNote, async () => {
await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
});
-const pagination = {
- endpoint: 'users/featured-notes' as const,
- limit: 10,
- params: computed(() => ({
- userId: props.user.id,
- })),
-};
-
const style = computed(() => {
if (props.user.bannerUrl == null) return {};
return {
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 6cf5bcf91f..e5a0f49e3d 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -4,18 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<MkSpacer :contentMax="800" style="padding-top: 0">
- <MkStickyContainer>
- <template #header>
- <MkTab v-model="include" :class="$style.tab">
- <option :value="null">{{ i18n.ts.notes }}</option>
- <option value="all">{{ i18n.ts.all }}</option>
- <option value="files">{{ i18n.ts.withFiles }}</option>
- </MkTab>
- </template>
- <MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
- </MkStickyContainer>
-</MkSpacer>
+<MkStickyContainer>
+ <template #header>
+ <MkTab v-model="tab" :class="$style.tab">
+ <option value="featured">{{ i18n.ts.featured }}</option>
+ <option :value="null">{{ i18n.ts.notes }}</option>
+ <option value="all">{{ i18n.ts.all }}</option>
+ <option value="files">{{ i18n.ts.withFiles }}</option>
+ </MkTab>
+ </template>
+ <MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
+</MkStickyContainer>
</template>
<script lang="ts" setup>
@@ -29,24 +28,29 @@ const props = defineProps<{
user: Misskey.entities.UserDetailed;
}>();
-const include = ref<string | null>('all');
+const tab = ref<string | null>('all');
-const pagination = {
+const pagination = computed(() => tab.value === 'featured' ? {
+ endpoint: 'users/featured-notes' as const,
+ limit: 10,
+ params: {
+ userId: props.user.id,
+ },
+} : {
endpoint: 'users/notes' as const,
limit: 10,
- params: computed(() => ({
+ params: {
userId: props.user.id,
- withRenotes: include.value === 'all',
- withReplies: include.value === 'all',
- withChannelNotes: include.value === 'all',
- withFiles: include.value === 'files',
- })),
-};
+ withRenotes: tab.value === 'all',
+ withReplies: tab.value === 'all',
+ withChannelNotes: tab.value === 'all',
+ withFiles: tab.value === 'files',
+ },
+});
</script>
<style lang="scss" module>
.tab {
- margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0;
background: var(--bg);
}
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 4725aedeee..4efa834d14 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -9,7 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/>
- <XTimeline v-else-if="tab === 'notes'" :user="user"/>
+ <MkSpacer v-else-if="tab === 'notes'" :contentMax="800" style="padding-top: 0">
+ <XTimeline :user="user"/>
+ </MkSpacer>
<XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/>
--
GitLab