factor out Following Feed list into SkFollowingRecentNotes.vue
This commit is contained in:
Hazelnoot
parent
41536480ce
commit
ca94959fff
|
|
@ -0,0 +1,122 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkPullToRefresh :refresher="() => reload()">
|
||||
<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
|
||||
<div>{{ i18n.ts.noNotes }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default="{ items: notes }">
|
||||
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
|
||||
<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="u => selectUser(u.id)"/>
|
||||
</MkDateSeparatedList>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</MkPullToRefresh>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { computed, shallowRef } from 'vue';
|
||||
import { infoImageUrl } from '@/instance.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||
import SkFollowingFeedEntry from '@/components/SkFollowingFeedEntry.vue';
|
||||
import { $i } from '@/account.js';
|
||||
import { checkWordMute } from '@/scripts/check-word-mute.js';
|
||||
import { FollowingFeedTab } from '@/scripts/following-feed-utils.js';
|
||||
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
userList: FollowingFeedTab;
|
||||
withNonPublic: boolean;
|
||||
withQuotes: boolean;
|
||||
withReplies: boolean;
|
||||
withBots: boolean;
|
||||
onlyFiles: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'loaded', initialUserId?: string): void;
|
||||
(event: 'userSelected', userId: string): void;
|
||||
}>();
|
||||
|
||||
defineExpose({ reload });
|
||||
|
||||
async function reload() {
|
||||
await latestNotesPaging.value?.reload();
|
||||
}
|
||||
|
||||
function selectUser(userId: string) {
|
||||
emit('userSelected', userId);
|
||||
}
|
||||
|
||||
async function onListReady(): Promise<void> {
|
||||
// This looks complicated, but it's really just a trick to get the first user ID from the pagination.
|
||||
const initialUserId = latestNotesPaging.value?.items.size
|
||||
? latestNotesPaging.value.items.values().next().value?.userId
|
||||
: undefined;
|
||||
|
||||
emit('loaded', initialUserId);
|
||||
}
|
||||
|
||||
const latestNotesPagination: Paging<'notes/following'> = {
|
||||
endpoint: 'notes/following' as const,
|
||||
limit: 20,
|
||||
params: computed(() => ({
|
||||
list: props.userList,
|
||||
filesOnly: props.onlyFiles,
|
||||
includeNonPublic: props.withNonPublic,
|
||||
includeReplies: props.withReplies,
|
||||
includeQuotes: props.withQuotes,
|
||||
includeBots: props.withBots,
|
||||
})),
|
||||
};
|
||||
|
||||
const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
|
||||
|
||||
function isSoftMuted(note: Misskey.entities.Note): boolean {
|
||||
return isMuted(note, $i?.mutedWords);
|
||||
}
|
||||
|
||||
function isHardMuted(note: Misskey.entities.Note): boolean {
|
||||
return isMuted(note, $i?.hardMutedWords);
|
||||
}
|
||||
|
||||
// Match the typing used by Misskey
|
||||
type Mutes = (string | string[])[] | null | undefined;
|
||||
|
||||
// Adapted from MkNote.ts
|
||||
function isMuted(note: Misskey.entities.Note, mutes: Mutes): boolean {
|
||||
return checkMute(note, mutes)
|
||||
|| checkMute(note.reply, mutes)
|
||||
|| checkMute(note.renote, mutes);
|
||||
}
|
||||
|
||||
// Adapted from check-word-mute.ts
|
||||
function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): boolean {
|
||||
if (!note) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!mutes || mutes.length < 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return checkWordMute(note, $i, mutes);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<!-- Based on MkLazy.vue -->
|
||||
|
||||
<template>
|
||||
<div ref="rootEl" :class="$style.root">
|
||||
<slot v-if="showing"></slot>
|
||||
<div v-else :class="$style.placeholder"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } from 'vue';
|
||||
|
||||
const rootEl = shallowRef<HTMLDivElement>();
|
||||
const showing = ref(false);
|
||||
|
||||
defineExpose({ rootEl, showing });
|
||||
|
||||
const observer = new IntersectionObserver(entries =>
|
||||
showing.value = entries.some((entry) => entry.isIntersecting),
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (rootEl.value) {
|
||||
observer.observe(rootEl.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
nextTick(() => {
|
||||
if (rootEl.value) {
|
||||
observer.observe(rootEl.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
observer.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: block;
|
||||
min-height: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,55 +12,34 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<div ref="noteScroll" :class="$style.notes">
|
||||
<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs">
|
||||
<MkPullToRefresh :refresher="() => reloadLatestNotes()">
|
||||
<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
|
||||
<div>{{ i18n.ts.noNotes }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default="{ items: notes }">
|
||||
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
|
||||
<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="selectedUserId == note.userId && $style.selected" @select="userSelected"/>
|
||||
</MkDateSeparatedList>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</MkPullToRefresh>
|
||||
<SkFollowingRecentNotes ref="followingRecentNotes" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
|
||||
</MkHorizontalSwipe>
|
||||
</div>
|
||||
|
||||
<div v-if="isWideViewport" ref="userScroll" :class="$style.user">
|
||||
<SkLazy ref="userScroll" :class="$style.user">
|
||||
<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="userList" :tabs="headerTabs">
|
||||
<SkUserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
|
||||
</MkHorizontalSwipe>
|
||||
</div>
|
||||
</SkLazy>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, Ref, ref, shallowRef } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { getScrollContainer } from '@@/js/scroll.js';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
|
||||
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
||||
import { infoImageUrl } from '@/instance.js';
|
||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
||||
import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||
import { PageHeaderItem } from '@/types/page-header.js';
|
||||
import SkFollowingFeedEntry from '@/components/SkFollowingFeedEntry.vue';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
import MkPageHeader from '@/components/global/MkPageHeader.vue';
|
||||
import { $i } from '@/account.js';
|
||||
import { checkWordMute } from '@/scripts/check-word-mute.js';
|
||||
import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
|
||||
import { useScrollPositionManager } from '@/nirax.js';
|
||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import { createModel, createOptions, followersTab, followingTab, mutualsTab } from '@/scripts/following-feed-utils.js';
|
||||
import SkLazy from '@/components/global/SkLazy.vue';
|
||||
import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue';
|
||||
|
||||
const {
|
||||
userList,
|
||||
|
|
@ -75,103 +54,39 @@ const {
|
|||
const router = useRouter();
|
||||
|
||||
const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
|
||||
const userScroll = shallowRef<HTMLElement>();
|
||||
const followingRecentNotes = shallowRef<InstanceType<typeof SkFollowingRecentNotes>>();
|
||||
const userScroll = shallowRef<InstanceType<typeof SkLazy>>();
|
||||
const noteScroll = shallowRef<HTMLElement>();
|
||||
|
||||
const showRemoteWarning = computed(() => userList.value === 'followers' && !remoteWarningDismissed.value);
|
||||
|
||||
// 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.
|
||||
const wideViewportQuery = window.matchMedia('(min-width: 750px)');
|
||||
const isWideViewport: Ref<boolean> = ref(wideViewportQuery.matches);
|
||||
wideViewportQuery.addEventListener('change', () => isWideViewport.value = wideViewportQuery.matches);
|
||||
|
||||
const selectedUserId: Ref<string | null> = ref(null);
|
||||
|
||||
function userSelected(user: Misskey.entities.UserLite): void {
|
||||
if (isWideViewport.value) {
|
||||
selectedUserId.value = user.id;
|
||||
function listReady(initialUserId?: string): void {
|
||||
if (initialUserId && !selectedUserId.value) {
|
||||
userSelected(initialUserId);
|
||||
}
|
||||
}
|
||||
|
||||
function userSelected(userId: string): void {
|
||||
if (userScroll.value?.showing) {
|
||||
selectedUserId.value = userId;
|
||||
} else {
|
||||
router.push(`/following-feed/${user.id}`);
|
||||
router.push(`/following-feed/${userId}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadLatestNotes() {
|
||||
await latestNotesPaging.value?.reload();
|
||||
}
|
||||
|
||||
async function reloadUserNotes() {
|
||||
await userRecentNotes.value?.reload();
|
||||
}
|
||||
|
||||
async function reload() {
|
||||
await Promise.all([
|
||||
reloadLatestNotes(),
|
||||
reloadUserNotes(),
|
||||
followingRecentNotes.value?.reload(),
|
||||
userRecentNotes.value?.reload(),
|
||||
]);
|
||||
}
|
||||
|
||||
async function onListReady(): Promise<void> {
|
||||
if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
|
||||
// This looks messy, but actually just gets the first user ID.
|
||||
const selectedNote = latestNotesPaging.value.items.values().next().value;
|
||||
|
||||
// We know this to be non-null because of the size check above.
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
selectedUserId.value = selectedNote!.userId;
|
||||
}
|
||||
}
|
||||
|
||||
async function onChangeTab(): Promise<void> {
|
||||
selectedUserId.value = null;
|
||||
}
|
||||
|
||||
function isSoftMuted(note: Misskey.entities.Note): boolean {
|
||||
return isMuted(note, $i?.mutedWords);
|
||||
}
|
||||
|
||||
function isHardMuted(note: Misskey.entities.Note): boolean {
|
||||
return isMuted(note, $i?.hardMutedWords);
|
||||
}
|
||||
|
||||
// Match the typing used by Misskey
|
||||
type Mutes = (string | string[])[] | null | undefined;
|
||||
|
||||
// Adapted from MkNote.ts
|
||||
function isMuted(note: Misskey.entities.Note, mutes: Mutes): boolean {
|
||||
return checkMute(note, mutes)
|
||||
|| checkMute(note.reply, mutes)
|
||||
|| checkMute(note.renote, mutes);
|
||||
}
|
||||
|
||||
// Adapted from check-word-mute.ts
|
||||
function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): boolean {
|
||||
if (!note) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!mutes || mutes.length < 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return checkWordMute(note, $i, mutes);
|
||||
}
|
||||
|
||||
const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
|
||||
|
||||
const latestNotesPagination: Paging<'notes/following'> = {
|
||||
endpoint: 'notes/following' as const,
|
||||
limit: 20,
|
||||
params: computed(() => ({
|
||||
list: userList.value,
|
||||
filesOnly: onlyFiles.value,
|
||||
includeNonPublic: withNonPublic.value,
|
||||
includeReplies: withReplies.value,
|
||||
includeQuotes: withQuotes.value,
|
||||
includeBots: withBots.value,
|
||||
})),
|
||||
};
|
||||
|
||||
const headerActions: PageHeaderItem[] = [
|
||||
{
|
||||
icon: 'ti ti-refresh',
|
||||
|
|
@ -199,7 +114,7 @@ const headerTabs = computed(() => [
|
|||
} satisfies Tab,
|
||||
]);
|
||||
|
||||
useScrollPositionManager(() => getScrollContainer(userScroll.value ?? null), router);
|
||||
useScrollPositionManager(() => getScrollContainer(userScroll.value?.rootEl ?? null), router);
|
||||
useScrollPositionManager(() => getScrollContainer(noteScroll.value ?? null), router);
|
||||
definePageMetadata(() => ({
|
||||
title: i18n.ts.following,
|
||||
|
|
@ -257,22 +172,13 @@ definePageMetadata(() => ({
|
|||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes border {
|
||||
from {border-left: 0px solid var(--accent);}
|
||||
to {border-left: 6px solid var(--accent);}
|
||||
}
|
||||
|
||||
.selected {
|
||||
animation: border 0.2s ease-out 0s 1 forwards;
|
||||
&:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 5px;
|
||||
@container (max-width: 749px) {
|
||||
.user {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
@container (min-width: 750px) {
|
||||
.root {
|
||||
grid-template-columns: min-content 4fr 6fr min-content;
|
||||
grid-template-rows: min-content 1fr;
|
||||
|
|
@ -290,8 +196,4 @@ definePageMetadata(() => ({
|
|||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue