add warning about incomplete remote data on following feed

This commit is contained in:
Hazelnoot 2024-10-21 17:57:54 -04:00
parent 04654b2f84
commit bc45ff2103
4 changed files with 25 additions and 1 deletions

4
locales/index.d.ts vendored
View file

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

View file

@ -5,7 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<MkPageHeader v-model:tab="userList" :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"> <div ref="noteScroll" :class="$style.notes">
<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs">
@ -66,6 +69,7 @@ import { useScrollPositionManager } from '@/nirax.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { deepMerge } from '@/scripts/merge.js'; import { deepMerge } from '@/scripts/merge.js';
import MkPagination, { Paging } from '@/components/MkPagination.vue'; import MkPagination, { Paging } from '@/components/MkPagination.vue';
import MkInfo from '@/components/MkInfo.vue';
const withNonPublic = computed({ const withNonPublic = computed({
get: () => { get: () => {
@ -94,6 +98,10 @@ const userList = computed({
get: () => defaultStore.reactiveState.followingFeed.value.userList, get: () => defaultStore.reactiveState.followingFeed.value.userList,
set: value => saveFollowingFilter('userList', value), set: value => saveFollowingFilter('userList', value),
}); });
const remoteWarningDismissed = computed({
get: () => defaultStore.reactiveState.followingFeed.value.remoteWarningDismissed,
set: value => saveFollowingFilter('remoteWarningDismissed', value),
});
// Based on timeline.saveTlFilter() // Based on timeline.saveTlFilter()
function saveFollowingFilter<Key extends keyof typeof defaultStore.state.followingFeed>(key: Key, value: (typeof defaultStore.state.followingFeed)[Key]) { function saveFollowingFilter<Key extends keyof typeof defaultStore.state.followingFeed>(key: Key, value: (typeof defaultStore.state.followingFeed)[Key]) {
@ -107,6 +115,8 @@ const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
const userScroll = shallowRef<HTMLElement>(); const userScroll = shallowRef<HTMLElement>();
const noteScroll = 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. // 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. // Otherwise, the second column will waste resources in the background.
const wideViewportQuery = window.matchMedia('(min-width: 750px)'); const wideViewportQuery = window.matchMedia('(min-width: 750px)');
@ -314,6 +324,10 @@ definePageMetadata(() => ({
overflow-y: auto; overflow-y: auto;
} }
.remoteWarning {
margin: 12px 12px 0 12px;
}
.userInfo { .userInfo {
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -328,6 +342,10 @@ definePageMetadata(() => ({
gap: 24px; gap: 24px;
} }
.remoteWarning {
margin: 24px 24px 0 24px;
}
.userInfo { .userInfo {
margin-bottom: 24px; margin-bottom: 24px;
} }

View file

@ -251,6 +251,7 @@ export const defaultStore = markRaw(new Storage('base', {
withReplies: false, withReplies: false,
onlyFiles: false, onlyFiles: false,
userList: 'following' as FollowingFeedTab, userList: 'following' as FollowingFeedTab,
remoteWarningDismissed: false,
}, },
}, },

View file

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