Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

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
··· 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,