diff --git a/src/view/com/Tag.tsx b/src/view/com/Tag.tsx index 9e1c2c6b12..eeba4c8675 100644 --- a/src/view/com/Tag.tsx +++ b/src/view/com/Tag.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {StyleSheet, Pressable} from 'react-native' +import {StyleSheet, Pressable, StyleProp, TextStyle} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -7,18 +7,25 @@ import { import {isWeb} from 'platform/detection' import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' import {Text, CustomTextProps} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' export function Tag({ value, textSize, + smallSigil, + style, }: { value: string textSize?: CustomTextProps['type'] + smallSigil?: boolean + style?: StyleProp }) { - const pal = usePalette('default') + const theme = useTheme() const type = textSize || 'xs-medium' + const typeFontSize = theme.typography[type].fontSize || 16 + const hashtagFontSize = typeFontSize * (smallSigil ? 0.8 : 1) return ( + style={style}> + + # + + {value} + ) } diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 0f9964f09a..e5a5c56297 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -53,7 +53,6 @@ export const PostThreadItem = observer(function PostThreadItem({ const [deleted, setDeleted] = React.useState(false) const styles = useStyles() const record = item.postRecord - const hasEngagement = item.post.likeCount || item.post.repostCount const itemUri = item.post.uri const itemCid = item.post.cid @@ -332,25 +331,29 @@ export const PostThreadItem = observer(function PostThreadItem({ )} - {AppBskyFeedPost.isRecord(item.post.record) && - item.post.record.tags?.length ? ( - - {item.post.record.tags.map(tag => ( - - ))} - - ) : null} + + {item.post.repostCount ? ( + + + + {formatCount(item.post.repostCount)} + {' '} + {pluralize(item.post.repostCount, 'repost')} + + + ) : null} + {item.post.likeCount ? ( + + + + {formatCount(item.post.likeCount)} + {' '} + {pluralize(item.post.likeCount, 'like')} + + + ) : null} + {niceDate(item.post.indexedAt)} + - {hasEngagement ? ( - - {item.post.repostCount ? ( - - - - {formatCount(item.post.repostCount)} - {' '} - {pluralize(item.post.repostCount, 'repost')} - - - ) : ( - <> - )} - {item.post.likeCount ? ( - - - - {formatCount(item.post.likeCount)} - {' '} - {pluralize(item.post.likeCount, 'like')} - - - ) : ( - <> - )} - - ) : ( - <> - )} - + - {niceDate(post.indexedAt)} + {needsTranslation && ( - <> - - - Translate - - + + Translate + )} + {hasTags && AppBskyFeedPost.isRecord(post.record) + ? post.record.tags!.map(tag => ( + + )) + : null} ) } @@ -714,7 +701,7 @@ const useStyles = () => { }, postTextLargeContainer: { paddingHorizontal: 0, - paddingBottom: 10, + // paddingBottom: 10, }, translateLink: { marginBottom: 6, @@ -727,14 +714,14 @@ const useStyles = () => { }, expandedInfo: { flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'baseline', + gap: 12, paddingVertical: 10, + paddingHorizontal: 2, borderTopWidth: 1, borderBottomWidth: 1, marginTop: 5, - marginBottom: 15, - }, - expandedInfoItem: { - marginRight: 10, }, loadMore: { flexDirection: 'row', diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index 6915d3e083..3476629a9b 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -148,19 +148,22 @@ export const TextLink = observer(function TextLink({ title, onPress, warnOnMismatchingLabel, + children, ...orgProps -}: { - testID?: string - type?: TypographyVariant - style?: StyleProp - href: string - text: string | JSX.Element | React.ReactNode - numberOfLines?: number - lineHeight?: number - dataSet?: any - title?: string - warnOnMismatchingLabel?: boolean -} & TextProps) { +}: React.PropsWithChildren< + { + testID?: string + type?: TypographyVariant + style?: StyleProp + href: string + text: string | JSX.Element | React.ReactNode + numberOfLines?: number + lineHeight?: number + dataSet?: any + title?: string + warnOnMismatchingLabel?: boolean + } & TextProps +>) { const {...props} = useLinkProps({to: sanitizeUrl(href)}) const store = useStores() const navigation = useNavigation() @@ -215,7 +218,7 @@ export const TextLink = observer(function TextLink({ hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window {...props} {...orgProps}> - {text} + {children || text} ) }) diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx index 18a040f14c..f41a6f3dd0 100644 --- a/src/view/com/util/text/RichText.tsx +++ b/src/view/com/util/text/RichText.tsx @@ -95,7 +95,15 @@ export function RichText({ />, ) } else if (tag && AppBskyRichtextFacet.validateTag(tag).success) { - els.push() + els.push( + , + ) } else { els.push(segment.text) }