Improve UI

src/client/app/desktop/script.ts

@@ -130,7 +130,11 @@ 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) },
@@ -140,13 +144,17 @@ init(async (launch, os) => {
 				]}
 				: { 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: '/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/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) },
 				]},
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
@@ -155,8 +163,6 @@ init(async (launch, os) => {
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ 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 }

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,8 +39,10 @@
 			</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>
 					<router-link :to="user | userPage('following')">
@@ -56,35 +58,7 @@
 				</div>
 			</div>
 		</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>
+		<router-view :user="user"></router-view>
 	</div>
 </x-column>
 </template>
@@ -94,30 +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: [],
 		};
 	},
 
@@ -146,160 +108,9 @@ 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,
@@ -439,34 +250,13 @@ export default Vue.extend({
 				> a
 					color var(--text)
 
-				>>> b
-					display block
-					font-size 110%
+					> b
+						display block
+						font-size 110%
 
-				>>> span
-					display block
-					font-size 80%
-					opacity 0.7
-
-	.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
-
-	> .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/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"/>
-		<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"/>
+		<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>

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