From a0d45f41c618f7ed0a3a31e2e9c8f40e2ab3712a Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 7 Oct 2024 11:10:04 -0700
Subject: [PATCH] add mark unread option

---
 .../envelope_open_stroke2_corner0_rounded.svg |  1 +
 src/components/icons/EnveopeOpen.tsx          |  5 ++
 .../custom-animations/GestureActionView.tsx   |  6 +++
 .../Messages/components/ChatListItem.tsx      | 52 ++++++++++++-------
 4 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 assets/icons/envelope_open_stroke2_corner0_rounded.svg
 create mode 100644 src/components/icons/EnveopeOpen.tsx

diff --git a/assets/icons/envelope_open_stroke2_corner0_rounded.svg b/assets/icons/envelope_open_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..9854761944
--- /dev/null
+++ b/assets/icons/envelope_open_stroke2_corner0_rounded.svg
@@ -0,0 +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>
diff --git a/src/components/icons/EnveopeOpen.tsx b/src/components/icons/EnveopeOpen.tsx
new file mode 100644
index 0000000000..2873e89138
--- /dev/null
+++ b/src/components/icons/EnveopeOpen.tsx
@@ -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',
+})
diff --git a/src/lib/custom-animations/GestureActionView.tsx b/src/lib/custom-animations/GestureActionView.tsx
index 04c2f8aeac..d78edc3bfa 100644
--- a/src/lib/custom-animations/GestureActionView.tsx
+++ b/src/lib/custom-animations/GestureActionView.tsx
@@ -9,6 +9,7 @@ import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
+  useReducedMotion,
   useSharedValue,
   withSequence,
   withTiming,
@@ -55,6 +56,7 @@ export function GestureActionView({
   >(null)
 
   const haptic = useHaptics()
+  const isReducedMotion = useReducedMotion()
 
   const transX = useSharedValue(0)
   const clampedTransX = useDerivedValue(() => {
@@ -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}),
diff --git a/src/screens/Messages/components/ChatListItem.tsx b/src/screens/Messages/components/ChatListItem.tsx
index 1bc8563133..bb9c1cd4cb 100644
--- a/src/screens/Messages/components/ChatListItem.tsx
+++ b/src/screens/Messages/components/ChatListItem.tsx
@@ -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'
@@ -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'
@@ -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')
@@ -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}