Add GIF select to composer (#3600)

* create dialog with flatlist in it

* use alf for composer photos/camera/gif buttons

* add gif icons

* focus textinput on gif dialog close

* add giphy API + gif grid

* web support

* add consent confirmation

* track gif select

* desktop web consent styles

* use InlineLinkText instead of Link

* add error/loading state

* hide sideborders on web

* disable composer buttons where necessary

* skip cardyb and set thumbnail directly

* switch legacy analytics to statsig

* remove autoplay prop

* disable photo/gif buttons if external media is present

* memoize listmaybeplaceholder

* fix pagination

* don't set `value` of TextInput, clear via ref

* remove console.log

* close modal if press escape

* pass alt text in the description

* Fix typo

* Rm dialog

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

src/lib/constants.ts

@@ -89,3 +89,12 @@ export const BSKY_FEED_OWNER_DIDS = [
   'did:plc:vpkhqolt662uhesyj6nxm7ys',
   'did:plc:q6gjnaw2blty4crticxkmujt',
 ]
+
+export const GIPHY_API_URL = 'https://api.giphy.com'
+export const GIPHY_API_KEY = Platform.select({
+  ios: 'ydVxhrQkwlcUjkVKx15mF6vyaNJbMeez',
+  android: 'Vwj3Ib7857dj3EcIg24Hiz1LbRVdGeYF',
+  default: 'vyL3hQQ8AipwcmIB8kFvg0NDs9faWg7G',
+})
+export const GIPHY_PRIVACY_POLICY =
+  'https://support.giphy.com/hc/en-us/articles/360032872931-GIPHY-Privacy-Policy'

src/lib/statsig/events.ts

@@ -60,6 +60,8 @@ export type LogEvents = {
     feedType: string
     reason: 'pull-to-refresh' | 'soft-reset' | 'load-latest'
   }
+  'composer:gif:open': {}
+  'composer:gif:select': {}
 
   // Data events
   'account:create:begin': {}