factor out remote followers warning in SkRemoteFollowersWarning.vue

2 files changed, 36 insertions, 6 deletions

diff --git a/packages/frontend/src/components/SkRemoteFollowersWarning.vue b/packages/frontend/src/components/SkRemoteFollowersWarning.vue
new file mode 100644
index 0000000000..ceebbd59dd
--- /dev/null
+++ b/packages/frontend/src/components/SkRemoteFollowersWarning.vue
@@ -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>
diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index 33de5b01ea..9054769034 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<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>
+		<SkRemoteFollowersWarning :class="$style.remoteWarning" :model="model"/>
 	</div>
 
 	<div ref="noteScroll" :class="$style.notes">
@@ -36,11 +36,12 @@ import { useRouter } from '@/router/supplier.js';
 import MkPageHeader from '@/components/global/MkPageHeader.vue';
 import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
 import { useScrollPositionManager } from '@/nirax.js';
-import MkInfo from '@/components/MkInfo.vue';
 import { createModel, createOptions, followersTab, followingTab, mutualsTab } from '@/scripts/following-feed-utils.js';
 import SkLazy from '@/components/global/SkLazy.vue';
 import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue';
+import SkRemoteFollowersWarning from '@/components/SkRemoteFollowersWarning.vue';
 
+const model = createModel();
 const {
 	userList,
 	withNonPublic,
@@ -48,8 +49,7 @@ const {
 	withBots,
 	withReplies,
 	onlyFiles,
-	remoteWarningDismissed,
-} = createModel();
+} = model;
 
 const router = useRouter();
 
@@ -58,8 +58,6 @@ const followingRecentNotes = shallowRef<InstanceType<typeof SkFollowingRecentNot
 const userScroll = shallowRef<InstanceType<typeof SkLazy>>();
 const noteScroll = shallowRef<HTMLElement>();
 
-const showRemoteWarning = computed(() => userList.value === 'followers' && !remoteWarningDismissed.value);
-
 const selectedUserId: Ref<string | null> = ref(null);
 
 function listReady(initialUserId?: string): void {