From 21277eab8f15831a2494803f7d006ef335367c18 Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Wed, 2 Oct 2024 00:11:57 -0400
Subject: [PATCH] auto-select the first user in the following feed

---
 .../frontend/src/pages/following-feed.vue     | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index 9218b18fda..7b257412c3 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :contentMax="1200">
 			<div :class="$style.columns">
 				<MkPullToRefresh :refresher="() => reloadList()">
-					<MkPagination ref="listPaging" :pagination="listPagination">
+					<MkPagination ref="listPaging" :pagination="listPagination" @init="onListReady">
 						<template #empty>
 							<div class="_fullinfo">
 								<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
@@ -26,13 +26,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkPagination>
 				</MkPullToRefresh>
 
-				<MkPullToRefresh v-if="selectedUserId" :refresher="() => reloadUser()">
+				<MkPullToRefresh :refresher="() => reloadUser()">
 					<div v-if="selectedUser" :class="$style.userInfo">
 						<MkUserInfo class="user" :user="selectedUser"/>
 						<MkNotes :noGap="true" :pagination="userPagination"/>
 					</div>
 					<div v-else-if="selectedUserError" :class="$style.list">{{ selectedUserError }}</div>
-					<MkLoading v-else/>
+					<MkLoading v-else-if="selectedUserId"/>
 				</MkPullToRefresh>
 			</div>
 		</MkSpacer>
@@ -92,8 +92,8 @@ async function selectUser(userId: string): Promise<void> {
 
 				return selectedUserError.value =
 					typeof(error) === 'string'
-					? String(error)
-					: JSON.stringify(error);
+						? String(error)
+						: JSON.stringify(error);
 			});
 	}
 }
@@ -115,6 +115,18 @@ async function reloadBoth() {
 	]);
 }
 
+async function onListReady(): Promise<void> {
+	if (!selectedUserId.value && listPaging.value?.items.size) {
+		// This just gets the first user ID
+		const selectedNote: Misskey.entities.Note = listPaging.value.items.values().next().value;
+
+		// Wait for 1 second to match the animation effects.
+		// Otherwise, the page appears to load "backwards".
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		await selectUser(selectedNote.userId);
+	}
+}
+
 const listPagination: Paging<'notes/following'> = {
 	endpoint: 'notes/following' as const,
 	limit: 20,
@@ -168,6 +180,16 @@ definePageMetadata(() => ({
 	background: var(--panel);
 }
 
+.info {
+	margin-bottom: 6px;
+}
+
+@container (min-width: 451px) {
+	.info {
+		margin-bottom: 12px;
+	}
+}
+
 .columns {
 	display: flex;
 	flex-direction: row;