Minor improvements to web autocomplete in composer

src/view/com/composer/ComposePost.tsx

@@ -21,7 +21,7 @@ import {
 import {useAnalytics} from 'lib/analytics'
 import _isEqual from 'lodash.isequal'
 import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view'
-import {Autocomplete} from './Autocomplete'
+import {Autocomplete} from './autocomplete/Autocomplete'
 import {ExternalEmbed} from './ExternalEmbed'
 import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'

src/view/com/composer/autocomplete/Autocomplete.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {usePalette} from 'lib/hooks/usePalette'
-import {Text} from '../util/text/Text'
+import {Text} from '../../util/text/Text'
 
 interface AutocompleteItem {
   handle: string

src/view/com/composer/autocomplete/Autocomplete.web.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {TouchableOpacity, StyleSheet, View} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from '../../util/text/Text'
+
+interface AutocompleteItem {
+  handle: string
+  displayName?: string
+}
+
+export function Autocomplete({
+  active,
+  items,
+  onSelect,
+}: {
+  active: boolean
+  items: AutocompleteItem[]
+  onSelect: (item: string) => void
+}) {
+  const pal = usePalette('default')
+
+  if (!active) {
+    return <View />
+  }
+  return (
+    <View style={[styles.outer, pal.view, pal.border]}>
+      {items.map((item, i) => (
+        <TouchableOpacity
+          testID="autocompleteButton"
+          key={i}
+          style={[pal.border, styles.item]}
+          onPress={() => onSelect(item.handle)}>
+          <Text type="md-medium" style={pal.text}>
+            {item.displayName || item.handle}
+            <Text type="sm" style={pal.textLight}>
+              &nbsp;@{item.handle}
+            </Text>
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: '100%',
+    borderWidth: 1,
+    borderRadius: 8,
+  },
+  item: {
+    borderBottomWidth: 1,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+})

src/view/shell/web/Composer.tsx

@@ -61,5 +61,6 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     paddingHorizontal: 2,
     borderRadius: 8,
+    marginBottom: '10vh',
   },
 })