Show RID on project cards — radicle-explorer

rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5

Radicle web interface

Show RID on project cards

Merged rudolfs opened 2 years ago

5 files changed +37 -18 57c759c6 → ad1fdca4

modified src/components/ProjectCard.svelte

@@ -1,5 +1,10 @@

 <script lang="ts">
   import { formatTimestamp, twemoji } from "@app/lib/utils";
   import {
     absoluteTimestamp,
     formatTimestamp,
     formatRepositoryId,
     twemoji,
   } from "@app/lib/utils";
   import ActivityDiagram from "@app/components/ActivityDiagram.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";

@@ -17,9 +22,6 @@

   $: project = projectInfo.project;
   $: baseUrl = projectInfo.baseUrl;
   $: isPrivate = project.visibility?.type === "private";
   $: lastUpdated = formatTimestamp(
     projectInfo.lastCommit.commit.committer.time,
   );
 </script>
 <style>

@@ -175,13 +177,28 @@

       </div>
       <p class="txt-small" use:twemoji>{project.description}</p>
     </div>
     <div class="stats-row txt-tiny" style:color="var(--color-foreground-dim)">
       <IconSmall name="issue" />
       {project.issues.open} ·
       <IconSmall name="patch" />
       <span style:overflow="hidden" style:text-overflow="ellipsis">
         {project.patches.open} · Updated {lastUpdated}
       </span>
     <div>
       <div class="stats-row txt-tiny" style:color="var(--color-foreground-dim)">
         <IconSmall name="issue" />
         {project.issues.open} ·
         <IconSmall name="patch" />
         <span
           style:overflow="hidden"
           style:text-overflow="ellipsis"
           title={absoluteTimestamp(
             projectInfo.lastCommit.commit.committer.time,
           )}>
           {project.patches.open} · Updated {formatTimestamp(
             projectInfo.lastCommit.commit.committer.time,
           )}
         </span>
         <span
           title={project.id}
           style:color="var(--color-foreground-emphasized)"
           style:margin-left="auto">
           {formatRepositoryId(project.id)}
         </span>
       </div>
     </div>
   </div>
 </Link>

modified src/lib/utils.ts

@@ -163,7 +163,7 @@ export const formatTimestamp = (

   const elapsed = current - timestamp;
   if (elapsed > units["year"]) {
     return new Date(timestamp).toUTCString(); // If it's more than a year we return early showing a Datetime string
     return "more than a year ago";
   } else if (elapsed < 0) {
     return "now"; // If elapsed is a negative number we are dealing with an item from the future, and we return "now"
   }

modified src/views/home/Index.svelte

@@ -85,7 +85,7 @@

 <style>
   .wrapper {
     padding: 3rem;
     max-width: 72rem;
     max-width: 78rem;
     margin: 0 auto;
     width: 100%;
     display: flex;

@@ -110,7 +110,7 @@

   }
   .project-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
     gap: 1rem;
   }

modified src/views/nodes/View.svelte

@@ -49,7 +49,7 @@

   }
   .wrapper {
     padding: 3rem;
     max-width: 72rem;
     max-width: 78rem;
     margin: 0 auto;
     width: 100%;
     display: flex;

@@ -69,6 +69,8 @@

     gap: 0.5rem;
     margin-bottom: 1rem;
     width: 100%;
     white-space: nowrap;
     flex-wrap: wrap;
   }
   .pinned {
     display: flex;

@@ -92,7 +94,7 @@

   .project-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
     gap: 1rem;
   }
   .popover {

modified tests/unit/utils.test.ts

@@ -252,12 +252,12 @@ describe("Date Manipulation", () => {

     {
       from: new Date("2022-01-01 12:00:00"),
       to: new Date("2023-04-02 12:00:00"),
       expected: "Sat, 01 Jan 2022 12:00:00 GMT",
       expected: "more than a year ago",
     },
     {
       from: new Date("2022-03-05 12:00:00"),
       to: new Date("2026-04-02 12:00:00"),
       expected: "Sat, 05 Mar 2022 12:00:00 GMT",
       expected: "more than a year ago",
     },
   ])("formatTimestamp expected: $expected", ({ from, to, expected }) => {
     expect(utils.formatTimestamp(from.getTime() / 1000, to.getTime())).toEqual(