src/components/CompactCommitAuthorship.svelte — radicle-desktop

rad:z4D5UCArafTzTQpDZNQRuqswh3ury

Radicle desktop app

.. AddRepoButton.svelte AnnounceSwitch.svelte AppSidebar.svelte AssigneeInput.svelte BadgeCounterSwitch.svelte Button.svelte Changes.svelte Changeset.svelte CheckoutPatchButton.svelte CheckoutRepoButton.svelte Clipboard.svelte CobCacheWarning.svelte CobCommitTeaser.svelte CodeFontSwitch.svelte Command.svelte Comment.svelte CommentToggleInput.svelte CommitsContainer.svelte CompactCommitAuthorship.svelte ConfirmClear.svelte CopyableId.svelte Diff.svelte DiffStatBadge.svelte Discussion.svelte DropdownList.svelte DropdownListItem.svelte EditableTitle.svelte ExtendedTextarea.svelte ExternalLink.svelte FileBlock.svelte FileDiff.svelte FileTreeFile.svelte FileTreeFolder.svelte FontSizeSwitch.svelte FullscreenModalPortal.svelte FullWindowError.svelte FuzzySearch.svelte HoverPopover.svelte Icon.svelte Id.svelte IdentityButton.svelte InboxList.svelte InfiniteScrollSentinel.svelte InlineTitle.svelte IssueStateButton.svelte IssueTeaser.svelte IssueTimeline.svelte JobCob.svelte Label.svelte LabelInput.svelte Markdown.svelte NewPatchButton.svelte NodeId.svelte NodeStatusButton.svelte NotificationsByRepo.svelte NotificationTeaser.svelte PatchMetadata.svelte PatchStateButton.svelte PatchTeaser.svelte PatchTimeline.svelte Path.svelte Popover.svelte PreviewSwitch.svelte RadicleWordmark.svelte Reactions.svelte ReactionSelector.svelte RepoAvatar.svelte RepoHeader.svelte Review.svelte Revision.svelte RevisionBadges.svelte RevisionReviews.svelte Revisions.svelte ScrollArea.svelte SidebarRepoList.svelte Spinner.svelte Textarea.svelte TextInput.svelte ThemeSwitch.svelte Thread.svelte Topbar.svelte Tree.svelte UpdateSwitch.svelte UserAvatar.svelte VerdictBadge.svelte VerdictButton.svelte VisibilityBadge.svelte

<script lang="ts">
  import type { Commit } from "@bindings/repo/Commit";
  import type { Snippet } from "svelte";

  import * as utils from "@app/lib/utils";

  import HoverPopover from "@app/components/HoverPopover.svelte";

  interface Props {
    children: Snippet;
    commit: Commit;
  }

  const { children, commit }: Props = $props();
</script>

<style>
  .authorship {
    display: flex;
    font: var(--txt-body-m-regular);
    column-gap: 0.5rem;
    align-items: center;
    white-space: nowrap;
  }
  .person {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.5rem;
    font: var(--txt-code-regular);
  }
  .label {
    color: var(--color-text-secondary);
  }
  .avatar {
    width: 1rem;
    height: 1rem;
  }
</style>

<div class="authorship">
  <HoverPopover placement="top-start">
    {#snippet toggle()}
      <div style="display: flex;">
        {#if commit.author.email === commit.committer.email}
          <img
            class="avatar"
            alt="avatar"
            src={utils.gravatarURL(commit.committer.email)} />
        {:else}
          <img
            style:margin-right="0.25rem"
            class="avatar"
            alt="avatar"
            src={utils.gravatarURL(commit.author.email)} />
          <img
            class="avatar"
            alt="avatar"
            src={utils.gravatarURL(commit.committer.email)} />
        {/if}
      </div>
    {/snippet}

    {#snippet popover()}
      <div class="popover">
        {#if commit.author.email === commit.committer.email}
          <div class="person">
            <div class="label">Author</div>
            <img
              class="avatar"
              alt="avatar"
              src={utils.gravatarURL(commit.committer.email)} />
            {commit.author.name}
          </div>
        {:else}
          <div class="person">
            <div class="label">Author</div>
            <img
              class="avatar"
              alt="avatar"
              src={utils.gravatarURL(commit.author.email)} />
            {commit.author.name}
          </div>
          <div class="person">
            <div class="label">Committer</div>
            <img
              class="avatar"
              alt="avatar"
              src={utils.gravatarURL(commit.committer.email)} />
            {commit.committer.name}
          </div>
        {/if}
      </div>
    {/snippet}
  </HoverPopover>
  {@render children()}
  <div title={utils.absoluteTimestamp(commit.committer.time * 1000)}>
    {utils.formatTimestamp(commit.committer.time * 1000)}
  </div>
</div>