save filters for following feed

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

@@ -63,20 +63,42 @@ import { checkWordMute } from '@/scripts/check-word-mute.js';
 import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
 import { useScrollPositionManager } from '@/nirax.js';
 import { getScrollContainer } from '@/scripts/scroll.js';
+import { defaultStore } from '@/store.js';
+import { deepMerge } from '@/scripts/merge.js';
 
-const props = withDefaults(defineProps<{
+const withNonPublic = computed({
-	initialTab?: FollowingFeedTab,
+	get: () => defaultStore.reactiveState.followingFeed.value.withNonPublic,
-}>(), {
+	set: value => saveFollowingFilter('withNonPublic', value),
-	initialTab: followingTab,
 });
+const withQuotes = computed({
+	get: () => defaultStore.reactiveState.followingFeed.value.withQuotes,
+	set: value => saveFollowingFilter('withQuotes', value),
+});
+const withReplies = computed({
+	get: () => defaultStore.reactiveState.followingFeed.value.withReplies,
+	set: value => saveFollowingFilter('withReplies', value),
+});
+const onlyFiles = computed({
+	get: () => defaultStore.reactiveState.followingFeed.value.onlyFiles,
+	set: value => saveFollowingFilter('onlyFiles', value),
+});
+const onlyMutuals = computed({
+	get: () => defaultStore.reactiveState.followingFeed.value.onlyMutuals,
+	set: value => saveFollowingFilter('onlyMutuals', value),
+});
+
+// Based on timeline.saveTlFilter()
+function saveFollowingFilter(key: keyof typeof defaultStore.state.followingFeed, value: boolean) {
+	const out = deepMerge({ [key]: value }, defaultStore.state.followingFeed);
+	defaultStore.set('followingFeed', out);
+}
 
 const router = useRouter();
 
-// Vue complains, but we *want* to lose reactivity here.
+const currentTab = computed({
-// Otherwise, the user would be unable to change the tab.
+	get: () => onlyMutuals.value ? mutualsTab : followingTab,
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+	set: value => onlyMutuals.value = (value === mutualsTab),
-const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab);
+});
-const mutualsOnly: Ref<boolean> = computed(() => currentTab.value === mutualsTab);
 const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
 const userScroll = shallowRef<HTMLElement>();
 const noteScroll = shallowRef<HTMLElement>();
@@ -161,7 +183,7 @@ const latestNotesPagination: Paging<'notes/following'> = {
 	endpoint: 'notes/following' as const,
 	limit: 20,
 	params: computed(() => ({
-		mutualsOnly: mutualsOnly.value,
+		mutualsOnly: onlyMutuals.value,
 		filesOnly: onlyFiles.value,
 		includeNonPublic: withNonPublic.value,
 		includeReplies: withReplies.value,
@@ -169,11 +191,6 @@ const latestNotesPagination: Paging<'notes/following'> = {
 	})),
 };
 
-const withNonPublic = ref(false);
-const withQuotes = ref(false);
-const withReplies = ref(false);
-const onlyFiles = ref(false);
-
 const headerActions: PageHeaderItem[] = [
 	{
 		icon: 'ti ti-refresh',

packages/frontend/src/store.ts

@@ -239,6 +239,16 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'deviceAccount',
 		default: [] as Misskey.entities.UserList[],
 	},
+	followingFeed: {
+		where: 'account',
+		default: {
+			withNonPublic: false,
+			withQuotes: false,
+			withReplies: false,
+			onlyFiles: false,
+			onlyMutuals: false,
+		},
+	},
 
 	overridedDeviceKind: {
 		where: 'device',