10.85.2

Close #4269

CHANGELOG.md

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

package.json

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

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/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';
@@ -133,6 +132,7 @@ init(async (launch, os) => {
 				? { path: '/', name: 'index', component: MkDeck, children: [
 					{ path: '/@:user', name: 'user', component: () => import('./views/deck/deck.user-column.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: '/i/favorites', component: () => import('./views/deck/deck.favorites-column.vue').then(m => m.default) }
@@ -141,6 +141,7 @@ init(async (launch, os) => {
 					{ path: '', name: 'index', component: MkHomeTimeline },
 					{ path: '/@:user', name: 'user', component: () => import('./views/home/user/user.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) }
@@ -150,14 +151,17 @@ init(async (launch, os) => {
 			{ 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

@@ -1,11 +1,17 @@
 <template>
-<div class="mk-widget-container" :class="{ naked }">
+<div class="kedshtep" :class="{ naked }">
 	<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">
@@ -19,13 +25,22 @@ 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
+.kedshtep
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)

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

@@ -136,7 +136,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.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">
+				<div class="home">
-					<router-link to="/home"><fa icon="home"/></router-link>
+					<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">
+				<div class="deck">
-					<router-link to="/deck"><fa icon="columns"/></router-link>
+					<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/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()) {

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.vue

@@ -43,12 +43,16 @@
 					<span>{{ $t('posts') }}</span>
 				</div>
 				<div>
+					<router-link :to="user | userPage('following')">
 						<b>{{ user.followingCount | number }}</b>
 						<span>{{ $t('following') }}</span>
+					</router-link>
 				</div>
 				<div>
+					<router-link :to="user | userPage('followers')">
 						<b>{{ user.followersCount | number }}</b>
 						<span>{{ $t('followers') }}</span>
+					</router-link>
 				</div>
 			</div>
 		</div>
@@ -453,11 +457,14 @@ export default Vue.extend({
 				padding 8px 8px 0 8px
 				text-align center
 
-				> b
+				> a
+					color var(--text)
+
+				>>> b
 					display block
 					font-size 110%
 
-				> span
+				>>> span
 					display block
 					font-size 80%
 					opacity 0.7

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

@@ -55,9 +55,9 @@ export default Vue.extend({
 		}
 	},
 
-	watch: {/*
+	watch: {
-		temporaryColumn() {
+		$route() {
-			if (this.temporaryColumn != null) {
+			if (this.$route.name == 'index') return;
 			this.$nextTick(() => {
 				this.$refs.body.scrollTo({
 					left: this.$refs.body.scrollWidth - this.$refs.body.clientWidth,
@@ -65,7 +65,6 @@ export default Vue.extend({
 				});
 			});
 		}
-		}*/
 	},
 
 	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>
+<div class="oxgbmvii">
-	<header :class="$style.header">
+	<div class="notes">
-		<h1>{{ q }}</h1>
+		<header>
+			<span><fa icon="search"/> {{ q }}</span>
 		</header>
-	<p :class="$style.notAvailable" v-if="!fetching && notAvailable">{{ $t('not-available') }}</p>
+		<p v-if="!fetching && notAvailable">{{ $t('not-available') }}</p>
-	<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
+		<p v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
-	<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
+		<mk-notes ref="timeline" :more="existMore ? more : null"/>
-</mk-ui>
+	</div>
+</div>
 </template>
 
 <script lang="ts">
@@ -106,45 +108,23 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" module>
+<style lang="stylus" scoped>
-.header
+.oxgbmvii
-	width 100%
+	> .notes
-	max-width 600px
+		background var(--face)
-	margin 0 auto
+		box-shadow var(--shadow)
-	color #555
+		border-radius var(--round)
-
-.notes
-	max-width 600px
-	margin 0 auto
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
 		overflow hidden
 
-.empty
+		> header
-	display block
+			padding 0 8px
-	margin 0 auto
+			z-index 10
-	padding 32px
+			background var(--faceHeader)
-	max-width 400px
+			box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
-	text-align center
-	color #999
 
-	> [data-icon]
+			> span
-		display block
+				padding 0 8px
-		margin-bottom 16px
+				font-size 0.9em
-		font-size 3em
+				line-height 42px
-		color #ccc
+				color var(--text)
-
-.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
 </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/user.header.vue

@@ -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.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>
+<ui-container :body-togglable="true">
+	<span slot="header"><fa icon="camera"/> {{ $t('title') }}</span>
+
 	<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"
+			<router-link v-for="image in images" class="img"
-			:style="`background-image: url(${thumbnail(image)})`"
+				:style="`background-image: url(${image.thumbnailUrl})`"
-		></div>
+				: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>
+</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
+		display grid
-		justify-content center
+		grid-template-columns 1fr 1fr 1fr
-		flex-wrap wrap
+		gap 8px
-		padding 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/home/user/user.vue

@@ -4,14 +4,14 @@
 	<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"/>
+		<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"/>
-		<x-integrations :user="user"/>
 		<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
 		<div class="activity">
-			<mk-widget-container :show-header="true" :naked="false">
+			<ui-container :body-togglable="true">
 				<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
 				<x-activity :user="user" :limit="35" style="padding: 16px;"/>
-			</mk-widget-container>
+			</ui-container>
 		</div>
 		<x-photos :user="user"/>
 		<x-friends :user="user"/>

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/mobile/views/components/index.ts

@@ -17,7 +17,7 @@ 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);
@@ -37,5 +37,5 @@ 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,11 +1,13 @@
 <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>
 	</header>
+	<div v-show="showBody">
 		<slot></slot>
 	</div>
+</div>
 </template>
 
 <script lang="ts">
@@ -25,7 +27,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-widget-container
+.ukygtjoj
 	background var(--face)
 	border-radius 8px
 	box-shadow 0 4px 16px rgba(#000, 0.1)

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/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/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;