add following-feed page

This commit is contained in:
Hazel K 2024-09-30 12:06:00 -04:00
parent c5117552ca
commit 6a42874eac
4 changed files with 125 additions and 0 deletions

View file

@ -68,6 +68,11 @@ export const navbarItemDef = reactive({
lookup(); lookup();
}, },
}, },
following: {
title: i18n.ts.following,
icon: 'ti ti-user-check',
to: '/following-feed',
},
lists: { lists: {
title: i18n.ts.lists, title: i18n.ts.lists,
icon: 'ti ti-list', icon: 'ti ti-list',

View file

@ -0,0 +1,108 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="currentTab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<MkPullToRefresh :refresher="() => reload()">
<MkSpacer :contentMax="1200">
<MkPagination ref="pagingComponent" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost" alt="No notes found" aria-hidden="true"/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
</template>
<template #default="{ items: notes }">
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.list" :noGap="true">
<MkNote :key="note.id" :note="note" :withHardMute="true" :collapseRenote="true" :collapseReplies="true"/>
</MkDateSeparatedList>
</template>
</MkPagination>
</MkSpacer>
</MkPullToRefresh>
</MkHorizontalSwipe>
</MkStickyContainer>
</template>
<script lang="ts">
export type FollowingFeedTab = typeof followingTab | typeof mutualsTab;
export const followingTab = 'following' as const;
export const mutualsTab = 'mutuals' as const;
</script>
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref, shallowRef } from 'vue';
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 { defaultStore } from '@/store.js';
import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
// Load the correct note component
const MkNote = defineAsyncComponent(
() => defaultStore.state.noteDesign === 'sharkey'
? import('@/components/SkNote.vue')
: import('@/components/MkNote.vue'),
);
const props = withDefaults(defineProps<{
initialTab?: FollowingFeedTab,
}>(), {
initialTab: followingTab,
});
// Vue complains, but we *want* to lose reactivity here.
// Otherwise the use would be unable to change the tab.
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
const currentTab = ref(props.initialTab);
const mutualsOnly = computed(() => currentTab.value === mutualsTab);
const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
async function reload() {
await pagingComponent.value?.reload();
}
const pagination: Paging<'notes/following'> = {
endpoint: 'notes/following' as const,
limit: 20,
params: computed(() => ({
mutualsOnly: mutualsOnly.value,
})),
};
const headerActions = computed(() => []);
const headerTabs = computed(() => [
{
key: followingTab,
icon: 'ti ti-user-check',
title: i18n.ts.following,
} satisfies Tab,
{
key: mutualsTab,
icon: 'ti ti-user-heart',
title: i18n.ts.mutuals,
} satisfies Tab,
]);
definePageMetadata(() => ({
title: i18n.ts.following,
icon: 'ti ti-hash',
}));
</script>
<style lang="scss" module>
.list {
background: var(--panel);
}
</style>

View file

@ -55,9 +55,12 @@ import { MenuItem } from '@/types/menu.js';
import { miLocalStorage } from '@/local-storage.js'; import { miLocalStorage } from '@/local-storage.js';
import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js'; import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
import type { BasicTimelineType } from '@/timelines.js'; import type { BasicTimelineType } from '@/timelines.js';
import { useRouter } from '@/router/supplier.js';
provide('shouldOmitHeaderTitle', true); provide('shouldOmitHeaderTitle', true);
const router = useRouter();
const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>(); const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
const rootEl = shallowRef<HTMLElement>(); const rootEl = shallowRef<HTMLElement>();
@ -309,6 +312,11 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList
icon: basicTimelineIconClass(tl), icon: basicTimelineIconClass(tl),
iconOnly: true, iconOnly: true,
})), { })), {
icon: 'ti ti-user-check',
title: i18n.ts.following,
iconOnly: true,
onClick: () => router.push('/following-feed'),
}, {
icon: 'ti ti-list', icon: 'ti ti-list',
title: i18n.ts.lists, title: i18n.ts.lists,
iconOnly: true, iconOnly: true,

View file

@ -227,6 +227,10 @@ const routes: RouteDef[] = [{
path: '/explore', path: '/explore',
component: page(() => import('@/pages/explore.vue')), component: page(() => import('@/pages/explore.vue')),
hash: 'initialTab', hash: 'initialTab',
}, {
path: '/following-feed',
component: page(() => import('@/pages/following-feed.vue')),
hash: 'initialTab',
}, { }, {
path: '/search', path: '/search',
component: page(() => import('@/pages/search.vue')), component: page(() => import('@/pages/search.vue')),