feat(gui): add activity calendar to the homepage (#2160)

* feat(gui): add activity calendar to the homepage

* localise week start

2 files changed, 47 insertions, 1 deletions

diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
index 00752326..51c1e934 100644
--- a/ui/src/pages/Home.tsx
+++ b/ui/src/pages/Home.tsx
@@ -1,10 +1,13 @@
-import { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { formatRelative } from "date-fns";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 
 import { useStore } from "@/state/store";
 import { useToast } from "@/components/ui/use-toast";
 import { invoke } from "@tauri-apps/api/core";
 
+import ActivityCalendar from "react-activity-calendar";
+
 function Stats({ stats }: any) {
   return (
     <div>
@@ -44,16 +47,32 @@ function Header({ name }: any) {
   );
 }
 
+const explicitTheme: ThemeInput = {
+  light: ["#f0f0f0", "#c4edde", "#7ac7c4", "#f73859", "#384259"],
+  dark: ["#383838", "#4D455D", "#7DB9B6", "#F5E9CF", "#E96479"],
+};
+
 export default function Home() {
+  const [weekStart, setWeekStart] = useState(0);
+
   const homeInfo = useStore((state) => state.homeInfo);
   const user = useStore((state) => state.user);
+  const calendar = useStore((state) => state.calendar);
+
   const refreshHomeInfo = useStore((state) => state.refreshHomeInfo);
   const refreshUser = useStore((state) => state.refreshUser);
+  const refreshCalendar = useStore((state) => state.refreshCalendar);
+
   const { toast } = useToast();
 
   useEffect(() => {
+    let locale = new Intl.Locale(navigator.language);
+    let weekinfo = locale.getWeekInfo();
+    setWeekStart(weekinfo.firstDay);
+
     refreshHomeInfo();
     refreshUser();
+    refreshCalendar();
 
     let setup = async () => {
       let installed = await invoke("is_cli_installed");
@@ -112,6 +131,24 @@ export default function Home() {
             ]}
           />
         </div>
+
+        <div className="pt-10">
+          <ActivityCalendar
+            theme={explicitTheme}
+            data={calendar}
+            weekStart={weekStart}
+            renderBlock={(block, activity) =>
+              React.cloneElement(block, {
+                "data-tooltip-id": "react-tooltip",
+                "data-tooltip-html": `${activity.count} commands on ${activity.date}`,
+              })
+            }
+            labels={{
+              totalCount: "{{count}} history records in the last year",
+            }}
+          />
+          <ReactTooltip id="react-tooltip" />
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/state/store.ts b/ui/src/state/store.ts
index 1ad5dc32..822abc26 100644
--- a/ui/src/state/store.ts
+++ b/ui/src/state/store.ts
@@ -25,8 +25,10 @@ interface AtuinState {
   aliases: Alias[];
   vars: Var[];
   shellHistory: ShellHistory[];
+  calendar: any[];
 
   refreshHomeInfo: () => void;
+  refreshCalendar: () => void;
   refreshAliases: () => void;
   refreshVars: () => void;
   refreshUser: () => void;
@@ -40,6 +42,7 @@ export const useStore = create<AtuinState>()((set, get) => ({
   aliases: [],
   vars: [],
   shellHistory: [],
+  calendar: [],
 
   refreshAliases: () => {
     invoke("aliases").then((aliases: any) => {
@@ -47,6 +50,12 @@ export const useStore = create<AtuinState>()((set, get) => ({
     });
   },
 
+  refreshCalendar: () => {
+    invoke("history_calendar").then((calendar: any) => {
+      set({ calendar: calendar });
+    });
+  },
+
   refreshVars: () => {
     invoke("vars").then((vars: any) => {
       set({ vars: vars });