fix inconsistent following feed filters on mobile

packages/frontend/src/pages/user/recent-notes.vue

@@ -4,24 +4,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer>
+<MkStickyContainer ref="userScroll">
 	<template #header>
 		<MkPageHeader :actions="headerActions" :displayBackButton="true"/>
 	</template>
-	<SkUserRecentNotes ref="userRecentNotes" :userId="userId" :withRenotes="withRenotes" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
+	<SkUserRecentNotes ref="userRecentNotes" :userId="userId" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
 </MkStickyContainer>
 </template>
 
 <script setup lang="ts">
 
-import { computed, ref, shallowRef } from 'vue';
+import { computed, shallowRef } from 'vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { PageHeaderItem } from '@/types/page-header.js';
-import * as os from '@/os.js';
 import MkPageHeader from '@/components/global/MkPageHeader.vue';
 import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
 import { acct } from '@/filters/user.js';
+import { createModel, createOptions } from '@/scripts/following-feed-utils.js';
+import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 
 defineProps<{
 	userId: string;
@@ -29,43 +30,22 @@ defineProps<{
 
 const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
 const user = computed(() => userRecentNotes.value?.user);
-const withRenotes = ref(false);
-const withReplies = ref(true);
-const onlyFiles = ref(false);
 
-const headerActions = [
+const {
+	withNonPublic,
+	withQuotes,
+	withBots,
+	withReplies,
+	onlyFiles,
+} = createModel();
+
+const headerActions: PageHeaderItem[] = [
 	{
 		icon: 'ti ti-refresh',
 		text: i18n.ts.reload,
 		handler: () => userRecentNotes.value?.reload(),
-	} satisfies PageHeaderItem,
-	{
-		icon: 'ti ti-dots',
-		text: i18n.ts.options,
-		handler: (ev) => {
-			os.popupMenu([
-				{
-					type: 'switch',
-					text: i18n.ts.showRenotes,
-					ref: withRenotes,
-				}, {
-					type: 'switch',
-					text: i18n.ts.showRepliesToOthersInTimeline,
-					ref: withReplies,
-					disabled: onlyFiles,
-				},
-				{
-					type: 'divider',
-				},
-				{
-					type: 'switch',
-					text: i18n.ts.fileAttachedOnly,
-					ref: onlyFiles,
-					disabled: withReplies,
-				},
-			], ev.currentTarget ?? ev.target);
-		},
-	} satisfies PageHeaderItem,
+	},
+	createOptions(),
 ];
 
 // Based on user/index.vue
@@ -83,9 +63,4 @@ definePageMetadata(() => ({
 		},
 	} : {},
 }));
-
 </script>
-
-<style lang="scss" module>
-
-</style>