add "followers" tab to following feed
This commit is contained in:
Hazelnoot
parent
053b47d78a
commit
04654b2f84
4 changed files with 81 additions and 32 deletions
|
|
@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
|
||||
<MkPageHeader v-model:tab="userList" :class="$style.header" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
|
||||
|
||||
<div ref="noteScroll" :class="$style.notes">
|
||||
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
|
||||
<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs">
|
||||
<MkPullToRefresh :refresher="() => reloadLatestNotes()">
|
||||
<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
|
||||
<template #empty>
|
||||
|
|
@ -29,21 +29,28 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
|
||||
<div v-if="isWideViewport" ref="userScroll" :class="$style.user">
|
||||
<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="currentTab" :tabs="headerTabs">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export const followingTab = 'following' as const;
|
||||
export const mutualsTab = 'mutuals' as const;
|
||||
export const followersTab = 'followers' as const;
|
||||
export type FollowingFeedTab = typeof followingTab | typeof mutualsTab | typeof followersTab;
|
||||
</script>
|
||||
|
||||
<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 MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||
import { infoImageUrl } from '@/instance.js';
|
||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
||||
import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||
|
|
@ -56,12 +63,15 @@ 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 { getScrollContainer } from '@@/js/scroll.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { deepMerge } from '@/scripts/merge.js';
|
||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||
|
||||
const withNonPublic = computed({
|
||||
get: () => defaultStore.reactiveState.followingFeed.value.withNonPublic,
|
||||
get: () => {
|
||||
if (userList.value === 'followers') return false;
|
||||
return defaultStore.reactiveState.followingFeed.value.withNonPublic;
|
||||
},
|
||||
set: value => saveFollowingFilter('withNonPublic', value),
|
||||
});
|
||||
const withQuotes = computed({
|
||||
|
|
@ -80,26 +90,19 @@ const onlyFiles = computed({
|
|||
get: () => defaultStore.reactiveState.followingFeed.value.onlyFiles,
|
||||
set: value => saveFollowingFilter('onlyFiles', value),
|
||||
});
|
||||
const onlyMutuals = computed({
|
||||
get: () => defaultStore.reactiveState.followingFeed.value.onlyMutuals,
|
||||
set: value => saveFollowingFilter('onlyMutuals', value),
|
||||
const userList = computed({
|
||||
get: () => defaultStore.reactiveState.followingFeed.value.userList,
|
||||
set: value => saveFollowingFilter('userList', value),
|
||||
});
|
||||
|
||||
// Based on timeline.saveTlFilter()
|
||||
function saveFollowingFilter(key: keyof typeof defaultStore.state.followingFeed, value: boolean) {
|
||||
function saveFollowingFilter<Key extends keyof typeof defaultStore.state.followingFeed>(key: Key, value: (typeof defaultStore.state.followingFeed)[Key]) {
|
||||
const out = deepMerge({ [key]: value }, defaultStore.state.followingFeed);
|
||||
defaultStore.set('followingFeed', out);
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const followingTab = 'following' as const;
|
||||
const mutualsTab = 'mutuals' as const;
|
||||
const currentTab = computed({
|
||||
get: () => onlyMutuals.value ? mutualsTab : followingTab,
|
||||
set: value => onlyMutuals.value = (value === mutualsTab),
|
||||
});
|
||||
|
||||
const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
|
||||
const userScroll = shallowRef<HTMLElement>();
|
||||
const noteScroll = shallowRef<HTMLElement>();
|
||||
|
|
@ -137,9 +140,12 @@ async function reload() {
|
|||
|
||||
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;
|
||||
selectedUserId.value = selectedNote.userId;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +190,7 @@ const latestNotesPagination: Paging<'notes/following'> = {
|
|||
endpoint: 'notes/following' as const,
|
||||
limit: 20,
|
||||
params: computed(() => ({
|
||||
mutualsOnly: onlyMutuals.value,
|
||||
list: userList.value,
|
||||
filesOnly: onlyFiles.value,
|
||||
includeNonPublic: withNonPublic.value,
|
||||
includeReplies: withReplies.value,
|
||||
|
|
@ -208,6 +214,7 @@ const headerActions: PageHeaderItem[] = [
|
|||
type: 'switch',
|
||||
text: i18n.ts.showNonPublicNotes,
|
||||
ref: withNonPublic,
|
||||
disabled: userList.value === 'followers',
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
|
|
@ -250,6 +257,11 @@ const headerTabs = computed(() => [
|
|||
icon: 'ph-user-switch ph-bold ph-lg',
|
||||
title: i18n.ts.mutuals,
|
||||
} satisfies Tab,
|
||||
{
|
||||
key: followersTab,
|
||||
icon: 'ph-user ph-bold ph-lg',
|
||||
title: i18n.ts.followers,
|
||||
} satisfies Tab,
|
||||
]);
|
||||
|
||||
useScrollPositionManager(() => getScrollContainer(userScroll.value ?? null), router);
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import darkTheme from '@@/themes/d-ice.json5';
|
|||
import { miLocalStorage } from './local-storage.js';
|
||||
import { searchEngineMap } from './scripts/search-engine-map.js';
|
||||
import type { SoundType } from '@/scripts/sound.js';
|
||||
import type { FollowingFeedTab } from '@/pages/following-feed.vue';
|
||||
import { Storage } from '@/pizzax.js';
|
||||
|
||||
interface PostFormAction {
|
||||
|
|
@ -249,7 +250,7 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
withBots: true,
|
||||
withReplies: false,
|
||||
onlyFiles: false,
|
||||
onlyMutuals: false,
|
||||
userList: 'following' as FollowingFeedTab,
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue