diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
index 5e91ef149e..83ae6cb391 100644
--- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx
+++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
@@ -1,5 +1,6 @@
import {View} from 'react-native'
import Animated, {FadeInDown, FadeOut} from 'react-native-reanimated'
+import {type AppBskyActorDefs} from '@atproto/api'
import {Trans} from '@lingui/macro'
import {PressableScale} from '#/lib/custom-animations/PressableScale'
@@ -9,6 +10,8 @@ import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
+import {useSimpleVerificationState} from '#/components/verification'
+import {VerificationCheck} from '#/components/verification/VerificationCheck'
export function Autocomplete({
prefix,
@@ -42,51 +45,15 @@ export function Autocomplete({
{suggestions?.length ? (
suggestions.slice(0, 5).map((item, index, arr) => {
return (
-
- onSelect(item.handle)}
- accessibilityLabel={`Select ${item.handle}`}
- accessibilityHint="">
-
-
-
- {sanitizeDisplayName(
- item.displayName || sanitizeHandle(item.handle),
- )}
-
-
- {sanitizeHandle(item.handle, '@')}
-
-
-
-
+ {
+ onSelect(item.handle)
+ }}
+ />
)
})
) : (
@@ -97,3 +64,64 @@ export function Autocomplete({
)
}
+
+function AutocompleteProfileCard({
+ profile,
+ itemIndex,
+ totalItems,
+ onPress,
+}: {
+ profile: AppBskyActorDefs.ProfileViewBasic
+ itemIndex: number
+ totalItems: number
+ onPress: () => void
+}) {
+ const t = useTheme()
+ const state = useSimpleVerificationState({profile})
+ const displayName = sanitizeDisplayName(
+ profile.displayName || sanitizeHandle(profile.handle),
+ )
+ return (
+
+
+
+
+
+
+ {displayName}
+
+ {state.isVerified && (
+
+
+
+ )}
+
+
+
+ {sanitizeHandle(profile.handle, '@')}
+
+
+
+ )
+}
diff --git a/src/view/com/composer/text-input/web/Autocomplete.tsx b/src/view/com/composer/text-input/web/Autocomplete.tsx
index f40c2ee8d9..62f19c63d2 100644
--- a/src/view/com/composer/text-input/web/Autocomplete.tsx
+++ b/src/view/com/composer/text-input/web/Autocomplete.tsx
@@ -1,20 +1,24 @@
import {forwardRef, useEffect, useImperativeHandle, useState} from 'react'
import {Pressable, StyleSheet, View} from 'react-native'
+import {type AppBskyActorDefs} from '@atproto/api'
import {Trans} from '@lingui/macro'
import {ReactRenderer} from '@tiptap/react'
import {
- SuggestionKeyDownProps,
- SuggestionOptions,
- SuggestionProps,
+ type SuggestionKeyDownProps,
+ type SuggestionOptions,
+ type SuggestionProps,
} from '@tiptap/suggestion'
-import tippy, {Instance as TippyInstance} from 'tippy.js'
+import tippy, {type Instance as TippyInstance} from 'tippy.js'
import {usePalette} from '#/lib/hooks/usePalette'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
-import {ActorAutocompleteFn} from '#/state/queries/actor-autocomplete'
+import {type ActorAutocompleteFn} from '#/state/queries/actor-autocomplete'
import {Text} from '#/view/com/util/text/Text'
import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a} from '#/alf'
+import {useSimpleVerificationState} from '#/components/verification'
+import {VerificationCheck} from '#/components/verification/VerificationCheck'
import {useGrapheme} from '../hooks/useGrapheme'
interface MentionListRef {
@@ -95,7 +99,6 @@ const MentionList = forwardRef(
function MentionListImpl(props: SuggestionProps, ref) {
const [selectedIndex, setSelectedIndex] = useState(0)
const pal = usePalette('default')
- const {getGraphemeString} = useGrapheme()
const selectItem = (index: number) => {
const item = props.items[index]
@@ -149,45 +152,19 @@ const MentionList = forwardRef(
{items.length > 0 ? (
items.map((item, index) => {
- const {name: displayName} = getGraphemeString(
- sanitizeDisplayName(
- item.displayName || sanitizeHandle(item.handle),
- ),
- 30, // Heuristic value; can be modified
- )
const isSelected = selectedIndex === index
return (
- {
selectItem(index)
}}
- accessibilityRole="button">
-
-
-
- {displayName}
-
-
-
- {sanitizeHandle(item.handle, '@')}
-
-
+ />
)
})
) : (
@@ -201,6 +178,71 @@ const MentionList = forwardRef(
},
)
+function AutocompleteProfileCard({
+ profile,
+ isSelected,
+ itemIndex,
+ totalItems,
+ onPress,
+}: {
+ profile: AppBskyActorDefs.ProfileViewBasic
+ isSelected: boolean
+ itemIndex: number
+ totalItems: number
+ onPress: () => void
+}) {
+ const pal = usePalette('default')
+ const {getGraphemeString} = useGrapheme()
+ const {name: displayName} = getGraphemeString(
+ sanitizeDisplayName(profile.displayName || sanitizeHandle(profile.handle)),
+ 30, // Heuristic value; can be modified
+ )
+ const state = useSimpleVerificationState({
+ profile,
+ })
+ return (
+
+
+
+
+
+ {displayName}
+
+ {state.isVerified && (
+
+
+
+ )}
+
+
+
+
+ {sanitizeHandle(profile.handle, '@')}
+
+
+
+ )
+}
+
const styles = StyleSheet.create({
container: {
width: 500,
@@ -216,7 +258,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
paddingHorizontal: 12,
paddingVertical: 8,
- gap: 4,
+ gap: 16,
},
firstMention: {
borderTopLeftRadius: 2,