✌️

src/api/endpoints/posts/create.ts

@@ -31,6 +31,10 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 	const [text, textErr] = $(params.text).optional.string().pipe(isValidText).$;
 	if (textErr) return rej('invalid text');
 
+	// Get 'tags' parameter
+	const [tags = [], tagsErr] = $(params.tags).optional.array('string').unique().eachQ(t => t.range(1, 32)).$;
+	if (tagsErr) return rej('invalid tags');
+
 	// Get 'media_ids' parameter
 	const [mediaIds, mediaIdsErr] = $(params.media_ids).optional.array('id').unique().range(1, 4).$;
 	if (mediaIdsErr) return rej('invalid media_ids');
@@ -205,6 +209,23 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 		}
 	}
 
+	let tokens = null;
+	if (text) {
+		// Analyze
+		tokens = parse(text);
+
+		// Extract hashtags
+		const hashtags = tokens
+			.filter(t => t.type == 'hashtag')
+			.map(t => t.hashtag);
+
+		hashtags.forEach(tag => {
+			if (tags.indexOf(tag) == -1) {
+				tags.push(tag);
+			}
+		});
+	}
+
 	// 投稿を作成
 	const post = await Post.insert({
 		created_at: new Date(),
@@ -215,6 +236,7 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 		repost_id: repost ? repost._id : undefined,
 		poll: poll,
 		text: text,
+		tags: tags,
 		user_id: user._id,
 		app_id: app ? app._id : null,
 
@@ -423,8 +445,6 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 
 	// If has text content
 	if (text) {
-		// Analyze
-		const tokens = parse(text);
 		/*
 				// Extract a hashtags
 				const hashtags = tokens

src/web/app/desktop/views/components/post-detail.vue

@@ -44,6 +44,9 @@
 				<mk-images :images="p.media"/>
 			</div>
 			<mk-poll v-if="p.poll" :post="p"/>
+			<div class="tags" v-if="p.tags && p.tags.length > 0">
+				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=${tag}`">{{ tag }}</router-link>
+			</div>
 		</div>
 		<footer>
 			<mk-reactions-viewer :post="p"/>
@@ -306,6 +309,32 @@ export default Vue.extend({
 			> .mk-url-preview
 				margin-top 8px
 
+			> .tags
+				> *
+					margin 0 8px 0 0
+					padding 0 8px 0 16px
+					font-size 90%
+					color #8d969e
+					background #edf0f3
+					border-radius 4px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top 0
+						bottom 0
+						left 4px
+						width 8px
+						height 8px
+						margin auto 0
+						background #fff
+						border-radius 100%
+
+					&:hover
+						text-decoration none
+						background #e2e7ec
+
 		> footer
 			font-size 1.2em
 

src/web/app/desktop/views/components/posts.post.vue

@@ -38,6 +38,9 @@
 					</p>
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
 					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
+					<div class="tags" v-if="p.tags && p.tags.length > 0">
+						<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=${tag}`">{{ tag }}</router-link>
+					</div>
 					<a class="quote" v-if="p.repost">RP:</a>
 					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
@@ -342,9 +345,9 @@ export default Vue.extend({
 			display block
 			float left
 			margin 0 16px 10px 0
-			position -webkit-sticky
+			//position -webkit-sticky
-			position sticky
+			//position sticky
-			top 74px
+			//top 74px
 
 			> .avatar
 				display block
@@ -428,6 +431,32 @@ export default Vue.extend({
 						font-style oblique
 						color #a0bf46
 
+					> .tags
+						> *
+							margin 0 8px 0 0
+							padding 0 8px 0 16px
+							font-size 90%
+							color #8d969e
+							background #edf0f3
+							border-radius 4px
+
+							&:before
+								content ""
+								display block
+								position absolute
+								top 0
+								bottom 0
+								left 4px
+								width 8px
+								height 8px
+								margin auto 0
+								background #fff
+								border-radius 100%
+
+							&:hover
+								text-decoration none
+								background #e2e7ec
+
 				> .mk-poll
 					font-size 80%
 

src/web/app/desktop/views/components/timeline.vue

@@ -24,6 +24,7 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			moreFetching: false,
+			existMore: false,
 			posts: [],
 			connection: null,
 			connectionId: null,
@@ -62,8 +63,13 @@ export default Vue.extend({
 			this.fetching = true;
 
 			(this as any).api('posts/timeline', {
+				limit: 11,
 				until_date: this.date ? this.date.getTime() : undefined
 			}).then(posts => {
+				if (posts.length == 11) {
+					posts.pop();
+					this.existMore = true;
+				}
 				this.posts = posts;
 				this.fetching = false;
 				this.$emit('loaded');
@@ -71,11 +77,17 @@ export default Vue.extend({
 			});
 		},
 		more() {
-			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
+			if (this.moreFetching || this.fetching || this.posts.length == 0 || !this.existMore) return;
 			this.moreFetching = true;
 			(this as any).api('posts/timeline', {
+				limit: 11,
 				until_id: this.posts[this.posts.length - 1].id
 			}).then(posts => {
+				if (posts.length == 11) {
+					posts.pop();
+				} else {
+					this.existMore = false;
+				}
 				this.posts = this.posts.concat(posts);
 				this.moreFetching = false;
 			});

src/web/app/desktop/views/pages/search.vue

@@ -1,13 +1,13 @@
 <template>
 <mk-ui>
 	<header :class="$style.header">
-		<h1>{{ query }}</h1>
+		<h1>{{ q }}</h1>
 	</header>
 	<div :class="$style.loading" v-if="fetching">
 		<mk-ellipsis-icon/>
 	</div>
-	<p :class="$style.empty" v-if="empty">%fa:search%「{{ query }}」に関する投稿は見つかりませんでした。</p>
+	<p :class="$style.empty" v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p>
-	<mk-posts ref="timeline" :class="$style.posts">
+	<mk-posts ref="timeline" :class="$style.posts" :posts="posts">
 		<div slot="footer">
 			<template v-if="!moreFetching">%fa:search%</template>
 			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
@@ -21,33 +21,34 @@ import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 import parse from '../../../common/scripts/parse-search-query';
 
-const limit = 30;
+const limit = 20;
 
 export default Vue.extend({
-	props: ['query'],
 	data() {
 		return {
 			fetching: true,
 			moreFetching: false,
+			existMore: false,
 			offset: 0,
 			posts: []
 		};
 	},
+	watch: {
+		$route: 'fetch'
+	},
 	computed: {
 		empty(): boolean {
 			return this.posts.length == 0;
+		},
+		q(): string {
+			return this.$route.query.q;
 		}
 	},
 	mounted() {
-		Progress.start();
-
 		document.addEventListener('keydown', this.onDocumentKeydown);
 		window.addEventListener('scroll', this.onScroll);
 
-		(this as any).api('posts/search', parse(this.query)).then(posts => {
+		this.fetch();
-			this.posts = posts;
-			this.fetching = false;
-		});
 	},
 	beforeDestroy() {
 		document.removeEventListener('keydown', this.onDocumentKeydown);
@@ -61,16 +62,38 @@ export default Vue.extend({
 				}
 			}
 		},
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+
+			(this as any).api('posts/search', Object.assign({
+				limit: limit + 1,
+				offset: this.offset
+			}, parse(this.q))).then(posts => {
+				if (posts.length == limit + 1) {
+					posts.pop();
+					this.existMore = true;
+				}
+				this.posts = posts;
+				this.fetching = false;
+				Progress.done();
+			});
+		},
 		more() {
-			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
+			if (this.moreFetching || this.fetching || this.posts.length == 0 || !this.existMore) return;
 			this.offset += limit;
 			this.moreFetching = true;
-			return (this as any).api('posts/search', Object.assign({}, parse(this.query), {
+			return (this as any).api('posts/search', Object.assign({
-				limit: limit,
+				limit: limit + 1,
 				offset: this.offset
-			})).then(posts => {
+			}, parse(this.q))).then(posts => {
-				this.moreFetching = false;
+				if (posts.length == limit + 1) {
+					posts.pop();
+				} else {
+					this.existMore = false;
+				}
 				this.posts = this.posts.concat(posts);
+				this.moreFetching = false;
 			});
 		},
 		onScroll() {

src/web/app/mobile/views/components/post-detail.vue

@@ -39,6 +39,9 @@
 		</header>
 		<div class="body">
 			<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
+			<div class="tags" v-if="p.tags && p.tags.length > 0">
+				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=${tag}`">{{ tag }}</router-link>
+			</div>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			<div class="media" v-if="p.media">
 				<mk-images :images="p.media"/>
@@ -312,6 +315,28 @@ export default Vue.extend({
 					display block
 					max-width 100%
 
+			> .tags
+				> *
+					margin 0 8px 0 0
+					padding 0 8px 0 16px
+					font-size 90%
+					color #8d969e
+					background #edf0f3
+					border-radius 4px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top 0
+						bottom 0
+						left 4px
+						width 8px
+						height 8px
+						margin auto 0
+						background #fff
+						border-radius 100%
+
 		> .time
 			font-size 16px
 			color #c0c0c0

src/web/app/mobile/views/components/posts.post.vue

@@ -35,6 +35,9 @@
 						%fa:reply%
 					</a>
 					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
+					<div class="tags" v-if="p.tags && p.tags.length > 0">
+						<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=${tag}`">{{ tag }}</router-link>
+					</div>
 					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 					<a class="quote" v-if="p.repost != null">RP:</a>
 				</div>
@@ -346,10 +349,7 @@ export default Vue.extend({
 					font-size 1.1em
 					color #717171
 
-					> .dummy
+					.mk-url-preview
-						display none
-
-					mk-url-preview
 						margin-top 8px
 
 					> .channel
@@ -364,6 +364,28 @@ export default Vue.extend({
 						font-style oblique
 						color #a0bf46
 
+					> .tags
+						> *
+							margin 0 8px 0 0
+							padding 0 8px 0 16px
+							font-size 90%
+							color #8d969e
+							background #edf0f3
+							border-radius 4px
+
+							&:before
+								content ""
+								display block
+								position absolute
+								top 0
+								bottom 0
+								left 4px
+								width 8px
+								height 8px
+								margin auto 0
+								background #fff
+								border-radius 100%
+
 					[data-is-me]:after
 						content "you"
 						padding 0 4px

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

@@ -1,10 +1,10 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:search% {{ query }}</span>
+	<span slot="header">%fa:search% {{ q }}</span>
 	<main v-if="!fetching">
 		<mk-posts :class="$style.posts" :posts="posts">
-			<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', query) }}</span>
+			<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', q) }}</span>
-			<button v-if="canFetchMore" @click="more" :disabled="fetching" slot="tail">
+			<button v-if="existMore" @click="more" :disabled="fetching" slot="tail">
 				<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
 				<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
 			</button>
@@ -18,38 +18,61 @@ import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 import parse from '../../../common/scripts/parse-search-query';
 
-const limit = 30;
+const limit = 20;
 
 export default Vue.extend({
-	props: ['query'],
 	data() {
 		return {
 			fetching: true,
+			existMore: false,
 			posts: [],
 			offset: 0
 		};
 	},
+	watch: {
+		$route: 'fetch'
+	},
+	computed: {
+		q(): string {
+			return this.$route.query.q;
+		}
+	},
 	mounted() {
-		document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.query} | Misskey`;
+		document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.q} | Misskey`;
 		document.documentElement.style.background = '#313a42';
 
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
 			Progress.start();
 
-		(this as any).api('posts/search', Object.assign({}, parse(this.query), {
+			(this as any).api('posts/search', Object.assign({
-			limit: limit
+				limit: limit + 1
-		})).then(posts => {
+			}, parse(this.q))).then(posts => {
+				if (posts.length == limit + 1) {
+					posts.pop();
+					this.existMore = true;
+				}
 				this.posts = posts;
 				this.fetching = false;
 				Progress.done();
 			});
 		},
-	methods: {
 		more() {
 			this.offset += limit;
-			return (this as any).api('posts/search', Object.assign({}, parse(this.query), {
+			(this as any).api('posts/search', Object.assign({
-				limit: limit,
+				limit: limit + 1,
 				offset: this.offset
-			}));
+			}, parse(this.q))).then(posts => {
+				if (posts.length == limit + 1) {
+					posts.pop();
+				} else {
+					this.existMore = false;
+				}
+				this.posts = this.posts.concat(posts);
+			});
 		}
 	}
 });