Add post composer

src/view/com/composer/Composer.tsx

@@ -0,0 +1,88 @@
+import React, {useState, forwardRef, useImperativeHandle} from 'react'
+import {observer} from 'mobx-react-lite'
+import {KeyboardAvoidingView, StyleSheet, TextInput, View} from 'react-native'
+// @ts-ignore no type definition -prf
+import ProgressCircle from 'react-native-progress/Circle'
+import {useStores} from '../../../state'
+import {s} from '../../lib/styles'
+import * as apilib from '../../../state/lib/api'
+
+const MAX_TEXT_LENGTH = 256
+const WARNING_TEXT_LENGTH = 200
+const DANGER_TEXT_LENGTH = 255
+
+export const Composer = observer(
+  forwardRef(function Composer(
+    {
+      replyTo,
+    }: {
+      replyTo: string | undefined
+    },
+    ref,
+  ) {
+    const store = useStores()
+    const [text, setText] = useState('')
+
+    const onChangeText = (newText: string) => {
+      if (newText.length > MAX_TEXT_LENGTH) {
+        setText(newText.slice(0, MAX_TEXT_LENGTH))
+      } else {
+        setText(newText)
+      }
+    }
+
+    useImperativeHandle(ref, () => ({
+      async publish() {
+        if (text.trim().length === 0) {
+          return false
+        }
+        await apilib.post(store.api, 'alice.com', text, replyTo)
+        return true
+      },
+    }))
+
+    const progressColor =
+      text.length > DANGER_TEXT_LENGTH
+        ? '#e60000'
+        : text.length > WARNING_TEXT_LENGTH
+        ? '#f7c600'
+        : undefined
+
+    return (
+      <KeyboardAvoidingView style={styles.outer} behavior="padding">
+        <TextInput
+          multiline
+          scrollEnabled
+          onChangeText={text => onChangeText(text)}
+          value={text}
+          placeholder={
+            replyTo ? 'Write your reply' : "What's new in the scene?"
+          }
+          style={styles.textInput}
+        />
+        <View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}>
+          <View style={s.flex1} />
+          <View>
+            <ProgressCircle
+              color={progressColor}
+              progress={text.length / MAX_TEXT_LENGTH}
+            />
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    )
+  }),
+)
+
+const styles = StyleSheet.create({
+  outer: {
+    flexDirection: 'column',
+    backgroundColor: '#fff',
+    padding: 10,
+    height: '100%',
+  },
+  textInput: {
+    flex: 1,
+    padding: 10,
+  },
+})

src/view/com/feed/FeedItem.tsx

@@ -30,6 +30,11 @@ export const FeedItem = observer(function FeedItem({
       name: item.author.name,
     })
   }
+  const onPressReply = () => {
+    onNavigateContent('Composer', {
+      replyTo: item.uri,
+    })
+  }
   const onPressToggleRepost = () => {
     item
       .toggleRepost()
@@ -78,13 +83,13 @@ export const FeedItem = observer(function FeedItem({
             {record.text}
           </Text>
           <View style={styles.ctrls}>
-            <View style={styles.ctrl}>
+            <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
               <FontAwesomeIcon
                 style={styles.ctrlIcon}
                 icon={['far', 'comment']}
               />
               <Text>{item.replyCount}</Text>
-            </View>
+            </TouchableOpacity>
             <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
               <FontAwesomeIcon
                 style={

src/view/com/post-thread/PostThreadItem.tsx

@@ -54,6 +54,11 @@ export const PostThreadItem = observer(function PostThreadItem({
       recordKey: urip.recordKey,
     })
   }
+  const onPressReply = () => {
+    onNavigateContent('Composer', {
+      replyTo: item.uri,
+    })
+  }
   const onPressToggleRepost = () => {
     item
       .toggleRepost()
@@ -129,13 +134,13 @@ export const PostThreadItem = observer(function PostThreadItem({
             <></>
           )}
           <View style={styles.ctrls}>
-            <View style={styles.ctrl}>
+            <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
               <FontAwesomeIcon
                 style={styles.ctrlIcon}
                 icon={['far', 'comment']}
               />
               <Text>{item.replyCount}</Text>
-            </View>
+            </TouchableOpacity>
             <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
               <FontAwesomeIcon
                 style={