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 && ( + + )} )} - {descendant && replies?.length > 0 && ( -
- - -
- )} + {descendant && + replies?.length > 0 && + replies?.length <= LIMIT && ( + + )} {uiState === 'loading' && isHero && !!heroStatus?.repliesCount && @@ -330,11 +324,13 @@ function StatusPage({ id }) { type="button" class="plain block" disabled={uiState === 'loading'} - onClick={() => setLimit((l) => l + 40)} + onClick={() => setLimit((l) => l + LIMIT)} style={{ marginBlockEnd: '6em' }} > Show more…{' '} - {showMore > 40 ? '40+' : showMore} + + {showMore > LIMIT ? `${LIMIT}+` : showMore} + )} @@ -344,4 +340,43 @@ function StatusPage({ id }) { ); } +function SubComments({ hasManyStatuses, replies }) { + // If less than or 2 replies and total number of characters of content from replies is less than 500 + let isBrief = false; + if (replies.length <= 2) { + let totalLength = replies.reduce((acc, reply) => { + const { content } = reply; + const length = htmlContentLength(content); + return acc + length; + }, 0); + isBrief = totalLength < 500; + } + + const open = isBrief || !hasManyStatuses; + + return ( +
+ + +
+ ); +} + export default StatusPage;