factor out remote followers warning in SkRemoteFollowersWarning.vue

This commit is contained in:
Hazelnoot 2024-11-02 11:29:19 -04:00
parent 1ca350e45d
commit 4a43e1a9e9
2 changed files with 36 additions and 6 deletions

View file

@ -0,0 +1,32 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkInfo v-if="showRemoteWarning" warn closable @close="close">
{{ i18n.ts.remoteFollowersWarning }}
</MkInfo>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { i18n } from '@/i18n.js';
import MkInfo from '@/components/MkInfo.vue';
import { followersTab, FollowingFeedModel } from '@/scripts/following-feed-utils.js';
const props = defineProps<{
model: FollowingFeedModel,
}>();
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
const { model: { userList, remoteWarningDismissed } } = props;
const showRemoteWarning = computed(
() => userList.value === followersTab && !remoteWarningDismissed.value,
);
function close() {
remoteWarningDismissed.value = true;
}
</script>

View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.header"> <div :class="$style.header">
<MkPageHeader v-model:tab="userList" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/> <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> <SkRemoteFollowersWarning :class="$style.remoteWarning" :model="model"/>
</div> </div>
<div ref="noteScroll" :class="$style.notes"> <div ref="noteScroll" :class="$style.notes">
@ -36,11 +36,12 @@ import { useRouter } from '@/router/supplier.js';
import MkPageHeader from '@/components/global/MkPageHeader.vue'; import MkPageHeader from '@/components/global/MkPageHeader.vue';
import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue'; import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
import { useScrollPositionManager } from '@/nirax.js'; import { useScrollPositionManager } from '@/nirax.js';
import MkInfo from '@/components/MkInfo.vue';
import { createModel, createOptions, followersTab, followingTab, mutualsTab } from '@/scripts/following-feed-utils.js'; import { createModel, createOptions, followersTab, followingTab, mutualsTab } from '@/scripts/following-feed-utils.js';
import SkLazy from '@/components/global/SkLazy.vue'; import SkLazy from '@/components/global/SkLazy.vue';
import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue'; import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue';
import SkRemoteFollowersWarning from '@/components/SkRemoteFollowersWarning.vue';
const model = createModel();
const { const {
userList, userList,
withNonPublic, withNonPublic,
@ -48,8 +49,7 @@ const {
withBots, withBots,
withReplies, withReplies,
onlyFiles, onlyFiles,
remoteWarningDismissed, } = model;
} = createModel();
const router = useRouter(); const router = useRouter();
@ -58,8 +58,6 @@ const followingRecentNotes = shallowRef<InstanceType<typeof SkFollowingRecentNot
const userScroll = shallowRef<InstanceType<typeof SkLazy>>(); const userScroll = shallowRef<InstanceType<typeof SkLazy>>();
const noteScroll = shallowRef<HTMLElement>(); const noteScroll = shallowRef<HTMLElement>();
const showRemoteWarning = computed(() => userList.value === 'followers' && !remoteWarningDismissed.value);
const selectedUserId: Ref<string | null> = ref(null); const selectedUserId: Ref<string | null> = ref(null);
function listReady(initialUserId?: string): void { function listReady(initialUserId?: string): void {