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

src/view/shell/desktop/RightNav.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
 import {DesktopSearch} from './Search'
 import {Text} from 'view/com/util/text/Text'
@@ -8,6 +9,7 @@ import {TextLink} from 'view/com/util/Link'
 import {FEEDBACK_FORM_URL} from 'lib/constants'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
+import {pluralize} from 'lib/strings/helpers'
 
 export const DesktopRightNav = observer(function DesktopRightNav() {
   const store = useStores()
@@ -38,10 +40,40 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
           />
         </View>
       </View>
+      <InviteCodes />
     </View>
   )
 })
 
+function InviteCodes() {
+  const store = useStores()
+  const pal = usePalette('default')
+
+  const onPress = React.useCallback(() => {
+    store.shell.openModal({name: 'invite-codes'})
+  }, [store])
+  return (
+    <TouchableOpacity
+      style={[styles.inviteCodes, pal.border]}
+      onPress={onPress}>
+      <FontAwesomeIcon
+        icon="ticket"
+        style={[
+          styles.inviteCodesIcon,
+          store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
+        ]}
+        size={16}
+      />
+      <Text
+        type="md-medium"
+        style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
+        {store.me.invitesAvailable} invite{' '}
+        {pluralize(store.me.invitesAvailable, 'code')} available
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
 const styles = StyleSheet.create({
   rightNav: {
     position: 'absolute',
@@ -57,4 +89,16 @@ const styles = StyleSheet.create({
   messageLine: {
     marginBottom: 10,
   },
+
+  inviteCodes: {
+    marginTop: 12,
+    borderTopWidth: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inviteCodesIcon: {
+    marginRight: 6,
+  },
 })