diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 19bdfc1c1f..9b2c463e84 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -23,6 +23,7 @@ import {PostMeta} from '../util/PostMeta' import {PostEmbeds} from '../util/post-embeds' import {PostCtrls} from '../util/PostCtrls' import {PostContainer} from '../util/PostContainer' +import {ContentContainer} from '../util/ContentContainer' import {ErrorMessage} from '../util/error/ErrorMessage' import {usePalette} from 'lib/hooks/usePalette' @@ -193,17 +194,24 @@ export const PostThreadItem = observer(function PostThreadItem({ - {item.richText?.text ? ( - - - - ) : undefined} - + + {item.richText?.text ? ( + + + + ) : undefined} + + {item._isHighlightedPost && hasEngagement ? ( {item.post.repostCount ? ( diff --git a/src/view/com/util/ContentContainer.tsx b/src/view/com/util/ContentContainer.tsx new file mode 100644 index 0000000000..85d85037f8 --- /dev/null +++ b/src/view/com/util/ContentContainer.tsx @@ -0,0 +1,113 @@ +import React from 'react' +import { + StyleProp, + StyleSheet, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native' +import {ComAtprotoLabelDefs} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {usePalette} from 'lib/hooks/usePalette' +import {Text} from './text/Text' +import {getLabelValueGroup} from 'lib/labeling/helpers' +import {addStyle} from 'lib/styles' + +export function ContentContainer({ + testID, + isMuted, + labels, + style, + children, +}: React.PropsWithChildren<{ + testID?: string + isMuted: boolean + labels: ComAtprotoLabelDefs.Label[] | undefined + style?: StyleProp +}>) { + const pal = usePalette('default') + const [override, setOverride] = React.useState(false) + + if (!isMuted && !labels?.length) { + return ( + + {children} + + ) + } + + const label = labels?.[0] // TODO use config to settle on most relevant item + const labelGroup = getLabelValueGroup(label?.val || '') + if (labelGroup.id === 'illegal') { + return <> + } + + return ( + + + + + {isMuted ? ( + <>Post from an account you muted. + ) : label ? ( + <>Warning: {labelGroup.title} + ) : ( + '' + )} + + setOverride(v => !v)}> + + {override ? 'Hide' : 'Show'} + + + + {override && ( + + + {children} + + + )} + + ) +} + +const styles = StyleSheet.create({ + container: { + marginBottom: 10, + borderWidth: 1, + borderRadius: 12, + }, + description: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 14, + paddingHorizontal: 18, + borderRadius: 12, + }, + descriptionOpen: { + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + }, + icon: { + marginRight: 10, + }, + showBtn: { + marginLeft: 'auto', + }, + childrenContainer: { + paddingHorizontal: 8, + paddingTop: 8, + }, + child: {}, +}) diff --git a/src/view/com/util/PostContainer.tsx b/src/view/com/util/PostContainer.tsx index d1b7454217..08807346ab 100644 --- a/src/view/com/util/PostContainer.tsx +++ b/src/view/com/util/PostContainer.tsx @@ -24,9 +24,9 @@ export function PostContainer({ }: React.PropsWithChildren<{ testID?: string href: string - isMuted?: boolean - style: StyleProp + isMuted: boolean labels: ComAtprotoLabelDefs.Label[] | undefined + style: StyleProp }>) { const pal = usePalette('default') const [override, setOverride] = React.useState(false)