feat(RepoPage): add avatar next to pr author name

by using UserHeader now a xs inline option is available

__snapshots__/prs-list-item.test.js.snap

@@ -30,7 +30,17 @@ exports[`PRs/List/Item Author Loading smoke-test 1`] = `
         opened 3 months ago
       </li>
       <li class="inline">
-        <div class="skeleton inline-block h-3 w-20 pb-2">
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5 skeleton">
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              <div class="skeleton w-24 h-2.5">
+              </div>
+            </div>
+          </div>
         </div>
       </li>
     </ul>
@@ -58,7 +68,21 @@ exports[`PRs/List/Item Long Details smoke-test 1`] = `
         opened a minute ago
       </li>
       <li class="inline">
-        DanConwayDev
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
       </li>
     </ul>
   </a>
@@ -95,7 +119,21 @@ exports[`PRs/List/Item Long and No Spaces smoke-test 1`] = `
         opened 3 months ago
       </li>
       <li class="inline">
-        DanConwayDev
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
       </li>
     </ul>
   </a>
@@ -132,7 +170,21 @@ exports[`PRs/List/Item Short Details smoke-test 1`] = `
         opened 7 days ago
       </li>
       <li class="inline">
-        DanConwayDev
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
       </li>
     </ul>
   </a>
@@ -169,7 +221,21 @@ exports[`PRs/List/Item Status Closed smoke-test 1`] = `
         opened 7 days ago
       </li>
       <li class="inline">
-        DanConwayDev
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
       </li>
     </ul>
   </a>
@@ -206,7 +272,21 @@ exports[`PRs/List/Item Status Draft smoke-test 1`] = `
         opened 7 days ago
       </li>
       <li class="inline">
-        DanConwayDev
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
       </li>
     </ul>
   </a>
@@ -238,7 +318,21 @@ exports[`PRs/List/Item Status Loading smoke-test 1`] = `
         opened 7 days ago
       </li>
       <li class="inline">
-        DanConwayDev
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
       </li>
     </ul>
   </a>
@@ -275,7 +369,21 @@ exports[`PRs/List/Item Status Merged smoke-test 1`] = `
         opened 7 days ago
       </li>
       <li class="inline">
-        DanConwayDev
+        <div class="inline-block">
+          <div class="text-xs align-middle">
+            <div class="avatar inline-block align-middle">
+              <div class="rounded inline-block h-3.5 w-3.5">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="pl-0 inline-block">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
       </li>
     </ul>
   </a>

__snapshots__/prs-list-list.test.js.snap

@@ -37,7 +37,21 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             opened 7 days ago
           </li>
           <li class="inline">
-            DanConwayDev
+            <div class="inline-block">
+              <div class="text-xs align-middle">
+                <div class="avatar inline-block align-middle">
+                  <div class="rounded inline-block h-3.5 w-3.5">
+                    <img class="my-0"
+                         src="../test-profile-image.jpg"
+                         alt="DanConwayDev"
+                    >
+                  </div>
+                </div>
+                <div class="pl-0 inline-block">
+                  DanConwayDev
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </a>
@@ -61,7 +75,21 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             opened a minute ago
           </li>
           <li class="inline">
-            DanConwayDev
+            <div class="inline-block">
+              <div class="text-xs align-middle">
+                <div class="avatar inline-block align-middle">
+                  <div class="rounded inline-block h-3.5 w-3.5">
+                    <img class="my-0"
+                         src="../test-profile-image.jpg"
+                         alt="DanConwayDev"
+                    >
+                  </div>
+                </div>
+                <div class="pl-0 inline-block">
+                  DanConwayDev
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </a>
@@ -95,7 +123,21 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             opened 3 months ago
           </li>
           <li class="inline">
-            DanConwayDev
+            <div class="inline-block">
+              <div class="text-xs align-middle">
+                <div class="avatar inline-block align-middle">
+                  <div class="rounded inline-block h-3.5 w-3.5">
+                    <img class="my-0"
+                         src="../test-profile-image.jpg"
+                         alt="DanConwayDev"
+                    >
+                  </div>
+                </div>
+                <div class="pl-0 inline-block">
+                  DanConwayDev
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </a>
@@ -199,7 +241,21 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
             opened 7 days ago
           </li>
           <li class="inline">
-            DanConwayDev
+            <div class="inline-block">
+              <div class="text-xs align-middle">
+                <div class="avatar inline-block align-middle">
+                  <div class="rounded inline-block h-3.5 w-3.5">
+                    <img class="my-0"
+                         src="../test-profile-image.jpg"
+                         alt="DanConwayDev"
+                    >
+                  </div>
+                </div>
+                <div class="pl-0 inline-block">
+                  DanConwayDev
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </a>
@@ -223,7 +279,21 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
             opened a minute ago
           </li>
           <li class="inline">
-            DanConwayDev
+            <div class="inline-block">
+              <div class="text-xs align-middle">
+                <div class="avatar inline-block align-middle">
+                  <div class="rounded inline-block h-3.5 w-3.5">
+                    <img class="my-0"
+                         src="../test-profile-image.jpg"
+                         alt="DanConwayDev"
+                    >
+                  </div>
+                </div>
+                <div class="pl-0 inline-block">
+                  DanConwayDev
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </a>
@@ -269,7 +339,21 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
             opened 7 days ago
           </li>
           <li class="inline">
-            DanConwayDev
+            <div class="inline-block">
+              <div class="text-xs align-middle">
+                <div class="avatar inline-block align-middle">
+                  <div class="rounded inline-block h-3.5 w-3.5">
+                    <img class="my-0"
+                         src="../test-profile-image.jpg"
+                         alt="DanConwayDev"
+                    >
+                  </div>
+                </div>
+                <div class="pl-0 inline-block">
+                  DanConwayDev
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </a>
@@ -293,7 +377,21 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
             opened a minute ago
           </li>
           <li class="inline">
-            DanConwayDev
+            <div class="inline-block">
+              <div class="text-xs align-middle">
+                <div class="avatar inline-block align-middle">
+                  <div class="rounded inline-block h-3.5 w-3.5">
+                    <img class="my-0"
+                         src="../test-profile-image.jpg"
+                         alt="DanConwayDev"
+                    >
+                  </div>
+                </div>
+                <div class="pl-0 inline-block">
+                  DanConwayDev
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </a>

src/lib/components/prs/PRsListItem.svelte

@@ -7,6 +7,7 @@
   import { summary_defaults } from './type'
   import { getName } from '../users/type'
   import { pr_icon_path } from './icons'
+  import UserHeader from '../users/UserHeader.svelte'
 
   dayjs.extend(relativeTime)
   export let {
@@ -102,11 +103,7 @@
           opened {created_at_ago}
         </li>
         <li class="inline">
-          {#if author.loading}
+          <UserHeader user={author} inline={true} size="xs" />
-            <div class="skeleton inline-block h-3 w-20 pb-2"></div>
-          {:else}
-            {author_name}
-          {/if}
         </li>
       </ul>
     {/if}