94d0ec5 Improve nodeId formatting on various views — radicle-explorer

modified src/App/Header/SearchResultsModal.svelte

@@ -4,7 +4,7 @@

   import * as modal from "@app/lib/modal";
   import Link from "@app/components/Link.svelte";
   import Modal from "@app/components/Modal.svelte";
   import { formatRepositoryId, getSeedEmoji } from "@app/lib/utils";
   import { formatRepositoryId } from "@app/lib/utils";
   export let query: string;
   export let results: ProjectResult[];

@@ -44,9 +44,7 @@

                 },
               }}>
               <span title={project.seed.host}>
                 <span>
                   {getSeedEmoji(project.seed.host)}&nbsp;{project.info.name}
                 </span>
                 <span>{project.info.name}</span>
                 <span class="id">
                   &nbsp;{formatRepositoryId(project.info.id)}
                 </span>

modified src/config.json

@@ -6,8 +6,7 @@

     "defaultNodePort": 8776,
     "pinned": [
       {
         "host": "seed.radicle.xyz",
         "emoji": "🌱"
         "host": "seed.radicle.xyz"
       }
     ]
   },

modified src/lib/config.ts

@@ -6,7 +6,7 @@ export interface Config {

     defaultHttpdPort: number;
     defaultNodePort: number;
     defaultHttpdScheme: string;
     pinned: { host: string; emoji: string }[];
     pinned: { host: string }[];
   };
   projects: {
     pinned: {

modified src/lib/project.ts

@@ -61,7 +61,7 @@ export interface Entry {

 export interface Blob {
   binary: boolean;
   content: string;
   content?: string;
   path: string;
   name: string;
   lastCommit: CommitHeader;

modified src/lib/seed.ts

@@ -3,7 +3,6 @@ import type { Host } from "@app/lib/api";

 import * as proj from "@app/lib/project";
 import { Request } from "@app/lib/api";
 import { assert } from "@app/lib/error";
 import { getSeedEmoji } from "@app/lib/utils";
 import { config } from "@app/lib/config";
 export interface Stats {

@@ -16,13 +15,10 @@ export class Seed {

   node: Host & { id: string };
   version?: string;
   emoji: string;
   constructor(seed: { host: Host; id: string; version?: string }) {
     assert(/^[a-zA-Z0-9]+$/.test(seed.id), `invalid seed id ${seed.id}`);
     this.emoji = getSeedEmoji(seed.host.host);
     this.addr = seed.host;
     this.node = {
       host: seed.host.host,

modified src/lib/utils.ts

@@ -90,7 +90,7 @@ export function formatNodeId(id: string): string {

   const parsedId = parseNodeId(id);
   if (parsedId) {
     return truncateId(parsedId.prefix, parsedId.pubkey);
     return `${parsedId.prefix}${truncateId(parsedId.pubkey)}`;
   }
   return id;

@@ -100,14 +100,14 @@ export function formatRepositoryId(id: string): string {

   const parsedId = parseRepositoryId(id);
   if (parsedId) {
     return truncateId(parsedId.prefix, parsedId.pubkey);
     return `${parsedId.prefix}${truncateId(parsedId.pubkey)}`;
   }
   return id;
 }
 function truncateId(prefix: string, pubkey: string): string {
   return `${prefix}${pubkey.substring(0, 6) + "…" + pubkey.slice(-6)}`;
 export function truncateId(pubkey: string): string {
   return `${pubkey.substring(0, 6) + "…" + pubkey.slice(-6)}`;
 }
 export function formatCommit(oid: string): string {

@@ -235,18 +235,6 @@ export function scrollIntoView(id: string) {

   if (lineElement) lineElement.scrollIntoView();
 }
 export function getSeedEmoji(seedHost: string): string {
   const seed = config.seeds.pinned.find(s => s.host === seedHost);
   if (seed) {
     return seed.emoji;
   } else if (isLocal(seedHost)) {
     return "🏠";
   } else {
     return "🌱";
   }
 }
 // Check whether the given path has a markdown file extension.
 export function isMarkdownPath(path: string): boolean {
   return /\.(md|mkd|markdown)$/i.test(path);

modified src/views/projects/Blob.svelte

@@ -37,6 +37,9 @@

   });
   onMount(async () => {
     if (!blob.content) {
       return;
     }
     const output = await highlight(blob.content, fileExtension);
     if (output) {
       content = lineNumbersGutter(output);

@@ -243,7 +246,7 @@

         <div use:twemoji>👀</div>
         <span class="txt-tiny">Binary content</span>
       </div>
     {:else if showMarkdown}
     {:else if showMarkdown && blob.content}
       <Readme content={blob.content} {getImage} {activeRoute} />
     {:else if content}
       <table class="code no-scrollbar">

modified src/views/projects/PeerSelector.svelte

@@ -6,13 +6,13 @@

   import Floating from "@app/components/Floating.svelte";
   import Icon from "@app/components/Icon.svelte";
   import { createEventDispatcher, onMount } from "svelte";
   import { formatNodeId } from "@app/lib/utils";
   import { formatNodeId, truncateId } from "@app/lib/utils";
   export let peer: string | null = null;
   export let peers: Peer[];
   let meta: Peer | undefined;
   // List of items to be created for the Dropdown component.
   let items: {
     key: string;
     value: string;

@@ -31,7 +31,7 @@

     meta = peers.find(p => p.id === peer);
     items = peers.map(p => {
       return {
         key: formatNodeId(p.id),
         key: `<span style="gap: 0;"><span style="color: var(--color-foreground-6);display: inline;">did:key:</span>${p.id}</span>`,
         value: p.id,
         title: createTitle(p),
         badge: p.delegate ? "delegate" : null,

@@ -84,12 +84,14 @@

       <Icon name="fork" />
       {#if meta}
         <span class="peer-id">
           {formatNodeId(meta.id)}
           <span style="display: flex;">
             <span style="color: var(--color-secondary-5);">did:key:</span>
             {truncateId(meta.id)}
           </span>
         </span>
         {#if meta.delegate}
           <Badge variant="primary">delegate</Badge>
         {/if}
         <!-- If the delegate metadata is not found -->
       {:else if peer}
         <span class="peer-id">
           {formatNodeId(peer)}

modified src/views/projects/Tree/File.svelte

@@ -51,7 +51,7 @@

   <span class="name">{name}</span>
   <div class="spinner">
     {#if loading}
       <Loading small condensed />
       <Loading noDelay small condensed />
     {/if}
   </div>
 </div>

modified src/views/projects/Tree/Folder.svelte

@@ -70,7 +70,7 @@

 <div class="container">
   {#if expanded}
     {#await tree}
       <span class="loading"><Loading small margins /></span>
       <span class="loading"><Loading noDelay small margins /></span>
     {:then tree}
       {#if tree}
         {#each tree.entries as entry (entry.path)}

modified src/views/seeds/View.svelte

@@ -4,15 +4,8 @@

   import { Project } from "@app/lib/project";
   import { Seed } from "@app/lib/seed";
   import { config } from "@app/lib/config";
   import {
     formatNodeId,
     formatSeedHost,
     twemoji,
     extractHost,
   } from "@app/lib/utils";
   import { formatSeedHost, extractHost } from "@app/lib/utils";
   import Clipboard from "@app/components/Clipboard.svelte";
   import Loading from "@app/components/Loading.svelte";
   import NotFound from "@app/components/NotFound.svelte";
   import Projects from "@app/views/seeds/View/Projects.svelte";

@@ -50,7 +43,7 @@

   }
   .fields {
     display: grid;
     grid-template-columns: 5rem 4fr 2fr;
     grid-template-columns: 5rem 4fr 0fr;
     gap: 1rem 2rem;
     margin-bottom: 2rem;
   }

@@ -63,10 +56,6 @@

     display: flex;
     align-items: center;
   }
   .seed-label {
     display: flex;
     align-items: center;
   }
   @media (max-width: 720px) {
     main {

@@ -93,7 +82,6 @@

       <span class="title txt-title">
         <span class="txt-bold">
           {hostName}
           <span class="layout-desktop-inline" use:twemoji>{seed.emoji}</span>
         </span>
       </span>
     </header>

@@ -101,19 +89,7 @@

     <div class="fields">
       <!-- Seed Address -->
       <div class="txt-highlight">Address</div>
       <SeedAddress
         {seed}
         port={seed.node.port ?? config.seeds.defaultHttpdPort} />
       <!-- Seed ID -->
       <div class="txt-highlight">Seed ID</div>
       <div class="seed-label">
         {formatNodeId(seed.id)}
         <Clipboard small text={seed.id} />
       </div>
       <div class="layout-desktop" />
       <!-- API Port -->
       <div class="txt-highlight">API Port</div>
       <div>{seed.addr.port}</div>
       <SeedAddress {seed} port={seed.node.port} />
       <div class="layout-desktop" />
       <!-- API Version -->
       <div class="txt-highlight">Version</div>

modified src/views/seeds/View/SeedAddress.svelte

@@ -2,21 +2,11 @@

   import type { Seed } from "@app/lib/seed";
   import Clipboard from "@app/components/Clipboard.svelte";
   import Link from "@app/components/Link.svelte";
   import {
     formatSeedAddress,
     formatNodeId,
     formatSeedHost,
     twemoji,
   } from "@app/lib/utils";
   import { formatSeedAddress, truncateId } from "@app/lib/utils";
   import { config } from "@app/lib/config";
   export let seed: Seed;
   export let port: number;
   export let full = false;
   const seedHost = seed.addr.port
     ? `${seed.addr.host}:${seed.addr.port}`
     : `${formatSeedHost(seed.addr.host)}`;
 </script>
 <style>

@@ -32,10 +22,6 @@

     color: var(--color-foreground-6);
     vertical-align: middle;
   }
   .seed-icon {
     width: 1rem;
     margin-right: 0.5rem;
   }
   .seed-address > * {
     vertical-align: middle;
   }

@@ -43,32 +29,10 @@

 <div class="wrapper">
   <div class="seed-address">
     <span class="seed-icon" use:twemoji>{seed.emoji}</span>
     {#if full}
       <span>
         <Link
           route={{
             resource: "seeds",
             params: { host: formatSeedHost(seedHost) },
           }}>
           <span class="txt-link">{formatNodeId(seed.id)}@{seed.host}</span>
         </Link>
       </span>
     {truncateId(seed.id)}@{seed.host}
     {#if port !== config.seeds.defaultNodePort}
       <span class="txt-faded">:{port}</span>
     {:else}
       <span>
         <Link
           route={{
             resource: "seeds",
             params: { host: seedHost },
           }}>
           <span class="txt-link">{formatSeedHost(seedHost)}</span>
         </Link>
       </span>
     {/if}
   </div>
   <Clipboard
     small
     text={full ? formatSeedAddress(seed.id, seed.host, port) : seed.host} />
   <Clipboard small text={formatSeedAddress(seed.id, seed.host, port)} />
 </div>
 <div class="layout-desktop" />

modified tests/e2e/clipboard.spec.ts

@@ -3,7 +3,6 @@ import {

   expect,
   projectFixtureUrl,
   rid,
   seedRemote,
   test,
 } from "@tests/support/fixtures.js";

@@ -79,10 +78,10 @@ test("copy to clipboard", async ({ page, browserName, context }) => {

   // Seed address.
   {
     await page.locator(".clipboard").first().click();
     await expectClipboard("0.0.0.0", page);
     await page.locator(".clipboard").last().click();
     await expectClipboard(seedRemote, page);
     await expectClipboard(
       "z6Mkk7oqY4pPxhMmGEotDYsFo97vhCj85BLY1H256HrJmjN8@0.0.0.0:8776",
       page,
     );
   }
   // Clear the system clipboard contents so developers don't wonder why there's

modified tests/e2e/project.spec.ts

@@ -258,7 +258,7 @@ test("peer and branch switching", async ({ page }) => {

     await page.getByTitle("Change peer").click();
     await page.locator(`text=${aliceRemote.substring(0, 6)}`).click();
     await expect(page.getByTitle("Change peer")).toHaveText(
       `did:key:${aliceRemote.substring(0, 6)}…${aliceRemote.slice(-6)}`,
       ` did:key: ${aliceRemote.substring(0, 6)}…${aliceRemote.slice(-6)} `,
     );
     await expect(
       page.locator(

@@ -322,7 +322,7 @@ test("peer and branch switching", async ({ page }) => {

     await page.getByTitle("Change peer").click();
     await page.locator(`text=${bobRemote.substring(0, 6)}`).click();
     await expect(page.getByTitle("Change peer")).toHaveText(
       `did:key:${bobRemote.substring(0, 6)}…${bobRemote.slice(-6)}`,
       ` did:key: ${bobRemote.substring(0, 6)}…${bobRemote.slice(-6)} `,
     );
     await expect(page.getByTitle("Change peer")).not.toHaveText("delegate");

modified tests/e2e/project/commits.spec.ts

@@ -15,7 +15,7 @@ test("peer and branch switching", async ({ page }) => {

     await page.getByTitle("Change peer").click();
     await page.locator(`text=${aliceRemote.substring(0, 6)}`).click();
     await expect(page.getByTitle("Change peer")).toHaveText(
       `did:key:${aliceRemote.substring(0, 6)}…${aliceRemote.slice(-6)}`,
       `did:key: ${aliceRemote.substring(0, 6)}…${aliceRemote.slice(-6)} `,
     );
     await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible();

@@ -63,7 +63,7 @@ test("peer and branch switching", async ({ page }) => {

     await page.getByTitle("Change peer").click();
     await page.locator(`text=${bobRemote.substring(0, 6)}`).click();
     await expect(page.getByTitle("Change peer")).toHaveText(
       `did:key:${bobRemote.substring(0, 6)}…${bobRemote.slice(-6)}`,
       `did:key: ${bobRemote.substring(0, 6)}…${bobRemote.slice(-6)} `,
     );
     await expect(page.getByText("Tuesday, December 20, 2022")).toBeVisible();

@@ -106,7 +106,7 @@ test("relative timestamps", async ({ page }) => {

   await page.getByTitle("Change peer").click();
   await page.locator(`text=${bobRemote.substring(0, 6)}`).click();
   await expect(page.getByTitle("Change peer")).toHaveText(
     `did:key:${bobRemote.substring(0, 6)}…${bobRemote.slice(-6)}`,
     `did:key: ${bobRemote.substring(0, 6)}…${bobRemote.slice(-6)} `,
   );
   const latestCommit = page.locator(".commit-teaser").first();
   await expect(latestCommit).toContainText("Bob Belcher committed now");

modified tests/e2e/seed.spec.ts

@@ -2,7 +2,6 @@ import {

   aliceMainHead,
   expect,
   rid,
   seedPort,
   seedRemote,
   seedVersion,
   test,

@@ -12,19 +11,10 @@ test("seed metadata", async ({ page }) => {

   await page.goto("/seeds/radicle.local");
   await expect(page.locator("header").getByText("radicle.local")).toBeVisible();
   await expect(
     page.locator(".title >> text=radicle.local").getByRole("img"),
   ).toHaveAttribute("alt", "🚀");
   await expect(page.getByRole("link", { name: "radicle.local" })).toBeVisible();
   await expect(page.locator(".seed-address").getByRole("img")).toHaveAttribute(
     "alt",
     "🚀",
   );
   await expect(page.locator("text=radicle.local")).toBeVisible();
   await expect(
     page.locator(`text=${seedRemote.substring(0, 6)}…${seedRemote.slice(-6)}`),
   ).toBeVisible();
   await expect(page.locator(`text=${seedPort}`)).toBeVisible();
   await expect(page.locator(`text=${seedVersion}`)).toBeVisible();
 });

modified tests/support/fixtures.ts

@@ -52,7 +52,7 @@ export const test = base.extend<{

               defaultHttpdPort: 8080,
               defaultHttpdScheme: "http",
               defaultNodePort: 8776,
               pinned: [{ host: "0.0.0.0", emoji: "🚀" }],
               pinned: [{ host: "0.0.0.0" }],
             },
             projects: { pinned: [] },
           };

@@ -134,7 +134,7 @@ export function configFixture() {

       defaultHttpdPort: 8080,
       defaultHttpdScheme: "http",
       defaultNodePort: 8776,
       pinned: [{ host: "0.0.0.0", emoji: "🚀" }],
       pinned: [{ host: "0.0.0.0" }],
     },
     projects: {
       pinned: [

@@ -155,7 +155,7 @@ export function appConfigWithFixture() {

       defaultHttpdPort: 8080,
       defaultHttpdScheme: "http",
       defaultNodePort: 8776,
       pinned: [{ host: "0.0.0.0", emoji: "🚀" }],
       pinned: [{ host: "0.0.0.0" }],
     },
     projects: {
       pinned: [