forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add subtle web hover to treeview replies (#6142)
* add subtle web hover to treeview replies
* don't highlight indentation
* adjust position
* clean up some styles
authored by
Samuel Newman
and committed by
GitHub
017b7647
aa55798e
+22
-18
+22
-18
src/view/com/post-thread/PostThreadItem.tsx
+22
-18
src/view/com/post-thread/PostThreadItem.tsx
···
38
38
import {atoms as a, useTheme} from '#/alf'
39
39
import {colors} from '#/components/Admonition'
40
40
import {Button} from '#/components/Button'
41
+
import {useInteractionState} from '#/components/hooks/useInteractionState'
41
42
import {CalendarClock_Stroke2_Corner0_Rounded as CalendarClockIcon} from '#/components/icons/CalendarClock'
42
43
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
43
44
import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
···
656
657
hideTopBorder?: boolean
657
658
}>) {
658
659
const t = useTheme()
659
-
const [hover, setHover] = React.useState(false)
660
+
const {
661
+
state: hover,
662
+
onIn: onHoverIn,
663
+
onOut: onHoverOut,
664
+
} = useInteractionState()
660
665
if (treeView && depth > 0) {
661
666
return (
662
667
<View
663
668
style={[
664
669
a.flex_row,
665
670
a.px_sm,
671
+
a.flex_row,
666
672
t.atoms.border_contrast_low,
667
673
styles.cursor,
668
-
{
669
-
flexDirection: 'row',
670
-
borderTopWidth: depth === 1 ? a.border_t.borderTopWidth : 0,
671
-
},
674
+
depth === 1 && a.border_t,
672
675
]}
673
-
onPointerEnter={() => {
674
-
setHover(true)
675
-
}}
676
-
onPointerLeave={() => {
677
-
setHover(false)
678
-
}}>
676
+
onPointerEnter={onHoverIn}
677
+
onPointerLeave={onHoverOut}>
679
678
{Array.from(Array(depth - 1)).map((_, n: number) => (
680
679
<View
681
680
key={`${post.uri}-padding-${n}`}
···
689
688
]}
690
689
/>
691
690
))}
692
-
<View style={{flex: 1}}>{children}</View>
691
+
<View style={a.flex_1}>
692
+
<SubtleWebHover
693
+
hover={hover}
694
+
style={{
695
+
left: (depth === 1 ? 0 : 2) - a.pl_sm.paddingLeft,
696
+
right: -a.pr_sm.paddingRight,
697
+
}}
698
+
/>
699
+
{children}
700
+
</View>
693
701
</View>
694
702
)
695
703
}
696
704
return (
697
705
<View
698
-
onPointerEnter={() => {
699
-
setHover(true)
700
-
}}
701
-
onPointerLeave={() => {
702
-
setHover(false)
703
-
}}
706
+
onPointerEnter={onHoverIn}
707
+
onPointerLeave={onHoverOut}
704
708
style={[
705
709
a.border_t,
706
710
a.px_sm,