:pizza:

6 files changed, 143 insertions, 116 deletions

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c5a3fc81ff..a57f724a32 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -375,6 +375,10 @@ common/views/components/visibility-chooser.vue:
   specified-desc: "指定したユーザーにのみ公開"
   private: "非公開"
 
+common/views/components/trends.vue:
+  count: "{}人が投稿"
+  empty: "トレンドなし"
+
 common/views/widgets/broadcast.vue:
   fetching: "確認中"
   no-broadcasts: "お知らせはありません"
@@ -403,8 +407,6 @@ common/views/widgets/posts-monitor.vue:
 
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
-  count: "{}人が投稿"
-  empty: "トレンドなし"
 
 common/views/widgets/server.vue:
   title: "サーバー情報"
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 422a3da050..4700b6269e 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import trends from './trends.vue';
 import analogClock from './analog-clock.vue';
 import menu from './menu.vue';
 import noteHeader from './note-header.vue';
@@ -40,6 +41,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-trends', trends);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
 Vue.component('mk-note-header', noteHeader);
diff --git a/src/client/app/common/views/widgets/hashtags.chart.vue b/src/client/app/common/views/components/trends.chart.vue
index 723a3947f8..723a3947f8 100644
--- a/src/client/app/common/views/widgets/hashtags.chart.vue
+++ b/src/client/app/common/views/components/trends.chart.vue
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
new file mode 100644
index 0000000000..627edc3876
--- /dev/null
+++ b/src/client/app/common/views/components/trends.vue
@@ -0,0 +1,105 @@
+<template>
+<div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc">
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
+	<!-- トランジションを有効にするとなぜかメモリリークする -->
+	<!-- <transition-group v-else tag="div" name="chart"> -->
+	<div>
+		<div v-for="stat in stats" :key="stat.tag">
+			<div class="tag">
+				<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
+				<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
+			</div>
+			<x-chart class="chart" :src="stat.chart"/>
+		</div>
+	</div>
+	<!-- </transition-group> -->
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XChart from './trends.chart.vue';
+
+export default Vue.extend({
+	components: {
+		XChart
+	},
+	data() {
+		return {
+			stats: [],
+			fetching: true,
+			clock: null
+		};
+	},
+	mounted() {
+		this.fetch();
+		this.clock = setInterval(this.fetch, 1000 * 60);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		fetch() {
+			(this as any).api('hashtags/trend').then(stats => {
+				this.stats = stats;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	> .fetching
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+	> div
+		.chart-move
+			transition transform 1s ease
+
+		> div
+			display flex
+			align-items center
+			padding 14px 16px
+
+			&:not(:last-child)
+				border-bottom solid 1px isDark ? #393f4f : #eee
+
+			> .tag
+				flex 1
+				overflow hidden
+				font-size 14px
+				color isDark ? #9baec8 : #65727b
+
+				> a
+					display block
+					width 100%
+					white-space nowrap
+					overflow hidden
+					text-overflow ellipsis
+					color inherit
+
+				> p
+					margin 0
+					font-size 75%
+					opacity 0.7
+
+			> .chart
+				height 30px
+
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
+	root(true)
+
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
index 56520400b6..0cb6b2df10 100644
--- a/src/client/app/common/views/widgets/hashtags.vue
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -4,20 +4,7 @@
 		<template slot="header">%fa:hashtag%%i18n:@title%</template>
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-			<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
-			<!-- トランジションを有効にするとなぜかメモリリークする -->
-			<!-- <transition-group v-else tag="div" name="chart"> -->
-			<div>
-				<div v-for="stat in stats" :key="stat.tag">
-					<div class="tag">
-						<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
-						<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
-					</div>
-					<x-chart class="chart" :src="stat.chart"/>
-				</div>
-			</div>
-			<!-- </transition-group> -->
+			<mk-trends/>
 		</div>
 	</mk-widget-container>
 </div>
@@ -25,7 +12,6 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import XChart from './hashtags.chart.vue';
 
 export default define({
 	name: 'hashtags',
@@ -33,89 +19,11 @@ export default define({
 		compact: false
 	})
 }).extend({
-	components: {
-		XChart
-	},
-	data() {
-		return {
-			stats: [],
-			fetching: true,
-			clock: null
-		};
-	},
-	mounted() {
-		this.fetch();
-		this.clock = setInterval(this.fetch, 1000 * 60);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
 			this.save();
-		},
-		fetch() {
-			(this as any).api('hashtags/trend').then(stats => {
-				this.stats = stats;
-				this.fetching = false;
-			});
 		}
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-root(isDark)
-	.mkw-hashtags--body
-		> .fetching
-		> .empty
-			margin 0
-			padding 16px
-			text-align center
-			color #aaa
-
-			> [data-fa]
-				margin-right 4px
-
-		> div
-			.chart-move
-				transition transform 1s ease
-
-			> div
-				display flex
-				align-items center
-				padding 14px 16px
-
-				&:not(:last-child)
-					border-bottom solid 1px isDark ? #393f4f : #eee
-
-				> .tag
-					flex 1
-					overflow hidden
-					font-size 14px
-					color isDark ? #9baec8 : #65727b
-
-					> a
-						display block
-						width 100%
-						white-space nowrap
-						overflow hidden
-						text-overflow ellipsis
-						color inherit
-
-					> p
-						margin 0
-						font-size 75%
-						opacity 0.7
-
-				> .chart
-					height 30px
-
-.mkw-hashtags[data-darkmode]
-	root(true)
-
-.mkw-hashtags:not([data-darkmode])
-	root(false)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index e67ef16136..481441c3c7 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -8,7 +8,7 @@
 	<mk-forkit class="forkit"/>
 
 	<div class="body">
-		<div class="main">
+		<div class="main block">
 			<h1 v-if="name != 'Misskey'">{{ name }}</h1>
 			<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
 
@@ -27,24 +27,24 @@
 				<span class="divider">|</span>
 				<span class="signin" @click="signin">%i18n:@signin%</span>
 			</p>
-
-			<div class="hashtags">
-				<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
-			</div>
 		</div>
 
-		<div class="broadcasts">
+		<div class="broadcasts block">
 			<div v-for="broadcast in broadcasts">
 				<h1 v-html="broadcast.title"></h1>
 				<div v-html="broadcast.text"></div>
 			</div>
 		</div>
 
-		<div class="nav">
+		<div class="nav block">
 			<mk-nav class="nav"/>
 		</div>
 
-		<mk-welcome-timeline class="tl" :max="20"/>
+		<div class="side">
+			<mk-trends class="trends block"/>
+
+			<mk-welcome-timeline class="tl block" :max="20"/>
+		</div>
 	</div>
 
 	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
@@ -71,8 +71,7 @@ export default Vue.extend({
 			host,
 			name: 'Misskey',
 			description: '',
-			broadcasts: [],
-			tags: []
+			broadcasts: []
 		};
 	},
 	created() {
@@ -86,9 +85,6 @@ export default Vue.extend({
 			this.stats = stats;
 		});
 
-		(this as any).api('hashtags/trend').then(stats => {
-			this.tags = stats.map(x => x.tag);
-		});
 	},
 	methods: {
 		signup() {
@@ -113,7 +109,7 @@ export default Vue.extend({
 	left 15px
 
 .v--modal-overlay
-	background rgba(0, 0, 0, 0.4)
+	background rgba(0, 0, 0, 0.6)
 
 .modal-light
 	.v--modal-box
@@ -162,8 +158,8 @@ root(isDark)
 	> button
 		position fixed
 		z-index 1
-		bottom 64px
-		left 64px
+		bottom 16px
+		left 16px
 		padding 16px
 		font-size 18px
 		color isDark ? #fff : #444
@@ -179,7 +175,7 @@ root(isDark)
 		margin 0 auto
 		padding 64px
 
-		> *
+		.block
 			color isDark ? #fff : #444
 			background isDark ? #313543 : #fff
 			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
@@ -190,6 +186,7 @@ root(isDark)
 			grid-row 1
 			grid-column 1
 			padding 32px
+			border-top solid 5px $theme-color
 
 			> h1
 				margin 0
@@ -257,12 +254,25 @@ root(isDark)
 			grid-column 1
 			font-size 14px
 
-		> .tl
+		> .side
+			display grid
 			grid-row 1 / 4
 			grid-column 2
-			text-align left
-			max-height 100%
-			overflow auto
+			grid-template-rows 1fr 350px
+			grid-template-columns 1fr
+			gap 16px
+
+			> .tl
+				grid-row 1
+				grid-column 1
+				text-align left
+				max-height 100%
+				overflow auto
+
+			> .trends
+				grid-row 2
+				grid-column 1
+				padding 8px
 
 .mk-welcome[data-darkmode]
 	root(true)