Add alias to PeerSelector

Signed-off-by: xphoniex <dj.2dixx@gmail.com>

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>;

src/components/Dropdown.svelte

@@ -2,6 +2,7 @@
   export interface Item<T> {
     title: string;
     value: T;
+    alias?: T;
     badge: string | null;
   }
 </script>

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}