potentially breaking or fixing DM updates

packages/client/src/components/MkPagination.vue

@@ -38,6 +38,7 @@ import * as os from '@/os';
 import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { ItemHolder } from 'photoswipe';
 
 export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
 	endpoint: E;
@@ -56,6 +57,8 @@ export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints>
 	reversed?: boolean;
 
 	offsetMode?: boolean;
+
+	externalItemArray?: Ref<Array<any>>;
 };
 
 const SECOND_FETCH_LIMIT = 30;
@@ -105,12 +108,14 @@ const init = async (): Promise<void> => {
 		}
 		if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
 			more.value = false;
 		}
+		items.value = props.pagination.reversed ? [...res].reverse() : res;
+		if(props.pagination.externalItemArray) {
+			props.pagination.externalItemArray.value = items.value;
+		}
 		offset.value = res.length;
 		error.value = false;
 		fetching.value = false;
@@ -122,6 +127,9 @@ const init = async (): Promise<void> => {
 
 const reload = (): void => {
 	items.value = [];
+	if(props.pagination.externalItemArray) {
+		props.pagination.externalItemArray.value = [];
+	}
 	init();
 };
 
@@ -180,12 +188,14 @@ const fetchMore = async (): Promise<void> => {
 		}
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
 			more.value = false;
 		}
+		items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+		if(props.pagination.externalItemArray) {
+			props.pagination.externalItemArray.value = items.value;
+		}
 		offset.value += res.length;
 		moreFetching.value = false;
 	}, err => {
@@ -210,12 +220,14 @@ const fetchMoreAhead = async (): Promise<void> => {
 	}).then(res => {
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
 			more.value = false;
 		}
+		items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+		if(props.pagination.externalItemArray) {
+			props.pagination.externalItemArray.value = items.value;
+		}
 		offset.value += res.length;
 		moreFetching.value = false;
 	}, err => {
@@ -241,6 +253,7 @@ const prepend = (item: Item): void => {
 						//items.value = items.value.slice(-props.displayLimit);
 						while (items.value.length >= props.displayLimit) {
 							items.value.shift();
+							if(props.pagination.externalItemArray) props.pagination.externalItemArray.value.shift();
 						}
 						more.value = true;
 					}
@@ -248,11 +261,13 @@ const prepend = (item: Item): void => {
 			}
 		}
 		items.value.push(item);
+		if(props.pagination.externalItemArray) props.pagination.externalItemArray.value.push(item);
 		// TODO
 	} else {
 		// 初回表示時はunshiftだけでOK
 		if (!rootEl.value) {
 			items.value.unshift(item);
+			if(props.pagination.externalItemArray) props.pagination.externalItemArray.value.unshift(item);
 			return;
 		}
 
@@ -261,6 +276,7 @@ const prepend = (item: Item): void => {
 		if (isTop) {
 			// Prepend the item
 			items.value.unshift(item);
+			if(props.pagination.externalItemArray) props.pagination.externalItemArray.value.unshift(item);
 
 			// オーバーフローしたら古いアイテムは捨てる
 			if (items.value.length >= props.displayLimit) {
@@ -268,6 +284,7 @@ const prepend = (item: Item): void => {
 				//this.items = items.value.slice(0, props.displayLimit);
 				while (items.value.length >= props.displayLimit) {
 					items.value.pop();
+					if(props.pagination.externalItemArray) props.pagination.externalItemArray.value.pop();
 				}
 				more.value = true;
 			}
@@ -285,6 +302,7 @@ const prepend = (item: Item): void => {
 
 const append = (item: Item): void => {
 	items.value.push(item);
+	if(props.pagination.externalItemArray) props.pagination.externalItemArray.value.push(item);
 };
 
 const removeItem = (finder: (item: Item) => boolean): boolean => {
@@ -294,6 +312,7 @@ const removeItem = (finder: (item: Item) => boolean): boolean => {
 	}
 
 	items.value.splice(i, 1);
+	if(props.pagination.externalItemArray) props.pagination.externalItemArray.value.splice(i, 1);
 	return true;
 };
 
@@ -304,6 +323,7 @@ const updateItem = (id: Item['id'], replacer: (old: Item) => Item): boolean => {
 	}
 
 	items.value[i] = replacer(items.value[i]);
+	if(props.pagination.externalItemArray) props.pagination.externalItemArray.value[i] = items.value[i];
 	return true;
 };
 

packages/client/src/pages/messaging/index.vue

@@ -14,8 +14,8 @@
 				<swiper-slide>
 					<div class="_content yweeujhr dms">
 						<MkButton primary class="start" @click="startUser"><i class="ph-plus-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
-						<MkPagination v-slot="{items}" :pagination="dmsPagination">
+						<MkPagination v-slot="{}" :externalItemArray="messages" :pagination="dmsPagination">
-							<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
+							<MkChatPreview v-for="message in messages" :key="message.id" class="yweeujhr message _block" :message="message"/>
 						</MkPagination>
 					</div>
 				</swiper-slide>
@@ -25,8 +25,8 @@
 							<MkButton primary class="start" :link="true" to="/my/groups"><i class="ph-user-circle-gear-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
 							<MkButton primary class="start" @click="startGroup"><i class="ph-plus-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
 						</div>
-						<MkPagination v-slot="{items}" :pagination="groupsPagination">
+						<MkPagination v-slot="{}" :externalItemArray="groupMessages" :pagination="groupsPagination">
-							<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
+							<MkChatPreview v-for="message in groupMessages" :key="message.id" class="yweeujhr message _block" :message="message"/>
 						</MkPagination>
 					</div>
 				</swiper-slide>
@@ -58,17 +58,13 @@ import 'swiper/scss/virtual';
 const router = useRouter();
 
 let messages = $ref([]);
+let groupMessages = $ref([]);
 let connection = $ref(null);
-const reloadingKey = ref(0);
 
 const tabs = ['dms', 'groups'];
 let tab = $ref(tabs[0]);
 watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
 
-const forceRerender = () => {
-  reloadingKey.value += 1;
-};
-
 const headerActions = $computed(() => [{
 	asFullButton: true,
 	icon: 'ph-plus-bold ph-lg',
@@ -114,10 +110,9 @@ function onMessage(message): void {
 
 		messages.unshift(message);
 	} else if (message.groupId) {
-		messages = messages.filter(m => m.groupId !== message.groupId);
+		groupMessages = groupMessages.filter(m => m.groupId !== message.groupId);
-		messages.unshift(message);
+		groupMessages.unshift(message);
 	}
-	forceRerender();
 }
 
 function onRead(ids): void {