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/components/Lists.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import {View} from 'react-native'
+import React, {memo} from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {cleanError} from 'lib/strings/errors'
 import {CenteredView} from 'view/com/util/Views'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Error} from '#/components/Error'
 import {Loader} from '#/components/Loader'
@@ -16,11 +16,13 @@ export function ListFooter({
   error,
   onRetry,
   height,
+  style,
 }: {
   isFetchingNextPage?: boolean
   error?: string
   onRetry?: () => Promise<unknown>
   height?: number
+  style?: StyleProp<ViewStyle>
 }) {
   const t = useTheme()
 
@@ -33,6 +35,7 @@ export function ListFooter({
         a.pb_lg,
         t.atoms.border_contrast_low,
         {height: height ?? 180, paddingTop: 30},
+        flatten(style),
       ]}>
       {isFetchingNextPage ? (
         <Loader size="xl" />
@@ -120,7 +123,7 @@ export function ListHeaderDesktop({
   )
 }
 
-export function ListMaybePlaceholder({
+let ListMaybePlaceholder = ({
   isLoading,
   noEmpty,
   isError,
@@ -130,6 +133,8 @@ export function ListMaybePlaceholder({
   errorMessage,
   emptyType = 'page',
   onRetry,
+  onGoBack,
+  sideBorders,
 }: {
   isLoading: boolean
   noEmpty?: boolean
@@ -140,7 +145,9 @@ export function ListMaybePlaceholder({
   errorMessage?: string
   emptyType?: 'page' | 'results'
   onRetry?: () => Promise<unknown>
-}) {
+  onGoBack?: () => void
+  sideBorders?: boolean
+}): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
   const {gtMobile, gtTablet} = useBreakpoints()
@@ -155,7 +162,7 @@ export function ListMaybePlaceholder({
           t.atoms.border_contrast_low,
           {paddingTop: 175, paddingBottom: 110},
         ]}
-        sideBorders={gtMobile}
+        sideBorders={sideBorders ?? gtMobile}
         topBorder={!gtTablet}>
         <View style={[a.w_full, a.align_center, {top: 100}]}>
           <Loader size="xl" />
@@ -170,6 +177,8 @@ export function ListMaybePlaceholder({
         title={errorTitle ?? _(msg`Oops!`)}
         message={errorMessage ?? _(`Something went wrong!`)}
         onRetry={onRetry}
+        onGoBack={onGoBack}
+        sideBorders={sideBorders}
       />
     )
   }
@@ -188,9 +197,13 @@ export function ListMaybePlaceholder({
           _(msg`We're sorry! We can't find the page you were looking for.`)
         }
         onRetry={onRetry}
+        onGoBack={onGoBack}
+        sideBorders={sideBorders}
       />
     )
   }
 
   return null
 }
+ListMaybePlaceholder = memo(ListMaybePlaceholder)
+export {ListMaybePlaceholder}