From 941d2efeb1b97a3cdf96c680ea3f5316bc881b8b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 16 Sep 2023 14:48:31 +0800
Subject: [PATCH] Convert posting stats box into a link to account page

---
 src/components/account-info.css |  6 +++
 src/components/account-info.jsx | 89 +++++++++++++++++----------------
 2 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index 0722deca..f28f507b 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -196,6 +196,8 @@
 .account-container .account-metadata-box {
   overflow: hidden;
   border-radius: 16px;
+  display: block;
+  text-decoration: none;
 
   & > * {
     margin-bottom: 2px;
@@ -308,6 +310,10 @@
   --size: 8px;
   --original-color: var(--link-color);
 
+  &:is(:hover, :focus-within) {
+    background-color: var(--link-bg-hover-color);
+  }
+
   .posting-stats-bar {
     height: var(--size);
     border-radius: var(--size);
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index df708925..7b77a2f7 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -648,58 +648,63 @@ function RelatedActions({ info, instance, authenticated, standalone }) {
   const [showAddRemoveLists, setShowAddRemoveLists] = useState(false);
 
   const hasPostingStats = postingStats?.total >= 3;
+  const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`;
 
   return (
     <>
       {hasPostingStats && (
-        <div class="account-metadata-box">
-          {hasPostingStats && (
-            <div class="shazam-container">
-              <div class="shazam-container-inner">
-                <div class="posting-stats">
-                  <div>
-                    {postingStats.daysSinceLastPost < 365
-                      ? `Last ${postingStats.total} posts in the past 
+        <Link
+          to={accountLink}
+          class="account-metadata-box"
+          onClick={() => {
+            states.showAccount = false;
+          }}
+        >
+          <div class="shazam-container">
+            <div class="shazam-container-inner">
+              <div class="posting-stats">
+                <div>
+                  {postingStats.daysSinceLastPost < 365
+                    ? `Last ${postingStats.total} posts in the past 
                     ${postingStats.daysSinceLastPost} day${
-                          postingStats.daysSinceLastPost > 1 ? 's' : ''
-                        }`
-                      : `
+                        postingStats.daysSinceLastPost > 1 ? 's' : ''
+                      }`
+                    : `
                      Last ${postingStats.total} posts in the past year(s)
                     `}
-                  </div>
-                  <div
-                    class="posting-stats-bar"
-                    style={{
-                      // [originals | replies | boosts]
-                      '--originals-percentage': `${
-                        (postingStats.originals / postingStats.total) * 100
-                      }%`,
-                      '--replies-percentage': `${
-                        ((postingStats.originals + postingStats.replies) /
-                          postingStats.total) *
-                        100
-                      }%`,
-                    }}
-                  />
-                  <div class="posting-stats-legends">
-                    <span class="ib">
-                      <span class="posting-stats-legend-item posting-stats-legend-item-originals" />{' '}
-                      Original
-                    </span>{' '}
-                    <span class="ib">
-                      <span class="posting-stats-legend-item posting-stats-legend-item-replies" />{' '}
-                      Replies
-                    </span>{' '}
-                    <span class="ib">
-                      <span class="posting-stats-legend-item posting-stats-legend-item-boosts" />{' '}
-                      Boosts
-                    </span>
-                  </div>
+                </div>
+                <div
+                  class="posting-stats-bar"
+                  style={{
+                    // [originals | replies | boosts]
+                    '--originals-percentage': `${
+                      (postingStats.originals / postingStats.total) * 100
+                    }%`,
+                    '--replies-percentage': `${
+                      ((postingStats.originals + postingStats.replies) /
+                        postingStats.total) *
+                      100
+                    }%`,
+                  }}
+                />
+                <div class="posting-stats-legends">
+                  <span class="ib">
+                    <span class="posting-stats-legend-item posting-stats-legend-item-originals" />{' '}
+                    Original
+                  </span>{' '}
+                  <span class="ib">
+                    <span class="posting-stats-legend-item posting-stats-legend-item-replies" />{' '}
+                    Replies
+                  </span>{' '}
+                  <span class="ib">
+                    <span class="posting-stats-legend-item posting-stats-legend-item-boosts" />{' '}
+                    Boosts
+                  </span>
                 </div>
               </div>
             </div>
-          )}
-        </div>
+          </div>
+        </Link>
       )}
       <p class="actions">
         <span>