Add tags support to app

package.json

@@ -35,6 +35,7 @@
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@emoji-mart/react": "^1.1.1",
+    "@estrattonbailey/tiptap-suggestion": "^2.2.0-rc.3",
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^19.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -51,7 +52,7 @@
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-menu/menu": "^0.8.0",
     "@react-native-picker/picker": "2.4.10",
-    "@react-navigation/bottom-tabs": "^6.5.7",
+    "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
@@ -102,6 +103,7 @@
     "expo-system-ui": "~2.4.0",
     "expo-updates": "~0.18.12",
     "fast-text-encoding": "^1.0.6",
+    "fuse.js": "^6.6.2",
     "graphemer": "^1.4.0",
     "history": "^5.3.0",
     "js-sha256": "^0.9.0",
@@ -121,6 +123,7 @@
     "mobx-utils": "^6.0.6",
     "normalize-url": "^8.0.0",
     "patch-package": "^6.5.1",
+    "pind": "^0.5.0",
     "postinstall-postinstall": "^2.1.0",
     "psl": "^1.9.0",
     "react": "18.2.0",

src/lib/api/index.ts

@@ -83,6 +83,7 @@ interface PostOpts {
   knownHandles?: Set<string>
   onStateChange?: (state: string) => void
   langs?: string[]
+  tags?: string[]
 }
 
 export async function post(store: RootStoreModel, opts: PostOpts) {
@@ -264,6 +265,7 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
       embed,
       langs,
       labels,
+      tags: opts.tags,
     })
   } catch (e: any) {
     console.error(`Failed to create post: ${e.toString()}`)

src/lib/strings/hashtags.ts

@@ -0,0 +1,3 @@
+export const TAG_REGEX = /(?:^|\s)(#[^\d\s]\S*)(?=\s)?/gi
+export const ENDING_PUNCTUATION_REGEX = /\p{P}+$/gu
+export const LEADING_HASH_REGEX = /^#/

src/state/models/root-store.ts

@@ -23,6 +23,7 @@ import {ImageSizesCache} from './cache/image-sizes'
 import {MutedThreads} from './muted-threads'
 import {Reminders} from './ui/reminders'
 import {reset as resetNavigation} from '../../Navigation'
+import {RecentTagsModel} from './ui/tags-autocomplete'
 
 // TEMPORARY (APP-700)
 // remove after backend testing finishes
@@ -55,6 +56,7 @@ export class RootStoreModel {
   imageSizes = new ImageSizesCache()
   mutedThreads = new MutedThreads()
   reminders = new Reminders(this)
+  recentTags = new RecentTagsModel()
 
   constructor(agent: BskyAgent) {
     this.agent = agent
@@ -80,6 +82,7 @@ export class RootStoreModel {
       invitedUsers: this.invitedUsers.serialize(),
       mutedThreads: this.mutedThreads.serialize(),
       reminders: this.reminders.serialize(),
+      recentTags: this.recentTags.serialize(),
     }
   }
 
@@ -112,6 +115,9 @@ export class RootStoreModel {
       if (hasProp(v, 'mutedThreads')) {
         this.mutedThreads.hydrate(v.mutedThreads)
       }
+      if (hasProp(v, 'recentTags')) {
+        this.recentTags.hydrate(v.recentTags)
+      }
       if (hasProp(v, 'reminders')) {
         this.reminders.hydrate(v.reminders)
       }

src/state/models/ui/tags-autocomplete.ts

@@ -0,0 +1,128 @@
+import {makeAutoObservable, runInAction} from 'mobx'
+import AwaitLock from 'await-lock'
+import {RootStoreModel} from '../root-store'
+import Fuse from 'fuse.js'
+import {isObj, hasProp, isStrArray} from 'lib/type-guards'
+
+/**
+ * Used only to persist recent tags across app restarts.
+ *
+ * TODO may want an LRU?
+ */
+export class RecentTagsModel {
+  _tags: string[] = []
+
+  constructor() {
+    makeAutoObservable(this, {}, {autoBind: true})
+  }
+
+  get tags() {
+    return this._tags
+  }
+
+  add(tag: string) {
+    this._tags = Array.from(new Set([tag, ...this._tags]))
+  }
+
+  remove(tag: string) {
+    this._tags = this._tags.filter(t => t !== tag)
+  }
+
+  serialize() {
+    return {_tags: this._tags}
+  }
+
+  hydrate(v: unknown) {
+    if (isObj(v) && hasProp(v, '_tags') && isStrArray(v._tags)) {
+      this._tags = Array.from(new Set(v._tags))
+    }
+  }
+}
+
+export class TagsAutocompleteModel {
+  lock = new AwaitLock()
+  isActive = false
+  query = ''
+  searchedTags: string[] = []
+  profileTags: string[] = ['biology']
+
+  constructor(public rootStore: RootStoreModel) {
+    makeAutoObservable(
+      this,
+      {
+        rootStore: false,
+      },
+      {autoBind: true},
+    )
+  }
+
+  setActive(isActive: boolean) {
+    this.isActive = isActive
+  }
+
+  commitRecentTag(tag: string) {
+    this.rootStore.recentTags.add(tag)
+  }
+
+  clear() {
+    this.query = ''
+    this.searchedTags = []
+  }
+
+  get suggestions() {
+    if (!this.isActive) {
+      return []
+    }
+
+    const items = Array.from(
+      // de-duplicates via Set
+      new Set([
+        // sample up to 3 recent tags
+        ...this.rootStore.recentTags.tags.slice(0, 3),
+        // sample up to 3 of your profile tags
+        ...this.profileTags.slice(0, 3),
+        // and all searched tags
+        ...this.searchedTags,
+      ]),
+    )
+
+    // no query, return default suggestions
+    if (!this.query) {
+      return items.slice(0, 9)
+    }
+
+    // Fuse allows weighting values too, if we ever need it
+    const fuse = new Fuse(items)
+    // search amongst mixed set of tags
+    const results = fuse.search(this.query).map(r => r.item)
+    // backfill again in case search has no results
+    return results.slice(0, 9)
+  }
+
+  async search(query: string) {
+    this.query = query.trim()
+
+    await this.lock.acquireAsync()
+
+    try {
+      await this._search()
+    } finally {
+      this.lock.release()
+    }
+  }
+
+  // TODO hook up to search type-ahead
+  async _search() {
+    runInAction(() => {
+      this.searchedTags = [
+        'bluesky',
+        'code',
+        'coding',
+        'dev',
+        'developer',
+        'development',
+        'devlife',
+      ]
+    })
+  }
+}

src/view/com/Tag.tsx

@@ -0,0 +1,182 @@
+import React from 'react'
+import {StyleSheet, Pressable} from 'react-native'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+
+import {isWeb} from 'platform/detection'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text, CustomTextProps} from 'view/com/util/text/Text'
+import {TextLink} from 'view/com/util/Link'
+
+export function Tag({
+  value,
+  textSize,
+}: {
+  value: string
+  textSize?: CustomTextProps['type']
+}) {
+  const pal = usePalette('default')
+  const type = textSize || 'xs-medium'
+
+  return (
+    <TextLink
+      type={type}
+      text={`#${value}`}
+      accessible
+      href={`/search?q=${value}`}
+      style={[pal.textLight]}
+    />
+  )
+}
+
+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.viewLight,
+        styles.editableTag,
+        {
+          opacity: state.pressed || state.focused ? 0.8 : 1,
+          outline: 0,
+          paddingRight: 6,
+        },
+      ]}>
+      <Text type="md-medium" style={[pal.textLight]}>
+        #{value}
+      </Text>
+      <FontAwesomeIcon
+        icon="x"
+        style={
+          {
+            opacity: hovered ? 1 : 0.5,
+            color: pal.textLight.color,
+            marginTop: 1,
+          } as FontAwesomeIconStyle
+        }
+        size={10}
+      />
+    </Pressable>
+  )
+}
+
+export function TagButton({
+  value,
+  icon = 'x',
+  onClick,
+  removeTag,
+}: {
+  value: string
+  icon?: React.ComponentProps<typeof FontAwesomeIcon>['icon']
+  onClick?: (tag: string) => void
+  removeTag?: (tag: string) => void
+}) {
+  const pal = usePalette('default')
+  const [hovered, setHovered] = React.useState(false)
+  const [focused, setFocused] = React.useState(false)
+
+  const hoverIn = React.useCallback(() => {
+    setHovered(true)
+  }, [setHovered])
+
+  const hoverOut = React.useCallback(() => {
+    setHovered(false)
+  }, [setHovered])
+
+  React.useEffect(() => {
+    if (!isWeb) return
+
+    function listener(e: KeyboardEvent) {
+      if (e.key === 'Backspace') {
+        if (focused) {
+          removeTag?.(value)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', listener)
+
+    return () => {
+      document.removeEventListener('keydown', listener)
+    }
+  }, [value, focused, removeTag])
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={() => onClick?.(value)}
+      onPointerEnter={hoverIn}
+      onPointerLeave={hoverOut}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      style={state => [
+        pal.viewLight,
+        styles.tagButton,
+        {
+          outline: 0,
+          opacity: state.pressed || state.focused ? 0.6 : 1,
+          paddingRight: 10,
+        },
+      ]}>
+      <Text type="md-medium" style={[pal.textLight]}>
+        #{value}
+      </Text>
+      <FontAwesomeIcon
+        icon={icon}
+        style={
+          {
+            opacity: hovered ? 1 : 0.5,
+            color: pal.textLight.color,
+            marginTop: 1,
+          } as FontAwesomeIconStyle
+        }
+        size={10}
+      />
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  editableTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  tagButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flexShrink: 1,
+    paddingVertical: 6,
+    paddingTop: 5,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+  },
+})