🎨

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

@@ -8,6 +8,12 @@
 		<p>{{ $t('@.ai-chan-kawaii') }}</p>
 	</header>
 
+	<marquee-text v-if="instances.length > 0" class="instances" :repeat="10" :duration="60">
+		<span v-for="instance in instances" class="instance">
+			<b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }} / {{ instance.usersCount | number }}
+		</span>
+	</marquee-text>
+
 	<div v-if="stats" class="stats">
 		<div>
 			<div>
@@ -84,6 +90,8 @@ import XCpuMemory from "./cpu-memory.vue";
 import XCharts from "./charts.vue";
 import XApLog from "./ap-log.vue";
 import { faDatabase } from '@fortawesome/free-solid-svg-icons';
+import MarqueeText from 'vue-marquee-text-component';
+import randomColor from 'randomcolor';
 
 export default Vue.extend({
 	i18n: i18n('admin/views/dashboard.vue'),
@@ -91,7 +99,8 @@ export default Vue.extend({
 	components: {
 		XCpuMemory,
 		XCharts,
-		XApLog
+		XApLog,
+		MarqueeText
 	},
 
 	data() {
@@ -99,6 +108,7 @@ export default Vue.extend({
 			stats: null,
 			connection: null,
 			meta: null,
+			instances: [],
 			faDatabase
 		};
 	},
@@ -113,6 +123,18 @@ export default Vue.extend({
 		this.$root.api('stats').then(stats => {
 			this.stats = stats;
 		});
+
+		this.$root.api('instances', {
+			sort: '+notes'
+		}).then(instances => {
+			instances.forEach(i => {
+				i.bg = randomColor({
+					seed: i.host,
+					luminosity: 'dark'
+				});
+			});
+			this.instances = instances;
+		});
 	},
 
 	beforeDestroy() {
@@ -136,7 +158,6 @@ export default Vue.extend({
 
 	> header
 		display flex
-		margin-bottom 16px
 		padding-bottom 16px
 		border-bottom solid 1px var(--adminDashboardHeaderBorder)
 		color var(--adminDashboardHeaderFg)
@@ -161,6 +182,20 @@ export default Vue.extend({
 				margin-left auto
 				margin-right 0
 
+	> .instances
+		padding 16px
+		color var(--adminDashboardHeaderFg)
+		font-size 13px
+
+		>>> .instance
+			margin 0 10px
+
+			> b
+				padding 2px 6px
+				margin-right 4px
+				border-radius 4px
+				color #fff
+
 	> .stats
 		display flex
 		justify-content space-between