From 535d4d6cf74cfb49a70804bccb4de1613d2ac09c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 4 Sep 2025 17:30:15 -0500 Subject: 📓 Bookmarks (#8976) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add button to controls, respace * Hook up shadow and mutation * Add Bookmarks screen * Build out Bookmarks screen * Handle removals via shadow * Use truncateAndInvalidate strategy * Add empty state * Add toasts * Add undo buttons to toasts * Stage NUX, needs image * Finesse post controls * New reply icon * Use curvier variant of repost icon * Prevent layout shift with align_start * Update api pkg * Swap in new image * Limit spacing on desktop * Rm decimals over 10k * Better optimistic adding/removing * Add metrics * Comment * Remove unused code block * Remove debug limit * Fork shadow for web/native * Tweak alt * add preventExpansion: true * Refine hitslop * Add count to anchor * Reduce space in compact mode --------- Co-authored-by: Samuel Newman --- src/components/PostControls/PostControlButton.tsx | 27 +++++++++++++++++------ 1 file changed, 20 insertions(+), 7 deletions(-) (limited to 'src/components/PostControls/PostControlButton.tsx') diff --git a/src/components/PostControls/PostControlButton.tsx b/src/components/PostControls/PostControlButton.tsx index ae69b1322..f7070c4c8 100644 --- a/src/components/PostControls/PostControlButton.tsx +++ b/src/components/PostControls/PostControlButton.tsx @@ -1,13 +1,14 @@ import {createContext, useContext, useMemo} from 'react' -import {type GestureResponderEvent, type View} from 'react-native' +import {type GestureResponderEvent, type Insets, type View} from 'react-native' -import {POST_CTRL_HITSLOP} from '#/lib/constants' import {useHaptics} from '#/lib/haptics' import {atoms as a, useTheme} from '#/alf' import {Button, type ButtonProps} from '#/components/Button' import {type Props as SVGIconProps} from '#/components/icons/common' import {Text, type TextProps} from '#/components/Typography' +export const DEFAULT_HITSLOP = {top: 5, bottom: 10, left: 10, right: 10} + const PostControlContext = createContext<{ big?: boolean active?: boolean @@ -25,12 +26,13 @@ export function PostControlButton({ active, activeColor, ...props -}: ButtonProps & { +}: Omit & { ref?: React.Ref active?: boolean big?: boolean color?: string activeColor?: string + hitSlop?: Insets }) { const t = useTheme() const playHaptic = useHaptics() @@ -83,8 +85,11 @@ export function PostControlButton({ shape="round" variant="ghost" color="secondary" - hitSlop={POST_CTRL_HITSLOP} - {...props}> + {...props} + hitSlop={{ + ...DEFAULT_HITSLOP, + ...(props.hitSlop || {}), + }}> {typeof children === 'function' ? ( args => ( @@ -102,12 +107,20 @@ export function PostControlButton({ export function PostControlButtonIcon({ icon: Comp, -}: { + style, + ...rest +}: SVGIconProps & { icon: React.ComponentType }) { const {big, color} = useContext(PostControlContext) - return + return ( + + ) } export function PostControlButtonText({style, ...props}: TextProps) { -- cgit 1.4.1