feat(UserHeader): add inline flag

this option reduces the size of the avatar so that it doesn't effect the
line height. note this only works at the text size / line-height
where the component is currently used.

__snapshots__/users-header.test.js.snap

@@ -1,86 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Users/Header default smoke-test 1`] = `
-<div class="flex my-2">
-  <div class="avatar flex-none">
-    <div class="w-8 h-8 rounded">
-      <img class="my-0"
-           src="../test-profile-image.jpg"
-           alt="DanConwayDev"
-      >
+<div>
+  <div class="flex items-center my-2">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="DanConwayDev"
+        >
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-3">
+      DanConwayDev
     </div>
-  </div>
-  <div class="flex-auto pl-3 m-auto">
-    DanConwayDev
   </div>
 </div>
 `;
 
 exports[`Users/Header displayName without name smoke-test 1`] = `
-<div class="flex my-2">
-  <div class="avatar flex-none">
-    <div class="w-8 h-8 rounded">
-      <img class="my-0"
-           src="../test-profile-image.jpg"
-           alt="DanConwayDev"
-      >
+<div>
+  <div class="flex items-center my-2">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="DanConwayDev"
+        >
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-3">
+      DanConwayDev
     </div>
   </div>
-  <div class="flex-auto pl-3 m-auto">
-    DanConwayDev
+</div>
+`;
+
+exports[`Users/Header inline loading smoke-test 1`] = `
+<div class="inline-block">
+  <div class="flex items-center">
+    <div class="avatar flex-none">
+      <div class="rounded h-5 w-5 skeleton">
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-1">
+      <div class="skeleton h-4 w-24">
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Users/Header loading smoke-test 1`] = `
-<div class="flex my-2">
-  <div class="avatar flex-none">
-    <div class="w-8 h-8 rounded skeleton">
+exports[`Users/Header inline smoke-test 1`] = `
+<div class="inline-block">
+  <div class="flex items-center">
+    <div class="avatar flex-none">
+      <div class="rounded h-5 w-5">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="DanConwayDev"
+        >
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-1">
+      DanConwayDev
     </div>
   </div>
-  <div class="flex-auto pl-3 m-auto">
-    <div class="w-24 h-4 skeleton">
+</div>
+`;
+
+exports[`Users/Header loading smoke-test 1`] = `
+<div>
+  <div class="flex items-center my-2">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8 skeleton">
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-3">
+      <div class="skeleton h-4 w-24">
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`Users/Header name and displayName shows name smoke-test 1`] = `
-<div class="flex my-2">
-  <div class="avatar flex-none">
-    <div class="w-8 h-8 rounded">
-      <img class="my-0"
-           src="../test-profile-image.jpg"
-           alt="Dan"
-      >
+<div>
+  <div class="flex items-center my-2">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="Dan"
+        >
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-3">
+      Dan
     </div>
-  </div>
-  <div class="flex-auto pl-3 m-auto">
-    Dan
   </div>
 </div>
 `;
 
 exports[`Users/Header no image smoke-test 1`] = `
-<div class="flex my-2">
-  <div class="avatar flex-none">
-    <div class="w-8 h-8 rounded bg-neutral">
+<div>
+  <div class="flex items-center my-2">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8 bg-neutral">
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-3">
+      DanConwayDev
     </div>
-  </div>
-  <div class="flex-auto pl-3 m-auto">
-    DanConwayDev
   </div>
 </div>
 `;
 
 exports[`Users/Header not found smoke-test 1`] = `
-<div class="flex my-2">
-  <div class="avatar flex-none">
-    <div class="w-8 h-8 rounded bg-neutral">
+<div>
+  <div class="flex items-center my-2">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8 bg-neutral">
+      </div>
+    </div>
+    <div class="m-auto flex-auto pl-3">
+      npub18669...
     </div>
-  </div>
-  <div class="flex-auto pl-3 m-auto">
-    npub18669...
   </div>
 </div>
 `;

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

@@ -46,3 +46,23 @@
   name="name and displayName shows name"
   args={{ user: { ...vectors.display_name_and_name } }}
 />
+
+<Story
+  name="inline"
+  args={{
+    user: {
+      ...vectors.default,
+    },
+    inline: true,
+  }}
+/>
+
+<Story
+  name="inline loading"
+  args={{
+    user: {
+      ...vectors.loading,
+    },
+    inline: true,
+  }}
+/>

src/lib/components/users/UserHeader.svelte

@@ -7,27 +7,35 @@
     loading: true,
   }
 
+  export let inline = false
+
   $: ({ profile, loading } = user)
   $: display_name = getName(user)
 </script>
 
-<div class="my-2 flex">
-  <div class="avatar flex-none">
-    <div
-      class="h-8 w-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} />
+<div class:inline-block={inline}>
+  <div class:my-2={!inline} class="flex items-center">
+    <div class="avatar flex-none">
+      <div
+        class:h-8={!inline}
+        class:w-8={!inline}
+        class:h-5={inline}
+        class:w-5={inline}
+        class="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:pl-3={!inline} class:pl-1={inline} class="m-auto flex-auto pl-3">
+      {#if loading}
+        <div class="skeleton h-4 w-24"></div>
+      {:else}
+        {display_name}
       {/if}
     </div>
   </div>
-  <div class="m-auto flex-auto pl-3">
-    {#if loading}
-      <div class="skeleton h-4 w-24"></div>
-    {:else}
-      {display_name}
-    {/if}
-  </div>
 </div>