diff --git a/locales/index.d.ts b/locales/index.d.ts index 37c6d2541c2335ea5a165745b9823728b6f21881..535e88f7c73b7ae1226d6b88d1d1693a5355e584 100644 --- a/locales/index.d.ts +++ b/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; diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue index 886946e8676f2089425db9a65ec8809c9c2794c3..fac2857d46b8e83ab990f966398784c840d46926 100644 --- a/packages/frontend/src/pages/following-feed.vue +++ b/packages/frontend/src/pages/following-feed.vue @@ -5,7 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <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"> <MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs"> @@ -66,6 +69,7 @@ import { useScrollPositionManager } from '@/nirax.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: () => { @@ -94,6 +98,10 @@ 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 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 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)'); @@ -314,6 +324,10 @@ definePageMetadata(() => ({ overflow-y: auto; } +.remoteWarning { + margin: 12px 12px 0 12px; +} + .userInfo { margin-bottom: 12px; } @@ -328,6 +342,10 @@ definePageMetadata(() => ({ gap: 24px; } + .remoteWarning { + margin: 24px 24px 0 24px; + } + .userInfo { margin-bottom: 24px; } diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 4e730e4747d44a69535867ebc1cbeb436d6a091e..5d0395d774e42f20ab44f4d0fe1848e4258a30d6 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -251,6 +251,7 @@ export const defaultStore = markRaw(new Storage('base', { withReplies: false, onlyFiles: false, userList: 'following' as FollowingFeedTab, + remoteWarningDismissed: false, }, }, diff --git a/sharkey-locales/en-US.yml b/sharkey-locales/en-US.yml index 29580df61e9f2fde94b8b6fa527b55a0ccd3542a..63860c3eb32e5fb531f69b3c8560156de170ee09 100644 --- a/sharkey-locales/en-US.yml +++ b/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"