improve per-user view on mobile
This commit is contained in:
Hazel K
parent
97a16c2ebc
commit
fddf078b52
108
packages/frontend/src/components/UserRecentNotes.vue
Normal file
108
packages/frontend/src/components/UserRecentNotes.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkPullToRefresh :refresher="() => reload()">
|
||||
<div v-if="user" :class="$style.userInfo">
|
||||
<MkUserInfo :class="$style.userInfo" class="user" :user="user"/>
|
||||
<MkNotes :noGap="true" :pagination="pagination"/>
|
||||
</div>
|
||||
<div v-else-if="loadError" :class="$style.panel">{{ loadError }}</div>
|
||||
<MkLoading v-else-if="userId"/>
|
||||
</MkPullToRefresh>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, Ref, watch } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkLoading from '@/components/global/MkLoading.vue';
|
||||
import MkNotes from '@/components/MkNotes.vue';
|
||||
import MkUserInfo from '@/components/MkUserInfo.vue';
|
||||
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
||||
import { Paging } from '@/components/MkPagination.vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
userId: string;
|
||||
withRenotes?: boolean;
|
||||
withReplies?: boolean;
|
||||
onlyFiles?: boolean;
|
||||
}>(), {
|
||||
withRenotes: false,
|
||||
withReplies: true,
|
||||
onlyFiles: false,
|
||||
});
|
||||
|
||||
const loadError: Ref<string | null> = ref(null);
|
||||
const user: Ref<Misskey.entities.UserDetailed | null> = ref(null);
|
||||
|
||||
const pagination: Paging<'users/notes'> = {
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: props.userId,
|
||||
withRenotes: props.withRenotes,
|
||||
withReplies: props.withReplies,
|
||||
withFiles: props.onlyFiles,
|
||||
})),
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
reload,
|
||||
user,
|
||||
});
|
||||
|
||||
async function reload(): Promise<void> {
|
||||
loadError.value = null;
|
||||
user.value = null;
|
||||
|
||||
await Promise
|
||||
.all([
|
||||
// We need a User entity, but the pagination returns only UserLite.
|
||||
// An additional request is needed to "upgrade" the object.
|
||||
misskeyApi('users/show', { userId: props.userId }),
|
||||
|
||||
// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
|
||||
// Otherwise, the page appears to load "backwards".
|
||||
new Promise(resolve => setTimeout(resolve, 1000)),
|
||||
])
|
||||
.then(([u]) => user.value = u)
|
||||
.catch(error => {
|
||||
console.error('Error fetching user info', error);
|
||||
|
||||
return error.value =
|
||||
typeof(error) === 'string'
|
||||
? String(error)
|
||||
: JSON.stringify(error);
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.userId, async () => {
|
||||
await reload();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await reload();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@container (min-width: 451px) {
|
||||
.userInfo {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" @update:tab="onChangeTab"/>
|
||||
<MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
|
||||
|
||||
<div :class="$style.notes">
|
||||
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
|
||||
@ -29,15 +29,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</div>
|
||||
|
||||
<div v-if="isWideViewport" :class="$style.user">
|
||||
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
|
||||
<MkPullToRefresh :refresher="() => reloadUserNotes()">
|
||||
<div v-if="selectedUser" :class="$style.userInfo">
|
||||
<MkUserInfo :class="$style.userInfo" class="user" :user="selectedUser"/>
|
||||
<MkNotes :noGap="true" :pagination="userNotesPagination"/>
|
||||
</div>
|
||||
<div v-else-if="selectedUserError" :class="$style.panel">{{ selectedUserError }}</div>
|
||||
<MkLoading v-else-if="selectedUserId"/>
|
||||
</MkPullToRefresh>
|
||||
<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="currentTab" :tabs="headerTabs">
|
||||
<UserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withRenotes="withUserRenotes" :withReplies="withUserReplies" :onlyFiles="withOnlyFiles"/>
|
||||
</MkHorizontalSwipe>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,15 +55,12 @@ import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
||||
import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||
import { PageHeaderItem } from '@/types/page-header.js';
|
||||
import FollowingFeedEntry from '@/components/FollowingFeedEntry.vue';
|
||||
import MkNotes from '@/components/MkNotes.vue';
|
||||
import MkUserInfo from '@/components/MkUserInfo.vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
import * as os from '@/os.js';
|
||||
import MkPageHeader from '@/components/global/MkPageHeader.vue';
|
||||
import { $i } from '@/account.js';
|
||||
import MkLoading from '@/components/global/MkLoading.vue';
|
||||
import { checkWordMute } from '@/scripts/check-word-mute.js';
|
||||
import UserRecentNotes from '@/components/UserRecentNotes.vue';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
initialTab?: FollowingFeedTab,
|
||||
@ -85,6 +75,7 @@ const router = useRouter();
|
||||
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
|
||||
const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab);
|
||||
const mutualsOnly: Ref<boolean> = computed(() => currentTab.value === mutualsTab);
|
||||
const userRecentNotes = shallowRef<InstanceType<typeof UserRecentNotes>>();
|
||||
|
||||
// We have to disable the per-user feed on small displays, and it must be done through JS instead of CSS.
|
||||
// Otherwise, the second column will waste resources in the background.
|
||||
@ -92,47 +83,13 @@ const wideViewportQuery = window.matchMedia('(min-width: 750px)');
|
||||
const isWideViewport: Ref<boolean> = ref(wideViewportQuery.matches);
|
||||
wideViewportQuery.addEventListener('change', () => isWideViewport.value = wideViewportQuery.matches);
|
||||
|
||||
const selectedUserError: Ref<string> = ref('');
|
||||
const selectedUserId: Ref<string> = ref('');
|
||||
const selectedUser: Ref<Misskey.entities.UserDetailed | null> = ref(null);
|
||||
const selectedUserId: Ref<string | null> = ref(null);
|
||||
|
||||
async function userSelected(user: Misskey.entities.UserLite): Promise<void> {
|
||||
function userSelected(user: Misskey.entities.UserLite): void {
|
||||
if (isWideViewport.value) {
|
||||
await showUserNotes(user.id);
|
||||
selectedUserId.value = user.id;
|
||||
} else {
|
||||
if (user.host) {
|
||||
router.push(`/@${user.username}@${user.host}`);
|
||||
} else {
|
||||
router.push(`/@${user.username}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function showUserNotes(userId: string): Promise<void> {
|
||||
selectedUserError.value = '';
|
||||
selectedUserId.value = userId;
|
||||
selectedUser.value = null;
|
||||
|
||||
if (userId) {
|
||||
await Promise
|
||||
.all([
|
||||
// We need a User entity, but the pagination returns only UserLite.
|
||||
// An additional request is needed to "upgrade" the object.
|
||||
misskeyApi('users/show', { userId }),
|
||||
|
||||
// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
|
||||
// Otherwise, the page appears to load "backwards".
|
||||
new Promise(resolve => setTimeout(resolve, 1000)),
|
||||
])
|
||||
.then(([user]) => selectedUser.value = user)
|
||||
.catch(error => {
|
||||
console.error('Error fetching user info', error);
|
||||
|
||||
return selectedUserError.value =
|
||||
typeof(error) === 'string'
|
||||
? String(error)
|
||||
: JSON.stringify(error);
|
||||
});
|
||||
router.push(`/following-feed/${user.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,7 +98,7 @@ async function reloadLatestNotes() {
|
||||
}
|
||||
|
||||
async function reloadUserNotes() {
|
||||
await showUserNotes(selectedUserId.value);
|
||||
await userRecentNotes.value?.reload();
|
||||
}
|
||||
|
||||
async function reload() {
|
||||
@ -155,12 +112,12 @@ async function onListReady(): Promise<void> {
|
||||
if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
|
||||
// This just gets the first user ID
|
||||
const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value;
|
||||
await showUserNotes(selectedNote.userId);
|
||||
selectedUserId.value = selectedNote.userId;
|
||||
}
|
||||
}
|
||||
|
||||
async function onChangeTab(): Promise<void> {
|
||||
await showUserNotes('');
|
||||
selectedUserId.value = null;
|
||||
}
|
||||
|
||||
function isSoftMuted(note: Misskey.entities.Note): boolean {
|
||||
@ -207,16 +164,6 @@ const latestNotesPagination: Paging<'notes/following'> = {
|
||||
const withUserRenotes = ref(false);
|
||||
const withUserReplies = ref(true);
|
||||
const withOnlyFiles = ref(false);
|
||||
const userNotesPagination: Paging<'users/notes'> = {
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: selectedUserId.value,
|
||||
withRenotes: withUserRenotes.value,
|
||||
withReplies: withUserReplies.value,
|
||||
withFiles: withOnlyFiles.value,
|
||||
})),
|
||||
};
|
||||
|
||||
const headerActions = computed(() => isWideViewport.value ? [
|
||||
{
|
||||
|
||||
86
packages/frontend/src/pages/user/recent-notes.vue
Normal file
86
packages/frontend/src/pages/user/recent-notes.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header>
|
||||
<MkPageHeader :actions="headerActions" :displayBackButton="true"/>
|
||||
</template>
|
||||
<UserRecentNotes ref="userRecentNotes" :userId="userId" :withRenotes="withRenotes" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { computed, ref, shallowRef } from 'vue';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { PageHeaderItem } from '@/types/page-header.js';
|
||||
import * as os from '@/os.js';
|
||||
import MkPageHeader from '@/components/global/MkPageHeader.vue';
|
||||
import UserRecentNotes from '@/components/UserRecentNotes.vue';
|
||||
import { acct } from '@/filters/user.js';
|
||||
|
||||
defineProps<{
|
||||
userId: string;
|
||||
}>();
|
||||
|
||||
const userRecentNotes = shallowRef<InstanceType<typeof UserRecentNotes>>();
|
||||
const user = computed(() => userRecentNotes.value?.user);
|
||||
const withRenotes = ref(false);
|
||||
const withReplies = ref(true);
|
||||
const onlyFiles = ref(false);
|
||||
|
||||
const headerActions = [
|
||||
{
|
||||
icon: 'ti ti-refresh',
|
||||
text: i18n.ts.reload,
|
||||
handler: () => userRecentNotes.value?.reload(),
|
||||
} satisfies PageHeaderItem,
|
||||
{
|
||||
icon: 'ti ti-dots',
|
||||
text: i18n.ts.options,
|
||||
handler: (ev) => {
|
||||
os.popupMenu([
|
||||
{
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRenotes,
|
||||
ref: withRenotes,
|
||||
}, {
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRepliesToOthersInTimeline,
|
||||
ref: withReplies,
|
||||
disabled: onlyFiles,
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
text: i18n.ts.fileAttachedOnly,
|
||||
ref: onlyFiles,
|
||||
disabled: withReplies,
|
||||
},
|
||||
], ev.currentTarget ?? ev.target);
|
||||
},
|
||||
} satisfies PageHeaderItem,
|
||||
];
|
||||
|
||||
// Based on user/index.vue
|
||||
definePageMetadata(() => ({
|
||||
title: i18n.ts.user,
|
||||
icon: 'ti ti-user',
|
||||
...user.value ? {
|
||||
title: user.value.name ? ` (@${user.value.username})` : `@${user.value.username}`,
|
||||
subtitle: `@${acct(user.value)}`,
|
||||
userName: user.value,
|
||||
avatar: user.value,
|
||||
path: `/@${user.value.username}`,
|
||||
share: {
|
||||
title: user.value.name,
|
||||
},
|
||||
} : {},
|
||||
}));
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
</style>
|
||||
@ -231,6 +231,9 @@ const routes: RouteDef[] = [{
|
||||
path: '/following-feed',
|
||||
component: page(() => import('@/pages/following-feed.vue')),
|
||||
hash: 'initialTab',
|
||||
}, {
|
||||
path: '/following-feed/:userId',
|
||||
component: page(() => import('@/pages/user/recent-notes.vue')),
|
||||
}, {
|
||||
path: '/search',
|
||||
component: page(() => import('@/pages/search.vue')),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user