merge: Add followers tab to following feed + fix duplication (resolves #729) (!705)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/705

Closes #729

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>

locales/index.d.ts

@@ -11334,6 +11334,10 @@ export interface Locale extends ILocale {
          */
         "trustThisDomain": string;
     };
+    /**
+     * Remote followers may have incomplete or outdated activity
+     */
+    "remoteFollowersWarning": string;
 }
 declare const locales: {
     [lang: string]: Locale;

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'],
@@ -27,12 +29,26 @@ export const meta = {
 			ref: 'Note',
 		},
 	},
+
+	errors: {
+		bothWithRepliesAndWithFiles: {
+			message: 'Specifying both includeReplies and filesOnly is not supported',
+			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 },
@@ -58,12 +74,40 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		private queryService: QueryService,
 	) {
 		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')
 				.setParameter('me', me.id)
 
 				// Limit to latest notes
-				.innerJoin(SkLatestNote, 'latest', 'note.id = latest.note_id')
+				.innerJoin(
+					(sub: SelectQueryBuilder<SkLatestNote>) => {
+						sub
+							.from(SkLatestNote, 'latest')
+
+							// Return only one note per user
+							.addSelect('latest.user_id', 'user_id')
+							.addSelect('MAX(latest.note_id)', 'note_id')
+							.groupBy('latest.user_id');
+
+						// Match selected note types.
+						if (!ps.includeNonPublic) {
+							sub.andWhere('latest.is_public = true');
+						}
+						if (!ps.includeReplies) {
+							sub.andWhere('latest.is_reply = false');
+						}
+						if (!ps.includeQuotes) {
+							sub.andWhere('latest.is_quote = false');
+						}
+
+						return sub;
+					},
+					'latest',
+					'note.id = latest.note_id',
+				)
 
 				// Avoid N+1 queries from the "pack" method
 				.innerJoinAndSelect('note.user', 'user')
@@ -72,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
@@ -87,17 +132,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				query.andWhere('note."fileIds" != \'{}\'');
 			}
 
-			// Match selected note types.
-			if (!ps.includeNonPublic) {
-				query.andWhere('latest.is_public');
-			}
-			if (!ps.includeReplies) {
-				query.andWhere('latest.is_reply = false');
-			}
-			if (!ps.includeQuotes) {
-				query.andWhere('latest.is_quote = false');
-			}
-
 			// Match selected user types.
 			if (!ps.includeBots) {
 				query.andWhere('"user"."isBot" = false');
@@ -119,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,13 @@ 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"/>
+	<div :class="$style.header">
+		<MkPageHeader v-model:tab="userList" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
+		<MkInfo v-if="showRemoteWarning" :class="$style.remoteWarning" warn closable @close="remoteWarningDismissed = true">{{ i18n.ts.remoteFollowersWarning }}</MkInfo>
+	</div>
 
 	<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 +32,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 +66,16 @@ 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';
+import MkInfo from '@/components/MkInfo.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,30 +94,29 @@ 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),
+});
+const remoteWarningDismissed = computed({
+	get: () => defaultStore.reactiveState.followingFeed.value.remoteWarningDismissed,
+	set: value => saveFollowingFilter('remoteWarningDismissed', 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>();
 
+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)');
@@ -137,9 +150,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 +200,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 +224,7 @@ const headerActions: PageHeaderItem[] = [
 					type: 'switch',
 					text: i18n.ts.showNonPublicNotes,
 					ref: withNonPublic,
+					disabled: userList.value === 'followers',
 				},
 				{
 					type: 'switch',
@@ -250,6 +267,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);
@@ -302,6 +324,10 @@ definePageMetadata(() => ({
 	overflow-y: auto;
 }
 
+.remoteWarning {
+	margin: 12px 12px 0 12px;
+}
+
 .userInfo {
 	margin-bottom: 12px;
 }
@@ -316,6 +342,10 @@ definePageMetadata(() => ({
 		gap: 24px;
 	}
 
+	.remoteWarning {
+		margin: 24px 24px 0 24px;
+	}
+
 	.userInfo {
 		margin-bottom: 24px;
 	}

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,8 @@ export const defaultStore = markRaw(new Storage('base', {
 			withBots: true,
 			withReplies: false,
 			onlyFiles: false,
-			onlyMutuals: false,
+			userList: 'following' as FollowingFeedTab,
+			remoteWarningDismissed: false,
 		},
 	},
 

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 */

sharkey-locales/en-US.yml

@@ -383,3 +383,4 @@ _externalNavigationWarning:
   title: "Navigate to an external site"
   description: "Leave {host} and go to an external site"
   trustThisDomain: "Trust this domain on this device in the future"
+remoteFollowersWarning: "Remote followers may have incomplete or outdated activity"