[🐴] DM button on profile (#4097)

* add profile button

* separate out button to component

* normalise subscribe to labeller button size

* infinite staletime

* use Link rather than Button and change icon

* adjust icon position

1 files changed, 39 insertions, 0 deletions

diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx
new file mode 100644
index 000000000..6f227de65
--- /dev/null
+++ b/src/components/dms/MessageProfileButton.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import {AppBskyActorDefs} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
+import {atoms as a, useTheme} from '#/alf'
+import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message'
+import {Link} from '../Link'
+
+export function MessageProfileButton({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileView
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const {data: convoId} = useMaybeConvoForUser(profile.did)
+
+  if (!convoId) return null
+
+  return (
+    <Link
+      testID="dmBtn"
+      size="small"
+      color="secondary"
+      variant="solid"
+      shape="round"
+      label={_(msg`Message ${profile.handle}`)}
+      to={`/messages/${convoId}`}
+      style={[a.justify_center, {width: 36, height: 36}]}>
+      <Message
+        style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
+        size="md"
+      />
+    </Link>
+  )
+}