1  <script lang="ts">
  2    import type { CommitHeader } from "@http-client";
  3  
  4    import * as utils from "@app/lib/utils";
  5    import HoverPopover from "./HoverPopover.svelte";
  6  
  7    export let commit: CommitHeader;
  8  </script>
  9  
 10  <style>
 11    .authorship {
 12      display: flex;
 13      font-size: var(--font-size-small);
 14      column-gap: 0.5rem;
 15      align-items: center;
 16      white-space: nowrap;
 17    }
 18    .person {
 19      display: flex;
 20      align-items: center;
 21      flex-wrap: nowrap;
 22      white-space: nowrap;
 23      gap: 0.5rem;
 24      font-family: var(--font-family-monospace);
 25      font-weight: var(--font-weight-semibold);
 26    }
 27    .label {
 28      font-family: var(--font-family-sans-serif);
 29      font-weight: var(--font-weight-regular);
 30      color: var(--color-foreground-dim);
 31    }
 32    .avatar {
 33      width: 1rem;
 34      height: 1rem;
 35      border-radius: var(--border-radius-round);
 36    }
 37  </style>
 38  
 39  <div class="authorship">
 40    <HoverPopover
 41      stylePopoverPositionLeft="-8rem"
 42      stylePopoverPositionBottom="1.5rem">
 43      <div slot="toggle" style="display: flex;">
 44        {#if commit.author.email === commit.committer.email}
 45          <div class="person">
 46            <img
 47              class="avatar"
 48              alt="avatar"
 49              src={utils.gravatarURL(commit.committer.email)} />
 50          </div>
 51        {:else}
 52          <div class="person">
 53            <img
 54              class="avatar"
 55              alt="avatar"
 56              src={utils.gravatarURL(commit.author.email)} />
 57          </div>
 58          <div class="person">
 59            <img
 60              class="avatar"
 61              alt="avatar"
 62              src={utils.gravatarURL(commit.committer.email)} />
 63          </div>
 64        {/if}
 65      </div>
 66  
 67      <div slot="popover" class="popover">
 68        {#if commit.author.email === commit.committer.email}
 69          <div class="person">
 70            <div class="label">Author</div>
 71            <img
 72              class="avatar"
 73              alt="avatar"
 74              src={utils.gravatarURL(commit.committer.email)} />
 75            {commit.author.name}
 76          </div>
 77        {:else}
 78          <div class="person">
 79            <div class="label">Author</div>
 80            <img
 81              class="avatar"
 82              alt="avatar"
 83              src={utils.gravatarURL(commit.author.email)} />
 84            {commit.author.name}
 85          </div>
 86          <div class="person">
 87            <div class="label">Committer</div>
 88            <img
 89              class="avatar"
 90              alt="avatar"
 91              src={utils.gravatarURL(commit.committer.email)} />
 92            {commit.committer.name}
 93          </div>
 94        {/if}
 95      </div>
 96    </HoverPopover>
 97    <slot />
 98    <div title={utils.absoluteTimestamp(commit.committer.time)}>
 99      {utils.formatTimestamp(commit.committer.time)}
100    </div>
101  </div>