[Clipclops] Clop menu, leave clop, mute/unmute clop (#3804)

* convo menu * memoize convomenu * add convoId to useChat + memoize value * leave convo * Create mute-conversation.ts * add mutes, remove changes to useChat and use chat.convo instead * add todo comments * leave convo confirm prompt * remove dependency on useChat and pass in props instead * show menu on long press * optimistic update * optimistic update leave + add error capture * don't `popToTop` when unnecessary --------- Co-authored-by: Hailey <me@haileyok.com>
2024-05-02 00:15:10 +01:00 · 2024-05-02 00:15:10 +01:00 · e19f882450
parent d3fafdc066
commit e19f882450
11 changed files with 420 additions and 57 deletions
--- a/assets/icons/arrowBoxLeft_stroke2_corner0_rounded.svg
+++ b/assets/icons/arrowBoxLeft_stroke2_corner0_rounded.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.293 3.293A1 1 0 0 1 4 3h7.25a1 1 0 1 1 0 2H5v14h6.25a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V4a1 1 0 0 1 .293-.707Zm11.5 3.5a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L17.586 13H8.75a1 1 0 1 1 0-2h8.836l-2.793-2.793a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -64,7 +64,7 @@ type NonTextElements =

 export type ButtonProps = Pick<
  PressableProps,
-  'disabled' | 'onPress' | 'testID'
+  'disabled' | 'onPress' | 'testID' | 'onLongPress'
 > &
  AccessibilityProps &
  VariantProps & {
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@ -1,27 +1,29 @@
 import React from 'react'
-import {View, Pressable, ViewStyle, StyleProp} from 'react-native'
+import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'

+import {isNative} from 'platform/detection'
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {Text} from '#/components/Typography'
-
 import {Context} from '#/components/Menu/context'
 import {
  ContextType,
-  TriggerProps,
-  ItemProps,
  GroupProps,
-  ItemTextProps,
  ItemIconProps,
+  ItemProps,
+  ItemTextProps,
+  TriggerProps,
 } from '#/components/Menu/types'
-import {Button, ButtonText} from '#/components/Button'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {isNative} from 'platform/detection'
+import {Text} from '#/components/Typography'

-export {useDialogControl as useMenuControl} from '#/components/Dialog'
+export {
+  type DialogControlProps as MenuControlProps,
+  useDialogControl as useMenuControl,
+} from '#/components/Dialog'

 export function useMemoControlContext() {
  return React.useContext(Context)
--- a/src/components/dms/ConvoMenu.tsx
+++ b/src/components/dms/ConvoMenu.tsx
@ -0,0 +1,177 @@
+import React, {useCallback} from 'react'
+import {Pressable} from 'react-native'
+import {AppBskyActorDefs} from '@atproto/api'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
+import {
+  useMuteConvo,
+  useUnmuteConvo,
+} from '#/state/queries/messages/mute-conversation'
+import * as Toast from '#/view/com/util/Toast'
+import {atoms as a, useTheme} from '#/alf'
+import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components/icons/ArrowBoxLeft'
+import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
+import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
+import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
+import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
+import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheck} from '#/components/icons/PersonCheck'
+import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/PersonX'
+import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
+import * as Menu from '#/components/Menu'
+import * as Prompt from '#/components/Prompt'
+
+let ConvoMenu = ({
+  convo,
+  profile,
+  onUpdateConvo,
+  control,
+  hideTrigger,
+  currentScreen,
+}: {
+  convo: ChatBskyConvoDefs.ConvoView
+  profile: AppBskyActorDefs.ProfileViewBasic
+  onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
+  control?: Menu.MenuControlProps
+  hideTrigger?: boolean
+  currentScreen: 'list' | 'conversation'
+}): React.ReactNode => {
+  const navigation = useNavigation<NavigationProp>()
+  const {_} = useLingui()
+  const t = useTheme()
+  const leaveConvoControl = Prompt.usePromptControl()
+
+  const onNavigateToProfile = useCallback(() => {
+    navigation.navigate('Profile', {name: profile.did})
+  }, [navigation, profile.did])
+
+  const {mutate: muteConvo} = useMuteConvo(convo.id, {
+    onSuccess: data => {
+      onUpdateConvo?.(data.convo)
+      Toast.show(_(msg`Chat muted`))
+    },
+    onError: () => {
+      Toast.show(_(msg`Could not mute chat`))
+    },
+  })
+
+  const {mutate: unmuteConvo} = useUnmuteConvo(convo.id, {
+    onSuccess: data => {
+      onUpdateConvo?.(data.convo)
+      Toast.show(_(msg`Chat unmuted`))
+    },
+    onError: () => {
+      Toast.show(_(msg`Could not unmute chat`))
+    },
+  })
+
+  const {mutate: leaveConvo} = useLeaveConvo(convo.id, {
+    onSuccess: () => {
+      if (currentScreen === 'conversation') {
+        navigation.replace('MessagesList')
+      }
+    },
+    onError: () => {
+      Toast.show(_(msg`Could not leave chat`))
+    },
+  })
+
+  return (
+    <>
+      <Menu.Root control={control}>
+        {!hideTrigger && (
+          <Menu.Trigger label={_(msg`Chat settings`)}>
+            {({props, state}) => (
+              <Pressable
+                {...props}
+                style={[
+                  a.p_sm,
+                  a.rounded_sm,
+                  (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                  // make sure pfp is in the middle
+                  {marginLeft: -10},
+                ]}>
+                <DotsHorizontal size="lg" style={t.atoms.text} />
+              </Pressable>
+            )}
+          </Menu.Trigger>
+        )}
+        <Menu.Outer>
+          <Menu.Group>
+            <Menu.Item
+              label={_(msg`Go to user's profile`)}
+              onPress={onNavigateToProfile}>
+              <Menu.ItemText>
+                <Trans>Go to profile</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={Person} />
+            </Menu.Item>
+            <Menu.Item
+              label={_(msg`Mute notifications`)}
+              onPress={() => (convo?.muted ? unmuteConvo() : muteConvo())}>
+              <Menu.ItemText>
+                {convo?.muted ? (
+                  <Trans>Unmute notifications</Trans>
+                ) : (
+                  <Trans>Mute notifications</Trans>
+                )}
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
+            </Menu.Item>
+          </Menu.Group>
+          {/* TODO(samuel): implement these */}
+          <Menu.Group>
+            <Menu.Item
+              label={_(msg`Block account`)}
+              onPress={() => {}}
+              disabled>
+              <Menu.ItemText>
+                <Trans>Block account</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon
+                icon={profile.viewer?.blocking ? PersonCheck : PersonX}
+              />
+            </Menu.Item>
+            <Menu.Item
+              label={_(msg`Report account`)}
+              onPress={() => {}}
+              disabled>
+              <Menu.ItemText>
+                <Trans>Report account</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={Flag} />
+            </Menu.Item>
+          </Menu.Group>
+          <Menu.Group>
+            <Menu.Item
+              label={_(msg`Leave conversation`)}
+              onPress={leaveConvoControl.open}>
+              <Menu.ItemText>
+                <Trans>Leave conversation</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={ArrowBoxLeft} />
+            </Menu.Item>
+          </Menu.Group>
+        </Menu.Outer>
+      </Menu.Root>
+
+      <Prompt.Basic
+        control={leaveConvoControl}
+        title={_(msg`Leave conversation`)}
+        description={_(
+          msg`Are you sure you want to leave this conversation? Your messages will be deleted for you, but not for other participants.`,
+        )}
+        confirmButtonCta={_(msg`Leave`)}
+        confirmButtonColor="negative"
+        onConfirm={() => leaveConvo()}
+      />
+    </>
+  )
+}
+ConvoMenu = React.memo(ConvoMenu)
+
+export {ConvoMenu}
--- a/src/components/icons/ArrowBoxLeft.tsx
+++ b/src/components/icons/ArrowBoxLeft.tsx
@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ArrowBoxLeft_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.293 3.293A1 1 0 0 1 4 3h7.25a1 1 0 1 1 0 2H5v14h6.25a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V4a1 1 0 0 1 .293-.707Zm11.5 3.5a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L17.586 13H8.75a1 1 0 1 1 0-2h8.836l-2.793-2.793a1 1 0 0 1 0-1.414Z',
+})
--- a/src/screens/Messages/Conversation/index.tsx
+++ b/src/screens/Messages/Conversation/index.tsx
@ -1,6 +1,7 @@
-import React from 'react'
+import React, {useCallback} from 'react'
 import {TouchableOpacity, View} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@ -14,12 +15,11 @@ import {isWeb} from 'platform/detection'
 import {ChatProvider, useChat} from 'state/messages'
 import {ConvoStatus} from 'state/messages/convo'
 import {useSession} from 'state/session'
-import {UserAvatar} from 'view/com/util/UserAvatar'
+import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
 import {CenteredView} from 'view/com/util/Views'
 import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
-import {DotGrid_Stroke2_Corner0_Rounded} from '#/components/icons/DotGrid'
+import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Text} from '#/components/Typography'
 import {ClipClopGate} from '../gate'
@ -78,8 +78,9 @@ let Header = ({
  const {_} = useLingui()
  const {gtTablet} = useBreakpoints()
  const navigation = useNavigation<NavigationProp>()
+  const {service} = useChat()

-  const onPressBack = React.useCallback(() => {
+  const onPressBack = useCallback(() => {
    if (isWeb) {
      navigation.replace('MessagesList')
    } else {
@ -87,6 +88,13 @@ let Header = ({
    }
  }, [navigation])

+  const onUpdateConvo = useCallback(
+    (convo: ChatBskyConvoDefs.ConvoView) => {
+      service.convo = convo
+    },
+    [service],
+  )
+
  return (
    <View
      style={[
@ -95,22 +103,20 @@ let Header = ({
        a.border_b,
        a.flex_row,
        a.justify_between,
+        a.align_start,
        a.gap_lg,
        a.px_lg,
        a.py_sm,
      ]}>
      {!gtTablet ? (
        <TouchableOpacity
-          testID="viewHeaderDrawerBtn"
+          testID="conversationHeaderBackBtn"
          onPress={onPressBack}
          hitSlop={BACK_HITSLOP}
-          style={{
-            width: 30,
-            height: 30,
-          }}
+          style={{width: 30, height: 30}}
          accessibilityRole="button"
          accessibilityLabel={_(msg`Back`)}
-          accessibilityHint={_(msg`Access navigation links and settings`)}>
+          accessibilityHint="">
          <FontAwesomeIcon
            size={18}
            icon="angle-left"
@ -124,24 +130,22 @@ let Header = ({
        <View style={{width: 30}} />
      )}
      <View style={[a.align_center, a.gap_sm]}>
-        <UserAvatar size={32} avatar={profile.avatar} />
+        <PreviewableUserAvatar size={32} profile={profile} />
        <Text style={[a.text_lg, a.font_bold]}>
          <Trans>{profile.displayName}</Trans>
        </Text>
      </View>
-      <View>
-        <Button
-          label={_(msg`Chat settings`)}
-          color="secondary"
-          size="large"
-          variant="ghost"
-          style={[{height: 'auto', width: 'auto'}, a.px_sm, a.py_sm]}
-          onPress={() => {}}>
-          <ButtonIcon icon={DotGrid_Stroke2_Corner0_Rounded} />
-        </Button>
-      </View>
+      {service.convo ? (
+        <ConvoMenu
+          convo={service.convo}
+          profile={profile}
+          onUpdateConvo={onUpdateConvo}
+          currentScreen="conversation"
+        />
+      ) : (
+        <View style={{width: 30}} />
+      )}
    </View>
  )
 }
-
 Header = React.memo(Header)
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/List/index.tsx
@ -12,6 +12,7 @@ import {MessagesTabNavigatorParams} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
+import {isNative} from '#/platform/detection'
 import {useListConvos} from '#/state/queries/messages/list-converations'
 import {useSession} from '#/state/session'
 import {List} from '#/view/com/util/List'
@ -22,11 +23,13 @@ import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
+import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {NewChat} from '#/components/dms/NewChat'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
 import {Link} from '#/components/Link'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
+import {useMenuControl} from '#/components/Menu'
 import {Text} from '#/components/Typography'
 import {ClipClopGate} from '../gate'

@ -190,6 +193,7 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
  const t = useTheme()
  const {_} = useLingui()
  const {currentAccount} = useSession()
+  const menuControl = useMenuControl()

  let lastMessage = _(msg`No messages yet`)
  let lastMessageSentAt: string | null = null
@ -214,7 +218,10 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
  }

  return (
-    <Link to={`/messages/${convo.id}`} style={a.flex_1}>
+    <Link
+      to={`/messages/${convo.id}`}
+      style={a.flex_1}
+      onLongPress={isNative ? menuControl.open : undefined}>
      {({hovered, pressed}) => (
        <View
          style={[
@ -267,12 +274,26 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
                a.flex_0,
                a.ml_md,
                a.mt_sm,
-                {backgroundColor: t.palette.primary_500},
                a.rounded_full,
-                {height: 7, width: 7},
+                {
+                  backgroundColor: convo.muted
+                    ? t.palette.contrast_200
+                    : t.palette.primary_500,
+                  height: 7,
+                  width: 7,
+                },
              ]}
            />
          )}
+          <ConvoMenu
+            convo={convo}
+            profile={otherUser}
+            control={menuControl}
+            // TODO(sam) show on hover on web
+            // tricky because it captures the mouse event
+            hideTrigger
+            currentScreen="list"
+          />
        </View>
      )}
    </Link>
--- a/src/state/messages/index.tsx
+++ b/src/state/messages/index.tsx
@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useContext, useEffect, useMemo, useState} from 'react'
 import {BskyAgent} from '@atproto-labs/api'

 import {Convo, ConvoParams} from '#/state/messages/convo'
@ -8,15 +8,14 @@ import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlSto
 const ChatContext = React.createContext<{
  service: Convo
  state: Convo['state']
-}>({
-  // @ts-ignore
-  service: null,
-  // @ts-ignore
-  state: null,
-})
+} | null>(null)

 export function useChat() {
-  return React.useContext(ChatContext)
+  const ctx = useContext(ChatContext)
+  if (!ctx) {
+    throw new Error('useChat must be used within a ChatProvider')
+  }
+  return ctx
 }

 export function ChatProvider({
@ -25,7 +24,7 @@ export function ChatProvider({
 }: Pick<ConvoParams, 'convoId'> & {children: React.ReactNode}) {
  const {serviceUrl} = useDmServiceUrlStorage()
  const {getAgent} = useAgent()
-  const [service] = React.useState(
+  const [service] = useState(
    () =>
      new Convo({
        convoId,
@ -35,13 +34,13 @@ export function ChatProvider({
        __tempFromUserDid: getAgent().session?.did!,
      }),
  )
-  const [state, setState] = React.useState(service.state)
+  const [state, setState] = useState(service.state)

-  React.useEffect(() => {
+  useEffect(() => {
    service.initialize()
  }, [service])

-  React.useEffect(() => {
+  useEffect(() => {
    const update = () => setState(service.state)
    service.on('update', update)
    return () => {
@ -49,9 +48,7 @@ export function ChatProvider({
    }
  }, [service])

-  return (
-    <ChatContext.Provider value={{state, service}}>
-      {children}
-    </ChatContext.Provider>
-  )
+  const value = useMemo(() => ({service, state}), [service, state])
+
+  return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>
 }
--- a/src/state/queries/messages/get-convo-for-members.ts
+++ b/src/state/queries/messages/get-convo-for-members.ts
@ -1,6 +1,7 @@
 import {BskyAgent, ChatBskyConvoGetConvoForMembers} from '@atproto-labs/api'
 import {useMutation, useQueryClient} from '@tanstack/react-query'

+import {logger} from '#/logger'
 import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 import {RQKEY as CONVO_KEY} from './conversation'
 import {useHeaders} from './temp-headers'
@ -30,6 +31,9 @@ export function useGetConvoForMembers({
      queryClient.setQueryData(CONVO_KEY(data.convo.id), data.convo)
      onSuccess?.(data)
    },
-    onError,
+    onError: error => {
+      logger.error(error)
+      onError?.(error)
+    },
  })
 }
--- a/src/state/queries/messages/leave-conversation.ts
+++ b/src/state/queries/messages/leave-conversation.ts
@ -0,0 +1,68 @@
+import {
+  BskyAgent,
+  ChatBskyConvoLeaveConvo,
+  ChatBskyConvoListConvos,
+} from '@atproto-labs/api'
+import {useMutation, useQueryClient} from '@tanstack/react-query'
+
+import {logger} from '#/logger'
+import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
+import {RQKEY as CONVO_LIST_KEY} from './list-converations'
+import {useHeaders} from './temp-headers'
+
+export function useLeaveConvo(
+  convoId: string,
+  {
+    onSuccess,
+    onError,
+  }: {
+    onSuccess?: (data: ChatBskyConvoLeaveConvo.OutputSchema) => void
+    onError?: (error: Error) => void
+  },
+) {
+  const queryClient = useQueryClient()
+  const headers = useHeaders()
+  const {serviceUrl} = useDmServiceUrlStorage()
+
+  return useMutation({
+    mutationFn: async () => {
+      const agent = new BskyAgent({service: serviceUrl})
+      const {data} = await agent.api.chat.bsky.convo.leaveConvo(
+        {convoId},
+        {headers, encoding: 'application/json'},
+      )
+
+      return data
+    },
+    onMutate: () => {
+      queryClient.setQueryData(
+        CONVO_LIST_KEY,
+        (old?: {
+          pageParams: Array<string | undefined>
+          pages: Array<ChatBskyConvoListConvos.OutputSchema>
+        }) => {
+          console.log('old', old)
+          if (!old) return old
+          return {
+            ...old,
+            pages: old.pages.map(page => {
+              return {
+                ...page,
+                convos: page.convos.filter(convo => convo.id !== convoId),
+              }
+            }),
+          }
+        },
+      )
+    },
+    onSuccess: data => {
+      queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
+      onSuccess?.(data)
+    },
+    onError: error => {
+      logger.error(error)
+      queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
+      onError?.(error)
+    },
+  })
+}
--- a/src/state/queries/messages/mute-conversation.ts
+++ b/src/state/queries/messages/mute-conversation.ts
@ -0,0 +1,84 @@
+import {
+  BskyAgent,
+  ChatBskyConvoMuteConvo,
+  ChatBskyConvoUnmuteConvo,
+} from '@atproto-labs/api'
+import {useMutation, useQueryClient} from '@tanstack/react-query'
+
+import {logger} from '#/logger'
+import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
+import {RQKEY as CONVO_KEY} from './conversation'
+import {RQKEY as CONVO_LIST_KEY} from './list-converations'
+import {useHeaders} from './temp-headers'
+
+export function useMuteConvo(
+  convoId: string,
+  {
+    onSuccess,
+    onError,
+  }: {
+    onSuccess?: (data: ChatBskyConvoMuteConvo.OutputSchema) => void
+    onError?: (error: Error) => void
+  },
+) {
+  const queryClient = useQueryClient()
+  const headers = useHeaders()
+  const {serviceUrl} = useDmServiceUrlStorage()
+
+  return useMutation({
+    mutationFn: async () => {
+      const agent = new BskyAgent({service: serviceUrl})
+      const {data} = await agent.api.chat.bsky.convo.muteConvo(
+        {convoId},
+        {headers, encoding: 'application/json'},
+      )
+
+      return data
+    },
+    onSuccess: data => {
+      queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
+      queryClient.invalidateQueries({queryKey: CONVO_KEY(convoId)})
+      onSuccess?.(data)
+    },
+    onError: error => {
+      logger.error(error)
+      onError?.(error)
+    },
+  })
+}
+
+export function useUnmuteConvo(
+  convoId: string,
+  {
+    onSuccess,
+    onError,
+  }: {
+    onSuccess?: (data: ChatBskyConvoUnmuteConvo.OutputSchema) => void
+    onError?: (error: Error) => void
+  },
+) {
+  const queryClient = useQueryClient()
+  const headers = useHeaders()
+  const {serviceUrl} = useDmServiceUrlStorage()
+
+  return useMutation({
+    mutationFn: async () => {
+      const agent = new BskyAgent({service: serviceUrl})
+      const {data} = await agent.api.chat.bsky.convo.unmuteConvo(
+        {convoId},
+        {headers, encoding: 'application/json'},
+      )
+
+      return data
+    },
+    onSuccess: data => {
+      queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
+      queryClient.invalidateQueries({queryKey: CONVO_KEY(convoId)})
+      onSuccess?.(data)
+    },
+    onError: error => {
+      logger.error(error)
+      onError?.(error)
+    },
+  })
+}
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.293 3.293A1 1 0 0 1 4 3h7.25a1 1 0 1 1 0 2H5v14h6.25a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V4a1 1 0 0 1 .293-.707Zm11.5 3.5a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L17.586 13H8.75a1 1 0 1 1 0-2h8.836l-2.793-2.793a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`