yeet

modules/reactions/native/BurstReactionToggle.tsx

@@ -0,0 +1,89 @@
+// Metro module 9350 (f9351).
+import { useRef, useEffect } from "react";
+import { Pressable } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import ReanimatedRexport, { Easing, useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useToken } from "../../../design/tokens/native/useToken";
+import Module712 from "../../../_bundle/Module712";
+import { withTiming } from "../../../design/animation/reanimated/timing/timing";
+import { withSpring } from "../../../design/animation/reanimated/spring/spring";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import useBurstToggleCoachmark from "./useBurstToggleCoachmark";
+import { intl, t } from "../../../intl/index.native";
+import { SuperReactionIcon } from "../../../design/components/Icon/native/redesign/generated/SuperReactionIcon";
+let c6160_8 = {
+  duration: 100,
+  easing: Easing.out(Easing.quad)
+};
+let c6160_9 = {
+  stiffness: 750,
+  mass: 2.5,
+  damping: 70
+};
+const __initData = {
+  code: "function BurstReactionToggleTsx1(){const{reducedMotion,targetBackgroundColor,backgroundColor,rotation}=this.__closure;const _backgroundColor=reducedMotion?targetBackgroundColor:backgroundColor.get();const _rotation=reducedMotion?0:rotation.get();return{backgroundColor:_backgroundColor,transform:[{rotate:_rotation+\"deg\"}]};}"
+};
+const useStyles = createStyles({
+  container: {
+    borderRadius: Module712.modules.button.BORDER_RADIUS,
+    padding: 8,
+    marginLeft: 8,
+    width: 40,
+    height: 40
+  }
+});
+export default function BurstReactionToggle(props) {
+  const { onPress: onPress2, isActive } = props;
+  const styles = useStyles();
+  const color = isActive ? Module712.colors.WHITE : Module712.colors.INTERACTIVE_TEXT_DEFAULT;
+  let backgroundColor, c17169_2, sharedValue, sharedValue2;
+  const ref = useRef(null);
+  let c17168_1 = useBurstToggleCoachmark(ref);
+  backgroundColor = void 0;
+  c17169_2 = void 0;
+  sharedValue = void 0;
+  sharedValue2 = void 0;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  let r48 = useToken(isActive ? Module712.colors.BACKGROUND_BRAND : Module712.colors.INPUT_BACKGROUND_DEFAULT);
+  if (r48 == null) {
+    r48 = "";
+  }
+  backgroundColor = r48;
+  const r0 = isActive ? 360 : 0;
+  c17169_2 = r0;
+  sharedValue = useSharedValue(backgroundColor);
+  sharedValue2 = useSharedValue(r0);
+  const r60 = function() {
+    return {
+      backgroundColor: stateFromStores ? backgroundColor : sharedValue.get(),
+      transform: [{
+        rotate: `${stateFromStores ? 0 : sharedValue2.get()}deg`
+      }]
+    };
+  };
+  r60.__closure = {
+    reducedMotion: stateFromStores,
+    targetBackgroundColor: backgroundColor,
+    backgroundColor: sharedValue,
+    rotation: sharedValue2
+  };
+  r60.__workletHash = 1525758595013;
+  r60.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(r60);
+  useEffect(() => {
+    sharedValue.set(withTiming(backgroundColor, c6160_8));
+    sharedValue2.set(withSpring(c17169_2, c6160_9));
+  }, [sharedValue, backgroundColor, sharedValue2, r0]);
+  return <Pressable onPress={function onPress() {
+    c17168_1(ContentDismissActionType.AUTO);
+    onPress2();
+  }} accessible accessibilityLabel={isActive ? intl.string(t["5cRA/b"]) : intl.string(t.buV4av)} accessibilityRole="switch" accessibilityState={{
+    checked: isActive
+  }}>
+    <ReanimatedRexport.View style={[styles.container, animatedStyle]} ref={ref}>
+      <SuperReactionIcon color={color} />
+    </ReanimatedRexport.View>
+  </Pressable>;
+};

modules/reactions/native/EmojiReactionRowButton.tsx

@@ -0,0 +1,85 @@
+// Metro module 9969 (f9970).
+import { useMemo } from "react";
+import { Platform } from "react-native";
+import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { isThemeLight, useThemeContext } from "../../../design/shared";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { intl, t } from "../../../intl/index.native";
+import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
+import MobileVisualRefreshExperiment from "../../themes/experiments/MobileVisualRefreshExperiment";
+import Emoji from "../../emojis/native/Emoji";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import { EmojiTypes } from "../../emojis/EmojiTypes";
+let useStyles2;
+Platform;
+const useStyles = createStyles((a0) => ({
+  emojiContainer: {
+    width: a0,
+    height: a0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.MOBILE_EMOJI_BUTTON_BACKGROUND,
+    borderRadius: Module712.modules.button.BORDER_RADIUS,
+    overflow: "hidden"
+  }
+}));
+useStyles2 = createStyles((a0, a1, a2, a3) => {
+  const width = a3 ? a2 : a0;
+  return {
+    emojiImage: {
+      width: a0,
+      height: a0
+    },
+    emojiText: {
+      lineHeight: a2,
+      fontSize: a1,
+      color: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
+      textAlign: "center",
+      width,
+      height: width,
+      ...a3 ? void 0 : null
+    }
+  };
+});
+export function EmojiPickerRowButton(props) {
+  const { emojiContainerSize, onPress } = props;
+  let iconSize = props.iconSize;
+  const styles2 = props.styles;
+  const styles = useStyles(emojiContainerSize);
+  const color = isThemeLight(useThemeContext().theme) ? Module712.unsafe_rawColors.PRIMARY_500 : Module712.unsafe_rawColors.PRIMARY_300;
+  const props2 = {
+    activeOpacity: 0.5,
+    accessibilityRole: "button",
+    accessibilityLabel: intl.string(t.lfIHs4),
+    hitSlop: 4,
+    onPress,
+    style: [styles.emojiContainer, styles2],
+    children: null
+  };
+  if (iconSize == null) {
+    iconSize = "md";
+  }
+  props2.children = <ReactionIcon color={color} size={iconSize} />;
+  return <PressableOpacity {...props2} />;
+}
+export function EmojiReactionRowButton(props) {
+  const { emoji, emojiSize, emojiFontSize, emojiContainerSize, emojiLineHeight, onPress, styles: styles2 } = props;
+  const styles = useStyles(emojiContainerSize);
+  const styles22 = useStyles2(emojiSize, emojiFontSize, emojiLineHeight, MobileVisualRefreshExperiment("EmojiReactionRowButton"));
+  return <PressableOpacity androidRippleConfig={useMemo(() => ({
+    foreground: true
+  }), [])} activeOpacity={0.5} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["/iYSo6"], {
+    emojiName: emoji?.name
+  })} disabled={emoji == null} hitSlop={4} onPress={onPress} style={[styles.emojiContainer, styles2]}>
+    {emoji != null ? <Emoji textEmojiStyle={styles22.emojiText} fastImageStyle={styles22.emojiImage} name={emoji.id == null ? emoji.surrogates : ""} src={emoji.id != null ? AvatarUtils.getEmojiURL({
+      id: emoji.id,
+      animated: emoji.animated,
+      size: EMOJI_URL_BASE_SIZE
+    }) : emoji.url} /> : null}
+  </PressableOpacity>;
+}
+export function getEmojiKey(a0, a1) {
+  return a0 != null ? a0.type === EmojiTypes.UNICODE ? a0.surrogates : a0.id : a1;
+}

modules/reactions/native/MessagePreviewReactions.tsx

@@ -0,0 +1,23 @@
+// Metro module 9461 (f9462).
+import ConversationsStore from "../../conversations/ConversationsStore";
+import MessagePreviewStore from "../../../stores/native/MessagePreviewStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { MessageReactionsContent, MessageReactionsEmpty } from "./MessageReactionsContent";
+let c6240_6 = [];
+export default function MessagePreviewReactions(props) {
+  const { channelId: channelId2, messageId: messageId2, emoji } = props;
+  const channelId = channelId2;
+  const messageId = messageId2;
+  const stateFromStores = useStateFromStores([MessagePreviewStore, ConversationsStore], () => {
+    let r7 = MessagePreviewStore.getMessage(messageId);
+    if (r7 == null) {
+      r7 = ConversationsStore.getMessage(channelId, messageId);
+    }
+    return r7 != null ? r7.reactions : c6240_6;
+  }, [channelId, messageId]);
+  return <AnalyticsLocationProvider value={useAnalyticsLocations(AnalyticsLocation.MESSAGE_PREVIEW_REACTIONS).analyticsLocations}>
+    {stateFromStores.length > 0 ? <MessageReactionsContent channelId={channelId} messageId={messageId} emoji={emoji} reactions={stateFromStores} /> : <MessageReactionsEmpty />}
+  </AnalyticsLocationProvider>;
+};

modules/reactions/native/MessageReactions.tsx

@@ -0,0 +1,44 @@
+// Metro module 9451 (f9452).
+import { useMemo } from "react";
+import MessageStore from "../../../stores/MessageStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { MessageReactionsContent, MessageReactionsEmpty } from "./MessageReactionsContent";
+let c6231_6 = [];
+export default function MessageReactions(props) {
+  const { channelId: channelId2, messageId: messageId2, emoji, reactions, isSelectedBurst = false, ...props2 } = props;
+  let c17218_0;
+  c17218_0 = void 0;
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.MESSAGE_REACTIONS).analyticsLocations;
+  const channelId = channelId2;
+  const messageId = messageId2;
+  const stateFromStores = useStateFromStores([MessageStore], () => {
+    const message = MessageStore.getMessage(channelId, messageId);
+    return message != null ? message.reactions : c6231_6;
+  }, [channelId, messageId]);
+  const memo = useMemo(() => stateFromStores.filter((stateFromStore) => stateFromStore.count_details?.vote == null), [stateFromStores]);
+  const r39 = reactions != null ? reactions.length > 0 ? reactions : memo : memo;
+  const reactions2 = [];
+  c17218_0 = reactions2;
+  r39.forEach((item) => {
+    if (item.burst_count > 0 && item.count > 0) {
+      c17218_0.push({
+        ...item,
+        count: 0
+      });
+      c17218_0.push({
+        ...item,
+        burst_count: 0
+      });
+    } else {
+      c17218_0.push({
+        ...item
+      });
+    }
+  });
+  reactions2.sort((a, b) => (b.burst_count > 0 ? b.burst_count : b.count) - (a.burst_count > 0 ? a.burst_count : a.count));
+  return <AnalyticsLocationProvider value={analyticsLocations}>
+    {reactions2.length > 0 ? <MessageReactionsContent channelId={channelId} messageId={messageId} emoji={emoji} reactions={reactions2} isSelectedBurst={isSelectedBurst} {...props2} /> : <MessageReactionsEmpty />}
+  </AnalyticsLocationProvider>;
+};

modules/reactions/native/MessageReactionsContent.tsx

@@ -0,0 +1,572 @@
+// Metro module 9452 (f9453).
+import { useRef, useCallback, useEffect, useState } from "react";
+import { ActivityIndicator, Pressable, View, Platform } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import MessageReactionsStore from "../../../stores/MessageReactionsStore";
+import PermissionStore from "../../../stores/PermissionStore";
+import { DEFAULT_NUM_REACTION_USERS, Permissions } from "../../../Constants";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import { Text } from "../../../design/components/Text/native/Text";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { MAX_REACTIONS, getReactionEmojiName, emojiEquals } from "../ReactionUtils";
+import isUndefinedOrNull from "../../../_bundle/isUndefinedOrNull";
+import { ReactionTypes } from "../../messages/MessageReactionsTypes";
+import { getReactors, removeEmojiReactions, removeReaction, ReactionLocations } from "../ReactionActionCreators";
+import useInitialValue from "../../../hooks/useInitialValue";
+import Module12 from "../../../_bundle/Module12";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import ReactionToProfileExperiment from "../ReactionToProfileExperiment";
+import NicknameUtils from "../../../utils/NicknameUtils";
+import UserUtils from "../../../utils/UserUtils";
+import showUserProfileActionSheet from "../../user_profile/native/showUserProfileActionSheet";
+import FormRow from "../../../design/void/Form/native/FormRow";
+import { RefreshEmptyState, Avatar, AvatarSizes } from "../../../design/void/native";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import DiscordTag from "../../user_profile/native/DiscordTag";
+import { isAndroid, isIOS } from "../../../utils/PlatformUtils";
+import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import FormDivider from "../../../design/void/Form/native/FormDivider";
+import SlideoutButton from "../../../components_native/common/SlideoutButton";
+import { intl, t } from "../../../intl/index.native";
+import { useEmojiColorPalette } from "../../emojis/hooks/useEmojiColorPalette";
+import { hexOpacityToRgba } from "../../../utils/ColorUtils";
+import { AnimateEmoji } from "../../user_settings/UserSettings";
+import Emoji from "../../emojis/native/Emoji";
+import useCanRemoveAllReactions from "../useCanRemoveAllReactions";
+import * as _timing from "../../../design/animation/reanimated/timing/timing";
+import { getWindowDimensions } from "../../screen/useWindowDimensions.native";
+import { TrashIcon } from "../../../design/components/Icon/native/redesign/generated/TrashIcon";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
+import TidaWebformExperiment from "../../guild/TidaWebformExperiment";
+import TabBar from "../../../components_native/common/TabBar";
+import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
+import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import { useNoResultsSource } from "../../../design/components/Illustration/native/redesign/generated/NoResults";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetView } from "../../../_bundle/Module5245";
+import { Storage } from "../../../_bundle/Module595";
+import { useIsActiveChannelOrUnarchivableThread } from "../../threads/ThreadHooks";
+import { BACKDROP_OPACITY } from "../../messages/native/burst_reactions/BurstReactionEffectUtils";
+import BurstReactionAnimationPreview from "../../messages/native/burst_reactions/BurstReactionAnimationPreview";
+import SwipeableFastList from "../../../components_native/common/SwipeableFastList";
+import FastList from "../../../lib/native/FastList";
+let AnimatedComponent, useStyles, useReactorsOnScrollNative, ReactionTab, __initData, __initData2, RemoveAllButton, EmojiOptionsButton, ReactionTabs, c6232_28, c6232_29;
+const useReactors = function useReactors({ channelId, messageId, reaction, reactionType }) {
+  let r37;
+  const stateFromStores = useStateFromStores([MessageReactionsStore], () => {
+    const reactions3 = MessageReactionsStore.getReactions(channelId, messageId, reaction.emoji, DEFAULT_NUM_REACTION_USERS, reactionType);
+    const r16 = Array;
+    let r18 = reactions3 == null ? void 0 : reactions3.values();
+    if (r18 == null) {
+      r18 = [];
+    }
+    return r16.from(r18);
+  }, [channelId, messageId, reaction.emoji, reactionType], isUndefinedOrNull);
+  if (reactionType === ReactionTypes.VOTE) {
+    let r39 = reaction.count_details?.vote;
+    if (r39 == null) {
+      r39 = 0;
+    }
+    r37 = r39;
+  } else {
+    r37 = reactionType === ReactionTypes.BURST ? reaction.burst_count : reaction.count;
+  }
+  return {
+    reactors: stateFromStores,
+    reactorsHasMore: r37 > stateFromStores.length
+  };
+};
+useReactorsOnScrollNative = function useReactorsOnScrollNative({ channelId: channelId2, messageId: messageId2, reactionSelected, reactors: reactors4, reactorsHasMore, reactionType: reactionType2 }) {
+  let ref2, c17221_9;
+  ref2 = void 0;
+  c17221_9 = void 0;
+  const ref = useRef(false);
+  const id = reactors4.length > 0 ? reactors4[reactors4.length - 1].id : null;
+  const callback = useCallback((a0, a1) => {
+    if (a0 / a1 > 0.75 && reactorsHasMore && !ref.current) {
+      ref.current = true;
+      getReactors({
+        channelId: channelId2,
+        messageId: messageId2,
+        emoji: reactionSelected.emoji,
+        limit: DEFAULT_NUM_REACTION_USERS,
+        after: id,
+        type: reactionType2
+      }).then(() => {
+        ref.current = false;
+      });
+    }
+  }, [channelId2, messageId2, reactionSelected, reactorsHasMore, id, reactionType2]);
+  ref2 = useRef(callback);
+  useEffect(() => {
+    ref2.current = callback;
+  }, [callback]);
+  c17221_9 = useInitialValue(() => Module12.debounce((a0, a1) => ref2.current(a0, a1), 16));
+  return useInitialValue(() => ({ nativeEvent }) => c17221_9(nativeEvent.contentOffset.y, nativeEvent.contentSize.height));
+};
+ReactionTab = function ReactionTab(props) {
+  const { reaction: reaction3, selected } = props;
+  const styles4 = useStyles();
+  const r4 = reaction3.burst_count > 0;
+  let burst_colors = reaction3.burst_colors;
+  if (burst_colors == null) {
+    burst_colors = [];
+  }
+  const emojiColorPalette = useEmojiColorPalette(burst_colors);
+  const r10 = emojiColorPalette?.accentColor != null ? {
+    color: emojiColorPalette.accentColor
+  } : null;
+  const r31 = emojiColorPalette != null ? {
+    backgroundColor: hexOpacityToRgba(emojiColorPalette.backgroundColor, emojiColorPalette.opacity)
+  } : null;
+  const emoji2 = reaction3.emoji;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const setting = AnimateEmoji.useSetting();
+  const props2 = {
+    style: [styles4.tabContainer, selected ? styles4.tabContainerSelected : null, selected ? r4 ? r31 : null : null],
+    accessible: true,
+    accessibilityLabel: emoji2.name,
+    accessibilityState: {
+      selected
+    },
+    children: [<Emoji src={emoji2.id != null ? AvatarUtils.getEmojiURL({
+      id: emoji2.id,
+      animated: emoji2.animated && !stateFromStores && setting,
+      size: 48
+    }) : void 0} name={emoji2.name} textEmojiStyle={[styles4.emoji, styles4.emojiText]} fastImageStyle={[styles4.emoji, styles4.emojiImage]} />, <Text variant="text-md/bold" style={[styles4.reactionCountText, selected ? styles4.reactionCountTextSelected : null, r4 ? r10 : null]}>
+      {reaction3.burst_count > 0 ? reaction3.burst_count : reaction3.count}
+    </Text>]
+  };
+  let id3 = emoji2.id;
+  if (id3 == null) {
+    id3 = emoji2.name;
+  }
+  return <View key={id3} {...props2} />;
+};
+RemoveAllButton = function RemoveAllButton(props) {
+  let useReducedMotion, state, setState, sharedValue, sharedValue2, callback2;
+  const { reactions, reactionSelectedIndex, channelId: channelId3, messageId: messageId3 } = props;
+  useReducedMotion = void 0;
+  state = void 0;
+  setState = void 0;
+  sharedValue = void 0;
+  sharedValue2 = void 0;
+  callback2 = void 0;
+  const styles4 = useStyles();
+  const canRemoveAllReactions = useCanRemoveAllReactions(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId3), [channelId3]));
+  useReducedMotion = AccessibilityStore.useReducedMotion;
+  [state, setState] = useState(true);
+  sharedValue = useSharedValue(64);
+  const S = function S() {
+    return {
+      maxWidth: useReducedMotion ? sharedValue.get() : _timing.withTiming(sharedValue.get(), {
+        duration: 200
+      })
+    };
+  };
+  S.__closure = {
+    useReducedMotion,
+    buttonWidth: sharedValue,
+    withTiming: _timing.withTiming
+  };
+  S.__workletHash = 16499689496895;
+  S.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(S);
+  sharedValue2 = useSharedValue(0);
+  const T = function T() {
+    return {
+      opacity: useReducedMotion ? sharedValue2.get() : _timing.withTiming(sharedValue2.get(), {
+        duration: 125
+      }),
+      color: "white",
+      fontSize: 14,
+      marginLeft: 8,
+      textAlignVertical: "center"
+    };
+  };
+  T.__closure = {
+    useReducedMotion,
+    textOpacity: sharedValue2,
+    withTiming: _timing.withTiming
+  };
+  T.__workletHash = 8698187840986;
+  T.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(T);
+  callback2 = useCallback(() => {
+    setState(true);
+    sharedValue.set(32);
+    sharedValue2.set(0);
+  }, [sharedValue, sharedValue2]);
+  useEffect(() => {
+    callback2();
+  }, [reactionSelectedIndex, callback2]);
+  return canRemoveAllReactions ? <Pressable onPress={() => {
+    if (state) {
+      setState(false);
+      sharedValue.set(getWindowDimensions().width);
+      sharedValue2.set(1);
+    } else {
+      removeEmojiReactions(channelId3, messageId3, reactions[reactionSelectedIndex].emoji);
+      callback2();
+    }
+  }}>
+    <ReanimatedRexport.View style={[styles4.removeAllButton, animatedStyle]}>
+      <TrashIcon color={Module712.unsafe_rawColors.WHITE} size="sm" />
+      <AnimatedComponent style={animatedStyle2} variant="text-sm/semibold" color="text-overlay-light">
+        {intl.string(t["zx/e4P"])}
+      </AnimatedComponent>
+    </ReanimatedRexport.View>
+  </Pressable> : null;
+};
+EmojiOptionsButton = function EmojiOptionsButton(props) {
+  let reaction2;
+  const { reactions: reactions3, reactionSelectedIndex: reactionSelectedIndex3, channelId: channelId4, messageId: messageId4 } = props;
+  reaction2 = void 0;
+  const styles4 = useStyles();
+  const canRemoveReactions = useCanRemoveAllReactions(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId4), [channelId4]));
+  reaction2 = reactions3[reactionSelectedIndex3];
+  return <Pressable onPress={useCallback(() => {
+    ActionSheetActionCreators.openLazy(import("./ReactionEmojiOptionsActionSheet"), "ReactionEmojiOptionsActionSheet", {
+      channelId: channelId4,
+      messageId: messageId4,
+      reaction: reaction2,
+      canRemoveReactions
+    }, "replaceTopSheet");
+  }, [channelId4, messageId4, reaction2, canRemoveReactions])} style={styles4.emojiOptionsButton}>
+    <Text variant="text-xs/semibold" color="text-subtle">
+      {intl.string(t.pCaYID)}
+    </Text>
+    <ChevronSmallRightIcon color={Module712.colors.ICON_SUBTLE} size="xs" />
+  </Pressable>;
+};
+ReactionTabs = function ReactionTabs(props) {
+  const styles4 = useStyles();
+  const { reactions: reactions3, reactionSelectedIndex: reactionSelectedIndex2, setReactionSelectedIndex } = props;
+  const tidaWebformEnabled = TidaWebformExperiment.useExperiment({
+    location: "ReactionTabs"
+  }, {
+    autoTrackExposure: false
+  }).tidaWebformEnabled;
+  return <View style={styles4.reactionTab}>
+    <TabBar tabs={reactions3.map((item, index) => {
+      const props = {
+        reaction: item,
+        selected: index === reactionSelectedIndex2
+      };
+      let id3 = item.emoji.id;
+      if (id3 == null) {
+        id3 = "";
+      }
+      return <ReactionTab key={`${id3}:${item.emoji.name}`} {...props} />;
+    })} tabStyle={styles4.tab} tabStyleActive={styles4.tabActive} tabStyleSelected={styles4.tabSelected} tabIndexSelected={reactionSelectedIndex2} onSelect={(event) => {
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+      setReactionSelectedIndex(event);
+    }} initialNumTabsToRender={MAX_REACTIONS} />
+    <FormDivider outer />
+    <View style={styles4.removeButtonContainer}>
+      <Text style={styles4.emojiTextIdentifier} variant="eyebrow" color="text-default">
+        {getReactionEmojiName(reactions3[reactionSelectedIndex2].emoji)}
+      </Text>
+      {tidaWebformEnabled ? <EmojiOptionsButton {...props} /> : <RemoveAllButton {...props} />}
+    </View>
+  </View>;
+};
+Platform;
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Text);
+useStyles = createStyles({
+  container: {
+    flex: 1
+  },
+  containerEmpty: {
+    padding: 32,
+    borderTopLeftRadius: Module712.radii.sm,
+    borderTopRightRadius: Module712.radii.sm
+  },
+  listRow: {
+    height: 48,
+    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
+  },
+  tabContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: Module712.radii.sm,
+    padding: 8,
+    marginTop: 8
+  },
+  tabContainerSelected: {
+    backgroundColor: Module712.colors.INTERACTIVE_BACKGROUND_SELECTED
+  },
+  tab: {
+    padding: 0,
+    marginHorizontal: 8,
+    marginBottom: 8
+  },
+  tabSelected: {
+    borderBottomColor: "transparent"
+  },
+  tabActive: {
+    borderRadius: Module712.radii.sm
+  },
+  reactionTab: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  removeButtonContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  emojiOptionsButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: Module712.space.PX_16,
+    gap: 2
+  },
+  removeAllButton: {
+    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_CRITICAL,
+    borderRadius: Module712.radii.xxl,
+    height: 32,
+    overflow: "hidden",
+    minWidth: 42,
+    marginRight: 20,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12
+  },
+  reactionCountText: {
+    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  reactionCountTextSelected: {
+    color: Module712.colors.INTERACTIVE_TEXT_ACTIVE
+  },
+  emoji: {
+    marginRight: 8
+  },
+  emojiText: {
+    lineHeight: 24,
+    fontSize: 20,
+    textAlign: "center",
+    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  emojiImage: {
+    resizeMode: "contain",
+    width: 24,
+    height: 24
+  },
+  emojiTextIdentifier: {
+    padding: 16
+  },
+  avatar: {
+    marginRight: 10
+  },
+  buttonRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center"
+  },
+  loadingSpinner: {
+    height: 48,
+    padding: 6
+  }
+});
+__initData = {
+  code: "function MessageReactionsContentTsx1(){const{useReducedMotion,buttonWidth,withTiming}=this.__closure;return{maxWidth:useReducedMotion?buttonWidth.get():withTiming(buttonWidth.get(),{duration:200})};}"
+};
+__initData2 = {
+  code: "function MessageReactionsContentTsx2(){const{useReducedMotion,textOpacity,withTiming}=this.__closure;return{opacity:useReducedMotion?textOpacity.get():withTiming(textOpacity.get(),{duration:125}),color:'white',fontSize:14,marginLeft:8,textAlignVertical:'center'};}"
+};
+c6232_28 = "MessageReactionsContent_SwipableBounced";
+c6232_29 = Storage.get("MessageReactionsContent_SwipableBounced", false);
+export { useReactors };
+export { useReactorsOnScrollNative };
+export function MessageReactionsEmpty() {
+  const styles4 = useStyles();
+  return <BottomSheet scrollable startHeight={338 + useSafeAreaInsets_native().bottom}>
+    <BottomSheetView style={styles4.containerEmpty}>
+      <RefreshEmptyState source={useNoResultsSource()} title={intl.string(t.HmPOrp)} body={intl.string(t["pTJ5J/"])} />
+    </BottomSheetView>
+  </BottomSheet>;
+}
+export function MessageReactionsContent(props) {
+  const { channelId: channelId5, messageId: messageId7, emoji: emoji2, reactions: reactions3 } = props;
+  let isSelectedBurst = props.isSelectedBurst;
+  const { disableManage = false, disableTabs = false } = props;
+  const styles4 = useStyles();
+  const reactions2 = reactions3;
+  const emoji = emoji2;
+  if (isSelectedBurst === void 0) {
+    isSelectedBurst = false;
+  }
+  let c17226_2 = isSelectedBurst;
+  const [state, setReactionSelectedIndex2] = useState(() => {
+    if (emoji == null) {
+      return 0;
+    }
+    const r7 = reactions2.findIndex((item) => {
+      let r17;
+      const r12 = emojiEquals(item.emoji, emoji);
+      let burst_count = item.burst_count;
+      if (burst_count == null) {
+        burst_count = 0;
+      }
+      let r15 = burst_count > 0;
+      if (c17226_2) {
+        if (r15) {
+          r15 = r12;
+        }
+        r17 = r15;
+      } else {
+        r17 = r15 ? !r15 : r12;
+      }
+      return r17;
+    });
+    return r7 >= 0 ? r7 : 0;
+  });
+  const reactionSelectedIndex3 = Math.min(state, reactions2.length - 1);
+  const reaction3 = reactions2[reactionSelectedIndex3];
+  const reactionType3 = reaction3.me_vote != null ? ReactionTypes.VOTE : reaction3.burst_count > 0 ? ReactionTypes.BURST : ReactionTypes.NORMAL;
+  let channelId6;
+  const reactors4 = useReactors({
+    channelId: channelId5,
+    messageId: messageId7,
+    reaction: reaction3,
+    reactionType: reactionType3
+  });
+  const { reactors: reactors5, reactorsHasMore: reactorsHasMore3 } = reactors4;
+  const isActiveChannelOrUnarchivableThread2 = useIsActiveChannelOrUnarchivableThread(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId5), [channelId5]));
+  const safeAreaInsets_native = useSafeAreaInsets_native();
+  channelId6 = channelId5;
+  const r96 = useStateFromStores([PermissionStore], () => PermissionStore.canWithPartialContext(Permissions.MANAGE_MESSAGES, {
+    channelId: channelId6
+  }), [channelId5]) && !disableManage && isActiveChannelOrUnarchivableThread2;
+  let id3 = reaction3.emoji.id;
+  if (id3 == null) {
+    id3 = reaction3.emoji.name;
+  }
+  let reactors2, messageId5, channelId7, c17229_3, isActiveChannelOrUnarchivableThread, styles2, analyticsLocations, reactionToProfileEnabled;
+  let channelId8, messageId6, c17230_2, reactors3, styles3;
+  const props2 = {
+    accessibilityLabel: intl.string(t.gHp0C4),
+    footerSize: 48,
+    insetBottom: safeAreaInsets_native.bottom,
+    onScroll: useReactorsOnScrollNative({
+      channelId: channelId5,
+      messageId: messageId7,
+      reactionSelected: reaction3,
+      reactors: reactors5,
+      reactorsHasMore: reactorsHasMore3,
+      reactionType: reactionType3
+    }),
+    renderFooter: null,
+    renderItem: null,
+    renderQuickActions: null,
+    itemSize: 48,
+    sections: null,
+    style: null
+  };
+  const reactors = reactors5;
+  const reactorsHasMore2 = reactorsHasMore3;
+  const styles = useStyles();
+  props2.renderFooter = useCallback(() => reactorsHasMore2 ? <ActivityIndicator style={styles.loadingSpinner} size="large" /> : reactors.length === 0 ? <ActivityIndicator style={styles.loadingSpinner} size="large" /> : null, [reactors, reactorsHasMore2, styles]);
+  reactors2 = reactors;
+  messageId5 = messageId7;
+  channelId7 = channelId5;
+  c17229_3 = reaction3;
+  isActiveChannelOrUnarchivableThread = r96;
+  styles2 = void 0;
+  analyticsLocations = void 0;
+  reactionToProfileEnabled = void 0;
+  styles2 = useStyles();
+  analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  reactionToProfileEnabled = ReactionToProfileExperiment.useConfig({
+    location: "MessageReactionsContent"
+  }).reactionToProfileEnabled;
+  props2.renderItem = useCallback((a0, a1) => {
+    const localUser = reactors2[a1];
+    const id2 = localUser.id;
+    const r26 = reactors2.length - 1;
+    const channel = ChannelStore.getChannel(channelId7);
+    const r28 = channel != null ? channel.getGuildId() : null;
+    let nick = NicknameUtils.getNickname(r28, channelId7, localUser);
+    if (nick == null) {
+      nick = UserUtils.getGlobalName(localUser);
+    }
+    const r24 = r28 != null ? GuildMemberStore.getMember(r28, id2) : null;
+    const BURST = c17229_3.burst_count > 0 ? ReactionTypes.BURST : ReactionTypes.NORMAL;
+    const avatarSource = localUser.getAvatarSource(r28);
+    const props = {
+      leading: <Avatar style={styles2.avatar} size={AvatarSizes.SMALL} source={r28 != null ? r24?.avatar != null ? AvatarUtils.getGuildMemberAvatarSource(r24, localUser) : avatarSource : avatarSource} />,
+      label: <DiscordTag user={localUser} nick={nick} />,
+      trailing: null,
+      onPress: null,
+      onLongPress: null
+    };
+    const trailing = isActiveChannelOrUnarchivableThread ? isAndroid() ? <Pressable onPress={() => removeReaction({
+      channelId: channelId7,
+      messageId: messageId5,
+      emoji: c17229_3.emoji,
+      location: ReactionLocations.MESSAGE,
+      userId: localUser.id,
+      options: {
+        burst: BURST === ReactionTypes.BURST
+      }
+    })}>
+      <XSmallIcon />
+    </Pressable> : null : null;
+    const openProfile = function openProfile() {
+      showUserProfileActionSheet({
+        userId: id2,
+        channelId: channelId7,
+        messageId: messageId5,
+        localUser,
+        sourceAnalyticsLocations: analyticsLocations
+      });
+    };
+    props.trailing = trailing;
+    props.onPress = reactionToProfileEnabled ? openProfile : void 0;
+    props.onLongPress = openProfile;
+    return <View style={styles2.listRow}>
+      <FormRow {...props} />
+      {a1 !== r26 ? <FormDivider /> : null}
+    </View>;
+  }, [reactors, channelId5, isActiveChannelOrUnarchivableThread, messageId5, reaction3, styles2, analyticsLocations, reactionToProfileEnabled]);
+  channelId8 = channelId5;
+  messageId6 = messageId5;
+  c17230_2 = reaction3;
+  reactors3 = reactors;
+  styles3 = void 0;
+  styles3 = useStyles();
+  props2.renderQuickActions = useCallback((a0, a1) => {
+    let c26439_0 = reactors3[a1];
+    const BURST2 = c17230_2.burst_count > 0 ? ReactionTypes.BURST : ReactionTypes.NORMAL;
+    return <View style={styles3.buttonRow}>
+      <SlideoutButton title={intl.string(t.N86XcP)} IconComponent={XSmallIcon} color={Module712.unsafe_rawColors.RED_400} onPress={() => removeReaction({
+        channelId: channelId8,
+        messageId: messageId6,
+        emoji: c17230_2.emoji,
+        location: ReactionLocations.MESSAGE,
+        userId: c26439_0.id,
+        options: {
+          burst: BURST2 === ReactionTypes.BURST
+        }
+      })} height={48} />
+    </View>;
+  }, [reactors, channelId5, messageId5, reaction3, styles3]);
+  props2.sections = [reactors.length];
+  props2.style = styles4.container;
+  const callback3 = useCallback(() => {
+    c6232_29 = true;
+    Storage.set(c6232_28, true);
+  }, []);
+  return <BottomSheet scrollable backdropOpacity={BACKDROP_OPACITY} backdropChildren={reactionType3 === ReactionTypes.BURST ? <BurstReactionAnimationPreview emoji={reaction3.emoji} reactionType={reactionType3} messageId={messageId5} channelId={channelId5} /> : null} header={disableTabs !== true ? <ReactionTabs reactions={reactions2} reactionSelectedIndex={reactionSelectedIndex3} setReactionSelectedIndex={setReactionSelectedIndex2} messageId={messageId5} channelId={channelId5} /> : null}>
+    {isIOS() && isActiveChannelOrUnarchivableThread ? <SwipeableFastList key={id3} inActionSheet bounceFirstRowOnMount={!c6232_29} onBounceSwipable={callback3} {...props2} /> : <FastList key={id3} inActionSheet {...props2} />}
+  </BottomSheet>;
+}

modules/reactions/native/ReactionEmojiOptionsActionSheet.tsx

@@ -0,0 +1,213 @@
+// Metro module 9458 (f9459).
+import { useCallback } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import EmojiStore from "../../emojis/EmojiStore";
+import SelectedGuildStore from "../../../stores/SelectedGuildStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { DeveloperMode, AnimateEmoji } from "../../user_settings/UserSettings";
+import TidaWebformExperiment from "../../guild/TidaWebformExperiment";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useIsFavoriteEmoji } from "../../emoji_picker/EmojiPickerUtils";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { StarIcon } from "../../../design/components/Icon/native/redesign/generated/StarIcon";
+import { StarOutlineIcon } from "../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { unfavoriteEmoji, favoriteEmoji } from "../../../actions/EmojiActionCreators";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import { copy } from "../../../utils/ClipboardUtils.native";
+import { presentCopiedToClipboard } from "../../toast/native/ToastUtils";
+import { removeEmojiReactions } from "../ReactionActionCreators";
+import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
+import Emoji from "../../emojis/native/Emoji";
+import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
+import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
+import { HermesBuiltin } from "../../../_hermes/prelude";
+const useStyles = createStyles({
+  header: {
+    alignItems: "center",
+    paddingTop: Module712.space.PX_8,
+    gap: Module712.space.PX_16
+  },
+  reactionPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.MESSAGE_HIGHLIGHT_BACKGROUND_DEFAULT,
+    borderRadius: Module712.radii.xl,
+    borderWidth: 4,
+    borderColor: Module712.colors.BORDER_STRONG,
+    paddingVertical: Module712.space.PX_8,
+    paddingHorizontal: Module712.space.PX_16,
+    gap: Module712.space.PX_8
+  },
+  emoji: {
+    width: 50,
+    height: 50
+  },
+  emojiText: {
+    fontSize: 24,
+    lineHeight: 50,
+    textAlign: "center"
+  },
+  reactionText: {
+    fontSize: 24,
+    lineHeight: 50
+  },
+  starIcon: {
+    height: 24,
+    width: 24
+  },
+  starIconSelected: {
+    tintColor: Module712.colors.ICON_FEEDBACK_WARNING
+  },
+  starIconUnselected: {
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  }
+});
+export default function ReactionEmojiOptionsActionSheet(props) {
+  let stateFromStores, isFavoriteEmoji, emojiURL, callback, callback2;
+  const { channelId, messageId, reaction } = props;
+  let canRemoveReactions = props.canRemoveReactions;
+  stateFromStores = void 0;
+  isFavoriteEmoji = void 0;
+  emojiURL = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const emoji = reaction.emoji;
+  const r3 = emoji.id != null;
+  let r34 = DeveloperMode.useSetting();
+  const tidaWebformEnabled = TidaWebformExperiment.useExperiment({
+    location: "ReactionEmojiOptionsActionSheet"
+  }, {
+    autoTrackExposure: false
+  }).tidaWebformEnabled;
+  const stateFromStores3 = useStateFromStores([SelectedGuildStore], () => SelectedGuildStore.getGuildId());
+  stateFromStores = useStateFromStores([EmojiStore], () => emoji.id != null ? EmojiStore.getCustomEmojiById(emoji.id) : null, [emoji.id]);
+  isFavoriteEmoji = useIsFavoriteEmoji(stateFromStores3, stateFromStores);
+  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const setting = AnimateEmoji.useSetting();
+  const r4 = emoji.id != null;
+  let r66 = void 0;
+  if (r4) {
+    let animated = emoji.animated;
+    if (animated == null) {
+      animated = false;
+    }
+    if (animated) {
+      animated = !stateFromStores2;
+    }
+    if (animated) {
+      animated = setting;
+    }
+    r66 = AvatarUtils.getEmojiURL({
+      id: emoji.id,
+      animated,
+      size: 96
+    });
+  }
+  emojiURL = r66;
+  const r26 = reaction.burst_count > 0 ? reaction.burst_count : reaction.count;
+  callback = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+  }, []);
+  callback2 = useCallback((a0) => {
+    let style;
+    const r1 = {
+      ...styles.starIcon
+    };
+    if (a0) {
+      HermesBuiltin.copyDataProperties(r1, styles.starIconSelected);
+      style = r1;
+    } else {
+      HermesBuiltin.copyDataProperties(r1, styles.starIconUnselected);
+      style = r1;
+    }
+    return a0 ? <StarIcon style={style} /> : <StarOutlineIcon style={style} />;
+  }, [styles]);
+  const callback3 = useCallback(() => {
+    callback();
+    if (stateFromStores != null) {
+      const content = function content() {
+        return <Text style={{
+          marginLeft: 8,
+          marginTop: 2
+        }} variant="text-md/bold">
+          {isFavoriteEmoji ? intl.string(t.in1rga) : intl.string(t.mE2e8A)}
+        </Text>;
+      };
+      if (isFavoriteEmoji) {
+        unfavoriteEmoji(stateFromStores);
+        ToastActionCreators.open({
+          key: "EMOJI_UNFAVORITED",
+          icon: () => callback2(false),
+          content
+        });
+      } else {
+        favoriteEmoji(stateFromStores);
+        ToastActionCreators.open({
+          key: "EMOJI_FAVORITED",
+          icon: () => callback2(true),
+          content
+        });
+      }
+    }
+  }, [callback, stateFromStores, isFavoriteEmoji, callback2]);
+  const callback4 = useCallback(() => {
+    if (emoji.id != null) {
+      copy(emoji.id);
+      presentCopiedToClipboard();
+      callback();
+    }
+  }, [emoji.id, callback]);
+  const callback5 = useCallback(() => {
+    if (emojiURL != null) {
+      copy(emojiURL);
+      presentCopiedToClipboard();
+      callback();
+    }
+  }, [emojiURL, callback]);
+  const callback6 = useCallback(() => {
+    removeEmojiReactions(channelId, messageId, emoji);
+    callback();
+  }, [channelId, messageId, emoji, callback]);
+  let name = emoji.name;
+  if (name == null) {
+    name = "";
+  }
+  const r136 = [<View style={styles.header}>
+    <View style={styles.reactionPill}>
+      <Emoji src={emojiURL} name={name} textEmojiStyle={styles.emojiText} fastImageStyle={styles.emoji} />
+      <Text variant="text-lg/bold" color="text-default" style={styles.reactionText}>{r26}</Text>
+    </View>
+    <Text variant="text-lg/semibold" color="text-default">
+      {r3 ? `:${name}:` : name}
+    </Text>
+  </View>, ,];
+  const r155 = [(r3 ? stateFromStores != null : r3) && <TableRow label={isFavoriteEmoji ? intl.string(t.Ay49KA) : intl.string(t.nNsr67)} onPress={callback3} />, (r34 ? r3 : r34) && <TableRow label={intl.string(t.Ap2oVy)} onPress={callback4} />, , ,];
+  if (r34) {
+    r34 = tidaWebformEnabled;
+  }
+  if (r34) {
+    r34 = r3;
+  }
+  if (r34) {
+    r34 = emojiURL != null;
+  }
+  if (r34) {
+    r34 = <TableRow label={intl.string(t.cIoudn)} onPress={callback5} />;
+  }
+  r155[2] = r34;
+  if (canRemoveReactions) {
+    canRemoveReactions = <TableRow label={<Text variant="text-md/semibold" color="text-feedback-critical">
+      {intl.string(t["zx/e4P"])}
+    </Text>} onPress={callback6} />;
+  }
+  r155[3] = canRemoveReactions;
+  r136[1] = <TableRowGroup hasIcons={false}>{r155}</TableRowGroup>;
+  return <ActionSheet>{r136}</ActionSheet>;
+};

modules/reactions/native/ReactionUtils.tsx

@@ -0,0 +1,133 @@
+// Metro module 9312 (f9313).
+import ChannelStore from "../../../stores/ChannelStore";
+import MessageStore from "../../../stores/MessageStore";
+import SelectedGuildStore from "../../../stores/SelectedGuildStore";
+import UserStore from "../../../stores/UserStore";
+import { AnalyticEvents, AnalyticsPages, AnalyticsSections } from "../../../Constants";
+import { EmojiIntention } from "../../emojis/EmojiConstants";
+import { toReactionEmoji } from "../ReactionUtils";
+import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
+import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
+import { ReactionLocations, addReaction, removeAllReactions } from "../ReactionActionCreators";
+import * as _PremiumUtils from "../../../utils/PremiumUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { getBestActiveInputForChannelId } from "../../../utils/native/ChatInputUtils";
+import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
+import { ReactionTypes } from "../../messages/MessageReactionsTypes";
+import AppAnalyticsUtils from "../../app_analytics/AppAnalyticsUtils";
+import Module9462 from "../../../_bundle/Module9462";
+import Module9463 from "../../../_bundle/Module9463";
+import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
+import { SuperReactionIcon } from "../../../design/components/Icon/native/redesign/generated/SuperReactionIcon";
+import AlertActionCreators from "../../../actions/AlertActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import { Text } from "../../../design/components/Text/native/Text";
+const r31 = {};
+r31[ReactionTypes.NORMAL] = Module9462;
+r31[ReactionTypes.BURST] = Module9463;
+const r44 = {};
+r44[ReactionTypes.NORMAL] = ReactionIcon;
+r44[ReactionTypes.BURST] = SuperReactionIcon;
+export function handleOutOfSuperReactions(a0) {
+  const currentUser = UserStore.getCurrentUser();
+  if (currentUser != null) {
+    return _PremiumUtils.isPremium(currentUser) ? void 0 : ActionSheetActionCreators.openLazy(import("../../messages/native/burst_reactions/SuperReactionUpsellActionSheet"), "SuperReactionUpsellActionSheet", {
+      onDismiss: a0
+    });
+  }
+}
+export function handleAddNewReactions(a0, a1) {
+  let c17140_0 = a0;
+  let c17140_1 = a1;
+  let r9 = arguments[2];
+  if (r9 === void 0) {
+    r9 = ReactionLocations.MESSAGE;
+  }
+  const MESSAGE = r9;
+  const burst = arguments[3]?.burst;
+  const currentUser = UserStore.getCurrentUser();
+  if (currentUser != null) {
+    const r25 = burst === true;
+    const isPremium = _PremiumUtils.isPremium(currentUser);
+    if (r25 && !isPremium) {
+      const currentUser2 = UserStore.getCurrentUser();
+      if (currentUser2 != null && !_PremiumUtils.isPremium(currentUser2)) {
+        ActionSheetActionCreators.openLazy(import("../../messages/native/burst_reactions/SuperReactionUpsellActionSheet"), "SuperReactionUpsellActionSheet", {
+          onDismiss: void 0
+        });
+      }
+    }
+    const bestActiveInputForChannelId = getBestActiveInputForChannelId(a0.id);
+    if (bestActiveInputForChannelId != null) {
+      bestActiveInputForChannelId.closeCustomKeyboard();
+    }
+    openEmojiPickerActionSheet({
+      onPressEmoji: function onPressEmoji(a0, a1) {
+        const id = c17140_0.id;
+        const r4 = {
+          burst: a1
+        };
+        if (a0 != null) {
+          const r23 = toReactionEmoji(a0);
+          if (!r4.burst) {
+            triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+          }
+          addReaction(id, c17140_1, r23, MESSAGE, r4);
+        }
+      },
+      channel: a0,
+      pickerIntention: EmojiIntention.REACTION,
+      reactionType: r25 && isPremium ? ReactionTypes.BURST : ReactionTypes.NORMAL,
+      analyticsObject: MESSAGE,
+      messageId: a1
+    });
+  }
+}
+export function handleViewReactions(a0) {
+  const { messageId, channelId, location: location2 = {}, isPoll: _isPoll, emoji, ...rest } = a0;
+  let isPoll = a0.isPoll;
+  const channel = ChannelStore.getChannel(channelId);
+  const page = (channel == null ? void 0 : channel.isPrivate()) ? AnalyticsPages.DM_CHANNEL : AnalyticsPages.GUILD_CHANNEL;
+  const section = (channel == null ? void 0 : channel.isForumLikeChannel()) ? AnalyticsSections.FORUM_CHANNEL_POST : (channel == null ? void 0 : channel.isForumPost()) ? AnalyticsSections.FORUM_CHANNEL_POST : AnalyticsSections.CHANNEL;
+  if (isPoll == null) {
+    const message = MessageStore.getMessage(channelId, messageId);
+    isPoll = (message == null ? void 0 : message.isPoll()) === true;
+  }
+  AppAnalyticsUtils.trackWithMetadata(AnalyticEvents.REACTION_ACTION_SHEET_OPENED, {
+    guild_id: SelectedGuildStore.getGuildId(),
+    channel_id: channelId,
+    location_message_id: messageId,
+    location_message_is_poll: isPoll,
+    location: {
+      page,
+      section,
+      ...location2
+    }
+  });
+  ActionSheetActionCreators.openLazy(import("./MessageReactions"), "MessageReactions", {
+    messageId,
+    channelId,
+    emoji,
+    ...rest
+  });
+}
+export function handleViewPreviewReactions(a0, a1, a2) {
+  ActionSheetActionCreators.openLazy(import("./MessagePreviewReactions"), "MessagePreviewReactions", {
+    messageId: a0,
+    channelId: a1,
+    emoji: a2
+  });
+}
+export { r31 as ADD_REACTION_ICONS };
+export { r44 as ADD_REACTION_ICON_COMPONENTS };
+export function handleRemoveAllReactions(c17141_0, c17141_1) {
+  AlertActionCreators.show({
+    title: intl.string(t.ZbtGBm),
+    children: <Text variant="text-md/normal">
+      {intl.string(t.VpjOCo)}
+    </Text>,
+    cancelText: intl.string(t["ETE/oC"]),
+    confirmText: intl.string(t.oyYWHE),
+    onConfirm: () => removeAllReactions(c17141_0, c17141_1)
+  });
+}

modules/reactions/native/useBurstToggleCoachmark.tsx

@@ -0,0 +1,49 @@
+// Metro module 9351 (f9352).
+import { useMemo } from "react";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { DismissibleContent } from "../../../_bundle/Module1358";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { SuperReactionIcon } from "../../../design/components/Icon/native/redesign/generated/SuperReactionIcon";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { isPremium } from "../../../utils/PremiumUtils";
+import { useSelectedDismissibleContent } from "../../dismissible_content/hooks/useSelectedDismissibleContent";
+import { intl, t } from "../../../intl/index.native";
+import { useCoachmark } from "../../../design/components/Coachmark/native/useCoachmark.native";
+let SUPER_REACTION_TOGGLE_EDUCATION_MOBILE, useStyles;
+const EducationCoachmarkImg = function EducationCoachmarkImg() {
+  return <View style={useStyles().upsellImageContainer}>
+    <SuperReactionIcon color={Module712.colors.WHITE} size="md" />
+  </View>;
+};
+SUPER_REACTION_TOGGLE_EDUCATION_MOBILE = DismissibleContent.SUPER_REACTION_TOGGLE_EDUCATION_MOBILE;
+useStyles = createStyles({
+  upsellImageContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: Module712.radii.round,
+    height: 40,
+    width: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default function useBurstToggleCoachmark(a0) {
+  const r9 = isPremium(useStateFromStores([UserStore], () => UserStore.getCurrentUser())) ? [SUPER_REACTION_TOGGLE_EDUCATION_MOBILE] : [];
+  const [r10, r28] = useSelectedDismissibleContent(r9);
+  let c17170_0 = r10;
+  let c17170_1 = r28;
+  useCoachmark(a0, useMemo(() => ({
+    description: intl.string(t.nyYohm),
+    onDismiss: () => {
+      c17170_1(ContentDismissActionType.UNKNOWN);
+    },
+    position: "bottom",
+    renderImgComponent: () => <EducationCoachmarkImg />,
+    title: intl.string(t.ORK94p),
+    visible: c17170_0 === SUPER_REACTION_TOGGLE_EDUCATION_MOBILE
+  }), [r10, r28]));
+  return r28;
+};

modules/reactions/native/useEmojisForReactionRow.tsx

@@ -0,0 +1,23 @@
+// Metro module 9968 (f9969).
+import { useMemo } from "react";
+import { EmojiIntention } from "../../emojis/EmojiConstants";
+import { useFrequentlyUsedReactionEmojis } from "../../emoji_picker/EmojiPickerUtils";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import EmojiUtils from "../../../utils/EmojiUtils";
+export function useEmojisForReactionRow(a0, a1, a2) {
+  const channel = a0;
+  const frequentlyUsedReactionEmojis = useFrequentlyUsedReactionEmojis(a0.getGuildId());
+  const r28 = Math.floor(Math.min(useWindowDimensions_native().width, a1) / a2);
+  let c17590_2 = r28;
+  return useMemo(() => {
+    const r5 = frequentlyUsedReactionEmojis.filter((frequentlyUsedReactionEmoji) => !EmojiUtils.isEmojiFilteredOrLocked({
+      emoji: frequentlyUsedReactionEmoji,
+      channel,
+      intention: EmojiIntention.REACTION
+    }));
+    while (r5.length < c17590_2) {
+      r5.push(null);
+    }
+    return r5;
+  }, [frequentlyUsedReactionEmojis, a0, r28]).slice(0, r28 - 1);
+}