New rich text composer + autocomplete (#10159)

src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,78 @@
+import {useCallback} from 'react'
+import {View} from 'react-native'
+import {Sift, type UseSiftReturn} from '@bsky.app/sift'
+
+import {atoms as a, useTheme} from '#/alf'
+import {type AutocompleteItem} from '#/components/Autocomplete/types'
+import {useOnKeyboard} from '#/components/hooks/useOnKeyboard'
+import {Portal} from '#/components/Portal'
+import {IS_WEB} from '#/env'
+import {AutocompleteItemEmoji} from './AutocompleteItemEmoji'
+import {AutocompleteItemProfile} from './AutocompleteItemProfile'
+import {AutocompleteItemSearch} from './AutocompleteItemSearch'
+
+function renderItem(
+  item: Parameters<Parameters<typeof Sift<AutocompleteItem>>[0]['render']>[0],
+) {
+  switch (item.item.type) {
+    case 'profile':
+      return <AutocompleteItemProfile {...item} />
+    case 'emoji':
+      return <AutocompleteItemEmoji {...item} />
+    case 'search':
+      return <AutocompleteItemSearch {...item} />
+    default:
+      return <View />
+  }
+}
+
+export function Autocomplete({
+  inverted,
+  sift,
+  data,
+  render = renderItem,
+  onSelect,
+  onDismiss,
+}: {
+  inverted?: boolean
+  sift: UseSiftReturn
+  data: AutocompleteItem[]
+  render?: Parameters<typeof Sift<AutocompleteItem>>[0]['render']
+  onSelect: (item: AutocompleteItem) => void
+  onDismiss: () => void
+}) {
+  const t = useTheme()
+
+  const updatePosition = useCallback(() => {
+    sift.updatePosition()
+  }, [sift])
+
+  useOnKeyboard('keyboardDidShow', updatePosition)
+  useOnKeyboard('keyboardDidHide', updatePosition)
+
+  return (
+    <Portal>
+      <Sift
+        inverted={inverted}
+        sift={sift}
+        data={data}
+        onSelect={onSelect}
+        onDismiss={onDismiss}
+        style={[
+          a.overflow_hidden,
+          a.rounded_md,
+          a.border,
+          t.atoms.border_contrast_low,
+          t.atoms.bg,
+          a.w_full,
+          IS_WEB
+            ? {
+                maxWidth: 300,
+              }
+            : {},
+        ]}
+        render={render}
+      />
+    </Portal>
+  )
+}

src/components/Autocomplete/AutocompleteItemEmoji.tsx

@@ -0,0 +1,30 @@
+import {SiftItem} from '@bsky.app/sift'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import {type AutocompleteItemProps} from './types'
+
+export function AutocompleteItemEmoji({
+  active,
+  props,
+  item,
+}: AutocompleteItemProps) {
+  const t = useTheme()
+
+  if (item.type !== 'emoji') return null
+
+  return (
+    <SiftItem
+      {...props}
+      style={s => [
+        {paddingVertical: 6, paddingHorizontal: 10},
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        active || s.hovered || s.pressed ? [t.atoms.bg_contrast_25] : [],
+      ]}>
+      <Text style={[a.text_xl, a.leading_tight]}>{item.value}</Text>
+      <Text style={[a.text_md, a.leading_tight]}>:{item.emoji.id}:</Text>
+    </SiftItem>
+  )
+}

src/components/Autocomplete/AutocompleteItemProfile.tsx

@@ -0,0 +1,47 @@
+import {SiftItem} from '@bsky.app/sift'
+
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {atoms as a, useTheme} from '#/alf'
+import * as ProfileCard from '#/components/ProfileCard'
+import {type AutocompleteItemProps} from './types'
+
+export function AutocompleteItemProfile({
+  active,
+  isFirst,
+  isLast,
+  props,
+  item,
+}: AutocompleteItemProps) {
+  const t = useTheme()
+  const moderationOpts = useModerationOpts()
+
+  if (item.type !== 'profile' || !moderationOpts) return null
+
+  return (
+    <SiftItem
+      {...props}
+      style={s => [
+        a.py_sm,
+        a.px_md,
+        active || s.hovered || s.pressed ? [t.atoms.bg_contrast_25] : [],
+        isFirst && {
+          paddingTop: a.py_sm.paddingTop * 1.2,
+        },
+        isLast && {
+          paddingBottom: a.py_sm.paddingTop * 1.2,
+        },
+      ]}>
+      <ProfileCard.Header>
+        <ProfileCard.Avatar
+          disabledPreview
+          profile={item.profile}
+          moderationOpts={moderationOpts}
+        />
+        <ProfileCard.NameAndHandle
+          profile={item.profile}
+          moderationOpts={moderationOpts}
+        />
+      </ProfileCard.Header>
+    </SiftItem>
+  )
+}

src/components/Autocomplete/AutocompleteItemSearch.tsx

@@ -0,0 +1,49 @@
+import {View} from 'react-native'
+import {SiftItem} from '@bsky.app/sift'
+
+import {atoms as a, useTheme} from '#/alf'
+import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass'
+import {Text} from '#/components/Typography'
+import {type AutocompleteItemProps} from './types'
+
+export function AutocompleteItemSearch({
+  active,
+  isFirst,
+  isLast,
+  props,
+  item,
+}: AutocompleteItemProps) {
+  const t = useTheme()
+
+  if (item.type !== 'search') return null
+
+  return (
+    <SiftItem
+      {...props}
+      style={s => [
+        a.py_sm,
+        a.px_md,
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        active || s.hovered || s.pressed ? [t.atoms.bg_contrast_25] : [],
+        isFirst && {
+          paddingTop: a.py_sm.paddingTop * 1.2,
+        },
+        isLast && {
+          paddingBottom: a.py_sm.paddingTop * 1.2,
+        },
+      ]}>
+      <View
+        style={[
+          a.align_center,
+          {
+            width: 40,
+          },
+        ]}>
+        <MagnifyingGlassIcon fill={t.atoms.text_contrast_low.color} size="xl" />
+      </View>
+      <Text style={[a.text_md, a.leading_snug]}>{item.value}</Text>
+    </SiftItem>
+  )
+}

src/components/Autocomplete/index.tsx

@@ -0,0 +1,6 @@
+export * from './Autocomplete'
+export * from './AutocompleteItemEmoji'
+export * from './AutocompleteItemProfile'
+export * from './types'
+export * from './useAutocomplete'
+export * from './util'

src/components/Autocomplete/types.ts

@@ -0,0 +1,48 @@
+import {type Sift} from '@bsky.app/sift'
+import {type Emoji} from '@emoji-mart/data'
+
+import type * as bsky from '#/types/bsky'
+
+export type AutocompleteProfile = {
+  key: string
+  type: 'profile'
+  value: string
+  profile: bsky.profile.AnyProfileView
+}
+
+export type AutocompleteTag = {
+  key: string
+  type: 'tag'
+  value: string
+  tag: string
+}
+
+export type AutocompleteEmoji = {
+  key: string
+  type: 'emoji'
+  value: string
+  emoji: Emoji
+}
+
+export type AutocompleteSearch = {
+  key: string
+  type: 'search'
+  value: string
+}
+
+export type AutocompleteItem =
+  | AutocompleteProfile
+  | AutocompleteTag
+  | AutocompleteEmoji
+  | AutocompleteSearch
+
+export type AutocompleteItemType = AutocompleteItem['type']
+
+export type AutocompleteItemProps = Parameters<
+  Parameters<typeof Sift<AutocompleteItem>>[0]['render']
+>[0]
+
+export type AutocompleteApi = {
+  query: string
+  items: AutocompleteItem[]
+}

src/components/Autocomplete/useAutocomplete/index.ts

@@ -0,0 +1,135 @@
+import {useCallback} from 'react'
+import {moderateProfile, type ModerationOpts} from '@atproto/api'
+import {keepPreviousData, useQuery} from '@tanstack/react-query'
+
+import {isJustAMute, moduiContainsHideableOffense} from '#/lib/moderation'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {STALE} from '#/state/queries'
+import {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences'
+import {useAgent} from '#/state/session'
+import {
+  type AutocompleteApi,
+  type AutocompleteItem,
+  type AutocompleteItemType,
+  type AutocompleteProfile,
+} from '#/components/Autocomplete/types'
+import {useEmojiSearch} from './useEmojiSearch'
+
+const DEFAULT_MOD_OPTS = {
+  userDid: undefined,
+  prefs: DEFAULT_LOGGED_OUT_PREFERENCES.moderationPrefs,
+}
+
+export function useAutocomplete({
+  type,
+  query: q,
+  limit,
+  showSearchFallback = false,
+}: {
+  type: AutocompleteItemType
+  query: string
+  limit?: number
+  showSearchFallback?: boolean
+}): AutocompleteApi {
+  const agent = useAgent()
+  const moderationOpts = useModerationOpts()
+  const emojiSearch = useEmojiSearch()
+
+  const query = useQuery({
+    staleTime: STALE.MINUTES.ONE,
+    queryKey: [
+      'autocomplete',
+      {
+        type,
+        query: q,
+      },
+    ],
+    async queryFn() {
+      if (type === 'profile') {
+        // TODO return recents
+        if (!q) return []
+
+        // Going from "foo" to "foo." should not clear matches.
+        q = q.toLowerCase().trim().replace(/\.$/, '')
+
+        const res = await agent.searchActorsTypeahead({
+          q,
+          limit: limit || 8,
+        })
+
+        return (res?.data.actors || []).map(profile => ({
+          key: profile.did,
+          type: 'profile' as const,
+          value: '@' + profile.handle,
+          profile,
+        }))
+      } else if (type === 'emoji') {
+        return emojiSearch(q, limit || 8)
+      }
+
+      return []
+    },
+    select: useCallback(
+      (items: AutocompleteItem[]) => {
+        const seen = new Set<string>()
+        let results: AutocompleteItem[] = []
+
+        for (const item of items) {
+          if (seen.has(item.key)) continue
+          seen.add(item.key)
+
+          if (item.type === 'profile') {
+            const moderated = moderateProfileItem({
+              query: q,
+              item,
+              moderationOpts: moderationOpts || DEFAULT_MOD_OPTS,
+            })
+            if (moderated) results.push(moderated)
+          } else {
+            results.push(item)
+          }
+        }
+
+        if (showSearchFallback && q) {
+          results.unshift({
+            key: `search-${q}`,
+            type: 'search' as const,
+            value: q,
+          })
+        }
+
+        return results
+      },
+      [q, showSearchFallback, moderationOpts],
+    ),
+    placeholderData: keepPreviousData,
+  })
+
+  return {
+    query: q,
+    items: query.data || [],
+  }
+}
+
+function moderateProfileItem({
+  query,
+  item,
+  moderationOpts,
+}: {
+  query: string
+  item: AutocompleteProfile
+  moderationOpts: ModerationOpts
+}) {
+  const modui = moderateProfile(item.profile, moderationOpts).ui('profileList')
+  const isExactMatch = query && item.profile.handle.toLowerCase() === query
+
+  if (
+    (isExactMatch && !moduiContainsHideableOffense(modui)) ||
+    !modui.filter ||
+    isJustAMute(modui)
+  ) {
+    return item
+  }
+
+  return null
+}

src/components/Autocomplete/useAutocomplete/useEmojiSearch.ts

@@ -0,0 +1,40 @@
+import {useCallback} from 'react'
+import {type Emoji} from '@emoji-mart/data'
+import Fuse from 'fuse.js'
+
+import {useGetEmojis} from '#/lib/useGetEmojis'
+import {type AutocompleteEmoji} from '#/components/Autocomplete/types'
+
+/*
+ * Lazily loaded Fuse instance for emoji search. Built once on first search,
+ * then reused for all subsequent searches.
+ */
+let emojiFuseInstance: Fuse<Emoji> | null = null
+
+export function useEmojiSearch(): (
+  query: string,
+  limit?: number,
+) => Promise<AutocompleteEmoji[]> {
+  const getEmojis = useGetEmojis()
+
+  return useCallback(
+    async (query: string, limit: number = 8) => {
+      if (!emojiFuseInstance) {
+        const data = await getEmojis()
+        emojiFuseInstance = new Fuse(Object.values(data.emojis), {
+          keys: ['search'],
+          threshold: 0.3,
+        })
+      }
+
+      const results = emojiFuseInstance.search(query, {limit})
+      return results.map(result => ({
+        key: result.item.id,
+        type: 'emoji' as const,
+        value: result.item.skins[0].native,
+        emoji: result.item,
+      }))
+    },
+    [getEmojis],
+  )
+}

src/components/Autocomplete/util.ts

@@ -0,0 +1,12 @@
+export function parseAutocompleteItemType(type: string) {
+  switch (type) {
+    case 'mention':
+      return 'profile'
+    case 'tag':
+      return 'tag'
+    case 'emoji':
+      return 'emoji'
+    default:
+      throw new Error(`Unknown autocomplete item type: ${type}`)
+  }
+}