improve per-user view on mobile
This commit is contained in:
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>
|
<template>
|
||||||
<div :class="$style.root">
|
<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">
|
<div :class="$style.notes">
|
||||||
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
|
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
|
||||||
@ -29,15 +29,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="isWideViewport" :class="$style.user">
|
<div v-if="isWideViewport" :class="$style.user">
|
||||||
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
|
<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="currentTab" :tabs="headerTabs">
|
||||||
<MkPullToRefresh :refresher="() => reloadUserNotes()">
|
<UserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withRenotes="withUserRenotes" :withReplies="withUserReplies" :onlyFiles="withOnlyFiles"/>
|
||||||
<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>
|
</MkHorizontalSwipe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -62,15 +55,12 @@ import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
|||||||
import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||||
import { PageHeaderItem } from '@/types/page-header.js';
|
import { PageHeaderItem } from '@/types/page-header.js';
|
||||||
import FollowingFeedEntry from '@/components/FollowingFeedEntry.vue';
|
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 { useRouter } from '@/router/supplier.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import MkPageHeader from '@/components/global/MkPageHeader.vue';
|
import MkPageHeader from '@/components/global/MkPageHeader.vue';
|
||||||
import { $i } from '@/account.js';
|
import { $i } from '@/account.js';
|
||||||
import MkLoading from '@/components/global/MkLoading.vue';
|
|
||||||
import { checkWordMute } from '@/scripts/check-word-mute.js';
|
import { checkWordMute } from '@/scripts/check-word-mute.js';
|
||||||
|
import UserRecentNotes from '@/components/UserRecentNotes.vue';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
initialTab?: FollowingFeedTab,
|
initialTab?: FollowingFeedTab,
|
||||||
@ -85,6 +75,7 @@ const router = useRouter();
|
|||||||
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
|
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
|
||||||
const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab);
|
const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab);
|
||||||
const mutualsOnly: Ref<boolean> = computed(() => currentTab.value === mutualsTab);
|
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.
|
// 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.
|
// 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);
|
const isWideViewport: Ref<boolean> = ref(wideViewportQuery.matches);
|
||||||
wideViewportQuery.addEventListener('change', () => isWideViewport.value = wideViewportQuery.matches);
|
wideViewportQuery.addEventListener('change', () => isWideViewport.value = wideViewportQuery.matches);
|
||||||
|
|
||||||
const selectedUserError: Ref<string> = ref('');
|
const selectedUserId: Ref<string | null> = ref(null);
|
||||||
const selectedUserId: Ref<string> = ref('');
|
|
||||||
const selectedUser: Ref<Misskey.entities.UserDetailed | null> = ref(null);
|
|
||||||
|
|
||||||
async function userSelected(user: Misskey.entities.UserLite): Promise<void> {
|
function userSelected(user: Misskey.entities.UserLite): void {
|
||||||
if (isWideViewport.value) {
|
if (isWideViewport.value) {
|
||||||
await showUserNotes(user.id);
|
selectedUserId.value = user.id;
|
||||||
} else {
|
} else {
|
||||||
if (user.host) {
|
router.push(`/following-feed/${user.id}`);
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -141,7 +98,7 @@ async function reloadLatestNotes() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function reloadUserNotes() {
|
async function reloadUserNotes() {
|
||||||
await showUserNotes(selectedUserId.value);
|
await userRecentNotes.value?.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function reload() {
|
async function reload() {
|
||||||
@ -155,12 +112,12 @@ async function onListReady(): Promise<void> {
|
|||||||
if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
|
if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
|
||||||
// This just gets the first user ID
|
// This just gets the first user ID
|
||||||
const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value;
|
const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value;
|
||||||
await showUserNotes(selectedNote.userId);
|
selectedUserId.value = selectedNote.userId;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onChangeTab(): Promise<void> {
|
async function onChangeTab(): Promise<void> {
|
||||||
await showUserNotes('');
|
selectedUserId.value = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function isSoftMuted(note: Misskey.entities.Note): boolean {
|
function isSoftMuted(note: Misskey.entities.Note): boolean {
|
||||||
@ -207,16 +164,6 @@ const latestNotesPagination: Paging<'notes/following'> = {
|
|||||||
const withUserRenotes = ref(false);
|
const withUserRenotes = ref(false);
|
||||||
const withUserReplies = ref(true);
|
const withUserReplies = ref(true);
|
||||||
const withOnlyFiles = ref(false);
|
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 ? [
|
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',
|
path: '/following-feed',
|
||||||
component: page(() => import('@/pages/following-feed.vue')),
|
component: page(() => import('@/pages/following-feed.vue')),
|
||||||
hash: 'initialTab',
|
hash: 'initialTab',
|
||||||
|
}, {
|
||||||
|
path: '/following-feed/:userId',
|
||||||
|
component: page(() => import('@/pages/user/recent-notes.vue')),
|
||||||
}, {
|
}, {
|
||||||
path: '/search',
|
path: '/search',
|
||||||
component: page(() => import('@/pages/search.vue')),
|
component: page(() => import('@/pages/search.vue')),
|
||||||
|
Loading…
Reference in New Issue
Block a user