[APP-2067] Rebuild GIF Dialog (#10261)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

src/view/com/composer/Composer.tsx

@@ -95,7 +95,6 @@ import {
 } from '#/state/preferences/languages'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
-import {type Gif} from '#/state/queries/tenor'
 import {useAgent, useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {type ComposerOpts, type OnPostSuccessData} from '#/state/shell/composer'
@@ -135,6 +134,7 @@ import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import {IS_ANDROID, IS_IOS, IS_LIQUID_GLASS, IS_NATIVE, IS_WEB} from '#/env'
+import {type Gif} from '#/features/gifPicker/types'
 import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
 import {
   draftToComposerPosts,

src/view/com/composer/ExternalEmbed.tsx

@@ -6,7 +6,6 @@ import {
   useResolveGifQuery,
   useResolveLinkQuery,
 } from '#/state/queries/resolve-link'
-import {type Gif} from '#/state/queries/tenor'
 import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn'
 import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
@@ -15,6 +14,7 @@ import {ModeratedFeedEmbed} from '#/components/Post/Embed/FeedEmbed'
 import {ModeratedListEmbed} from '#/components/Post/Embed/ListEmbed'
 import {Embed as StarterPackEmbed} from '#/components/StarterPack/StarterPackCard'
 import {Text} from '#/components/Typography'
+import {type Gif} from '#/features/gifPicker/types'
 
 export const ExternalEmbedGif = ({
   onRemove,

src/view/com/composer/GifAltText.tsx

@@ -11,7 +11,6 @@ import {
   parseEmbedPlayerFromUrl,
 } from '#/lib/strings/embed-player'
 import {useResolveGifQuery} from '#/state/queries/resolve-link'
-import {type Gif} from '#/state/queries/tenor'
 import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, useTheme} from '#/alf'
 import {Admonition} from '#/components/Admonition'
@@ -24,6 +23,7 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico
 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {GifEmbed} from '#/components/Post/Embed/ExternalEmbed/Gif'
 import {Text} from '#/components/Typography'
+import {type Gif} from '#/features/gifPicker/types'
 
 export function GifAltTextDialog({
   gif,

src/view/com/composer/drafts/state/api.ts

@@ -10,7 +10,6 @@ import {getImageDim} from '#/lib/media/manip'
 import {mimeToExt} from '#/lib/media/video/util'
 import {shortenLinks} from '#/lib/strings/rich-text-manip'
 import {type ComposerImage} from '#/state/gallery'
-import {type Gif} from '#/state/queries/tenor'
 import {threadgateAllowUISettingToAllowRecordValue} from '#/state/queries/threadgate/util'
 import {createPublicAgent} from '#/state/session/agent'
 import {
@@ -21,6 +20,7 @@ import {
 import {type VideoState} from '#/view/com/composer/state/video'
 import {type AnalyticsContextType} from '#/analytics'
 import {getDeviceId} from '#/analytics/identifiers'
+import {type Gif} from '#/features/gifPicker/types'
 import {logger} from './logger'
 import {type DraftPostDisplay, type DraftSummary} from './schema'
 import * as storage from './storage'

src/view/com/composer/photos/SelectGifBtn.tsx

@@ -1,14 +1,15 @@
-import {useCallback, useRef} from 'react'
+import {useCallback} from 'react'
 import {Keyboard} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
-import {type Gif} from '#/state/queries/tenor'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
-import {GifSelectDialog} from '#/components/dialogs/GifSelect'
+import * as Dialog from '#/components/Dialog'
 import {GifSquare_Stroke2_Corner0_Rounded as GifIcon} from '#/components/icons/Gif'
 import {useAnalytics} from '#/analytics'
+import {GifPickerDialog} from '#/features/gifPicker/GifPickerDialog'
+import {type Gif} from '#/features/gifPicker/types'
 
 type Props = {
   onClose?: () => void
@@ -19,22 +20,34 @@ type Props = {
 export function SelectGifBtn({onClose, onSelectGif, disabled}: Props) {
   const ax = useAnalytics()
   const {_} = useLingui()
-  const ref = useRef<{open: () => void}>(null)
+  const control = Dialog.useDialogControl()
   const t = useTheme()
 
-  const onPressSelectGif = useCallback(async () => {
+  const onPressSelectGif = useCallback(() => {
     ax.metric('composer:gif:open', {})
     Keyboard.dismiss()
-    ref.current?.open()
-  }, [ax])
+    control.open()
+  }, [ax, control])
 
   return (
     <>
       <Button
         testID="openGifBtn"
         onPress={onPressSelectGif}
-        label={_(msg`Select GIF`)}
-        accessibilityHint={_(msg`Opens GIF select dialog`)}
+        label={_(
+          msg({
+            message: 'Select GIF',
+            comment:
+              'Accessibility label for the button in the post composer that opens the GIF picker dialog.',
+          }),
+        )}
+        accessibilityHint={_(
+          msg({
+            message: 'Opens the GIF picker dialog',
+            comment:
+              'Accessibility hint announced after the GIF picker button label, describing what activating it will do.',
+          }),
+        )}
         style={a.p_sm}
         variant="ghost"
         shape="round"
@@ -43,8 +56,8 @@ export function SelectGifBtn({onClose, onSelectGif, disabled}: Props) {
         <GifIcon size="lg" style={disabled && t.atoms.text_contrast_low} />
       </Button>
 
-      <GifSelectDialog
-        controlRef={ref}
+      <GifPickerDialog
+        control={control}
         onClose={onClose}
         onSelectGif={onSelectGif}
       />

src/view/com/composer/state/composer.ts

@@ -18,7 +18,6 @@ import {
 } from '#/lib/strings/url-helpers'
 import {type ComposerImage, createInitialImages} from '#/state/gallery'
 import {createPostgateRecord} from '#/state/queries/postgate/util'
-import {type Gif} from '#/state/queries/tenor'
 import {threadgateRecordToAllowUISetting} from '#/state/queries/threadgate'
 import {type ThreadgateAllowUISetting} from '#/state/queries/threadgate'
 import {type ComposerOpts} from '#/state/shell/composer'
@@ -26,6 +25,7 @@ import {
   type LinkFacetMatch,
   suggestLinkCardUri,
 } from '#/view/com/composer/text-input/text-input-util'
+import {type Gif} from '#/features/gifPicker/types'
 import {
   createVideoState,
   type VideoAction,