From 6a42874eaceb26c2f53ea5419f5839294cce3764 Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Mon, 30 Sep 2024 12:06:00 -0400
Subject: [PATCH] add following-feed page

---
 packages/frontend/src/navbar.ts               |   5 +
 .../frontend/src/pages/following-feed.vue     | 108 ++++++++++++++++++
 packages/frontend/src/pages/timeline.vue      |   8 ++
 packages/frontend/src/router/definition.ts    |   4 +
 4 files changed, 125 insertions(+)
 create mode 100644 packages/frontend/src/pages/following-feed.vue

diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
index ccd7034968..2d67a29a24 100644
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@@ -68,6 +68,11 @@ export const navbarItemDef = reactive({
 			lookup();
 		},
 	},
+	following: {
+		title: i18n.ts.following,
+		icon: 'ti ti-user-check',
+		to: '/following-feed',
+	},
 	lists: {
 		title: i18n.ts.lists,
 		icon: 'ti ti-list',
diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
new file mode 100644
index 0000000000..45c1f67d23
--- /dev/null
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -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>
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 20d8abccf6..7dc63a887a 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -55,9 +55,12 @@ import { MenuItem } from '@/types/menu.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
 import type { BasicTimelineType } from '@/timelines.js';
+import { useRouter } from '@/router/supplier.js';
 
 provide('shouldOmitHeaderTitle', true);
 
+const router = useRouter();
+
 const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();
 
@@ -309,6 +312,11 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList
 	icon: basicTimelineIconClass(tl),
 	iconOnly: true,
 })), {
+	icon: 'ti ti-user-check',
+	title: i18n.ts.following,
+	iconOnly: true,
+	onClick: () => router.push('/following-feed'),
+}, {
 	icon: 'ti ti-list',
 	title: i18n.ts.lists,
 	iconOnly: true,
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index 14110d1f9b..6ebaa95cdc 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -227,6 +227,10 @@ const routes: RouteDef[] = [{
 	path: '/explore',
 	component: page(() => import('@/pages/explore.vue')),
 	hash: 'initialTab',
+}, {
+	path: '/following-feed',
+	component: page(() => import('@/pages/following-feed.vue')),
+	hash: 'initialTab',
 }, {
 	path: '/search',
 	component: page(() => import('@/pages/search.vue')),