213a8d7 Add verified badge popup — radicle-explorer

modified cypress/e2e/project.spec.ts

@@ -139,12 +139,15 @@ describe("Project view", () => {

         cy.wrap($el).each((commit, commitIndex) => {
           expect(Cypress.$(commit).find(".hash").text()).to.eq(groupedCommits[index].commits[commitIndex].header.sha);
           expect(Cypress.$(commit).find(".summary").text()).to.eq(groupedCommits[index].commits[commitIndex].header.summary);
           expect(Cypress.$(commit).find(".committer").text()).to.eq(groupedCommits[index].commits[commitIndex].header.committer.name);
           expect(Cypress.$(commit).find(".committer").first().text()).to.eq(groupedCommits[index].commits[commitIndex].header.committer.name);
         });
       });
     // Checking that the initial commit has the Verified badge
     cy.get(".badge").last().should("have.text", "Verified");
     cy.get(".verified-popup-body").should("have.text", "This commit was signed\n            with the committer's radicle key.");
     cy.get(".verified-popup-peer").should("have.text", "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue");
     cy.get(".verified-popup .verified-committer").should("have.text", "dabit3");
     cy.get(".commit").last().click();
   });

@@ -183,3 +186,4 @@ describe("Project view", () => {

     cy.get("div.stat.patch-count").should("have.class", "active");
   });
 });

modified public/index.css

@@ -329,7 +329,7 @@ label.input {

 	background-color: var(--color-negative);
 }
 .dropdown {
 .dropdown, .popup {
 	background-color: var(--color-foreground-background);
 	margin-top: 0.5rem;
 	position: absolute;

@@ -449,6 +449,9 @@ span.small, .text-xsmall {

 	text-overflow: ellipsis;
 	overflow-x: hidden;
 }
 .text-faded {
 	color: var(--color-foreground-faded);
 }
 .notice {
 	font-size: 0.875rem;

added src/Popup.svelte

@@ -0,0 +1,16 @@

 <script lang="ts"></script>
 <style>
   .popup {
     color: var(--color-foreground);
     width: 14rem;
     left: -1rem;
     z-index: 99;
   }
   @media (max-width: 720px) {}
 </style>
 <div class="popup">
   <slot />
 </div>

modified src/base/projects/Commit/CommitAuthorship.svelte

@@ -3,6 +3,8 @@

   import { formatTimestamp, gravatarURL } from "@app/utils";
   export let commit: CommitMetadata;
   export let showTime = true;
   export let showAuthor = true;
 </script>
 <style>

@@ -34,8 +36,8 @@

 </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}
     <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}

@@ -46,8 +48,11 @@

       <span>&nbsp;committed</span>
     {/if}
   {:else}
     <span class="desktop-inline author">{commit.header.author.name}</span>
     <span>&nbsp;authored&nbsp;</span>
     {#if showAuthor}
       <img class="avatar" alt="avatar" src="{gravatarURL(commit.header.author.email)}" />
       <span class="desktop-inline author">{commit.header.author.name}</span>
       <span>&nbsp;authored&nbsp;</span>
     {/if}
     <img class="avatar" alt="avatar" src="{gravatarURL(commit.header.committer.email)}" />
     {#if commit.context?.committer}
       <span class="bold committer verified-committer">

@@ -61,6 +66,8 @@

       <span>&nbsp;committed</span>
     {/if}
   {/if}
   <span>&nbsp;</span>
   <span class="desktop-inline text-xsmall time">{formatTimestamp(commit.header.committerTime)}</span>
   {#if showTime}
     <span>&nbsp;</span>
     <span class="desktop-inline text-xsmall time">{formatTimestamp(commit.header.committerTime)}</span>
   {/if}
 </span>

modified src/base/projects/Commit/CommitTeaser.svelte

@@ -5,6 +5,7 @@

   import Icon from "@app/Icon.svelte";
   import CommitAuthorship from "./CommitAuthorship.svelte";
   import CommitVerifiedBadge from "./CommitVerifiedBadge.svelte";
   export let commit: CommitMetadata;

@@ -57,9 +58,6 @@

     text-overflow: ellipsis;
     padding-right: 1rem;
   }
   .badge {
     margin: 0;
   }
   .browse {
     display: flex;
     z-index: 10;

@@ -74,7 +72,7 @@

     .column-left {
       overflow: hidden;
     }
     .badge, .browse {
     .browse {
       display: none !important;
     }
     .summary {

@@ -96,9 +94,7 @@

     <CommitAuthorship {commit} />
   </div>
   <div class="column-right">
     {#if commit.context.committer}
       <span class="badge tertiary">Verified</span>
     {/if}
     <CommitVerifiedBadge {commit} />
     <span class="secondary hash">{formatCommit(commit.header.sha1)}</span>
     <div class="browse" on:click|stopPropagation={() => browseCommit(commit.header.sha1)}>
       <Icon name="browse" width={17} inline fill />

added src/base/projects/Commit/CommitVerifiedBadge.svelte

@@ -0,0 +1,69 @@

 <script lang="ts">
   import type { CommitMetadata } from "@app/commit";
   import Popup from "@app/Popup.svelte";
   import CommitAuthorship from "./CommitAuthorship.svelte";
   export let commit: CommitMetadata;
 </script>
 <style>
   .badge {
     margin: 0;
   }
   .badge:hover .verified-popup {
     display: block;
   }
   .verified-popup {
     display: none;
     position: absolute;
   }
   .verified-popup-header {
     display: flex;
     padding: 1rem 0.75rem;
   }
   .verified-popup-highlight {
     color: var(--color-tertiary);
   }
   .verified-popup-committer {
     border-top: 1px dashed var(--color-foreground-subtle);
     padding: 0.75rem;
   }
   .verified-popup-checkmark {
     margin-right: 0.5rem;
   }
   .verified-popup-peer {
     padding-top: 0.5rem;
     word-break: break-all;
   }
   @media (max-width: 720px) {
     .badge {
       display: none !important;
     }
   }
 </style>
 {#if commit.context.committer}
   <span class="badge tertiary">
     Verified
     <div class="verified-popup">
       <Popup>
         <div class="verified-popup-header">
           <div class="verified-popup-checkmark verified-popup-highlight">
             ✔
           </div>
           <div class="verified-popup-body">
             This commit was <span class="verified-popup-highlight">signed</span>
             with the committer's radicle key.</div>
         </div>
         <div class="verified-popup-committer">
           <CommitAuthorship {commit} showAuthor={false} showTime={false} />
           <div class="verified-popup-peer">
             <span class="text-faded">{commit.context.committer?.peer.id}</span>
           </div>
         </div>
       </Popup>
     </div>
   </span>
 {/if}

modified tsconfig.json

@@ -27,7 +27,7 @@

     "skipLibCheck": true,
     "paths": {
       "@public/*": ["./public/*"],
       "@app/*": ["./src/*"],
       "@app/*": ["./src/*"]
     }
   },
   "noEmit": true