feat: improved git graph data loading

apps/desktop/package.json

@@ -55,6 +55,7 @@
     "react-intersection-observer": "^10.0.2",
     "react-resizable-panels": "catalog:",
     "react-scan": "^0.4.3",
+    "recharts": "catalog:",
     "shiki": "^3.13.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",

apps/desktop/src-tauri/src/commands/history.rs

@@ -1,7 +1,7 @@
 use git::core::get_services;
 use git::models::commit::CommitInfo;
-use git::models::graph::HistoryQuery;
-use git::models::history::HistoryGraphResponse;
+use git::models::graph::{CommitActivityQuery, HistoryQuery};
+use git::models::history::{CommitActivityResponse, HistoryGraphResponse};
 use git::AppState;
 
 #[tauri::command]
@@ -24,3 +24,13 @@ pub async fn history_graph(
     let services = get_services(state, &context_id).await?;
     services.history().history_graph(query).await
 }
+
+#[tauri::command]
+pub async fn commit_activity(
+    context_id: String,
+    query: CommitActivityQuery,
+    state: tauri::State<'_, AppState>,
+) -> Result<CommitActivityResponse, String> {
+    let services = get_services(state, &context_id).await?;
+    services.history().commit_activity(query).await
+}

apps/desktop/src-tauri/src/lib.rs

@@ -55,6 +55,7 @@ pub fn run() {
             commands::diff::get_patch_by_file_path,
             commands::history::history,
             commands::history::history_graph,
+            commands::history::commit_activity,
             commands::origin::repository_origin,
             commands::commit::last_commit,
             commands::commit::commit_by_id,

apps/desktop/src/app.css

@@ -7,9 +7,9 @@
 }
 
 body {
-  -webkit-user-select: none;
+  /* -webkit-user-select: none;
   user-select: none;
-  -moz-user-select: none;
+  -moz-user-select: none; */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

apps/desktop/src/components/diffBoxes.tsx

@@ -0,0 +1,44 @@
+import { cn } from "@gitru/ui/lib/utils";
+
+function getDiffBoxes(insertions: number, deletions: number) {
+  const total = insertions + deletions;
+  if (total === 0) return { green: 0, red: 0, empty: 5 };
+  const filled = Math.min(total, 5);
+  const green = Math.round((insertions / total) * filled);
+  const red = filled - green;
+  const empty = 5 - filled;
+  return { green, red, empty };
+}
+
+type DiffStatProps = {
+  stats: {
+    insertions: number;
+    deletions: number;
+  };
+};
+
+export function DiffStat({ stats }: DiffStatProps) {
+  const { green, red, empty } = getDiffBoxes(stats.insertions, stats.deletions);
+  const boxes = [
+    ...Array(green).fill("green"),
+    ...Array(red).fill("red"),
+    ...Array(empty).fill("empty"),
+  ];
+
+  return (
+    <div style={{ display: "flex", gap: 1 }}>
+      {boxes.map((type, i) => (
+        <div
+          key={i}
+          className={cn(
+            "size-3 border rounded-[4px]",
+            type === "green" && "bg-green-600 border-green-700",
+            type === "red" &&
+              "bg-[repeating-linear-gradient(-45deg,var(--color-red-600)_0px,var(--color-red-600)_2px,color-mix(in_oklab,var(--color-red-600)_25%,transparent)_2px,color-mix(in_oklab,var(--color-red-600)_25%,transparent)_4px)] border-red-700",
+            type === "empty" && "bg-secondary border-secondary-foreground/10",
+          )}
+        />
+      ))}
+    </div>
+  );
+}