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) => { `; } else { + const total = history?.reduce?.( + (acc, cur) => acc + +cur.uses, + 0, + ); html += `