Skip to content

Commit

Permalink
add mark unread option
Browse files Browse the repository at this point in the history
  • Loading branch information
haileyok committed Oct 7, 2024
1 parent 5438fd1 commit a0d45f4
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 18 deletions.
1 change: 1 addition & 0 deletions assets/icons/envelope_open_stroke2_corner0_rounded.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/components/icons/EnveopeOpen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'

export const Envelope_Open_Stroke2_Corner0_Rounded = createSinglePathSVG({
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',
})
6 changes: 6 additions & 0 deletions src/lib/custom-animations/GestureActionView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Animated, {
useAnimatedReaction,
useAnimatedStyle,
useDerivedValue,
useReducedMotion,
useSharedValue,
withSequence,
withTiming,
Expand Down Expand Up @@ -55,6 +56,7 @@ export function GestureActionView({
>(null)

const haptic = useHaptics()
const isReducedMotion = useReducedMotion()

const transX = useSharedValue(0)
const clampedTransX = useDerivedValue(() => {
Expand All @@ -70,6 +72,10 @@ export function GestureActionView({

const runPopAnimation = () => {
'worklet'
if (isReducedMotion) {
return
}

iconScale.value = withSequence(
withTiming(1.2, {duration: 175}),
withTiming(1, {duration: 100}),
Expand Down
52 changes: 34 additions & 18 deletions src/screens/Messages/components/ChatListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
import {isNative} from '#/platform/detection'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useMarkAsReadMutation} from '#/state/queries/messages/conversation'
import {useSession} from '#/state/session'
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
Expand All @@ -32,7 +33,7 @@ import {useDialogControl} from '#/components/Dialog'
import {ConvoMenu} from '#/components/dms/ConvoMenu'
import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
import {Envelope_Filled_Stroke2_Corner0_Rounded} from '#/components/icons/Envelope'
import {Envelope_Open_Stroke2_Corner0_Rounded as EnvelopeOpen} from '#/components/icons/EnveopeOpen'
import {Trash_Stroke2_Corner0_Rounded} from '#/components/icons/Trash'
import {Link} from '#/components/Link'
import {useMenuControl} from '#/components/Menu'
Expand Down Expand Up @@ -82,11 +83,13 @@ function ChatListItemReady({
const leaveConvoControl = useDialogControl()
const {gtMobile} = useBreakpoints()
const profile = useProfileShadow(profileUnshadowed)
const {mutate: markAsRead} = useMarkAsReadMutation()
const moderation = React.useMemo(
() => moderateProfile(profile, moderationOpts),
[profile, moderationOpts],
)
const playHaptic = useHaptics()
const isUnread = convo.unreadCount > 0

const blockInfo = useMemo(() => {
const modui = moderation.ui('profileView')
Expand Down Expand Up @@ -202,24 +205,37 @@ function ChatListItemReady({
menuControl.open()
}, [playHaptic, menuControl])

const markReadAction = {
threshold: 120,
color: t.palette.primary_500,
icon: EnvelopeOpen,
action: () => {
markAsRead({
convoId: convo.id,
})
},
}

const deleteAction = {
threshold: 225,
color: t.palette.negative_500,
icon: Trash_Stroke2_Corner0_Rounded,
action: () => {
leaveConvoControl.open()
},
}

const actions = isUnread
? {
leftFirst: markReadAction,
leftSecond: deleteAction,
}
: {
leftFirst: deleteAction,
}

return (
<GestureActionView
actions={{
leftFirst: {
threshold: 120,
color: t.palette.primary_500,
icon: Envelope_Filled_Stroke2_Corner0_Rounded,
action: () => {},
},
leftSecond: {
threshold: 225,
color: t.palette.negative_500,
icon: Trash_Stroke2_Corner0_Rounded,
action: () => {
leaveConvoControl.open()
},
},
}}>
<GestureActionView actions={actions}>
<View
// @ts-expect-error web only
onMouseEnter={onMouseEnter}
Expand Down

0 comments on commit a0d45f4

Please sign in to comment.