feat(RepoPage): add UserHeader

- add UserHeader UI component
- add to RepoDetails

src/lib/components/Repo.vectors.ts

@@ -1,6 +1,8 @@
 import type { Args as SummaryCardArgs } from "./RepoSummaryCard.svelte";
 import type { Args as DetailsArgs } from "./RepoDetails.svelte";
 import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+import type { User } from "./users/type";
+import { UserVectors, withName } from "./users/vectors";
 
 export let RepoSummaryCardArgsVectors = {
     Short: {
@@ -30,9 +32,9 @@ let base: DetailsArgs = {
         "relayable.org",
     ],
     maintainers: [
-        { name: "carole" } as NDKUserProfile,
+        withName(UserVectors.default, "carole"),
-        { name: "bob" } as NDKUserProfile,
+        withName(UserVectors.default, "bob"),
-        { name: "steve" } as NDKUserProfile,
+        withName(UserVectors.default, "steve"),
     ],
 };
 
@@ -55,35 +57,30 @@ export let RepoDetailsArgsVectors = {
     NoTags: { ...base, tags: [] } as DetailsArgs,
     MaintainersOneProfileNotLoaded: {
         ...base, maintainers: [
-            { name: "carole" } as NDKUserProfile,
+            { ...base.maintainers[0] },
-            "pubkey",
+            { ...UserVectors.loading },
-            { name: "steve" } as NDKUserProfile,
+            { ...base.maintainers[2] },
-
         ]
     } as DetailsArgs,
     MaintainersOneProfileDisplayNameWithoutName: {
         ...base, maintainers: [
-            { name: "carole" } as NDKUserProfile,
+            { ...base.maintainers[0] },
-            { displayName: "bob" } as NDKUserProfile,
+            { ...UserVectors.display_name_only },
-            { name: "steve" } as NDKUserProfile,
+            { ...base.maintainers[2] },
-
         ]
     } as DetailsArgs,
     MaintainersOneProfileNameAndDisplayNamePresent: {
         ...base, maintainers: [
-            { name: "carole" } as NDKUserProfile,
+            { ...base.maintainers[0] },
-            {
+            { ...UserVectors.display_name_and_name },
-                name: "bob", displayName: "shouldnt display"
+            { ...base.maintainers[2] },
-            } as NDKUserProfile,
-            { name: "steve" } as NDKUserProfile,
-
         ]
     } as DetailsArgs,
     MaintainersOneProfileNoNameOrDisplayNameBeingPresent: {
         ...base, maintainers: [
-            { name: "carole" } as NDKUserProfile,
+            { ...base.maintainers[0] },
-            {} as NDKUserProfile,
+            { ...UserVectors.no_profile },
-            { name: "steve" } as NDKUserProfile,
+            { ...base.maintainers[2] },
 
         ]
     } as DetailsArgs,

src/lib/components/RepoDetails.svelte

@@ -7,7 +7,7 @@
         description: string;
         git_server: string;
         tags: string[];
-        maintainers: (string | NDKUserProfile)[];
+        maintainers: User[];
         relays: string[];
         loading?: boolean;
     }
@@ -19,12 +19,13 @@
         tags: [],
         maintainers: [],
         relays: [],
-        loading: false,
+        loading: true,
     };
 </script>
 
 <script lang="ts">
-    import { each } from "svelte/internal";
+    import type { User } from "./users/type";
+    import UserHeader from "./users/UserHeader.svelte";
 
     export let {
         repo_id,
@@ -79,21 +80,7 @@
         {:else}
             <h4>maintainers</h4>
             {#each maintainers as maintainer}
-                {#if typeof maintainer == "string"}
+                <UserHeader user={maintainer} />
-                    <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>

src/lib/components/users/UserHeader.stories.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" context="module">
+    import type { Meta } from "@storybook/svelte";
+    import UserHeader from "$lib/components/users/UserHeader.svelte";
+    import { Story, Template } from "@storybook/addon-svelte-csf";
+    import { UserVectors as vectors } from "./vectors";
+
+    export const meta: Meta<UserHeader> = {
+        title: "Users/Header",
+        component: UserHeader,
+        tags: ["autodocs"],
+    };
+    let base = {
+        hexpubkey:
+            "3eb45c6f15752d796fa5465d0530a5a5feb79fb6f08c0a4176be9d73cc28c40d",
+        npub: "npub18669cmc4w5khjma9gews2v995hlt08ak7zxq5stkh6wh8npgcsxslt2xjn",
+    };
+</script>
+
+<Template let:args>
+    <UserHeader {...args} />
+</Template>
+
+<Story
+    name="default"
+    args={{
+        user: {
+            ...vectors.default,
+        },
+    }}
+/>
+
+<Story
+    name="no image"
+    args={{
+        user: {
+            ...vectors.no_image,
+        },
+    }}
+/>
+
+<Story name="loading" args={{ user: { ...vectors.loading } }} />
+
+<Story name="not found" args={{ user: { ...vectors.no_profile } }} />
+
+<Story
+    name="displayName without name"
+    args={{ user: { ...vectors.no_profile } }}
+/>
+
+<Story
+    name="name and displayName shows name"
+    args={{ user: { ...vectors.display_name_and_name } }}
+/>

src/lib/components/users/UserHeader.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" context="module">
+    export const defaults: User = {
+        hexpubkey: "",
+        npub: "",
+        loading: true,
+    };
+</script>
+
+<script lang="ts">
+    import Name from "./Name.svelte";
+    import { getName, type User } from "./type";
+
+    export let user: User = defaults;
+    let { profile, hexpubkey, loading } = user;
+    let display_name = "";
+    $: {
+        let { profile, hexpubkey, loading } = user;
+        display_name = getName(user);
+    }
+</script>
+
+<div class="flex my-2">
+    <div class="avatar flex-none">
+        <div
+            class="w-8 h-8 rounded"
+            class:skeleton={!profile && loading}
+            class:bg-neutral={!loading && (!profile || !profile.image)}
+        >
+            {#if profile && profile.image}
+                <img class="my-0" src={profile.image} alt={display_name} />
+            {/if}
+        </div>
+    </div>
+    <div class="flex-auto pl-3 m-auto">
+        {#if loading}
+            <div class="w-24 h-4 skeleton"></div>
+        {:else}
+            {display_name}
+        {/if}
+    </div>
+</div>

src/lib/components/users/type.ts

@@ -0,0 +1,23 @@
+import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+
+export interface User {
+    loading: boolean;
+    hexpubkey: string;
+    npub: string;
+    profile?: NDKUserProfile;
+}
+
+export function getName(user: User, fallback_to_pubkey: boolean = false): string {
+    return user.profile ? (
+        user.profile.name
+            ? user.profile.name
+            : user.profile.displayName
+                ? user.profile.displayName
+                : truncateNpub(user.npub)
+    )
+        : truncateNpub(user.npub);
+}
+
+function truncateNpub(npub: string): string {
+    return `${npub.substring(0, 9)}...`;
+}

src/lib/components/users/vectors.ts

@@ -0,0 +1,30 @@
+import type { User } from "./type";
+
+// nsec1rg53qfv09az39dlw6j64ange3cx8sh5p8np29qcxtythplvplktsv93tnr
+let base: User = {
+    hexpubkey:
+        "3eb45c6f15752d796fa5465d0530a5a5feb79fb6f08c0a4176be9d73cc28c40d",
+    npub: "npub18669cmc4w5khjma9gews2v995hlt08ak7zxq5stkh6wh8npgcsxslt2xjn",
+    loading: false,
+};
+
+let image = "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg";
+
+export let UserVectors = {
+    loading: { ...base, loading: true } as User,
+    default: { ...base, profile: { name: "DanConwayDev", image } } as User,
+    display_name_only: { ...base, profile: { displayName: "DanConwayDev", image } } as User,
+    display_name_and_name: { ...base, profile: { name: "Dan", displayName: "DanConwayDev", image } } as User,
+    no_image: { ...base, profile: { name: "DanConwayDev" } } as User,
+    no_profile: { ...base } as User,
+};
+
+export function withName(base: User, name: string): User {
+    return {
+        ...base,
+        profile: {
+            ...base.profile,
+            name,
+        }
+    } as User
+}