From 403c187cf555bba8cb24c02076a275fc03df9644 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 2 Mar 2023 16:43:19 -0800
Subject: [PATCH] Minor improvements to web autocomplete in composer

---
 src/view/com/composer/ComposePost.tsx         |  2 +-
 .../{ => autocomplete}/Autocomplete.tsx       |  2 +-
 .../autocomplete/Autocomplete.web.tsx         | 59 +++++++++++++++++++
 src/view/shell/web/Composer.tsx               |  1 +
 4 files changed, 62 insertions(+), 2 deletions(-)
 rename src/view/com/composer/{ => autocomplete}/Autocomplete.tsx (97%)
 create mode 100644 src/view/com/composer/autocomplete/Autocomplete.web.tsx

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 <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,
+  },
+})
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',
   },
 })