add "followers" tab to following feed

packages/backend/src/server/api/endpoints/notes/following.ts

@@ -4,12 +4,14 @@
  */
 
 import { Inject, Injectable } from '@nestjs/common';
+import { ObjectLiteral, SelectQueryBuilder } from 'typeorm';
 import { SkLatestNote, MiFollowing } from '@/models/_.js';
 import type { NotesRepository } from '@/models/_.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { DI } from '@/di-symbols.js';
 import { QueryService } from '@/core/QueryService.js';
+import { ApiError } from '@/server/api/error.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -34,13 +36,19 @@ export const meta = {
 			code: 'BOTH_INCLUDE_REPLIES_AND_FILES_ONLY',
 			id: '91c8cb9f-36ed-46e7-9ca2-7df96ed6e222',
 		},
+		bothWithFollowersAndIncludeNonPublic: {
+			message: 'Specifying both list:followers and includeNonPublic is not supported',
+			code: 'BOTH_LIST_FOLLOWERS_AND_INCLUDE_NON_PUBLIC',
+			id: '7a1b9cb6-235b-4e58-9c00-32c1796f502c',
+		},
 	},
 } as const;
 
 export const paramDef = {
 	type: 'object',
 	properties: {
-		mutualsOnly: { type: 'boolean', default: false },
+		list: { type: 'string', enum: ['following', 'followers', 'mutuals'], default: 'following' },
+
 		filesOnly: { type: 'boolean', default: false },
 		includeNonPublic: { type: 'boolean', default: false },
 		includeReplies: { type: 'boolean', default: false },
@@ -67,6 +75,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			if (ps.includeReplies && ps.filesOnly) throw new ApiError(meta.errors.bothWithRepliesAndWithFiles);
+			if (ps.list === 'followers' && ps.includeNonPublic) throw new ApiError(meta.errors.bothWithFollowersAndIncludeNonPublic);
 
 			const query = this.notesRepository
 				.createQueryBuilder('note')
@@ -107,14 +116,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				.leftJoinAndSelect('reply.user', 'replyUser')
 				.leftJoinAndSelect('renote.user', 'renoteUser')
 				.leftJoinAndSelect('note.channel', 'channel')
+			;
 
-				// Limit to followers
-				.innerJoin(MiFollowing, 'following', 'latest.user_id = following."followeeId"')
-				.andWhere('following."followerId" = :me');
-
-			// Limit to mutuals, if requested
-			if (ps.mutualsOnly) {
-				query.innerJoin(MiFollowing, 'mutuals', 'latest.user_id = mutuals."followerId" AND mutuals."followeeId" = :me');
+			// Select the appropriate collection of users
+			if (ps.list === 'followers') {
+				addFollower(query);
+			} else if (ps.list === 'following') {
+				addFollowee(query);
+			} else {
+				addMutual(query);
 			}
 
 			// Limit to files, if requested
@@ -143,3 +153,26 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		});
 	}
 }
+
+/**
+ * Limit to followers (they follow us)
+ */
+function addFollower<T extends SelectQueryBuilder<ObjectLiteral>>(query: T): T {
+	return query.innerJoin(MiFollowing, 'follower', 'follower."followerId" = latest.user_id AND follower."followeeId" = :me');
+}
+
+/**
+ * Limit to followees (we follow them)
+ */
+function addFollowee<T extends SelectQueryBuilder<ObjectLiteral>>(query: T): T {
+	return query.innerJoin(MiFollowing, 'followee', 'followee."followerId" = :me AND followee."followeeId" = latest.user_id');
+}
+
+/**
+ * Limit to mutuals (they follow us AND we follow them)
+ */
+function addMutual<T extends SelectQueryBuilder<ObjectLiteral>>(query: T): T {
+	addFollower(query);
+	addFollowee(query);
+	return query;
+}

packages/frontend/src/pages/following-feed.vue

@@ -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);

packages/frontend/src/store.ts

@@ -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,
 		},
 	},
 

packages/misskey-js/src/autogen/types.ts

@@ -22547,8 +22547,11 @@ export type operations = {
     requestBody: {
       content: {
         'application/json': {
-          /** @default false */
-          mutualsOnly?: boolean;
+          /**
+           * @default following
+           * @enum {string}
+           */
+          list?: 'following' | 'followers' | 'mutuals';
           /** @default false */
           filesOnly?: boolean;
           /** @default false */