diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 4dd6f33e..c63364ec 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -1,6 +1,6 @@ import React, {useMemo} from 'react' import {observer} from 'mobx-react-lite' -import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native' +import {StyleSheet, Text, View} from 'react-native' import Svg, {Line} from 'react-native-svg' import {AtUri} from '../../../third-party/uri' import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post' @@ -13,6 +13,7 @@ import {UserAvatar} from '../util/UserAvatar' import {s, colors} from '../../lib/styles' import {ago, pluralize} from '../../lib/strings' import {useStores} from '../../../state' +import {PostMeta} from '../util/PostMeta' import {PostCtrls} from '../util/PostCtrls' const PARENT_REPLY_LINE_LENGTH = 8 @@ -93,7 +94,7 @@ export const PostThreadItem = observer(function PostThreadItem({ style={styles.metaItem} href={authorHref} title={authorTitle}> - + {item.author.displayName || item.author.handle} @@ -117,7 +118,9 @@ export const PostThreadItem = observer(function PostThreadItem({ style={styles.metaItem} href={authorHref} title={authorTitle}> - @{item.author.handle} + + @{item.author.handle} + @@ -240,36 +243,14 @@ export const PostThreadItem = observer(function PostThreadItem({ /> - - - - {item.author.displayName || item.author.handle} - - - - @{item.author.handle} - - - · {ago(item.indexedAt)} - - - - - - + {item.replyingToAuthor && item.replyingToAuthor !== item.author.handle && ( @@ -350,6 +331,7 @@ const styles = StyleSheet.create({ }, metaItem: { paddingRight: 5, + maxWidth: 240, }, postText: { fontFamily: 'Helvetica Neue', diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 22bdd27a..83bf8bed 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -2,17 +2,12 @@ import React, {useState, useEffect} from 'react' import {observer} from 'mobx-react-lite' import {AtUri} from '../../../third-party/uri' import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post' -import { - ActivityIndicator, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native' +import {ActivityIndicator, StyleSheet, Text, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {PostThreadViewModel} from '../../../state/models/post-thread-view' import {Link} from '../util/Link' import {UserInfoText} from '../util/UserInfoText' +import {PostMeta} from '../util/PostMeta' import {PostCtrls} from '../util/PostCtrls' import {RichText} from '../util/RichText' import {UserAvatar} from '../util/UserAvatar' @@ -100,19 +95,14 @@ export const Post = observer(function Post({uri}: {uri: string}) { /> - - - - {item.author.displayName || item.author.handle} - - - - @{item.author.handle} - - - · {ago(item.indexedAt)} - - + {replyHref !== '' && ( @@ -168,14 +158,6 @@ const styles = StyleSheet.create({ layoutContent: { flex: 1, }, - meta: { - flexDirection: 'row', - paddingTop: 2, - paddingBottom: 2, - }, - metaItem: { - paddingRight: 5, - }, postTextContainer: { flexDirection: 'row', alignItems: 'center', diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index fbcb979a..d1e891d6 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -7,13 +7,12 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FeedItemModel} from '../../../state/models/feed-view' import {SharePostModel} from '../../../state/models/shell-ui' import {Link} from '../util/Link' -import {PostDropdownBtn} from '../util/DropdownBtn' import {UserInfoText} from '../util/UserInfoText' +import {PostMeta} from '../util/PostMeta' import {PostCtrls} from '../util/PostCtrls' import {RichText} from '../util/RichText' import {UserAvatar} from '../util/UserAvatar' import {s, colors} from '../../lib/styles' -import {ago} from '../../lib/strings' import {useStores} from '../../../state' export const FeedItem = observer(function FeedItem({ @@ -101,36 +100,14 @@ export const FeedItem = observer(function FeedItem({ /> - - - - {item.author.displayName || item.author.handle} - - - - @{item.author.handle} - - - · {ago(item.indexedAt)} - - - - - - + {replyHref !== '' && ( Replying to @@ -195,14 +172,6 @@ const styles = StyleSheet.create({ layoutContent: { flex: 1, }, - meta: { - flexDirection: 'row', - paddingTop: 2, - paddingBottom: 2, - }, - metaItem: { - paddingRight: 5, - }, postTextContainer: { flexDirection: 'row', alignItems: 'center', diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx new file mode 100644 index 00000000..a9cf74e1 --- /dev/null +++ b/src/view/com/util/PostMeta.tsx @@ -0,0 +1,71 @@ +import React from 'react' +import {StyleSheet, Text, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Link} from '../util/Link' +import {PostDropdownBtn} from '../util/DropdownBtn' +import {s} from '../../lib/styles' +import {ago} from '../../lib/strings' + +interface PostMetaOpts { + itemHref: string + itemTitle: string + authorHref: string + authorHandle: string + authorDisplayName: string | undefined + timestamp: string +} + +export function PostMeta(opts: PostMetaOpts) { + return ( + + + + + {opts.authorDisplayName || opts.authorHandle} + + + + + @{opts.authorHandle} + + + + + · {ago(opts.timestamp)} + + + + + + + ) +} + +const styles = StyleSheet.create({ + meta: { + flexDirection: 'row', + alignItems: 'center', + paddingTop: 2, + paddingBottom: 2, + }, + metaNames: { + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + maxWidth: 240, + overflow: 'hidden', + }, + metaItem: { + maxWidth: 240, + paddingRight: 5, + }, +})