Add user invite codes (#393)

* Add mobile UIs for invite codes

* Update invite code UIs for web

* Finish implementing invite code behaviors (including notifications of invited users)

* Bump deps

* Update web right nav to use real data; also fix lint

1 files changed, 112 insertions, 0 deletions

diff --git a/src/view/com/notifications/InvitedUsers.tsx b/src/view/com/notifications/InvitedUsers.tsx
new file mode 100644
index 000000000..2c44eb5b5
--- /dev/null
+++ b/src/view/com/notifications/InvitedUsers.tsx
@@ -0,0 +1,112 @@
+import React from 'react'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {AppBskyActorDefs} from '@atproto/api'
+import {UserAvatar} from '../util/UserAvatar'
+import {Text} from '../util/text/Text'
+import {Link, TextLink} from '../util/Link'
+import {Button} from '../util/forms/Button'
+import {FollowButton} from '../profile/FollowButton'
+import {CenteredView} from '../util/Views.web'
+import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+
+export const InvitedUsers = observer(() => {
+  const store = useStores()
+  return (
+    <CenteredView>
+      {store.invitedUsers.profiles.map(profile => (
+        <InvitedUser key={profile.did} profile={profile} />
+      ))}
+    </CenteredView>
+  )
+})
+
+function InvitedUser({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+}) {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  const onPressDismiss = React.useCallback(() => {
+    store.invitedUsers.markSeen(profile.did)
+  }, [store, profile])
+
+  return (
+    <View
+      testID="invitedUser"
+      style={[
+        styles.layout,
+        {
+          backgroundColor: pal.colors.unreadNotifBg,
+          borderColor: pal.colors.unreadNotifBorder,
+        },
+      ]}>
+      <View style={styles.layoutIcon}>
+        <FontAwesomeIcon
+          icon="user-plus"
+          size={24}
+          style={[styles.icon, s.blue3 as FontAwesomeIconStyle]}
+        />
+      </View>
+      <View style={s.flex1}>
+        <Link href={`/profile/${profile.handle}`}>
+          <UserAvatar avatar={profile.avatar} size={35} />
+        </Link>
+        <Text style={[styles.desc, pal.text]}>
+          <TextLink
+            type="md-bold"
+            style={pal.text}
+            href={`/profile/${profile.handle}`}
+            text={profile.displayName || profile.handle}
+          />{' '}
+          joined using your invite code!
+        </Text>
+        <View style={styles.btns}>
+          <FollowButton
+            unfollowedType="primary"
+            followedType="primary-light"
+            did={profile.did}
+          />
+          <Button
+            testID="dismissBtn"
+            type="primary-light"
+            label="Dismiss"
+            onPress={onPressDismiss}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  layout: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    padding: 10,
+  },
+  layoutIcon: {
+    width: 70,
+    alignItems: 'flex-end',
+    paddingTop: 2,
+  },
+  icon: {
+    marginRight: 10,
+    marginTop: 4,
+  },
+  desc: {
+    paddingVertical: 6,
+  },
+  btns: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+})