separate following feed's menu component from the actual filter options

packages/frontend/src/pages/following-feed.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, ref, shallowRef } from 'vue';
+import { computed, ComputedRef, Ref, ref, shallowRef } from 'vue';
 import { getScrollContainer } from '@@/js/scroll.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -36,7 +36,7 @@ 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 { createModel, createOptions, followersTab, followingTab, mutualsTab } from '@/scripts/following-feed-utils.js';
+import { createModel, createHeaderItem, followingFeedTabs, followingTabIcon, followingTabName, followingTab } 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';
@@ -91,32 +91,20 @@ const headerActions: PageHeaderItem[] = [
 		text: i18n.ts.reload,
 		handler: () => reload(),
 	},
-	createOptions(),
+	createHeaderItem(),
 ];
 
-const headerTabs = computed(() => [
+const headerTabs: ComputedRef<Tab[]> = computed(() => followingFeedTabs.map(t => ({
-	{
+	key: t,
-		key: followingTab,
+	icon: followingTabIcon(t),
-		icon: 'ph-user-check ph-bold ph-lg',
+	title: followingTabName(t),
-		title: i18n.ts.following,
+})));
-	} satisfies Tab,
-	{
-		key: mutualsTab,
-		icon: 'ph-user-switch ph-bold ph-lg',
-		title: i18n.ts.mutuals,
-	} satisfies Tab,
-	{
-		key: followersTab,
-		icon: 'ph-user ph-bold ph-lg',
-		title: i18n.ts.followers,
-	} satisfies Tab,
-]);
 
 useScrollPositionManager(() => getScrollContainer(userScroll.value?.rootEl ?? null), router);
 useScrollPositionManager(() => getScrollContainer(noteScroll.value ?? null), router);
 definePageMetadata(() => ({
 	title: i18n.ts.following,
-	icon: 'ph-user-check ph-bold ph-lg',
+	icon: followingTabIcon(followingTab),
 }));
 
 </script>

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

@@ -20,7 +20,7 @@ import { PageHeaderItem } from '@/types/page-header.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 { createModel, createHeaderItem } from '@/scripts/following-feed-utils.js';
 import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 
 defineProps<{
@@ -44,7 +44,7 @@ const headerActions: PageHeaderItem[] = [
 		text: i18n.ts.reload,
 		handler: () => userRecentNotes.value?.reload(),
 	},
-	createOptions(),
+	createHeaderItem(),
 ];
 
 // Based on user/index.vue

packages/frontend/src/scripts/following-feed-utils.ts

@@ -9,6 +9,7 @@ import { deepMerge } from '@/scripts/merge.js';
 import { PageHeaderItem } from '@/types/page-header.js';
 import { i18n } from '@/i18n.js';
 import { popupMenu } from '@/os.js';
+import { MenuItem } from '@/types/menu.js';
 
 export const followingTab = 'following' as const;
 export const mutualsTab = 'mutuals' as const;
@@ -80,43 +81,40 @@ export function createOptionsMenu(storage?: Ref<StorageInterface>): MenuItem[] {
 		onlyFiles,
 	} = createModel(storage);
 
-	return {
+	return [
-		icon: 'ti ti-dots',
+		{
-		text: i18n.ts.options,
+			type: 'switch',
-		handler: ev =>
+			text: i18n.ts.showNonPublicNotes,
-			popupMenu([
+			ref: withNonPublic,
-				{
+			disabled: computed(() => userList.value === followersTab),
-					type: 'switch',
+		},
-					text: i18n.ts.showNonPublicNotes,
+		{
-					ref: withNonPublic,
+			type: 'switch',
-					disabled: userList.value === 'followers',
+			text: i18n.ts.showQuotes,
-				},
+			ref: withQuotes,
-				{
+		},
-					type: 'switch',
+		{
-					text: i18n.ts.showQuotes,
+			type: 'switch',
-					ref: withQuotes,
+			text: i18n.ts.showBots,
-				},
+			ref: withBots,
-				{
+		},
-					type: 'switch',
+		{
-					text: i18n.ts.showBots,
+			type: 'switch',
-					ref: withBots,
+			text: i18n.ts.showReplies,
-				},
+			ref: withReplies,
-				{
+			disabled: onlyFiles,
-					type: 'switch',
+		},
-					text: i18n.ts.showReplies,
+		{
-					ref: withReplies,
+			type: 'divider',
-					disabled: onlyFiles,
+		},
-				},
+		{
-				{
+			type: 'switch',
-					type: 'divider',
+			text: i18n.ts.fileAttachedOnly,
-				},
+			ref: onlyFiles,
-				{
+			disabled: withReplies,
-					type: 'switch',
+		},
-					text: i18n.ts.fileAttachedOnly,
+	];
-					ref: onlyFiles,
+}
-					disabled: withReplies,
-				},
-			], ev.currentTarget ?? ev.target),
 
 export function createModel(storage?: Ref<StorageInterface>): FollowingFeedModel {
 	// eslint-disable-next-line no-param-reassign