diff --git a/src/app.css b/src/app.css index 801822cb..3b04e362 100644 --- a/src/app.css +++ b/src/app.css @@ -197,6 +197,16 @@ a.mention span { border-color: transparent transparent var(--comment-line-color) transparent; transform: rotate(45deg); } +.timeline.contextual > li .replies-link { + color: var(--text-insignificant-color); + margin-left: 16px; + margin-top: -12px; + padding-bottom: 12px; + font-size: 90%; +} +.timeline.contextual > li .replies-link * { + vertical-align: middle; +} .timeline.contextual > li .replies { margin-top: -12px; } diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 7d6f4dd8..70d417f3 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -12,11 +12,14 @@ import { useSnapshot } from 'valtio'; import Icon from '../components/icon'; import Loader from '../components/loader'; import Status from '../components/status'; +import htmlContentLength from '../utils/html-content-length'; import shortenNumber from '../utils/shorten-number'; import states from '../utils/states'; import store from '../utils/store'; import useTitle from '../utils/useTitle'; +const LIMIT = 40; + function StatusPage({ id }) { const snapStates = useSnapshot(states); const [statuses, setStatuses] = useState([]); @@ -215,13 +218,13 @@ function StatusPage({ id }) { }); const closeLink = `#${prevRoute || '/'}`; - const [limit, setLimit] = useState(40); + const [limit, setLimit] = useState(LIMIT); const showMore = useMemo(() => { // return number of statuses to show return statuses.length - limit; }, [statuses.length, limit]); - const hasManyStatuses = statuses.length > 40; + const hasManyStatuses = statuses.length > LIMIT; const hasDescendants = statuses.some((s) => s.descendant); return ( @@ -286,33 +289,24 @@ function StatusPage({ id }) { withinContext size={thread || ancestor ? 'm' : 's'} /> + {replies?.length > LIMIT && ( +