robinwobin.dev / witchsky.app
forked from jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Move menu controls into post footers and improve meta info rendering

Paul Frazee 7f8f53b0 0e85b332

+58 -53
+10 -8
src/view/com/post-thread/PostThreadItem.tsx
··· 222 222 <View style={[s.pl10, s.pb5]}> 223 223 <PostCtrls 224 224 big 225 + itemHref={itemHref} 226 + itemTitle={itemTitle} 227 + isAuthor={item.post.author.did === store.me.did} 225 228 isReposted={!!item.post.viewer.repost} 226 229 isUpvoted={!!item.post.viewer.upvote} 227 230 onPressReply={onPressReply} 228 231 onPressToggleRepost={onPressToggleRepost} 229 232 onPressToggleUpvote={onPressToggleUpvote} 233 + onCopyPostText={onCopyPostText} 234 + onDeletePost={onDeletePost} 230 235 /> 231 236 </View> 232 237 </View> ··· 276 281 </View> 277 282 <View style={styles.layoutContent}> 278 283 <PostMeta 279 - itemHref={itemHref} 280 - itemTitle={itemTitle} 281 284 authorHref={authorHref} 282 285 authorHandle={item.post.author.handle} 283 286 authorDisplayName={item.post.author.displayName} 284 287 timestamp={item.post.indexedAt} 285 - isAuthor={item.post.author.did === store.me.did} 286 - onCopyPostText={onCopyPostText} 287 - onDeletePost={onDeletePost} 288 288 /> 289 289 {item.post.author.viewer?.muted ? ( 290 290 <View style={[styles.mutedWarning, pal.btn]}> ··· 304 304 )} 305 305 <PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} /> 306 306 <PostCtrls 307 - replyCount={item.post.replyCount} 308 - repostCount={item.post.repostCount} 309 - upvoteCount={item.post.upvoteCount} 307 + itemHref={itemHref} 308 + itemTitle={itemTitle} 309 + isAuthor={item.post.author.did === store.me.did} 310 310 isReposted={!!item.post.viewer.repost} 311 311 isUpvoted={!!item.post.viewer.upvote} 312 312 onPressReply={onPressReply} 313 313 onPressToggleRepost={onPressToggleRepost} 314 314 onPressToggleUpvote={onPressToggleUpvote} 315 + onCopyPostText={onCopyPostText} 316 + onDeletePost={onDeletePost} 315 317 /> 316 318 </View> 317 319 </View>
+5 -5
src/view/com/post/Post.tsx
··· 154 154 </View> 155 155 <View style={styles.layoutContent}> 156 156 <PostMeta 157 - itemHref={itemHref} 158 - itemTitle={itemTitle} 159 157 authorHref={authorHref} 160 158 authorHandle={item.post.author.handle} 161 159 authorDisplayName={item.post.author.displayName} 162 160 timestamp={item.post.indexedAt} 163 - isAuthor={item.post.author.did === store.me.did} 164 - onCopyPostText={onCopyPostText} 165 - onDeletePost={onDeletePost} 166 161 /> 167 162 {replyHref !== '' && ( 168 163 <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}> ··· 198 193 )} 199 194 <PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} /> 200 195 <PostCtrls 196 + itemHref={itemHref} 197 + itemTitle={itemTitle} 198 + isAuthor={item.post.author.did === store.me.did} 201 199 replyCount={item.post.replyCount} 202 200 repostCount={item.post.repostCount} 203 201 upvoteCount={item.post.upvoteCount} ··· 206 204 onPressReply={onPressReply} 207 205 onPressToggleRepost={onPressToggleRepost} 208 206 onPressToggleUpvote={onPressToggleUpvote} 207 + onCopyPostText={onCopyPostText} 208 + onDeletePost={onDeletePost} 209 209 /> 210 210 </View> 211 211 </View>
+5 -5
src/view/com/posts/FeedItem.tsx
··· 177 177 </View> 178 178 <View style={styles.layoutContent}> 179 179 <PostMeta 180 - itemHref={itemHref} 181 - itemTitle={itemTitle} 182 180 authorHref={authorHref} 183 181 authorHandle={item.post.author.handle} 184 182 authorDisplayName={item.post.author.displayName} 185 183 timestamp={item.post.indexedAt} 186 - isAuthor={item.post.author.did === store.me.did} 187 - onCopyPostText={onCopyPostText} 188 - onDeletePost={onDeletePost} 189 184 /> 190 185 {!isChild && replyHref !== '' && ( 191 186 <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}> ··· 226 221 )} 227 222 <PostEmbeds embed={item.post.embed} style={styles.postEmbeds} /> 228 223 <PostCtrls 224 + itemHref={itemHref} 225 + itemTitle={itemTitle} 226 + isAuthor={item.post.author.did === store.me.did} 229 227 replyCount={item.post.replyCount} 230 228 repostCount={item.post.repostCount} 231 229 upvoteCount={item.post.upvoteCount} ··· 234 232 onPressReply={onPressReply} 235 233 onPressToggleRepost={onPressToggleRepost} 236 234 onPressToggleUpvote={onPressToggleUpvote} 235 + onCopyPostText={onCopyPostText} 236 + onDeletePost={onDeletePost} 237 237 /> 238 238 </View> 239 239 </View>
+23 -1
src/view/com/util/PostCtrls.tsx
··· 3 3 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 4 4 import ReactNativeHapticFeedback from 'react-native-haptic-feedback' 5 5 import {Text} from './text/Text' 6 + import {PostDropdownBtn} from './forms/DropdownButton' 6 7 import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons' 7 8 import {s, colors} from '../../lib/styles' 8 9 import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue' 9 10 10 11 interface PostCtrlsOpts { 12 + itemHref: string 13 + itemTitle: string 14 + isAuthor: boolean 11 15 big?: boolean 12 16 replyCount?: number 13 17 repostCount?: number ··· 17 21 onPressReply: () => void 18 22 onPressToggleRepost: () => void 19 23 onPressToggleUpvote: () => void 24 + onCopyPostText: () => void 25 + onDeletePost: () => void 20 26 } 21 27 22 28 const redgray = '#7A6161' ··· 169 175 ) : undefined} 170 176 </TouchableOpacity> 171 177 </View> 172 - <View style={s.flex1}></View> 178 + <View style={s.flex1}> 179 + {opts.big ? undefined : ( 180 + <PostDropdownBtn 181 + style={styles.ctrl} 182 + itemHref={opts.itemHref} 183 + itemTitle={opts.itemTitle} 184 + isAuthor={opts.isAuthor} 185 + onCopyPostText={opts.onCopyPostText} 186 + onDeletePost={opts.onDeletePost}> 187 + <FontAwesomeIcon 188 + icon="ellipsis-h" 189 + size={16} 190 + style={[s.mt2, s.mr5, sRedgray]} 191 + /> 192 + </PostDropdownBtn> 193 + )} 194 + </View> 173 195 </View> 174 196 ) 175 197 }
+15 -34
src/view/com/util/PostMeta.tsx
··· 1 1 import React from 'react' 2 - import {StyleSheet, View} from 'react-native' 3 - import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 2 + import {Platform, StyleSheet, View} from 'react-native' 4 3 import {Link} from '../util/Link' 5 4 import {Text} from './text/Text' 6 - import {PostDropdownBtn} from './forms/DropdownButton' 7 - import {s} from '../../lib/styles' 8 5 import {ago} from '../../../lib/strings' 9 - import {useTheme} from '../../lib/ThemeContext' 10 6 import {usePalette} from '../../lib/hooks/usePalette' 11 7 12 8 interface PostMetaOpts { 13 - itemHref: string 14 - itemTitle: string 15 9 authorHref: string 16 10 authorHandle: string 17 11 authorDisplayName: string | undefined 18 12 timestamp: string 19 - isAuthor: boolean 20 - onCopyPostText: () => void 21 - onDeletePost: () => void 22 13 } 23 14 24 15 export function PostMeta(opts: PostMetaOpts) { 25 - const theme = useTheme() 26 16 const pal = usePalette('default') 27 17 let displayName = opts.authorDisplayName || opts.authorHandle 28 18 let handle = opts.authorHandle ··· 31 21 // Android simply cannot handle the truncation case we need 32 22 // so we have to do it manually here 33 23 // -prf 34 - if (displayName.length + handle.length > 26) { 35 - if (displayName.length > 26) { 36 - displayName = displayName.slice(0, 23) + '...' 37 - } else { 38 - handle = handle.slice(0, 23 - displayName.length) + '...' 39 - if (handle.endsWith('....')) { 40 - handle = handle.slice(0, -4) + '...' 24 + if (Platform.OS === 'android') { 25 + if (displayName.length + handle.length > 26) { 26 + if (displayName.length > 26) { 27 + displayName = displayName.slice(0, 23) + '...' 28 + } else { 29 + handle = handle.slice(0, 23 - displayName.length) + '...' 30 + if (handle.endsWith('....')) { 31 + handle = handle.slice(0, -4) + '...' 32 + } 41 33 } 42 34 } 43 35 } ··· 45 37 return ( 46 38 <View style={styles.meta}> 47 39 <Link 48 - style={styles.metaItem} 40 + style={[styles.metaItem, styles.maxWidth]} 49 41 href={opts.authorHref} 50 42 title={opts.authorHandle}> 51 43 <Text type="h5" style={[pal.text]} numberOfLines={1}> ··· 60 52 <Text type="h6" style={[styles.metaItem, pal.textLight]}> 61 53 &middot; {ago(opts.timestamp)} 62 54 </Text> 63 - <View style={s.flex1} /> 64 - <PostDropdownBtn 65 - style={[styles.metaItem, s.pl5]} 66 - itemHref={opts.itemHref} 67 - itemTitle={opts.itemTitle} 68 - isAuthor={opts.isAuthor} 69 - onCopyPostText={opts.onCopyPostText} 70 - onDeletePost={opts.onDeletePost}> 71 - <FontAwesomeIcon 72 - icon="ellipsis-h" 73 - size={14} 74 - style={[s.mt2, s.mr5, pal.text]} 75 - /> 76 - </PostDropdownBtn> 77 55 </View> 78 56 ) 79 57 } ··· 81 59 const styles = StyleSheet.create({ 82 60 meta: { 83 61 flexDirection: 'row', 84 - alignItems: 'center', 62 + alignItems: 'baseline', 85 63 paddingTop: 0, 86 64 paddingBottom: 2, 87 65 }, 88 66 metaItem: { 89 67 paddingRight: 5, 68 + }, 69 + maxWidth: { 70 + maxWidth: '70%', 90 71 }, 91 72 })