Improve desktop UX (#4262)

* wip

* wip

* wip

* wip

* wip

* wip

* Merge

* wip

* wip

* wip

* wip

* wip

* wip

6 files changed, 150 insertions, 1 deletions

diff --git a/src/client/app/common/views/components/activity.vue b/src/client/app/common/views/components/activity.vue
new file mode 100644
index 0000000000..1e9f87cf04
--- /dev/null
+++ b/src/client/app/common/views/components/activity.vue
@@ -0,0 +1,111 @@
+<template>
+<div>
+	<div ref="chart"></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import ApexCharts from 'apexcharts';
+
+export default Vue.extend({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+		limit: {
+			type: Number,
+			required: false,
+			default: 21
+		}
+	},
+	data() {
+		return {
+			fetching: true,
+			data: [],
+			peak: null
+		};
+	},
+	mounted() {
+		this.$root.api('charts/user/notes', {
+			userId: this.user.id,
+			span: 'day',
+			limit: this.limit
+		}).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 < this.limit; 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: 0,
+						right: 8,
+						bottom: 0,
+						left: 8
+					}
+				},
+				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();
+		});
+	}
+});
+</script>
diff --git a/src/client/app/common/views/components/dummy.vue b/src/client/app/common/views/components/dummy.vue
new file mode 100644
index 0000000000..5634efc509
--- /dev/null
+++ b/src/client/app/common/views/components/dummy.vue
@@ -0,0 +1,11 @@
+<template>
+<div>
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+});
+</script>
diff --git a/src/client/app/common/views/components/follow-button.vue b/src/client/app/common/views/components/follow-button.vue
index 6d120f52b4..71d3a63e4c 100644
--- a/src/client/app/common/views/components/follow-button.vue
+++ b/src/client/app/common/views/components/follow-button.vue
@@ -1,8 +1,9 @@
 <template>
 <button class="wfliddvnhxvyusikowhxozkyxyenqxqr"
-	:class="{ wait, block, mini, active: isFollowing || hasPendingFollowRequestFromYou }"
+	:class="{ wait, block, inline, mini, active: isFollowing || hasPendingFollowRequestFromYou }"
 	@click="onClick"
 	:disabled="wait"
+	:inline="inline"
 >
 	<template v-if="!wait">
 		<fa :icon="iconAndText[0]"/> <template v-if="!mini">{{ iconAndText[1] }}</template>
@@ -28,6 +29,11 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		mini: {
 			type: Boolean,
 			required: false,
@@ -128,6 +134,9 @@ export default Vue.extend({
 	border solid 1px var(--primary)
 	border-radius 36px
 
+	&.inline
+		display inline-block
+
 	&.mini
 		padding 0
 		min-width 0
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index e6f93bb840..f60f7391d2 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 dummy from './dummy.vue';
 import userName from './user-name.vue';
 import followButton from './follow-button.vue';
 import error from './error.vue';
@@ -46,6 +47,7 @@ import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
 Vue.component('mfm', misskeyFlavoredMarkdown);
+Vue.component('mk-dummy', dummy);
 Vue.component('mk-user-name', userName);
 Vue.component('mk-follow-button', followButton);
 Vue.component('mk-error', error);
diff --git a/src/client/app/common/views/widgets/index.ts b/src/client/app/common/views/widgets/index.ts
index 7fca79f1fc..6b198ccd51 100644
--- a/src/client/app/common/views/widgets/index.ts
+++ b/src/client/app/common/views/widgets/index.ts
@@ -13,6 +13,7 @@ import wSlideshow from './slideshow.vue';
 import wTips from './tips.vue';
 import wNav from './nav.vue';
 import wHashtags from './hashtags.vue';
+import wInstance from './instance.vue';
 
 Vue.component('mkw-analog-clock', wAnalogClock);
 Vue.component('mkw-nav', wNav);
@@ -27,3 +28,4 @@ Vue.component('mkw-memo', wMemo);
 Vue.component('mkw-rss', wRss);
 Vue.component('mkw-version', wVersion);
 Vue.component('mkw-hashtags', wHashtags);
+Vue.component('mkw-instance', wInstance);
diff --git a/src/client/app/common/views/widgets/instance.vue b/src/client/app/common/views/widgets/instance.vue
new file mode 100644
index 0000000000..1053235618
--- /dev/null
+++ b/src/client/app/common/views/widgets/instance.vue
@@ -0,0 +1,14 @@
+<template>
+<div class="mkw-instance">
+	<mk-widget-container>
+		<mk-instance/>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'instance'
+});
+</script>