feat: heatmap option for activity widget

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.2.0-dev36",
+	"version": "13.2.0-dev37",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/components/MkHeatmap.vue

@@ -25,6 +25,7 @@ import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 import { chartVLine } from "@/scripts/chart-vline";
 import { alpha } from "@/scripts/color";
 import { initChart } from "@/scripts/init-chart";
+import { $i } from "@/account";
 
 initChart();
 
@@ -108,6 +109,13 @@ async function renderChart() {
 			span: "day",
 		});
 		values = raw.deliverFailed;
+	} else if (props.src === "user-notes") {
+		const raw = await os.api("charts/user/notes", {
+			limit: 7 * 21,
+			span: "day",
+			userId: $i.id,
+		});
+		values = raw.total;
 	}
 
 	fetching = false;

packages/client/src/widgets/activity.vue

@@ -9,11 +9,14 @@
 			>{{ i18n.ts._widgets.activity }}</template
 		>
 		<template #func
-			><button class="_button" @click="toggleView()">
+			><button v-if="!widgetProps.newStyle" class="_button" @click="toggleView()">
 				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
 		></template>
 
-		<div>
+		<div v-if="widgetProps.newStyle">
+			<MkHeatmap src="notes-user" />
+		</div>
+		<div v-else>
 			<MkLoading v-if="fetching" />
 			<template v-else>
 				<XCalendar
@@ -40,6 +43,7 @@ import {
 } from "./widget";
 import XCalendar from "./activity.calendar.vue";
 import XChart from "./activity.chart.vue";
+import MkHeatmap from "@/components/MkHeatmap.vue";
 import { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
@@ -49,6 +53,10 @@ import { i18n } from "@/i18n";
 const name = "activity";
 
 const widgetPropsDef = {
+	newStyle: {
+		type: "boolean" as const,
+		default: true,
+	},
 	showHeader: {
 		type: "boolean" as const,
 		default: true,