2b21390 Add `alias` to `PeerSelector` — radicle-explorer

Radicle web interface

Add `alias` to `PeerSelector`

xphoniex committed 3 years ago

commit 2b21390540a91eb93f9d13d3e204c86952d45e2e
parent 26944d53340a69c93cb300a88e4bf0afff882e79

3 files changed +16 -1

modified httpd-client/lib/project.ts

@@ -141,12 +141,14 @@ const treeSchema = strictObject({

 export interface Remote {
   id: string;
   alias?: string;
   heads: Record<string, string>;
   delegate: boolean;
 }
 const remoteSchema = strictObject({
   id: string(),
   alias: string().optional(),
   heads: record(string(), string()),
   delegate: boolean(),
 }) satisfies ZodSchema<Remote>;

modified src/components/Dropdown.svelte

@@ -2,6 +2,7 @@

   export interface Item<T> {
     title: string;
     value: T;
     alias?: T;
     badge: string | null;
   }
 </script>

modified src/views/projects/PeerSelector.svelte

@@ -32,6 +32,7 @@

     items = peers.map(p => {
       return {
         value: p.id,
         alias: p.alias,
         title: createTitle(p),
         badge: p.delegate ? "delegate" : null,
       };

@@ -81,11 +82,13 @@

     background: var(--color-foreground-1);
     gap: 0.5rem;
   }
   .avatar-id {
     display: flex;
     gap: 0.25rem;
   }
   .alias {
     color: var(--color-secondary-6);
   }
 </style>
 <Floating>

@@ -101,6 +104,9 @@

              did:key: and the nid due to a newline. -->
           <!-- prettier-ignore -->
           <span><span style:color="var(--color-secondary-5)">did:key:</span>{truncateId(meta.id)}</span>
           {#if meta.alias}
             <span class="alias">({meta.alias})</span>
           {/if}
         </span>
         {#if meta.delegate}
           <Badge variant="primary">delegate</Badge>

@@ -130,10 +136,16 @@

               <div class="layout-desktop">
                 <!-- prettier-ignore -->
                 <span><span class="prefix">did:key:</span>{item.value}</span>
                 {#if item.alias}
                   <span class="alias">({item.alias})</span>
                 {/if}
               </div>
               <div class="layout-mobile">
                 <!-- prettier-ignore -->
                 <span><span class="prefix">did:key:</span>{truncateId(item.value)}</span>
                 {#if item.alias}
                   <span class="alias">({item.alias})</span>
                 {/if}
               </div>
             </span>
             {#if item.badge}