Improve commit history and detail view

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/base/projects/Commit.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import * as proj from "@app/project";
-  import Changeset from "@app/base/projects/SourceBrowser/Changeset.svelte";
-  import { formatCommitTime } from "@app/commit";
   import { formatCommit } from "@app/utils";
 
+  import Changeset from "@app/base/projects/SourceBrowser/Changeset.svelte";
+  import CommitAuthorship from "@app/base/projects/Commit/CommitAuthorship.svelte";
+
   export let project: proj.Project;
   export let commit: string;
 
@@ -19,7 +20,6 @@
 <style>
   .commit {
     padding: 0 2rem 0 8rem;
-    font-size: 0.875rem;
   }
   h3 {
     margin: 0;
@@ -38,21 +38,19 @@
   .description {
     margin: 0.5rem 0 1rem 0;
   }
-  .meta {
-    color: var(--color-foreground-80);
-  }
-  .email {
-    font-family: var(--font-family-monospace);
-    font-size: 0.875rem;
-  }
   .sha1 {
     color: var(--color-foreground-80);
     font-size: 0.875rem;
   }
-  .time {
-    margin-left: 0.25rem;
-    color: var(--color-foreground-faded);
+  .badge {
+    margin: 0;
   }
+  .authorship {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   @media (max-width: 960px) {
     .commit {
       padding-left: 2rem;
@@ -68,19 +66,16 @@
         <div class="desktop font-mono sha1">
           <span>{commit.header.sha1}</span>
         </div>
-        <div class="mobile font-mono sha1">
+        <div class="mobile font-mono sha1 text-small">
           {formatCommit(commit.header.sha1)}
         </div>
       </div>
-      <pre class="description">{commit.header.description}</pre>
-      <div class="meta">
-        <span>Committed by <strong>{commit.header.committer.name}</strong></span>
-        <span class="font-mono email desktop-inline">&lt;{commit.header.committer.email}&gt; </span>
-        <span class="time desktop-inline">{formatCommitTime(commit.header.committerTime)}</span>
-      </div>
-      <div class="meta">
-        <span>Authored by <strong>{commit.header.author.name}</strong> </span>
-        <span class="font-mono email desktop-inline">&lt;{commit.header.author.email}&gt;</span>
+      <pre class="description text-small">{commit.header.description}</pre>
+      <div class="authorship">
+        <CommitAuthorship {commit} />
+        {#if commit.context?.committer}
+          <span class="badge tertiary">Verified</span>
+        {/if}
       </div>
     </header>
     <Changeset stats={commit.stats} diff={commit.diff} on:browse={onBrowse} />

src/base/projects/Commit/CommitAuthorship.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { CommitMetadata } from "@app/commit";
+  import { gravatarURL } from "@app/utils";
+  import { formatCommitTime } from "@app/commit";
+
+  export let commit: CommitMetadata;
+</script>
+
+<style>
+  .authorship {
+    display: flex;
+    align-items: center;
+    color: var(--color-foreground-faded);
+    padding: 0.125rem 0;
+  }
+  .authorship .author, .authorship .committer {
+    color: var(--color-foreground);
+    white-space: nowrap;
+  }
+  .authorship .avatar {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.5rem;
+    margin-right: 0.25rem;
+  }
+  .authorship .avatar:not(:first-child) {
+    margin-left: 0.125rem;
+  }
+</style>
+
+<span class="authorship text-xsmall">
+  <img class="avatar" alt="avatar" src="{gravatarURL(commit.header.author.email)}" />
+  {#if commit.header.author.email === commit.header.committer.email}
+    {#if commit.context?.committer}
+      <span class="bold committer verified-committer">
+        {commit.context?.committer.peer.person.name}
+      </span>
+      <span>&nbsp;committed</span>
+    {:else}
+      <span class="desktop-inline committer">{commit.header.committer.name}</span>
+      <span>&nbsp;committed</span>
+    {/if}
+  {:else}
+    <span class="desktop-inline author">{commit.header.author.name}</span>
+    <span>&nbsp;authored&nbsp;</span>
+    <img class="avatar" alt="avatar" src="{gravatarURL(commit.header.committer.email)}" />
+    {#if commit.context?.committer}
+      <span class="bold committer verified-committer">
+        {commit.context?.committer.peer.person.name}
+      </span>
+      <span>&nbsp;committed</span>
+    {:else}
+      <span class="desktop-inline committer">
+        {commit.header.committer.name}
+      </span>
+      <span>&nbsp;committed</span>
+    {/if}
+  {/if}
+  <span>&nbsp;at&nbsp;</span>
+  <span class="desktop-inline text-xsmall time">{formatCommitTime(commit.header.committerTime)}</span>
+</span>

src/base/projects/Commit/CommitTeaser.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
-  import Icon from "@app/Icon.svelte";
   import type { CommitMetadata } from "@app/commit";
-  import type { Project } from "@app/project";
   import { formatCommit } from "@app/utils";
   import { createEventDispatcher } from "svelte";
-  import { ProjectContent } from "@app/project";
-  import { formatCommitTime } from "@app/commit";
+
+  import Icon from "@app/Icon.svelte";
+  import CommitAuthorship from "./CommitAuthorship.svelte";
 
   export let commit: CommitMetadata;
-  export let project: Project;
-
-  const navigateHistory = (revision: string, content?: ProjectContent) => {
-    project.navigateTo({ content, revision, path: null });
-  };
 
   const dispatch = createEventDispatcher();
 
@@ -24,23 +18,38 @@
 <style>
   .hash {
     font-family: var(--font-family-monospace);
-    padding: 0 1rem 0 0;
   }
-  .author {
-    margin-right: 0.5rem;
-    white-space: nowrap;
+  .commit-teaser {
+    background-color: var(--color-foreground-background);
+    padding: 0.5rem 0rem;
   }
-  .commit {
+  .commit-teaser:hover {
+    background-color: var(--color-foreground-background-lighter);
+  }
+  .commit-teaser:first-child {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+  .commit-teaser:last-child {
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+  .commit-teaser {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.5rem 1rem;
   }
-  .commit .right {
+
+  .column-left {
+    padding: 0 1.5rem;
+  }
+  .column-center {
+    flex: min-content;
+  }
+  .commit-teaser .column-right {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    gap: 0.5rem;
+    padding-right: 1.5rem;
   }
   .summary {
     overflow: hidden;
@@ -48,16 +57,15 @@
     text-overflow: ellipsis;
     padding-right: 1rem;
   }
-  .time {
-    margin-right: 0.5rem;
-    white-space: nowrap;
+  .badge {
+    margin: 0 1rem 0 0;
   }
 
   @media (max-width: 960px) {
     .hash {
       padding-right: 0.5rem;
     }
-    .time, .author, .hash {
+    .hash {
       font-size: 0.75rem;
     }
     .summary {
@@ -69,17 +77,22 @@
   }
 </style>
 
-<div class="commit" on:click={() => navigateHistory(commit.header.sha1, ProjectContent.Commit)}>
-  <div class="summary">
+<div class="commit-teaser">
+  <div class="column-left">
     <span class="secondary hash">{formatCommit(commit.header.sha1)}</span>
-    <span class="summary">{commit.header.summary}</span>
   </div>
-  <div class="right">
+  <div class="column-center">
+    <div class="header">
+      <div class="summary">
+        {commit.header.summary}
+      </div>
+    </div>
+    <CommitAuthorship {commit} />
+  </div>
+  <div class="column-right">
     {#if commit.context.committer}
-      <span class="badge primary">Verified</span>
+      <span class="badge tertiary">Verified</span>
     {/if}
-    <span class="desktop-inline bold author">{commit.header.committer.name}</span>
-    <span class="desktop-inline font-mono text-small time">{formatCommitTime(commit.header.committerTime)}</span>
     <Icon name="browse" width={17} inline fill on:click={() => browseCommit(commit.header.sha1)} />
   </div>
 </div>

src/base/projects/History.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import CommitTeaser from "./Commit/CommitTeaser.svelte";
-  import { Project } from "@app/project";
+  import { Project, ProjectContent } from "@app/project";
   import Loading from "@app/Loading.svelte";
   import { groupCommitHistory, GroupedCommitsHistory } from "@app/commit";
   import Message from "@app/Message.svelte";
@@ -8,6 +8,10 @@
   export let project: Project;
   export let commit: string;
 
+  const navigateHistory = (revision: string, content?: ProjectContent) => {
+    project.navigateTo({ content, revision, path: null });
+  };
+
   const fetchCommits = async (parentCommit: string): Promise<GroupedCommitsHistory> => {
     const commitsQuery = await Project.getCommits(project.urn, project.seed.api, {
       parent: parentCommit, verified: true
@@ -25,24 +29,28 @@
     color: var(--color-foreground-faded);
   }
   .commit-group-headers {
-    border-radius: 0.25rem;
     margin-bottom: 2rem;
-    background: var(--color-foreground-background);
   }
-  .commit-group-headers {
+
+  .commit {
+    background-color: var(--color-foreground-background);
+  }
+  .commit:not(:last-child) {
+    border-bottom: 1px dashed var(--color-background);
+  }
+  .commit:hover {
+    background-color: var(--color-foreground-background-lighter);
     cursor: pointer;
   }
-  .commit-group-headers:first-child {
+  .commit:first-child {
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
   }
-  .commit-group-headers:last-child {
+  .commit:last-child {
     border-bottom-left-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
   }
-  .commit-group-headers {
-    background: var(--color-foreground-background-lighter);
-  }
+
   @media (max-width: 960px) {
     .history {
       padding-left: 2rem;
@@ -61,7 +69,9 @@
         </header>
         <div class="commit-group-headers">
           {#each group.commits as commit (commit.header.sha1)}
-            <CommitTeaser {project} {commit} />
+            <div class="commit" on:click={() => navigateHistory(commit.header.sha1, ProjectContent.Commit)}>
+              <CommitTeaser {commit} />
+            </div>
           {/each}
         </div>
       </div>