feat(RepoPage): add maintainer profile name in ui

add ui component states and test vectors for loading, displayName only
and no name or displayName found

wrapper for fetching user profile to follow

__snapshots__/repo-details.test.js.snap

@@ -365,6 +365,164 @@ exports[`Repo/Details No Tags test 1`] = `
 </div>
 `;
 
+exports[`Repo/Details One Maintainer's Profile Has No displayName or Name test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    short description
+  </p>
+  <div>
+    <div class="badge badge-secondary mr-2">
+      svelte
+    </div>
+    <div class="badge badge-secondary mr-2">
+      nostr
+    </div>
+    <div class="badge badge-secondary mr-2">
+      code-collaboration
+    </div>
+    <div class="badge badge-secondary mr-2">
+      git
+    </div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-neutral block my-2">
+      cannot find name
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details One Maintainer's Profile Not Loaded test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    short description
+  </p>
+  <div>
+    <div class="badge badge-secondary mr-2">
+      svelte
+    </div>
+    <div class="badge badge-secondary mr-2">
+      nostr
+    </div>
+    <div class="badge badge-secondary mr-2">
+      code-collaboration
+    </div>
+    <div class="badge badge-secondary mr-2">
+      git
+    </div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge skeleton my-2 w-40 block">
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    short description
+  </p>
+  <div>
+    <div class="badge badge-secondary mr-2">
+      svelte
+    </div>
+    <div class="badge badge-secondary mr-2">
+      nostr
+    </div>
+    <div class="badge badge-secondary mr-2">
+      code-collaboration
+    </div>
+    <div class="badge badge-secondary mr-2">
+      git
+    </div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Repo/Details Short Details test 1`] = `
 <div class="max-w-md prose">
   <h4>

src/lib/components/Repo.vectors.ts

@@ -1,5 +1,6 @@
 import type { Args as SummaryCardArgs } from "./RepoSummaryCard.svelte";
 import type { Args as DetailsArgs } from "./RepoDetails.svelte";
+import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
 
 export let RepoSummaryCardArgsVectors = {
     Short: {
@@ -29,9 +30,9 @@ let base: DetailsArgs = {
         "relayable.org",
     ],
     maintainers: [
-        "carole",
+        { name: "carole" } as NDKUserProfile,
-        "bob",
+        { name: "bob" } as NDKUserProfile,
-        "steve",
+        { name: "steve" } as NDKUserProfile,
     ],
 };
 
@@ -52,6 +53,40 @@ export let RepoDetailsArgsVectors = {
     NoNameOrDescription: { ...base, name: "", description: "" } as DetailsArgs,
     NoDescription: { ...base, description: "" } as DetailsArgs,
     NoTags: { ...base, tags: [] } as DetailsArgs,
+    MaintainersOneProfileNotLoaded: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            "pubkey",
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
+    MaintainersOneProfileDisplayNameWithoutName: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            { displayName: "bob" } as NDKUserProfile,
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
+    MaintainersOneProfileNameAndDisplayNamePresent: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            {
+                name: "bob", displayName: "shouldnt display"
+            } as NDKUserProfile,
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
+    MaintainersOneProfileNoNameOrDisplayNameBeingPresent: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            {} as NDKUserProfile,
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
     NoMaintainers: { ...base, maintainers: [] } as DetailsArgs,
     NoRelays: { ...base, relays: [] } as DetailsArgs,
     NoMaintainersOrRelays: { ...base, maintainers: [], relays: [] } as DetailsArgs,

src/lib/components/RepoDetails.stories.svelte

@@ -29,6 +29,21 @@
 
 <Story name="No Maintainers" args={vectors.NoMaintainers} />
 
+<Story
+    name="One Maintainer's Profile Not Loaded"
+    args={vectors.MaintainersOneProfileNotLoaded}
+/>
+
+<Story
+    name="One Maintainer's Profile Only Has displayName But No Name"
+    args={vectors.MaintainersOneProfileDisplayNameWithoutName}
+/>
+
+<Story
+    name="One Maintainer's Profile Has No displayName or Name"
+    args={vectors.MaintainersOneProfileNoNameOrDisplayNameBeingPresent}
+/>
+
 <Story name="No Relays" args={vectors.NoRelays} />
 
 <Story name="No Maintainers or Relays" args={vectors.NoMaintainersOrRelays} />

src/lib/components/RepoDetails.svelte

@@ -1,11 +1,13 @@
 <script lang="ts" context="module">
+    import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+
     export interface Args {
         repo_id: string;
         name: string;
         description: string;
         git_server: string;
         tags: string[];
-        maintainers: string[];
+        maintainers: (string | NDKUserProfile)[];
         relays: string[];
         loading?: boolean;
     }
@@ -77,7 +79,21 @@
         {:else}
             <h4>maintainers</h4>
             {#each maintainers as maintainer}
-                <div class="badge badge-accent block my-2">{maintainer}</div>
+                {#if typeof maintainer == "string"}
+                    <div class="badge skeleton my-2 w-40 block"></div>
+                {:else if typeof maintainer.name !== "undefined"}
+                    <div class="badge badge-accent block my-2">
+                        {maintainer.name}
+                    </div>
+                {:else if typeof maintainer.displayName !== "undefined"}
+                    <div class="badge badge-accent block my-2">
+                        {maintainer.displayName}
+                    </div>
+                {:else}
+                    <div class="badge badge-neutral block my-2">
+                        cannot find name
+                    </div>
+                {/if}
             {/each}
         {/if}
     </div>