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

This commit is contained in:
Hazelnoot 2024-11-02 11:30:56 -04:00
parent 4a43e1a9e9
commit 2b0a622875
3 changed files with 46 additions and 60 deletions

View File

@ -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(() => [
{
key: followingTab,
icon: 'ph-user-check ph-bold ph-lg',
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,
]);
const headerTabs: ComputedRef<Tab[]> = computed(() => followingFeedTabs.map(t => ({
key: t,
icon: followingTabIcon(t),
title: followingTabName(t),
})));
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>

View File

@ -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

View File

@ -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,16 +81,12 @@ export function createOptionsMenu(storage?: Ref<StorageInterface>): MenuItem[] {
onlyFiles,
} = createModel(storage);
return {
icon: 'ti ti-dots',
text: i18n.ts.options,
handler: ev =>
popupMenu([
return [
{
type: 'switch',
text: i18n.ts.showNonPublicNotes,
ref: withNonPublic,
disabled: userList.value === 'followers',
disabled: computed(() => userList.value === followersTab),
},
{
type: 'switch',
@ -116,7 +113,8 @@ export function createOptionsMenu(storage?: Ref<StorageInterface>): MenuItem[] {
ref: onlyFiles,
disabled: withReplies,
},
], ev.currentTarget ?? ev.target),
];
}
export function createModel(storage?: Ref<StorageInterface>): FollowingFeedModel {
// eslint-disable-next-line no-param-reassign