move Tag, update styling

src/view/com/Tag.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {StyleSheet, Pressable} from 'react-native'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from 'view/com/util/text/Text'
+
+export function Tag({value}: {value: string}) {
+  const pal = usePalette('default')
+
+  return (
+    <Text type="xs-medium" style={[styles.tag, pal.viewLight, pal.textLight]}>
+      #{value}
+    </Text>
+  )
+}
+
+export function EditableTag({
+  value,
+  onRemove,
+}: {
+  value: string
+  onRemove: (tag: string) => void
+}) {
+  const pal = usePalette('default')
+  const [hovered, setHovered] = React.useState(false)
+
+  const hoverIn = React.useCallback(() => {
+    setHovered(true)
+  }, [setHovered])
+
+  const hoverOut = React.useCallback(() => {
+    setHovered(false)
+  }, [setHovered])
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={() => onRemove(value)}
+      onPointerEnter={hoverIn}
+      onPointerLeave={hoverOut}
+      style={state => [
+        pal.border,
+        styles.tag,
+        {
+          opacity: hovered || state.pressed || state.focused ? 0.8 : 1,
+          outline: 0,
+          paddingRight: 6,
+        },
+      ]}>
+      <Text
+        type="xs-medium"
+        style={[pal.textLight, {lineHeight: 13, paddingBottom: 2}]}>
+        #{value}
+      </Text>
+      <FontAwesomeIcon
+        icon="x"
+        style={
+          {
+            color: hovered ? pal.textLight.color : pal.border.borderColor,
+          } as FontAwesomeIconStyle
+        }
+        size={8}
+      />
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  tag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 20,
+    overflow: 'hidden',
+    borderWidth: 1,
+  },
+})

src/view/com/composer/TagInput.tsx

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   NativeSyntheticEvent,
   TextInputKeyPressEventData,
-  Pressable,
 } from 'react-native'
 import {
   FontAwesomeIcon,
@@ -13,8 +12,8 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 
 import {isWeb} from 'platform/detection'
-import {Text} from 'view/com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
+import {EditableTag} from 'view/com/Tag'
 
 function uniq(tags: string[]) {
   return Array.from(new Set(tags))
@@ -34,29 +33,6 @@ function sanitize(tagString: string) {
   return tagString.trim().replace(/^#/, '')
 }
 
-function Tag({
-  tag,
-  removeTag,
-}: {
-  tag: string
-  removeTag: (tag: string) => void
-}) {
-  const pal = usePalette('default')
-  return (
-    <Pressable
-      accessibilityRole="button"
-      onPress={() => removeTag(tag)}
-      style={state => ({
-        opacity: state.hovered || state.pressed || state.focused ? 0.8 : 1,
-        outline: 0,
-      })}>
-      <Text type="xs-medium" style={[styles.tag, pal.viewLight, pal.textLight]}>
-        #{tag}
-      </Text>
-    </Pressable>
-  )
-}
-
 export function TagInput({
   max = 8,
   onChangeTags,
@@ -130,7 +106,7 @@ export function TagInput({
         />
       )}
       {tags.map(tag => (
-        <Tag key={tag} tag={tag} removeTag={removeTag} />
+        <EditableTag key={tag} value={tag} onRemove={removeTag} />
       ))}
       {tags.length >= max ? null : (
         <TextInput