reduce thread footer height where possible

This commit is contained in:
Samuel Newman
2025-06-12 00:46:57 +03:00
parent 093454f5b2
commit bba869e2df
2 changed files with 25 additions and 5 deletions
+11 -5
View File
@@ -481,6 +481,11 @@ export function PostThread({uri}: {uri: string}) {
], ],
) )
const footerHeight = useMemo(
() => Math.max(180, windowHeight - 200 - thread.state.replyCount * 100),
[windowHeight, thread.state.replyCount],
)
return ( return (
<> <>
<Layout.Header.Outer headerRef={headerRef}> <Layout.Header.Outer headerRef={headerRef}>
@@ -532,13 +537,14 @@ export function PostThread({uri}: {uri: string}) {
* account for the `on*ReachedThreshold` values. * account for the `on*ReachedThreshold` values.
* *
* Otherwise, and on web, this value needs to be the height of * Otherwise, and on web, this value needs to be the height of
* the viewport _minus_ a sensible min-post height e.g. 200, so * the viewport _minus_ a sensible min-post height e.g. 200 plus
* that there's enough scroll remaining to get the anchor post * 100 per reply, so that there's enough scroll remaining to get the
* back to the top of the screen when handling scroll. * anchor post back to the top of the screen when handling scroll,
* while trying to minimize the height if there's enough replies.
*/ */
height={platform({ height={platform({
web: windowHeight - 200, web: footerHeight,
default: deferParents ? windowHeight * 2 : windowHeight - 200, default: deferParents ? windowHeight * 2 : footerHeight,
})} })}
style={isTombstoneView ? {borderTopWidth: 0} : undefined} style={isTombstoneView ? {borderTopWidth: 0} : undefined}
/> />
+14
View File
@@ -277,6 +277,18 @@ export function usePostThread({anchor}: {anchor?: string}) {
setOtherItemsVisible, setOtherItemsVisible,
]) ])
/*
* Count the number of posts beneath the anchor
*/
const replyCount = useMemo(() => {
return items.reduce((acc, item) => {
if (item.type === 'threadPost' && item.depth > 0) {
return acc + 1
}
return acc
}, 0)
}, [items])
return useMemo( return useMemo(
() => ({ () => ({
state: { state: {
@@ -292,6 +304,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
sort, sort,
view, view,
otherItemsVisible, otherItemsVisible,
replyCount,
}, },
data: { data: {
items, items,
@@ -320,6 +333,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
setView, setView,
threadgate, threadgate,
items, items,
replyCount,
], ],
) )
} }