feat(UserHeader): truncate long names

as some users and test accounts use very long names which appear poorly

__snapshots__/users-header.test.js.snap

@@ -117,6 +117,24 @@ exports[`Users/Header loading smoke-test 1`] = `
 </div>
 `;
 
+exports[`Users/Header long name truncated smoke-test 1`] = `
+<div>
+  <div class="my-2 text-md flex items-center">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="Really Really Long Lon..."
+        >
+      </div>
+    </div>
+    <div class="pl-3 flex-auto m-auto">
+      Really Really Long Lon...
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Users/Header name and displayName shows name smoke-test 1`] = `
 <div>
   <div class="my-2 text-md flex items-center">

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

@@ -43,6 +43,15 @@
   }}
 />
 
+<Story
+  name="long name truncated"
+  args={{
+    user: {
+      ...vectors.long_name,
+    },
+  }}
+/>
+
 <Story name="loading" args={{ user: { ...vectors.loading } }} />
 
 <Story name="not found" args={{ user: { ...vectors.no_profile } }} />

src/lib/components/users/type.ts

@@ -13,16 +13,24 @@ export const defaults: User = {
   npub: '',
 }
 
-export function getName(user: User): string {
-  return user.profile
-    ? user.profile.name
+export function getName(user: User, truncate_above = 25): string {
+  return truncate(
+    user.profile
       ? user.profile.name
-      : user.profile.displayName
-        ? user.profile.displayName
-        : truncateNpub(user.npub)
-    : truncateNpub(user.npub)
+        ? user.profile.name
+        : user.profile.displayName
+          ? user.profile.displayName
+          : truncateNpub(user.npub)
+      : truncateNpub(user.npub),
+    truncate_above
+  )
 }
 
 function truncateNpub(npub: string): string {
   return `${npub.substring(0, 9)}...`
 }
+
+function truncate(s: string, truncate_above = 20): string {
+  if (s.length < truncate_above || truncate_above < 5) return s
+  return `${s.substring(0, truncate_above - 3)}...`
+}

src/lib/components/users/vectors.ts

@@ -22,6 +22,10 @@ export const UserVectors = {
   } as User,
   no_image: { ...base, profile: { name: 'DanConwayDev' } } as User,
   no_profile: { ...base } as User,
+  long_name: {
+    ...base,
+    profile: { name: 'Really Really Long Long Name', image },
+  } as User,
 }
 
 export function withName(base: User, name: string): User {