acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

rm replyLine

Browse Source
This commit is contained in:
Samuel Newman
2026-04-17 11:32:23 +03:00
parent c52f034939
commit 8023a632ba
4 changed files with 82 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/themes.ts
-6
View File
@@ -21,8 +21,6 @@ export const defaultTheme: Theme = {
icon: lightPalette.contrast_500,
// non-standard
replyLine: lightPalette.contrast_100,
replyLineDot: lightPalette.contrast_200,
postCtrl: lightPalette.contrast_500,
brandText: lightPalette.primary_500,
emptyStateIcon: lightPalette.contrast_300,
@@ -304,8 +302,6 @@ export const darkTheme: Theme = {
icon: darkPalette.contrast_500,
// non-standard
replyLine: darkPalette.contrast_200,
replyLineDot: darkPalette.contrast_200,
postCtrl: darkPalette.contrast_500,
brandText: darkPalette.primary_500,
emptyStateIcon: darkPalette.contrast_300,
@@ -350,8 +346,6 @@ export const dimTheme: Theme = {
icon: dimPalette.contrast_500,
// non-standard
replyLine: dimPalette.contrast_200,
replyLineDot: dimPalette.contrast_200,
postCtrl: dimPalette.contrast_500,
brandText: dimPalette.primary_500,
emptyStateIcon: dimPalette.contrast_300,
src/view/com/post/Post.tsx
+18 -8
View File
@@ -12,10 +12,8 @@ import {useQueryClient} from '@tanstack/react-query'
import {MAX_POST_LINES} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {colors} from '#/lib/styles'
import {
POST_TOMBSTONE,
type Shadow,
@@ -26,7 +24,7 @@ import {unstableCacheProfileView} from '#/state/queries/profile'
import {Link} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a} from '#/alf'
import {atoms as a, select, useTheme} from '#/alf'
import {
GalleryBleed,
maybeApplyGalleryOffsetStyles,
@@ -119,7 +117,7 @@ function PostInner({
onBeforePress?: () => void
}) {
const queryClient = useQueryClient()
const pal = usePalette('default')
const t = useTheme()
const {openComposer} = useOpenComposer()
const [limitLines, setLimitLines] = useState(
() => countLines(richText?.text) >= MAX_POST_LINES,
@@ -164,8 +162,8 @@ function PostInner({
href={itemHref}
style={[
styles.outer,
pal.border,
!hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
t.atoms.border_contrast_low,
!hideTopBorder && a.border_t,
style,
]}
onBeforePress={onBeforePress}
@@ -176,7 +174,20 @@ function PostInner({
setHover(false)
}}>
<SubtleHover hover={hover} />
{showReplyLine && <View style={styles.replyLine} />}
{showReplyLine && (
<View
style={[
styles.replyLine,
{
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
},
]}
/>
)}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
@@ -290,7 +301,6 @@ const styles = StyleSheet.create({
top: 70,
bottom: 0,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,
},
contentHider: {
marginBottom: 2,
src/view/com/posts/PostFeedItem.tsx
+13 -5
View File
@@ -33,7 +33,7 @@ import {
import {Link} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a} from '#/alf'
import {atoms as a, select, useTheme} from '#/alf'
import {
GalleryBleed,
maybeApplyGalleryOffsetStyles,
@@ -167,6 +167,7 @@ let FeedItemInner = ({
const queryClient = useQueryClient()
const {openComposer} = useOpenComposer()
const pal = usePalette('default')
const t = useTheme()
const {currentAccount} = useSession()
const [hover, setHover] = useState(false)
@@ -346,8 +347,11 @@ let FeedItemInner = ({
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
marginBottom: 4,
},
]}
@@ -381,8 +385,11 @@ let FeedItemInner = ({
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
marginTop: live ? 8 : 4,
},
]}
@@ -536,6 +543,7 @@ const styles = StyleSheet.create({
cursor: 'pointer',
},
replyLine: {
flexGrow: 1,
width: 2,
marginLeft: 'auto',
marginRight: 'auto',
src/view/com/posts/ViewFullThread.tsx
+51 -56
View File
@@ -1,75 +1,70 @@
import {useMemo} from 'react'
import {StyleSheet, View} from 'react-native'
import {View} from 'react-native'
import Svg, {Circle, Line} from 'react-native-svg'
import {AtUri} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {atoms as a, select, useTheme} from '#/alf'
import {Link} from '#/components/Link'
import {SubtleHover} from '#/components/SubtleHover'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {Text} from '#/components/Typography'
export function ViewFullThread({uri}: {uri: string}) {
const {
state: hover,
onIn: onHoverIn,
onOut: onHoverOut,
} = useInteractionState()
const pal = usePalette('default')
const t = useTheme()
const itemHref = useMemo(() => {
const urip = new AtUri(uri)
return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
}, [uri])
const {_} = useLingui()
const {t: l} = useLingui()
return (
<Link
style={[styles.viewFullThread]}
href={itemHref}
asAnchor
noFeedback
onPointerEnter={onHoverIn}
onPointerLeave={onHoverOut}>
<SubtleHover
hover={hover}
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
style={{top: 8, bottom: -5}}
/>
<View style={styles.viewFullThreadDots}>
<Svg width="4" height="40">
<Line
x1="2"
y1="0"
x2="2"
y2="15"
stroke={pal.colors.replyLine}
strokeWidth="2"
style={[
a.flex_row,
{
gap: 10,
paddingLeft: 18,
},
]}
to={itemHref}
label={l`View full thread`}>
{({hovered}) => (
<>
<SubtleHover
hover={hovered}
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
style={{top: 8, bottom: -5}}
/>
<Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} />
<Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} />
<Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} />
</Svg>
</View>
<Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
{/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
{_(msg`View full thread`)}
</Text>
<View style={[a.align_center, {width: 42}]}>
<Svg width="4" height="40">
<Line
x1="2"
y1="0"
x2="2"
y2="15"
stroke={select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
})}
strokeWidth="2"
/>
<Circle cx="2" cy="22" r="1.5" fill={t.palette.contrast_200} />
<Circle cx="2" cy="28" r="1.5" fill={t.palette.contrast_200} />
<Circle cx="2" cy="34" r="1.5" fill={t.palette.contrast_200} />
</Svg>
</View>
<Text
style={[
a.text_md,
{color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4},
]}>
{/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
{l`View full thread`}
</Text>
</>
)}
</Link>
)
}
const styles = StyleSheet.create({
viewFullThread: {
flexDirection: 'row',
gap: 10,
paddingLeft: 18,
},
viewFullThreadDots: {
width: 42,
alignItems: 'center',
},
})