dev: use reactiveState in foldNotification

packages/client/src/components/MkNotifications.vue

@@ -79,11 +79,13 @@ const stream = useStream();
 
 const pagingComponent = ref<MkPaginationType<"i/notifications"> | null>(null);
 
-const shouldFold = defaultStore.state.foldNotification;
+const shouldFold = defaultStore.reactiveState.foldNotification;
+
+const convertNotification = computed(() => shouldFold.value ? foldNotifications : (ns: entities.Notification[]) => ns);
 
 const FETCH_LIMIT = 90;
 
-const pagination = Object.assign(
+const pagination = computed(() => Object.assign(
 	{
 		endpoint: "i/notifications" as const,
 		params: computed(() => ({
@@ -94,7 +96,7 @@ const pagination = Object.assign(
 			unreadOnly: props.unreadOnly,
 		})),
 	},
-	shouldFold
+	shouldFold.value
 		? {
 				limit: 50,
 				secondFetchLimit: FETCH_LIMIT,
@@ -102,7 +104,7 @@ const pagination = Object.assign(
 		: {
 				limit: 30,
 			},
-);
+));
 
 function isNoteNotification(
 	n: entities.Notification,
@@ -138,14 +140,6 @@ const onNotification = (notification: entities.Notification) => {
 
 let connection: StreamTypes.ChannelOf<"main"> | undefined;
 
-function convertNotification(ns: entities.Notification[]) {
-	if (shouldFold) {
-		return foldNotifications(ns);
-	} else {
-		return ns;
-	}
-}
-
 onMounted(() => {
 	connection = stream.useChannel("main");
 	connection.on("notification", onNotification);

packages/client/src/components/MkPagination.vue

@@ -486,6 +486,8 @@ if (props.pagination.params && isRef<Param>(props.pagination.params)) {
 	watch(props.pagination.params, reload, { deep: true });
 }
 
+watch(() => props.folder, calculateItems);
+
 watch(
 	queue,
 	(a, b) => {

packages/client/src/pages/settings/general.vue

@@ -623,7 +623,6 @@ watch(
 		enableTimelineStreaming,
 		enablePullToRefresh,
 		pullToRefreshThreshold,
-		foldNotification,
 	],
 	async () => {
 		await reloadAsk();