[🐴] Mark as read in convo menu (#3913)

* add mark as read option

* optimistic update + link up menu

* rm messageid

1 files changed, 19 insertions, 0 deletions

diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx
index 16306bb57..263befd56 100644
--- a/src/components/dms/ConvoMenu.tsx
+++ b/src/components/dms/ConvoMenu.tsx
@@ -7,6 +7,7 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from '#/lib/routes/types'
+import {useMarkAsReadMutation} from '#/state/queries/messages/conversation'
 import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
 import {
   useMuteConvo,
@@ -24,6 +25,7 @@ import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/Per
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
+import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '../icons/Bubble'
 
 let ConvoMenu = ({
   convo,
@@ -32,6 +34,7 @@ let ConvoMenu = ({
   control,
   hideTrigger,
   currentScreen,
+  showMarkAsRead,
 }: {
   convo: ChatBskyConvoDefs.ConvoView
   profile: AppBskyActorDefs.ProfileViewBasic
@@ -39,11 +42,13 @@ let ConvoMenu = ({
   control?: Menu.MenuControlProps
   hideTrigger?: boolean
   currentScreen: 'list' | 'conversation'
+  showMarkAsRead?: boolean
 }): React.ReactNode => {
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const t = useTheme()
   const leaveConvoControl = Prompt.usePromptControl()
+  const {mutate: markAsRead} = useMarkAsReadMutation()
 
   const onNavigateToProfile = useCallback(() => {
     navigation.navigate('Profile', {name: profile.did})
@@ -107,6 +112,20 @@ let ConvoMenu = ({
         )}
         <Menu.Outer>
           <Menu.Group>
+            {showMarkAsRead && (
+              <Menu.Item
+                label={_(msg`Mark as read`)}
+                onPress={() =>
+                  markAsRead({
+                    convoId: convo.id,
+                  })
+                }>
+                <Menu.ItemText>
+                  <Trans>Mark as read</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={Bubble} />
+              </Menu.Item>
+            )}
             <Menu.Item
               label={_(msg`Go to user's profile`)}
               onPress={onNavigateToProfile}>