Treeview: more UI tweaks (#2125)

* Treeview: more UI tweaks

* Only show treeview when there are branching replies

* Fix types
zio/stable
Paul Frazee 2023-12-06 22:17:38 -08:00 committed by GitHub
parent 818c6ae879
commit 00e1e56a7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 12 deletions

View File

@ -141,6 +141,10 @@ function PostThreadLoaded({
)
const [maxVisible, setMaxVisible] = React.useState(100)
const [isPTRing, setIsPTRing] = React.useState(false)
const treeView = React.useMemo(
() => !!threadViewPrefs.lab_treeViewEnabled && hasBranchingReplies(thread),
[threadViewPrefs, thread],
)
// construct content
const posts = React.useMemo(() => {
@ -289,7 +293,7 @@ function PostThreadLoaded({
<PostThreadItem
post={item.post}
record={item.record}
treeView={threadViewPrefs.lab_treeViewEnabled || false}
treeView={treeView}
depth={item.ctx.depth}
prevPost={prev}
nextPost={next}
@ -318,7 +322,7 @@ function PostThreadLoaded({
pal.colors.border,
posts,
onRefresh,
threadViewPrefs.lab_treeViewEnabled,
treeView,
_,
],
)
@ -481,6 +485,19 @@ function* flattenThreadSkeleton(
}
}
function hasBranchingReplies(node: ThreadNode) {
if (node.type !== 'post') {
return false
}
if (!node.replies) {
return false
}
if (node.replies.length === 1) {
return hasBranchingReplies(node.replies[0])
}
return true
}
const styles = StyleSheet.create({
notFoundContainer: {
margin: 10,

View File

@ -436,13 +436,12 @@ let PostThreadItemLoaded = ({
} else {
const isThreadedChild = treeView && depth > 0
const isThreadedChildAdjacentTop =
isThreadedChild && prevPost?.ctx.depth === depth
isThreadedChild && prevPost?.ctx.depth === depth && depth !== 1
const isThreadedChildAdjacentBot =
isThreadedChild && nextPost?.ctx.depth === depth
return (
<PostOuterWrapper
post={post}
prevPost={prevPost}
depth={depth}
showParentReplyLine={!!showParentReplyLine}
treeView={treeView}
@ -525,7 +524,7 @@ let PostThreadItemLoaded = ({
timestamp={post.indexedAt}
postHref={postHref}
showAvatar={isThreadedChild}
avatarSize={20}
avatarSize={28}
displayNameType="md-bold"
displayNameStyle={isThreadedChild && s.ml2}
style={isThreadedChild && s.mb2}
@ -606,7 +605,6 @@ PostThreadItemLoaded = memo(PostThreadItemLoaded)
function PostOuterWrapper({
post,
prevPost,
treeView,
depth,
showParentReplyLine,
@ -614,7 +612,6 @@ function PostOuterWrapper({
children,
}: React.PropsWithChildren<{
post: AppBskyFeedDefs.PostView
prevPost: ThreadPost | undefined
treeView: boolean
depth: number
showParentReplyLine: boolean
@ -632,18 +629,18 @@ function PostOuterWrapper({
styles.cursor,
{
flexDirection: 'row',
paddingLeft: isMobile ? 10 : 6,
borderTopWidth: !prevPost ? 1 : 0,
paddingHorizontal: isMobile ? 10 : 6,
borderTopWidth: depth === 1 ? 1 : 0,
},
]}>
{Array.from(Array(depth)).map((_, n: number) => (
{Array.from(Array(depth - 1)).map((_, n: number) => (
<View
key={`${post.uri}-padding-${n}`}
style={{
borderLeftWidth: 2,
borderLeftColor: pal.colors.border,
marginLeft: isMobile ? 6 : 14,
paddingLeft: isMobile ? 6 : 12,
marginLeft: isMobile ? 6 : 12,
paddingLeft: isMobile ? 6 : 8,
}}
/>
))}