yeet

modules/gif_picker/FavoriteGIFHooks.tsx

@@ -0,0 +1,44 @@
+// Metro module 9601 (f9602).
+import { useMemo } from "react";
+import { useFrecencySettings } from "../user_settings/FrecencyUserSettingsHooks";
+import Module12 from "../../_bundle/Module12";
+let c6343_4 = {};
+export function useFavoriteGIFs() {
+  let r11 = useFrecencySettings().favoriteGifs?.gifs;
+  if (r11 == null) {
+    r11 = c6343_4;
+  }
+  return r11;
+}
+export function useSortedFavoriteGIFs(a0) {
+  let r8 = useFrecencySettings().favoriteGifs?.gifs;
+  if (r8 == null) {
+    r8 = c6343_4;
+  }
+  let c17336_1 = r8;
+  return useMemo(() => Module12(c17336_1).map((item, index) => {
+    let src = a0 == null ? void 0 : a0(item.src, index);
+    if (src == null) {
+      src = item.src;
+    }
+    return {
+      ...item,
+      url: index,
+      src
+    };
+  }).sortBy("order").reverse().value(), [r8, a0]);
+}
+export function useShouldShowTooltipOnFavorite() {
+  let r11 = useFrecencySettings().favoriteGifs?.hideTooltip;
+  if (r11 == null) {
+    r11 = false;
+  }
+  return r11;
+}
+export function useIsFavoriteGIF(a0) {
+  let r11 = useFrecencySettings().favoriteGifs?.gifs;
+  if (r11 == null) {
+    r11 = c6343_4;
+  }
+  return r11[a0] != null;
+}

modules/gif_picker/GifPickerUtils.tsx

@@ -0,0 +1,12 @@
+// Metro module 9603 (f9604).
+import { intl, t } from "../../intl/index.native";
+export function getSearchPlaceholder() {
+  return intl.string(t.T1Frnm);
+}
+export function filterFavoriteGIFsByQuery(a0, a1) {
+  if (a1 === "") {
+    return a0;
+  }
+  let c17337_0 = a1.toLowerCase().replace(/[-_ ]/g, "");
+  return a0.filter((item) => item.url.toLowerCase().replace(/[-_]/g, "").includes(c17337_0));
+}

modules/gif_picker/native/GIFPicker.tsx

@@ -0,0 +1,181 @@
+// Metro module 9595 (f9596).
+import * as Module19 from "react";
+import { useEffect, useState, useCallback, useMemo, useRef } from "react";
+import { View } from "react-native";
+import GIFPickerViewStore from "../../../stores/views/GIFPickerViewStore";
+import { AnalyticEvents, ChatInputComponentViewedTypes, GIFPickerResultTypes, GIF_FETCH_LIMIT_IOS, TooltipNames } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { initializeSearch, resetSearch, search, fetchTrendingSearchTerms, fetchSuggestions, trackSelectGIF, fetchTrendingGIFs } from "../../../actions/GIFPickerActionCreators";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import useIsWindowLarge from "../../screen/native/useIsWindowLarge";
+import { GIF_PICKER_GUTTER_SPACING, useFavoriteGIFsMobile } from "./GIFPickerUtils";
+import { debounce } from "../../../_bundle/Module12";
+import { filterFavoriteGIFsByQuery } from "../GifPickerUtils";
+import { useStateFromStoresObject } from "../../../_bundle/Module589";
+import TooltipActionCreators from "../../tooltip/TooltipActionCreators";
+import GIFPickerSearchSuggestions from "./GIFPickerSearchSuggestions";
+import GIFPickerHeader from "./GIFPickerHeader";
+import GIFPickerNoResults from "./GIFPickerNoResults";
+import GIFPickerResultsList from "./GIFPickerResultsList";
+import GIFPickerCategoriesPage from "./GIFPickerCategoriesPage";
+const useStyles = createStyles({
+  container: {
+    flex: 1
+  }
+});
+const r41 = Module19.memo(function GIFPicker(props) {
+  let c17326_6, state, setState, ref, setState2, ref2, ref3, setState3, state2, setState4, state3, setState5, memo, favorites, memo2, resultItems, resultQuery, callback;
+  const { bottomSheetRef, channelId, guildId, hideFavorites, initialQuery, inActionSheet = true, contentHorizontalPadding, selectedGifSrc, keyboardDismissMode, onPressGIF } = props;
+  c17326_6 = void 0;
+  state = void 0;
+  setState = void 0;
+  ref = void 0;
+  setState2 = void 0;
+  ref2 = void 0;
+  ref3 = void 0;
+  setState3 = void 0;
+  state2 = void 0;
+  setState4 = void 0;
+  state3 = void 0;
+  setState5 = void 0;
+  memo = void 0;
+  favorites = void 0;
+  memo2 = void 0;
+  resultItems = void 0;
+  resultQuery = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  useEffect(() => {
+    initializeSearch();
+    resetSearch();
+    if (channelId != null) {
+      AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
+        type: ChatInputComponentViewedTypes.GIF,
+        channel_id: channelId,
+        guild_id: guildId
+      });
+    }
+  }, [channelId, guildId]);
+  const isWindowLarge = useIsWindowLarge();
+  c17326_6 = isWindowLarge;
+  [state, setState] = useState(0);
+  const callback2 = useCallback((a0) => {
+    setState(a0.nativeEvent.layout.width);
+  }, []);
+  const memo3 = useMemo(() => {
+    const columns = c17326_6 ? 3 : 2;
+    const r6 = Math;
+    let r12 = contentHorizontalPadding;
+    if (contentHorizontalPadding == null) {
+      r12 = 0;
+    }
+    return {
+      columns,
+      columnWidth: r6.max(0, (state - 2 * r12 + GIF_PICKER_GUTTER_SPACING) / columns - GIF_PICKER_GUTTER_SPACING)
+    };
+  }, [isWindowLarge, state, contentHorizontalPadding]);
+  const { columns, columnWidth } = memo3;
+  ref = useRef(null);
+  let state4;
+  [state4, setState2] = useState(false);
+  ref2 = useRef("");
+  ref3 = useRef(false);
+  let loading;
+  [loading, setState3] = useState(false);
+  [state2, setState4] = useState(GIFPickerResultTypes.SEARCH);
+  [state3, setState5] = useState("");
+  const callback3 = useCallback(() => {
+    setState2(false);
+    setState4(GIFPickerResultTypes.SEARCH);
+    setState5("");
+    resetSearch();
+    const current = ref.current;
+    if (current != null) {
+      current.blur();
+    }
+  }, [ref]);
+  memo = useMemo(() => debounce(search, 200), []);
+  const favoriteGIFsMobile = useFavoriteGIFsMobile();
+  favorites = favoriteGIFsMobile.favorites;
+  const favoritesCategory = favoriteGIFsMobile.favoritesCategory;
+  memo2 = useMemo(() => filterFavoriteGIFsByQuery(favorites, state3), [favorites, state3]);
+  const stateFromStoresObject = useStateFromStoresObject([GIFPickerViewStore], () => ({
+    resultItems: state2 !== GIFPickerResultTypes.FAVORITES ? GIFPickerViewStore.getResultItems() : memo2,
+    resultQuery: GIFPickerViewStore.getResultQuery()
+  }));
+  resultItems = stateFromStoresObject.resultItems;
+  resultQuery = stateFromStoresObject.resultQuery;
+  callback = useCallback(function(a0, r6 = true) {
+    if (ref2.current !== a0) {
+      ref2.current = a0;
+      setState4(GIFPickerResultTypes.SEARCH);
+      const r3 = a0.trim().length > 0;
+      setState3(!!r3 && resultQuery !== a0);
+      setState2(r3);
+      (r6 ? memo : search)(a0, a0 !== "" ? GIFPickerResultTypes.SEARCH : null, !r6, GIF_FETCH_LIMIT_IOS);
+      if (!r6) {
+        const current = ref.current;
+        if (current != null) {
+          current.setText(a0);
+        }
+      }
+    }
+  }, [memo, ref, resultQuery]);
+  useEffect(() => {
+    if (!ref3.current && initialQuery != null && initialQuery.trim().length > 0) {
+      ref3.current = true;
+      callback(initialQuery, false);
+    }
+  }, [callback, initialQuery]);
+  useEffect(() => {
+    TooltipActionCreators.acknowledgeTooltip(TooltipNames.GIF_PICKER_TOOLTIP);
+    fetchTrendingSearchTerms();
+  }, []);
+  useEffect(() => {
+    if (resultQuery !== "") {
+      fetchSuggestions(resultQuery);
+    }
+    const current = ref.current;
+    setState3(resultQuery !== (current == null ? void 0 : current.getText()));
+  }, [resultQuery, ref]);
+  const memo4 = useMemo(() => <GIFPickerSearchSuggestions onClickSuggestion={(event) => callback(event, false)} />, [callback]);
+  const callback4 = useCallback((a0, a1) => {
+    trackSelectGIF({
+      type: GIFPickerResultTypes.SEARCH,
+      index: a1,
+      offset: 0,
+      limit: GIF_FETCH_LIMIT_IOS,
+      results: resultItems.length,
+      totalResults: resultItems.length,
+      query: resultQuery,
+      gifId: a0.id
+    });
+    onPressGIF(a0);
+  }, [onPressGIF, resultItems.length, resultQuery]);
+  const callback5 = useCallback((a0, a1) => {
+    if (a0 === GIFPickerResultTypes.TRENDING_GIFS) {
+      setState2(false);
+      setState4(a0);
+      fetchTrendingGIFs(GIF_FETCH_LIMIT_IOS);
+    } else if (a0 === GIFPickerResultTypes.FAVORITES) {
+      setState2(false);
+      setState4(a0);
+    } else {
+      callback(a1, false);
+    }
+    const current = bottomSheetRef.current;
+    if (current != null) {
+      current.expandActionSheet();
+    }
+  }, [bottomSheetRef, callback]);
+  if (loading) {
+    loading = state2 !== GIFPickerResultTypes.FAVORITES;
+  }
+  return <View onLayout={callback2} style={[styles.container, contentHorizontalPadding != null ? {
+    paddingHorizontal: contentHorizontalPadding
+  } : null]}>
+    <GIFPickerHeader categoryType={state2} columnWidth={columnWidth} onQueryClear={callback3} onQueryChange={callback} onFavoritesQueryChange={setState5} searchInputRef={ref} />
+    {!(resultItems.length > 0) && (!state4 && !(state3.length > 0)) ? <GIFPickerCategoriesPage columns={columns} onSelectCategory={callback5} favoritesCategory={hideFavorites !== true ? favoritesCategory : void 0} inActionSheet={inActionSheet} /> : resultItems.length === 0 && !loading ? <GIFPickerNoResults categoryType={state2} inActionSheet={inActionSheet} /> : <GIFPickerResultsList columns={columns} columnWidth={columnWidth} loading={loading} inActionSheet={inActionSheet} resultItems={resultItems} onPressGIF={callback4} selectedGifSrc={selectedGifSrc} keyboardDismissMode={keyboardDismissMode} ListFooterComponent={memo4} />}
+  </View>;
+});
+export default r41;

modules/gif_picker/native/GIFPickerCategoriesPage.tsx

@@ -0,0 +1,98 @@
+// Metro module 9614 (f9615).
+import * as Module19 from "react";
+import { useMemo, useEffect, useCallback } from "react";
+import { View } from "react-native";
+import GIFPickerViewStore from "../../../stores/views/GIFPickerViewStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import * as _GIFPickerUtils from "./GIFPickerUtils";
+import { GIF_PICKER_GUTTER_SPACING, DEFAULT_CATEGORY_ROWS } from "./GIFPickerUtils";
+import Module712 from "../../../_bundle/Module712";
+import useExpressionPickerInsets from "../../expression_picker/native/useExpressionPickerInsets";
+import { useStateFromStoresObject } from "../../../_bundle/Module589";
+import { fetchTrending } from "../../../actions/GIFPickerActionCreators";
+import GIFPickerCategoryView from "./GIFPickerCategoryView";
+import { useIsPortalKeyboardInModal } from "../../keyboard/native/PortalKeyboardModalContext";
+import { FastestListPropsPlaceholderType } from "../../fastest_list/props/FastestListPropsPlaceholder";
+import FastestList_android from "../../fastest_list/FastestList.android";
+import { getCustomKeyboardHeight } from "../../keyboard/native/useCustomKeyboardHeight";
+import { intl, t } from "../../../intl/index.native";
+const useStyles = createStyles((a0) => ({
+  item: {
+    height: a0,
+    flexDirection: "row",
+    gap: GIF_PICKER_GUTTER_SPACING,
+    paddingBottom: GIF_PICKER_GUTTER_SPACING
+  },
+  placeholder: {
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    height: a0 - GIF_PICKER_GUTTER_SPACING,
+    borderRadius: Module712.radii.xs,
+    flex: 1
+  }
+}));
+const r30 = Module19.memo(function GIFPickerCategoriesPage(props) {
+  let data;
+  const { columns, favoritesCategory, inActionSheet, onSelectCategory } = props;
+  data = void 0;
+  const GIF_PICKER_ITEM_ESIMTATED_HEIGHT = columns > 2 ? _GIFPickerUtils.GIF_PICKER_ITEM_ESIMTATED_HEIGHT : _GIFPickerUtils.GIF_PICKER_ITEM_ESIMTATED_HEIGHT / 2;
+  const styles = useStyles(GIF_PICKER_ITEM_ESIMTATED_HEIGHT);
+  const safeAreaBottomKeyboardAware = useExpressionPickerInsets({
+    hasCategories: false
+  }).safeAreaBottomKeyboardAware;
+  const trendingCategories = useStateFromStoresObject([GIFPickerViewStore], () => ({
+    trendingCategories: GIFPickerViewStore.getTrendingCategories()
+  })).trendingCategories;
+  const memo = useMemo(() => {
+    const r9 = [...trendingCategories];
+    if (favoritesCategory != null) {
+      r9.unshift(favoritesCategory);
+    }
+    const data2 = [];
+    const r3 = 0 < Math.max(r9.length, DEFAULT_CATEGORY_ROWS);
+    let r27 = 0;
+    if (r3) {
+      do {
+        data2.push(r9.slice(r27, r27 + columns));
+        r27 = r27 + columns;
+      } while (r27 < Math.max(r9.length, DEFAULT_CATEGORY_ROWS));
+    }
+    return {
+      data: data2,
+      sections: [data2.length]
+    };
+  }, [columns, favoritesCategory, trendingCategories]);
+  data = memo.data;
+  const sections = memo.sections;
+  useEffect(() => {
+    if (trendingCategories.length === 0) {
+      fetchTrending();
+    }
+  }, [trendingCategories]);
+  const callback = useCallback((a0, a1) => {
+    const r8 = data[a1];
+    const r9 = [];
+    let r0 = 0;
+    while (r0 < columns) {
+      const item = r8[r0];
+      const key = r0;
+      r9.push(item != null ? <GIFPickerCategoryView key={key} item={item} onSelectCategory={onSelectCategory} /> : <View key={key} style={[styles.item, styles.placeholder]} />);
+      r0 = key + 1;
+    }
+    return <View style={styles.item} collapsable={false}>{r9}</View>;
+  }, [columns, data, onSelectCategory, styles]);
+  const isPortalKeyboardInModal = useIsPortalKeyboardInModal();
+  const memo2 = useMemo(() => ({
+    sectionItem: {
+      type: FastestListPropsPlaceholderType.SHAPE,
+      shape: "rect",
+      shapeCount: columns,
+      spaceGap: GIF_PICKER_GUTTER_SPACING,
+      borderRadius: styles.placeholder.borderRadius,
+      colorHex: styles.placeholder.backgroundColor,
+      height: GIF_PICKER_ITEM_ESIMTATED_HEIGHT - GIF_PICKER_GUTTER_SPACING,
+      verticalAlignment: "top"
+    }
+  }), [GIF_PICKER_ITEM_ESIMTATED_HEIGHT, columns, styles]);
+  return <FastestList_android estimatedListSize={getCustomKeyboardHeight()} inActionSheet={inActionSheet} preventNativeModalDismiss={isPortalKeyboardInModal} insetEnd={safeAreaBottomKeyboardAware} itemSize={GIF_PICKER_ITEM_ESIMTATED_HEIGHT} sections={sections} placeholderConfig={memo2} renderItem={callback} accessibilityLabel={intl.string(t.ffgJrs)} />;
+});
+export default r30;

modules/gif_picker/native/GIFPickerCategoryView.tsx

@@ -0,0 +1,59 @@
+// Metro module 9615 (f9616).
+import { useCallback } from "react";
+import { TouchableOpacity, View, StyleSheet } from "react-native";
+import { GIFPickerResultTypes } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { intl, t } from "../../../intl/index.native";
+import useAccessibilityPress from "../../a11y/native/useAccessibilityPress";
+import FastImage from "../../../components_native/common/FastImage";
+import { AnalyticsIcon } from "../../../design/components/Icon/native/redesign/generated/AnalyticsIcon";
+import { StarIcon } from "../../../design/components/Icon/native/redesign/generated/StarIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    borderRadius: Module712.radii.xs,
+    flex: 1
+  },
+  gifImage: {
+    borderRadius: Module712.radii.xs,
+    flex: 1
+  },
+  gifOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: Module712.unsafe_rawColors.BLACK,
+    borderRadius: Module712.radii.xs,
+    opacity: 0.6
+  },
+  categoryName: {
+    ...StyleSheet.absoluteFillObject,
+    margin: Module712.space.PX_8,
+    justifyContent: "center",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  categoryNameIcon: {
+    marginRight: Module712.space.PX_4
+  }
+});
+export default function GIFPickerCategoryView(props) {
+  const { onSelectCategory, item } = props;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    onSelectCategory(item.type, item.name);
+  }, [onSelectCategory, item]);
+  const accessibilityLabel = intl.formatToPlainString(t["j+63pw"], {
+    categoryName: item.name
+  });
+  return <TouchableOpacity style={styles.container} onPress={callback} accessible accessibilityRole="button" accessibilityLabel={accessibilityLabel} {...useAccessibilityPress(callback, accessibilityLabel)}>
+    <FastImage style={styles.gifImage} source={{
+      uri: item.src
+    }} />
+    <View style={styles.gifOverlay} />
+    <View style={styles.categoryName} accessible={false}>
+      {item.type === GIFPickerResultTypes.TRENDING_GIFS ? <AnalyticsIcon size="sm" style={styles.categoryNameIcon} color={Module712.colors.WHITE} /> : item.type === GIFPickerResultTypes.FAVORITES ? <StarIcon size="sm" style={styles.categoryNameIcon} color={Module712.colors.WHITE} /> : null}
+      <Text variant="text-sm/semibold" color="text-overlay-light" maxFontSizeMultiplier={2} accessible={false}>{item.name}</Text>
+    </View>
+  </TouchableOpacity>;
+};

modules/gif_picker/native/GIFPickerHeader.tsx

@@ -0,0 +1,120 @@
+// Metro module 9606 (f9607).
+import { useRef, useState, useEffect, useCallback, memo } from "react";
+import { View } from "react-native";
+import { GIFPickerResultTypes } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { GIF_PICKER_GUTTER_SPACING } from "./GIFPickerUtils";
+import { InputHeights } from "../../../design/components/Input/native/InputTypes.native";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../design/animation/reanimated/timing/timing";
+import { timingFast } from "../../../design/animation/reanimated/timing/timingPresets";
+import { IconButton } from "../../../design/components/Button/native/IconButton.native";
+import Module8295 from "../../../_bundle/Module8295";
+import { intl, t } from "../../../intl/index.native";
+import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
+import { getSearchPlaceholder } from "../GifPickerUtils";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { ChevronLargeLeftIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronLargeLeftIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+let useStyles, __initData, __initData2;
+const FavoritesSearch = function FavoritesSearch(props) {
+  const { columnWidth, onQueryChange } = props;
+  const styles = useStyles();
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  const sharedValue = useSharedValue(0);
+  useEffect(() => {
+    sharedValue.set(withTiming(state ? 1 : 0, timingFast));
+    if (state) {
+      const current = ref.current;
+      if (current != null) {
+        current.focus();
+      }
+    }
+  }, [state, sharedValue]);
+  const S = () => ({
+    opacity: 1 - sharedValue.get()
+  });
+  S.__closure = {
+    progress: sharedValue
+  };
+  S.__workletHash = 11452628946352;
+  S.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(S);
+  const v = () => ({
+    width: sharedValue.get() * columnWidth,
+    opacity: sharedValue.get()
+  });
+  v.__closure = {
+    progress: sharedValue,
+    columnWidth
+  };
+  v.__workletHash = 12592656871997;
+  v.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(v);
+  const callback = useCallback(() => setState(true), []);
+  const callback2 = useCallback(() => {
+    const current = ref.current;
+    if ((current == null ? void 0 : current.getText()) === "") {
+      setState(false);
+    }
+  }, []);
+  return <>
+    {[<ReanimatedRexport.View style={animatedStyle} pointerEvents={state ? "none" : "auto"} accessibilityElementsHidden={state} importantForAccessibility={state ? "no-hide-descendants" : "auto"}>
+      <IconButton variant="icon-only" size="md" icon={Module8295} accessibilityLabel={intl.string(t["+Kakw+"])} onPress={callback} />
+    </ReanimatedRexport.View>, <ReanimatedRexport.View style={[styles.favoritesSearch, animatedStyle2]} pointerEvents={state ? "auto" : "none"} accessibilityElementsHidden={!state} importantForAccessibility={state ? "auto" : "no-hide-descendants"}>
+      <SearchField ref={ref} size="md" onChange={onQueryChange} onClear={() => onQueryChange == null ? void 0 : onQueryChange("")} onBlur={callback2} placeholder={intl.string(t["+Kakw+"])} />
+    </ReanimatedRexport.View>]}
+  </>;
+};
+useStyles = createStyles({
+  container: {
+    paddingVertical: Module712.space.PX_8
+  },
+  headerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: GIF_PICKER_GUTTER_SPACING
+  },
+  header: {
+    borderWidth: 1,
+    borderColor: "transparent",
+    paddingHorizontal: Module712.space.PX_8,
+    height: InputHeights.MD,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  favoritesSearch: {
+    position: "absolute",
+    top: 0,
+    end: 0,
+    overflow: "hidden"
+  }
+});
+__initData = {
+  code: "function GIFPickerHeaderTsx1(){const{progress}=this.__closure;return{opacity:1-progress.get()};}"
+};
+__initData2 = {
+  code: "function GIFPickerHeaderTsx2(){const{progress,columnWidth}=this.__closure;return{width:progress.get()*columnWidth,opacity:progress.get()};}"
+};
+const r61 = memo(function GIFPickerHeader(props) {
+  const { categoryType, columnWidth: columnWidth2, onQueryClear, onQueryChange: onQueryChange2, onFavoritesQueryChange, searchInputRef } = props;
+  const styles = useStyles();
+  const searchPlaceholder = getSearchPlaceholder();
+  return <View style={styles.container}>
+    {categoryType === GIFPickerResultTypes.SEARCH ? <SearchField size="md" onChange={onQueryChange2} placeholder={searchPlaceholder} onClear={onQueryClear} ref={searchInputRef} isRound /> : <View style={styles.headerContainer}>
+      <PressableOpacity style={styles.header} accessibilityRole="button" onPress={onQueryClear} accessibilityLabel={intl.formatToPlainString(t.UTypEu, {
+        destination: intl.string(t.ffgJrs)
+      })}>
+        <ChevronLargeLeftIcon color={Module712.colors.INTERACTIVE_TEXT_ACTIVE} size="sm" />
+        <Text variant="text-sm/semibold" color="text-default" maxFontSizeMultiplier={2}>
+          {categoryType === GIFPickerResultTypes.TRENDING_GIFS ? intl.string(t.TsWCdW) : categoryType === GIFPickerResultTypes.FAVORITES ? intl.string(t.k8fFjp) : intl.string(t["5h0QOP"])}
+        </Text>
+      </PressableOpacity>
+      {categoryType === GIFPickerResultTypes.FAVORITES && <FavoritesSearch columnWidth={columnWidth2} onQueryChange={onFavoritesQueryChange} />}
+    </View>}
+  </View>;
+});
+export default r61;

modules/gif_picker/native/GIFPickerItemActionSheet.tsx

@@ -0,0 +1,88 @@
+// Metro module 9612 (f9613).
+import { useMemo, useCallback } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { useIsFavoriteGIF } from "../FavoriteGIFHooks";
+import { gifUrlKey, removeFavoriteGIF, addFavoriteGIF } from "../../../actions/GIFPickerActionCreators";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import { GifIcon } from "../../../design/components/Icon/native/redesign/generated/GifIcon";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import FastImage from "../../../components_native/common/FastImage";
+const useStyles = createStyles({
+  contentWrapper: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: isAndroid() ? Module712.space.PX_16 : 0
+  },
+  gifContainer: {
+    flexDirection: "column",
+    alignItems: "center",
+    marginTop: Module712.space.PX_8
+  },
+  gifImage: {
+    borderRadius: Module712.radii.xs,
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  favoriteButtonContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "stretch",
+    width: "100%",
+    marginTop: Module712.space.PX_16
+  }
+});
+export default function GIFPickerItemActionSheet(props) {
+  let callback, callback2;
+  const item = props.item;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const isFavoriteGIF = useIsFavoriteGIF(gifUrlKey(item.url));
+  const windowDimensions_native = useWindowDimensions_native();
+  const { width, height } = windowDimensions_native;
+  const memo = useMemo(() => {
+    const r24 = Math.min((width - 2 * Module712.space.PX_16) / item.width, 0.5 * height / item.height);
+    return {
+      width: item.width * r24,
+      height: item.height * r24
+    };
+  }, [item.width, item.height, width, height]);
+  callback = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+  }, []);
+  callback2 = useCallback(() => {
+    callback();
+    if (isFavoriteGIF) {
+      removeFavoriteGIF(item.url);
+      ToastActionCreators.open({
+        key: "REMOVED_FROM_FAVORITES",
+        content: intl.string(t.in1rga),
+        IconComponent: GifIcon
+      });
+    } else {
+      addFavoriteGIF(item);
+      ToastActionCreators.open({
+        key: "ADDED_TO_FAVORITES",
+        content: intl.string(t.okQonm),
+        IconComponent: GifIcon
+      });
+    }
+  }, [callback, isFavoriteGIF, item]);
+  return <BottomSheet startExpanded>
+    <View style={styles.contentWrapper}>
+      <View style={styles.gifContainer}>
+        <FastImage style={[styles.gifImage, memo]} source={{
+          uri: item.src
+        }} />
+        <View style={styles.favoriteButtonContainer}>
+          {useCallback(() => <Button variant={isFavoriteGIF ? "destructive" : "primary"} onPress={callback2} text={isFavoriteGIF ? intl.string(t["5/NS74"]) : intl.string(t.nIH0v8)} grow />, [callback2, isFavoriteGIF])()}
+        </View>
+      </View>
+    </View>
+  </BottomSheet>;
+};

modules/gif_picker/native/GIFPickerItemView.tsx

@@ -0,0 +1,67 @@
+// Metro module 9611 (f9612).
+import { memo, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { GIF_PICKER_GUTTER_SPACING } from "./GIFPickerUtils";
+import Module712 from "../../../_bundle/Module712";
+import { dismissGlobalKeyboard } from "../../../utils/native/KeyboardManagerUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import FastImage from "../../../components_native/common/FastImage";
+const useStyles = createStyles((a0) => ({
+  container: {
+    paddingBottom: GIF_PICKER_GUTTER_SPACING,
+    paddingHorizontal: GIF_PICKER_GUTTER_SPACING / 2,
+    borderRadius: Module712.radii.xs,
+    width: "100%",
+    height: a0,
+    flex: 1
+  },
+  gifImage: {
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    borderRadius: Module712.radii.xs,
+    flex: 1
+  },
+  gifImageSelected: {
+    borderWidth: 2,
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  }
+}));
+const r28 = memo(function(a0) {
+  const styles = useStyles(a0.height);
+  return <View style={styles.container}>
+    <View style={styles.gifImage} />
+  </View>;
+});
+export default function GIFPickerItemView(props) {
+  const { onPressGIF, item, index, height, selected } = props;
+  const styles = useStyles(height);
+  const callback = useCallback(() => {
+    onPressGIF(item, index);
+    dismissGlobalKeyboard();
+  }, [item, index, onPressGIF]);
+  const callback2 = useCallback(() => {
+    ActionSheetActionCreators.openLazy(import("./GIFPickerItemActionSheet"), "GIFPickerItemActionSheet", {
+      item
+    }, "stack");
+    dismissGlobalKeyboard();
+  }, [item]);
+  return <PressableOpacity style={styles.container} accessibilityRole="button" accessibilityLabel={useMemo(() => {
+    const r7 = item.src.split("/").pop();
+    let r13 = r7 == null ? void 0 : r7.split(".")[0];
+    if (r13 == null) {
+      r13 = intl.formatToPlainString(t["5iIGZI"], {
+        index: index + 1
+      });
+    }
+    return r13;
+  }, [index, item.src])} accessibilityState={selected != null ? {
+    selected
+  } : void 0} onPress={callback} onLongPress={callback2}>
+    <FastImage style={selected === true ? [styles.gifImage, styles.gifImageSelected] : styles.gifImage} source={{
+      uri: item.src
+    }} />
+  </PressableOpacity>;
+};
+export { r28 as GIFPickerItemPlaceholder };

modules/gif_picker/native/GIFPickerNoResults.tsx

@@ -0,0 +1,46 @@
+// Metro module 9609 (f9610).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { ScrollView } from "react-native";
+import { GIFPickerResultTypes } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useExpressionPickerInsets from "../../expression_picker/native/useExpressionPickerInsets";
+import { useSearchEmptySource } from "../../../design/components/Illustration/native/redesign/generated/SearchEmpty";
+import { intl, t } from "../../../intl/index.native";
+import { useModalDismissGuardRefreshControl } from "../../keyboard/native/useModalDismissGuardRefreshControl";
+import { BottomSheetScrollView } from "../../../_bundle/Module5245";
+import { RefreshEmptyState } from "../../../design/void/native";
+const useStyles = createStyles({
+  emptyStateContainer: {
+    padding: 0,
+    flex: 1
+  },
+  emptyStateBody: {
+    color: Module712.colors.TEXT_SUBTLE
+  },
+  emptyStateImage: {
+    marginBottom: Module712.space.PX_8,
+    marginTop: 0
+  }
+});
+const r42 = Module19.memo(function GIFPickerNoResults(props) {
+  const { categoryType, inActionSheet } = props;
+  const styles = useStyles();
+  const safeAreaBottomKeyboardAware = useExpressionPickerInsets({
+    hasCategories: false
+  }).safeAreaBottomKeyboardAware;
+  const memo = useMemo(() => ({
+    paddingBottom: safeAreaBottomKeyboardAware,
+    flex: 1
+  }), [safeAreaBottomKeyboardAware]);
+  const searchEmptySource = useSearchEmptySource();
+  const body = categoryType === GIFPickerResultTypes.FAVORITES ? intl.string(t.ZH4o6l) : intl.string(t["5dX4UM"]);
+  const modalDismissGuardRefreshControl = useModalDismissGuardRefreshControl();
+  return inActionSheet ? <BottomSheetScrollView contentContainerStyle={memo} keyboardShouldPersistTaps="always" refreshControl={inActionSheet ? modalDismissGuardRefreshControl : void 0}>
+    <RefreshEmptyState source={searchEmptySource} body={body} bodyStyle={styles.emptyStateBody} containerStyle={styles.emptyStateContainer} imageStyle={styles.emptyStateImage} />
+  </BottomSheetScrollView> : <ScrollView contentContainerStyle={memo} keyboardShouldPersistTaps="always" refreshControl={inActionSheet ? modalDismissGuardRefreshControl : void 0}>
+    <RefreshEmptyState source={searchEmptySource} body={body} bodyStyle={styles.emptyStateBody} containerStyle={styles.emptyStateContainer} imageStyle={styles.emptyStateImage} />
+  </ScrollView>;
+});
+export default r42;

modules/gif_picker/native/GIFPickerResultsList.tsx

@@ -0,0 +1,87 @@
+// Metro module 9610 (f9611).
+import { useCallback, useState, useMemo } from "react";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { GIF_PICKER_GUTTER_SPACING, GIF_PICKER_ITEM_ESIMTATED_HEIGHT } from "./GIFPickerUtils";
+import useExpressionPickerInsets from "../../expression_picker/native/useExpressionPickerInsets";
+import GIFPickerItemView, { GIFPickerItemPlaceholder } from "./GIFPickerItemView";
+import { BottomSheetMasonryFlashList, MasonryFlashList } from "../../../_bundle/noop_6676";
+import { useIsPortalKeyboardInModal } from "../../keyboard/native/PortalKeyboardModalContext";
+let c6351_8;
+const useStyles = createStyles({
+  list: {
+    marginHorizontal: -GIF_PICKER_GUTTER_SPACING / 2
+  }
+});
+const r32 = {
+  length: 20
+};
+const data = Array.from(r32).map(() => {});
+c6351_8 = Array.from(r32).map(() => ({
+  width: 100,
+  height: Math.floor(91 * Math.random()) + 90
+}));
+export default function GIFPickerResultsList(a0) {
+  let state;
+  const { columns, columnWidth } = a0;
+  let resultItems = a0.resultItems;
+  const onPressGIF = a0.onPressGIF;
+  let inActionSheet = a0.inActionSheet;
+  const { ListFooterComponent, loading, selectedGifSrc, keyboardDismissMode } = a0;
+  state = void 0;
+  const styles = useStyles();
+  const safeAreaBottomKeyboardAware = useExpressionPickerInsets({
+    hasCategories: false
+  }).safeAreaBottomKeyboardAware;
+  if (loading) {
+    resultItems = data;
+  }
+  let setState;
+  const callback = useCallback((a0, a1) => ({
+    height: columnWidth / (a0 / a1)
+  }), [columnWidth]);
+  const callback2 = useCallback((a0, a1) => {
+    let r2 = a0?.src;
+    if (r2 == null) {
+      r2 = a1.toString();
+    }
+    return r2;
+  }, []);
+  setState = void 0;
+  let state2;
+  [state2, setState] = useState(() => new Set());
+  const callback3 = useCallback(({ changed }) => {
+    setState((prevState) => {
+      const set = new Set(prevState);
+      let c31507_0 = set;
+      changed.forEach(({ index, isViewable }) => {
+        if (index !== null && isViewable) {
+          c31507_0.add(index);
+        }
+      });
+      return set;
+    });
+  }, []);
+  state = state2;
+  const memo = useMemo(() => ({
+    viewedItemIndexes: state,
+    selectedGifSrc
+  }), [state, selectedGifSrc]);
+  const callback4 = useCallback(({ item, index, extraData }) => {
+    if (item == null) {
+      const r37 = c6351_8[index];
+      return <GIFPickerItemPlaceholder height={callback(r37.width, r37.height).height} />;
+    }
+    const height = callback(item.width, item.height).height;
+    return extraData.viewedItemIndexes.has(index) ? <GIFPickerItemView height={height} index={index} item={item} onPressGIF={onPressGIF} selected={extraData.selectedGifSrc != null ? item.src === extraData.selectedGifSrc : void 0} /> : <GIFPickerItemPlaceholder height={height} />;
+  }, [onPressGIF, callback]);
+  const Component = inActionSheet ? BottomSheetMasonryFlashList : MasonryFlashList;
+  const isPortalKeyboardInModal = useIsPortalKeyboardInModal();
+  if (inActionSheet) {
+    inActionSheet = isPortalKeyboardInModal;
+  }
+  return <Component contentContainerStyle={{
+    paddingBottom: safeAreaBottomKeyboardAware
+  }} data={resultItems} drawDistance={GIF_PICKER_ITEM_ESIMTATED_HEIGHT} extraData={memo} keyExtractor={callback2} keyboardDismissMode={keyboardDismissMode} keyboardShouldPersistTaps="always" maintainVisibleContentPosition={{
+    disabled: true
+  }} numColumns={columns} ListFooterComponent={ListFooterComponent} optimizeItemArrangement onViewableItemsChanged={callback3} preventNativeModalDismiss={inActionSheet} renderItem={callback4} style={styles.list} />;
+};

modules/gif_picker/native/GIFPickerSearchSuggestions.tsx

@@ -0,0 +1,42 @@
+// Metro module 9605 (f9606).
+import { memo } from "react";
+import { View } from "react-native";
+import GIFPickerViewStore from "../../../stores/views/GIFPickerViewStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStoresArray } from "../../../_bundle/Module589";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+const useStyles = createStyles({
+  suggestionsContainer: {
+    justifyContent: "center",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: Module712.space.PX_8
+  },
+  footerSuggestionsContainer: {
+    justifyContent: "flex-start",
+    paddingVertical: Module712.space.PX_16
+  },
+  footerSuggestionsTitle: {
+    marginBottom: Module712.space.PX_16,
+    textAlign: "center"
+  }
+});
+const r46 = memo(function GIFPickerSearchSuggestions(props) {
+  const onClickSuggestion = props.onClickSuggestion;
+  const styles = useStyles();
+  const stateFromStoresArray = useStateFromStoresArray([GIFPickerViewStore], () => GIFPickerViewStore.getSuggestions());
+  return stateFromStoresArray.length !== 0 ? <View style={styles.footerSuggestionsContainer}>
+    <Text style={styles.footerSuggestionsTitle} variant="text-md/medium" color="text-default">
+      {intl.string(t["3JGJo2"])}
+    </Text>
+    <View style={styles.suggestionsContainer}>
+      {stateFromStoresArray.map((item) => {
+        return <Button key={item} size="sm" variant="secondary" hitSlop={Module712.space.PX_8} text={item} onPress={() => onClickSuggestion(item)} />;
+      })}
+    </View>
+  </View> : null;
+});
+export default r46;

modules/gif_picker/native/GIFPickerUtils.tsx

@@ -0,0 +1,67 @@
+// Metro module 9600 (f9601).
+import { useMemo } from "react";
+import { GIFPickerResultTypes } from "../../../Constants";
+import URLUtils from "../../../utils/URLUtils";
+import { isExternalProxiedAttachmentUrl, isAttachmentUrl } from "../../messages/SignedAttachmentLinkUtils";
+import { useSortedFavoriteGIFs } from "../FavoriteGIFHooks";
+import { intl, t } from "../../../intl/index.native";
+let c6342_5, c6342_6, c6342_7;
+const transformFavoriteGifUrl = function transformFavoriteGifUrl(a0, a1) {
+  let r8;
+  L6: {
+    r8 = a0;
+    const r15 = URLUtils.toURLSafe(a0);
+    if (r15 != null) {
+      if (!isExternalProxiedAttachmentUrl(r15) && !isAttachmentUrl(r15)) {
+        break L6;
+      }
+      const r28 = r15.pathname.toLowerCase().endsWith(".webp");
+      let r34 = r15.pathname.toLowerCase().endsWith(".avif");
+      const r39 = r15.pathname.toLowerCase().endsWith(".gif");
+      if (!r28 && !r34 && !r39) {
+        break L6;
+      }
+      if (!r34) {
+        r34 = r39;
+      }
+      if (r34) {
+        r15.searchParams.set("format", "webp");
+      }
+      r15.searchParams.set("animated", "true");
+      return r15.toString();
+    }
+  }
+  if (c6342_5.test(a1)) {
+    const r53 = c6342_7.exec(a1);
+    const r3 = r53 == null;
+    let r54 = void 0;
+    if (!r3) {
+      const r55 = r53[0];
+      r54 = r55 == null ? void 0 : r55.slice(1);
+    }
+    return `https://media.giphy.com/media/${r54}/giphy.gif`;
+  }
+  if (c6342_6.test(a1)) {
+    r8 = `${a1}.gif`;
+  }
+  return r8;
+};
+c6342_5 = /(https?:\/\/)(?!media(?:\d+)?\.)(?:[^.]+\.)*giphy\.com/;
+c6342_6 = /(tenor\.com)/;
+c6342_7 = /-(?:.(?!-))+$/;
+export const GIF_HEADER_HEIGHT = 56;
+export function useFavoriteGIFsMobile() {
+  const sortedFavoriteGIFs = useSortedFavoriteGIFs(transformFavoriteGifUrl);
+  return {
+    favorites: sortedFavoriteGIFs,
+    favoritesCategory: useMemo(() => sortedFavoriteGIFs.length > 0 ? {
+      type: GIFPickerResultTypes.FAVORITES,
+      name: intl.string(t.k8fFjp),
+      src: sortedFavoriteGIFs[0].src,
+      format: sortedFavoriteGIFs[0].format
+    } : void 0, [sortedFavoriteGIFs])
+  };
+}
+export const GIF_PICKER_ITEM_ESIMTATED_HEIGHT = 180;
+export const GIF_PICKER_GUTTER_SPACING = 8;
+export const DEFAULT_CATEGORY_ROWS = 20;