🎨

packages/client/src/components/MkInstanceStats.vue

@@ -1,8 +1,9 @@
 <template>
-<div class="zbcjwnqg">
-	<div class="main">
-		<div class="body">
-			<div class="selects" style="display: flex;">
+<div :class="$style.root">
+	<MkFolder class="item">
+		<template #header>Chart</template>
+		<div :class="$style.chart">
+			<div class="selects">
 				<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="i18n.ts.federation">
 						<option value="federation">{{ i18n.ts._charts.federation }}</option>
@@ -29,15 +30,23 @@
 					<option value="day">{{ i18n.ts.perDay }}</option>
 				</MkSelect>
 			</div>
-			<div class="chart">
+			<div class="chart _panel">
 				<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="detailed"></MkChart>
 			</div>
 		</div>
-	</div>
-	<div class="heatmap _panel">
+	</MkFolder>
+
+	<MkFolder class="item">
+		<template #header>Active users heatmap</template>
+		<div class="_panel" :class="$style.heatmap">
 			<MkActiveUsersHeatmap/>
 		</div>
-	<div class="subpub">
+	</MkFolder>
+
+	<MkFolder class="item">
+		<template #header>Federation</template>
+		<div :class="$style.federation">
+			<div class="pies">
 				<div class="sub">
 					<div class="title">Sub</div>
 					<canvas ref="subDoughnutEl"></canvas>
@@ -48,6 +57,8 @@
 				</div>
 			</div>
 		</div>
+	</MkFolder>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -76,6 +87,7 @@ import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
+import MkFolder from '@/components/MkFolder.vue';
 
 Chart.register(
 	ArcElement,
@@ -185,27 +197,36 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.zbcjwnqg {
-	> .main {
-		background: var(--panel);
-		border-radius: var(--radius);
-		padding: 24px;
+<style lang="scss" module>
+.root {
+	&:global {
+		> .item {
 			margin-bottom: 16px;
+		}
+	}
+}
+
+.chart {
+	&:global {
+		> .selects {
+			display: flex;
+			margin-bottom: 12px;
+		}
 
-		> .body {
 		> .chart {
-				padding: 8px 0 0 0;
+			padding: 16px;
 		}
 	}
 }
 
-	> .heatmap {
+.heatmap {
 	padding: 16px;
 	margin-bottom: 16px;
 }
 
-	> .subpub {
+.federation {
+	&:global {
+		> .pies {
 			display: flex;
 			gap: 16px;
 
@@ -230,4 +251,5 @@ onMounted(() => {
 			}
 		}
 	}
+}
 </style>