keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-22 05:35:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

auto-select the first user in the following feed

Browse source
This commit is contained in:
Hazel K 2024-10-02 00:11:57 -04:00
parent 2a11c1ecf6
commit 21277eab8f
1 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/pages/following-feed.vue
View file

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