Refactor client (#4307)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix bug

* 🎨

* 🎨

* 🎨

src/client/app/desktop/views/components/notes.vue

@@ -1,10 +1,12 @@
 <template>
 <div class="mk-notes">
+	<slot name="header"></slot>
+
 	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
 
-	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
+	<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
 
-	<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
+	<mk-error v-if="!fetching && !inited" @retry="init()"/>
 
 	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
@@ -23,8 +25,8 @@
 		</template>
 	</component>
 
-	<footer v-if="more">
+	<footer v-if="cursor != null">
-		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
 			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
 		</button>
@@ -43,24 +45,25 @@ const displayLimit = 30;
 
 export default Vue.extend({
 	i18n: i18n(),
+
 	components: {
 		XNote
 	},
 
 	props: {
-		more: {
+		makePromise: {
-			type: Function,
+			required: true
-			required: false
 		}
 	},
 
 	data() {
 		return {
-			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
 			fetching: true,
-			moreFetching: false
+			moreFetching: false,
+			inited: false,
+			cursor: null
 		};
 	},
 
@@ -76,6 +79,10 @@ export default Vue.extend({
 		}
 	},
 
+	created() {
+		this.init();
+	},
+
 	mounted() {
 		window.addEventListener('scroll', this.onScroll, { passive: true });
 	},
@@ -97,27 +104,41 @@ export default Vue.extend({
 			Vue.set((this as any).notes, i, note);
 		},
 
-		init(promiseGenerator: () => Promise<any[]>) {
+		reload() {
-			this.requestInitPromise = promiseGenerator;
-			this.resolveInitPromise();
-		},
-
-		resolveInitPromise() {
 			this.queue = [];
 			this.notes = [];
+			this.init();
+		},
+
+		init() {
 			this.fetching = true;
-
+			this.makePromise().then(x => {
-			const promise = this.requestInitPromise();
+				if (Array.isArray(x)) {
-
+					this.notes = x;
-			promise.then(notes => {
+				} else {
-				this.notes = notes;
+					this.notes = x.notes;
-				this.requestInitPromise = null;
+					this.cursor = x.cursor;
+				}
+				this.inited = true;
 				this.fetching = false;
+				this.$emit('inited');
 			}, e => {
 				this.fetching = false;
 			});
 		},
 
+		more() {
+			if (this.cursor == null || this.moreFetching) return;
+			this.moreFetching = true;
+			this.makePromise(this.cursor).then(x => {
+				this.notes = this.notes.concat(x.notes);
+				this.cursor = x.cursor;
+				this.moreFetching = false;
+			}, e => {
+				this.moreFetching = false;
+			});
+		},
+
 		prepend(note, silent = false) {
 			// 弾く
 			if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
@@ -151,10 +172,6 @@ export default Vue.extend({
 			this.notes.push(note);
 		},
 
-		tail() {
-			return this.notes[this.notes.length - 1];
-		},
-
 		releaseQueue() {
 			for (const n of this.queue) {
 				this.prepend(n, true);
@@ -162,15 +179,6 @@ export default Vue.extend({
 			this.queue = [];
 		},
 
-		async loadMore() {
-			if (this.more == null) return;
-			if (this.moreFetching) return;
-
-			this.moreFetching = true;
-			await this.more();
-			this.moreFetching = false;
-		},
-
 		onScroll() {
 			if (this.isScrollTop()) {
 				this.releaseQueue();
@@ -178,7 +186,7 @@ export default Vue.extend({
 
 			if (this.$store.state.settings.fetchOnScroll !== false) {
 				const current = window.scrollY + window.innerHeight;
-				if (current > document.body.offsetHeight - 8) this.loadMore();
+				if (current > document.body.offsetHeight - 8) this.more();
 			}
 		}
 	}
@@ -187,6 +195,11 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-notes
+	background var(--face)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
+
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to

src/client/app/desktop/views/components/user-list-timeline.vue

@@ -1,6 +1,10 @@
 <template>
 <div>
-	<mk-notes ref="timeline" :more="existMore ? more : null"/>
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
+		<template slot="header">
+			<slot></slot>
+		</template>
+	</mk-notes>
 </div>
 </template>
 
@@ -13,10 +17,28 @@ export default Vue.extend({
 	props: ['list'],
 	data() {
 		return {
-			fetching: true,
+			connection: null,
-			moreFetching: false,
+			makePromise: cursor => this.$root.api('notes/user-list-timeline', {
-			existMore: false,
+				listId: this.list.id,
-			connection: null
+				limit: fetchLimit + 1,
+				untilId: cursor ? cursor : undefined,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 	watch: {
@@ -37,63 +59,15 @@ export default Vue.extend({
 			this.connection.on('note', this.onNote);
 			this.connection.on('userAdded', this.onUserAdded);
 			this.connection.on('userRemoved', this.onUserRemoved);
-
-			this.fetch();
-		},
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/user-list-timeline', {
-					listId: this.list.id,
-					limit: fetchLimit + 1,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/user-list-timeline', {
-				listId: this.list.id,
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) (this.$refs.timeline as any).append(n);
-				this.moreFetching = false;
-			});
-
-			return promise;
 		},
 		onNote(note) {
-			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
 		onUserAdded() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		},
 		onUserRemoved() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		}
 	}
 });

src/client/app/desktop/views/deck/deck.direct.vue

@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null"/>
+<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 </template>
 
 <script lang="ts">
@@ -13,23 +13,36 @@ export default Vue.extend({
 		XNotes
 	},
 
-	props: {
-	},
-
 	data() {
 		return {
-			fetching: true,
+			connection: null,
-			moreFetching: false,
+			makePromise: cursor => this.$root.api('notes/mentions', {
-			existMore: false,
+				limit: fetchLimit + 1,
-			connection: null
+				untilId: cursor ? cursor : undefined,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				visibility: 'specified'
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
 	mounted() {
 		this.connection = this.$root.stream.useSharedConnection('main');
 		this.connection.on('mention', this.onNote);
-
-		this.fetch();
 	},
 
 	beforeDestroy() {
@@ -37,55 +50,6 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/mentions', {
-					limit: fetchLimit + 1,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-					visibility: 'specified'
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/mentions', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-				visibility: 'specified'
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		onNote(note) {
 			// Prepend a note
 			if (note.visibility == 'specified') {

src/client/app/desktop/views/deck/deck.favorites-column.vue

@@ -5,7 +5,7 @@
 	</span>
 
 	<div>
-		<x-notes ref="timeline" :more="existMore ? more : null"/>
+		<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 	</div>
 </x-column>
 </template>
@@ -28,58 +28,28 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
+			makePromise: cursor => this.$root.api('i/favorites', {
-			moreFetching: false,
+				limit: fetchLimit + 1,
-			existMore: false,
+				untilId: cursor ? cursor : undefined,
+			}).then(notes => {
+				notes = notes.map(x => x.note);
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
-	mounted() {
-		this.fetch();
-	},
-
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('i/favorites', {
-					limit: fetchLimit + 1,
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes.map(x => x.note));
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('i/favorites', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		focus() {
 			this.$refs.timeline.focus();
 		}

src/client/app/desktop/views/deck/deck.featured-column.vue

@@ -5,7 +5,7 @@
 	</span>
 
 	<div>
-		<x-notes ref="timeline" :more="null"/>
+		<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 	</div>
 </x-column>
 </template>
@@ -27,31 +27,17 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
+			faNewspaper,
-			faNewspaper
+			makePromise: cursor => this.$root.api('notes/featured', {
+				limit: 20,
+			}).then(notes => {
+				notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+				return notes;
+			})
 		};
 	},
 
-	mounted() {
-		this.fetch();
-	},
-
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/featured', {
-					limit: 20,
-				}).then(notes => {
-					notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
 		focus() {
 			this.$refs.timeline.focus();
 		}

src/client/app/desktop/views/deck/deck.hashtag-tl.vue

@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+<x-notes ref="timeline" :make-promise="makePromise" :media-view="mediaView" @inited="() => $emit('loaded')"/>
 </template>
 
 <script lang="ts">
@@ -32,16 +32,35 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
+			connection: null,
-			moreFetching: false,
+			makePromise: cursor => this.$root.api('notes/search_by_tag', {
-			existMore: false,
+				limit: fetchLimit + 1,
-			connection: null
+				untilId: cursor ? cursor : undefined,
+				withFiles: this.mediaOnly,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				query: this.tagTl.query
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
 	watch: {
 		mediaOnly() {
-			this.fetch();
+			this.$refs.timeline.reload();
 		}
 	},
 
@@ -51,8 +70,6 @@ export default Vue.extend({
 			q: this.tagTl.query
 		});
 		this.connection.on('note', this.onNote);
-
-		this.fetch();
 	},
 
 	beforeDestroy() {
@@ -60,61 +77,8 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search_by_tag', {
-					limit: fetchLimit + 1,
-					withFiles: this.mediaOnly,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-					query: this.tagTl.query
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/search_by_tag', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				withFiles: this.mediaOnly,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-				query: this.tagTl.query
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		onNote(note) {
 			if (this.mediaOnly && note.files.length == 0) return;
-
-			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
 

src/client/app/desktop/views/deck/deck.list-tl.vue

@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+<x-notes ref="timeline" :make-promise="makePromise" :media-view="mediaView" @inited="() => $emit('loaded')"/>
 </template>
 
 <script lang="ts">
@@ -32,16 +32,35 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
+			connection: null,
-			moreFetching: false,
+			makePromise: cursor => this.$root.api('notes/user-list-timeline', {
-			existMore: false,
+				listId: this.list.id,
-			connection: null
+				limit: fetchLimit + 1,
+				untilId: cursor ? cursor : undefined,
+				withFiles: this.mediaOnly,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
 	watch: {
 		mediaOnly() {
-			this.fetch();
+			this.$refs.timeline.reload();
 		}
 	},
 
@@ -53,8 +72,6 @@ export default Vue.extend({
 		this.connection.on('note', this.onNote);
 		this.connection.on('userAdded', this.onUserAdded);
 		this.connection.on('userRemoved', this.onUserRemoved);
-
-		this.fetch();
 	},
 
 	beforeDestroy() {
@@ -62,70 +79,17 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/user-list-timeline', {
-					listId: this.list.id,
-					limit: fetchLimit + 1,
-					withFiles: this.mediaOnly,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/user-list-timeline', {
-				listId: this.list.id,
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				withFiles: this.mediaOnly,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		onNote(note) {
 			if (this.mediaOnly && note.files.length == 0) return;
-
-			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
 
 		onUserAdded() {
-			this.fetch();
+			this.$refs.timeline.reload();
 		},
 
 		onUserRemoved() {
-			this.fetch();
+			this.$refs.timeline.reload();
 		},
 
 		focus() {

src/client/app/desktop/views/deck/deck.mentions.vue

@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null"/>
+<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 </template>
 
 <script lang="ts">
@@ -13,23 +13,35 @@ export default Vue.extend({
 		XNotes
 	},
 
-	props: {
-	},
-
 	data() {
 		return {
-			fetching: true,
+			connection: null,
-			moreFetching: false,
+			makePromise: cursor => this.$root.api('notes/mentions', {
-			existMore: false,
+				limit: fetchLimit + 1,
-			connection: null
+				untilId: cursor ? cursor : undefined,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
 	mounted() {
 		this.connection = this.$root.stream.useSharedConnection('main');
 		this.connection.on('mention', this.onNote);
-
-		this.fetch();
 	},
 
 	beforeDestroy() {
@@ -37,55 +49,7 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/mentions', {
-					limit: fetchLimit + 1,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/mentions', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		onNote(note) {
-			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
 

src/client/app/desktop/views/deck/deck.notes.vue

@@ -1,6 +1,8 @@
 <template>
 <div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
-	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
+	<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
+
+	<mk-error v-if="!fetching && !inited" @retry="init()"/>
 
 	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
@@ -8,8 +10,6 @@
 		</template>
 	</div>
 
-	<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
-
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition notes" ref="notes" tag="div">
 		<template v-for="(note, i) in _notes">
@@ -27,8 +27,8 @@
 		</template>
 	</component>
 
-	<footer v-if="more">
+	<footer v-if="cursor != null">
-		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
 			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
 		</button>
@@ -40,13 +40,13 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import shouldMuteNote from '../../../common/scripts/should-mute-note';
-
 import XNote from '../components/note.vue';
 
 const displayLimit = 20;
 
 export default Vue.extend({
 	i18n: i18n(),
+
 	components: {
 		XNote
 	},
@@ -54,9 +54,8 @@ export default Vue.extend({
 	inject: ['column', 'isScrollTop', 'count'],
 
 	props: {
-		more: {
+		makePromise: {
-			type: Function,
+			required: true
-			required: false
 		},
 		mediaView: {
 			type: Boolean,
@@ -68,11 +67,12 @@ export default Vue.extend({
 	data() {
 		return {
 			rootEl: null,
-			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
 			fetching: true,
-			moreFetching: false
+			moreFetching: false,
+			inited: false,
+			cursor: null
 		};
 	},
 
@@ -97,6 +97,7 @@ export default Vue.extend({
 	created() {
 		this.column.$on('top', this.onTop);
 		this.column.$on('bottom', this.onBottom);
+		this.init();
 	},
 
 	beforeDestroy() {
@@ -113,27 +114,41 @@ export default Vue.extend({
 			Vue.set((this as any).notes, i, note);
 		},
 
-		init(promiseGenerator: () => Promise<any[]>) {
+		reload() {
-			this.requestInitPromise = promiseGenerator;
-			this.resolveInitPromise();
-		},
-
-		resolveInitPromise() {
 			this.queue = [];
 			this.notes = [];
+			this.init();
+		},
+
+		init() {
 			this.fetching = true;
-
+			this.makePromise().then(x => {
-			const promise = this.requestInitPromise();
+				if (Array.isArray(x)) {
-
+					this.notes = x;
-			promise.then(notes => {
+				} else {
-				this.notes = notes;
+					this.notes = x.notes;
-				this.requestInitPromise = null;
+					this.cursor = x.cursor;
+				}
+				this.inited = true;
 				this.fetching = false;
+				this.$emit('inited');
 			}, e => {
 				this.fetching = false;
 			});
 		},
 
+		more() {
+			if (this.cursor == null || this.moreFetching) return;
+			this.moreFetching = true;
+			this.makePromise(this.cursor).then(x => {
+				this.notes = this.notes.concat(x.notes);
+				this.cursor = x.cursor;
+				this.moreFetching = false;
+			}, e => {
+				this.moreFetching = false;
+			});
+		},
+
 		prepend(note, silent = false) {
 			// 弾く
 			if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
@@ -160,10 +175,6 @@ export default Vue.extend({
 			this.notes.push(note);
 		},
 
-		tail() {
-			return this.notes[this.notes.length - 1];
-		},
-
 		releaseQueue() {
 			for (const n of this.queue) {
 				this.prepend(n, true);
@@ -171,21 +182,12 @@ export default Vue.extend({
 			this.queue = [];
 		},
 
-		async loadMore() {
-			if (this.more == null) return;
-			if (this.moreFetching) return;
-
-			this.moreFetching = true;
-			await this.more();
-			this.moreFetching = false;
-		},
-
 		onTop() {
 			this.releaseQueue();
 		},
 
 		onBottom() {
-			this.loadMore();
+			this.more();
 		}
 	}
 });

src/client/app/desktop/views/deck/deck.search-column.vue

@@ -5,7 +5,7 @@
 	</span>
 
 	<div>
-		<x-notes ref="timeline" :more="existMore ? more : null"/>
+		<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 	</div>
 </x-column>
 </template>
@@ -25,12 +25,24 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
+			makePromise: cursor => this.$root.api('notes/search', {
-			moreFetching: false,
+				limit: limit + 1,
-			existMore: false,
+				offset: cursor ? cursor : undefined,
-			offset: 0,
+				query: this.q
-			empty: false,
+			}).then(notes => {
-			notAvailable: false
+				if (notes.length == limit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: cursor ? cursor + limit : limit
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
@@ -41,59 +53,9 @@ export default Vue.extend({
 	},
 
 	watch: {
-		$route: 'fetch'
+		$route() {
-	},
+			this.$refs.timeline.reload();
-
-	created() {
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search', {
-					limit: limit + 1,
-					offset: this.offset,
-					query: this.q
-				}).then(notes => {
-					if (notes.length == 0) this.empty = true;
-					if (notes.length == limit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-				}, (e: string) => {
-					this.fetching = false;
-					if (e === 'searching not available') this.notAvailable = true;
-				});
-			}));
-		},
-		more() {
-			this.offset += limit;
-
-			const promise = this.$root.api('notes/search', {
-				limit: limit + 1,
-				offset: this.offset,
-				query: this.q
-			});
-
-			promise.then(notes => {
-				if (notes.length == limit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
 		}
-	}
+	},
 });
 </script>

src/client/app/desktop/views/deck/deck.tl.vue

@@ -6,7 +6,7 @@
 	</p>
 	<p class="desc">{{ $t('disabled-timeline.description') }}</p>
 </div>
-<x-notes v-else ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+<x-notes v-else ref="timeline" :make-promise="makePromise" :media-view="mediaView" @inited="() => $emit('loaded')"/>
 </template>
 
 <script lang="ts">
@@ -44,12 +44,10 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
 			connection: null,
 			disabled: false,
-			faMinusCircle
+			faMinusCircle,
+			makePromise: null
 		};
 	},
 
@@ -79,6 +77,28 @@ export default Vue.extend({
 		}
 	},
 
+	created() {
+		this.makePromise = cursor => this.$root.api(this.endpoint, {
+			limit: fetchLimit + 1,
+			untilDate: cursor ? undefined : (this.date ? this.date.getTime() : undefined),
+			untilId: cursor ? cursor : undefined,
+			...this.baseQuery, ...this.query
+		}).then(notes => {
+			if (notes.length == fetchLimit + 1) {
+				notes.pop();
+				return {
+					notes: notes,
+					cursor: notes[notes.length - 1].id
+				};
+			} else {
+				return {
+					notes: notes,
+					cursor: null
+				};
+			}
+		});
+	},
+
 	mounted() {
 		this.connection = this.stream;
 
@@ -93,8 +113,6 @@ export default Vue.extend({
 				meta.disableLocalTimeline && ['local', 'hybrid'].includes(this.src) ||
 				meta.disableGlobalTimeline && ['global'].includes(this.src));
 		});
-
-		this.fetch();
 	},
 
 	beforeDestroy() {
@@ -102,64 +120,13 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api(this.endpoint, {
-					limit: fetchLimit + 1,
-					withFiles: this.mediaOnly,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api(this.endpoint, {
-				limit: fetchLimit + 1,
-				withFiles: this.mediaOnly,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		onNote(note) {
 			if (this.mediaOnly && note.files.length == 0) return;
-
-			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
 
 		onChangeFollowing() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		},
 
 		focus() {

src/client/app/desktop/views/deck/deck.user-column.home.vue

@@ -26,7 +26,7 @@
 	<ui-container>
 		<span slot="header"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</span>
 		<div>
-			<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
+			<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 		</div>
 	</ui-container>
 </div>
@@ -35,7 +35,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import parseAcct from '../../../../../misc/acct/parse';
 import XNotes from './deck.notes.vue';
 import XNote from '../components/note.vue';
 import { concat } from '../../../../../prelude/array';
@@ -45,6 +44,7 @@ const fetchLimit = 10;
 
 export default Vue.extend({
 	i18n: i18n('deck/deck.user-column.vue'),
+
 	components: {
 		XNotes,
 		XNote
@@ -59,10 +59,30 @@ export default Vue.extend({
 
 	data() {
 		return {
-			existMore: false,
-			moreFetching: false,
 			withFiles: false,
 			images: [],
+			makePromise: cursor => this.$root.api('users/notes', {
+				userId: this.user.id,
+				limit: fetchLimit + 1,
+				untilId: cursor ? cursor : undefined,
+				withFiles: this.withFiles,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
@@ -72,10 +92,6 @@ export default Vue.extend({
 
 	methods: {
 		fetch() {
-			this.$nextTick(() => {
-				(this.$refs.timeline as any).init(() => this.initTl());
-			});
-
 			const image = [
 				'image/jpeg',
 				'image/png',
@@ -177,52 +193,6 @@ export default Vue.extend({
 				chart.render();
 			});
 		},
-
-		initTl() {
-			return new Promise((res, rej) => {
-				this.$root.api('users/notes', {
-					userId: this.user.id,
-					limit: fetchLimit + 1,
-					untilDate: new Date().getTime() + 1000 * 86400 * 365,
-					withFiles: this.withFiles,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-				}, rej);
-			});
-		},
-
-		fetchMoreNotes() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('users/notes', {
-				userId: this.user.id,
-				limit: fetchLimit + 1,
-				untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime(),
-				withFiles: this.withFiles,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) (this.$refs.timeline as any).append(n);
-				this.moreFetching = false;
-			});
-
-			return promise;
-		}
 	}
 });
 </script>

src/client/app/desktop/views/home/search.vue

@@ -1,13 +1,10 @@
 <template>
-<div class="oxgbmvii">
+<div>
-	<div class="notes">
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited">
-		<header>
+		<header slot="header" class="oxgbmvii">
 			<span><fa icon="search"/> {{ q }}</span>
 		</header>
-		<p v-if="!fetching && notAvailable">{{ $t('not-available') }}</p>
+	</mk-notes>
-		<p v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
-		<mk-notes ref="timeline" :more="existMore ? more : null"/>
-	</div>
 </div>
 </template>
 
@@ -22,27 +19,40 @@ export default Vue.extend({
 	i18n: i18n('desktop/views/pages/search.vue'),
 	data() {
 		return {
-			fetching: true,
+			makePromise: cursor => this.$root.api('notes/search', {
-			moreFetching: false,
+				limit: limit + 1,
-			existMore: false,
+				offset: cursor ? cursor : undefined,
-			offset: 0,
+				query: this.q
-			empty: false,
+			}).then(notes => {
-			notAvailable: false
+				if (notes.length == limit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: cursor ? cursor + limit : limit
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
-	watch: {
-		$route: 'fetch'
-	},
 	computed: {
 		q(): string {
 			return this.$route.query.q;
 		}
 	},
+	watch: {
+		$route() {
+			this.$refs.timeline.reload();
+		}
+	},
 	mounted() {
 		document.addEventListener('keydown', this.onDocumentKeydown);
 		window.addEventListener('scroll', this.onScroll, { passive: true });
-
+		Progress.start();
-		this.fetch();
 	},
 	beforeDestroy() {
 		document.removeEventListener('keydown', this.onDocumentKeydown);
@@ -56,75 +66,23 @@ export default Vue.extend({
 				}
 			}
 		},
-		fetch() {
+		inited() {
-			this.fetching = true;
+			Progress.done();
-			Progress.start();
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search', {
-					limit: limit + 1,
-					offset: this.offset,
-					query: this.q
-				}).then(notes => {
-					if (notes.length == 0) this.empty = true;
-					if (notes.length == limit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					Progress.done();
-				}, (e: string) => {
-					this.fetching = false;
-					Progress.done();
-					if (e === 'searching not available') this.notAvailable = true;
-				});
-			}));
 		},
-		more() {
-			this.offset += limit;
-
-			const promise = this.$root.api('notes/search', {
-				limit: limit + 1,
-				offset: this.offset,
-				query: this.q
-			});
-
-			promise.then(notes => {
-				if (notes.length == limit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
 .oxgbmvii
-	> .notes
+	padding 0 8px
-		background var(--face)
+	z-index 10
-		box-shadow var(--shadow)
+	background var(--faceHeader)
-		border-radius var(--round)
+	box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
-		overflow hidden
 
-		> header
+	> span
-			padding 0 8px
+		padding 0 8px
-			z-index 10
+		font-size 0.9em
-			background var(--faceHeader)
+		line-height 42px
-			box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
+		color var(--text)
-
-			> span
-				padding 0 8px
-				font-size 0.9em
-				line-height 42px
-				color var(--text)
 </style>

src/client/app/desktop/views/home/tag.vue

@@ -1,7 +1,10 @@
 <template>
 <div>
-	<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('no-posts-found', { q: $route.params.tag }) }}</p>
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited">
-	<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
+		<header class="wqraeznr" slot="header">
+			<span><fa icon="hashtag"/> {{ $route.params.tag }}</span>
+		</header>
+	</mk-notes>
 </div>
 </template>
 
@@ -16,21 +19,35 @@ export default Vue.extend({
 	i18n: i18n('desktop/views/pages/tag.vue'),
 	data() {
 		return {
-			fetching: true,
+			makePromise: cursor => this.$root.api('notes/search_by_tag', {
-			moreFetching: false,
+				limit: limit + 1,
-			existMore: false,
+				offset: cursor ? cursor : undefined,
-			offset: 0,
+				tag: this.$route.params.tag
-			empty: false
+			}).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: cursor ? cursor + limit : limit
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 	watch: {
-		$route: 'fetch'
+		$route() {
+			this.$refs.timeline.reload();
+		}
 	},
 	mounted() {
 		document.addEventListener('keydown', this.onDocumentKeydown);
 		window.addEventListener('scroll', this.onScroll, { passive: true });
-
+		Progress.start();
-		this.fetch();
 	},
 	beforeDestroy() {
 		document.removeEventListener('keydown', this.onDocumentKeydown);
@@ -44,73 +61,23 @@ export default Vue.extend({
 				}
 			}
 		},
-		fetch() {
+		inited() {
-			this.fetching = true;
+			Progress.done();
-			Progress.start();
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search_by_tag', {
-					limit: limit + 1,
-					offset: this.offset,
-					tag: this.$route.params.tag
-				}).then(notes => {
-					if (notes.length == 0) this.empty = true;
-					if (notes.length == limit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					Progress.done();
-				}, rej);
-			}));
 		},
-		more() {
-			this.offset += limit;
-
-			const promise = this.$root.api('notes/search_by_tag', {
-				limit: limit + 1,
-				offset: this.offset,
-				tag: this.$route.params.tag
-			});
-
-			promise.then(notes => {
-				if (notes.length == limit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		}
 	}
 });
 </script>
 
-<style lang="stylus" module>
+<style lang="stylus" scoped>
-.notes
+.wqraeznr
-	background var(--face)
+	padding 0 8px
-	box-shadow var(--shadow)
+	z-index 10
-	border-radius var(--round)
+	background var(--faceHeader)
-	overflow hidden
+	box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
-
-.empty
-	display block
-	margin 0 auto
-	padding 32px
-	max-width 400px
-	text-align center
-	color #999
-
-	> [data-icon]
-		display block
-		margin-bottom 16px
-		font-size 3em
-		color #ccc
 
+	> span
+		padding 0 8px
+		font-size 0.9em
+		line-height 42px
+		color var(--text)
 </style>

src/client/app/desktop/views/home/timeline.core.vue

@@ -5,8 +5,11 @@
 		<router-link to="/explore">{{ $t('@.empty-timeline-info.explore') }}</router-link>
 	</div>
 
-	<mk-notes ref="timeline" :more="existMore ? more : null">
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
-		<p :class="$style.empty" slot="empty">
+		<template slot="header">
+			<slot></slot>
+		</template>
+		<p slot="empty">
 			<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
 		</p>
 	</mk-notes>
@@ -21,6 +24,7 @@ const fetchLimit = 10;
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/timeline.core.vue'),
+
 	props: {
 		src: {
 			type: String,
@@ -33,9 +37,6 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
 			connection: null,
 			date: null,
 			baseQuery: {
@@ -44,21 +45,18 @@ export default Vue.extend({
 				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
 			},
 			query: {},
-			endpoint: null
+			endpoint: null,
+			makePromise: null
 		};
 	},
 
 	computed: {
 		alone(): boolean {
 			return this.$store.state.i.followingCount == 0;
-		},
-
-		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
-	mounted() {
+	created() {
 		const prepend = note => {
 			(this.$refs.timeline as any).prepend(note);
 		};
@@ -109,7 +107,25 @@ export default Vue.extend({
 			this.connection.on('mention', onNote);
 		}
 
-		this.fetch();
+		this.makePromise = cursor => this.$root.api(this.endpoint, {
+			limit: fetchLimit + 1,
+			untilDate: cursor ? undefined : (this.date ? this.date.getTime() : undefined),
+			untilId: cursor ? cursor : undefined,
+			...this.baseQuery, ...this.query
+		}).then(notes => {
+			if (notes.length == fetchLimit + 1) {
+				notes.pop();
+				return {
+					notes: notes,
+					cursor: notes[notes.length - 1].id
+				};
+			} else {
+				return {
+					notes: notes,
+					cursor: null
+				};
+			}
+		});
 	},
 
 	beforeDestroy() {
@@ -117,57 +133,8 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api(this.endpoint, Object.assign({
-					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : undefined
-				}, this.baseQuery, this.query)).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			if (!this.canFetchMore) return;
-
-			this.moreFetching = true;
-
-			const promise = this.$root.api(this.endpoint, Object.assign({
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id
-			}, this.baseQuery, this.query));
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		focus() {
 			(this.$refs.timeline as any).focus();
-		},
-
-		warp(date) {
-			this.date = date;
-			this.fetch();
 		}
 	}
 });
@@ -186,20 +153,3 @@ export default Vue.extend({
 			margin 0 0 8px 0
 
 </style>
-
-<style lang="stylus" module>
-.empty
-	display block
-	margin 0 auto
-	padding 32px
-	max-width 400px
-	text-align center
-	color #999
-
-	> [data-icon]
-		display block
-		margin-bottom 16px
-		font-size 3em
-		color #ccc
-
-</style>

src/client/app/desktop/views/home/timeline.vue

@@ -1,29 +1,23 @@
 <template>
-<div class="mk-timeline">
+<div class="pwbzawku">
 	<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
 	<div class="main">
-		<header>
+		<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
-			<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
+			<header class="zahtxcqi">
-			<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
+				<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
-			<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
+				<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
-			<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
+				<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
-			<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
+				<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
-			<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
+				<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
-			<div class="buttons">
+				<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
-				<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
+				<div class="buttons">
-				<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
+					<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
-				<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
+					<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
-				<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
+					<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
-			</div>
+					<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
-		</header>
+				</div>
-		<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
+			</header>
-		<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
+		</component>
-		<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
-		<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
-		<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
-		<x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
-		<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
-		<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 	</div>
 </div>
 </template>
@@ -51,6 +45,16 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		options(): any {
+			return {
+				...(this.src == 'list' ? { list: this.list } : { src: this.src }),
+				...(this.src == 'tag' ? { tagTl: this.tagTl } : {}),
+				key: this.src == 'list' ? this.list.id : this.src
+			}
+		}
+	},
+
 	watch: {
 		src() {
 			this.saveSrc();
@@ -186,88 +190,82 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-timeline
+.pwbzawku
 	> .form
 		margin-bottom 16px
 		box-shadow var(--shadow)
 		border-radius var(--round)
 
-	> .main
+	.zahtxcqi
-		background var(--face)
+		padding 0 8px
-		box-shadow var(--shadow)
+		z-index 10
-		border-radius var(--round)
+		background var(--faceHeader)
-		overflow hidden
+		box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
 
-		> header
+		> .buttons
-			padding 0 8px
+			position absolute
-			z-index 10
+			z-index 2
-			background var(--faceHeader)
+			top 0
-			box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
+			right 0
+			padding-right 8px
 
-			> .buttons
+			> button
-				position absolute
+				padding 0 8px
-				z-index 2
+				font-size 0.9em
-				top 0
-				right 0
-				padding-right 8px
-
-				> button
-					padding 0 8px
-					font-size 0.9em
-					line-height 42px
-					color var(--faceTextButton)
-
-					> .badge
-						position absolute
-						top -4px
-						right 4px
-						font-size 10px
-						color var(--notificationIndicator)
-
-					&:hover
-						color var(--faceTextButtonHover)
-
-					&[data-active]
-						color var(--primary)
-						cursor default
-
-						&:before
-							content ""
-							display block
-							position absolute
-							bottom 0
-							left 0
-							width 100%
-							height 2px
-							background var(--primary)
-
-			> span
-				display inline-block
-				padding 0 10px
 				line-height 42px
-				font-size 12px
+				color var(--faceTextButton)
-				user-select none
+
+				> .badge
+					position absolute
+					top -4px
+					right 4px
+					font-size 10px
+					color var(--notificationIndicator)
+
+				&:hover
+					color var(--faceTextButtonHover)
 
 				&[data-active]
 					color var(--primary)
 					cursor default
-					font-weight bold
 
 					&:before
 						content ""
 						display block
 						position absolute
 						bottom 0
-						left -8px
+						left 0
-						width calc(100% + 16px)
+						width 100%
 						height 2px
 						background var(--primary)
 
-				&:not([data-active])
+		> span
-					color var(--desktopTimelineSrc)
+			display inline-block
-					cursor pointer
+			padding 0 10px
+			line-height 42px
+			font-size 12px
+			user-select none
 
-					&:hover
+			&[data-active]
-						color var(--desktopTimelineSrcHover)
+				color var(--primary)
+				cursor default
+				font-weight bold
+
+				&:before
+					content ""
+					display block
+					position absolute
+					bottom 0
+					left -8px
+					width calc(100% + 16px)
+					height 2px
+					background var(--primary)
+
+			&:not([data-active])
+				color var(--desktopTimelineSrc)
+				cursor pointer
+
+				&:hover
+					color var(--desktopTimelineSrcHover)
 
 </style>

src/client/app/desktop/views/home/user/user.home.vue

@@ -10,7 +10,7 @@
 		</ui-container>
 	</div>
 	<x-photos :user="user"/>
-	<x-timeline class="timeline" ref="tl" :user="user"/>
+	<x-timeline ref="tl" :user="user"/>
 </div>
 </template>
 
@@ -51,7 +51,4 @@ export default Vue.extend({
 	> *
 		margin-bottom 16px
 
-	> .timeline
-		box-shadow var(--shadow)
-
 </style>

src/client/app/desktop/views/home/user/user.timeline.vue

@@ -1,12 +1,12 @@
 <template>
-<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
+<div>
-	<header>
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
-		<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
+		<header slot="header" class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
-		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
+			<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
-		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
+			<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
-		<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
+			<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
-	</header>
+			<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
-	<mk-notes ref="timeline" :more="existMore ? more : null">
+		</header>
 		<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>
 	</mk-notes>
 </div>
@@ -20,29 +20,47 @@ const fetchLimit = 10;
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/pages/user/user.timeline.vue'),
+
 	props: ['user'],
 
 	data() {
 		return {
 			fetching: true,
-			moreFetching: false,
-			existMore: false,
 			mode: 'default',
 			unreadCount: 0,
-			date: null
+			date: null,
+			makePromise: cursor => this.$root.api('users/notes', {
+				userId: this.user.id,
+				limit: fetchLimit + 1,
+				includeReplies: this.mode == 'with-replies',
+				includeMyRenotes: this.mode != 'my-posts',
+				withFiles: this.mode == 'with-media',
+				untilId: cursor ? cursor : undefined
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
 	watch: {
 		mode() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		}
 	},
 
 	mounted() {
 		document.addEventListener('keydown', this.onDocumentKeydown);
-
-		this.fetch(() => this.$emit('loaded'));
 	},
 
 	beforeDestroy() {
@@ -58,58 +76,9 @@ export default Vue.extend({
 			}
 		},
 
-		fetch(cb?) {
-			this.fetching = true;
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('users/notes', {
-					userId: this.user.id,
-					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : new Date().getTime() + 1000 * 86400 * 365,
-					includeReplies: this.mode == 'with-replies',
-					includeMyRenotes: this.mode != 'my-posts',
-					withFiles: this.mode == 'with-media'
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					if (cb) cb();
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('users/notes', {
-				userId: this.user.id,
-				limit: fetchLimit + 1,
-				includeReplies: this.mode == 'with-replies',
-				includeMyRenotes: this.mode != 'my-posts',
-				withFiles: this.mode == 'with-media',
-				untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		warp(date) {
 			this.date = date;
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		}
 	}
 });
@@ -117,59 +86,38 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .oh5y2r7l5lx8j6jj791ykeiwgihheguk
-	background var(--face)
+	padding 0 8px
-	border-radius var(--round)
+	z-index 10
-	overflow hidden
+	background var(--faceHeader)
+	box-shadow 0 1px var(--desktopTimelineHeaderShadow)
 
-	> header
+	> span
-		padding 0 8px
+		display inline-block
-		z-index 10
+		padding 0 10px
-		background var(--faceHeader)
+		line-height 42px
-		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
+		font-size 12px
+		user-select none
 
-		> span
+		&[data-active]
-			display inline-block
+			color var(--primary)
-			padding 0 10px
+			cursor default
-			line-height 42px
+			font-weight bold
-			font-size 12px
-			user-select none
 
-			&[data-active]
+			&:before
-				color var(--primary)
+				content ""
-				cursor default
-				font-weight bold
-
-				&:before
-					content ""
-					display block
-					position absolute
-					bottom 0
-					left -8px
-					width calc(100% + 16px)
-					height 2px
-					background var(--primary)
-
-			&:not([data-active])
-				color var(--desktopTimelineSrc)
-				cursor pointer
-
-				&:hover
-					color var(--desktopTimelineSrcHover)
-
-	> .mk-notes
-
-		> .empty
-			display block
-			margin 0 auto
-			padding 32px
-			max-width 400px
-			text-align center
-			color var(--text)
-
-			> [data-icon]
 				display block
-				margin-bottom 16px
+				position absolute
-				font-size 3em
+				bottom 0
-				color var(--faceHeaderText);
+				left -8px
+				width calc(100% + 16px)
+				height 2px
+				background var(--primary)
+
+		&:not([data-active])
+			color var(--desktopTimelineSrc)
+			cursor pointer
+
+			&:hover
+				color var(--desktopTimelineSrcHover)
 
 </style>

src/client/app/mobile/style.styl

@@ -9,3 +9,15 @@
 html
 	height 100%
 	background var(--bg)
+
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px

src/client/app/mobile/views/components/notes.vue

@@ -1,8 +1,8 @@
 <template>
-<div class="mk-notes">
+<div class="ivaojijs">
-	<slot name="head"></slot>
+	<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
 
-	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
+	<mk-error v-if="!fetching && !inited" @retry="init()"/>
 
 	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
@@ -10,8 +10,6 @@
 		</template>
 	</div>
 
-	<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
-
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
 		<template v-for="(note, i) in _notes">
@@ -23,8 +21,8 @@
 		</template>
 	</component>
 
-	<footer v-if="more">
+	<footer v-if="cursor != null">
-		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
 			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
 		</button>
@@ -41,20 +39,21 @@ const displayLimit = 30;
 
 export default Vue.extend({
 	i18n: i18n(),
+
 	props: {
-		more: {
+		makePromise: {
-			type: Function,
+			required: true
-			required: false
 		}
 	},
 
 	data() {
 		return {
-			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
 			fetching: true,
-			moreFetching: false
+			moreFetching: false,
+			inited: false,
+			cursor: null
 		};
 	},
 
@@ -80,6 +79,10 @@ export default Vue.extend({
 		}
 	},
 
+	created() {
+		this.init();
+	},
+
 	mounted() {
 		window.addEventListener('scroll', this.onScroll, { passive: true });
 	},
@@ -97,27 +100,41 @@ export default Vue.extend({
 			Vue.set((this as any).notes, i, note);
 		},
 
-		init(promiseGenerator: () => Promise<any[]>) {
+		reload() {
-			this.requestInitPromise = promiseGenerator;
-			this.resolveInitPromise();
-		},
-
-		resolveInitPromise() {
 			this.queue = [];
 			this.notes = [];
+			this.init();
+		},
+
+		init() {
 			this.fetching = true;
-
+			this.makePromise().then(x => {
-			const promise = this.requestInitPromise();
+				if (Array.isArray(x)) {
-
+					this.notes = x;
-			promise.then(notes => {
+				} else {
-				this.notes = notes;
+					this.notes = x.notes;
-				this.requestInitPromise = null;
+					this.cursor = x.cursor;
+				}
+				this.inited = true;
 				this.fetching = false;
+				this.$emit('inited');
 			}, e => {
 				this.fetching = false;
 			});
 		},
 
+		more() {
+			if (this.cursor == null || this.moreFetching) return;
+			this.moreFetching = true;
+			this.makePromise(this.cursor).then(x => {
+				this.notes = this.notes.concat(x.notes);
+				this.cursor = x.cursor;
+				this.moreFetching = false;
+			}, e => {
+				this.moreFetching = false;
+			});
+		},
+
 		prepend(note, silent = false) {
 			// 弾く
 			if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
@@ -144,10 +161,6 @@ export default Vue.extend({
 			this.notes.push(note);
 		},
 
-		tail() {
-			return this.notes[this.notes.length - 1];
-		},
-
 		releaseQueue() {
 			for (const n of this.queue) {
 				this.prepend(n, true);
@@ -155,15 +168,6 @@ export default Vue.extend({
 			this.queue = [];
 		},
 
-		async loadMore() {
-			if (this.more == null) return;
-			if (this.moreFetching) return;
-
-			this.moreFetching = true;
-			await this.more();
-			this.moreFetching = false;
-		},
-
 		onScroll() {
 			if (this.isScrollTop()) {
 				this.releaseQueue();
@@ -176,7 +180,7 @@ export default Vue.extend({
 				if (this.$el.offsetHeight == 0) return;
 
 				const current = window.scrollY + window.innerHeight;
-				if (current > document.body.offsetHeight - 8) this.loadMore();
+				if (current > document.body.offsetHeight - 8) this.more();
 			}
 		}
 	}
@@ -184,7 +188,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notes
+.ivaojijs
 	overflow hidden
 	background var(--face)
 	border-radius 8px

src/client/app/mobile/views/components/user-list-timeline.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<mk-notes ref="timeline" :more="existMore ? more : null"/>
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 </div>
 </template>
 
@@ -14,19 +14,31 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
+			connection: null,
-			moreFetching: false,
+			makePromise: cursor => this.$root.api('notes/user-list-timeline', {
-			existMore: false,
+				listId: this.list.id,
-			connection: null
+				limit: fetchLimit + 1,
+				untilId: cursor ? cursor : undefined,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 
-	computed: {
-		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.existMore;
-		}
-	},
-
 	watch: {
 		$route: 'init'
 	},
@@ -48,59 +60,6 @@ export default Vue.extend({
 			this.connection.on('note', this.onNote);
 			this.connection.on('userAdded', this.onUserAdded);
 			this.connection.on('userRemoved', this.onUserRemoved);
-
-			this.fetch();
-		},
-
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/user-list-timeline', {
-					listId: this.list.id,
-					limit: fetchLimit + 1,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			if (!this.canFetchMore) return;
-
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/user-list-timeline', {
-				listId: this.list.id,
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
 		},
 
 		onNote(note) {
@@ -109,11 +68,11 @@ export default Vue.extend({
 		},
 
 		onUserAdded() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		},
 
 		onUserRemoved() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		}
 	}
 });

src/client/app/mobile/views/components/user-timeline.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-user-timeline">
-	<mk-notes ref="timeline" :more="existMore ? more : null">
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
 		<div slot="empty">
 			<fa :icon="['far', 'comments']"/>
 			{{ withMedia ? this.$t('no-notes-with-media') : this.$t('no-notes') }}
@@ -17,73 +17,31 @@ const fetchLimit = 10;
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/components/user-timeline.vue'),
+
 	props: ['user', 'withMedia'],
 
 	data() {
 		return {
-			fetching: true,
+			makePromise: cursor => this.$root.api('users/notes', {
-			existMore: false,
-			moreFetching: false
-		};
-	},
-
-	computed: {
-		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.existMore;
-		}
-	},
-
-	mounted() {
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('users/notes', {
-					userId: this.user.id,
-					withFiles: this.withMedia,
-					limit: fetchLimit + 1,
-					untilDate: new Date().getTime() + 1000 * 86400 * 365
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			if (!this.canFetchMore) return;
-
-			this.moreFetching = true;
-
-			const promise = this.$root.api('users/notes', {
 				userId: this.user.id,
-				withFiles: this.withMedia,
 				limit: fetchLimit + 1,
-				untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
+				withFiles: this.withMedia,
-			});
+				untilId: cursor ? cursor : undefined
-
+			}).then(notes => {
-			promise.then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();
+					return {
+						notes: notes,
+						cursor: notes[notes.length - 1].id
+					};
 				} else {
-					this.existMore = false;
+					return {
+						notes: notes,
+						cursor: null
+					};
 				}
-				for (const n of notes) {
+			})
-					(this.$refs.timeline as any).append(n);
+		};
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		}
 	}
 });
 </script>

src/client/app/mobile/views/pages/explore.vue

@@ -26,18 +26,3 @@ export default Vue.extend({
 	},
 });
 </script>
-
-<style lang="stylus" scoped>
-main
-	width 100%
-	max-width 680px
-	margin 0 auto
-	padding 8px
-
-	@media (min-width 500px)
-		padding 16px
-
-	@media (min-width 600px)
-		padding 32px
-
-</style>

src/client/app/mobile/views/pages/favorites.vue

@@ -76,21 +76,11 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 main
-	width 100%
-	max-width 680px
-	margin 0 auto
-	padding 8px
-
 	> * > .post
 		margin-bottom 8px
 
 	@media (min-width 500px)
-		padding 16px
-
 		> * > .post
 			margin-bottom 16px
 
-	@media (min-width 600px)
-		padding 32px
-
 </style>

src/client/app/mobile/views/pages/featured.vue

@@ -51,21 +51,11 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 main
-	width 100%
-	max-width 680px
-	margin 0 auto
-	padding 8px
-
 	> * > .post
 		margin-bottom 8px
 
 	@media (min-width 500px)
-		padding 16px
-
 		> * > .post
 			margin-bottom 16px
 
-	@media (min-width 600px)
-		padding 32px
-
 </style>

src/client/app/mobile/views/pages/home.timeline.vue

@@ -7,7 +7,7 @@
 		</div>
 	</ui-container>
 
-	<mk-notes ref="timeline" :more="existMore ? more : null">
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
 		<div slot="empty">
 			<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
 		</div>
@@ -36,9 +36,6 @@ export default Vue.extend({
 
 	data() {
 		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
 			streamManager: null,
 			connection: null,
 			unreadCount: 0,
@@ -49,21 +46,18 @@ export default Vue.extend({
 				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
 			},
 			query: {},
-			endpoint: null
+			endpoint: null,
+			makePromise: null
 		};
 	},
 
 	computed: {
 		alone(): boolean {
 			return this.$store.state.i.followingCount == 0;
-		},
-
-		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
-	mounted() {
+	created() {
 		const prepend = note => {
 			(this.$refs.timeline as any).prepend(note);
 		};
@@ -114,7 +108,25 @@ export default Vue.extend({
 			this.connection.on('mention', onNote);
 		}
 
-		this.fetch();
+		this.makePromise = cursor => this.$root.api(this.endpoint, {
+			limit: fetchLimit + 1,
+			untilDate: cursor ? undefined : (this.date ? this.date.getTime() : undefined),
+			untilId: cursor ? cursor : undefined,
+			...this.baseQuery, ...this.query
+		}).then(notes => {
+			if (notes.length == fetchLimit + 1) {
+				notes.pop();
+				return {
+					notes: notes,
+					cursor: notes[notes.length - 1].id
+				};
+			} else {
+				return {
+					notes: notes,
+					cursor: null
+				};
+			}
+		});
 	},
 
 	beforeDestroy() {
@@ -122,57 +134,13 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api(this.endpoint, Object.assign({
-					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : undefined
-				}, this.baseQuery, this.query)).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			if (!this.canFetchMore) return;
-
-			this.moreFetching = true;
-
-			const promise = this.$root.api(this.endpoint, Object.assign({
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id
-			}, this.baseQuery, this.query));
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
 		focus() {
 			(this.$refs.timeline as any).focus();
 		},
 
 		warp(date) {
 			this.date = date;
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		}
 	}
 });

src/client/app/mobile/views/pages/home.vue

@@ -233,17 +233,6 @@ main
 						font-size 10px
 						color var(--notificationIndicator)
 
-	> .tl
-		max-width 680px
-		margin 0 auto
-		padding 8px
-
-		@media (min-width 500px)
-			padding 16px
-
-		@media (min-width 600px)
-			padding 32px
-
 </style>
 
 <style lang="stylus" module>

src/client/app/mobile/views/pages/note.vue

@@ -56,18 +56,6 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 main
 	text-align center
-	padding 8px
-
-	@media (min-width 500px)
-		padding 16px
-
-	@media (min-width 600px)
-		padding 32px
-
-	> div
-		margin 0 auto
-		padding 0
-		max-width 600px
 
 	> footer
 		margin-top 16px

src/client/app/mobile/views/pages/notifications.vue

@@ -39,18 +39,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-main
-	width 100%
-	max-width 680px
-	margin 0 auto
-	padding 8px
-
-	@media (min-width 500px)
-		padding 16px
-
-	@media (min-width 600px)
-		padding 32px
-
-</style>

src/client/app/mobile/views/pages/received-follow-requests.vue

@@ -57,17 +57,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 main
-	width 100%
-	max-width 680px
-	margin 0 auto
-	padding 8px
-
-	@media (min-width 500px)
-		padding 16px
-
-	@media (min-width 600px)
-		padding 32px
-
 	> div
 		display flex
 		padding 16px

src/client/app/mobile/views/pages/search.vue

@@ -3,8 +3,7 @@
 	<span slot="header"><fa icon="search"/> {{ q }}</span>
 
 	<main>
-		<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
+		<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
-		<mk-notes ref="timeline" :more="existMore ? more : null"/>
 	</main>
 </mk-ui>
 </template>
@@ -20,15 +19,30 @@ export default Vue.extend({
 	i18n: i18n('mobile/views/pages/search.vue'),
 	data() {
 		return {
-			fetching: true,
+			makePromise: cursor => this.$root.api('notes/search', {
-			moreFetching: false,
+				limit: limit + 1,
-			existMore: false,
+				offset: cursor ? cursor : undefined,
-			empty: false,
+				query: this.q
-			offset: 0
+			}).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: cursor ? cursor + limit : limit
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 	watch: {
-		$route: 'fetch'
+		$route() {
+			this.$refs.timeline.reload();
+		}
 	},
 	computed: {
 		q(): string {
@@ -37,68 +51,11 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = `%i18n:@search%: ${this.q} | ${this.$root.instanceName}`;
-
-		this.fetch();
 	},
 	methods: {
-		fetch() {
+		inited() {
-			this.fetching = true;
+			Progress.done();
-			Progress.start();
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search', {
-					limit: limit + 1,
-					offset: this.offset,
-					query: this.q
-				}).then(notes => {
-					if (notes.length == 0) this.empty = true;
-					if (notes.length == limit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					Progress.done();
-				}, rej);
-			}));
 		},
-		more() {
-			this.offset += limit;
-
-			const promise = this.$root.api('notes/search', {
-				limit: limit + 1,
-				offset: this.offset,
-				query: this.q
-			});
-
-			promise.then(notes => {
-				if (notes.length == limit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		}
 	}
 });
 </script>
-
-<style lang="stylus" module>
-.notes
-	margin 8px auto
-	max-width 500px
-	width calc(100% - 16px)
-	background #fff
-	border-radius 8px
-	box-shadow 0 0 0 1px rgba(#000, 0.2)
-
-	@media (min-width 500px)
-		margin 16px auto
-		width calc(100% - 32px)
-</style>

src/client/app/mobile/views/pages/settings.vue

@@ -383,9 +383,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 main
-	margin 0 auto
-	max-width 600px
-	width 100%
 
 	> .signed-in-as
 		margin 16px

src/client/app/mobile/views/pages/tag.vue

@@ -3,8 +3,7 @@
 	<span slot="header"><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</span>
 
 	<main>
-		<p v-if="!fetching && empty"><fa icon="search"/> {{ $t('no-posts-found', { q: $route.params.tag }) }}</p>
+		<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
-		<mk-notes ref="timeline" :more="existMore ? more : null"/>
 	</main>
 </mk-ui>
 </template>
@@ -20,66 +19,35 @@ export default Vue.extend({
 	i18n: i18n('mobile/views/pages/tag.vue'),
 	data() {
 		return {
-			fetching: true,
+			makePromise: cursor => this.$root.api('notes/search_by_tag', {
-			moreFetching: false,
+				limit: limit + 1,
-			existMore: false,
+				offset: cursor ? cursor : undefined,
-			offset: 0,
+				tag: this.$route.params.tag
-			empty: false
+			}).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
+					return {
+						notes: notes,
+						cursor: cursor ? cursor + limit : limit
+					};
+				} else {
+					return {
+						notes: notes,
+						cursor: null
+					};
+				}
+			})
 		};
 	},
 	watch: {
-		$route: 'fetch'
+		$route() {
-	},
+			this.$refs.timeline.reload();
-	mounted() {
+		}
-		this.$nextTick(() => {
-			this.fetch();
-		});
 	},
 	methods: {
-		fetch() {
+		inited() {
-			this.fetching = true;
+			Progress.done();
-			Progress.start();
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search_by_tag', {
-					limit: limit + 1,
-					offset: this.offset,
-					tag: this.$route.params.tag
-				}).then(notes => {
-					if (notes.length == 0) this.empty = true;
-					if (notes.length == limit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					Progress.done();
-				}, rej);
-			}));
 		},
-		more() {
-			this.offset += limit;
-
-			const promise = this.$root.api('notes/search_by_tag', {
-				limit: limit + 1,
-				offset: this.offset,
-				tag: this.$route.params.tag
-			});
-
-			promise.then(notes => {
-				if (notes.length == limit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		}
 	}
 });
 </script>

src/client/app/mobile/views/pages/user-list.vue

@@ -46,18 +46,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-main
-	width 100%
-	max-width 680px
-	margin 0 auto
-	padding 8px
-
-	@media (min-width 500px)
-		padding 16px
-
-	@media (min-width 600px)
-		padding 32px
-
-</style>

src/client/app/mobile/views/pages/user-lists.vue

@@ -53,20 +53,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-
-
-main
-	width 100%
-	max-width 680px
-	margin 0 auto
-	padding 8px
-
-	@media (min-width 500px)
-		padding 16px
-
-	@media (min-width 600px)
-		padding 32px
-
-</style>

src/client/app/mobile/views/pages/user/home.vue

@@ -57,7 +57,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .root.home
-	max-width 600px
 	margin 0 auto
 
 	> .mk-note-detail

src/client/app/mobile/views/pages/user/index.vue

@@ -3,7 +3,7 @@
 	<template slot="header" v-if="!fetching"><img :src="avator" alt="">
 		<mk-user-name :user="user"/>
 	</template>
-	<main v-if="!fetching">
+	<div class="wwtwuxyh" v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</p></div>
 		<div class="is-remote" v-if="user.host != null"><p><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></p></div>
 		<header>
@@ -65,15 +65,15 @@
 				<a :data-active="page == 'media'" @click="page = 'media'"><fa icon="image"/> {{ $t('media') }}</a>
 			</div>
 		</nav>
-		<div class="body">
+		<main>
 			<template v-if="$route.name == 'user'">
 				<x-home v-if="page == 'home'" :user="user"/>
 				<mk-user-timeline v-if="page == 'notes'" :user="user" key="tl"/>
 				<mk-user-timeline v-if="page == 'media'" :user="user" :with-media="true" key="media"/>
 			</template>
 			<router-view :user="user"></router-view>
-		</div>
+		</main>
-	</main>
+	</div>
 </mk-ui>
 </template>
 
@@ -146,7 +146,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-main
+.wwtwuxyh
 	$bg = var(--face)
 
 	> .is-suspended
@@ -314,7 +314,7 @@ main
 			display flex
 			justify-content center
 			margin 0 auto
-			max-width 600px
+			max-width 616px
 
 			> a
 				display block
@@ -335,16 +335,4 @@ main
 					color var(--primary)
 					border-color var(--primary)
 
-	> .body
-		max-width 680px
-		margin 0 auto
-		padding 8px
-		color var(--text)
-
-		@media (min-width 500px)
-			padding 16px
-
-		@media (min-width 600px)
-			padding 32px
-
 </style>