From ddb64e3022c20fc6e5c6c3d52c88ecb97a11c4ed Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 24 May 2023 17:16:45 +0800
Subject: [PATCH] Beautify 'Show more' button on status page

---
 src/app.css          | 28 ++++++++++++++++++++++++++++
 src/pages/status.jsx | 23 ++++++++++++++++++-----
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index 9defe76b..5855581c 100644
--- a/src/app.css
+++ b/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);
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 2ea035c9..490b081e 100644
--- a/src/pages/status.jsx
+++ b/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>
           )}