Show hashtag usage total counts

This commit is contained in:
Lim Chee Aun 2023-10-30 09:22:19 +08:00
parent 146e5d1a7e
commit 3092a8bba1
5 changed files with 65 additions and 16 deletions

View file

@ -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);

View file

@ -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 */

View file

@ -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>
`;
}

View file

@ -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,7 +245,13 @@ function Search(props) {
{hashtagResults.length > 0 ? (
<>
<ul class="link-list hashtag-list">
{hashtagResults.map((hashtag) => (
{hashtagResults.map((hashtag) => {
const { name, history } = hashtag;
const total = history.reduce(
(acc, cur) => acc + +cur.uses,
0,
);
return (
<li key={hashtag.name}>
<Link
to={
@ -255,9 +262,15 @@ function Search(props) {
>
<Icon icon="hashtag" />
<span>{hashtag.name}</span>
{!!total && (
<span class="count">
{shortenNumber(total)}
</span>
)}
</Link>
</li>
))}
);
})}
</ul>
{type !== 'hashtags' && (
<div class="ui-state">

View file

@ -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>
);
})}