From bc45ff21031aad27c5291929b77411f4f650cf56 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Mon, 21 Oct 2024 17:57:54 -0400
Subject: [PATCH] add warning about incomplete remote data on following feed
---
locales/index.d.ts | 4 ++++
.../frontend/src/pages/following-feed.vue | 20 ++++++++++++++++++-
packages/frontend/src/store.ts | 1 +
sharkey-locales/en-US.yml | 1 +
4 files changed, 25 insertions(+), 1 deletion(-)
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 37c6d2541c..535e88f7c7 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 886946e867..fac2857d46 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 4e730e4747..5d0395d774 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 29580df61e..63860c3eb3 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"
--
GitLab