Fix input positioning for small screens

5 files changed, 53 insertions, 34 deletions

diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx
index 85a389320..30e5d0176 100644
--- a/src/view/com/composer/ComposePost.tsx
+++ b/src/view/com/composer/ComposePost.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
+  KeyboardAvoidingView,
   StyleSheet,
   Text,
   TextInput,
@@ -20,7 +21,7 @@ import {s, colors, gradients} from '../../lib/styles'
 
 const MAX_TEXT_LENGTH = 256
 const WARNING_TEXT_LENGTH = 200
-const DANGER_TEXT_LENGTH = 255
+const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
 
 export function ComposePost({
   replyTo,
@@ -56,9 +57,6 @@ export function ComposePost({
   })
 
   const onChangeText = (newText: string) => {
-    if (newText.length > MAX_TEXT_LENGTH) {
-      newText = newText.slice(0, MAX_TEXT_LENGTH)
-    }
     setText(newText)
 
     const prefix = extractTextAutocompletePrefix(newText)
@@ -81,6 +79,9 @@ export function ComposePost({
     if (isProcessing) {
       return
     }
+    if (text.length > MAX_TEXT_LENGTH) {
+      return
+    }
     setError('')
     if (text.trim().length === 0) {
       setError('Did you want to say anything?')
@@ -112,6 +113,7 @@ export function ComposePost({
     setAutocompleteOptions([])
   }
 
+  const canPost = text.length <= MAX_TEXT_LENGTH
   const progressColor =
     text.length > DANGER_TEXT_LENGTH
       ? '#e60000'
@@ -133,7 +135,7 @@ export function ComposePost({
   }, [text])
 
   return (
-    <View style={styles.outer}>
+    <KeyboardAvoidingView behavior="padding" style={styles.outer}>
       <View style={styles.topbar}>
         <TouchableOpacity onPress={onPressCancel}>
           <Text style={[s.blue3, s.f16]}>Cancel</Text>
@@ -143,7 +145,7 @@ export function ComposePost({
           <View style={styles.postBtn}>
             <ActivityIndicator />
           </View>
-        ) : (
+        ) : canPost ? (
           <TouchableOpacity onPress={onPressPublish}>
             <LinearGradient
               colors={[gradients.primary.start, gradients.primary.end]}
@@ -153,6 +155,10 @@ export function ComposePost({
               <Text style={[s.white, s.f16, s.bold]}>Post</Text>
             </LinearGradient>
           </TouchableOpacity>
+        ) : (
+          <View style={[styles.postBtn, {backgroundColor: colors.gray1}]}>
+            <Text style={[s.gray5, s.f16, s.bold]}>Post</Text>
+          </View>
         )}
       </View>
       {error !== '' && (
@@ -176,8 +182,11 @@ export function ComposePost({
         style={styles.textInput}>
         {textDecorated}
       </TextInput>
-      <View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}>
+      <View style={[s.flexRow, {alignItems: 'center'}, s.pt10, s.pb10, s.pr5]}>
         <View style={s.flex1} />
+        <Text style={[s.mr10, {color: progressColor}]}>
+          {text.length} / {MAX_TEXT_LENGTH}
+        </Text>
         <View>
           <ProgressCircle
             color={progressColor}
@@ -190,7 +199,7 @@ export function ComposePost({
         items={autocompleteOptions}
         onSelect={onSelectAutocompleteItem}
       />
-    </View>
+    </KeyboardAvoidingView>
   )
 }
 
@@ -219,6 +228,7 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 5,
     paddingHorizontal: 5,
+    height: 50,
   },
   postBtn: {
     borderRadius: 20,
diff --git a/src/view/com/modals/CreateScene.tsx b/src/view/com/modals/CreateScene.tsx
index 9c4cdc5da..3fb3ab6f8 100644
--- a/src/view/com/modals/CreateScene.tsx
+++ b/src/view/com/modals/CreateScene.tsx
@@ -92,15 +92,18 @@ export function Component({}: {}) {
       setIsProcessing(false)
     }
   }
+  const onPressCancel = () => {
+    store.shell.closeModal()
+  }
 
   return (
     <View style={styles.outer}>
-      <Text style={styles.title}>Create a scene</Text>
-      <Text style={styles.description}>
-        Scenes are invite-only groups which aggregate what's popular with
-        members.
-      </Text>
       <BottomSheetScrollView style={styles.inner}>
+        <Text style={styles.title}>Create a scene</Text>
+        <Text style={styles.description}>
+          Scenes are invite-only groups which aggregate what's popular with
+          members.
+        </Text>
         <View style={{paddingBottom: 50}}>
           <View style={styles.group}>
             <Text style={styles.label}>Scene Handle</Text>
@@ -159,6 +162,11 @@ export function Component({}: {}) {
               </View>
             </View>
           )}
+          <TouchableOpacity style={s.mt10} onPress={onPressCancel}>
+            <View style={[styles.btn, {backgroundColor: colors.white}]}>
+              <Text style={[s.black, s.bold]}>Cancel</Text>
+            </View>
+          </TouchableOpacity>
         </View>
       </BottomSheetScrollView>
     </View>
@@ -168,8 +176,7 @@ export function Component({}: {}) {
 const styles = StyleSheet.create({
   outer: {
     flex: 1,
-    paddingTop: 20,
-    paddingBottom: 20,
+    // paddingTop: 20,
   },
   title: {
     textAlign: 'center',
@@ -222,7 +229,6 @@ const styles = StyleSheet.create({
     width: '100%',
     borderRadius: 32,
     padding: 14,
-    marginBottom: 10,
     backgroundColor: colors.gray1,
   },
 })
diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index 7310ab592..d4cb6692c 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/src/view/com/modals/EditProfile.tsx
@@ -1,7 +1,8 @@
 import React, {useState} from 'react'
 import Toast from '../util/Toast'
-import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
+import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {useStores} from '../../../state'
 import {ProfileViewModel} from '../../../state/models/profile-view'
@@ -9,7 +10,7 @@ import {s, colors, gradients} from '../../lib/styles'
 import {enforceLen, MAX_DISPLAY_NAME, MAX_DESCRIPTION} from '../../lib/strings'
 import * as Profile from '../../../third-party/api/src/client/types/app/bsky/actor/profile'
 
-export const snapPoints = ['80%']
+export const snapPoints = ['60%']
 
 export function Component({
   profileView,
@@ -26,6 +27,9 @@ export function Component({
   const [description, setDescription] = useState<string>(
     profileView.description || '',
   )
+  const onPressCancel = () => {
+    store.shell.closeModal()
+  }
   const onPressSave = async () => {
     if (error) {
       setError('')
@@ -60,7 +64,7 @@ export function Component({
   return (
     <View style={s.flex1}>
       <Text style={[s.textCenter, s.bold, s.f16]}>Edit my profile</Text>
-      <View style={styles.inner}>
+      <BottomSheetScrollView style={styles.inner}>
         {error !== '' && (
           <View style={s.mb10}>
             <ErrorMessage message={error} />
@@ -68,7 +72,7 @@ export function Component({
         )}
         <View style={styles.group}>
           <Text style={styles.label}>Display Name</Text>
-          <TextInput
+          <BottomSheetTextInput
             style={styles.textInput}
             placeholder="e.g. Alice Roberts"
             value={displayName}
@@ -77,7 +81,7 @@ export function Component({
         </View>
         <View style={styles.group}>
           <Text style={styles.label}>Description</Text>
-          <TextInput
+          <BottomSheetTextInput
             style={[styles.textArea]}
             placeholder="e.g. Artist, dog-lover, and memelord."
             multiline
@@ -94,7 +98,12 @@ export function Component({
             <Text style={[s.white, s.bold]}>Save Changes</Text>
           </LinearGradient>
         </TouchableOpacity>
-      </View>
+        <TouchableOpacity style={s.mt5} onPress={onPressCancel}>
+          <View style={[styles.btn]}>
+            <Text style={[s.black, s.bold]}>Cancel</Text>
+          </View>
+        </TouchableOpacity>
+      </BottomSheetScrollView>
     </View>
   )
 }
diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx
index 1f3cc90f9..0aa1a07e2 100644
--- a/src/view/com/modals/ServerInput.tsx
+++ b/src/view/com/modals/ServerInput.tsx
@@ -1,13 +1,9 @@
 import React, {useState} from 'react'
-import Toast from '../util/Toast'
 import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import LinearGradient from 'react-native-linear-gradient'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
 import {useStores} from '../../../state'
-import {ProfileViewModel} from '../../../state/models/profile-view'
-import {s, colors, gradients} from '../../lib/styles'
-import {enforceLen, MAX_DISPLAY_NAME, MAX_DESCRIPTION} from '../../lib/strings'
+import {s, colors} from '../../lib/styles'
 import {
   IS_PROD_BUILD,
   LOCAL_DEV_SERVICE,
@@ -38,7 +34,7 @@ export function Component({
   return (
     <View style={s.flex1}>
       <Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text>
-      <View style={styles.inner}>
+      <BottomSheetScrollView style={styles.inner}>
         <View style={styles.group}>
           {!IS_PROD_BUILD ? (
             <>
@@ -66,7 +62,7 @@ export function Component({
         <View style={styles.group}>
           <Text style={styles.label}>Other service</Text>
           <View style={{flexDirection: 'row'}}>
-            <TextInput
+            <BottomSheetTextInput
               style={styles.textInput}
               placeholder="e.g. https://bsky.app"
               autoCapitalize="none"
@@ -86,7 +82,7 @@ export function Component({
             </TouchableOpacity>
           </View>
         </View>
-      </View>
+      </BottomSheetScrollView>
     </View>
   )
 }
diff --git a/src/view/lib/strings.ts b/src/view/lib/strings.ts
index 1cbad1a4d..df134e37b 100644
--- a/src/view/lib/strings.ts
+++ b/src/view/lib/strings.ts
@@ -42,9 +42,7 @@ export function ago(date: number | string | Date): string {
     ts = date
   }
   const diffSeconds = Math.floor((Date.now() - ts) / 1e3)
-  if (diffSeconds === 0) {
-    return 'just now'
-  } else if (diffSeconds < MINUTE) {
+  if (diffSeconds < MINUTE) {
     return `${diffSeconds}s`
   } else if (diffSeconds < HOUR) {
     return `${Math.floor(diffSeconds / MINUTE)}m`