Swipeable to delete chat, custom swipeable (#5614) · bwc9876.dev/witchsky.app@58b1d93

+1

assets/icons/envelope_open_stroke2_corner0_rounded.svg

··· 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#080B12" fill-rule="evenodd" d="M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6.386c1.064-.002 2 .86 2 2.001V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6.613c0-1.142.936-2.003 2-2.001V4Zm2 6.946 6 2 6-2V4H6v6.946ZM9 8a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Zm2.367 6.843L4 12.387V19h16v-6.613l-7.367 2.456a2 2 0 0 1-1.265 0Z" clip-rule="evenodd"/></svg>

+5

src/components/icons/EnveopeOpen.tsx

··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const Envelope_Open_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 + path: 'M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6.386c1.064-.002 2 .86 2 2.001V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6.613c0-1.142.936-2.003 2-2.001V4Zm2 6.946 6 2 6-2V4H6v6.946ZM9 8a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Zm2.367 6.843L4 12.387V19h16v-6.613l-7.367 2.456a2 2 0 0 1-1.265 0Z', 5 + })

+410

src/lib/custom-animations/GestureActionView.tsx

··· 1 + import React from 'react' 2 + import {ColorValue, Dimensions, StyleSheet, View} from 'react-native' 3 + import {Gesture, GestureDetector} from 'react-native-gesture-handler' 4 + import Animated, { 5 + clamp, 6 + interpolate, 7 + interpolateColor, 8 + runOnJS, 9 + useAnimatedReaction, 10 + useAnimatedStyle, 11 + useDerivedValue, 12 + useReducedMotion, 13 + useSharedValue, 14 + withSequence, 15 + withTiming, 16 + } from 'react-native-reanimated' 17 + 18 + import {useHaptics} from '#/lib/haptics' 19 + 20 + interface GestureAction { 21 + color: ColorValue 22 + action: () => void 23 + threshold: number 24 + icon: React.ElementType 25 + } 26 + 27 + interface GestureActions { 28 + leftFirst?: GestureAction 29 + leftSecond?: GestureAction 30 + rightFirst?: GestureAction 31 + rightSecond?: GestureAction 32 + } 33 + 34 + const MAX_WIDTH = Dimensions.get('screen').width 35 + const ICON_SIZE = 32 36 + 37 + export function GestureActionView({ 38 + children, 39 + actions, 40 + }: { 41 + children: React.ReactNode 42 + actions: GestureActions 43 + }) { 44 + if ( 45 + (actions.leftSecond && !actions.leftFirst) || 46 + (actions.rightSecond && !actions.rightFirst) 47 + ) { 48 + throw new Error( 49 + 'You must provide the first action before the second action', 50 + ) 51 + } 52 + 53 + const [activeAction, setActiveAction] = React.useState< 54 + 'leftFirst' | 'leftSecond' | 'rightFirst' | 'rightSecond' | null 55 + >(null) 56 + 57 + const haptic = useHaptics() 58 + const isReducedMotion = useReducedMotion() 59 + 60 + const transX = useSharedValue(0) 61 + const clampedTransX = useDerivedValue(() => { 62 + const min = actions.leftFirst ? -MAX_WIDTH : 0 63 + const max = actions.rightFirst ? MAX_WIDTH : 0 64 + return clamp(transX.value, min, max) 65 + }) 66 + 67 + const iconScale = useSharedValue(1) 68 + const isActive = useSharedValue(false) 69 + const hitFirst = useSharedValue(false) 70 + const hitSecond = useSharedValue(false) 71 + 72 + const runPopAnimation = () => { 73 + 'worklet' 74 + if (isReducedMotion) { 75 + return 76 + } 77 + 78 + iconScale.value = withSequence( 79 + withTiming(1.2, {duration: 175}), 80 + withTiming(1, {duration: 100}), 81 + ) 82 + } 83 + 84 + useAnimatedReaction( 85 + () => transX, 86 + () => { 87 + if (transX.value === 0) { 88 + runOnJS(setActiveAction)(null) 89 + } else if (transX.value < 0) { 90 + if ( 91 + actions.leftSecond && 92 + transX.value <= -actions.leftSecond.threshold 93 + ) { 94 + if (activeAction !== 'leftSecond') { 95 + runOnJS(setActiveAction)('leftSecond') 96 + } 97 + } else if (activeAction !== 'leftFirst') { 98 + runOnJS(setActiveAction)('leftFirst') 99 + } 100 + } else if (transX.value > 0) { 101 + if ( 102 + actions.rightSecond && 103 + transX.value > actions.rightSecond.threshold 104 + ) { 105 + if (activeAction !== 'rightSecond') { 106 + runOnJS(setActiveAction)('rightSecond') 107 + } 108 + } else if (activeAction !== 'rightFirst') { 109 + runOnJS(setActiveAction)('rightFirst') 110 + } 111 + } 112 + }, 113 + ) 114 + 115 + const panGesture = Gesture.Pan() 116 + .activeOffsetX([-10, 10]) 117 + // Absurdly high value so it doesn't interfere with the pan gestures above (i.e., scroll) 118 + // reanimated doesn't offer great support for disabling y/x axes :/ 119 + .activeOffsetY([-200, 200]) 120 + .onStart(() => { 121 + 'worklet' 122 + isActive.value = true 123 + }) 124 + .onChange(e => { 125 + 'worklet' 126 + transX.value = e.translationX 127 + 128 + if (e.translationX < 0) { 129 + // Left side 130 + if (actions.leftSecond) { 131 + if ( 132 + e.translationX <= -actions.leftSecond.threshold && 133 + !hitSecond.value 134 + ) { 135 + runPopAnimation() 136 + runOnJS(haptic)() 137 + hitSecond.value = true 138 + } else if ( 139 + hitSecond.value && 140 + e.translationX > -actions.leftSecond.threshold 141 + ) { 142 + runPopAnimation() 143 + hitSecond.value = false 144 + } 145 + } 146 + 147 + if (!hitSecond.value && actions.leftFirst) { 148 + if ( 149 + e.translationX <= -actions.leftFirst.threshold && 150 + !hitFirst.value 151 + ) { 152 + runPopAnimation() 153 + runOnJS(haptic)() 154 + hitFirst.value = true 155 + } else if ( 156 + hitFirst.value && 157 + e.translationX > -actions.leftFirst.threshold 158 + ) { 159 + hitFirst.value = false 160 + } 161 + } 162 + } else if (e.translationX > 0) { 163 + // Right side 164 + if (actions.rightSecond) { 165 + if ( 166 + e.translationX >= actions.rightSecond.threshold && 167 + !hitSecond.value 168 + ) { 169 + runPopAnimation() 170 + runOnJS(haptic)() 171 + hitSecond.value = true 172 + } else if ( 173 + hitSecond.value && 174 + e.translationX < actions.rightSecond.threshold 175 + ) { 176 + runPopAnimation() 177 + hitSecond.value = false 178 + } 179 + } 180 + 181 + if (!hitSecond.value && actions.rightFirst) { 182 + if ( 183 + e.translationX >= actions.rightFirst.threshold && 184 + !hitFirst.value 185 + ) { 186 + runPopAnimation() 187 + runOnJS(haptic)() 188 + hitFirst.value = true 189 + } else if ( 190 + hitFirst.value && 191 + e.translationX < actions.rightFirst.threshold 192 + ) { 193 + hitFirst.value = false 194 + } 195 + } 196 + } 197 + }) 198 + .onEnd(e => { 199 + 'worklet' 200 + if (e.translationX < 0) { 201 + if (hitSecond.value && actions.leftSecond) { 202 + runOnJS(actions.leftSecond.action)() 203 + } else if (hitFirst.value && actions.leftFirst) { 204 + runOnJS(actions.leftFirst.action)() 205 + } 206 + } else if (e.translationX > 0) { 207 + if (hitSecond.value && actions.rightSecond) { 208 + runOnJS(actions.rightSecond.action)() 209 + } else if (hitSecond.value && actions.rightFirst) { 210 + runOnJS(actions.rightFirst.action)() 211 + } 212 + } 213 + transX.value = withTiming(0, {duration: 200}) 214 + hitFirst.value = false 215 + hitSecond.value = false 216 + isActive.value = false 217 + }) 218 + 219 + const composedGesture = Gesture.Simultaneous(panGesture) 220 + 221 + const animatedSliderStyle = useAnimatedStyle(() => { 222 + return { 223 + transform: [{translateX: clampedTransX.value}], 224 + } 225 + }) 226 + 227 + const leftSideInterpolation = React.useMemo(() => { 228 + return createInterpolation({ 229 + firstColor: actions.leftFirst?.color, 230 + secondColor: actions.leftSecond?.color, 231 + firstThreshold: actions.leftFirst?.threshold, 232 + secondThreshold: actions.leftSecond?.threshold, 233 + side: 'left', 234 + }) 235 + }, [actions.leftFirst, actions.leftSecond]) 236 + 237 + const rightSideInterpolation = React.useMemo(() => { 238 + return createInterpolation({ 239 + firstColor: actions.rightFirst?.color, 240 + secondColor: actions.rightSecond?.color, 241 + firstThreshold: actions.rightFirst?.threshold, 242 + secondThreshold: actions.rightSecond?.threshold, 243 + side: 'right', 244 + }) 245 + }, [actions.rightFirst, actions.rightSecond]) 246 + 247 + const interpolation = React.useMemo<{ 248 + inputRange: number[] 249 + outputRange: ColorValue[] 250 + }>(() => { 251 + if (!actions.leftFirst) { 252 + return rightSideInterpolation! 253 + } else if (!actions.rightFirst) { 254 + return leftSideInterpolation! 255 + } else { 256 + return { 257 + inputRange: [ 258 + ...leftSideInterpolation.inputRange, 259 + ...rightSideInterpolation.inputRange, 260 + ], 261 + outputRange: [ 262 + ...leftSideInterpolation.outputRange, 263 + ...rightSideInterpolation.outputRange, 264 + ], 265 + } 266 + } 267 + }, [ 268 + leftSideInterpolation, 269 + rightSideInterpolation, 270 + actions.leftFirst, 271 + actions.rightFirst, 272 + ]) 273 + 274 + const animatedBackgroundStyle = useAnimatedStyle(() => { 275 + return { 276 + backgroundColor: interpolateColor( 277 + clampedTransX.value, 278 + interpolation.inputRange, 279 + // @ts-expect-error - Weird type expected by reanimated, but this is okay 280 + interpolation.outputRange, 281 + ), 282 + } 283 + }) 284 + 285 + const animatedIconStyle = useAnimatedStyle(() => { 286 + const absTransX = Math.abs(clampedTransX.value) 287 + return { 288 + opacity: interpolate(absTransX, [0, 75], [0.15, 1]), 289 + transform: [{scale: iconScale.value}], 290 + } 291 + }) 292 + 293 + return ( 294 + <GestureDetector gesture={composedGesture}> 295 + <View> 296 + <Animated.View 297 + style={[StyleSheet.absoluteFill, animatedBackgroundStyle]}> 298 + <View 299 + style={{ 300 + flex: 1, 301 + marginHorizontal: 12, 302 + justifyContent: 'center', 303 + alignItems: 304 + activeAction === 'leftFirst' || activeAction === 'leftSecond' 305 + ? 'flex-end' 306 + : 'flex-start', 307 + }}> 308 + <Animated.View style={[animatedIconStyle]}> 309 + {activeAction === 'leftFirst' && actions.leftFirst?.icon ? ( 310 + <actions.leftFirst.icon 311 + height={ICON_SIZE} 312 + width={ICON_SIZE} 313 + style={{ 314 + color: 'white', 315 + }} 316 + /> 317 + ) : activeAction === 'leftSecond' && actions.leftSecond?.icon ? ( 318 + <actions.leftSecond.icon 319 + height={ICON_SIZE} 320 + width={ICON_SIZE} 321 + style={{color: 'white'}} 322 + /> 323 + ) : activeAction === 'rightFirst' && actions.rightFirst?.icon ? ( 324 + <actions.rightFirst.icon 325 + height={ICON_SIZE} 326 + width={ICON_SIZE} 327 + style={{color: 'white'}} 328 + /> 329 + ) : activeAction === 'rightSecond' && 330 + actions.rightSecond?.icon ? ( 331 + <actions.rightSecond.icon 332 + height={ICON_SIZE} 333 + width={ICON_SIZE} 334 + style={{color: 'white'}} 335 + /> 336 + ) : null} 337 + </Animated.View> 338 + </View> 339 + </Animated.View> 340 + <Animated.View style={animatedSliderStyle}>{children}</Animated.View> 341 + </View> 342 + </GestureDetector> 343 + ) 344 + } 345 + 346 + function createInterpolation({ 347 + firstColor, 348 + secondColor, 349 + firstThreshold, 350 + secondThreshold, 351 + side, 352 + }: { 353 + firstColor?: ColorValue 354 + secondColor?: ColorValue 355 + firstThreshold?: number 356 + secondThreshold?: number 357 + side: 'left' | 'right' 358 + }): { 359 + inputRange: number[] 360 + outputRange: ColorValue[] 361 + } { 362 + if ((secondThreshold && !secondColor) || (!secondThreshold && secondColor)) { 363 + throw new Error( 364 + 'You must provide a second color if you provide a second threshold', 365 + ) 366 + } 367 + 368 + if (!firstThreshold) { 369 + return { 370 + inputRange: [0], 371 + outputRange: ['transparent'], 372 + } 373 + } 374 + 375 + const offset = side === 'left' ? -20 : 20 376 + 377 + if (side === 'left') { 378 + firstThreshold = -firstThreshold 379 + 380 + if (secondThreshold) { 381 + secondThreshold = -secondThreshold 382 + } 383 + } 384 + 385 + let res 386 + if (secondThreshold) { 387 + res = { 388 + inputRange: [ 389 + 0, 390 + firstThreshold, 391 + firstThreshold + offset - 20, 392 + secondThreshold, 393 + ], 394 + outputRange: ['transparent', firstColor!, firstColor!, secondColor!], 395 + } 396 + } else { 397 + res = { 398 + inputRange: [0, firstThreshold], 399 + outputRange: ['transparent', firstColor!], 400 + } 401 + } 402 + 403 + if (side === 'left') { 404 + // Reverse the input/output ranges 405 + res.inputRange.reverse() 406 + res.outputRange.reverse() 407 + } 408 + 409 + return res 410 + }

+5

src/lib/custom-animations/GestureActionView.web.tsx

··· 1 + import React from 'react' 2 + 3 + export function GestureActionView({children}: {children: React.ReactNode}) { 4 + return children 5 + }

+211 -165

src/screens/Messages/components/ChatListItem.tsx

··· 1 - import React, {useCallback, useState} from 'react' 1 + import React, {useCallback, useMemo, useState} from 'react' 2 2 import {GestureResponderEvent, View} from 'react-native' 3 3 import { 4 4 AppBskyActorDefs, ··· 10 10 import {msg} from '@lingui/macro' 11 11 import {useLingui} from '@lingui/react' 12 12 13 + import {GestureActionView} from '#/lib/custom-animations/GestureActionView' 13 14 import {useHaptics} from '#/lib/haptics' 14 15 import {decrementBadgeCount} from '#/lib/notifications/notifications' 15 16 import {logEvent} from '#/lib/statsig/statsig' ··· 22 23 import {isNative} from '#/platform/detection' 23 24 import {useProfileShadow} from '#/state/cache/profile-shadow' 24 25 import {useModerationOpts} from '#/state/preferences/moderation-opts' 26 + import {useMarkAsReadMutation} from '#/state/queries/messages/conversation' 25 27 import {useSession} from '#/state/session' 26 28 import {TimeElapsed} from '#/view/com/util/TimeElapsed' 27 29 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' 28 30 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' 29 31 import * as tokens from '#/alf/tokens' 32 + import {useDialogControl} from '#/components/Dialog' 30 33 import {ConvoMenu} from '#/components/dms/ConvoMenu' 34 + import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt' 31 35 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2' 36 + import {Envelope_Open_Stroke2_Corner0_Rounded as EnvelopeOpen} from '#/components/icons/EnveopeOpen' 37 + import {Trash_Stroke2_Corner0_Rounded} from '#/components/icons/Trash' 32 38 import {Link} from '#/components/Link' 33 39 import {useMenuControl} from '#/components/Menu' 34 40 import {PostAlerts} from '#/components/moderation/PostAlerts' ··· 74 80 const {_} = useLingui() 75 81 const {currentAccount} = useSession() 76 82 const menuControl = useMenuControl() 83 + const leaveConvoControl = useDialogControl() 77 84 const {gtMobile} = useBreakpoints() 78 85 const profile = useProfileShadow(profileUnshadowed) 86 + const {mutate: markAsRead} = useMarkAsReadMutation() 79 87 const moderation = React.useMemo( 80 88 () => moderateProfile(profile, moderationOpts), 81 89 [profile, moderationOpts], 82 90 ) 83 91 const playHaptic = useHaptics() 92 + const isUnread = convo.unreadCount > 0 84 93 85 - const blockInfo = React.useMemo(() => { 94 + const blockInfo = useMemo(() => { 86 95 const modui = moderation.ui('profileView') 87 96 const blocks = modui.alerts.filter(alert => alert.type === 'blocking') 88 97 const listBlocks = blocks.filter(alert => alert.source.type === 'list') ··· 103 112 104 113 const isDimStyle = convo.muted || moderation.blocked || isDeletedAccount 105 114 106 - const {lastMessage, lastMessageSentAt} = React.useMemo(() => { 115 + const {lastMessage, lastMessageSentAt} = useMemo(() => { 107 116 let lastMessage = _(msg`No messages yet`) 108 117 let lastMessageSentAt: string | null = null 109 118 ··· 196 205 menuControl.open() 197 206 }, [playHaptic, menuControl]) 198 207 208 + const markReadAction = { 209 + threshold: 120, 210 + color: t.palette.primary_500, 211 + icon: EnvelopeOpen, 212 + action: () => { 213 + markAsRead({ 214 + convoId: convo.id, 215 + }) 216 + }, 217 + } 218 + 219 + const deleteAction = { 220 + threshold: 225, 221 + color: t.palette.negative_500, 222 + icon: Trash_Stroke2_Corner0_Rounded, 223 + action: () => { 224 + leaveConvoControl.open() 225 + }, 226 + } 227 + 228 + const actions = isUnread 229 + ? { 230 + leftFirst: markReadAction, 231 + leftSecond: deleteAction, 232 + } 233 + : { 234 + leftFirst: deleteAction, 235 + } 236 + 199 237 return ( 200 - <View 201 - // @ts-expect-error web only 202 - onMouseEnter={onMouseEnter} 203 - onMouseLeave={onMouseLeave} 204 - onFocus={onFocus} 205 - onBlur={onMouseLeave} 206 - style={[a.relative]}> 238 + <GestureActionView actions={actions}> 207 239 <View 208 - style={[ 209 - a.z_10, 210 - a.absolute, 211 - {top: tokens.space.md, left: tokens.space.lg}, 212 - ]}> 213 - <PreviewableUserAvatar 214 - profile={profile} 215 - size={52} 216 - moderation={moderation.ui('avatar')} 217 - /> 218 - </View> 240 + // @ts-expect-error web only 241 + onMouseEnter={onMouseEnter} 242 + onMouseLeave={onMouseLeave} 243 + onFocus={onFocus} 244 + onBlur={onMouseLeave} 245 + style={[a.relative, t.atoms.bg]}> 246 + <View 247 + style={[ 248 + a.z_10, 249 + a.absolute, 250 + {top: tokens.space.md, left: tokens.space.lg}, 251 + ]}> 252 + <PreviewableUserAvatar 253 + profile={profile} 254 + size={52} 255 + moderation={moderation.ui('avatar')} 256 + /> 257 + </View> 219 258 220 - <Link 221 - to={`/messages/${convo.id}`} 222 - label={displayName} 223 - accessibilityHint={ 224 - !isDeletedAccount 225 - ? _(msg`Go to conversation with ${profile.handle}`) 226 - : _( 227 - msg`This conversation is with a deleted or a deactivated account. Press for options.`, 228 - ) 229 - } 230 - accessibilityActions={ 231 - isNative 232 - ? [ 233 - {name: 'magicTap', label: _(msg`Open conversation options`)}, 234 - {name: 'longpress', label: _(msg`Open conversation options`)}, 235 - ] 236 - : undefined 237 - } 238 - onPress={onPress} 239 - onLongPress={isNative ? onLongPress : undefined} 240 - onAccessibilityAction={onLongPress}> 241 - {({hovered, pressed, focused}) => ( 242 - <View 243 - style={[ 244 - a.flex_row, 245 - isDeletedAccount ? a.align_center : a.align_start, 246 - a.flex_1, 247 - a.px_lg, 248 - a.py_md, 249 - a.gap_md, 250 - (hovered || pressed || focused) && t.atoms.bg_contrast_25, 251 - t.atoms.border_contrast_low, 252 - ]}> 253 - {/* Avatar goes here */} 254 - <View style={{width: 52, height: 52}} /> 259 + <Link 260 + to={`/messages/${convo.id}`} 261 + label={displayName} 262 + accessibilityHint={ 263 + !isDeletedAccount 264 + ? _(msg`Go to conversation with ${profile.handle}`) 265 + : _( 266 + msg`This conversation is with a deleted or a deactivated account. Press for options.`, 267 + ) 268 + } 269 + accessibilityActions={ 270 + isNative 271 + ? [ 272 + {name: 'magicTap', label: _(msg`Open conversation options`)}, 273 + {name: 'longpress', label: _(msg`Open conversation options`)}, 274 + ] 275 + : undefined 276 + } 277 + onPress={onPress} 278 + onLongPress={isNative ? onLongPress : undefined} 279 + onAccessibilityAction={onLongPress}> 280 + {({hovered, pressed, focused}) => ( 281 + <View 282 + style={[ 283 + a.flex_row, 284 + isDeletedAccount ? a.align_center : a.align_start, 285 + a.flex_1, 286 + a.px_lg, 287 + a.py_md, 288 + a.gap_md, 289 + (hovered || pressed || focused) && t.atoms.bg_contrast_25, 290 + t.atoms.border_contrast_low, 291 + ]}> 292 + {/* Avatar goes here */} 293 + <View style={{width: 52, height: 52}} /> 255 294 256 - <View style={[a.flex_1, a.justify_center, web({paddingRight: 45})]}> 257 - <View style={[a.w_full, a.flex_row, a.align_end, a.pb_2xs]}> 258 - <Text 259 - numberOfLines={1} 260 - style={[{maxWidth: '85%'}, web([a.leading_normal])]}> 295 + <View 296 + style={[a.flex_1, a.justify_center, web({paddingRight: 45})]}> 297 + <View style={[a.w_full, a.flex_row, a.align_end, a.pb_2xs]}> 261 298 <Text 262 - emoji 263 - style={[ 264 - a.text_md, 265 - t.atoms.text, 266 - a.font_bold, 267 - {lineHeight: 21}, 268 - isDimStyle && t.atoms.text_contrast_medium, 269 - ]}> 270 - {displayName} 299 + numberOfLines={1} 300 + style={[{maxWidth: '85%'}, web([a.leading_normal])]}> 301 + <Text 302 + emoji 303 + style={[ 304 + a.text_md, 305 + t.atoms.text, 306 + a.font_bold, 307 + {lineHeight: 21}, 308 + isDimStyle && t.atoms.text_contrast_medium, 309 + ]}> 310 + {displayName} 311 + </Text> 271 312 </Text> 272 - </Text> 273 - {lastMessageSentAt && ( 274 - <TimeElapsed timestamp={lastMessageSentAt}> 275 - {({timeElapsed}) => ( 276 - <Text 277 - style={[ 278 - a.text_sm, 279 - {lineHeight: 21}, 280 - t.atoms.text_contrast_medium, 281 - web({whiteSpace: 'preserve nowrap'}), 282 - ]}> 283 - {' '} 284 - · {timeElapsed} 285 - </Text> 286 - )} 287 - </TimeElapsed> 288 - )} 289 - {(convo.muted || moderation.blocked) && ( 313 + {lastMessageSentAt && ( 314 + <TimeElapsed timestamp={lastMessageSentAt}> 315 + {({timeElapsed}) => ( 316 + <Text 317 + style={[ 318 + a.text_sm, 319 + {lineHeight: 21}, 320 + t.atoms.text_contrast_medium, 321 + web({whiteSpace: 'preserve nowrap'}), 322 + ]}> 323 + {' '} 324 + · {timeElapsed} 325 + </Text> 326 + )} 327 + </TimeElapsed> 328 + )} 329 + {(convo.muted || moderation.blocked) && ( 330 + <Text 331 + style={[ 332 + a.text_sm, 333 + {lineHeight: 21}, 334 + t.atoms.text_contrast_medium, 335 + web({whiteSpace: 'preserve nowrap'}), 336 + ]}> 337 + {' '} 338 + ·{' '} 339 + <BellStroke 340 + size="xs" 341 + style={[t.atoms.text_contrast_medium]} 342 + /> 343 + </Text> 344 + )} 345 + </View> 346 + 347 + {!isDeletedAccount && ( 290 348 <Text 291 - style={[ 292 - a.text_sm, 293 - {lineHeight: 21}, 294 - t.atoms.text_contrast_medium, 295 - web({whiteSpace: 'preserve nowrap'}), 296 - ]}> 297 - {' '} 298 - ·{' '} 299 - <BellStroke 300 - size="xs" 301 - style={[t.atoms.text_contrast_medium]} 302 - /> 349 + numberOfLines={1} 350 + style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}> 351 + @{profile.handle} 303 352 </Text> 304 353 )} 305 - </View> 306 354 307 - {!isDeletedAccount && ( 308 355 <Text 309 - numberOfLines={1} 310 - style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}> 311 - @{profile.handle} 356 + emoji 357 + numberOfLines={2} 358 + style={[ 359 + a.text_sm, 360 + a.leading_snug, 361 + convo.unreadCount > 0 362 + ? a.font_bold 363 + : t.atoms.text_contrast_high, 364 + isDimStyle && t.atoms.text_contrast_medium, 365 + ]}> 366 + {lastMessage} 312 367 </Text> 313 - )} 314 368 315 - <Text 316 - emoji 317 - numberOfLines={2} 318 - style={[ 319 - a.text_sm, 320 - a.leading_snug, 321 - convo.unreadCount > 0 322 - ? a.font_bold 323 - : t.atoms.text_contrast_high, 324 - isDimStyle && t.atoms.text_contrast_medium, 325 - ]}> 326 - {lastMessage} 327 - </Text> 369 + <PostAlerts 370 + modui={moderation.ui('contentList')} 371 + size="lg" 372 + style={[a.pt_xs]} 373 + /> 374 + </View> 328 375 329 - <PostAlerts 330 - modui={moderation.ui('contentList')} 331 - size="lg" 332 - style={[a.pt_xs]} 333 - /> 376 + {convo.unreadCount > 0 && ( 377 + <View 378 + style={[ 379 + a.absolute, 380 + a.rounded_full, 381 + { 382 + backgroundColor: isDimStyle 383 + ? t.palette.contrast_200 384 + : t.palette.primary_500, 385 + height: 7, 386 + width: 7, 387 + top: 15, 388 + right: 12, 389 + }, 390 + ]} 391 + /> 392 + )} 334 393 </View> 335 - 336 - {convo.unreadCount > 0 && ( 337 - <View 338 - style={[ 339 - a.absolute, 340 - a.rounded_full, 341 - { 342 - backgroundColor: isDimStyle 343 - ? t.palette.contrast_200 344 - : t.palette.primary_500, 345 - height: 7, 346 - width: 7, 347 - top: 15, 348 - right: 12, 349 - }, 350 - ]} 351 - /> 352 - )} 353 - </View> 354 - )} 355 - </Link> 394 + )} 395 + </Link> 356 396 357 - <ConvoMenu 358 - convo={convo} 359 - profile={profile} 360 - control={menuControl} 361 - currentScreen="list" 362 - showMarkAsRead={convo.unreadCount > 0} 363 - hideTrigger={isNative} 364 - blockInfo={blockInfo} 365 - style={[ 366 - a.absolute, 367 - a.h_full, 368 - a.self_end, 369 - a.justify_center, 370 - { 371 - right: tokens.space.lg, 372 - opacity: !gtMobile || showActions || menuControl.isOpen ? 1 : 0, 373 - }, 374 - ]} 375 - /> 376 - </View> 397 + <ConvoMenu 398 + convo={convo} 399 + profile={profile} 400 + control={menuControl} 401 + currentScreen="list" 402 + showMarkAsRead={convo.unreadCount > 0} 403 + hideTrigger={isNative} 404 + blockInfo={blockInfo} 405 + style={[ 406 + a.absolute, 407 + a.h_full, 408 + a.self_end, 409 + a.justify_center, 410 + { 411 + right: tokens.space.lg, 412 + opacity: !gtMobile || showActions || menuControl.isOpen ? 1 : 0, 413 + }, 414 + ]} 415 + /> 416 + <LeaveConvoPrompt 417 + control={leaveConvoControl} 418 + convoId={convo.id} 419 + currentScreen="list" 420 + /> 421 + </View> 422 + </GestureActionView> 377 423 ) 378 424 }

Configure Feed

Configure Feed