From 228c2b259f8a6dad5f150e28773678ea38406dbf Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 19 Sep 2022 20:45:41 +0200
Subject: [PATCH] Add activity graph to compact project widget

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 cypress/e2e/home.spec.ts              |  6 +++-
 cypress/fixtures/projectActivity.json |  3 ++
 src/base/projects/Widget.svelte       | 42 ++++++++++++++-------------
 3 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 cypress/fixtures/projectActivity.json

diff --git a/cypress/e2e/home.spec.ts b/cypress/e2e/home.spec.ts
index d3cd44a43..55ed64a59 100644
--- a/cypress/e2e/home.spec.ts
+++ b/cypress/e2e/home.spec.ts
@@ -7,6 +7,10 @@ describe("landing page", () => {
       { pathname: "/v1/projects/*" },
       { fixture: "projectInfo.json" },
     ).as("projectInfo");
+    cy.intercept(
+      { pathname: "/v1/projects/*/activity" },
+      { fixture: "projectActivity.json" },
+    ).as("projectActivity");
     cy.visit("/", {
       onBeforeLoad(win) {
         const address = "0xB98bD7C7f656290071E52D1aA617D9cB4467Fd6D";
@@ -19,7 +23,7 @@ describe("landing page", () => {
         });
       },
     });
-    cy.wait("@projectInfo");
+    cy.wait(["@projectInfo", "@projectActivity"]);
     cy.get(".project .name")
       .first()
       .should("have.text", "bright-forest-protocol");
diff --git a/cypress/fixtures/projectActivity.json b/cypress/fixtures/projectActivity.json
new file mode 100644
index 000000000..671ce686b
--- /dev/null
+++ b/cypress/fixtures/projectActivity.json
@@ -0,0 +1,3 @@
+{
+  "activity": []
+}
diff --git a/src/base/projects/Widget.svelte b/src/base/projects/Widget.svelte
index e30b7d07c..ba3a0cd3d 100644
--- a/src/base/projects/Widget.svelte
+++ b/src/base/projects/Widget.svelte
@@ -45,7 +45,7 @@
   }
   article.compact {
     min-width: 16rem;
-    height: 8rem;
+    height: 9rem;
   }
   article.compact .left {
     width: 100%;
@@ -68,9 +68,6 @@
     border-color: var(--color-secondary);
     background-color: var(--color-secondary-1);
   }
-  article:hover .activity {
-    display: none !important;
-  }
   article.project-faded:hover {
     border-color: var(--color-foreground-5);
   }
@@ -86,13 +83,11 @@
   article .stateHash {
     color: var(--color-secondary);
     font-size: var(--font-size-tiny);
+    font-family: var(--font-family-monospace);
     min-height: 2rem;
     display: flex;
     align-items: center;
   }
-  article .commit {
-    font-family: var(--font-family-monospace);
-  }
   article .id {
     display: flex;
     justify-content: space-between;
@@ -121,20 +116,27 @@
     </div>
     <div class="description">{project.description || ""}</div>
     <div class="stateHash">
-      <span class="commit">
-        <slot name="stateHash">
-          {#if project.head}
-            {#if compact}
-              {formatCommit(project.head)}
-            {:else}
-              {project.head}
-            {/if}
-          {:else}
-            <span class="txt-missing">✗ No head</span>
-          {/if}
-        </slot>
-      </span>
+      {#if project.head}
+        {#if compact}
+          {formatCommit(project.head)}
+        {:else}
+          {project.head}
+        {/if}
+      {:else}
+        <span class="txt-missing">✗ No head</span>
+      {/if}
     </div>
+    {#if compact}
+      {#await loadCommits() then points}
+        <div class="activity">
+          <Diagram
+            {points}
+            strokeWidth={3}
+            viewBoxHeight={70}
+            viewBoxWidth={600} />
+        </div>
+      {/await}
+    {/if}
   </div>
 
   {#if !compact}