10.86.0

* Update is-objectid.ts

* Update is-objectid.ts

CHANGELOG.md

@@ -1,6 +1,24 @@
 ChangeLog
 =========
 
+10.86.0
+----------
+* Exploreページを実装
+* UIを改良
+* その他細かな修正
+
+10.85.2
+----------
+* デッキから フォロー/フォロワー ページに行けるように
+* ナビゲーションが発生したときに最上部までスクロールように
+* 検索結果でページ遷移が発生する問題を修正
+* デザインの調整
+
+10.85.1
+----------
+* ローカルのみ投稿をログイン画面のタイムラインに表示しないように
+* ナビゲーションバーを横にしてるとデッキに行けない問題を修正
+
 10.85.0
 ----------
 * デスクトップ版のUIを改良

README.md

@@ -94,6 +94,7 @@ Please see the [Contribution Guide](./CONTRIBUTING.md).
 <!-- PATREON_START -->
 <table><tr>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/12190916/fb7fa7983c14425f890369535b1506a4/1?token-time=2145916800&token-hash=WeuDzzz24cRXJogyIkU-mxARqkdyms-rcZKbO-GpGjw%3D" alt="weep" width="100"></td>
+<td><img src="https://c8.patreon.com/2/200/12059069" alt="naga_rus" width="100"></td>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/12913507/f7181eacafe8469a93033d85f5969c29/3?token-time=2145916800&token-hash=c8HeVqLtmdgH-gSBJg8i10gmOcwllM87MDHeznl3el0%3D" alt="Melilot" width="100"></td>
 <td><img src="https://c8.patreon.com/2/200/16869916" alt="見当かなみ" width="100"></td>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/12999811/5f349fafcce44dd1824a8b1ebbec4564/3?token-time=2145916800&token-hash=LtV2lRi3L2jOWMLwccr9qWYfPrFlzIo2jYZHKzHEb6k%3D" alt="Xeltica" width="100"></td>
@@ -101,6 +102,7 @@ Please see the [Contribution Guide](./CONTRIBUTING.md).
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/12021162/963128bb8d14476dbd8407943db8f31a/1?token-time=2145916800&token-hash=1FlxS9MEgmNGH_RHUVHbO5hIXB5I1z0lvA33CTvYvjA%3D" alt="gutfuckllc" width="100"></td>
 </tr><tr>
 <td><a href="https://www.patreon.com/weepjp">weep</a></td>
+<td><a href="https://www.patreon.com/user?u=12059069">naga_rus</a></td>
 <td><a href="https://www.patreon.com/user?u=12913507">Melilot</a></td>
 <td><a href="https://www.patreon.com/user?u=16869916">見当かなみ</a></td>
 <td><a href="https://www.patreon.com/Xeltica">Xeltica</a></td>
@@ -113,6 +115,7 @@ Please see the [Contribution Guide](./CONTRIBUTING.md).
 <td><img src="https://c8.patreon.com/2/200/16542964" alt="Takumi Sugita" width="100"></td>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/13039004/509d0c412eb14ae08d6a812a3054f7d6/1?token-time=2145916800&token-hash=2PsbFNw0tnubZzgSXD01R6hIgncfiElG7H7HX2Y3dyo%3D" alt="nemu" width="100"></td>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/5881381/6235ca5d3fb04c8e95ef5b4ff2abcc18/3?token-time=2145916800&token-hash=9JtETp0X8gI280Ne1E8bxn6j4Lw5o2k4mJkICx97V_k%3D" alt="YUKIMOCHI" width="100"></td>
+<td><img src="https://c8.patreon.com/2/200/17463605" alt="Sampot" width="100"></td>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/17195955/be45e5e14c3e48b2bee0456c84e19df4/4?token-time=2145916800&token-hash=SbdZeN5SmsuT9stD6v0jN1z0hftg0FmRiCTxysU0Ihw%3D" alt="Damillora" width="100"></td>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/8241184/39e18850e87a449e9c9a71acb3310ebd/3?token-time=2145916800&token-hash=gMq30aylxu5v3G8pRhWR5jeRBbYWEoRKjGbNeiCQz5g%3D" alt="Acid Chicken" width="100"></td>
 <td><img src="https://c10.patreonusercontent.com/3/eyJ3IjoyMDB9/patreon-media/p/user/4389829/9f709180ac714651a70f74a82f3ffdb9/2?token-time=2145916800&token-hash=zcwFxb2zopzWwksKVU1YpfAEjsl4yKT02aQ6yiAFRiQ%3D" alt="natalie" width="100"></td>
@@ -123,6 +126,7 @@ Please see the [Contribution Guide](./CONTRIBUTING.md).
 <td><a href="https://www.patreon.com/user?u=16542964">Takumi Sugita</a></td>
 <td><a href="https://www.patreon.com/user?u=13039004">nemu</a></td>
 <td><a href="https://www.patreon.com/yukimochi">YUKIMOCHI</a></td>
+<td><a href="https://www.patreon.com/user?u=17463605">Sampot</a></td>
 <td><a href="https://www.patreon.com/damillora">Damillora</a></td>
 <td><a href="https://www.patreon.com/acid_chicken">Acid Chicken</a></td>
 <td><a href="https://www.patreon.com/user?u=4389829">natalie</a></td>
@@ -140,7 +144,7 @@ Please see the [Contribution Guide](./CONTRIBUTING.md).
 <td><a href="https://www.patreon.com/user?u=12531784">Takashi Shibuya</a></td>
 </tr></table>
 
-**Last updated:** Thu, 14 Feb 2019 12:02:06 UTC
+**Last updated:** Fri, 15 Feb 2019 19:12:06 UTC
 <!-- PATREON_END -->
 
 :four_leaf_clover: Copyright

locales/ja-JP.yml

@@ -60,6 +60,10 @@ common:
   trash: "ゴミ箱"
   drive: "ドライブ"
   messaging: "トーク"
+  deck: "デッキ"
+  explore: "みつける"
+  following: "フォロー中"
+  followers: "フォロワー"
 
   weekday-short:
     sunday: "日"
@@ -1084,7 +1088,6 @@ desktop/views/components/ui.header.account.vue:
 
 desktop/views/components/ui.header.nav.vue:
   home: "ホーム"
-  deck: "デッキ"
   game: "ゲーム"
 
 desktop/views/components/ui.header.notifications.vue:
@@ -1655,10 +1658,6 @@ mobile/views/components/user-timeline.vue:
   no-notes: "このユーザーは投稿していないようです。"
   no-notes-with-media: "メディア付き投稿はありません。"
 
-mobile/views/components/users-list.vue:
-  all: "すべて"
-  known: "知り合い"
-
 mobile/views/pages/favorites.vue:
   title: "お気に入り"
 

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "10.85.0",
-	"clientVersion": "2.0.14287",
+	"version": "10.86.0",
+	"clientVersion": "2.0.14319",
 	"codename": "nighthike",
 	"repository": {
 		"type": "git",

src/client/app/admin/views/users.vue

@@ -339,7 +339,7 @@ export default Vue.extend({
 			});
 
 			return !confirm.canceled;
-		}
+		},
 
 		fetchUsers() {
 			this.$root.api('admin/show-users', {

src/client/app/common/size.ts

@@ -0,0 +1,18 @@
+export default {
+	install(Vue) {
+		Vue.directive('size', {
+			inserted(el, binding) {
+				const query = binding.value;
+				const width = el.clientWidth;
+				for (const q of query) {
+					if (q.lt && (width <= q.lt)) {
+						el.classList.add(q.class);
+					}
+					if (q.gt && (width >= q.gt)) {
+						el.classList.add(q.class);
+					}
+				}
+			}
+		});
+	}
+};

src/client/app/common/views/components/index.ts

@@ -33,6 +33,7 @@ import urlPreview from './url-preview.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import emoji from './emoji.vue';
 import welcomeTimeline from './welcome-timeline.vue';
+import userList from './user-list.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
 import uiHorizonGroup from './ui/horizon-group.vue';
@@ -79,6 +80,7 @@ Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-emoji', emoji);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
+Vue.component('mk-user-list', userList);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
 Vue.component('ui-horizon-group', uiHorizonGroup);

src/client/app/common/views/components/user-list.vue

@@ -0,0 +1,142 @@
+<template>
+<ui-container :body-togglable="true">
+	<template slot="header"><slot></slot></template>
+
+	<mk-error v-if="!fetching && !inited" @retry="init()"/>
+
+	<div class="efvhhmdq" v-size="[{ lt: 500, class: 'narrow' }]">
+		<div class="user" v-for="user in us">
+			<mk-avatar class="avatar" :user="user"/>
+			<div class="body">
+				<div class="name">
+					<router-link class="name" :to="user | userPage" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
+					<p class="username">@{{ user | acct }}</p>
+				</div>
+				<div class="description" v-if="user.description" :title="user.description">
+					<mfm :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :should-break="false"/>
+				</div>
+			</div>
+		</div>
+		<button class="more" :class="{ fetching: fetchingMoreUsers }" v-if="cursor != null" @click="fetchMoreUsers()" :disabled="fetchingMoreUsers">
+			<template v-if="fetchingMoreUsers"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreUsers ? $t('@.loading') : $t('@.load-more') }}
+		</button>
+	</div>
+</ui-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		makePromise: {
+			required: true
+		},
+		iconOnly: {
+			type: Boolean,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			fetchingMoreUsers: false,
+			us: [],
+			inited: false,
+			cursor: null
+		};
+	},
+
+	created() {
+		this.init();
+	},
+
+	methods: {
+		init() {
+			this.fetching = true;
+			this.makePromise().then(x => {
+				if (Array.isArray(x)) {
+					this.us = x;
+				} else {
+					this.us = x.users;
+					this.cursor = x.cursor;
+				}
+				this.inited = true;
+				this.fetching = false;
+			}, e => {
+				this.fetching = false;
+			});
+		},
+
+		fetchMoreUsers() {
+			this.fetchingMoreUsers = true;
+			this.makePromise(this.cursor).then(x => {
+				this.us = x.users;
+				this.cursor = x.cursor;
+				this.fetchingMoreUsers = false;
+			}, e => {
+				this.fetchingMoreUsers = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.efvhhmdq
+	&.narrow
+		> .user > .body > .name
+			width 100%
+
+		> .user > .body > .description
+			display none
+
+	> .user
+		display flex
+		padding 16px
+		border-bottom solid 1px var(--faceDivider)
+
+		&:last-child
+			border-bottom none
+
+		> .avatar
+			display block
+			flex-shrink 0
+			margin 0 12px 0 0
+			width 42px
+			height 42px
+			border-radius 8px
+
+		> .body
+			display flex
+			width calc(100% - 54px)
+
+			> .name
+				width 45%
+
+				> .name
+					margin 0
+					font-size 16px
+					line-height 24px
+					color var(--text)
+
+				> .username
+					display block
+					margin 0
+					font-size 15px
+					line-height 16px
+					color var(--text)
+					opacity 0.7
+
+			> .description
+				width 55%
+				color var(--text)
+				line-height 42px
+				white-space nowrap
+				overflow hidden
+				text-overflow ellipsis
+				opacity 0.7
+				font-size 14px
+
+</style>

src/client/app/common/views/components/welcome-timeline.vue

@@ -76,6 +76,7 @@ export default Vue.extend({
 			if (note.replyId != null) return;
 			if (note.renoteId != null) return;
 			if (note.poll != null) return;
+			if (note.localOnly) return;
 
 			this.notes.unshift(note);
 		},

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

@@ -0,0 +1,50 @@
+<template>
+<div>
+	<mk-user-list :make-promise="verifiedUsers">
+		<span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span>
+	</mk-user-list>
+	<mk-user-list :make-promise="popularUsers">
+		<span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span>
+	</mk-user-list>
+	<mk-user-list :make-promise="recentlyUpdatedUsers">
+		<span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span>
+	</mk-user-list>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { faChartLine } from '@fortawesome/free-solid-svg-icons';
+import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n('common/views/pages/explore.vue'),
+
+	data() {
+		return {
+			verifiedUsers: () => this.$root.api('users', {
+				state: 'verified',
+				origin: 'local',
+				sort: '+follower',
+				limit: 10
+			}),
+			popularUsers: () => this.$root.api('users', {
+				state: 'alive',
+				origin: 'local',
+				sort: '+follower',
+				limit: 10
+			}),
+			recentlyUpdatedUsers: () => this.$root.api('users', {
+				origin: 'local',
+				sort: '+updatedAt',
+				limit: 10
+			}),
+			faBookmark, faChartLine, faCommentAlt
+		};
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+</style>

src/client/app/common/views/pages/followers.vue

@@ -0,0 +1,30 @@
+<template>
+<div>
+	<mk-user-list :make-promise="makePromise">{{ $t('@.followers') }}</mk-user-list>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import parseAcct from '../../../../../misc/acct/parse';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n(''),
+
+	data() {
+		return {
+			makePromise: cursor => this.$root.api('users/followers', {
+				...parseAcct(this.$route.params.user),
+				limit: 30,
+				cursor: cursor ? cursor : undefined
+			}).then(x => {
+				return {
+					users: x.users,
+					cursor: x.next
+				};
+			}),
+		};
+	},
+});
+</script>

src/client/app/common/views/pages/following.vue

@@ -0,0 +1,27 @@
+<template>
+<div>
+	<mk-user-list :make-promise="makePromise">{{ $t('@.following') }}</mk-user-list>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import parseAcct from '../../../../../misc/acct/parse';
+
+export default Vue.extend({
+	data() {
+		return {
+			makePromise: cursor => this.$root.api('users/following', {
+				...parseAcct(this.$route.params.user),
+				limit: 30,
+				cursor: cursor ? cursor : undefined
+			}).then(x => {
+				return {
+					users: x.users,
+					cursor: x.next
+				};
+			}),
+		};
+	},
+});
+</script>

src/client/app/common/views/widgets/analog-clock.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="mkw-analog-clock">
-	<mk-widget-container :naked="props.style % 2 === 0" :show-header="false">
+	<ui-container :naked="props.style % 2 === 0" :show-header="false">
 		<div class="mkw-analog-clock--body">
 			<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/broadcast.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="anltbovirfeutcigvwgmgxipejaeozxi">
-	<mk-widget-container :show-header="false" :naked="props.design == 1">
+	<ui-container :show-header="false" :naked="props.design == 1">
 		<div class="anltbovirfeutcigvwgmgxipejaeozxi-body"
 			:data-found="announcements && announcements.length != 0"
 			:data-melt="props.design == 1"
@@ -23,7 +23,7 @@
 			</p>
 			<a v-if="announcements.length > 1" @click="next">{{ $t('next') }} &gt;&gt;</a>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/calendar.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-calendar" :data-special="special" :data-mobile="platform == 'mobile'">
-	<mk-widget-container :naked="props.design == 1" :show-header="false">
+	<ui-container :naked="props.design == 1" :show-header="false">
 		<div class="mkw-calendar--body">
 			<div class="calendar" :data-is-holiday="isHoliday">
 				<p class="month-and-year">
@@ -31,7 +31,7 @@
 				</div>
 			</div>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/hashtags.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="mkw-hashtags">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa icon="hashtag"/>{{ $t('title') }}</template>
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
 			<mk-trends/>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/instance.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-instance">
-	<mk-widget-container>
+	<ui-container>
 		<mk-instance/>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/memo.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="mkw-memo">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template>
 
 		<div class="mkw-memo--body">
 			<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
 			<button @click="saveMemo" :disabled="!changed">{{ $t('save') }}</button>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/nav.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="mkw-nav">
-	<mk-widget-container>
+	<ui-container>
 		<div class="mkw-nav--body">
 			<mk-nav/>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/photo-stream.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2">
-	<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
+	<ui-container :show-header="props.design == 0" :naked="props.design == 2">
 		<template slot="header"><fa icon="camera"/>{{ $t('title') }}</template>
 
 		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
@@ -13,7 +13,7 @@
 			></div>
 		</div>
 		<p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/posts-monitor.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-posts-monitor">
-	<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
+	<ui-container :show-header="props.design == 0" :naked="props.design == 2">
 		<template slot="header"><fa icon="chart-line"/>{{ $t('title') }}</template>
 		<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
 
@@ -64,7 +64,7 @@
 				<text x="1" y="5">Fedi</text>
 			</svg>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/rss.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-rss">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa icon="rss-square"/>RSS</template>
 		<button slot="func" title="設定" @click="setting"><fa icon="cog"/></button>
 
@@ -10,7 +10,7 @@
 				<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
 			</div>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/common/views/widgets/server.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-server">
-	<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
+	<ui-container :show-header="props.design == 0" :naked="props.design == 2">
 		<template slot="header"><fa icon="server"/>{{ $t('title') }}</template>
 		<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
 
@@ -13,7 +13,7 @@
 			<x-uptimes v-show="props.view == 4" :connection="connection"/>
 			<x-info v-show="props.view == 5" :connection="connection" :meta="meta"/>
 		</template>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/script.ts

@@ -18,7 +18,6 @@ import MkUserFollowingOrFollowers from './views/pages/user-following-or-follower
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
-import MkSearch from './views/pages/search.vue';
 import MkReversi from './views/pages/games/reversi.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
@@ -131,33 +130,46 @@ init(async (launch, os) => {
 		routes: [
 			os.store.getters.isSignedIn && os.store.state.device.deckMode
 				? { path: '/', name: 'index', component: MkDeck, children: [
-					{ path: '/@:user', name: 'user', component: () => import('./views/deck/deck.user-column.vue').then(m => m.default) },
+					{ path: '/@:user', name: 'user', component: () => import('./views/deck/deck.user-column.vue').then(m => m.default), children: [
+						{ path: '', name: 'user', component: () => import('./views/deck/deck.user-column.home.vue').then(m => m.default) },
+						{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
+						{ path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) },
+					]},
 					{ path: '/notes/:note', name: 'note', component: () => import('./views/deck/deck.note-column.vue').then(m => m.default) },
+					{ path: '/search', component: () => import('./views/deck/deck.search-column.vue').then(m => m.default) },
 					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/deck/deck.hashtag-column.vue').then(m => m.default) },
 					{ path: '/featured', component: () => import('./views/deck/deck.featured-column.vue').then(m => m.default) },
+					{ path: '/explore', component: () => import('./views/deck/deck.explore-column.vue').then(m => m.default) },
 					{ path: '/i/favorites', component: () => import('./views/deck/deck.favorites-column.vue').then(m => m.default) }
 				]}
 				: { path: '/', component: MkHome, children: [
 					{ path: '', name: 'index', component: MkHomeTimeline },
-					{ path: '/@:user', name: 'user', component: () => import('./views/home/user/user.vue').then(m => m.default) },
+					{ path: '/@:user', component: () => import('./views/home/user/index.vue').then(m => m.default), children: [
+						{ path: '', name: 'user', component: () => import('./views/home/user/user.home.vue').then(m => m.default) },
+						{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
+						{ path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) },
+					]},
 					{ path: '/notes/:note', name: 'note', component: () => import('./views/home/note.vue').then(m => m.default) },
+					{ path: '/search', component: () => import('./views/home/search.vue').then(m => m.default) },
 					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/home/tag.vue').then(m => m.default) },
 					{ path: '/featured', component: () => import('./views/home/featured.vue').then(m => m.default) },
-					{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) }
+					{ path: '/explore', component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
+					{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) },
 				]},
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/i/settings', component: MkSettings },
 			{ path: '/selectdrive', component: MkSelectDrive },
-			{ path: '/search', component: MkSearch },
 			{ path: '/share', component: MkShare },
 			{ path: '/games/reversi/:game?', component: MkReversi },
-			{ path: '/@:user/following', name: 'userFollowing', component: MkUserFollowingOrFollowers },
-			{ path: '/@:user/followers', name: 'userFollowers', component: MkUserFollowingOrFollowers },
 			{ path: '/authorize-follow', component: MkFollow },
+			{ path: '/deck', redirect: '/' },
 			{ path: '*', component: MkNotFound }
-		]
+		],
+		scrollBehavior(to, from, savedPosition) {
+			return { x: 0, y: 0 };
+		}
 	});
 
 	// Launch the app

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

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-activity">
-	<mk-widget-container :show-header="design == 0" :naked="design == 2">
+	<ui-container :show-header="design == 0" :naked="design == 2">
 		<template slot="header"><fa icon="chart-bar"/>{{ $t('title') }}</template>
 		<button slot="func" :title="$t('toggle')" @click="toggle"><fa icon="sort"/></button>
 
@@ -9,7 +9,7 @@
 			<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
 			<x-chart v-show="view == 1" :data="[].concat(activity)"/>
 		</template>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/components/index.ts

@@ -18,7 +18,7 @@ import activity from './activity.vue';
 import friendsMaker from './friends-maker.vue';
 import userCard from './user-card.vue';
 import userListTimeline from './user-list-timeline.vue';
-import widgetContainer from './widget-container.vue';
+import uiContainer from './ui-container.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-ui-notification', uiNotification);
@@ -38,4 +38,4 @@ Vue.component('mk-activity', activity);
 Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-user-card', userCard);
 Vue.component('mk-user-list-timeline', userListTimeline);
-Vue.component('mk-widget-container', widgetContainer);
+Vue.component('ui-container', uiContainer);

src/client/app/desktop/views/components/ui-container.vue

@@ -0,0 +1,117 @@
+<template>
+<div class="kedshtep" :class="{ naked, inDeck }">
+	<header v-if="showHeader">
+		<div class="title"><slot name="header"></slot></div>
+		<slot name="func"></slot>
+		<button v-if="bodyTogglable" @click="() => showBody = !showBody">
+			<template v-if="showBody"><fa icon="angle-up"/></template>
+			<template v-else><fa icon="angle-down"/></template>
+		</button>
+	</header>
+	<div v-show="showBody">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		naked: {
+			type: Boolean,
+			default: false
+		},
+		bodyTogglable: {
+			type: Boolean,
+			default: false
+		},
+	},
+	inject: {
+		inDeck: {
+			default: false
+		}
+	},
+	data() {
+		return {
+			showBody: true
+		};
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.kedshtep
+	overflow hidden
+
+	&:not(.inDeck)
+		background var(--face)
+		box-shadow var(--shadow)
+		border-radius var(--round)
+
+		& + .kedshtep
+			margin-top 16px
+
+		&.naked
+			background transparent !important
+			box-shadow none !important
+
+		> header
+			background var(--faceHeader)
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color var(--faceHeaderText)
+				box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
+
+				> [data-icon]
+					margin-right 6px
+
+				&:empty
+					display none
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color var(--faceTextButton)
+
+				&:hover
+					color var(--faceTextButtonHover)
+
+				&:active
+					color var(--faceTextButtonActive)
+
+	&.inDeck
+		background var(--face)
+
+		> header
+			margin 0
+			padding 8px 16px
+			font-size 12px
+			color var(--text)
+			background var(--deckColumnBg)
+
+			> button
+				position absolute
+				top 0
+				right 8px
+				padding 8px 6px
+				font-size 14px
+				color var(--text)
+
+</style>

src/client/app/desktop/views/components/ui.header.account.vue

@@ -60,6 +60,13 @@
 				</li>
 			</ul>
 			<ul>
+				<li @click="toggleDeckMode">
+					<p>
+						<span>{{ $t('@.deck') }}</span>
+						<template v-if="$store.state.device.deckMode"><i><fa :icon="faHome"/></i></template>
+						<template v-else><i><fa :icon="faColumns"/></i></template>
+					</p>
+				</li>
 				<li @click="dark">
 					<p>
 						<span>{{ $t('dark') }}</span>
@@ -90,12 +97,14 @@ import MkFollowRequestsWindow from './received-follow-requests-window.vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
+import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/ui.header.account.vue'),
 	data() {
 		return {
-			isOpen: false
+			isOpen: false,
+			faHome, faColumns
 		};
 	},
 	computed: {
@@ -154,7 +163,11 @@ export default Vue.extend({
 				key: 'darkmode',
 				value: !this.$store.state.device.darkmode
 			});
-		}
+		},
+		toggleDeckMode() {
+			this.$store.commit('device/set', { key: 'deckMode', value: !this.$store.state.device.deckMode });
+			location.reload();
+		},
 	}
 });
 </script>

src/client/app/desktop/views/components/ui.header.messaging.vue

@@ -0,0 +1,68 @@
+<template>
+<div class="toltmoik">
+	<button @click="open()" :title="$t('@.messaging')">
+		<i class="bell"><fa :icon="faComments"/></i>
+		<i class="circle" v-if="hasUnreadMessagingMessage"><fa icon="circle"/></i>
+	</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import MkMessagingWindow from './messaging-window.vue';
+import { faComments } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n(),
+
+	data() {
+		return {
+			faComments
+		};
+	},
+
+	computed: {
+		hasUnreadMessagingMessage(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
+		}
+	},
+
+	methods: {
+		open() {
+			this.$root.new(MkMessagingWindow);
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.toltmoik
+	> button
+		display block
+		margin 0
+		padding 0
+		width 32px
+		color var(--desktopHeaderFg)
+		border none
+		background transparent
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+		&[data-active='true']
+			color var(--desktopHeaderHoverFg)
+
+		> i.bell
+			font-size 1.2em
+			line-height 48px
+
+		> i.circle
+			margin-left -5px
+			vertical-align super
+			font-size 10px
+			color var(--notificationIndicator)
+
+</style>

src/client/app/desktop/views/components/ui.header.nav.vue

@@ -1,34 +1,15 @@
 <template>
 <div class="nav">
 	<ul>
-		<template v-if="$store.getters.isSignedIn">
-			<template v-if="$store.state.device.deckMode">
-				<li class="deck active" @click="goToTop">
-					<router-link to="/"><fa icon="columns"/><p>{{ $t('deck') }}</p></router-link>
-				</li>
-				<li class="home">
-					<a @click="toggleDeckMode(false)"><fa icon="home"/><p>{{ $t('home') }}</p></a>
-				</li>
-			</template>
-			<template v-else>
-				<li class="home active" @click="goToTop">
-					<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
-				</li>
-				<li class="deck">
-					<a @click="toggleDeckMode(true)"><fa icon="columns"/><p>{{ $t('deck') }}</p></a>
-				</li>
-			</template>
-			<li class="messaging">
-				<a @click="messaging">
-					<fa icon="comments"/>
-					<p>{{ $t('@.messaging') }}</p>
-					<template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
-				</a>
-			</li>
-		</template>
+		<li class="home active" @click="goToTop">
+			<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
+		</li>
 		<li class="featured">
 			<router-link to="/featured"><fa :icon="faNewspaper"/><p>{{ $t('@.featured-notes') }}</p></router-link>
 		</li>
+		<li class="explore">
+			<router-link to="/explore"><fa :icon="faHashtag"/><p>{{ $t('@.explore') }}</p></router-link>
+		</li>
 		<li class="game">
 			<a @click="game">
 				<fa icon="gamepad"/>
@@ -43,9 +24,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import MkMessagingWindow from './messaging-window.vue';
 import MkGameWindow from './game-window.vue';
-import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
+import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/ui.header.nav.vue'),
@@ -53,14 +33,9 @@ export default Vue.extend({
 		return {
 			hasGameInvitations: false,
 			connection: null,
-			faNewspaper
+			faNewspaper, faHashtag
 		};
 	},
-	computed: {
-		hasUnreadMessagingMessage(): boolean {
-			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
-		}
-	},
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
 			this.connection = this.$root.stream.useSharedConnection('main');
@@ -75,11 +50,6 @@ export default Vue.extend({
 		}
 	},
 	methods: {
-		toggleDeckMode(deck) {
-			this.$store.commit('device/set', { key: 'deckMode', value: deck });
-			location.reload();
-		},
-
 		onReversiInvited() {
 			this.hasGameInvitations = true;
 		},
@@ -88,10 +58,6 @@ export default Vue.extend({
 			this.hasGameInvitations = false;
 		},
 
-		messaging() {
-			this.$root.new(MkMessagingWindow);
-		},
-
 		game() {
 			this.$root.new(MkGameWindow);
 		},
@@ -136,7 +102,7 @@ export default Vue.extend({
 				display inline-block
 				z-index 1
 				height 100%
-				padding 0 24px
+				padding 0 20px
 				font-size 13px
 				font-variant small-caps
 				color var(--desktopHeaderFg)

src/client/app/desktop/views/components/ui.header.vue

@@ -16,9 +16,10 @@
 				<div class="right">
 					<x-search/>
 					<x-account v-if="$store.getters.isSignedIn"/>
+					<x-messaging v-if="$store.getters.isSignedIn"/>
 					<x-notifications v-if="$store.getters.isSignedIn"/>
 					<x-post v-if="$store.getters.isSignedIn"/>
-					<x-clock v-if="$store.state.settings.showClockOnHeader"/>
+					<x-clock v-if="$store.state.settings.showClockOnHeader" class="clock"/>
 				</div>
 			</div>
 		</div>
@@ -37,6 +38,7 @@ import XAccount from './ui.header.account.vue';
 import XNotifications from './ui.header.notifications.vue';
 import XPost from './ui.header.post.vue';
 import XClock from './ui.header.clock.vue';
+import XMessaging from './ui.header.messaging.vue';
 
 export default Vue.extend({
 	i18n: i18n(),
@@ -45,6 +47,7 @@ export default Vue.extend({
 		XSearch,
 		XAccount,
 		XNotifications,
+		XMessaging,
 		XPost,
 		XClock
 	},
@@ -152,7 +155,7 @@ export default Vue.extend({
 						vertical-align top
 
 					@media (max-width 1100px)
-						> .mk-ui-header-search
+						> .clock
 							display none
 
 </style>

src/client/app/desktop/views/components/ui.sidebar.vue

@@ -7,19 +7,19 @@
 
 		<div class="nav" v-if="$store.getters.isSignedIn">
 			<template v-if="$store.state.device.deckMode">
-				<div class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
+				<div class="deck active" @click="goToTop">
 					<router-link to="/"><fa icon="columns"/></router-link>
 				</div>
-				<div class="home" :class="{ active: $route.name == 'home' }" @click="goToTop">
-					<router-link to="/home"><fa icon="home"/></router-link>
+				<div class="home">
+					<a @click="toggleDeckMode(false)"><fa icon="home"/></a>
 				</div>
 			</template>
 			<template v-else>
-				<div class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop">
+				<div class="home active" @click="goToTop">
 					<router-link to="/"><fa icon="home"/></router-link>
 				</div>
-				<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
-					<router-link to="/deck"><fa icon="columns"/></router-link>
+				<div class="deck">
+					<a @click="toggleDeckMode(true)"><fa icon="columns"/></a>
 				</div>
 			</template>
 			<div class="messaging">
@@ -122,6 +122,11 @@ export default Vue.extend({
 	},
 
 	methods: {
+		toggleDeckMode(deck) {
+			this.$store.commit('device/set', { key: 'deckMode', value: deck });
+			location.reload();
+		},
+
 		onReversiInvited() {
 			this.hasGameInvitations = true;
 		},

src/client/app/desktop/views/components/user-card.vue

@@ -41,7 +41,6 @@ export default Vue.extend({
 	height 280px
 	overflow hidden
 	font-size 13px
-	text-align center
 	background $bg
 	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
 	color var(--faceText)
@@ -54,7 +53,7 @@ export default Vue.extend({
 
 	> .avatar
 		display block
-		margin -40px auto 0 auto
+		margin -40px 0 0 16px
 		width 80px
 		height 80px
 		border-radius 100%
@@ -67,6 +66,7 @@ export default Vue.extend({
 
 	> .body
 		padding 0px 24px
+		margin-top -40px
 
 		> .name
 			font-size 120%

src/client/app/desktop/views/components/widget-container.vue

@@ -1,74 +0,0 @@
-<template>
-<div class="mk-widget-container" :class="{ naked }">
-	<header v-if="showHeader">
-		<div class="title"><slot name="header"></slot></div>
-		<slot name="func"></slot>
-	</header>
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: {
-		showHeader: {
-			type: Boolean,
-			default: true
-		},
-		naked: {
-			type: Boolean,
-			default: false
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-widget-container
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-	overflow hidden
-
-	&.naked
-		background transparent !important
-		box-shadow none !important
-
-	> header
-		background var(--faceHeader)
-
-		> .title
-			z-index 1
-			margin 0
-			padding 0 16px
-			line-height 42px
-			font-size 0.9em
-			font-weight bold
-			color var(--faceHeaderText)
-			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
-
-			> [data-icon]
-				margin-right 6px
-
-			&:empty
-				display none
-
-		> button
-			position absolute
-			z-index 2
-			top 0
-			right 0
-			padding 0
-			width 42px
-			font-size 0.9em
-			line-height 42px
-			color var(--faceTextButton)
-
-			&:hover
-				color var(--faceTextButtonHover)
-
-			&:active
-				color var(--faceTextButtonActive)
-
-</style>

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

@@ -65,6 +65,16 @@ export default Vue.extend({
 		}
 	},
 
+	data() {
+		return {
+			count: 0,
+			active: true,
+			dragging: false,
+			draghover: false,
+			dropready: false
+		};
+	},
+
 	computed: {
 		isTemporaryColumn(): boolean {
 			return this.column == null;
@@ -84,16 +94,6 @@ export default Vue.extend({
 		getColumnVm: { from: 'getColumnVm' }
 	},
 
-	data() {
-		return {
-			count: 0,
-			active: true,
-			dragging: false,
-			draghover: false,
-			dropready: false
-		};
-	},
-
 	watch: {
 		active(v) {
 			if (v && this.isScrollTop()) {
@@ -109,7 +109,8 @@ export default Vue.extend({
 		return {
 			column: this,
 			isScrollTop: this.isScrollTop,
-			count: v => this.count = v
+			count: v => this.count = v,
+			inDeck: !this.naked
 		};
 	},
 

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

@@ -0,0 +1,34 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa :icon="faHashtag"/>{{ $t('@.explore') }}
+	</span>
+
+	<div>
+		<x-explore/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XExplore from '../../../common/views/pages/explore.vue';
+import { faHashtag } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n(),
+
+	components: {
+		XColumn,
+		XExplore,
+	},
+
+	data() {
+		return {
+			faHashtag
+		};
+	}
+});
+</script>

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

@@ -42,7 +42,7 @@ export default Vue.extend({
 
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
 				this.$root.api('notes/featured', {
-					limit: 15,
+					limit: 20,
 				}).then(notes => {
 					res(notes);
 					this.fetching = false;

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

@@ -0,0 +1,99 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa icon="search"/><span>{{ q }}</span>
+	</span>
+
+	<div>
+		<x-notes ref="timeline" :more="existMore ? more : null"/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XColumn from './deck.column.vue';
+import XNotes from './deck.notes.vue';
+
+const limit = 20;
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XNotes
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			offset: 0,
+			empty: false,
+			notAvailable: false
+		};
+	},
+
+	computed: {
+		q(): string {
+			return this.$route.query.q;
+		}
+	},
+
+	watch: {
+		$route: 'fetch'
+	},
+
+	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.user-column.home.vue

@@ -0,0 +1,244 @@
+<template>
+<div>
+	<ui-container v-if="user.pinnedNotes && user.pinnedNotes.length > 0" :body-togglable="true">
+		<span slot="header"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</span>
+		<div>
+			<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
+		</div>
+	</ui-container>
+	<ui-container v-if="images.length > 0" :body-togglable="true">
+		<span slot="header"><fa :icon="['far', 'images']"/> {{ $t('images') }}</span>
+		<div class="sainvnaq">
+			<router-link v-for="image in images"
+				:style="`background-image: url(${image.thumbnailUrl})`"
+				:key="`${image.id}:${image._note.id}`"
+				:to="image._note | notePage"
+				:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
+			></router-link>
+		</div>
+	</ui-container>
+	<ui-container :body-togglable="true">
+		<span slot="header"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</span>
+		<div>
+			<div ref="chart"></div>
+		</div>
+	</ui-container>
+	<ui-container>
+		<span slot="header"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</span>
+		<div>
+			<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
+		</div>
+	</ui-container>
+</div>
+</template>
+
+<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';
+import ApexCharts from 'apexcharts';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	i18n: i18n('deck/deck.user-column.vue'),
+	components: {
+		XNotes,
+		XNote
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			existMore: false,
+			moreFetching: false,
+			withFiles: false,
+			images: [],
+		};
+	},
+
+	created() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.$nextTick(() => {
+				(this.$refs.timeline as any).init(() => this.initTl());
+			});
+
+			const image = [
+				'image/jpeg',
+				'image/png',
+				'image/gif'
+			];
+
+			this.$root.api('users/notes', {
+				userId: this.user.id,
+				fileType: image,
+				excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
+				limit: 9,
+				untilDate: new Date().getTime() + 1000 * 86400 * 365
+			}).then(notes => {
+				for (const note of notes) {
+					for (const file of note.files) {
+						file._note = note;
+					}
+				}
+				const files = concat(notes.map((n: any): any[] => n.files));
+				this.images = files.filter(f => image.includes(f.type)).slice(0, 9);
+			});
+
+			this.$root.api('charts/user/notes', {
+				userId: this.user.id,
+				span: 'day',
+				limit: 21
+			}).then(stats => {
+				const normal = [];
+				const reply = [];
+				const renote = [];
+
+				const now = new Date();
+				const y = now.getFullYear();
+				const m = now.getMonth();
+				const d = now.getDate();
+
+				for (let i = 0; i < 21; i++) {
+					const x = new Date(y, m, d - i);
+					normal.push([
+						x,
+						stats.diffs.normal[i]
+					]);
+					reply.push([
+						x,
+						stats.diffs.reply[i]
+					]);
+					renote.push([
+						x,
+						stats.diffs.renote[i]
+					]);
+				}
+
+				const chart = new ApexCharts(this.$refs.chart, {
+					chart: {
+						type: 'bar',
+						stacked: true,
+						height: 100,
+						sparkline: {
+							enabled: true
+						},
+					},
+					plotOptions: {
+						bar: {
+							columnWidth: '90%'
+						}
+					},
+					grid: {
+						clipMarkers: false,
+						padding: {
+							top: 16,
+							right: 16,
+							bottom: 16,
+							left: 16
+						}
+					},
+					tooltip: {
+						shared: true,
+						intersect: false
+					},
+					series: [{
+						name: 'Normal',
+						data: normal
+					}, {
+						name: 'Reply',
+						data: reply
+					}, {
+						name: 'Renote',
+						data: renote
+					}],
+					xaxis: {
+						type: 'datetime',
+						crosshairs: {
+							width: 1,
+							opacity: 1
+						}
+					}
+				});
+
+				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>
+
+<style lang="stylus" scoped>
+.sainvnaq
+	display grid
+	grid-template-columns 1fr 1fr 1fr
+	gap 8px
+	padding 16px
+
+	> *
+		height 70px
+		background-position center center
+		background-size cover
+		background-clip content-box
+		border-radius 4px
+
+</style>

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

@@ -39,54 +39,26 @@
 			</div>
 			<div class="counts">
 				<div>
-					<b>{{ user.notesCount | number }}</b>
-					<span>{{ $t('posts') }}</span>
+					<router-link :to="user | userPage()">
+						<b>{{ user.notesCount | number }}</b>
+						<span>{{ $t('posts') }}</span>
+					</router-link>
 				</div>
 				<div>
-					<b>{{ user.followingCount | number }}</b>
-					<span>{{ $t('following') }}</span>
+					<router-link :to="user | userPage('following')">
+						<b>{{ user.followingCount | number }}</b>
+						<span>{{ $t('following') }}</span>
+					</router-link>
 				</div>
 				<div>
-					<b>{{ user.followersCount | number }}</b>
-					<span>{{ $t('followers') }}</span>
+					<router-link :to="user | userPage('followers')">
+						<b>{{ user.followersCount | number }}</b>
+						<span>{{ $t('followers') }}</span>
+					</router-link>
 				</div>
 			</div>
 		</div>
-		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
-			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</p>
-			<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div class="notes" v-show="showPinned">
-				<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
-			</div>
-		</div>
-		<div class="images" v-if="images.length > 0">
-			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> {{ $t('images') }}</p>
-			<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div v-show="showImages">
-				<router-link v-for="image in images"
-					:style="`background-image: url(${image.thumbnailUrl})`"
-					:key="`${image.id}:${image._note.id}`"
-					:to="image._note | notePage"
-					:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
-				></router-link>
-			</div>
-		</div>
-		<div class="activity">
-			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</p>
-			<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div v-show="showActivity">
-				<div ref="chart"></div>
-			</div>
-		</div>
-		<div class="tl">
-			<p class="caption"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</p>
-			<div>
-				<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
-			</div>
-		</div>
+		<router-view :user="user"></router-view>
 	</div>
 </x-column>
 </template>
@@ -96,33 +68,18 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 import parseAcct from '../../../../../misc/acct/parse';
 import XColumn from './deck.column.vue';
-import XNotes from './deck.notes.vue';
-import XNote from '../components/note.vue';
 import XUserMenu from '../../../common/views/components/user-menu.vue';
-import { concat } from '../../../../../prelude/array';
-import ApexCharts from 'apexcharts';
-
-const fetchLimit = 10;
 
 export default Vue.extend({
 	i18n: i18n('deck/deck.user-column.vue'),
 	components: {
 		XColumn,
-		XNotes,
-		XNote
 	},
 
 	data() {
 		return {
 			user: null,
 			fetching: true,
-			existMore: false,
-			moreFetching: false,
-			withFiles: false,
-			images: [],
-			showPinned: true,
-			showImages: true,
-			showActivity: true
 		};
 	},
 
@@ -151,177 +108,14 @@ export default Vue.extend({
 			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 				this.fetching = false;
-
-				this.$nextTick(() => {
-					(this.$refs.timeline as any).init(() => this.initTl());
-				});
-
-				const image = [
-					'image/jpeg',
-					'image/png',
-					'image/gif'
-				];
-
-				this.$root.api('users/notes', {
-					userId: this.user.id,
-					fileType: image,
-					excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
-					limit: 9,
-					untilDate: new Date().getTime() + 1000 * 86400 * 365
-				}).then(notes => {
-					for (const note of notes) {
-						for (const file of note.files) {
-							file._note = note;
-						}
-					}
-					const files = concat(notes.map((n: any): any[] => n.files));
-					this.images = files.filter(f => image.includes(f.type)).slice(0, 9);
-				});
-
-				this.$root.api('charts/user/notes', {
-					userId: this.user.id,
-					span: 'day',
-					limit: 21
-				}).then(stats => {
-					const normal = [];
-					const reply = [];
-					const renote = [];
-
-					const now = new Date();
-					const y = now.getFullYear();
-					const m = now.getMonth();
-					const d = now.getDate();
-
-					for (let i = 0; i < 21; i++) {
-						const x = new Date(y, m, d - i);
-						normal.push([
-							x,
-							stats.diffs.normal[i]
-						]);
-						reply.push([
-							x,
-							stats.diffs.reply[i]
-						]);
-						renote.push([
-							x,
-							stats.diffs.renote[i]
-						]);
-					}
-
-					const chart = new ApexCharts(this.$refs.chart, {
-						chart: {
-							type: 'bar',
-							stacked: true,
-							height: 100,
-							sparkline: {
-								enabled: true
-							},
-						},
-						plotOptions: {
-							bar: {
-								columnWidth: '90%'
-							}
-						},
-						grid: {
-							clipMarkers: false,
-							padding: {
-								top: 16,
-								right: 16,
-								bottom: 16,
-								left: 16
-							}
-						},
-						tooltip: {
-							shared: true,
-							intersect: false
-						},
-						series: [{
-							name: 'Normal',
-							data: normal
-						}, {
-							name: 'Reply',
-							data: reply
-						}, {
-							name: 'Renote',
-							data: renote
-						}],
-						xaxis: {
-							type: 'datetime',
-							crosshairs: {
-								width: 1,
-								opacity: 1
-							}
-						}
-					});
-
-					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;
-		},
-
 		menu() {
 			this.$root.new(XUserMenu, {
 				source: this.$refs.menu,
 				user: this.user
 			});
-		},
-
-		toggleShowPinned() {
-			this.showPinned = !this.showPinned;
-		},
-
-		toggleShowImages() {
-			this.showImages = !this.showImages;
-		},
-
-		toggleShowActivity() {
-			this.showActivity = !this.showActivity;
 		}
 	}
 });
@@ -453,55 +247,16 @@ export default Vue.extend({
 				padding 8px 8px 0 8px
 				text-align center
 
-				> b
-					display block
-					font-size 110%
+				> a
+					color var(--text)
 
-				> span
-					display block
-					font-size 80%
-					opacity 0.7
+					> b
+						display block
+						font-size 110%
 
-	> *
-		> p.caption
-			margin 0
-			padding 8px 16px
-			font-size 12px
-			color var(--text)
-
-			& + .angle
-				position absolute
-				top 0
-				right 8px
-				padding 6px
-				font-size 14px
-				color var(--text)
-
-	> .pinned
-		> .notes
-			background var(--face)
-
-	> .images
-		> div
-			display grid
-			grid-template-columns 1fr 1fr 1fr
-			gap 8px
-			padding 16px
-			background var(--face)
-
-			> *
-				height 70px
-				background-position center center
-				background-size cover
-				background-clip content-box
-				border-radius 4px
-
-	> .activity
-		> div
-			background var(--face)
-
-	> .tl
-		> div
-			background var(--face)
+					> span
+						display block
+						font-size 80%
+						opacity 0.7
 
 </style>

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

@@ -55,17 +55,16 @@ export default Vue.extend({
 		}
 	},
 
-	watch: {/*
-		temporaryColumn() {
-			if (this.temporaryColumn != null) {
-				this.$nextTick(() => {
-					this.$refs.body.scrollTo({
-						left: this.$refs.body.scrollWidth - this.$refs.body.clientWidth,
-						behavior: 'smooth'
-					});
+	watch: {
+		$route() {
+			if (this.$route.name == 'index') return;
+			this.$nextTick(() => {
+				this.$refs.body.scrollTo({
+					left: this.$refs.body.scrollWidth - this.$refs.body.clientWidth,
+					behavior: 'smooth'
 				});
-			}
-		}*/
+			});
+		}
 	},
 
 	provide() {

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

@@ -28,7 +28,7 @@ export default Vue.extend({
 			this.fetching = true;
 
 			this.$root.api('notes/featured', {
-				limit: 10
+				limit: 20
 			}).then(notes => {
 				this.notes = notes;
 				this.fetching = false;

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

@@ -56,8 +56,4 @@ export default Vue.extend({
 			display inline-block
 			margin 0 16px
 
-	> .mk-note-detail
-		margin 0 auto
-		width 640px
-
 </style>

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

@@ -1,12 +1,14 @@
 <template>
-<mk-ui>
-	<header :class="$style.header">
-		<h1>{{ q }}</h1>
-	</header>
-	<p :class="$style.notAvailable" v-if="!fetching && notAvailable">{{ $t('not-available') }}</p>
-	<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
-	<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
-</mk-ui>
+<div class="oxgbmvii">
+	<div class="notes">
+		<header>
+			<span><fa icon="search"/> {{ q }}</span>
+		</header>
+		<p v-if="!fetching && notAvailable">{{ $t('not-available') }}</p>
+		<p v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
+		<mk-notes ref="timeline" :more="existMore ? more : null"/>
+	</div>
+</div>
 </template>
 
 <script lang="ts">
@@ -106,45 +108,23 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" module>
-.header
-	width 100%
-	max-width 600px
-	margin 0 auto
-	color #555
+<style lang="stylus" scoped>
+.oxgbmvii
+	> .notes
+		background var(--face)
+		box-shadow var(--shadow)
+		border-radius var(--round)
+		overflow hidden
 
-.notes
-	max-width 600px
-	margin 0 auto
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
-	overflow hidden
+		> header
+			padding 0 8px
+			z-index 10
+			background var(--faceHeader)
+			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
-
-.notAvailable
-	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/tag.vue

@@ -98,7 +98,6 @@ export default Vue.extend({
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
-	overflow hidden
 
 .empty
 	display block

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

@@ -1,22 +1,10 @@
 <template>
-<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
+<div class="omechnps" v-if="!fetching">
 	<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</div>
 	<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></div>
 	<div class="main">
-		<x-header :user="user"/>
-		<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
-		<x-integrations :user="user"/>
-		<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
-		<div class="activity">
-			<mk-widget-container :show-header="true" :naked="false">
-				<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
-				<x-activity :user="user" :limit="35" style="padding: 16px;"/>
-			</mk-widget-container>
-		</div>
-		<x-photos :user="user"/>
-		<x-friends :user="user"/>
-		<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
-		<x-timeline class="timeline" ref="tl" :user="user"/>
+		<x-header class="header" :user="user"/>
+		<router-view :user="user"></router-view>
 	</div>
 </div>
 </template>
@@ -27,23 +15,11 @@ import i18n from '../../../../i18n';
 import parseAcct from '../../../../../../misc/acct/parse';
 import Progress from '../../../../common/scripts/loading';
 import XHeader from './user.header.vue';
-import XTimeline from './user.timeline.vue';
-import XPhotos from './user.photos.vue';
-import XFollowersYouKnow from './user.followers-you-know.vue';
-import XFriends from './user.friends.vue';
-import XIntegrations from './user.integrations.vue';
-import XActivity from '../../../../common/views/components/activity.vue';
 
 export default Vue.extend({
 	i18n: i18n(),
 	components: {
-		XHeader,
-		XTimeline,
-		XPhotos,
-		XFollowersYouKnow,
-		XFriends,
-		XIntegrations,
-		XActivity
+		XHeader
 	},
 	data() {
 		return {
@@ -76,7 +52,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.xygkxeaeontfaokvqmiblezmhvhostak
+.omechnps
 	width 100%
 	margin 0 auto
 
@@ -100,10 +76,7 @@ export default Vue.extend({
 			font-weight bold
 
 	> .main
-		> *
+		> .header
 			margin-bottom 16px
 
-		> .timeline
-			box-shadow var(--shadow)
-
 </style>

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

@@ -40,7 +40,7 @@
 			<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', $t('year')).replace('-', $t('month')) + $t('day') }} ({{ $t('years-old', { age }) }})</span>
 		</div>
 		<div class="status">
-			<span class="notes-count"><b>{{ user.notesCount | number }}</b>{{ $t('posts') }}</span>
+			<router-link :to="user | userPage()" class="notes-count"><b>{{ user.notesCount | number }}</b>{{ $t('posts') }}</router-link>
 			<router-link :to="user | userPage('following')" class="following clickable"><b>{{ user.followingCount | number }}</b>{{ $t('following') }}</router-link>
 			<router-link :to="user | userPage('followers')" class="followers clickable"><b>{{ user.followersCount | number }}</b>{{ $t('followers') }}</router-link>
 		</div>
@@ -205,6 +205,7 @@ export default Vue.extend({
 		> .actions
 			text-align right
 			padding-bottom 16px
+			margin-bottom 16px
 			border-bottom solid 1px var(--faceDivider)
 
 			> *

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

@@ -0,0 +1,63 @@
+<template>
+<div class="lnctpgve">
+	<x-integrations :user="user" v-if="user.twitter || user.github || user.discord"/>
+	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
+	<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
+	<div class="activity">
+		<ui-container :body-togglable="true">
+			<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
+			<x-activity :user="user" :limit="35" style="padding: 16px;"/>
+		</ui-container>
+	</div>
+	<x-photos :user="user"/>
+	<x-friends :user="user"/>
+	<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
+	<x-timeline class="timeline" ref="tl" :user="user"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import parseAcct from '../../../../../../misc/acct/parse';
+import Progress from '../../../../common/scripts/loading';
+import XTimeline from './user.timeline.vue';
+import XPhotos from './user.photos.vue';
+import XFollowersYouKnow from './user.followers-you-know.vue';
+import XFriends from './user.friends.vue';
+import XIntegrations from './user.integrations.vue';
+import XActivity from '../../../../common/views/components/activity.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XTimeline,
+		XPhotos,
+		XFollowersYouKnow,
+		XFriends,
+		XIntegrations,
+		XActivity
+	},
+	props: {
+		user: {
+			type: Object,
+			required: true
+		}
+	},
+	methods: {
+		warp(date) {
+			(this.$refs.tl as any).warp(date);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.lnctpgve
+	> *
+		margin-bottom 16px
+
+	> .timeline
+		box-shadow var(--shadow)
+
+</style>

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

@@ -20,15 +20,18 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .usertwitxxxgithxxdiscxxxintegrat
+	display flex
+
 	> a
 		display flex
+		flex 1
 		align-items center
-		padding 32px 38px
+		padding 16px
 		box-shadow var(--shadow)
 		border-radius var(--round)
 
 		&:not(:last-child)
-			margin-bottom 16px
+			margin-right 16px
 
 		&:hover
 			text-decoration none

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

@@ -1,20 +1,27 @@
 <template>
-<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
-	<p class="title"><fa icon="camera"/>{{ $t('title') }}</p>
-	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
-	<div class="stream" v-if="!fetching && images.length > 0">
-		<div v-for="(image, i) in images" :key="i" class="img"
-			:style="`background-image: url(${thumbnail(image)})`"
-		></div>
+<ui-container :body-togglable="true">
+	<span slot="header"><fa icon="camera"/> {{ $t('title') }}</span>
+
+	<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
+		<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
+		<div class="stream" v-if="!fetching && images.length > 0">
+			<router-link v-for="image in images" class="img"
+				:style="`background-image: url(${image.thumbnailUrl})`"
+				:key="`${image.id}:${image._note.id}`"
+				:to="image._note | notePage"
+				:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
+			></router-link>
+		</div>
+		<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
 	</div>
-	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
-</div>
+</ui-container>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../../i18n';
 import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
+import { concat } from '../../../../../../prelude/array';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/pages/user/user.photos.vue'),
@@ -41,9 +48,11 @@ export default Vue.extend({
 		}).then(notes => {
 			for (const note of notes) {
 				for (const file of note.files) {
-					if (this.images.length < 9) this.images.push(file);
+					file._note = note;
 				}
 			}
+			const files = concat(notes.map((n: any): any[] => n.files));
+			this.images = files.filter(f => image.includes(f.type)).slice(0, 9);
 			this.fetching = false;
 		});
 	},
@@ -59,39 +68,19 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .dzsuvbsrrrwobdxifudxuefculdfiaxd
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-	overflow hidden
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		background var(--faceHeader)
-		color var(--faceHeaderText)
-		box-shadow 0 1px rgba(#000, 0.07)
-
-		> i
-			margin-right 4px
-
 	> .stream
-		display flex
-		justify-content center
-		flex-wrap wrap
-		padding 8px
+		display grid
+		grid-template-columns 1fr 1fr 1fr
+		gap 8px
+		padding 16px
+		background var(--face)
 
-		> .img
-			flex 1 1 33%
-			width 33%
+		> *
 			height 120px
 			background-position center center
 			background-size cover
 			background-clip content-box
-			border solid 2px transparent
+			border-radius 4px
 
 	> .initializing
 	> .empty

src/client/app/desktop/views/pages/user-following-or-followers.vue

@@ -1,120 +0,0 @@
-<template>
-<mk-ui>
-	<div class="yyyocnobkvdlnyapyauyopbskldsnipz" v-if="!fetching">
-		<header>
-			<mk-avatar class="avatar" :user="user"/>
-			<i18n :path="isFollowing ? 'following' : 'followers'" tag="p">
-				<router-link :to="user | userPage" place="user">
-					<mk-user-name :user="user"/>
-				</router-link>
-			</i18n>
-		</header>
-		<div class="users">
-			<mk-user-card v-for="user in users" :user="user" :key="user.id"/>
-		</div>
-		<div class="more" v-if="next">
-			<ui-button inline @click="fetchMore">{{ $t('@.load-more') }}</ui-button>
-		</div>
-	</div>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import parseAcct from '../../../../../misc/acct/parse';
-import Progress from '../../../common/scripts/loading';
-
-const limit = 16;
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/user-following-or-followers.vue'),
-
-	data() {
-		return {
-			fetching: true,
-			user: null,
-			users: [],
-			next: undefined
-		};
-	},
-	computed: {
-		isFollowing(): boolean {
-			return this.$route.name == 'userFollowing';
-		},
-		endpoint(): string {
-			return this.isFollowing ? 'users/following' : 'users/followers';
-		}
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			this.fetching = true;
-			Progress.start();
-			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
-				this.user = user;
-				this.$root.api(this.endpoint, {
-					userId: this.user.id,
-					iknow: false,
-					limit: limit
-				}).then(x => {
-					this.users = x.users;
-					this.next = x.next;
-					this.fetching = false;
-					Progress.done();
-				});
-			});
-		},
-
-		fetchMore() {
-			this.$root.api(this.endpoint, {
-				userId: this.user.id,
-				iknow: false,
-				limit: limit,
-				cursor: this.next
-			}).then(x => {
-				this.users = this.users.concat(x.users);
-				this.next = x.next;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.yyyocnobkvdlnyapyauyopbskldsnipz
-	width 100%
-	max-width 1280px
-	padding 32px
-	margin 0 auto
-
-	> header
-		display flex
-		align-items center
-		margin 0 0 16px 0
-		color var(--text)
-
-		> .avatar
-			width 64px
-			height 64px
-
-		> p
-			margin 0 16px
-			font-size 24px
-			font-weight bold
-
-	> .users
-		display grid
-		grid-template-columns 1fr 1fr 1fr 1fr
-		gap 16px
-
-	> .more
-		margin 32px 16px 16px 16px
-		text-align center
-
-</style>

src/client/app/desktop/views/widgets/messaging.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mkw-messaging">
-	<mk-widget-container :show-header="props.design == 0">
+	<ui-container :show-header="props.design == 0">
 		<template slot="header"><fa icon="comments"/>{{ $t('title') }}</template>
 		<button slot="func" @click="add"><fa icon="plus"/></button>
 
 		<x-messaging ref="index" compact @navigate="navigate"/>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/widgets/notifications.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mkw-notifications">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa :icon="['far', 'bell']"/>{{ $t('title') }}</template>
 		<!-- <button slot="func" :title="$t('title')" @click="settings"><fa icon="cog"/></button> -->
 
 		<mk-notifications :class="$style.notifications"/>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/widgets/polls.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-polls">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template>
 		<button slot="func" :title="$t('title')" @click="fetch">
 			<fa v-if="!fetching &&  more" icon="arrow-right"/>
@@ -16,7 +16,7 @@
 			<p class="empty" v-if="!fetching && poll == null">{{ $t('nothing') }}</p>
 			<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/widgets/post-form.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<mk-widget-container :show-header="props.design == 0">
+	<ui-container :show-header="props.design == 0">
 		<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
 
 		<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body"
@@ -37,7 +37,7 @@
 				<button @click="post" :disabled="posting" class="post">{{ $t('note') }}</button>
 			</footer>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/widgets/profile.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="egwyvoaaryotefqhqtmiyawwefemjfsd">
-	<mk-widget-container :show-header="false" :naked="props.design == 2">
+	<ui-container :show-header="false" :naked="props.design == 2">
 		<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
 			:data-compact="props.design == 1 || props.design == 2"
 			:data-melt="props.design == 2"
@@ -18,7 +18,7 @@
 			<router-link class="name" :to="$store.state.i | userPage"><mk-user-name :user="$store.state.i"/></router-link>
 			<p class="username">@{{ $store.state.i | acct }}</p>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/widgets/trends.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-trends">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa icon="fire"/>{{ $t('title') }}</template>
 		<button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button>
 
@@ -12,7 +12,7 @@
 			</div>
 			<p class="empty" v-else>{{ $t('nothing') }}</p>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/widgets/users.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-users">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa icon="users"/>{{ $t('title') }}</template>
 		<button slot="func" :title="$t('title')" @click="refresh">
 			<fa v-if="!fetching &&  more" icon="arrow-right"/>
@@ -20,7 +20,7 @@
 			</template>
 			<p class="empty" v-else>{{ $t('no-one') }}</p>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/init.ts

@@ -11,6 +11,7 @@ import VueI18n from 'vue-i18n';
 import SequentialEntrance from 'vue-sequential-entrance';
 
 import VueHotkey from './common/hotkey';
+import VueSize from './common/size';
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
 import MiOS from './mios';
@@ -291,6 +292,7 @@ Vue.use(VueRouter);
 Vue.use(VAnimateCss);
 Vue.use(VModal);
 Vue.use(VueHotkey);
+Vue.use(VueSize);
 Vue.use(VueI18n);
 Vue.use(SequentialEntrance);
 

src/client/app/mobile/script.ts

@@ -21,8 +21,6 @@ import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkReceivedFollowRequests from './views/pages/received-follow-requests.vue';
 import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
-import MkFollowers from './views/pages/followers.vue';
-import MkFollowing from './views/pages/following.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkUserLists from './views/pages/user-lists.vue';
 import MkUserList from './views/pages/user-list.vue';
@@ -134,11 +132,14 @@ init((launch) => {
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
 			{ path: '/featured', name: 'featured', component: () => import('./views/pages/featured.vue').then(m => m.default) },
+			{ path: '/explore', name: 'explore', component: () => import('./views/pages/explore.vue').then(m => m.default) },
 			{ path: '/share', component: MkShare },
 			{ path: '/games/reversi/:game?', name: 'reversi', component: MkReversi },
-			{ path: '/@:user', component: () => import('./views/pages/user.vue').then(m => m.default) },
-			{ path: '/@:user/followers', component: MkFollowers },
-			{ path: '/@:user/following', component: MkFollowing },
+			{ path: '/@:user', component: () => import('./views/pages/user/index.vue').then(m => m.default), children: [
+				{ path: '', name: 'user', component: () => import('./views/pages/user/home.vue').then(m => m.default) },
+				{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
+				{ path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) },
+			]},
 			{ path: '/notes/:note', component: MkNote },
 			{ path: '/authorize-follow', component: MkFollow },
 			{ path: '*', component: MkNotFound }

src/client/app/mobile/views/components/index.ts

@@ -13,11 +13,10 @@ import friendsMaker from './friends-maker.vue';
 import notification from './notification.vue';
 import notifications from './notifications.vue';
 import notificationPreview from './notification-preview.vue';
-import usersList from './users-list.vue';
 import userPreview from './user-preview.vue';
 import userTimeline from './user-timeline.vue';
 import userListTimeline from './user-list-timeline.vue';
-import widgetContainer from './widget-container.vue';
+import uiContainer from './ui-container.vue';
 import postForm from './post-form.vue';
 
 Vue.component('mk-ui', ui);
@@ -33,9 +32,8 @@ Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-notification', notification);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-notification-preview', notificationPreview);
-Vue.component('mk-users-list', usersList);
 Vue.component('mk-user-preview', userPreview);
 Vue.component('mk-user-timeline', userTimeline);
 Vue.component('mk-user-list-timeline', userListTimeline);
-Vue.component('mk-widget-container', widgetContainer);
+Vue.component('ui-container', uiContainer);
 Vue.component('mk-post-form', postForm);

src/client/app/mobile/views/components/ui-container.vue

@@ -1,10 +1,16 @@
 <template>
-<div class="mk-widget-container" :class="{ naked, hideHeader: !showHeader }">
+<div class="ukygtjoj" :class="{ naked, hideHeader: !showHeader }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
+		<button v-if="bodyTogglable" @click="() => showBody = !showBody">
+			<template v-if="showBody"><fa icon="angle-up"/></template>
+			<template v-else><fa icon="angle-down"/></template>
+		</button>
 	</header>
-	<slot></slot>
+	<div v-show="showBody">
+		<slot></slot>
+	</div>
 </div>
 </template>
 
@@ -19,18 +25,30 @@ export default Vue.extend({
 		naked: {
 			type: Boolean,
 			default: false
-		}
+		},
+		bodyTogglable: {
+			type: Boolean,
+			default: false
+		},
+	},
+	data() {
+		return {
+			showBody: true
+		};
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.mk-widget-container
+.ukygtjoj
 	background var(--face)
 	border-radius 8px
 	box-shadow 0 4px 16px rgba(#000, 0.1)
 	overflow hidden
 
+	& + .ukygtjoj
+		margin-top 16px
+
 	&.naked
 		background transparent !important
 		box-shadow none !important

src/client/app/mobile/views/components/ui.nav.vue

@@ -20,6 +20,7 @@
 					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'"><i><fa :icon="['far', 'comments']" fixed-width/></i>{{ $t('@.messaging') }}<i v-if="hasUnreadMessagingMessage" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 					<li v-if="$store.getters.isSignedIn && ($store.state.i.isLocked || $store.state.i.carefulBot)"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'"><i><fa :icon="['far', 'envelope']" fixed-width/></i>{{ $t('follow-requests') }}<i v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 					<li><router-link to="/featured" :data-active="$route.name == 'featured'"><i><fa :icon="faNewspaper" fixed-width/></i>{{ $t('@.featured-notes') }}<i><fa icon="angle-right"/></i></router-link></li>
+					<li><router-link to="/explore" :data-active="$route.name == 'explore'"><i><fa :icon="faHashtag" fixed-width/></i>{{ $t('@.explore') }}<i><fa icon="angle-right"/></i></router-link></li>
 					<li><router-link to="/games/reversi" :data-active="$route.name == 'reversi'"><i><fa icon="gamepad" fixed-width/></i>{{ $t('game') }}<i v-if="hasGameInvitation" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 				</ul>
 				<ul>
@@ -51,7 +52,7 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import { lang } from '../../../config';
-import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
+import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/components/ui.nav.vue'),
@@ -64,7 +65,7 @@ export default Vue.extend({
 			aboutUrl: `/docs/${lang}/about`,
 			announcements: [],
 			searching: false,
-			faNewspaper
+			faNewspaper, faHashtag
 		};
 	},
 

src/client/app/mobile/views/components/users-list.vue

@@ -1,135 +0,0 @@
-<template>
-<div class="mk-users-list">
-	<nav>
-		<span :data-active="mode == 'all'" @click="mode = 'all'">{{ $t('all') }}<span>{{ count }}</span></span>
-		<span v-if="$store.getters.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">{{ $t('known') }}<span>{{ youKnowCount }}</span></span>
-	</nav>
-	<div class="users" v-if="!fetching && users.length != 0">
-		<mk-user-preview v-for="u in users" :user="u" :key="u.id"/>
-	</div>
-	<ui-button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
-		<span v-if="!moreFetching">{{ $t('@.load-more') }}</span>
-		<span v-if="moreFetching">{{ $t('@.loading') }}<mk-ellipsis/></span>
-	</ui-button>
-	<p class="no" v-if="!fetching && users.length == 0">
-		<slot></slot>
-	</p>
-	<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-export default Vue.extend({
-	i18n: i18n('mobile/views/components/users-list.vue'),
-	props: ['fetch', 'count', 'youKnowCount'],
-	data() {
-		return {
-			limit: 30,
-			mode: 'all',
-			fetching: true,
-			moreFetching: false,
-			users: [],
-			next: null
-		};
-	},
-	watch: {
-		mode() {
-			this._fetch();
-		}
-	},
-	mounted() {
-		this._fetch(() => {
-			this.$emit('loaded');
-		});
-	},
-	methods: {
-		_fetch(cb?) {
-			this.fetching = true;
-			this.fetch(this.mode == 'iknow', this.limit, null, obj => {
-				this.users = obj.users;
-				this.next = obj.next;
-				this.fetching = false;
-				if (cb) cb();
-			});
-		},
-		more() {
-			this.moreFetching = true;
-			this.fetch(this.mode == 'iknow', this.limit, this.next, obj => {
-				this.moreFetching = false;
-				this.users = this.users.concat(obj.users);
-				this.next = obj.next;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-
-
-.mk-users-list
-
-	> nav
-		display flex
-		justify-content center
-		margin 0 auto
-		max-width 600px
-		border-bottom solid 1px rgba(#000, 0.2)
-
-		> span
-			display block
-			flex 1 1
-			text-align center
-			line-height 52px
-			font-size 14px
-			color #657786
-			border-bottom solid 2px transparent
-
-			&[data-active]
-				font-weight bold
-				color var(--primary)
-				border-color var(--primary)
-
-			> span
-				display inline-block
-				margin-left 4px
-				padding 2px 5px
-				font-size 12px
-				line-height 1
-				color #fff
-				background rgba(#000, 0.3)
-				border-radius 20px
-
-	> .users
-		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)
-
-		> *
-			border-bottom solid 1px rgba(#000, 0.05)
-
-	> .no
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-		> [data-icon]
-			margin-right 4px
-
-</style>

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

@@ -0,0 +1,37 @@
+<template>
+<mk-ui>
+	<span slot="header"><span style="margin-right:4px;"><fa :icon="faHashtag"/></span>{{ $t('@.explore') }}</span>
+
+	<main>
+		<x-explore/>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { faHashtag } from '@fortawesome/free-solid-svg-icons';
+import XExplore from '../../../common/views/pages/explore.vue';
+
+export default Vue.extend({
+	i18n: i18n(''),
+	components: {
+		XExplore
+	},
+	data() {
+		return {
+			faHashtag
+		};
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+</style>

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

@@ -36,7 +36,7 @@ export default Vue.extend({
 			this.fetching = true;
 
 			this.$root.api('notes/featured', {
-				limit: 10
+				limit: 20
 			}).then(notes => {
 				this.notes = notes;
 				this.fetching = false;
@@ -47,3 +47,24 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<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/followers.vue

@@ -1,70 +0,0 @@
-<template>
-<mk-ui>
-	<template slot="header" v-if="!fetching">
-		<img :src="user.avatarUrl" alt="">
-		<mfm :text="$t('followers-of', { name })" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
-	</template>
-	<mk-users-list
-		v-if="!fetching"
-		:fetch="fetchUsers"
-		:count="user.followersCount"
-		:you-know-count="user.followersYouKnowCount"
-		@loaded="onLoaded"
-	>
-		%i18n:@no-users%
-	</mk-users-list>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../misc/acct/parse';
-import getUserName from '../../../../../misc/get-user-name';
-
-export default Vue.extend({
-	i18n: i18n('mobile/views/pages/followers.vue'),
-	data() {
-		return {
-			fetching: true,
-			user: null
-		};
-	},
-	computed: {
-		name() {
-			return getUserName(this.user);
-		}
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			Progress.start();
-			this.fetching = true;
-
-			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
-				this.user = user;
-				this.fetching = false;
-
-				document.title = `${this.$t('followers-of').replace('{}', this.name)} | ${this.$root.instanceName}`;
-			});
-		},
-		onLoaded() {
-			Progress.done();
-		},
-		fetchUsers(iknow, limit, cursor, cb) {
-			this.$root.api('users/followers', {
-				userId: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		}
-	}
-});
-</script>

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

@@ -1,69 +0,0 @@
-<template>
-<mk-ui>
-	<template slot="header" v-if="!fetching">
-		<img :src="user.avatarUrl" alt="">
-		<mfm :text="$t('following-of', { name })" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
-	</template>
-	<mk-users-list
-		v-if="!fetching"
-		:fetch="fetchUsers"
-		:count="user.followingCount"
-		:you-know-count="user.followingYouKnowCount"
-		@loaded="onLoaded"
-	>
-		%i18n:@no-users%
-	</mk-users-list>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../misc/acct/parse';
-
-export default Vue.extend({
-	i18n: i18n('mobile/views/pages/following.vue'),
-	data() {
-		return {
-			fetching: true,
-			user: null
-		};
-	},
-	computed: {
-		name(): string {
-			return Vue.filter('userName')(this.user);
-		}
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			Progress.start();
-			this.fetching = true;
-
-			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
-				this.user = user;
-				this.fetching = false;
-
-				document.title = `${this.$t('followers-of').replace('{}', this.name)} | ${this.$root.instanceName}`;
-			});
-		},
-		onLoaded() {
-			Progress.done();
-		},
-		fetchUsers(iknow, limit, cursor, cb) {
-			this.$root.api('users/following', {
-				userId: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		}
-	}
-});
-</script>

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

@@ -43,22 +43,22 @@
 					</p>
 				</div>
 				<div class="status">
-					<a>
+					<router-link :to="user | userPage()">
 						<b>{{ user.notesCount | number }}</b>
 						<i>{{ $t('notes') }}</i>
-					</a>
-					<a :href="user | userPage('following')">
+					</router-link>
+					<router-link :to="user | userPage('following')">
 						<b>{{ user.followingCount | number }}</b>
 						<i>{{ $t('following') }}</i>
-					</a>
-					<a :href="user | userPage('followers')">
+					</router-link>
+					<router-link :to="user | userPage('followers')">
 						<b>{{ user.followersCount | number }}</b>
 						<i>{{ $t('followers') }}</i>
-					</a>
+					</router-link>
 				</div>
 			</div>
 		</header>
-		<nav>
+		<nav v-if="$route.name == 'user'">
 			<div class="nav-container">
 				<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> {{ $t('overview') }}</a>
 				<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</a>
@@ -66,9 +66,12 @@
 			</div>
 		</nav>
 		<div class="body">
-			<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 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>
 </mk-ui>
@@ -76,13 +79,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 import * as age from 's-age';
-import parseAcct from '../../../../../misc/acct/parse';
-import Progress from '../../../common/scripts/loading';
-import XUserMenu from '../../../common/views/components/user-menu.vue';
-import XHome from './user/home.vue';
-import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
+import parseAcct from '../../../../../../misc/acct/parse';
+import Progress from '../../../../common/scripts/loading';
+import XUserMenu from '../../../../common/views/components/user-menu.vue';
+import XHome from './home.vue';
+import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/user.vue'),
@@ -93,7 +96,7 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			user: null,
-			page: 'home'
+			page: this.$route.name == 'user' ? 'home' : null
 		};
 	},
 	computed: {

src/client/app/mobile/views/widgets/activity.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mkw-activity">
-	<mk-widget-container :show-header="!props.compact">
+	<ui-container :show-header="!props.compact">
 		<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
 		<div :class="$style.body">
 			<x-activity :user="$store.state.i"/>
 		</div>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/mobile/views/widgets/profile.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-profile">
-	<mk-widget-container>
+	<ui-container>
 		<div :class="$style.banner"
 			:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
 		></div>
@@ -11,7 +11,7 @@
 		<router-link :class="$style.name" :to="$store.state.i | userPage">
 			<mk-user-name :user="$store.state.i"/>
 		</router-link>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/misc/is-objectid.ts

@@ -1,5 +1,5 @@
 import { ObjectID } from 'mongodb';
 
 export default function(x: any): x is ObjectID {
-	return x.hasOwnProperty('toHexString') || x.hasOwnProperty('_bsontype');
+	return x && typeof x === 'object' && (x.hasOwnProperty('toHexString') || x.hasOwnProperty('_bsontype'));
 }

src/models/user.ts

@@ -15,6 +15,9 @@ import Emoji from './emoji';
 
 const User = db.get<IUser>('users');
 
+User.createIndex('createdAt');
+User.createIndex('updatedAt');
+User.createIndex('followersCount');
 User.createIndex('username');
 User.createIndex('usernameLower');
 User.createIndex('host');

src/server/api/endpoints/notes.ts

@@ -80,7 +80,8 @@ export default define(meta, (ps) => new Promise(async (res, rej) => {
 	};
 	const query = {
 		deletedAt: null,
-		visibility: 'public'
+		visibility: 'public',
+		localOnly: { $ne: true },
 	} as any;
 	if (ps.sinceId) {
 		sort._id = 1;

src/server/api/endpoints/users.ts

@@ -27,6 +27,18 @@ export const meta = {
 			]),
 		},
 
+		state: {
+			validator: $.optional.str.or([
+				'all',
+				'admin',
+				'moderator',
+				'adminOrModerator',
+				'verified',
+				'alive'
+			]),
+			default: 'all'
+		},
+
 		origin: {
 			validator: $.optional.str.or([
 				'combined',
@@ -72,10 +84,32 @@ export default define(meta, (ps, me) => new Promise(async (res, rej) => {
 		};
 	}
 
-	const q =
+	const q = {
+		$and: []
+	} as any;
+
+	// state
+	q.$and.push(
+		ps.state == 'admin' ? { isAdmin: true } :
+		ps.state == 'moderator' ? { isModerator: true } :
+		ps.state == 'adminOrModerator' ? {
+			$or: [{
+				isAdmin: true
+			}, {
+				isModerator: true
+			}]
+		} :
+		ps.state == 'verified' ? { isVerified: true } :
+		ps.state == 'alive' ? { updatedAt: { $gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 5)) } } :
+		{}
+	);
+
+	// origin
+	q.$and.push(
 		ps.origin == 'local' ? { host: null } :
 		ps.origin == 'remote' ? { host: { $ne: null } } :
-		{};
+		{}
+	);
 
 	const users = await User
 		.find(q, {

src/server/api/endpoints/users/followers.ts

@@ -16,7 +16,7 @@ export const meta = {
 
 	params: {
 		userId: {
-			validator: $.type(ID),
+			validator: $.optional.type(ID),
 			transform: transform,
 			desc: {
 				'ja-JP': '対象のユーザーのID',
@@ -24,6 +24,14 @@ export const meta = {
 			}
 		},
 
+		username: {
+			validator: $.optional.str
+		},
+
+		host: {
+			validator: $.optional.nullable.str
+		},
+
 		limit: {
 			validator: $.optional.num.range(1, 100),
 			default: 10
@@ -43,14 +51,11 @@ export const meta = {
 };
 
 export default define(meta, (ps, me) => new Promise(async (res, rej) => {
-	// Lookup user
-	const user = await User.findOne({
-		_id: ps.userId
-	}, {
-		fields: {
-			_id: true
-		}
-	});
+	const q: any = ps.userId != null
+		? { _id: ps.userId }
+		: { usernameLower: ps.username.toLowerCase(), host: ps.host };
+
+	const user = await User.findOne(q);
 
 	if (user === null) {
 		return rej('user not found');

src/server/api/endpoints/users/following.ts

@@ -16,7 +16,7 @@ export const meta = {
 
 	params: {
 		userId: {
-			validator: $.type(ID),
+			validator: $.optional.type(ID),
 			transform: transform,
 			desc: {
 				'ja-JP': '対象のユーザーのID',
@@ -24,6 +24,14 @@ export const meta = {
 			}
 		},
 
+		username: {
+			validator: $.optional.str
+		},
+
+		host: {
+			validator: $.optional.nullable.str
+		},
+
 		limit: {
 			validator: $.optional.num.range(1, 100),
 			default: 10
@@ -43,14 +51,11 @@ export const meta = {
 };
 
 export default define(meta, (ps, me) => new Promise(async (res, rej) => {
-	// Lookup user
-	const user = await User.findOne({
-		_id: ps.userId
-	}, {
-		fields: {
-			_id: true
-		}
-	});
+	const q: any = ps.userId != null
+		? { _id: ps.userId }
+		: { usernameLower: ps.username.toLowerCase(), host: ps.host };
+
+	const user = await User.findOne(q);
 
 	if (user === null) {
 		return rej('user not found');

src/server/api/endpoints/users/show.ts

@@ -70,10 +70,10 @@ export default define(meta, (ps, me) => new Promise(async (res, rej) => {
 				: { usernameLower: ps.username.toLowerCase(), host: null };
 
 			user = await User.findOne(q, cursorOption);
+		}
 
-			if (user === null) {
-				return rej('user not found');
-			}
+		if (user === null) {
+			return rej('user not found');
 		}
 
 		// Send response