From aae74aa4765fe75e4ae8ad5f91f196d7f21f401f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 28 Aug 2023 00:21:49 +0800
Subject: [PATCH] Experiment show avatars instead

Add a bit of tooltips too
---
 src/pages/status.jsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 8afa7050..44babe8e 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -336,6 +336,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             ancestor: true,
             isThread: ancestorsIsThread,
             accountID: s.account.id,
+            account: s.account,
             repliesCount: s.repliesCount,
             weight: calcStatusWeight(s),
           })),
@@ -705,6 +706,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                       block: 'start',
                     });
                   }}
+                  title="Go to main post"
                 >
                   <Icon
                     icon={heroPointer === 'down' ? 'arrow-down' : 'arrow-up'}
@@ -727,12 +729,31 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                     });
                   }}
                   hidden={!ancestors.length || nearReachStart}
+                  title={`${ancestors.length} posts above ‒ Go to top`}
                 >
                   <Icon icon="arrow-up" />
-                  <Icon icon="comment" />{' '}
-                  <span class="insignificant">
-                    {shortenNumber(ancestors.length)}
-                  </span>
+                  {ancestors
+                    .filter(
+                      (a, i, arr) =>
+                        arr.findIndex((b) => b.accountID === a.accountID) === i,
+                    )
+                    .slice(0, 3)
+                    .map((ancestor) => (
+                      <Avatar
+                        key={ancestor.account.id}
+                        url={ancestor.account.avatar}
+                        alt={ancestor.account.displayName}
+                      />
+                    ))}
+                  {/* <Icon icon="comment" />{' '} */}
+                  {ancestors.length > 3 && (
+                    <>
+                      {' '}
+                      <span class="insignificant">
+                        {shortenNumber(ancestors.length)}
+                      </span>
+                    </>
+                  )}
                 </button>
               </>
             )}