diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx
index ad6a8ec6..a7c5711a 100644
--- a/src/view/com/composer/ComposePost.tsx
+++ b/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'
diff --git a/src/view/com/composer/Autocomplete.tsx b/src/view/com/composer/autocomplete/Autocomplete.tsx
similarity index 97%
rename from src/view/com/composer/Autocomplete.tsx
rename to src/view/com/composer/autocomplete/Autocomplete.tsx
index c17e41b3..82fb239d 100644
--- a/src/view/com/composer/Autocomplete.tsx
+++ b/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
diff --git a/src/view/com/composer/autocomplete/Autocomplete.web.tsx b/src/view/com/composer/autocomplete/Autocomplete.web.tsx
new file mode 100644
index 00000000..b6be1c21
--- /dev/null
+++ b/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
+ }
+ return (
+
+ {items.map((item, i) => (
+ onSelect(item.handle)}>
+
+ {item.displayName || item.handle}
+
+ @{item.handle}
+
+
+
+ ))}
+
+ )
+}
+
+const styles = StyleSheet.create({
+ outer: {
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ top: '100%',
+ borderWidth: 1,
+ borderRadius: 8,
+ },
+ item: {
+ borderBottomWidth: 1,
+ paddingVertical: 16,
+ paddingHorizontal: 16,
+ },
+})
diff --git a/src/view/shell/web/Composer.tsx b/src/view/shell/web/Composer.tsx
index 5006b312..0d848426 100644
--- a/src/view/shell/web/Composer.tsx
+++ b/src/view/shell/web/Composer.tsx
@@ -61,5 +61,6 @@ const styles = StyleSheet.create({
paddingVertical: 0,
paddingHorizontal: 2,
borderRadius: 8,
+ marginBottom: '10vh',
},
})