Beautify 'Show more' button on status page

src/app.css

@@ -642,6 +642,34 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   background-image: none;
 }
 
+.timeline .show-more {
+  padding-left: calc(var(--line-end) + var(--line-margin-end)) !important;
+  text-align: left;
+  background-color: transparent !important;
+  backdrop-filter: none !important;
+  position: relative;
+  border-radius: 0;
+  padding-block: 16px !important;
+}
+.timeline .show-more:hover {
+  filter: none !important;
+  color: var(--text-color) !important;
+  background-color: var(--bg-faded-blur-color) !important;
+}
+.timeline .show-more:before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: var(--line-start);
+  width: var(--line-diameter);
+  height: var(--line-diameter);
+  border-radius: var(--line-radius);
+  border-style: solid;
+  border-width: var(--line-width);
+  border-color: transparent transparent var(--comment-line-color) transparent;
+  transform: rotate(45deg);
+}
+
 .status-loading {
   text-align: center;
   color: var(--text-insignificant-color);

src/pages/status.jsx

@@ -337,6 +337,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
           },
           ...nestedDescendants.map((s) => ({
             id: s.id,
+            account: s.account,
             accountID: s.account.id,
             descendant: true,
             thread: s.account.id === heroStatus.account.id,
@@ -974,15 +975,27 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             <li>
               <button
                 type="button"
-                class="plain block"
+                class="plain block show-more"
                 disabled={uiState === 'loading'}
                 onClick={() => setLimit((l) => l + LIMIT)}
                 style={{ marginBlockEnd: '6em' }}
               >
-                Show more&hellip;{' '}
-                <span class="tag">
-                  {showMore > LIMIT ? `${LIMIT}+` : showMore}
-                </span>
+                <div class="ib">
+                  {/* show avatars for first 5 statuses */}
+                  {statuses.slice(limit, limit + 5).map((status) => (
+                    <Avatar
+                      key={status.id}
+                      url={status.account.avatarStatic}
+                      // title={`${status.avatar.displayName} (@${status.avatar.acct})`}
+                    />
+                  ))}
+                </div>{' '}
+                <div class="ib">
+                  Show more&hellip;{' '}
+                  <span class="tag">
+                    {showMore > LIMIT ? `${LIMIT}+` : showMore}
+                  </span>
+                </div>
               </button>
             </li>
           )}