From 3092a8bba15b2e52bb502d178d06ebc258f6e47d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Oct 2023 09:22:19 +0800
Subject: [PATCH] Show hashtag usage total counts

---
 src/app.css                | 15 ++++++++++++++
 src/components/compose.css |  9 +++++++++
 src/components/compose.jsx | 13 +++++++++++-
 src/pages/search.jsx       | 41 +++++++++++++++++++++++++-------------
 src/pages/trending.jsx     |  3 ++-
 5 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/src/app.css b/src/app.css
index f4aefc1e..e915fcb2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1992,6 +1992,21 @@ ul.link-list li a {
   display: flex;
   align-items: center;
   gap: 8px;
+
+  .count {
+    font-size: 80%;
+    display: inline-block;
+    color: var(--text-insignificant-color);
+    min-width: 16px;
+    min-height: 16px;
+    padding: 4px;
+    background-color: var(--bg-color);
+    border-radius: 4px;
+
+    @media (min-width: 40em) {
+      background-color: var(--bg-faded-color);
+    }
+  }
 }
 ul.link-list li:first-child a {
   border-top-left-radius: var(--radius);
diff --git a/src/components/compose.css b/src/components/compose.css
index 5531f85e..edadbe1b 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -269,6 +269,15 @@
   gap: 8px;
   align-items: center;
   font-size: 90%;
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  .count {
+    font-size: 80%;
+    opacity: 0.5;
+  }
 }
 #compose-container .text-expander-menu li b img {
   /* The shortcode emojis */
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index b3c213d5..5b64608e 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -17,6 +17,7 @@ import db from '../utils/db';
 import emojifyText from '../utils/emojify-text';
 import localeMatch from '../utils/locale-match';
 import openCompose from '../utils/open-compose';
+import shortenNumber from '../utils/shorten-number';
 import states, { saveStatus } from '../utils/states';
 import store from '../utils/store';
 import {
@@ -1306,6 +1307,7 @@ const Textarea = forwardRef((props, ref) => {
                   username,
                   acct,
                   emojis,
+                  history,
                 } = result;
                 const displayNameWithEmoji = emojifyText(displayName, emojis);
                 // const item = menuItem.cloneNode();
@@ -1324,9 +1326,18 @@ const Textarea = forwardRef((props, ref) => {
                     </li>
                   `;
                 } else {
+                  const total = history?.reduce?.(
+                    (acc, cur) => acc + +cur.uses,
+                    0,
+                  );
                   html += `
                     <li role="option" data-value="${encodeHTML(name)}">
-                      <span>#<b>${encodeHTML(name)}</b></span>
+                      <span class="grow">#<b>${encodeHTML(name)}</b></span>
+                      ${
+                        total
+                          ? `<span class="count">${shortenNumber(total)}</span>`
+                          : ''
+                      }
                     </li>
                   `;
                 }
diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index 25a9739a..ff223520 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -13,6 +13,7 @@ import NavMenu from '../components/nav-menu';
 import SearchForm from '../components/search-form';
 import Status from '../components/status';
 import { api } from '../utils/api';
+import shortenNumber from '../utils/shorten-number';
 import useTitle from '../utils/useTitle';
 
 const SHORT_LIMIT = 5;
@@ -244,20 +245,32 @@ function Search(props) {
                   {hashtagResults.length > 0 ? (
                     <>
                       <ul class="link-list hashtag-list">
-                        {hashtagResults.map((hashtag) => (
-                          <li key={hashtag.name}>
-                            <Link
-                              to={
-                                instance
-                                  ? `/${instance}/t/${hashtag.name}`
-                                  : `/t/${hashtag.name}`
-                              }
-                            >
-                              <Icon icon="hashtag" />
-                              <span>{hashtag.name}</span>
-                            </Link>
-                          </li>
-                        ))}
+                        {hashtagResults.map((hashtag) => {
+                          const { name, history } = hashtag;
+                          const total = history.reduce(
+                            (acc, cur) => acc + +cur.uses,
+                            0,
+                          );
+                          return (
+                            <li key={hashtag.name}>
+                              <Link
+                                to={
+                                  instance
+                                    ? `/${instance}/t/${hashtag.name}`
+                                    : `/t/${hashtag.name}`
+                                }
+                              >
+                                <Icon icon="hashtag" />
+                                <span>{hashtag.name}</span>
+                                {!!total && (
+                                  <span class="count">
+                                    {shortenNumber(total)}
+                                  </span>
+                                )}
+                              </Link>
+                            </li>
+                          );
+                        })}
                       </ul>
                       {type !== 'hashtags' && (
                         <div class="ui-state">
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index dffd8310..f0f44739 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -15,6 +15,7 @@ import { api } from '../utils/api';
 import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
 import { filteredItems } from '../utils/filters';
 import pmem from '../utils/pmem';
+import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
@@ -131,7 +132,7 @@ function Trending({ columnMode, ...props }) {
                     <span class="more-insignificant">#</span>
                     {name}
                   </span>
-                  <span class="filter-count">{total.toLocaleString()}</span>
+                  <span class="filter-count">{shortenNumber(total)}</span>
                 </Link>
               );
             })}