factor out Following Feed list into SkFollowingRecentNotes.vue

packages/frontend/src/components/SkFollowingRecentNotes.vue

@@ -0,0 +1,122 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkPullToRefresh :refresher="() => reload()">
+	<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
+		<template #empty>
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
+				<div>{{ i18n.ts.noNotes }}</div>
+			</div>
+		</template>
+
+		<template #default="{ items: notes }">
+			<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
+				<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="u => selectUser(u.id)"/>
+			</MkDateSeparatedList>
+		</template>
+	</MkPagination>
+</MkPullToRefresh>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { computed, shallowRef } from 'vue';
+import { infoImageUrl } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import SkFollowingFeedEntry from '@/components/SkFollowingFeedEntry.vue';
+import { $i } from '@/account.js';
+import { checkWordMute } from '@/scripts/check-word-mute.js';
+import { FollowingFeedTab } from '@/scripts/following-feed-utils.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
+
+const props = defineProps<{
+	userList: FollowingFeedTab;
+	withNonPublic: boolean;
+	withQuotes: boolean;
+	withReplies: boolean;
+	withBots: boolean;
+	onlyFiles: boolean;
+}>();
+
+const emit = defineEmits<{
+	(event: 'loaded', initialUserId?: string): void;
+	(event: 'userSelected', userId: string): void;
+}>();
+
+defineExpose({ reload });
+
+async function reload() {
+	await latestNotesPaging.value?.reload();
+}
+
+function selectUser(userId: string) {
+	emit('userSelected', userId);
+}
+
+async function onListReady(): Promise<void> {
+	// This looks complicated, but it's really just a trick to get the first user ID from the pagination.
+	const initialUserId = latestNotesPaging.value?.items.size
+		? latestNotesPaging.value.items.values().next().value?.userId
+		: undefined;
+
+	emit('loaded', initialUserId);
+}
+
+const latestNotesPagination: Paging<'notes/following'> = {
+	endpoint: 'notes/following' as const,
+	limit: 20,
+	params: computed(() => ({
+		list: props.userList,
+		filesOnly: props.onlyFiles,
+		includeNonPublic: props.withNonPublic,
+		includeReplies: props.withReplies,
+		includeQuotes: props.withQuotes,
+		includeBots: props.withBots,
+	})),
+};
+
+const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
+
+function isSoftMuted(note: Misskey.entities.Note): boolean {
+	return isMuted(note, $i?.mutedWords);
+}
+
+function isHardMuted(note: Misskey.entities.Note): boolean {
+	return isMuted(note, $i?.hardMutedWords);
+}
+
+// Match the typing used by Misskey
+type Mutes = (string | string[])[] | null | undefined;
+
+// Adapted from MkNote.ts
+function isMuted(note: Misskey.entities.Note, mutes: Mutes): boolean {
+	return checkMute(note, mutes)
+		|| checkMute(note.reply, mutes)
+		|| checkMute(note.renote, mutes);
+}
+
+// Adapted from check-word-mute.ts
+function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): boolean {
+	if (!note) {
+		return false;
+	}
+
+	if (!mutes || mutes.length < 1) {
+		return false;
+	}
+
+	return checkWordMute(note, $i, mutes);
+}
+</script>
+
+<style module lang="scss">
+.panel {
+	background: var(--panel);
+}
+</style>

packages/frontend/src/components/global/SkLazy.vue

@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<!-- Based on MkLazy.vue -->
+
+<template>
+<div ref="rootEl" :class="$style.root">
+	<slot v-if="showing"></slot>
+	<div v-else :class="$style.placeholder"></div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } from 'vue';
+
+const rootEl = shallowRef<HTMLDivElement>();
+const showing = ref(false);
+
+defineExpose({ rootEl, showing });
+
+const observer = new IntersectionObserver(entries =>
+	showing.value = entries.some((entry) => entry.isIntersecting),
+);
+
+onMounted(() => {
+	nextTick(() => {
+		if (rootEl.value) {
+			observer.observe(rootEl.value);
+		}
+	});
+});
+
+onActivated(() => {
+	nextTick(() => {
+		if (rootEl.value) {
+			observer.observe(rootEl.value);
+		}
+	});
+});
+
+onBeforeUnmount(() => {
+	observer.disconnect();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: block;
+}
+
+.placeholder {
+	display: block;
+	min-height: 150px;
+}
+</style>

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

@@ -12,55 +12,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div ref="noteScroll" :class="$style.notes">
 		<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs">
-			<MkPullToRefresh :refresher="() => reloadLatestNotes()">
+			<SkFollowingRecentNotes ref="followingRecentNotes" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
-				<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
-					<template #empty>
-						<div class="_fullinfo">
-							<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
-							<div>{{ i18n.ts.noNotes }}</div>
-						</div>
-					</template>
-
-					<template #default="{ items: notes }">
-						<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
-							<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="selectedUserId == note.userId && $style.selected" @select="userSelected"/>
-						</MkDateSeparatedList>
-					</template>
-				</MkPagination>
-			</MkPullToRefresh>
 		</MkHorizontalSwipe>
 	</div>
 
-	<div v-if="isWideViewport" ref="userScroll" :class="$style.user">
+	<SkLazy ref="userScroll" :class="$style.user">
 		<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>
+	</SkLazy>
 </div>
 </template>
 
 <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 { infoImageUrl } from '@/instance.js';
-import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import { PageHeaderItem } from '@/types/page-header.js';
-import SkFollowingFeedEntry from '@/components/SkFollowingFeedEntry.vue';
 import { useRouter } from '@/router/supplier.js';
 import MkPageHeader from '@/components/global/MkPageHeader.vue';
-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 MkPagination, { Paging } from '@/components/MkPagination.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import { createModel, createOptions, followersTab, followingTab, mutualsTab } from '@/scripts/following-feed-utils.js';
+import SkLazy from '@/components/global/SkLazy.vue';
+import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue';
 
 const {
 	userList,
@@ -75,103 +54,39 @@ const {
 const router = useRouter();
 
 const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
-const userScroll = shallowRef<HTMLElement>();
+const followingRecentNotes = shallowRef<InstanceType<typeof SkFollowingRecentNotes>>();
+const userScroll = shallowRef<InstanceType<typeof SkLazy>>();
 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)');
-const isWideViewport: Ref<boolean> = ref(wideViewportQuery.matches);
-wideViewportQuery.addEventListener('change', () => isWideViewport.value = wideViewportQuery.matches);
-
 const selectedUserId: Ref<string | null> = ref(null);
 
-function userSelected(user: Misskey.entities.UserLite): void {
+function listReady(initialUserId?: string): void {
-	if (isWideViewport.value) {
+	if (initialUserId && !selectedUserId.value) {
-		selectedUserId.value = user.id;
+		userSelected(initialUserId);
-	} else {
-		router.push(`/following-feed/${user.id}`);
 	}
 }
 
-async function reloadLatestNotes() {
+function userSelected(userId: string): void {
-	await latestNotesPaging.value?.reload();
+	if (userScroll.value?.showing) {
-}
+		selectedUserId.value = userId;
-
+	} else {
-async function reloadUserNotes() {
+		router.push(`/following-feed/${userId}`);
-	await userRecentNotes.value?.reload();
+	}
 }
 
 async function reload() {
 	await Promise.all([
-		reloadLatestNotes(),
+		followingRecentNotes.value?.reload(),
-		reloadUserNotes(),
+		userRecentNotes.value?.reload(),
 	]);
 }
 
-async function onListReady(): Promise<void> {
-	if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
-		// 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;
-	}
-}
-
 async function onChangeTab(): Promise<void> {
 	selectedUserId.value = null;
 }
 
-function isSoftMuted(note: Misskey.entities.Note): boolean {
-	return isMuted(note, $i?.mutedWords);
-}
-
-function isHardMuted(note: Misskey.entities.Note): boolean {
-	return isMuted(note, $i?.hardMutedWords);
-}
-
-// Match the typing used by Misskey
-type Mutes = (string | string[])[] | null | undefined;
-
-// Adapted from MkNote.ts
-function isMuted(note: Misskey.entities.Note, mutes: Mutes): boolean {
-	return checkMute(note, mutes)
-		|| checkMute(note.reply, mutes)
-		|| checkMute(note.renote, mutes);
-}
-
-// Adapted from check-word-mute.ts
-function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): boolean {
-	if (!note) {
-		return false;
-	}
-
-	if (!mutes || mutes.length < 1) {
-		return false;
-	}
-
-	return checkWordMute(note, $i, mutes);
-}
-
-const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
-
-const latestNotesPagination: Paging<'notes/following'> = {
-	endpoint: 'notes/following' as const,
-	limit: 20,
-	params: computed(() => ({
-		list: userList.value,
-		filesOnly: onlyFiles.value,
-		includeNonPublic: withNonPublic.value,
-		includeReplies: withReplies.value,
-		includeQuotes: withQuotes.value,
-		includeBots: withBots.value,
-	})),
-};
-
 const headerActions: PageHeaderItem[] = [
 	{
 		icon: 'ti ti-refresh',
@@ -199,7 +114,7 @@ const headerTabs = computed(() => [
 	} satisfies Tab,
 ]);
 
-useScrollPositionManager(() => getScrollContainer(userScroll.value ?? null), router);
+useScrollPositionManager(() => getScrollContainer(userScroll.value?.rootEl ?? null), router);
 useScrollPositionManager(() => getScrollContainer(noteScroll.value ?? null), router);
 definePageMetadata(() => ({
 	title: i18n.ts.following,
@@ -257,22 +172,13 @@ definePageMetadata(() => ({
 	margin-bottom: 12px;
 }
 
-@keyframes border {
+@container (max-width: 749px) {
-	from {border-left: 0px solid var(--accent);}
+	.user {
-	to {border-left: 6px solid var(--accent);}
+		display: none;
-}
-
-.selected {
-	animation: border 0.2s ease-out 0s 1 forwards;
-	&:first-child {
-		border-top-left-radius: 5px;
-	}
-	&:last-child {
-		border-bottom-left-radius: 5px;
 	}
 }
 
-@media (min-width: 750px) {
+@container (min-width: 750px) {
 	.root {
 		grid-template-columns: min-content 4fr 6fr min-content;
 		grid-template-rows: min-content 1fr;
@@ -290,8 +196,4 @@ definePageMetadata(() => ({
 		margin-bottom: 24px;
 	}
 }
-
-.panel {
-	background: var(--panel);
-}
 </style>