An ATproto social media client -- with an independent Appview.
Tighten up the home feed
+50
-17
-1
src/view/com/post/Post.tsx
-1
src/view/com/post/Post.tsx
+50
-16
src/view/com/posts/FeedItem.tsx
+50
-16
src/view/com/posts/FeedItem.tsx
···
2
2
import {observer} from 'mobx-react-lite'
3
3
import {StyleSheet, Text, View} from 'react-native'
4
4
import Clipboard from '@react-native-clipboard/clipboard'
5
-
import Svg, {Circle} from 'react-native-svg'
5
+
import Svg, {Circle, Line} from 'react-native-svg'
6
6
import {AtUri} from '../../../third-party/uri'
7
7
import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
8
8
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
···
19
19
import {s, colors} from '../../lib/styles'
20
20
import {useStores} from '../../../state'
21
21
22
-
const TOP_REPLY_LINE_LENGTH = 12
23
-
const REPLYING_TO_LINE_LENGTH = 8
22
+
const TOP_REPLY_LINE_LENGTH = 8
24
23
25
24
export const FeedItem = observer(function FeedItem({
26
25
item,
···
97
96
(!item.repostedBy && !item.trendedBy && item.additionalParentPost?.thread)
98
97
const outerStyles = [
99
98
styles.outer,
100
-
isChild ? styles.outerNoTop : undefined,
99
+
isChild
100
+
? item._isThreadChild
101
+
? styles.outerSmallTop
102
+
: styles.outerNoTop
103
+
: undefined,
101
104
item._isThreadParent ? styles.outerNoBottom : undefined,
102
105
]
103
106
return (
···
111
114
/>
112
115
) : undefined}
113
116
<Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
114
-
{isChild && <View style={styles.topReplyLine} />}
117
+
{isChild && (
118
+
<View
119
+
style={[
120
+
styles.topReplyLine,
121
+
item._isThreadChild ? styles.topReplyLineSmallAvi : undefined,
122
+
]}
123
+
/>
124
+
)}
115
125
{item._isThreadParent && (
116
126
<View
117
127
style={[
···
175
185
onDeletePost={onDeletePost}
176
186
/>
177
187
) : undefined}
178
-
{!item._isThreadChild && replyHref !== '' && (
179
-
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
180
-
<Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
188
+
{!isChild && replyHref !== '' && (
189
+
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
190
+
<FontAwesomeIcon
191
+
icon="reply"
192
+
size={9}
193
+
style={[s.gray4, s.mr5]}
194
+
/>
195
+
<Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
181
196
<Link href={replyHref} title="Parent post">
182
197
<UserInfoText
183
198
did={replyAuthorDid}
184
-
style={[s.f15, s.blue3]}
199
+
style={[s.f12, s.gray5]}
185
200
prefix="@"
186
201
/>
187
202
</Link>
···
220
235
noFeedback>
221
236
<View style={styles.viewFullThreadDots}>
222
237
<Svg width="4" height="30">
223
-
<Circle x="2" y="5" r="1.5" fill={colors.gray3} />
224
-
<Circle x="2" y="11" r="1.5" fill={colors.gray3} />
225
-
<Circle x="2" y="17" r="1.5" fill={colors.gray3} />
238
+
<Line
239
+
x1="2"
240
+
y1="0"
241
+
x2="2"
242
+
y2="5"
243
+
stroke={colors.gray2}
244
+
strokeWidth="2"
245
+
/>
246
+
<Circle x="2" y="10" r="1.5" fill={colors.gray3} />
247
+
<Circle x="2" y="16" r="1.5" fill={colors.gray3} />
248
+
<Circle x="2" y="22" r="1.5" fill={colors.gray3} />
226
249
</Svg>
227
250
</View>
228
251
<Text style={styles.viewFullThreadText}>View full thread</Text>
···
242
265
},
243
266
outerNoTop: {
244
267
marginTop: 0,
268
+
paddingTop: 0,
269
+
borderTopLeftRadius: 0,
270
+
borderTopRightRadius: 0,
271
+
},
272
+
outerSmallTop: {
273
+
marginTop: 0,
274
+
paddingTop: 8,
245
275
borderTopLeftRadius: 0,
246
276
borderTopRightRadius: 0,
247
277
},
248
278
outerNoBottom: {
249
279
marginBottom: 0,
280
+
paddingBottom: 0,
250
281
borderBottomLeftRadius: 0,
251
282
borderBottomRightRadius: 0,
252
283
},
253
284
topReplyLine: {
254
285
position: 'absolute',
255
286
left: 34,
256
-
top: -1 * TOP_REPLY_LINE_LENGTH + 10,
287
+
top: -1 * TOP_REPLY_LINE_LENGTH,
257
288
height: TOP_REPLY_LINE_LENGTH,
258
289
borderLeftWidth: 2,
259
290
borderLeftColor: colors.gray2,
260
291
},
292
+
topReplyLineSmallAvi: {
293
+
height: TOP_REPLY_LINE_LENGTH + 10,
294
+
},
261
295
bottomReplyLine: {
262
296
position: 'absolute',
263
297
left: 34,
264
-
top: 70,
298
+
top: 60,
265
299
bottom: 0,
266
300
borderLeftWidth: 2,
267
301
borderLeftColor: colors.gray2,
···
292
326
alignItems: 'center',
293
327
flexWrap: 'wrap',
294
328
paddingBottom: 8,
295
-
minHeight: 36,
296
329
},
297
330
postText: {
298
331
fontFamily: 'System',
···
304
337
},
305
338
viewFullThread: {
306
339
backgroundColor: colors.white,
307
-
paddingTop: 4,
340
+
paddingTop: 12,
341
+
paddingBottom: 4,
308
342
paddingLeft: 72,
309
343
},
310
344
viewFullThreadDots: {