wip: migrate paging components to composition api

packages/client/src/pages/favorites.vue

@@ -1,19 +1,42 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes :pagination="pagination" :detail="true" :prop="'note'"/>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<div>{{ $ts.noNotes }}</div>
+			</div>
+		</template>
+
+		<template #default="{ items }">
+			<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
+				<XNote :key="item.id" :note="item.note" :class="$style.note" @update:note="noteUpdated(item, $event)"/>
+			</XList>
+		</template>
+	</MkPagination>
 </MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import XNotes from '@/components/notes.vue';
+import { ref } from 'vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import XNote from '@/components/note.vue';
+import XList from '@/components/date-separated-list.vue';
 import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 
 const pagination = {
-	endpoint: 'i/favorites',
+	endpoint: 'i/favorites' as const,
 	limit: 10,
-	params: () => ({
-	}),
+};
+
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+
+const noteUpdated = (item, note) => {
+	pagingComponent.value?.updateItem(item.id, old => ({
+		...old,
+		note: note,
+	}));
 };
 
 defineExpose({
@@ -24,3 +47,10 @@ defineExpose({
 	},
 });
 </script>
+
+<style lang="scss" module>
+.note {
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+</style>