yeet

modules/icymi/native/AnnouncementMessageRow.tsx

@@ -0,0 +1,125 @@
+// Metro module 15359 (f15360).
+import { memo, useEffect, useCallback } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildStore from "../../../stores/GuildStore";
+import RelationshipStore from "../../../stores/RelationshipStore";
+import UserGuildSettingsStore from "../../../stores/UserGuildSettingsStore";
+import UserStore from "../../../stores/UserStore";
+import { ITEM_PADDING } from "./DesignConstants";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import GuildActionCreators from "../../../actions/GuildActionCreators";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import { openChannelLongPressActionSheet } from "../../channel/native/openChannelLongPressActionSheet";
+import { showLongPressMessageActionSheet } from "../../messages/native/long_press/showLongPressMessageActionSheet";
+import { navigateToPost } from "./ICYMIShared";
+import { useGravityMessage } from "../ICYMIUtils";
+import ICYMICardInCard from "./ICYMICardInCard";
+import { intl, t } from "../../../intl/index.native";
+import SnowflakeUtils from "../../../utils/SnowflakeUtils";
+import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
+import getChannelA11yLabel, { getChannelA11yHint } from "../../channel/getChannelA11yLabel";
+import { MessageRowContent } from "./ICYMIMessageRow";
+import ICYMICardInteractionRow from "./ICYMICardInteractionRow";
+let Component;
+const styles = createICYMIStyles((a0) => ({
+  pressable: {
+    flex: 1,
+    paddingLeft: a0.inset
+  },
+  footer: {
+    marginVertical: a0.margin,
+    gap: Module712.space.PX_8,
+    paddingHorizontal: ITEM_PADDING,
+    marginLeft: a0.inset
+  }
+}));
+Component = memo(function({ unread, message, guild, channel, visible }) {
+  const stateFromStores2 = useStateFromStores([UserGuildSettingsStore], () => UserGuildSettingsStore.isChannelMuted(channel.getGuildId(), channel.id));
+  const r14 = styles();
+  useEffect(() => {
+    if (guild?.id != null) {
+      GuildActionCreators.requestMembersById(guild?.id, message.author.id);
+    }
+  }, [guild?.id, message.author.id]);
+  const callback3 = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(message.id, "announcement", "long_press_channel");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: message.id,
+      itemType: "announcement",
+      actionParameters: {
+        actionGestureType: "long_press",
+        actionTargetElement: "item_header",
+        actionIntentType: "open",
+        actionDestinationType: "channel"
+      }
+    });
+    openChannelLongPressActionSheet(channel.id);
+  }, [channel.id, message.id]);
+  const callback = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(message.id, "announcement", "long_press_message");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: message.id,
+      itemType: "announcement",
+      actionParameters: {
+        actionGestureType: "long_press",
+        actionTargetElement: "item_container",
+        actionIntentType: "open",
+        actionDestinationType: "channel"
+      }
+    });
+    showLongPressMessageActionSheet({
+      channel,
+      message,
+      user: UserStore.getUser(message.author.id)
+    });
+  }, [channel, message]);
+  const callback2 = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(message.id, "announcement", "press_message");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: message.id,
+      itemType: "announcement",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "item_container",
+        actionIntentType: "navigate",
+        actionDestinationType: "channel"
+      }
+    });
+    if (message != null) {
+      ICYMIActionCreators.ackGravityItems([{
+        id: message.id,
+        timestamp: Date.now()
+      }]);
+      navigateToPost(channel.id, guild.id, message.id);
+    }
+  }, [message, channel.id, guild.id]);
+  const gravityMessage = useGravityMessage(message);
+  return <ICYMICardInCard actionLabel={intl.string(t["8P08G9"])} id={message.id} interactionType="announcement" channelId={channel.id} timestamp={SnowflakeUtils.extractTimestamp(message.id)} onHeaderPress={callback2} onHeaderLongPress={callback3} message={gravityMessage} shouldFeatureUser>
+    <PressableHighlight onPress={callback2} onLongPress={callback} accessibilityRole="button" accessibilityLabel={getChannelA11yLabel({
+      channel,
+      unread
+    })} accessibilityHint={getChannelA11yHint({
+      channel,
+      muted: stateFromStores2
+    })} unstable_pressDelay={130} style={r14.pressable}>
+      <MessageRowContent message={message} channel={channel} guild={guild} lineClamp={5} visible={visible} />
+    </PressableHighlight>
+    <View style={r14.footer}>
+      <ICYMICardInteractionRow message={message} channel={channel} guild={guild} backgroundVariant="base" id={message.id} itemType="announcement" />
+    </View>
+  </ICYMICardInCard>;
+});
+export default function AnnouncementMessageRowWrapper(props) {
+  let author;
+  const { unread, message: message2, visible } = props;
+  author = void 0;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(message2.getChannelId()));
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(stateFromStores?.guild_id));
+  const gravityMessage = useGravityMessage(message2);
+  author = gravityMessage?.author;
+  const stateFromStores3 = useStateFromStores([RelationshipStore], () => RelationshipStore.isBlockedOrIgnored(author?.id));
+  return stateFromStores == null ? null : stateFromStores2 == null ? null : gravityMessage == null ? null : author == null ? null : stateFromStores3 ? null : <Component unread={unread} message={gravityMessage} channel={stateFromStores} guild={stateFromStores2} visible={visible} />;
+};

modules/icymi/native/CardHeightMeasurer.tsx

@@ -0,0 +1,15 @@
+// Metro module 15390 (f15391).
+import { memo, useContext, useCallback } from "react";
+import { View } from "react-native";
+import { ICYMIContext } from "./ICYMIContext";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+const r23 = memo(function({ itemId, children }) {
+  const width = useContext(ICYMIContext).width;
+  return <View onLayout={useCallback((a0) => {
+    ICYMIActionCreators.setCardHeight(itemId, a0.nativeEvent.layout.height);
+  }, [itemId])} pointerEvents="box-none" style={{
+    width,
+    alignSelf: "center"
+  }}>{children}</View>;
+});
+export { r23 as CardHeightMeasurer };

modules/icymi/native/CaughtUpRow.tsx

@@ -0,0 +1,238 @@
+// Metro module 15385 (f15386).
+import { useEffect, useState, useCallback } from "react";
+import { View } from "react-native";
+import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import { Text } from "../../../design/components/Text/native/Text";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import { maybeFetchGuildDiscoveryCategories } from "../../global_discovery_servers/GuildDiscoveryCategoryActionCreators";
+import { pushICYMIInfoModal } from "./NativeICYMIUtils";
+import { getRootNavigationRef } from "../../main_tabs_v2/RootNavigationRef.native";
+import * as _timing from "../../../design/animation/reanimated/timing/timing";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { FlashIcon } from "../../../design/components/Icon/native/redesign/generated/FlashIcon";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Separator } from "./ICYMIShared";
+import Module4611 from "../../../_bundle/Module4611";
+import { VerticalGradient } from "../../../ConstantsIOS";
+import Module689 from "../../../_bundle/Module689";
+function $mk116936($env) {
+  return () => {
+    pushICYMIInfoModal({
+      extendedOnboarding: true,
+      skipIntro: true
+    });
+    setTimeout($mk118478($env), 500);
+  };
+}
+function $mk118478($env) {
+  return () => {
+    (0, setState)(false);
+  };
+}
+let __initData, __initData2, __initData3;
+const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Text);
+const styles = createICYMIStyles((a0) => ({
+  container: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: Module712.space.PX_32
+  },
+  textContainer: {
+    marginHorizontal: a0.margin,
+    marginBottom: Module712.space.PX_24
+  },
+  recommendedGuildsContainer: {
+    flex: 1,
+    marginBottom: Module712.space.PX_24
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: Module712.space.PX_24
+  },
+  icon: {
+    height: 40,
+    width: 40
+  },
+  headerText: {
+    alignSelf: "center",
+    marginBottom: Module712.space.PX_8,
+    textAlign: "center"
+  },
+  subtitleText: {
+    alignSelf: "center",
+    textAlign: "center"
+  },
+  buttonContainer: {
+    flex: 1,
+    width: "100%",
+    gap: Module712.space.PX_12,
+    paddingHorizontal: a0.margin
+  },
+  gradient: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 150
+  }
+}));
+__initData = {
+  code: "function CaughtUpRowTsx1(){const{visibleSharedValue,withTiming,Easing}=this.__closure;return{transform:[{translateY:visibleSharedValue.get()?withTiming(0,{duration:250,easing:Easing.bezier(0.5,1.8,0.5,1)}):-80}],opacity:visibleSharedValue.get()?withTiming(1,{duration:100,easing:Easing.out(Easing.bezierFn(0.33,1,0.68,1))}):0};}"
+};
+__initData2 = {
+  code: "function CaughtUpRowTsx2(){const{visibleSharedValue,withDelay,withSequence,withTiming,Easing}=this.__closure;return{transform:[{translateY:visibleSharedValue.get()?withDelay(80,withSequence(withTiming(8,{duration:100,easing:Easing.inOut(Easing.ease)}),withTiming(0,{duration:300,easing:Easing.out(Easing.ease)}))):0}]};}"
+};
+__initData3 = {
+  code: "function CaughtUpRowTsx3(){const{visibleSharedValue,withDelay,withSequence,withTiming,Easing}=this.__closure;return{transform:[{translateY:visibleSharedValue.get()?withDelay(115,withSequence(withTiming(8,{duration:150,easing:Easing.inOut(Easing.ease)}),withTiming(0,{duration:300,easing:Easing.out(Easing.ease)}))):0}]};}"
+};
+export default function ExploreServersRow(props) {
+  let setState;
+  const visible = props.visible;
+  setState = void 0;
+  const r10 = styles();
+  const sharedValue = useSharedValue(false);
+  useEffect(() => {
+    if (visible ? sharedValue.get() !== visible : visible) {
+      setTimeout(() => {
+        sharedValue.set(true);
+      }, 500);
+    }
+  }, [visible, sharedValue]);
+  let loading;
+  [loading, setState] = useState(false);
+  const callback2 = useCallback(async () => {
+    let c28014_0;
+    c28014_0 = void 0;
+    setState(true);
+    ICYMIActionCreators.itemInteracted("caught_up", "caught_up", "press_explore");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: "caught_up",
+      itemType: "caught_up",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "browse_servers_button",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    await maybeFetchGuildDiscoveryCategories();
+    setTimeout($mk116936(c28014_0), 100);
+  }, []);
+  const callback = useCallback(() => {
+    ICYMIActionCreators.itemInteracted("caught_up", "caught_up", "press_home");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: "caught_up",
+      itemType: "caught_up",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "back_to_home_button",
+        actionIntentType: "navigate",
+        actionDestinationType: "guild_home"
+      }
+    });
+    const rootNavigationRef = getRootNavigationRef();
+    if (rootNavigationRef != null) {
+      rootNavigationRef.navigate("tabs", {
+        screen: "guilds"
+      });
+    }
+  }, []);
+  const E = function E() {
+    return {
+      transform: [{
+        translateY: sharedValue.get() ? _timing.withTiming(0, {
+          duration: 250,
+          easing: _ReanimatedRexport.Easing.bezier(0.5, 1.8, 0.5, 1)
+        }) : -80
+      }],
+      opacity: sharedValue.get() ? _timing.withTiming(1, {
+        duration: 100,
+        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.bezierFn(0.33, 1, 0.68, 1))
+      }) : 0
+    };
+  };
+  E.__closure = {
+    visibleSharedValue: sharedValue,
+    withTiming: _timing.withTiming,
+    Easing: _ReanimatedRexport.Easing
+  };
+  E.__workletHash = 6575188656069;
+  E.__initData = __initData;
+  const animatedStyle3 = useAnimatedStyle(E);
+  const b = function b() {
+    return {
+      transform: [{
+        translateY: sharedValue.get() ? _ReanimatedRexport.withDelay(80, _ReanimatedRexport.withSequence(_timing.withTiming(8, {
+          duration: 100,
+          easing: _ReanimatedRexport.Easing.inOut(_ReanimatedRexport.Easing.ease)
+        }), _timing.withTiming(0, {
+          duration: 300,
+          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+        }))) : 0
+      }]
+    };
+  };
+  b.__closure = {
+    visibleSharedValue: sharedValue,
+    withDelay: _ReanimatedRexport.withDelay,
+    withSequence: _ReanimatedRexport.withSequence,
+    withTiming: _timing.withTiming,
+    Easing: _ReanimatedRexport.Easing
+  };
+  b.__workletHash = 469742746264;
+  b.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(b);
+  const x = function x() {
+    return {
+      transform: [{
+        translateY: sharedValue.get() ? _ReanimatedRexport.withDelay(115, _ReanimatedRexport.withSequence(_timing.withTiming(8, {
+          duration: 150,
+          easing: _ReanimatedRexport.Easing.inOut(_ReanimatedRexport.Easing.ease)
+        }), _timing.withTiming(0, {
+          duration: 300,
+          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+        }))) : 0
+      }]
+    };
+  };
+  x.__closure = {
+    visibleSharedValue: sharedValue,
+    withDelay: _ReanimatedRexport.withDelay,
+    withSequence: _ReanimatedRexport.withSequence,
+    withTiming: _timing.withTiming,
+    Easing: _ReanimatedRexport.Easing
+  };
+  x.__workletHash = 14933607481025;
+  x.__initData = __initData3;
+  const animatedStyle = useAnimatedStyle(x);
+  const token = useToken(Module712.colors.BACKGROUND_BRAND);
+  return <View>
+    <View style={r10.container}>
+      <View style={r10.textContainer}>
+        <ReanimatedRexport.View style={[r10.iconWrapper, animatedStyle3]}>
+          <FlashIcon size="custom" style={r10.icon} color="background-brand" />
+        </ReanimatedRexport.View>
+        <AnimatedComponent variant="heading-lg/semibold" color="mobile-text-heading-primary" style={[r10.headerText, animatedStyle2]}>
+          {intl.string(t.xjxffq)}
+        </AnimatedComponent>
+        <AnimatedComponent variant="text-md/normal" color="text-default" style={[r10.subtitleText, animatedStyle]}>
+          {intl.string(t.sAApb0)}
+        </AnimatedComponent>
+      </View>
+      <View style={r10.buttonContainer}>
+        <Button size="md" text={intl.string(t.lNJYV8)} grow variant="primary" onPress={callback2} loading={loading} />
+        <Button size="md" text={intl.string(t.AGrUbj)} grow variant="secondary" onPress={callback} />
+      </View>
+    </View>
+    <Separator />
+    <Module4611 style={r10.gradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={[Module689(token).alpha(0.2).hex(), Module689(token).alpha(0).hex()]} pointerEvents="none" />
+  </View>;
+};

modules/icymi/native/ContentInventoryEntryRow.tsx

@@ -0,0 +1,24 @@
+// Metro module 15370 (f15371).
+import RelationshipStore from "../../../stores/RelationshipStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { ContentInventoryEntryType } from "../../../_bundle/Module7909";
+import GamingLikeEntryRow from "./content_inventory/GamingLikeEntryRow";
+import CustomStatusEntryRow from "./content_inventory/CustomStatusEntryRow";
+export default function ContentInventoryEntryRow(props) {
+  const { content, renderForScreenshot = false } = props;
+  let visible = props.visible;
+  if (useStateFromStores([RelationshipStore], () => RelationshipStore.isBlockedOrIgnored(content.author_id))) {
+    return null;
+  }
+  const content_type = content.content_type;
+  if (ContentInventoryEntryType.TOP_GAME !== content_type && ContentInventoryEntryType.PLAYED_GAME !== content_type) {
+    if (ContentInventoryEntryType.CUSTOM_STATUS === content_type) {
+      if (visible == null) {
+        visible = false;
+      }
+      return <CustomStatusEntryRow content={content} renderForScreenshot={renderForScreenshot} visible={visible} />;
+    }
+    return null;
+  }
+  return <GamingLikeEntryRow content={content} renderForScreenshot={renderForScreenshot} />;
+};

modules/icymi/native/DesignConstants.tsx

@@ -0,0 +1,4 @@
+// Metro module 15360 (f15361).
+import Module712 from "../../../_bundle/Module712";
+const PX_12 = Module712.space.PX_12;
+export { PX_12 as ITEM_PADDING };

modules/icymi/native/ICYMI.tsx

@@ -0,0 +1,474 @@
+// Metro module 15320 (f15321).
+import * as Module19 from "react";
+import { useMemo, useLayoutEffect, useEffect, useRef, useCallback } from "react";
+import { RefreshControl, View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import AuthenticationStore from "../../../stores/AuthenticationStore";
+import GuildStore from "../../../stores/GuildStore";
+import ICYMIFiltersStore from "../ICYMIFiltersStore";
+import ICYMIStore from "../ICYMIStore";
+import { NUM_GUILDS_EXTENDED_ONBOARDING } from "../ICYMIConstants";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { createICYMIStyles } from "./createICYMIStyles";
+import { IconButton } from "../../../design/components/Button/native/IconButton.native";
+import { FiltersHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/FiltersHorizontalIcon";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { CircleInformationIcon } from "../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
+import { pushICYMIInfoModal } from "./NativeICYMIUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import useIsWindowLarge from "../../screen/native/useIsWindowLarge";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import ThemedGradient from "../../client_themes/native/ThemedGradient";
+import { OverlayOpacity } from "../../client_themes/native/ClientThemesUtils";
+import * as _Pressables from "../../../design/void/Pressables/native/Pressables";
+import { goBack } from "../../main_tabs_v2/native/tabs/notifications/Notifications";
+import { LeftBackIconWithBadge } from "../../main_tabs_v2/native/shared_components/BackIconWithBadge";
+import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import { hydrateNextPage, itemToType } from "../ICYMIUtils";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import { useIsFocused, useScrollToTop } from "../../../_bundle/Module1481";
+import { trackAppUIViewed } from "../../tti_analytics/native/TTIAnalyticsUtils";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useICYMITabBadge from "../useICYMITabBadge";
+import { useSharedICYMILogic } from "../useSharedICYMILogic";
+import { useICYMIEmptyLoadingAnalytics } from "../useICYMIEmptyLoadingAnalytics";
+import { useGetDismissibleContent } from "../../dismissible_content/useGetDismissibleContent";
+import { DismissibleContent } from "../../../_bundle/Module1358";
+import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
+import { GravityICYMIDoubleTapBehavior } from "../ICYMITypes";
+import { showForLaterModal } from "../../saved_messages/native/showForLaterModal";
+import { SavedMessageSortTypes } from "../../saved_messages/SavedMessagesTypes";
+import { useMobileQuestDockHeight } from "../../quests/native/QuestHooks.native";
+import { ChannelTypes } from "../../../_bundle/Module692";
+import AnnouncementMessageRow from "./AnnouncementMessageRow";
+import ICYMIMessageRow from "./ICYMIMessageRow";
+import ContentInventoryEntryRow from "./ContentInventoryEntryRow";
+import { ICYMILoading } from "./ICYMILoading";
+import { ICYMIBottomLoading } from "./ICYMIBottomLoading";
+import CaughtUpRow from "./CaughtUpRow";
+import ICYMIGuildEventRow from "./ICYMIGuildEventRow";
+import { ICYMIServerRecommendationRow } from "./ICYMIServerRecommendationRow";
+import ICYMIHeader from "./ICYMIHeader";
+import { ICYMIForumThreadRow } from "./ICYMIForumThreadRow";
+import { CardHeightMeasurer } from "./CardHeightMeasurer";
+import { useClientThemesOverride } from "../../client_themes/native/ClientThemesOverrides";
+import NewContentPill from "./NewContentPill";
+import { FlashList } from "../../../_bundle/noop_6676";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { TTIFirstContentfulPaint } from "../../tti_analytics/native/TTIFirstContentfulPaint";
+import useColorThemeBackground from "../../client_themes/native/useColorThemeBackground";
+import AppFreezer from "../../panels/morphable/native/AppFreezer";
+import { ICYMIContextProvider } from "./ICYMIContext";
+import { ThemeContextProvider } from "../../../_bundle/Module3901";
+let useStyles, styles, InfoButton, ICYMIHeaderTextWrapper, Component, handleEndReached, ICYMI, keyExtractor;
+const SettingsButton = function SettingsButton() {
+  return <IconButton accessibilityLabel="button" variant="tertiary" size="sm" icon={<FiltersHorizontalIcon size="sm" />} onPress={() => {
+    ICYMIActionCreators.itemInteracted("filters_button", "filters_button", "press_info_button");
+    ICYMIActionCreators.feedPageActioned({
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "settings_button",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    ActionSheetActionCreators.openLazy(import("./ICYMISettingsActionSheet"), "ICYMISettingsActionSheet", {});
+  }} />;
+};
+InfoButton = function InfoButton() {
+  return <IconButton accessibilityLabel="button" variant="tertiary" size="sm" icon={<CircleInformationIcon size="sm" />} onPress={() => {
+    ICYMIActionCreators.itemInteracted("info_button", "info_button", "press_info_button");
+    ICYMIActionCreators.feedPageActioned({
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "info_button",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    pushICYMIInfoModal({
+      extendedOnboarding: true
+    });
+  }} />;
+};
+ICYMIHeaderTextWrapper = function ICYMIHeaderTextWrapper() {
+  return <View style={styles().headerText}>
+    {useMemo(() => <>
+      <Text color="mobile-text-heading-primary" variant="heading-lg/bold" maxFontSizeMultiplier={1.75} accessibilityRole="header">
+        {intl.string(t.SY4sdZ)}
+      </Text>
+      <Text color="text-brand" variant="text-xs/bold" style={{
+        marginTop: 4
+      }}>
+        {intl.string(t.Ac2OZA)}
+      </Text>
+    </>, [])}
+  </View>;
+};
+handleEndReached = function handleEndReached() {
+  hydrateNextPage();
+};
+ICYMI = function ICYMI(props) {
+  let stateFromStores, visibleItemIds, endVisible, handleOnRefresh, c21866_5, c21866_6, stateFromStores2, ref, ref2, stateFromStores3, callback;
+  const inNestedNavigator = props.inNestedNavigator;
+  stateFromStores = void 0;
+  visibleItemIds = void 0;
+  endVisible = void 0;
+  handleOnRefresh = void 0;
+  c21866_5 = void 0;
+  c21866_6 = void 0;
+  stateFromStores2 = void 0;
+  ref = void 0;
+  ref2 = void 0;
+  stateFromStores3 = void 0;
+  callback = void 0;
+  const r17 = styles();
+  const windowDimensions_native = useWindowDimensions_native();
+  const { height, width } = windowDimensions_native;
+  const top = useSafeAreaInsets_native().top;
+  const isFocused = useIsFocused();
+  useLayoutEffect(() => {
+    trackAppUIViewed();
+  });
+  stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const stateFromStores4 = useStateFromStores([ICYMIStore], () => ICYMIStore.notificationItem(), []);
+  const showDot = useICYMITabBadge().showDot;
+  useEffect(() => {
+    ICYMIActionCreators.setTabFocused(isFocused);
+  }, [isFocused]);
+  const sharedICYMILogic = useSharedICYMILogic({
+    showDot,
+    notificationItem: stateFromStores4
+  });
+  const { data, loading, version } = sharedICYMILogic;
+  visibleItemIds = sharedICYMILogic.visibleItemIds;
+  endVisible = sharedICYMILogic.endVisible;
+  const isRefreshing = sharedICYMILogic.isRefreshing;
+  handleOnRefresh = sharedICYMILogic.handleOnRefresh;
+  const { stickyHeaderIndices, viewabilityConfigCallbackPairs } = sharedICYMILogic;
+  useICYMIEmptyLoadingAnalytics(loading, isFocused);
+  const [r24, r87] = useGetDismissibleContent([DismissibleContent.ICYMI_ALPHA_UPSELL]);
+  c21866_5 = r24;
+  c21866_6 = r87;
+  stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuildCount());
+  useEffect(() => {
+    if (c21866_5 != null) {
+      pushICYMIInfoModal({
+        extendedOnboarding: stateFromStores2 <= NUM_GUILDS_EXTENDED_ONBOARDING
+      });
+      c21866_6(ContentDismissActionType.USER_DISMISS);
+    }
+  }, [r24, r87, stateFromStores2]);
+  useEffect(() => {
+    let r6 = endVisible;
+    if (endVisible) {
+      r6 = ICYMIStore.hasOpenedEnoughTimes();
+    }
+    if (r6) {
+      ActionSheetActionCreators.openLazy(import("./ICYMIFeedbackSheet"), "ICYMIFeedbackSheet", {});
+    }
+  }, [endVisible]);
+  ref = useRef(null);
+  ref2 = useRef({
+    scrollToTop: () => {
+      const current = ref.current;
+      if (current != null) {
+        current.scrollToOffset({
+          offset: 0,
+          animated: !stateFromStores
+        });
+      }
+    }
+  });
+  useScrollToTop(ref2);
+  stateFromStores3 = useStateFromStores([ICYMIFiltersStore], () => ICYMIFiltersStore.getDoubleTapBehavior());
+  useEffect(() => {
+    if (stateFromStores3 === GravityICYMIDoubleTapBehavior.DEFAULT) {
+      ref2.current = {
+        scrollToTop: () => {
+          const current = ref.current;
+          if (current != null) {
+            current.scrollToOffset({
+              offset: 0,
+              animated: !stateFromStores
+            });
+          }
+        }
+      };
+    } else {
+      ref2.current = {
+        scrollToTop: () => {
+          showForLaterModal(SavedMessageSortTypes.BOOKMARK);
+        }
+      };
+    }
+  }, [stateFromStores3, useNavigation(), stateFromStores]);
+  callback = useCallback(() => {
+    const current = ref.current;
+    if (current != null) {
+      current.scrollToOffset({
+        offset: 0,
+        animated: !stateFromStores
+      });
+    }
+  }, [ref, stateFromStores]);
+  const mobileQuestDockHeight = useMobileQuestDockHeight();
+  const callback2 = useCallback(({ item }) => {
+    let r37;
+    const kind = item.data.kind;
+    if (kind === "message") {
+      r37 = item.channelType === ChannelTypes.GUILD_ANNOUNCEMENT ? <AnnouncementMessageRow unread={item.unread} message={item.data.message} visible={visibleItemIds.find((visibleItemId) => visibleItemId.item.id === item.id) != null} /> : <ICYMIMessageRow message={item.data.message} messageContext={item.data.messageContext} visible={visibleItemIds.find((visibleItemId) => visibleItemId.item.id === item.id) != null} />;
+    } else if (kind === "contentInventory") {
+      r37 = <ContentInventoryEntryRow visible={visibleItemIds.find((visibleItemId) => visibleItemId.item.id === item.id) != null} content={item.data.content} />;
+    } else {
+      if (kind === "loading") {
+        return <ICYMILoading />;
+      }
+      if (kind === "bottomLoading") {
+        return <ICYMIBottomLoading />;
+      }
+      if (kind === "end") {
+        return <CaughtUpRow visible={endVisible} />;
+      }
+      if (kind === "guildEvent") {
+        r37 = <ICYMIGuildEventRow eventId={item.data.eventId} />;
+      } else if (kind === "recommendedGuilds") {
+        r37 = <ICYMIServerRecommendationRow />;
+      } else {
+        if (kind === "icymiHeader") {
+          return <ICYMIHeader />;
+        }
+        if (kind !== "forumThread") {
+          return null;
+        }
+        r37 = <ICYMIForumThreadRow message={item.data.message} channel={item.data.threadChannel} visible={visibleItemIds.find((visibleItemId) => visibleItemId.item.id === item.id) != null} />;
+      }
+    }
+    return <CardHeightMeasurer itemId={item.id}>{r37}</CardHeightMeasurer>;
+  }, [visibleItemIds, endVisible]);
+  const memo = useMemo(() => ({
+    backgroundColor: "transparent"
+  }), []);
+  const clientThemesOverride = useClientThemesOverride();
+  const stateFromStores5 = useStateFromStores([ICYMIStore], () => ICYMIStore.hasNewContent(), []);
+  const r162 = [<Component inNestedNavigator={inNestedNavigator} />, ,];
+  const r176 = [<NewContentPill onPress={() => {
+    ICYMIActionCreators.itemInteracted("refresh_button", "refresh_button", "press_refresh_button");
+    ICYMIActionCreators.feedPageActioned({
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "new_content_pill",
+        actionIntentType: "refresh",
+        actionDestinationType: null
+      }
+    });
+    handleOnRefresh();
+    callback();
+  }} isRefreshing={isRefreshing} />, , ,];
+  const props2 = {
+    ref,
+    scrollEnabled: !loading,
+    extraData: {
+      endVisible
+    },
+    contentContainerStyle: memo,
+    accessibilityLabel: intl.string(t.OIgYlQ),
+    data,
+    refreshing: isRefreshing,
+    refreshControl: null,
+    onEndReachedThreshold: 3,
+    onEndReached: null,
+    keyExtractor: null,
+    renderItem: null,
+    getItemType: null,
+    drawDistance: 100,
+    stickyHeaderIndices: null,
+    viewabilityConfigCallbackPairs: null
+  };
+  let r196 = 1;
+  props2.refreshControl = <RefreshControl onRefresh={handleOnRefresh} refreshing={isRefreshing} tintColor={r17.refreshing.color} style={{
+    opacity: stateFromStores5 ? 0 : 1
+  }} />;
+  props2.onEndReached = handleEndReached;
+  props2.keyExtractor = keyExtractor;
+  props2.renderItem = callback2;
+  props2.getItemType = itemToType;
+  isAndroid();
+  props2.stickyHeaderIndices = stickyHeaderIndices;
+  props2.viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs;
+  if (!loading) {
+    r196 = version;
+  }
+  r176[1] = <FlashList key={`Version-${r196}`} {...props2} />;
+  r176[2] = <TTIFirstContentfulPaint label="icymi" />;
+  r162[1] = <View style={[r17.flashListWrapper, {
+    height: height - top - 32 - 24 - mobileQuestDockHeight,
+    width,
+    marginHorizontal: "auto"
+  }, clientThemesOverride]}>{r176}</View>;
+  return <View style={[r17.containerInPanels, r17.containerBackground]}>{r162}</View>;
+};
+keyExtractor = function keyExtractor(a0) {
+  return a0.id;
+};
+useStyles = createStyles((a0) => ({
+  containerOuterTablet: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    paddingHorizontal: Module712.space.PX_8,
+    overflow: "hidden",
+    flex: 1,
+    paddingTop: a0
+  }
+}));
+styles = createICYMIStyles((a0) => ({
+  container: {
+    flex: 1,
+    flexShrink: 1,
+    flexGrow: 1
+  },
+  containerInPanels: {
+    flex: 1,
+    flexShrink: 1,
+    flexGrow: 1,
+    overflow: "hidden",
+    borderTopLeftRadius: Module712.radii.sm,
+    borderTopRightRadius: Module712.radii.sm
+  },
+  containerBackground: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  flashListWrapper: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    minHeight: 2,
+    flex: 1
+  },
+  refreshing: {
+    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  header: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    position: "relative",
+    overflow: "hidden",
+    width: "100%"
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  headerClose: {
+    marginRight: Module712.space.PX_16,
+    height: Module712.space.PX_32,
+    width: Module712.space.PX_32,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: Module712.radii.lg
+  },
+  headerTitle: {
+    height: 56,
+    marginHorizontal: a0.margin,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  headerText: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_12
+  },
+  notificationBadge: {
+    height: 18,
+    width: 18,
+    borderRadius: Module712.radii.round
+  },
+  loading: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: Module712.space.PX_96
+  },
+  headerBorder: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    height: 1
+  }
+}));
+Component = Module19.memo(function({ inNestedNavigator }) {
+  let r43, PressableOpacity;
+  const r9 = styles();
+  const isWindowLarge = useIsWindowLarge();
+  const r38 = [<ThemedGradient absolute wide tall mix mixAmount={{
+    dark: OverlayOpacity.LEVEL_7,
+    light: OverlayOpacity.LEVEL_8
+  }} />, , ,];
+  if (!isWindowLarge) {
+    r43 = null;
+    if (inNestedNavigator) {
+      PressableOpacity = _Pressables.PressableOpacity;
+      r43 = <PressableOpacity style={r9.headerClose} accessibilityLabel={intl.string(t["13/7kX"])} onPress={goBack}>
+        {inNestedNavigator ? <LeftBackIconWithBadge includeNotificationsCount /> : <XSmallIcon color="interactive-text-default" />}
+      </PressableOpacity>;
+    }
+  } else {
+    PressableOpacity = _Pressables.PressableOpacity;
+    r43 = <PressableOpacity style={r9.headerClose} accessibilityLabel={intl.string(t["13/7kX"])} onPress={goBack}>
+      {inNestedNavigator ? <LeftBackIconWithBadge includeNotificationsCount /> : <XSmallIcon color="interactive-text-default" />}
+    </PressableOpacity>;
+  }
+  r38[1] = <View style={r9.headerTitle}>
+    <View style={r9.headerLeft}>
+      {r43}
+      <ICYMIHeaderTextWrapper />
+    </View>
+    <View style={r9.headerActions}>
+      <InfoButton />
+      <SettingsButton />
+    </View>
+  </View>;
+  r38[2] = <View style={r9.headerBorder} />;
+  return <SafeAreaPaddingView top={!isWindowLarge} style={r9.header}>{r38}</SafeAreaPaddingView>;
+});
+export function ICYMITab(props) {
+  let c21867_0, styles2;
+  const route = props.route;
+  c21867_0 = void 0;
+  styles2 = void 0;
+  const colorThemeBackground = useColorThemeBackground();
+  const stateFromStores4 = useStateFromStores([AuthenticationStore], () => AuthenticationStore.getId());
+  const isWindowLarge = useIsWindowLarge();
+  c21867_0 = isWindowLarge;
+  const top = useSafeAreaInsets_native().top;
+  const inNestedNavigator = route == null ? void 0 : route.params?.inNestedNavigator;
+  styles2 = useStyles(top);
+  const memo = useMemo(() => c21867_0 ? styles2.containerOuterTablet : void 0, [isWindowLarge, styles2.containerOuterTablet]);
+  return <AppFreezer>
+    <ICYMIContextProvider>
+      {isWindowLarge ? <View {...isWindowLarge ? {
+        style: memo
+      } : {}}>
+        <ThemedGradient absolute />
+        <ThemeContextProvider gradient={colorThemeBackground}>
+          <ICYMI key={`${stateFromStores4}`} inNestedNavigator={inNestedNavigator} />
+        </ThemeContextProvider>
+      </View> : <Module19.Fragment {...isWindowLarge ? {
+        style: memo
+      } : {}}>
+        <ThemedGradient absolute />
+        <ThemeContextProvider gradient={colorThemeBackground}>
+          <ICYMI key={`${stateFromStores4}`} inNestedNavigator={inNestedNavigator} />
+        </ThemeContextProvider>
+      </Module19.Fragment>}
+    </ICYMIContextProvider>
+  </AppFreezer>;
+}

modules/icymi/native/ICYMIBottomLoading.tsx

@@ -0,0 +1,17 @@
+// Metro module 15384 (f15385).
+import { ActivityIndicator, View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+const useStyles = createStyles(() => ({
+  container: {
+    paddingTop: Module712.space.PX_8,
+    paddingBottom: Module712.space.PX_24,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+export function ICYMIBottomLoading() {
+  return <View style={useStyles().container}>
+    <ActivityIndicator size="small" />
+  </View>;
+}

modules/icymi/native/ICYMICardInCard.tsx

@@ -0,0 +1,238 @@
+// Metro module 15363 (f15364).
+import { useMemo, useCallback } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import GuildStore from "../../../stores/GuildStore";
+import { DEFAULT_ROLE_COLOR_HEX } from "../../../Constants";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
+import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+import { useFontScale } from "../../screen/native/useFontScale";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useDisplayNameStyles from "../../display_name_styles/hooks/useDisplayNameStyles";
+import { useDisplayNameStylesFont } from "../../display_name_styles/native/useDisplayNameStylesFont";
+import { useName } from "../../../utils/NicknameUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import useChannelName from "../../channel/useChannelName";
+import { getIconForChannel } from "./util/getIconForChannel";
+import { intl, t } from "../../../intl/index.native";
+import { TextIcon } from "../../../design/components/Icon/native/redesign/generated/TextIcon";
+import { openDetailsActionSheet } from "./util/openDetailsActionSheet";
+import { PressableHighlight, PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { getRelativeTimestamp } from "../../notification_center/NotificationCenterUtils";
+import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
+let styles;
+const CutoutGuildIconWithUserCustom = function CutoutGuildIconWithUserCustom(props) {
+  const { guild, author } = props;
+  return <View style={{
+    width: 40,
+    height: 40
+  }}>
+    <ClipView cutouts={[{
+      shape: CutoutShape.Circle,
+      x: 18,
+      y: 18,
+      size: 24
+    }]}>
+      <GuildIcon guild={guild} size={GuildIconSizes.SMALL_32} />
+    </ClipView>
+    <Avatar animate style={styles().authorAvatar} guildId={guild.id} user={author} size={AvatarSizes.XSMALL_20} />
+  </View>;
+};
+styles = createICYMIStyles((a0) => ({
+  container: {
+    marginTop: a0.margin
+  },
+  content: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  channelNameAndAccessory: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: Module712.space.PX_4,
+    marginHorizontal: a0.margin
+  },
+  channelNameAndAccessoryLarge: {
+    flexDirection: "column",
+    paddingBottom: Module712.space.PX_4,
+    marginHorizontal: a0.margin
+  },
+  header: {
+    flexDirection: "row",
+    flexGrow: 1
+  },
+  headerInfo: {
+    flexGrow: 1,
+    flexShrink: 1,
+    marginLeft: Module712.space.PX_12
+  },
+  title: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 2
+  },
+  titleLeft: {
+    flexShrink: 1,
+    flexGrow: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  subTitleContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    borderRadius: Module712.radii.sm
+  },
+  subtitle: {
+    flexShrink: 1,
+    flexGrow: 0,
+    width: "100%"
+  },
+  genContentSubtitle: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2
+  },
+  genContentSubtitleChannel: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    flex: 1
+  },
+  subtitleTrailing: {
+    paddingVertical: 1
+  },
+  separator: {
+    height: 1,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  normalContent: {
+    borderBottomWidth: 1,
+    borderBottomColor: Module712.colors.BORDER_STRONG,
+    flexShrink: 0
+  },
+  authorAvatar: {
+    position: "absolute",
+    right: 0,
+    bottom: 0
+  }
+}));
+export default function ICYMICardInCard(props) {
+  let guildId, stateFromStores2, stateFromStores3, displayNameStylesFont, name, children;
+  const { children: children2, message, actionLabel, timestamp, id, interactionType, onHeaderPress, onHeaderLongPress, channelId, guildId: guildId2, hideTimestamp = false, shouldFeatureUser = false } = props;
+  let c21906_6 = shouldFeatureUser;
+  guildId = void 0;
+  stateFromStores2 = void 0;
+  stateFromStores3 = void 0;
+  displayNameStylesFont = void 0;
+  name = void 0;
+  children = void 0;
+  const r10 = styles();
+  let c21906_7 = r10;
+  const fontScale = useFontScale();
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]);
+  let r30 = stateFromStores?.guild_id;
+  if (r30 == null) {
+    r30 = guildId2;
+  }
+  guildId = r30;
+  stateFromStores2 = useStateFromStores([GuildStore], () => guildId != null ? GuildStore.getGuild(guildId) : null, [guildId]);
+  stateFromStores3 = useStateFromStores([GuildMemberStore], () => c21906_6 ? guildId != null ? (message == null ? void 0 : message.author.id) != null ? GuildMemberStore.getMember(guildId, message.author.id) : null : null : null, [shouldFeatureUser, guildId, message]);
+  displayNameStylesFont = useDisplayNameStylesFont({
+    displayNameStyles: useDisplayNameStyles({
+      userId: message == null ? void 0 : message.author?.id
+    })
+  });
+  const name2 = useName(guildId, stateFromStores?.id, message?.author);
+  name = shouldFeatureUser ? message?.author != null ? guildId != null ? stateFromStores != null ? name2 : null : null : null : null;
+  const memo = useMemo(() => stateFromStores2 == null ? null : c21906_6 ? message?.author != null ? <CutoutGuildIconWithUserCustom guild={stateFromStores2} author={message.author} /> : <GuildIcon guild={stateFromStores2} size={GuildIconSizes.NORMAL} /> : <GuildIcon guild={stateFromStores2} size={GuildIconSizes.NORMAL} />, [stateFromStores2, shouldFeatureUser, message?.author]);
+  const memo2 = useMemo(() => stateFromStores2 != null ? <Text key={stateFromStores2.id} style={{
+    maxWidth: 225
+  }} lineClamp={1} variant="text-md/semibold" color="mobile-text-heading-primary">{stateFromStores2.name}</Text> : null, [stateFromStores2]);
+  children = useChannelName(stateFromStores);
+  const memo3 = useMemo(() => {
+    if (c21906_6 && message?.author != null && guildId != null && stateFromStores != null && name != null) {
+      let color = stateFromStores3?.colorString;
+      if (color == null) {
+        color = DEFAULT_ROLE_COLOR_HEX;
+      }
+      const IconForChannel = getIconForChannel(stateFromStores);
+      return <View style={c21906_7.genContentSubtitle}>
+        <Text variant="text-sm/semibold" style={[{
+          color
+        }, displayNameStylesFont != null ? {
+          fontFamily: displayNameStylesFont
+        } : void 0]}>
+          {name.length > 20 ? `${name.slice(0, 17)}...` : name}
+        </Text>
+        <Text variant="text-sm/medium" color="text-default">
+          {intl.string(t.CHUAYk)}
+        </Text>
+        <View style={c21906_7.genContentSubtitleChannel}>
+          <IconForChannel size="xs" color="text-default" />
+          <Text variant="text-sm/medium" color="text-default" onPress={onHeaderPress} style={{
+            flex: 1
+          }} lineClamp={1} ellipsizeMode="tail">{children}</Text>
+        </View>
+      </View>;
+    }
+    const Component = stateFromStores != null ? getIconForChannel(stateFromStores) : TextIcon;
+    return <View style={c21906_7.genContentSubtitle}>
+      <Text variant="text-sm/medium" color="text-default">{actionLabel}</Text>
+      {stateFromStores != null ? <>
+        <Text variant="text-sm/medium" color="text-default">
+          {intl.string(t.CHUAYk)}
+        </Text>
+        <View style={c21906_7.genContentSubtitleChannel}>
+          <Component size="xs" color="text-default" />
+          <Text variant="text-sm/medium" color="text-default" onPress={onHeaderPress} style={{
+            flex: 1
+          }} lineClamp={1} ellipsizeMode="tail">{children}</Text>
+        </View>
+      </> : null}
+    </View>;
+  }, [shouldFeatureUser, message?.author, guildId, stateFromStores, children, name, stateFromStores3, displayNameStylesFont, r10.genContentSubtitle, r10.genContentSubtitleChannel, onHeaderPress, actionLabel]);
+  const callback = useCallback(() => {
+    if (stateFromStores2 != null && stateFromStores != null) {
+      openDetailsActionSheet({
+        guildId: stateFromStores2.id,
+        channelId: stateFromStores.id,
+        id,
+        type: interactionType
+      });
+    }
+  }, [stateFromStores2, stateFromStores, id, interactionType]);
+  return <View style={r10.container}>
+    <PressableHighlight onPress={onHeaderPress} onLongPress={onHeaderLongPress} style={r10.content}>
+      <View style={useMemo(() => fontScale > 1.8 ? c21906_7.channelNameAndAccessoryLarge : c21906_7.channelNameAndAccessory, [fontScale, r10.channelNameAndAccessoryLarge, r10.channelNameAndAccessory])}>
+        <View style={r10.header}>
+          {memo}
+          <View style={r10.headerInfo}>
+            <View style={r10.title}>
+              <View style={r10.titleLeft}>
+                {memo2}
+                {hideTimestamp ? !hideTimestamp : <Text lineClamp={1} variant="text-xs/normal" color="text-muted">
+                  {getRelativeTimestamp(timestamp)}
+                </Text>}
+              </View>
+              <PressableOpacity onPress={callback} style={r10.subtitleTrailing} hitSlop={8}>
+                <MoreHorizontalIcon color={Module712.colors.ICON_MUTED} size="sm" />
+              </PressableOpacity>
+            </View>
+            <View style={r10.subTitleContainer}>
+              <View style={r10.subtitle}>{memo3}</View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </PressableHighlight>
+    <View style={r10.normalContent}>{children2}</View>
+  </View>;
+};

modules/icymi/native/ICYMICardInteractionRow.tsx

@@ -0,0 +1,602 @@
+// Metro module 15369 (f15370).
+import { useCallback, useMemo, useEffect, useState } from "react";
+import { View, Image, ScrollView } from "react-native";
+import ThreadMessageStore from "../../threads/ThreadMessageStore";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildVerificationStore from "../../../stores/GuildVerificationStore";
+import PermissionStore from "../../../stores/PermissionStore";
+import { Permissions, HorizontalGradient } from "../../../Constants";
+import { EmojiIntention } from "../../emojis/EmojiConstants";
+import { jsxs } from "react/jsx-runtime";
+import { toReactionEmoji } from "../../reactions/ReactionUtils";
+import { ReactionLocations, addReaction } from "../../reactions/ReactionActionCreators";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { hexWithOpacity } from "../../../utils/ColorUtils";
+import { useStateFromStores, useStateFromStoresObject } from "../../../_bundle/Module589";
+import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
+import { PressableOpacity, PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
+import { intl, t } from "../../../intl/index.native";
+import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import { useEmojiColorPalette } from "../../emojis/hooks/useEmojiColorPalette";
+import { hex2rgb } from "../../../_bundle/int2hslRaw";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import { handleAddOrRemoveReaction } from "../../messages/native/MessagesUtils";
+import ActivityEmoji from "../../activity_status/native/ActivityEmoji";
+import AnimatedCounter from "../../forums/native/posts/AnimatedCounter";
+import ForwardingIcon from "../../forwarding/native/ForwardingIcon";
+import { ArrowAngleLeftUpIcon } from "../../../design/components/Icon/native/redesign/generated/ArrowAngleLeftUpIcon";
+import { navigateToPost } from "./ICYMIShared";
+import { ChatIcon } from "../../../design/components/Icon/native/redesign/generated/ChatIcon";
+import { ReactionTypes } from "../../messages/MessageReactionsTypes";
+import canAddNewReactions from "../../reactions/canAddNewReactions";
+import { useCanForwardMessage } from "../../forwarding/canForwardMessage";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import { openForwardModal } from "../../forwarding/native/ForwardModalUtils";
+import { createPendingReply } from "../../replies/PendingReplyActionCreators";
+import { useToken } from "../../../design/tokens/native/useToken";
+import Module4611 from "../../../_bundle/Module4611";
+import Module689 from "../../../_bundle/Module689";
+import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
+function $mk96251($env) {
+  return () => {
+    let r10;
+    const r2 = $env;
+    const r3 = r2[1];
+    if (r3 != null && r2[0] != null) {
+      const r4 = $env.$parent;
+      let thread = r4[9].getChannel(r3.id);
+      if (thread == null) {
+        thread = null;
+      }
+      const r11 = r4[8];
+      let messageCount = r11.getCount(r3.id);
+      if (messageCount == null) {
+        messageCount = 0;
+      }
+      r10 = {
+        thread,
+        messageCount,
+        mostRecentMessage: r11.getMostRecentMessage(r3.id)
+      };
+    } else {
+      r10 = {
+        thread: null,
+        messageCount: 0,
+        mostRecentMessage: null
+      };
+    }
+    return r10;
+  };
+}
+function $mk96252($env) {
+  return () => {
+    const r4 = $env;
+    const r5 = r4[1];
+    if (r5 != null && r4[0] != null && (r5.hasFlag($env.$parent[12].HAS_THREAD) || r4[2]) && $env.$parent[8].getMostRecentMessage(r5.id) == null) {
+      const r17 = $env.$parent;
+      const r18 = r17[1];
+      const r19 = r17[2];
+      r18(r19[17]).preload(r4[0].id, r5.id);
+      r18(r19[18]).fetchMessages({
+        channelId: r5.id,
+        isPreload: true,
+        limit: 25
+      });
+    }
+  };
+}
+let EmojiReaction, ForwardButton, ReplyButton, ThreadAsCommentsButton, c10921_19, useStyles;
+let env10921 = {};
+const AddEmojiButton = function AddEmojiButton(props) {
+  const { channel, onPressEmoji } = props;
+  let showText = props.showText;
+  const { disabled, handleItemInteracted } = props;
+  const styles = useStyles();
+  const props2 = {
+    onPress: useCallback(() => {
+      handleItemInteracted("press_reaction_picker", {
+        actionGestureType: "press",
+        actionTargetElement: "reaction_picker_button",
+        actionIntentType: "open",
+        actionDestinationType: null
+      });
+      openEmojiPickerActionSheet({
+        pickerIntention: EmojiIntention.REACTION,
+        autoFocus: false,
+        startExpanded: false,
+        onPressEmoji,
+        channel,
+        guildId: channel?.guild_id
+      });
+    }, [channel, onPressEmoji, handleItemInteracted]),
+    style: [styles.emojiContainer, styles.addEmojiContainer, disabled ? styles.disabled : null],
+    accessible: true,
+    accessibilityLabel: intl.string(t.lfIHs4),
+    disabled,
+    children: null
+  };
+  const children = [<ReactionIcon size="sm" />, ,];
+  if (showText) {
+    showText = <Text variant="text-sm/semibold" color="redesign-button-tertiary-text">
+      {intl.string(t.m9O1gd)}
+    </Text>;
+  }
+  children[1] = showText;
+  props2.children = children;
+  return <PressableOpacity {...props2} />;
+};
+EmojiReaction = function EmojiReaction(props) {
+  const { messageId, channel: channel2, reaction, count, isBurstReaction, handleItemInteracted: handleItemInteracted2 } = props;
+  const styles = useStyles();
+  let burst_colors = reaction.burst_colors;
+  if (burst_colors == null) {
+    burst_colors = [];
+  }
+  const emojiColorPalette = useEmojiColorPalette(burst_colors);
+  const r2 = emojiColorPalette != null;
+  let backgroundColor2 = "";
+  if (r2) {
+    const backgroundColor = emojiColorPalette?.backgroundColor;
+    let r33 = emojiColorPalette?.opacity;
+    if (r33 == null) {
+      r33 = 0.15;
+    }
+    let r34 = hex2rgb(backgroundColor, r33);
+    if (r34 == null) {
+      r34 = "";
+    }
+    backgroundColor2 = r34;
+  }
+  const r35 = {
+    backgroundColor: backgroundColor2,
+    borderColor: emojiColorPalette?.backgroundColor
+  };
+  const r41 = emojiColorPalette?.accentColor != null ? {
+    color: emojiColorPalette.accentColor
+  } : null;
+  const emoji = reaction.emoji;
+  let r17 = isBurstReaction ? reaction.me_burst : reaction.me;
+  const r44 = r17 ? styles.selected : void 0;
+  const stateFromStores2 = useStateFromStores([GuildVerificationStore], () => channel2.guild_id != null && GuildVerificationStore.canChatInGuild(channel2.guild_id));
+  const memo2 = useMemo(() => emoji.id != null ? {
+    uri: AvatarUtils.getEmojiURL({
+      id: emoji.id,
+      animated: emoji.animated,
+      size: 48
+    })
+  } : void 0, [emoji]);
+  const callback2 = useCallback(() => {
+    handleItemInteracted2("press_reaction", {
+      actionGestureType: "press",
+      actionTargetElement: "toggle_existing_reaction_button",
+      actionIntentType: "react",
+      actionDestinationType: null
+    });
+    handleAddOrRemoveReaction(messageId, channel2, reaction, isBurstReaction, ReactionLocations.MESSAGE);
+  }, [channel2, isBurstReaction, messageId, reaction, handleItemInteracted2]);
+  const style = [styles.emojiContainer, r44, isBurstReaction ? r35 : isBurstReaction];
+  const r102 = [<View style={[styles.innerEmojiContainer, r17 ? styles.selectedInnerEmojiContainer : r17]}>
+    {emoji.id == null ? <Text variant="text-md/medium" color="interactive-text-default" style={[styles.defaultEmoji, styles.emojiText]} allowFontScaling={false}>{emoji.name}</Text> : isAndroid() ? <Image style={[styles.defaultEmoji, styles.emojiImage]} source={memo2} /> : <ActivityEmoji emoji={emoji} size={c10921_19} style={styles.defaultEmoji} animate />}
+  </View>, ,];
+  const style2 = [styles.innerTextContainer, ,];
+  if (r17) {
+    r17 = styles.selectedInnerTextContainer;
+  }
+  style2[1] = r17;
+  r102[1] = <View style={style2}>
+    <AnimatedCounter animate count={count} textStyle={isBurstReaction ? r41 : null} textVariant="text-md/semibold" />
+  </View>;
+  return <PressableOpacity style={style} onPress={callback2} accessible accessibilityLabel={emoji.name} disabled={!stateFromStores2}>{r102}</PressableOpacity>;
+};
+ForwardButton = function ForwardButton(props) {
+  const { onPress, disabled } = props;
+  const styles = useStyles();
+  return <PressableOpacity onPress={onPress} style={[styles.emojiContainer, styles.addEmojiContainer, disabled ? styles.disabled : null]} accessible disabled={disabled} accessibilityLabel={intl.string(t.xIUfJS)}>
+    <ForwardingIcon size="sm" />
+  </PressableOpacity>;
+};
+ReplyButton = function ReplyButton(props) {
+  const { onPress, disabled } = props;
+  const styles = useStyles();
+  return <PressableOpacity onPress={onPress} style={[styles.emojiContainer, styles.addEmojiContainer, disabled ? styles.disabled : null]} accessible disabled={disabled} accessibilityLabel={intl.string(t["5NwaNY"])}>
+    <ArrowAngleLeftUpIcon size="sm" />
+  </PressableOpacity>;
+};
+ThreadAsCommentsButton = function ThreadAsCommentsButton(props) {
+  const { parentMessage, threadData, style, handleItemInteracted: handleItemInteracted3 } = props;
+  const styles = useStyles();
+  const stateFromStores2 = useStateFromStores([PermissionStore], () => PermissionStore.canWithPartialContext(Permissions.VIEW_CHANNEL, {
+    channelId: parentMessage.id
+  }));
+  const callback2 = useCallback(() => {
+    handleItemInteracted3("press_comments", {
+      actionGestureType: "press",
+      actionTargetElement: "thread_comments_button",
+      actionIntentType: "navigate",
+      actionDestinationType: "channel"
+    });
+    if (parentMessage != null && threadData.thread != null) {
+      navigateToPost(parentMessage.getChannelId(), threadData.thread.guild_id, parentMessage.id);
+    }
+  }, [parentMessage, threadData.thread, handleItemInteracted3]);
+  if (stateFromStores2 && threadData.messageCount !== 0) {
+    if (threadData.thread != null && threadData.mostRecentMessage != null) {
+      return <PressableHighlight style={[styles.comments, style]} onPress={callback2}>
+        {(0, jsxs)(View, {
+          style: styles.commentCount,
+          children: [<ChatIcon style={styles.commentsIcon} />, <Text variant="text-md/semibold" color="text-strong">
+            {threadData.messageCount > 9 ? "9+" : threadData.messageCount}
+          </Text>]
+        })}
+      </PressableHighlight>;
+    }
+    return <PressableHighlight style={[styles.comments, style]} onPress={callback2}>
+      <View style={styles.commentCount}>
+        <ChatIcon style={styles.commentsIcon} />
+      </View>
+    </PressableHighlight>;
+  }
+  return null;
+};
+c10921_19 = 20;
+useStyles = createStyles(() => {
+  const emojiContainer = {
+    flexDirection: "row",
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+    borderRadius: Module712.radii.sm,
+    flexShrink: 3,
+    paddingHorizontal: 8,
+    gap: 6
+  };
+  const width = c10921_19;
+  return {
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      justifyContent: "space-between"
+    },
+    replyForwardButtonContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: 6
+    },
+    emojisRowContainer: {
+      position: "relative",
+      flexDirection: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: 6
+    },
+    emojisContainer: {
+      position: "relative",
+      flexDirection: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: 6
+    },
+    emojiContainer,
+    innerEmojiContainer: {
+      paddingVertical: 5
+    },
+    selectedInnerEmojiContainer: {
+      paddingVertical: 4
+    },
+    addEmojiContainer: {
+      minHeight: 30,
+      alignItems: "center"
+    },
+    disabled: {
+      opacity: 0.4
+    },
+    defaultEmoji: {
+      width,
+      height: width
+    },
+    emojiText: {
+      lineHeight: isAndroid() ? 16 : width,
+      fontSize: 16,
+      textAlign: "center",
+      paddingTop: 2
+    },
+    selectedInnerTextContainer: {
+      paddingBottom: 3.5
+    },
+    innerTextContainer: {
+      alignSelf: "flex-end",
+      paddingBottom: 4.5
+    },
+    emojiImage: {
+      resizeMode: "contain",
+      width,
+      height: width
+    },
+    selected: {
+      borderColor: Module712.unsafe_rawColors.BRAND_560,
+      borderWidth: 1,
+      paddingHorizontal: 7,
+      backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.BRAND_500, 0.3)
+    },
+    gradient: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      width: 48
+    },
+    overflowChevron: {
+      position: "absolute",
+      right: 0
+    },
+    comments: {
+      paddingVertical: 6,
+      paddingHorizontal: 8,
+      backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+      borderRadius: Module712.radii.sm,
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8
+    },
+    commentCount: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      justifySelf: "end"
+    },
+    commentsIcon: {
+      width: 20,
+      height: 20,
+      tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+    }
+  };
+});
+export default function ICYMICardInteractionRow(props) {
+  let r113, children, props2, props3;
+  let c21926_7, memo, canForwardMessage, stateFromStores, callback, setState;
+  const { message, channel: channel3, guild, hideAdditionalButtons = false } = props;
+  let c21926_2 = hideAdditionalButtons;
+  let isKeyMessage = props.isKeyMessage;
+  if (isKeyMessage === void 0) {
+    isKeyMessage = false;
+  }
+  let c21926_3 = isKeyMessage;
+  const { inForum = false, backgroundVariant = "primary" } = props;
+  let env21927;
+  let c21926_4 = backgroundVariant;
+  const { id, itemType } = props;
+  c21926_7 = void 0;
+  memo = void 0;
+  canForwardMessage = void 0;
+  stateFromStores = void 0;
+  callback = void 0;
+  setState = void 0;
+  const styles = useStyles();
+  const r12 = env21927 = {
+    $parent: env10921
+  };
+  env21927[0] = guild;
+  env21927[1] = message;
+  env21927[2] = inForum;
+  const stateFromStoresObject = useStateFromStoresObject([ChannelStore, ThreadMessageStore], $mk96251(r12));
+  const { thread, messageCount, mostRecentMessage } = stateFromStoresObject;
+  const id2 = guild?.id;
+  L32: {
+    useEffect($mk96252(r12), [id2, inForum, message, guild]);
+    const threadData2 = {
+      thread,
+      messageCount,
+      mostRecentMessage
+    };
+    c21926_7 = threadData2;
+    memo = useMemo(() => {
+      const r4 = [];
+      let c28010_0 = r4;
+      message.reactions.forEach((reaction) => {
+        if (reaction.me_vote == null) {
+          if (reaction.burst_count > 0) {
+            c28010_0.push({
+              ...reaction,
+              type: ReactionTypes.BURST
+            });
+          }
+          if (reaction.count > 0) {
+            c28010_0.push({
+              ...reaction,
+              type: ReactionTypes.NORMAL
+            });
+          }
+        }
+      });
+      return r4;
+    }, [message.reactions]);
+    const memo2 = useMemo(() => channel3 != null && canAddNewReactions(channel3), [channel3]);
+    canForwardMessage = useCanForwardMessage(message);
+    stateFromStores = useStateFromStores([PermissionStore], () => PermissionStore.can(Permissions.SEND_MESSAGES, channel3));
+    const memo3 = useMemo(() => {
+      const r0 = c21926_2 ? 6 : 4;
+      const r1 = c21926_7.messageCount > 0 ? r0 - 1 : r0;
+      const r12 = memo.length > r1 ? memo.length - r1 : 0;
+      const showThreadAsComments = c21926_7.messageCount > 0;
+      let showReplyForwardButtons = !c21926_2;
+      if (!c21926_2) {
+        let r18 = stateFromStores;
+        if (!stateFromStores) {
+          r18 = canForwardMessage;
+        }
+        showReplyForwardButtons = r18;
+      }
+      return {
+        hasOverflow: r12 > 0,
+        showReplyForwardButtons,
+        showThreadAsComments
+      };
+    }, [hideAdditionalButtons, threadData2.messageCount, memo.length, stateFromStores, canForwardMessage]);
+    const hasOverflow = memo3.hasOverflow;
+    let showReplyForwardButtons = memo3.showReplyForwardButtons;
+    let showThreadAsComments = memo3.showThreadAsComments;
+    callback = useCallback((a0, a1) => {
+      ICYMIActionCreators.itemInteracted(id, itemType, a0);
+      ICYMIActionCreators.feedItemActioned({
+        itemId: id,
+        itemType,
+        actionParameters: a1
+      });
+    }, [id, itemType]);
+    const callback2 = useCallback((a0, a1) => {
+      callback("press_reaction", {
+        actionGestureType: "press",
+        actionTargetElement: "add_new_reaction_button",
+        actionIntentType: "open",
+        actionDestinationType: null
+      });
+      const id3 = channel3.id;
+      const id2 = message.id;
+      if (a0 != null) {
+        addReaction(id3, id2, toReactionEmoji(a0), ReactionLocations.MESSAGE, {
+          burst: a1
+        });
+      }
+    }, [channel3.id, message.id, callback]);
+    const callback4 = useCallback(() => {
+      callback("press_forward", {
+        actionGestureType: "press",
+        actionTargetElement: "forward_button",
+        actionIntentType: "share",
+        actionDestinationType: "channel"
+      });
+      openForwardModal({
+        message,
+        source: "icymi-tab"
+      });
+    }, [message, callback]);
+    const callback5 = useCallback(() => {
+      callback("press_reply", {
+        actionGestureType: "press",
+        actionTargetElement: "reply_button",
+        actionIntentType: "reply",
+        actionDestinationType: "channel"
+      });
+      navigateToPost(channel3.id, channel3.guild_id, message.id);
+      createPendingReply({
+        channel: channel3,
+        message,
+        shouldMention: true,
+        showMentionToggle: true
+      });
+    }, [channel3, message, callback]);
+    const token = useToken(useMemo(() => {
+      if (c21926_3) {
+        return Module712.colors.MESSAGE_HIGHLIGHT_BACKGROUND_DEFAULT;
+      }
+      if (c21926_4 === "primary") {
+        return Module712.colors.CARD_BACKGROUND_DEFAULT;
+      }
+      if (c21926_4 === "secondary") {
+        return Module712.colors.CARD_SECONDARY_BG;
+      }
+      if (c21926_4 === "base") {
+        return Module712.colors.BACKGROUND_BASE_LOW;
+      }
+    }, [backgroundVariant, isKeyMessage]));
+    let state;
+    [state, setState] = useState(true);
+    const callback3 = useCallback(({ nativeEvent }) => {
+      setState(!(nativeEvent.contentOffset.x + nativeEvent.layoutMeasurement.width >= nativeEvent.contentSize.width));
+    }, []);
+    const callback6 = useCallback(() => {
+      callback("scroll_reaction_row", {
+        actionGestureType: "swipe",
+        actionTargetElement: "reaction_row_container",
+        actionIntentType: "scroll",
+        actionDestinationType: null
+      });
+    }, [callback]);
+    if (memo.length === 0) {
+      r113 = null;
+      if (hideAdditionalButtons) {
+        break L32;
+      }
+    }
+    L31: {
+      props2 = {
+        style: styles.container,
+        children: null
+      };
+      props3 = {
+        style: styles.emojisRowContainer,
+        children: null
+      };
+      if (!(memo.length > 0)) {
+        children = null;
+        if (!memo2) {
+          break L31;
+        }
+      }
+      let r128 = hideAdditionalButtons ? !hideAdditionalButtons : showReplyForwardButtons ? showReplyForwardButtons : showThreadAsComments;
+      if (r128) {
+        if (showThreadAsComments) {
+          showThreadAsComments = <ThreadAsCommentsButton threadData={threadData2} parentMessage={message} handleItemInteracted={callback} />;
+        }
+        const r133 = [showThreadAsComments, ,];
+        if (showReplyForwardButtons) {
+          showReplyForwardButtons = <>
+            <ReplyButton onPress={callback5} disabled={!stateFromStores} />
+            <ForwardButton onPress={callback4} disabled={!canForwardMessage} />
+          </>;
+        }
+        r133[1] = showReplyForwardButtons;
+        r128 = <View style={styles.replyForwardButtonContainer}>{r133}</View>;
+      }
+      children = <View style={[styles.emojisContainer]}>
+        <ScrollView horizontal scrollEnabled={hasOverflow} contentContainerStyle={{
+          gap: 6
+        }} onScroll={callback3} onScrollEndDrag={callback6} showsHorizontalScrollIndicator={false}>
+          {r128}
+          {memo.map((item, index) => <View key={`reaction-${index}`}>
+            <EmojiReaction messageId={message.id} channel={channel3} reaction={item} count={item.type === ReactionTypes.BURST ? item.burst_count : item.count} isBurstReaction={item.type === ReactionTypes.BURST} handleItemInteracted={callback} />
+          </View>)}
+          {hideAdditionalButtons ? null : memo2 ? <AddEmojiButton channel={channel3} onPressEmoji={callback2} handleItemInteracted={callback} /> : null}
+        </ScrollView>
+        {hasOverflow ? state ? <>
+          <Module4611 style={styles.gradient} start={HorizontalGradient.START} end={HorizontalGradient.END} colors={[Module689(token).alpha(0).hex(), token, token]} locations={[0, 0.8, 1]} />
+          <ChevronSmallRightIcon style={[styles.overflowChevron]} size="xs" color="icon-muted" />
+        </> : null : null}
+      </View>;
+    }
+    props3.children = children;
+    props2.children = <View {...props3} />;
+    r113 = <View {...props2} />;
+  }
+  return r113;
+};
+export function onAddReaction(a0, a1, a2, a3) {
+  if (a2 != null) {
+    addReaction(a0, a1, toReactionEmoji(a2), ReactionLocations.MESSAGE, {
+      burst: a3
+    });
+  }
+}
+export function useThread(a0, a1, a2) {
+  let env21922;
+  const r2 = env21922 = {
+    $parent: env10921
+  };
+  env21922[0] = a0;
+  env21922[1] = a1;
+  env21922[2] = a2;
+  const stateFromStoresObject = useStateFromStoresObject([ChannelStore, ThreadMessageStore], $mk96251(r2));
+  const { thread, messageCount, mostRecentMessage } = stateFromStoresObject;
+  const id2 = a0?.id;
+  useEffect($mk96252(r2), [id2, a2, a1, a0]);
+  return {
+    thread,
+    messageCount,
+    mostRecentMessage
+  };
+}

modules/icymi/native/ICYMIContext.tsx

@@ -0,0 +1,29 @@
+// Metro module 15323 (f15324).
+import { createContext } from "react";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import Module712 from "../../../_bundle/Module712";
+const context = createContext({
+  width: 0,
+  margin: 0,
+  inset: 0
+});
+export { context as ICYMIContext };
+export function useICYMIContextConstructor() {
+  const width = Math.min(useWindowDimensions_native().width, 480);
+  const PX_16 = Module712.space.PX_16;
+  return {
+    width,
+    margin: PX_16,
+    inset: PX_16 + 38
+  };
+}
+export function ICYMIContextProvider(props) {
+  const children = props.children;
+  const width = Math.min(useWindowDimensions_native().width, 480);
+  const PX_16 = Module712.space.PX_16;
+  return <context.Provider value={{
+    width,
+    margin: PX_16,
+    inset: PX_16 + 38
+  }}>{children}</context.Provider>;
+}

modules/icymi/native/ICYMIFeedbackSheet.tsx

@@ -0,0 +1,35 @@
+// Metro module 15345 (f15346).
+import FeedbackActionSheet from "../../feedback/native/FeedbackActionSheet";
+import { intl, t } from "../../../intl/index.native";
+import { ICYMIAnalytics } from "../ICYMIAnalytics";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+export default function ICYMIFeedbackSheet() {
+  return <FeedbackActionSheet headerLabel={intl.string(t["ppfH9+"])} showHeaderCloseButton hideDontShowAgainCheckbox ratingsBodyLabel={intl.string(t["ePk/Cf"])} reasonsHeaderLabel={intl.string(t.sBOuOf)} reasons={[{
+    label: intl.string(t.F6TmZA),
+    value: "irrelevant_content"
+  }, {
+    label: intl.string(t.voWAzi),
+    value: "not_enough_content"
+  }, {
+    label: intl.string(t.Ay8iwx),
+    value: "too_much_content"
+  }, {
+    label: intl.string(t["Yu+52W"]),
+    value: "laggy"
+  }, {
+    label: "Other",
+    value: "other"
+  }]} otherKey="other" trackOpen={ICYMIAnalytics.trackFeedFeedbackPromptViewed} feedbackReasons={["other"]} trackReport={(a0) => {
+    ICYMIActionCreators.giveFeedback();
+    const reason_descriptions = a0.reason != null ? [a0.reason.value] : void 0;
+    let rating = a0.rating;
+    if (rating == null) {
+      rating = void 0;
+    }
+    ICYMIAnalytics.trackFeedFeedbackSubmitted({
+      reason_descriptions,
+      rating,
+      user_feedback: a0.feedback
+    });
+  }} />;
+};

modules/icymi/native/ICYMIForumThreadRow.tsx

@@ -0,0 +1,122 @@
+// Metro module 15389 (f15390).
+import { useEffect, useCallback } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildStore from "../../../stores/GuildStore";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import GuildActionCreators from "../../../actions/GuildActionCreators";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import { navigateToPost } from "./ICYMIShared";
+import { openChannelLongPressActionSheet } from "../../channel/native/openChannelLongPressActionSheet";
+import { useGravityMessage } from "../ICYMIUtils";
+import useChannelName from "../../channel/useChannelName";
+import ICYMICardInCard from "./ICYMICardInCard";
+import { intl, t } from "../../../intl/index.native";
+import SnowflakeUtils from "../../../utils/SnowflakeUtils";
+import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../design/components/Text/native/Text";
+import MarkupUtils from "../../markup/MarkupUtils";
+import ICYMIMediaMosaic from "./media/ICYMIMediaMosaic";
+import ICYMICardInteractionRow from "./ICYMICardInteractionRow";
+let styles;
+const ICYMIForumThreadRow = function ICYMIForumThreadRow(props) {
+  let author;
+  const { channel, message, visible } = props;
+  author = void 0;
+  const r17 = styles();
+  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(channel == null ? void 0 : channel.getGuildId()));
+  author = message.author;
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channel.parent_id));
+  const r39 = [author.id, ,];
+  const id = stateFromStores?.id;
+  const r40 = () => {
+    if (stateFromStores?.id != null) {
+      GuildActionCreators.requestMembersById(stateFromStores?.id, [author.id]);
+    }
+  };
+  r39[1] = id;
+  useEffect(r40, r39);
+  const callback = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(message.id, "forum_thread", "press_forum_thread");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: message.id,
+      itemType: "forum_thread",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "item_container",
+        actionIntentType: "navigate",
+        actionDestinationType: "channel"
+      }
+    });
+    if (channel != null && stateFromStores != null) {
+      navigateToPost(channel.id, stateFromStores.id, message.id);
+    }
+  }, [channel, stateFromStores, message.id]);
+  const callback2 = useCallback(() => {
+    if (channel.parent_id != null) {
+      ICYMIActionCreators.itemInteracted(message.id, "forum_thread", "long_press_forum_thread");
+      ICYMIActionCreators.feedItemActioned({
+        itemId: message.id,
+        itemType: "forum_thread",
+        actionParameters: {
+          actionGestureType: "long_press",
+          actionTargetElement: "item_container",
+          actionIntentType: "open",
+          actionDestinationType: null
+        }
+      });
+      openChannelLongPressActionSheet(channel.parent_id);
+    }
+  }, [channel.parent_id, message.id]);
+  const gravityMessage = useGravityMessage(message);
+  const channelName = useChannelName(channel);
+  return channel == null ? null : channel.guild_id == null ? null : stateFromStores == null ? null : author == null ? null : stateFromStores2 == null ? null : <ICYMICardInCard actionLabel={intl.string(t.bYNuVx)} id={gravityMessage.id} interactionType="forum_thread" channelId={channel.parent_id} timestamp={SnowflakeUtils.extractTimestamp(gravityMessage.id)} onHeaderPress={callback} onHeaderLongPress={callback2} message={gravityMessage} shouldFeatureUser>
+    <PressableHighlight onPress={callback} onLongPress={callback2} accessibilityRole="button" unstable_pressDelay={130} style={r17.pressable}>
+      <View style={r17.container}>
+        <Text variant="text-lg/semibold" color="mobile-text-heading-primary">{channelName}</Text>
+        <Text variant="text-md/normal" color="text-subtle" style={r17.subtitle} lineClamp={5}>
+          {MarkupUtils.parseInlineReply(message.content, true)}
+        </Text>
+        <ICYMIMediaMosaic message={message} visible={visible} itemType="forum_thread" />
+      </View>
+    </PressableHighlight>
+    <View style={r17.footer}>
+      <View style={r17.ICYMICardInteractionRow}>
+        <ICYMICardInteractionRow message={gravityMessage} channel={channel} guild={stateFromStores} backgroundVariant="base" id={gravityMessage.id} itemType="forum_thread" />
+      </View>
+    </View>
+  </ICYMICardInCard>;
+};
+styles = createICYMIStyles((a0) => ({
+  pressable: {
+    flex: 1,
+    paddingLeft: a0.inset
+  },
+  container: {
+    marginHorizontal: a0.margin
+  },
+  subtitle: {
+    marginTop: Module712.space.PX_8,
+    marginBottom: a0.margin
+  },
+  footer: {
+    justifyContent: "flex-end",
+    paddingLeft: a0.inset,
+    marginTop: a0.margin,
+    gap: a0.margin
+  },
+  threadAsComments: {
+    marginHorizontal: a0.margin
+  },
+  ICYMICardInteractionRow: {
+    marginHorizontal: a0.margin,
+    marginBottom: a0.margin
+  }
+}));
+export default function ForumThreadRowWrapper(props) {
+  return <ICYMIForumThreadRow message={props.message} channel={props.threadChannel} visible={props.visible} />;
+};
+export const MAX_AVATARS_IN_PILE = 3;
+export { ICYMIForumThreadRow };

modules/icymi/native/ICYMIGuildEventRow.tsx

@@ -0,0 +1,163 @@
+// Metro module 15386 (f15387).
+import { useMemo, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import GuildScheduledEventStore, { isGuildEventEnded, isGuildScheduledEventActive } from "../../guild_scheduled_events/GuildScheduledEventStore";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildStore from "../../../stores/GuildStore";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import useEventSchedule from "../../guild_scheduled_events/useEventSchedule";
+import { intl, t } from "../../../intl/index.native";
+import { getEventTimeData, getNextRecurrenceIdInEvent } from "../../guild_scheduled_events/utils/ScheduleUtils";
+import useChannelName from "../../channel/useChannelName";
+import { getLocationFromEvent } from "../../guild_scheduled_events/utils/EntityUtils";
+import { getEventLocationIconSource, getEventLocationIconComponent } from "../../guild_scheduled_events/native/components/GuildEventUtils";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import { openGuildEventDetails } from "../../guild_scheduled_events/GuildScheduledEventModalActionCreators.native";
+import { transitionToGuild } from "../../routing/transitionToGuild.native";
+import useGuildScheduledEventUserCount from "../../guild_scheduled_events/useGuildScheduledEventUserCount";
+import ICYMICardInCard from "./ICYMICardInCard";
+import SnowflakeUtils from "../../../utils/SnowflakeUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { guildEventDetailsParser } from "../../guild_scheduled_events/guildEventDetailsParser.native";
+import { GroupIcon } from "../../../design/components/Icon/native/redesign/generated/GroupIcon";
+import { Icon } from "../../../design/void/native";
+import { useStateFromStores } from "../../../_bundle/Module589";
+let styles;
+const ICYMIGuildEventRow = function ICYMIGuildEventRow(props) {
+  const { event, channel, guild } = props;
+  const r22 = styles();
+  const eventSchedule = useEventSchedule(event, null);
+  const isGuildScheduledEventActive2 = isGuildScheduledEventActive(event);
+  const r33 = eventSchedule == null ? void 0 : eventSchedule.startTime.toISOString();
+  let c21944_3 = r33;
+  const startDateTimeString = useMemo(() => isGuildScheduledEventActive2 ? {
+    startDateTimeString: intl.string(t.TxqPQR)
+  } : getEventTimeData(c21944_3), [r33, isGuildScheduledEventActive2]).startDateTimeString;
+  let r21 = useChannelName(channel);
+  const locationFromEvent = getLocationFromEvent(event);
+  if (r21 == null) {
+    r21 = locationFromEvent;
+  }
+  const eventLocationIconSource = getEventLocationIconSource(event, channel, true);
+  const EventLocationIconComponent = getEventLocationIconComponent(event, channel, true);
+  const nextRecurrenceIdInEvent = getNextRecurrenceIdInEvent(event);
+  const callback = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(event.id, "guild_event", "press_event");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: event.id,
+      itemType: "guild_event",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "item_body",
+        actionIntentType: "navigate",
+        actionDestinationType: "event"
+      }
+    });
+    openGuildEventDetails({
+      eventId: event.id,
+      event
+    });
+  }, [event]);
+  const callback2 = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(event.id, "guild_event", "press_event");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: event.id,
+      itemType: "guild_event",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "item_header",
+        actionIntentType: "navigate",
+        actionDestinationType: "guild"
+      }
+    });
+    transitionToGuild(guild.id);
+  }, [guild.id, event.id]);
+  let style = event.description != null && event.description.length > 0;
+  const guildScheduledEventUserCount = useGuildScheduledEventUserCount(event?.guild_id, event?.id, nextRecurrenceIdInEvent);
+  const props2 = {
+    actionLabel: intl.string(t["6pFsLQ"]),
+    id: event.id,
+    interactionType: "guild_event",
+    channelId: channel?.id,
+    guildId: guild.id,
+    timestamp: SnowflakeUtils.extractTimestamp(event.id),
+    onHeaderPress: callback2,
+    onHeaderLongPress: callback2,
+    children: null
+  };
+  const r107 = [<View style={r22.timeAndUserPillContainer}>
+    <Text variant="text-sm/semibold" color={isGuildScheduledEventActive2 ? "status-positive" : "text-brand"}>{startDateTimeString}</Text>
+  </View>, , , , ,];
+  if (style) {
+    style = r22.title;
+  }
+  r107[1] = <Text style={style} variant="text-lg/semibold">{event.name}</Text>;
+  r107[2] = event.description != null && event.description.length > 0 && <Text variant="text-md/normal" color="text-subtle" lineClamp={5}>
+    {guildEventDetailsParser(event.description, true, {
+      guildId: guild.id
+    })}
+  </Text>;
+  r107[3] = <View style={r22.separator} />;
+  r107[4] = <View style={r22.infoContainer}>
+    <View style={r22.locationContainer}>
+      <GroupIcon size="xs" style={r22.eventsChannelIcon} />
+      <Text lineClamp={1} variant="text-xs/normal" color="text-muted">
+        {intl.format(t["+DLsD8"], {
+          count: guildScheduledEventUserCount
+        })}
+      </Text>
+    </View>
+    <View style={r22.locationContainer}>
+      {EventLocationIconComponent != null ? <EventLocationIconComponent size="xs" style={r22.eventsChannelIcon} /> : eventLocationIconSource != null && <Icon source={eventLocationIconSource} size={Icon.Sizes.EXTRA_SMALL} style={r22.eventsChannelIcon} disableColor />}
+      <Text lineClamp={2} variant="text-xs/normal" color="text-muted">
+        {r21 != null ? guildEventDetailsParser(r21, true) : null}
+      </Text>
+    </View>
+  </View>;
+  props2.children = <Pressable onPress={callback} style={r22.container}>{r107}</Pressable>;
+  return <ICYMICardInCard {...props2} />;
+};
+styles = createICYMIStyles((a0) => ({
+  container: {
+    marginHorizontal: a0.margin,
+    marginBottom: a0.margin,
+    marginLeft: a0.margin + a0.inset
+  },
+  card: {
+    marginTop: Module712.space.PX_12
+  },
+  title: {
+    marginBottom: Module712.space.PX_4
+  },
+  timeAndUserPillContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: Module712.space.PX_8,
+    justifyContent: "space-between"
+  },
+  separator: {
+    height: 1,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginVertical: Module712.space.PX_12
+  },
+  eventsChannelIcon: {
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  infoContainer: {
+    gap: Module712.space.PX_4
+  },
+  locationContainer: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: Module712.space.PX_8
+  }
+}));
+export default function ICYMIGuildEventRowWrapper(props) {
+  const eventId = props.eventId;
+  const stateFromStores = useStateFromStores([GuildScheduledEventStore], () => GuildScheduledEventStore.getGuildScheduledEvent(eventId));
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(stateFromStores?.guild_id));
+  const stateFromStores3 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(stateFromStores?.channel_id));
+  return stateFromStores == null ? null : stateFromStores2 == null ? null : isGuildEventEnded(stateFromStores) ? null : <ICYMIGuildEventRow event={stateFromStores} channel={stateFromStores3} guild={stateFromStores2} />;
+};

modules/icymi/native/ICYMIHeader.tsx

@@ -0,0 +1,28 @@
+// Metro module 15388 (f15389).
+import { View } from "react-native";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+const styles = createICYMIStyles((a0) => ({
+  text: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginHorizontal: a0.margin
+  },
+  separator: {
+    height: 1,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginBottom: Module712.space.PX_16
+  }
+}));
+export default function ICYMIHeader() {
+  const r9 = styles();
+  return <>
+    <View style={r9.separator} />
+    <Text style={r9.text} variant="heading-md/semibold" color="mobile-text-heading-primary">
+      {intl.string(t["jnXV/V"])}
+    </Text>
+  </>;
+};

modules/icymi/native/ICYMILoading.tsx

@@ -0,0 +1,95 @@
+// Metro module 15383 (f15384).
+import { useMemo } from "react";
+import { View } from "react-native";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import useChatPlaceholderAnimatedStyles from "../../chat/native/placeholder/useChatPlaceholderAnimatedStyles";
+import ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import { Separator } from "./ICYMIShared";
+let styles;
+const ICYMILoadingItem = function ICYMILoadingItem() {
+  const r18 = styles();
+  const styles2 = useChatPlaceholderAnimatedStyles({
+    visible: true,
+    animated: true
+  });
+  const memo = useMemo(() => ({
+    avatarTitle: Math.floor(10 * Math.random()),
+    title: Math.floor(10 * Math.random()),
+    subtitle: Math.floor(10 * Math.random())
+  }), []);
+  const { avatarTitle, title, subtitle } = memo;
+  const r42 = [<ReanimatedRexport.View style={[r18.backgroundColor, r18.avatar, styles2]} />, ,];
+  const style = [r18.backgroundColor, r18.avatarTitle, styles2, ,];
+  const r0 = 100 * Math.sin(avatarTitle);
+  style[3] = {
+    width: `${(r0 - Math.floor(r0)) * 30 + 30}%`
+  };
+  r42[1] = <ReanimatedRexport.View style={style} />;
+  const r64 = [<View style={r18.avatarRow}>{r42}</View>, , , ,];
+  const style2 = [r18.backgroundColor, r18.title, styles2, ,];
+  const r74 = 100 * Math.sin(title);
+  style2[3] = {
+    width: `${(r74 - Math.floor(r74)) * 25 + 75}%`
+  };
+  r64[1] = <ReanimatedRexport.View style={style2} />;
+  const style3 = [r18.backgroundColor, r18.subtitle, styles2, ,];
+  const r97 = 100 * Math.sin(subtitle);
+  style3[3] = {
+    width: `${(r97 - Math.floor(r97)) * 25 + 75}%`
+  };
+  r64[2] = <ReanimatedRexport.View style={style3} />;
+  r64[3] = <ReanimatedRexport.View style={[r18.backgroundColor, r18.image, styles2]} />;
+  return <>
+    <View style={r18.container}>{r64}</View>
+    <Separator />
+  </>;
+};
+styles = createICYMIStyles((a0) => ({
+  backgroundColor: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  container: {
+    padding: a0.margin
+  },
+  avatarRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: a0.margin
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: Module712.radii.md,
+    marginRight: Module712.space.PX_12
+  },
+  avatarTitle: {
+    height: 18,
+    borderRadius: 10,
+    flexShrink: 1
+  },
+  title: {
+    height: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_12,
+    borderRadius: 10,
+    flexShrink: 1
+  },
+  subtitle: {
+    height: Module712.space.PX_16,
+    marginBottom: a0.margin,
+    borderRadius: 10,
+    flexShrink: 1
+  },
+  image: {
+    width: "100%",
+    height: 240,
+    borderRadius: Module712.radii.lg
+  },
+  separator: {}
+}));
+export function ICYMILoading() {
+  return <>
+    <ICYMILoadingItem />
+    <ICYMILoadingItem />
+  </>;
+}

modules/icymi/native/ICYMIMessageRow.tsx

@@ -0,0 +1,224 @@
+// Metro module 15365 (f15366).
+import * as Module19 from "react";
+import { useContext, useMemo, useEffect, useCallback } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import GuildStore from "../../../stores/GuildStore";
+import RelationshipStore from "../../../stores/RelationshipStore";
+import UserGuildSettingsStore from "../../../stores/UserGuildSettingsStore";
+import UserStore from "../../../stores/UserStore";
+import { ITEM_PADDING } from "./DesignConstants";
+import { DEFAULT_ROLE_COLOR_HEX, MessageEmbedTypes } from "../../../Constants";
+import Module712 from "../../../_bundle/Module712";
+import { createICYMIStyles } from "./createICYMIStyles";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { ICYMIContext } from "./ICYMIContext";
+import { extractMediaSourcesFromMessage } from "../../media_viewer/native/MediaSourceUtil";
+import { GRAVITY_VALID_EMBED_TYPES } from "../ICYMITypes";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { MessageRowPreview, NonMediaEmbedsRowPreview } from "./ICYMIMessageRowPreview";
+import ICYMIMediaMosaic from "./media/ICYMIMediaMosaic";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+import { getName } from "../../../utils/NicknameUtils";
+import GuildActionCreators from "../../../actions/GuildActionCreators";
+import { useICYMIMessage, useGravityMessage } from "../ICYMIUtils";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import { openChannelLongPressActionSheet } from "../../channel/native/openChannelLongPressActionSheet";
+import { showLongPressMessageActionSheet } from "../../messages/native/long_press/showLongPressMessageActionSheet";
+import { navigateToPost } from "./ICYMIShared";
+import ICYMICardInCard from "./ICYMICardInCard";
+import SnowflakeUtils from "../../../utils/SnowflakeUtils";
+import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
+import getChannelA11yLabel, { getChannelA11yHint } from "../../channel/getChannelA11yLabel";
+import ICYMICardInteractionRow from "./ICYMICardInteractionRow";
+let PX_12, PX_8, styles, ReplyMessageContent, Component;
+const MessageRowContent = function MessageRowContent(props) {
+  const { message, channel, lineClamp = 3, nested = false, visible = false } = props;
+  const r14 = styles();
+  const context = useContext(ICYMIContext);
+  const r34 = extractMediaSourcesFromMessage(message, message, channel.guild_id, GRAVITY_VALID_EMBED_TYPES);
+  const stateFromStores2 = useStateFromStores([UserGuildSettingsStore], () => UserGuildSettingsStore.isChannelMuted(channel.getGuildId(), channel.id));
+  const memo = useMemo(() => {
+    const r1 = message.embeds.length !== 1 || message.attachments.length > 0;
+    return r1 ? !r1 : message.embeds[0].type === MessageEmbedTypes.GIFV && message.embeds[0].url === message.content;
+  }, [message.attachments.length, message.content, message.embeds]);
+  const r18 = message.attachments.every(({ content_type }) => content_type == null ? void 0 : content_type.startsWith("audio/"));
+  return <View style={[r14.messagePreview, nested ? null : {
+    paddingLeft: context.margin
+  }]}>
+    {memo ? !memo : <MessageRowPreview message={message} muted={stateFromStores2} lineClamp={lineClamp} messageOptions={r34.length === 0 ? message.attachments.length > 0 ? message.embeds.length === 0 ? {
+      renderAttachments: true
+    } : void 0 : void 0 : void 0} pointerEvents={r18 ? "auto" : "none"} />}
+    {r34.length > 0 && <View style={r14.media}>
+      <ICYMIMediaMosaic message={message} visible={visible} itemType="message" />
+    </View>}
+    {r34.length === 0 && message.embeds.length > 0 && <View style={r14.media}>
+      <NonMediaEmbedsRowPreview message={message} muted={stateFromStores2} lineClamp={3} />
+    </View>}
+  </View>;
+};
+ReplyMessageContent = function ReplyMessageContent(props) {
+  const { message: message2, channel: channel3, guild } = props;
+  const r12 = styles();
+  const context = useContext(ICYMIContext);
+  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getUser(message2.author.id));
+  let color = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getMember(guild.id, message2.author.id))?.colorString;
+  if (color == null) {
+    color = DEFAULT_ROLE_COLOR_HEX;
+  }
+  const width = useContext(ICYMIContext).width;
+  return stateFromStores2 == null ? null : <View style={r12.replyPreview}>
+    <Text variant="text-sm/semibold" color="text-muted" style={{
+      fontStyle: "italic"
+    }}>
+      {intl.string(t.mPPcez)}
+    </Text>
+    <View style={r12.replyInner}>
+      <Avatar animate={false} guildId={guild.id} user={stateFromStores2} size={AvatarSizes.SMALL} />
+      <View style={{
+        gap: 4,
+        width: width - context.inset - 2 * ITEM_PADDING - 2 * PX_12 - 30 - PX_8 - 2
+      }}>
+        <Text variant="text-md/semibold" style={{
+          color
+        }} lineClamp={1}>
+          {getName(guild.id, channel3.id, stateFromStores2)}
+        </Text>
+        <ICYMIContext.Provider value={{
+          width: width - 2 * PX_12 - 30 - PX_8 - 2,
+          margin: context.margin,
+          inset: context.inset
+        }}>
+          <MessageRowContent message={message2} channel={channel3} guild={guild} nested />
+        </ICYMIContext.Provider>
+      </View>
+    </View>
+  </View>;
+};
+PX_12 = Module712.space.PX_12;
+PX_8 = Module712.space.PX_8;
+styles = createICYMIStyles((a0) => ({
+  pressable: {
+    flex: 1,
+    paddingLeft: a0.inset,
+    gap: Module712.space.PX_8
+  },
+  messagePreview: {
+    marginTop: isAndroid() ? -2 : 0,
+    borderRadius: Module712.radii.md,
+    gap: 0
+  },
+  replyPreview: {
+    gap: Module712.space.PX_8,
+    marginHorizontal: a0.margin,
+    padding: PX_12,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    borderRadius: Module712.radii.lg,
+    maxHeight: 132
+  },
+  replyInner: {
+    flexDirection: "row",
+    gap: PX_8,
+    overflow: "hidden"
+  },
+  afterMessage: {
+    paddingLeft: a0.inset,
+    paddingBottom: a0.margin
+  },
+  media: {
+    marginRight: a0.margin
+  },
+  footer: {
+    marginTop: Module712.space.PX_8,
+    marginBottom: a0.margin,
+    gap: Module712.space.PX_8,
+    paddingHorizontal: a0.margin,
+    marginLeft: a0.inset
+  }
+}));
+Component = Module19.memo(function({ message: message3, channel: channel2, guild: guild2, visible, messageContext }) {
+  const stateFromStores2 = useStateFromStores([UserGuildSettingsStore], () => UserGuildSettingsStore.isChannelMuted(channel2.getGuildId(), channel2.id));
+  useEffect(() => {
+    if (guild2?.id != null) {
+      GuildActionCreators.requestMembersById(guild2?.id, message3.author.id);
+    }
+  }, [guild2?.id, message3.author.id]);
+  const iCYMIMessage = useICYMIMessage(channel2.id, messageContext?.reply_message_id);
+  const iCYMIMessage2 = useICYMIMessage(channel2.id, messageContext?.before_message_id);
+  const r14 = styles();
+  const callback2 = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(message3.id, "message", "long_press_channel");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: message3.id,
+      itemType: "message",
+      actionParameters: {
+        actionGestureType: "long_press",
+        actionTargetElement: "item_header",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    openChannelLongPressActionSheet(channel2.id);
+  }, [channel2.id, message3]);
+  const callback3 = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(message3.id, "message", "long_press_message");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: message3.id,
+      itemType: "message",
+      actionParameters: {
+        actionGestureType: "long_press",
+        actionTargetElement: "item_body",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    showLongPressMessageActionSheet({
+      channel: channel2,
+      message: message3,
+      user: UserStore.getUser(message3.author.id)
+    });
+  }, [channel2, message3]);
+  const callback = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(message3.id, "message", "press_message");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: message3.id,
+      itemType: "message",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "item_container",
+        actionIntentType: "navigate",
+        actionDestinationType: "channel"
+      }
+    });
+    navigateToPost(channel2.id, guild2.id, message3.id);
+  }, [channel2.id, guild2.id, message3.id]);
+  return <ICYMICardInCard actionLabel={intl.string(t.hMFMY9)} id={message3.id} interactionType="message" channelId={channel2.id} timestamp={SnowflakeUtils.extractTimestamp(message3.id)} onHeaderPress={callback} onHeaderLongPress={callback2} message={message3} shouldFeatureUser>
+    <PressableHighlight onPress={callback} onLongPress={callback3} unstable_pressDelay={130} accessibilityRole="button" accessibilityLabel={getChannelA11yLabel({
+      channel: channel2
+    })} accessibilityHint={getChannelA11yHint({
+      channel: channel2,
+      muted: stateFromStores2
+    })} style={r14.pressable}>
+      {iCYMIMessage2 != null ? <MessageRowContent message={iCYMIMessage2} channel={channel2} guild={guild2} visible={visible} /> : null}
+      <MessageRowContent message={message3} channel={channel2} guild={guild2} visible={visible} />
+      {iCYMIMessage != null ? <ReplyMessageContent message={iCYMIMessage} channel={channel2} guild={guild2} /> : null}
+    </PressableHighlight>
+    <View style={r14.footer}>
+      <ICYMICardInteractionRow message={message3} channel={channel2} guild={guild2} backgroundVariant="base" id={message3.id} itemType="message" />
+    </View>
+  </ICYMICardInCard>;
+});
+export default function MessageRowWrapper(props) {
+  const { message: message4, messageContext, visible } = props;
+  const gravityMessage = useGravityMessage(message4);
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(gravityMessage.getChannelId()));
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(stateFromStores?.guild_id));
+  const stateFromStores3 = useStateFromStores([RelationshipStore], () => RelationshipStore.isBlockedOrIgnored(gravityMessage.author.id));
+  return stateFromStores == null ? null : stateFromStores2 == null ? null : stateFromStores3 ? null : <Component message={gravityMessage} channel={stateFromStores} guild={stateFromStores2} messageContext={messageContext} visible={visible} />;
+};
+export { MessageRowContent };

modules/icymi/native/ICYMIMessageRowPreview.tsx

@@ -0,0 +1,157 @@
+// Metro module 15366 (f15367).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { MessageEmbedTypes } from "../../../Constants";
+import { isMediaAttachment } from "../../forums/ForumPostMediaUtils";
+import { ChannelListLayoutTypes } from "../../main_tabs_v2/ChannelListLayoutTypes";
+import { DEFAULT_OPTIONS } from "../../messages/native/renderer/RenderMessageOptionsContext";
+import isForwardMessage from "../../forwarding/isForwardMessage";
+import useTheme from "../../../hooks/useTheme";
+import { createNativeStyleProperties } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { RenderEmbeds, InlineEmbedMedia, InlineAttachmentMedia } from "../../user_settings/UserSettings";
+import RowGenerator from "../../messages/native/renderer/RowGenerator";
+import ChatItem from "../../../components_native/chat/ChatItem";
+import { MessageContextType } from "../../messages/native/renderer/RowGeneratorTypes";
+import { intl, t } from "../../../intl/index.native";
+const ICYMIMessageRowPreview = function ICYMIMessageRowPreview(props) {
+  const { message: message4, lineClamp, messageSizeCacheRef, messageOptions, maxHeight, pointerEvents = "none" } = props;
+  const theme = useTheme();
+  let c21911_2 = createNativeStyleProperties({
+    seeMoreLabelColor: Module712.colors.TEXT_DEFAULT
+  })(theme);
+  const setting = RenderEmbeds.getSetting();
+  const setting2 = InlineEmbedMedia.getSetting();
+  const setting3 = InlineAttachmentMedia.getSetting();
+  return <ChatItem pointerEvents={pointerEvents} horizontalOffset={0} modifyRow={function modifyRow(a0) {
+    a0.contextType = MessageContextType.SEARCH;
+    if (lineClamp != null) {
+      a0.truncation = {
+        numberOfLines: lineClamp,
+        expandable: false,
+        seeMoreLabel: intl.string(t.qCozu3),
+        seeMoreLabelColor: c21911_2.seeMoreLabelColor
+      };
+    }
+  }} message={message4} rowGenerator={useMemo(() => {
+    const rowGenerator = new RowGenerator();
+    rowGenerator.setOptions({
+      renderEmbeds: setting,
+      inlineEmbedMedia: setting2,
+      inlineAttachmentMedia: setting3,
+      renderReactions: false,
+      animateEmoji: false,
+      gifAutoPlay: false,
+      renderReplies: false,
+      renderCodedLinks: false,
+      renderGiftCode: false,
+      renderActivityInviteEmbed: false,
+      renderThreadEmbeds: false,
+      renderForumPostActions: false,
+      ignoreMentioned: true,
+      enableSwipeActions: false,
+      renderExecutedCommands: false,
+      useAlternateEmbedColors: true,
+      ...messageOptions
+    });
+    return rowGenerator;
+  }, [setting, setting2, setting3, messageOptions])} messageSizeCacheRef={messageSizeCacheRef} maxHeight={maxHeight} />;
+};
+const r24 = Module19.memo(function({ message, messageOptions: messageOptions2, ...rest }) {
+  let c21912_1 = rest;
+  const memo = useMemo(() => {
+    const r5 = message.set("content", null);
+    const r13 = r5.set("embeds", r5.embeds.filter(({ type }) => type === MessageEmbedTypes.IMAGE || type === MessageEmbedTypes.GIFV));
+    return r13.set("attachments", r13.attachments.filter((attachment) => isMediaAttachment(attachment))).set("editedTimestamp", null);
+  }, [message]);
+  return <ICYMIMessageRowPreview {...useMemo(() => {
+    let muted = c21912_1.muted;
+    if (muted == null) {
+      muted = false;
+    }
+    return {
+      message: memo,
+      layout: ChannelListLayoutTypes.COZY,
+      muted,
+      lineClamp: c21912_1.lineClamp
+    };
+  }, [memo, rest.muted, rest.lineClamp])} messageOptions={{
+    ...DEFAULT_OPTIONS,
+    ignoreMentioned: true,
+    renderReplies: false,
+    renderThreadEmbeds: false,
+    renderReactions: false,
+    renderEmbeds: true,
+    gifAutoPlay: true,
+    animateEmoji: true,
+    renderPolls: true,
+    inlineEmbedMedia: true,
+    renderForumPostActions: false,
+    renderAttachments: true,
+    ...messageOptions2
+  }} />;
+});
+const r27 = Module19.memo(function({ message: message2, messageOptions: messageOptions2, ...rest }) {
+  let c21913_1 = rest;
+  const memo2 = useMemo(() => {
+    const r7 = message2.set("content", null);
+    const r17 = r7.set("embeds", r7.embeds.filter(({ type }) => !(type === MessageEmbedTypes.IMAGE || type === MessageEmbedTypes.GIFV)).slice(0, 1));
+    return r17.set("attachments", r17.attachments.filter((attachment) => !isMediaAttachment(attachment)).slice(0, 1)).set("editedTimestamp", null);
+  }, [message2]);
+  return <ICYMIMessageRowPreview {...useMemo(() => {
+    let muted = c21913_1.muted;
+    if (muted == null) {
+      muted = false;
+    }
+    return {
+      message: memo2,
+      layout: ChannelListLayoutTypes.COZY,
+      muted,
+      lineClamp: c21913_1.lineClamp
+    };
+  }, [memo2, rest.muted, rest.lineClamp])} messageOptions={{
+    ...DEFAULT_OPTIONS,
+    ignoreMentioned: true,
+    renderReplies: false,
+    renderThreadEmbeds: false,
+    renderReactions: false,
+    renderEmbeds: true,
+    renderAttachments: true,
+    ...messageOptions2
+  }} />;
+});
+const r30 = Module19.memo(function({ message: message3, messageOptions: messageOptions2, ...rest }) {
+  let c21914_1 = rest;
+  const memo3 = useMemo(() => {
+    let muted = c21914_1.muted;
+    if (muted == null) {
+      muted = false;
+    }
+    return {
+      message: message3,
+      lineClamp: c21914_1.lineClamp,
+      layout: ChannelListLayoutTypes.COZY,
+      muted,
+      pointerEvents: c21914_1.pointerEvents
+    };
+  }, [message3, rest.lineClamp, rest.muted, rest.pointerEvents]);
+  const isForwardMessage2 = isForwardMessage(message3);
+  return <ICYMIMessageRowPreview {...memo3} messageOptions={{
+    ...DEFAULT_OPTIONS,
+    ignoreMentioned: true,
+    renderReplies: false,
+    renderThreadEmbeds: false,
+    renderReactions: false,
+    gifAutoPlay: true,
+    animateEmoji: true,
+    renderPolls: true,
+    renderForumPostActions: false,
+    renderAttachments: isForwardMessage2,
+    renderEmbeds: isForwardMessage2,
+    inlineEmbedMedia: isForwardMessage2,
+    ...messageOptions2
+  }} seeMoreLabel="..." />;
+});
+export { r24 as MediaOnlyRowPreview };
+export { r27 as NonMediaEmbedsRowPreview };
+export { r30 as MessageRowPreview };

modules/icymi/native/ICYMIServerRecommendationRow.tsx

@@ -0,0 +1,208 @@
+// Metro module 15387 (f15388).
+import _asyncToGenerator from "../../../_bundle/_asyncToGenerator";
+import { useMemo, useCallback, useState } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import GuildStore from "../../../stores/GuildStore";
+import ICYMIStore from "../ICYMIStore";
+import { GuildFeatures, AnalyticsPages, AnalyticsSections, AnalyticsObjects } from "../../../Constants";
+import { jsx } from "react/jsx-runtime";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import { fromClientDiscoverableGuild } from "../../../utils/GuildRecordUtils";
+import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
+import FastImage from "../../../components_native/common/FastImage";
+import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import GuildActionCreators from "../../../actions/GuildActionCreators";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Separator } from "./ICYMIShared";
+import FastestList_android from "../../fastest_list/FastestList.android";
+function $mk116937($env) {
+  return function*() {
+    let env31760 = {
+      $parent: $env
+    };
+    env31760[1] = 0;
+    env31760[2] = 0;
+    const r22 = env31760.$parent;
+    env31760[0] = r22;
+    yield ICYMIActionCreators.reloadICYMITab();
+    const r43 = env31760[0].$parent;
+    yield (0, r43[1])(r43[2][17]).getGuildChannelScores();
+    const r65 = env31760[0].$parent;
+    (0, r65[1])(r65[2][17]).getRecommendedGuilds();
+  };
+}
+let FeaturedServer, RecommendedGuildsRow, c10939_17;
+let env10939 = {};
+const CutoutGuildBanner = function CutoutGuildBanner(props) {
+  const guild = props.guild;
+  const r14 = c10939_17();
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const r24 = stateFromStores ? !stateFromStores : guild.features.has(GuildFeatures.ANIMATED_BANNER);
+  const source = guild.banner != null ? AvatarUtils.getAnimatableSourceWithFallback(r24, (a0) => AvatarUtils.getGuildBannerSource({
+    id: guild.id,
+    banner: guild.banner
+  }, a0)) : void 0;
+  return <View style={r14.bannerImage}>
+    <ClipView cutouts={[{
+      shape: CutoutShape.RoundedRect,
+      x: 8,
+      y: 46,
+      width: 56,
+      height: 56,
+      cornerRadius: 20
+    }]}>
+      {guild.banner != null ? <FastImage style={r14.bannerImage} source={source} resizeMode="cover" /> : <View style={[r14.bannerImage, r14.emptyBanner]} />}
+    </ClipView>
+    <GuildIcon style={r14.guildIcon} guild={useMemo(() => fromClientDiscoverableGuild(guild), [guild])} size={GuildIconSizes.LARGE} animate={!stateFromStores} />
+  </View>;
+};
+FeaturedServer = function FeaturedServer(props) {
+  let setState;
+  const guild2 = props.guild;
+  setState = void 0;
+  const r9 = c10939_17();
+  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guild2.id) != null);
+  const callback = useCallback(async () => {
+    let c28015_0, c28015_1;
+    L14: {
+      let env30874;
+      c28015_1 = void 0;
+      const r10 = env30874 = {
+        $parent: env10939
+      };
+      c28015_0 = r10;
+      env30874[0] = void 0;
+      setState(true);
+      ICYMIActionCreators.itemInteracted("recommended_guilds", "recommended_guilds", "press_join_guild");
+      ICYMIActionCreators.feedItemActioned({
+        itemId: guild2.id,
+        itemType: "recommended_guilds",
+        actionParameters: {
+          actionGestureType: "press",
+          actionTargetElement: "item_container",
+          actionIntentType: "join",
+          actionDestinationType: "guild"
+        }
+      });
+      if (await ICYMIActionCreators.gravityJoinGuild([guild2.id], "recommended_guilds")) {
+        const r69 = c28015_0;
+        env30874[0] = {
+          state: {
+            analyticsSource: {
+              page: AnalyticsPages.ICYMI,
+              section: AnalyticsSections.ICYMI_RECOMMENDED_SERVERS,
+              object: AnalyticsObjects.LIST_ITEM
+            }
+          }
+        };
+        ICYMIActionCreators.addedRecommendedGuild();
+        ICYMIActionCreators.fetchDehydrated({
+          isReloading: true,
+          forceRefresh: true
+        }).then((0, _asyncToGenerator)($mk116937(r69)));
+        await GuildActionCreators.transitionToGuildSync(guild2.id, {
+          ...env30874[0]
+        });
+        (0, setState)(false);
+        break L14;
+      }
+      (0, setState)(false);
+      ToastActionCreators.open({
+        key: "RecommeendedServersRow",
+        content: intl.string(t.CG4Hks)
+      });
+      return void 0;
+    }
+  }, [guild2.id]);
+  let loading;
+  [loading, setState] = useState(false);
+  return <View style={r9.featuredServerContainer}>
+    <CutoutGuildBanner guild={guild2} />
+    <View style={r9.featuredServerInnerContainer}>
+      <Text maxFontSizeMultiplier={1} lineClamp={1} style={r9.featuredServerTitle} variant="text-md/semibold" color="mobile-text-heading-primary">{guild2.name}</Text>
+      <Text maxFontSizeMultiplier={1} lineClamp={3} variant="text-xs/normal" color="text-default">{guild2.description}</Text>
+    </View>
+    <View style={r9.buttonContainer}>
+      <Button disabled={stateFromStores} loading={loading} text={stateFromStores ? intl.string(t.cEnaWx) : intl.string(t.VJlc0S)} size="sm" onPress={callback} grow />
+    </View>
+  </View>;
+};
+RecommendedGuildsRow = function RecommendedGuildsRow(props) {
+  const discoverableGuilds = props.discoverableGuilds;
+  const callback = useCallback((a0, a1) => {
+    const guild3 = discoverableGuilds[a1];
+    return guild3 != null ? (0, jsx)(FeaturedServer, {
+      guild: guild3
+    }) : null;
+  }, [discoverableGuilds]);
+  return discoverableGuilds.length !== 0 ? <FastestList_android sections={[discoverableGuilds.length]} insetStart={Module712.space.PX_16} renderItem={callback} estimatedListSize="windowSize" itemSize={200 + Module712.space.PX_16} horizontal listId="recommended-servers-list" showsHorizontalScrollIndicator={false} /> : null;
+};
+c10939_17 = createICYMIStyles((a0) => ({
+  container: {
+    marginVertical: Module712.space.PX_24
+  },
+  title: {
+    marginBottom: Module712.space.PX_8,
+    marginHorizontal: a0.margin
+  },
+  subtitle: {
+    marginBottom: Module712.space.PX_16,
+    marginHorizontal: a0.margin
+  },
+  featuredServerInnerContainer: {
+    marginHorizontal: Module712.space.PX_12,
+    marginTop: 36
+  },
+  buttonContainer: {
+    position: "absolute",
+    bottom: Module712.space.PX_12,
+    left: Module712.space.PX_12,
+    right: Module712.space.PX_12
+  },
+  featuredServerTitle: {
+    marginBottom: Module712.space.PX_8
+  },
+  guildIcon: {
+    position: "absolute",
+    top: 50,
+    left: 12
+  },
+  bannerImage: {
+    height: 72,
+    width: 200
+  },
+  emptyBanner: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  featuredServerContainer: {
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    height: 244,
+    width: 200,
+    overflow: "hidden"
+  }
+}));
+export function ICYMIServerRecommendationRow() {
+  const stateFromStoresArray = useStateFromStoresArray([ICYMIStore], () => ICYMIStore.getDiscoverableGuilds());
+  const r16 = c10939_17();
+  return stateFromStoresArray.length !== 0 ? <>
+    <View style={r16.container}>
+      <Text style={r16.title} variant="heading-lg/semibold" color="mobile-text-heading-primary">
+        {intl.string(t.lv1tce)}
+      </Text>
+      <Text style={r16.subtitle} variant="heading-sm/normal" color="text-muted">
+        {intl.string(t.x4OezN)}
+      </Text>
+      <RecommendedGuildsRow discoverableGuilds={stateFromStoresArray} />
+    </View>
+    <Separator />
+  </> : null;
+}

modules/icymi/native/ICYMISettingsActionSheet.tsx

@@ -0,0 +1,102 @@
+// Metro module 15324 (f15325).
+import { View } from "react-native";
+import ReadStateStore from "../../../stores/ReadStateStore";
+import ICYMIFiltersStore from "../ICYMIFiltersStore";
+import ICYMIStore from "../ICYMIStore";
+import { AnalyticsObjectTypes, AnalyticsObjects } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStoresObject } from "../../../_bundle/Module589";
+import { ICYMIStaffDebuggingUtilityExperiment } from "../ICYMIExperiment";
+import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
+import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
+import { intl, t } from "../../../intl/index.native";
+import { TableSwitchRow } from "../../../design/components/TableRow/native/TableSwitchRow.native";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
+import { ICYMIItemTypes } from "../ICYMITypes";
+import { ChannelTypes } from "../../../_bundle/Module692";
+import SnowflakeUtils from "../../../utils/SnowflakeUtils";
+import { ack } from "../../../actions/ReadStateActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { regenerateFeedAndClearReadStates } from "../ICYMIUtils";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { ICYMI_CUSTOM_SCORES_MODAL_KEY } from "./custom_scores/ICYMICustomScoreTypes";
+const useStyles = createStyles({
+  padding: {
+    bottomPadding: Module712.space.PX_16,
+    width: "100%"
+  }
+});
+export default function ICYMISettingsActionSheet() {
+  const stateFromStoresObject = useStateFromStoresObject([ICYMIFiltersStore], () => ICYMIFiltersStore.getState());
+  const styles = useStyles();
+  const enabled = ICYMIStaffDebuggingUtilityExperiment.useConfig({
+    location: "settings action sheet"
+  }).enabled;
+  const props = {
+    title: intl.string(t["7Si8Ul"]),
+    hasIcons: false,
+    children: null
+  };
+  let r43 = null;
+  if (enabled) {
+    const props2 = {
+      label: intl.string(t["3wDyfQ"]),
+      value: null,
+      onValueChange: null
+    };
+    let filterStaffContent = stateFromStoresObject.filterStaffContent;
+    if (filterStaffContent == null) {
+      filterStaffContent = false;
+    }
+    props2.value = filterStaffContent;
+    props2.onValueChange = () => {
+      ICYMIActionCreators.setFilters({
+        ...stateFromStoresObject,
+        filterStaffContent: !stateFromStoresObject.filterStaffContent
+      });
+      ICYMIActionCreators.fetchDehydrated();
+    };
+    r43 = <>
+      <TableSwitchRow {...props2} />
+      <TableRow label="Clear read states" onPress={() => {
+        ICYMIStore.getDehydratedItems().forEach((item) => {
+          if (item.type === ICYMIItemTypes.MESSAGE && item.data.channel_type === ChannelTypes.GUILD_ANNOUNCEMENT && SnowflakeUtils.compare(ReadStateStore.ackMessageId(item.data.channel_id), item.data.message_id) >= 0) {
+            ack(item.data.channel_id, {
+              object: AnalyticsObjects.ACK_GRAVITY_CLEAR_READ_STATES_BUTTON,
+              objectType: AnalyticsObjectTypes.ACK_SEMI_AUTOMATIC
+            }, true, true, SnowflakeUtils.atPreviousMillisecond(item.data.message_id));
+          }
+        });
+        ICYMIActionCreators.clearReadStates();
+        ActionSheetActionCreators.hideActionSheet();
+      }} />
+      <TableRow label="Regenerate feed and clear read states" onPress={async () => {
+        let c27992_0;
+        c27992_0 = void 0;
+        await regenerateFeedAndClearReadStates(AnalyticsObjects.ACK_GRAVITY_REGENERATE_FEED_AND_CLEAR_READ_STATES_BUTTON);
+        ActionSheetActionCreators.hideActionSheet();
+      }} />
+    </>;
+  }
+  props.children = [r43, <TableRow label={intl.string(t.Eorjmy)} onPress={() => {
+    ICYMIActionCreators.itemInteracted("icymi_settings_action_sheet", "icymi_settings_action_sheet", "custom_scoring_button");
+    ICYMIActionCreators.feedPageActioned({
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "tune_settings_button",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    ModalActionCreators.pushLazy(import("./custom_scores/ICYMICustomScoresModal"), {}, ICYMI_CUSTOM_SCORES_MODAL_KEY, {
+      presentation: "modal"
+    });
+    ActionSheetActionCreators.hideActionSheet();
+  }} />];
+  return <ActionSheet showGradient startExpanded>
+    <TableRowGroup {...props} />
+    <View style={styles.padding} />
+  </ActionSheet>;
+};

modules/icymi/native/ICYMIShareModal.tsx

@@ -0,0 +1,367 @@
+// Metro module 15372 (f15373).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import _asyncToGenerator from "../../../_bundle/_asyncToGenerator";
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import "../../../stores/DraftStore";
+import "../../../stores/UploadAttachmentStore";
+import { AbortCodes } from "../../../Constants";
+import { UserRowModes } from "../../main_tabs_v2/native/shared_components/user_list/UserRowConstants";
+import { MessageSendLocation } from "../../messages/MessageConstants";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { SHARE_EVENT_DETAILS_LINK } from "../../guild_scheduled_events/utils/ShareEventUtils";
+import { intl, t } from "../../../intl/index.native";
+import { sendMessageWithEmbed } from "../../content_inventory/reactionUtils";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import useColorThemeBackground from "../../client_themes/native/useColorThemeBackground";
+import { useClientThemesOverride } from "../../client_themes/native/ClientThemesOverrides";
+import validateOptions from "../../../_bundle/validateOptions";
+import ThemedGradient from "../../client_themes/native/ThemedGradient";
+import { OverlayOpacity } from "../../client_themes/native/ClientThemesUtils";
+import { ThemeContextProvider } from "../../../_bundle/Module3901";
+import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
+import { useShareChatInputActions } from "../../share/native/useShareChatInputActions";
+import ShareChatInput from "../../share/native/ShareChatInput";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { getOrResolveChannelIdFromDestinationId } from "../../share/formatResults";
+import { isNotNullish } from "../../../utils/GlobalUtils";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import { isAndroid, isIOS } from "../../../utils/PlatformUtils";
+import { Header } from "../../../_bundle/Module5150";
+import { GenericHeaderTitle } from "../../main_tabs_v2/native/shared_components/HeaderShared";
+import { getHeaderCloseButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
+import SearchableDestinationList from "../../share/native/SearchableDestinationList";
+function $mk118475($env) {
+  return (a0) => ChannelStore.getChannel(a0);
+}
+function $mk118476($env) {
+  return function() {
+    let env32068 = {
+      $parent: $env
+    };
+    env32068[0] = (0, _asyncToGenerator)(function*(c32144_0) {
+      L20: {
+        const r15 = env32068.$parent.$parent.$parent;
+        let env32177 = {
+          $parent: r15
+        };
+        env32177[0] = c32144_0;
+        const r16 = env32068.$parent[0];
+        const r18 = r16 != null && r16.trim().length > 0 ? `${r16}
+    
+    ${env32068.$parent.$parent[1]}` : env32068.$parent.$parent[1];
+        const r45 = r15[1];
+        const r46 = r15[2];
+        const r51 = r45(r46[31]).parse(c32144_0, r18);
+        const r20 = env32068.$parent.$parent;
+        const r52 = r20[3];
+        if (r52 == null) {
+          const r54 = r20[2] != null && r20[7] != null;
+          let attachmentsToUpload = void 0;
+          if (r54) {
+            const r19 = r45(r46[32]);
+            const uri = r20[7];
+            const r21 = r15[0];
+            const r71 = {
+              channelId: c32144_0.id,
+              file: {
+                uri,
+                originalUri: uri,
+                id: r21(r46[33]).v4(),
+                platform: r21(r46[34]).UploadPlatform.REACT_NATIVE
+              },
+              draftType: null
+            };
+            const r81 = r15[8];
+            r71.draftType = r81.ChannelMessage;
+            r19.addFile(r71);
+            attachmentsToUpload = r15[9].getUploads(c32144_0.id, r81.ChannelMessage);
+            r45(r46[32]).clearAll(c32144_0.id, r81.ChannelMessage);
+          }
+          yield r45(r46[35]).sendMessage(c32144_0.id, r51, false, {
+            location: r15[12].ICYMI,
+            attachmentsToUpload,
+            onAttachmentUploadError: (a0, a1, a2) => {
+              const r1 = env32177.$parent;
+              (0, r1[0])(r1[2][36]).handleUploadMessageAttachmentsErrors({
+                file: a0,
+                guildId: env32177[0].getGuildId(),
+                analyticsLocations: [],
+                code: a1,
+                reason: a2
+              });
+            }
+          });
+          break L20;
+        }
+        r52(c32144_0);
+        return void 0;
+      }
+    });
+    return function(a0) {
+      return env32068[0].apply(this, arguments);
+    };
+  };
+}
+let GravityShareFooter, ICYMIShareModal, useStyles;
+let env10924 = {};
+const Screenshot = function Screenshot(props) {
+  const { render, setUri } = props;
+  const styles = useStyles();
+  const ref = useRef(null);
+  useEffect(() => {
+    setTimeout(() => {
+      const current = ref.current;
+      const r2 = current == null;
+      let r7 = void 0;
+      if (!r2) {
+        const capture = current.capture;
+        r7 = capture == null ? void 0 : capture.call(current).then((result) => {
+          setUri(result);
+        });
+      }
+      return r7;
+    }, 500);
+  }, [setUri]);
+  return <View style={{
+    position: "absolute",
+    top: -1000,
+    overflow: "hidden"
+  }}>
+    <View style={[styles.preview, {
+      width: useWindowDimensions_native().width
+    }]}>
+      {jsx(validateOptions, {
+        ref,
+        options: {
+          fileName: "icymi_content",
+          format: "png",
+          quality: 1
+        },
+        children: (0, jsxs)(View, {
+          style: styles.base,
+          children: [<ThemedGradient absolute wide tall mix mixAmount={{
+            dark: OverlayOpacity.LEVEL_7,
+            light: OverlayOpacity.LEVEL_8
+          }} />, <ThemeContextProvider gradient={useColorThemeBackground()}>
+            <View style={[styles.contentContainer, useClientThemesOverride()]}>
+              {render()}
+            </View>
+          </ThemeContextProvider>]
+        })
+      })}
+    </View>
+  </View>;
+};
+GravityShareFooter = function GravityShareFooter(props) {
+  const { count, isSending, onSend } = props;
+  const styles = useStyles();
+  let c21931_1 = styles;
+  const [state, onChange] = useState("");
+  const insets = useSafeAreaInsetsKeyboardAware_native({
+    includeKeyboardHeight: true
+  }).insets;
+  const shareChatInputActions = useShareChatInputActions(onChange);
+  const { textInputRef, handleSelectionChange, handleMessageFocus, handleMessageBlur, handlePressEmoji } = shareChatInputActions;
+  const callback = useCallback(() => {
+    onSend(state);
+  }, [state, onSend]);
+  const text = count <= 1 ? intl.string(t.TXNS7S) : intl.formatToPlainString(t.jWtYUm, {
+    count
+  });
+  const memo = useMemo(() => [c21931_1.footer, {
+    paddingBottom: c21931_1.footer.paddingVertical + insets.bottom
+  }], [styles.footer, insets.bottom]);
+  const disabled = count === 0;
+  return disabled ? null : <View style={memo}>
+    <ShareChatInput inputRef={textInputRef} text={state} onChange={onChange} onSelectionChange={handleSelectionChange} onFocus={handleMessageFocus} onBlur={handleMessageBlur} onPressEmoji={handlePressEmoji} onSend={callback} disabled={isSending} />
+    <Button variant="primary" size="md" text={text} disabled={disabled} onPress={isSending ? void 0 : callback} loading={isSending} />
+  </View>;
+};
+ICYMIShareModal = function ICYMIShareModal(props) {
+  let env21932 = {
+    $parent: env10924
+  };
+  const title = props.title;
+  env21932[0] = title;
+  const originDestinationId = props.originDestinationId;
+  env21932[1] = props.linkText;
+  const render = props.render;
+  env21932[2] = render;
+  env21932[3] = props.forwardToChannel;
+  env21932[4] = props.onShare;
+  env21932[5] = void 0;
+  env21932[6] = void 0;
+  env21932[7] = void 0;
+  env21932[9] = void 0;
+  env21932[10] = void 0;
+  env21932[8] = function _handleSendForwards() {
+    const r9 = async (c30869_0) => {
+      let c30869_1, c30869_2;
+      L16: {
+        let env31757;
+        const r8 = env21932;
+        c30869_2 = r8;
+        const r10 = env31757 = {
+          $parent: r8
+        };
+        c30869_1 = r10;
+        env31757[0] = c30869_0;
+        (0, env21932[6])(true);
+        if (env21932[2] == null || env21932[7] != null) {
+          const r49 = await Promise.all(env21932[5].map(getOrResolveChannelIdFromDestinationId));
+          const r57 = c30869_1;
+          r49.map($mk118475(env21932.$parent)).filter(isNotNullish).forEach($mk118476(r57)());
+          ModalActionCreators.pop();
+          if (env21932[4] == null) {
+            break L16;
+          }
+          (0, env21932[4])();
+          break L16;
+        }
+        return void 0;
+      }
+    };
+    env21932[8] = r9;
+    return r9.apply(this, arguments);
+  };
+  const r6 = _slicedToArray(useState([]), 2);
+  const r33 = r6[0];
+  env21932[5] = r33;
+  const onSelectedDestinationChange = r6[1];
+  const length = r33.length;
+  const r36 = _slicedToArray(useState(false), 2);
+  const isSending = r36[0];
+  env21932[6] = r36[1];
+  const r41 = _slicedToArray(useState(null), 2);
+  env21932[7] = r41[0];
+  const setUri2 = r41[1];
+  const callback = useCallback(() => {
+    ModalActionCreators.pop();
+  }, []);
+  const styles = useStyles();
+  const safeAreaInsets_native = useSafeAreaInsets_native();
+  env21932[9] = safeAreaInsets_native;
+  const height = useWindowDimensions_native().height;
+  env21932[10] = height;
+  return <View style={useMemo(() => ({
+    height: isAndroid() ? env21932[10] + env21932[9].bottom : "100%"
+  }), [safeAreaInsets_native.bottom, height])}>
+    <View style={styles.headerContainer}>
+      <Header title={title} headerTitle={() => (0, jsx)(GenericHeaderTitle, {
+        title: env21932[0]
+      })} headerTitleAlign="center" headerStatusBarHeight={isIOS() ? 0 : void 0} headerLeft={getHeaderCloseButton(callback)} />
+    </View>
+    {render != null && <Screenshot render={render} setUri={setUri2} />}
+    <SearchableDestinationList rowMode={UserRowModes.TOGGLE} onSelectedDestinationChange={onSelectedDestinationChange} originDestination={originDestinationId} insetEnd={safeAreaInsets_native.bottom + Module712.space.PX_8 + Module712.space.PX_96} disableGradient disableStickySections />
+    <GravityShareFooter count={length} isSending={isSending} onSend={function handleSendForwards(event) {
+      return env21932[8].apply(this, arguments);
+    }} />
+  </View>;
+};
+useStyles = createStyles({
+  headerContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_8
+  },
+  preview: {
+    borderRadius: Module712.radii.md,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_STRONG
+  },
+  base: {
+    position: "relative"
+  },
+  contentContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  footer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-end",
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_12,
+    gap: Module712.space.PX_12,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_SUBTLE
+  }
+});
+export default ICYMIShareModal;
+export function GuildEventShareModal({ event }) {
+  const linkText = SHARE_EVENT_DETAILS_LINK({
+    guildId: event.guild_id,
+    guildEventId: event.id
+  });
+  return <ICYMIShareModal title={intl.string(t["7TVSLK"])} originDestinationId={event.channel_id != null ? {
+    type: "channel",
+    id: event.channel_id
+  } : void 0} linkText={linkText} />;
+}
+export function GameShareModal(a0) {
+  let env21933 = {
+    $parent: env10924
+  };
+  env21933[0] = a0.content;
+  const r18 = {
+    title: intl.string(t["59CWHK"]),
+    linkText: "",
+    forwardToChannel: null
+  };
+  let c21934_0 = async (channel) => {
+    let c30870_3;
+    let c30870_4 = 0;
+    let c31758_0, c31758_1;
+    L10: {
+      try {
+        c31758_0 = void 0;
+        c30870_4 = 1;
+        await sendMessageWithEmbed({
+          channel,
+          content: "",
+          entry: env21933[0],
+          whenReady: false,
+          doNotNotifyOnError: true,
+          location: MessageSendLocation.ICYMI
+        });
+        c30870_4 = 0;
+      } catch ($e) {
+        const r28 = $e;
+        let r7 = r28;
+        c30870_3 = r28;
+        if (c30870_4 !== 0) {
+          while (true) {
+            try {
+              const r64 = c30870_3;
+              c30870_4 = 0;
+              c31758_1 = r64;
+              c31758_0 = c31758_1.body != null && c31758_1.body.code === AbortCodes.CONTENT_INVENTORY_ENTRY_INVALID_PERMISSION;
+              ToastActionCreators.open({
+                key: "FORWARD_CONTENT_INVENTORY_ENTRY_ERROR",
+                content: c31758_0 ? intl.string(t.BC5vfD) : intl.string(t.F8FvUy)
+              });
+              break L10;
+            } catch (r61) {
+              r7 = r61;
+              c30870_3 = r61;
+              if (c30870_4 === 0) {
+                break;
+              }
+            }
+          }
+        }
+        throw r7;
+      }
+    }
+  };
+  r18.forwardToChannel = function() {
+    return c21934_0.apply(this, arguments);
+  };
+  return <ICYMIShareModal {...r18} />;
+}

modules/icymi/native/ICYMIShared.tsx

@@ -0,0 +1,539 @@
+// Metro module 15361 (f15362).
+import { useCallback, useMemo, useContext, useEffect } from "react";
+import { View } from "react-native";
+import ThreadMessageStore from "../../threads/ThreadMessageStore";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import PermissionStore from "../../../stores/PermissionStore";
+import UserStore from "../../../stores/UserStore";
+import { AnalyticsObjectTypes, AnalyticsObjects, AnalyticsPages, DEFAULT_ROLE_COLOR_HEX, MAX_MESSAGES_FOR_JUMP, MessageFlags, Permissions, Routes } from "../../../Constants";
+import { Fragment } from "react/jsx-runtime";
+import { ContentType } from "../ICYMITypes";
+import { FireIcon } from "../../../design/components/Icon/native/redesign/generated/FireIcon";
+import { ImageIcon } from "../../../design/components/Icon/native/redesign/generated/ImageIcon";
+import { CirclePlayIcon } from "../../../design/components/Icon/native/redesign/generated/CirclePlayIcon";
+import { LightbulbIcon } from "../../../design/components/Icon/native/redesign/generated/LightbulbIcon";
+import { ack } from "../../../actions/ReadStateActionCreators";
+import safeTransitionTo_native from "../../links/safeTransitionTo.native";
+import { runAfterInteractions } from "../../../utils/native/RunAfterInteractionsUtils";
+import MessageActionCreators from "../../../actions/MessageActionCreators";
+import { JumpType } from "../../../flow/Client";
+import { createICYMIStyles } from "./createICYMIStyles";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import Module712 from "../../../_bundle/Module712";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
+import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
+import { useFontScale } from "../../screen/native/useFontScale";
+import { PressableHighlight, PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../design/components/Text/native/Text";
+import { getRelativeTimestamp } from "../../notification_center/NotificationCenterUtils";
+import { openDetailsActionSheet } from "./util/openDetailsActionSheet";
+import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
+import { useStateFromStores, useStateFromStoresObject } from "../../../_bundle/Module589";
+import { useName } from "../../../utils/NicknameUtils";
+import ICYMIActionCreators from "../ICYMIActionCreators";
+import showUserProfileActionSheet from "../../user_profile/native/showUserProfileActionSheet";
+import { AnnouncementsIcon } from "../../../design/components/Icon/native/redesign/generated/AnnouncementsIcon";
+import { contentTypeToText, determineContentType } from "../ICYMIUtils";
+import { useEnsureHydratedUsers } from "../../main_tabs_v2/native/shared_components/happening_now/useEnsureHydratedUsers";
+import { CalendarIcon } from "../../../design/components/Icon/native/redesign/generated/CalendarIcon";
+import { intl, t } from "../../../intl/index.native";
+import { ICYMIContext } from "./ICYMIContext";
+import useTheme from "../../../hooks/useTheme";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { hexWithOpacity } from "../../../utils/ColorUtils";
+import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle, withSequence, withDelay } from "../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../design/animation/reanimated/timing/timing";
+import ChannelActionCreators from "../../../actions/ChannelActionCreators";
+import { ChatIcon } from "../../../design/components/Icon/native/redesign/generated/ChatIcon";
+import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
+import MarkupUtils from "../../markup/MarkupUtils";
+let styles, CutoutGuildIconWithUser, CutoutGuildIcon, GuildContentPost, __initData;
+const Separator = function Separator() {
+  return <View style={styles().separator} />;
+};
+CutoutGuildIconWithUser = function CutoutGuildIconWithUser(props) {
+  const { guild: guild6, author: author3 } = props;
+  return <CutoutGuildIcon guild={guild6} icon={<Avatar animate style={styles().authorIcon} guildId={guild6.id} user={author3} size={AvatarSizes.XSMALL} />} />;
+};
+CutoutGuildIcon = function CutoutGuildIcon(props) {
+  return <View style={{
+    width: 40,
+    height: 40
+  }}>
+    <ClipView cutouts={[{
+      shape: CutoutShape.Circle,
+      x: 16,
+      y: 14,
+      size: 32
+    }]}>
+      <GuildIcon guild={props.guild} size={GuildIconSizes.NORMAL} />
+    </ClipView>
+    {props.icon}
+  </View>;
+};
+GuildContentPost = function GuildContentPost(props) {
+  const { guild, channel, timestamp, hideTimestamp, children, avatar, title, subtitle, id, type, onHeaderPress, onHeaderLongPress, disableInteractions } = props;
+  const r20 = styles();
+  return <>
+    <PressableHighlight onPress={onHeaderPress} onLongPress={onHeaderLongPress} style={r20.content}>
+      <View style={useFontScale() > 1.8 ? r20.channelNameAndAccessoryLarge : r20.channelNameAndAccessory}>
+        <View style={r20.header}>
+          {avatar}
+          <View style={r20.headerInfo}>
+            <View style={r20.title}>
+              <View style={r20.titleLeft}>
+                {title}
+                {hideTimestamp ? !hideTimestamp : <Text lineClamp={1} variant="text-xs/normal" color="text-muted">
+                  {getRelativeTimestamp(timestamp)}
+                </Text>}
+              </View>
+              {disableInteractions ? null : guild == null ? null : <PressableOpacity onPress={() => openDetailsActionSheet({
+                guildId: guild.id,
+                channelId: channel == null ? void 0 : channel.id,
+                id,
+                type
+              })} style={r20.subtitleTrailing} hitSlop={8}>
+                <MoreHorizontalIcon color={Module712.colors.ICON_MUTED} size="sm" />
+              </PressableOpacity>}
+            </View>
+            <View style={r20.subTitleContainer}>
+              <View style={r20.subtitle}>{subtitle}</View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </PressableHighlight>
+    {children}
+  </>;
+};
+styles = createICYMIStyles((a0) => ({
+  simplePostContent: {
+    flex: 1,
+    marginTop: isAndroid() ? -2 : 0,
+    overflow: "hidden"
+  },
+  content: {
+    flex: 1,
+    marginTop: isAndroid() ? -2 : 0,
+    overflow: "hidden",
+    paddingTop: a0.margin
+  },
+  insetIconWrapper: {
+    position: "absolute",
+    right: -4,
+    bottom: -2,
+    padding: 4,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND
+  },
+  authorIcon: {
+    position: "absolute",
+    right: -4,
+    bottom: -2
+  },
+  moreDetailsIcon: {
+    tintColor: Module712.colors.TEXT_MUTED
+  },
+  channelNameAndAccessory: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: a0.margin,
+    marginHorizontal: a0.margin
+  },
+  channelNameAndAccessoryLarge: {
+    flexDirection: "column",
+    paddingBottom: a0.margin,
+    marginHorizontal: a0.margin
+  },
+  header: {
+    flexDirection: "row",
+    flexGrow: 1
+  },
+  headerInfo: {
+    flexGrow: 1,
+    flexShrink: 1,
+    marginLeft: a0.margin
+  },
+  title: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 2
+  },
+  titleLeft: {
+    flexShrink: 1,
+    flexGrow: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  subTitleContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    borderRadius: Module712.radii.sm
+  },
+  subtitle: {
+    flexShrink: 1,
+    flexGrow: 0,
+    width: "100%"
+  },
+  genContentSubtitle: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_4
+  },
+  genContentSubtitleChannel: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    flex: 1
+  },
+  subtitleTrailing: {
+    paddingVertical: 1
+  },
+  separator: {
+    height: 1,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  eventsSubtitle: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  comments: {
+    padding: 8,
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+    borderRadius: Module712.radii.md,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  recentCommentText: {
+    flexGrow: 1,
+    flexShrink: 1,
+    marginRight: 12
+  },
+  commentCount: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    justifySelf: "end"
+  },
+  commentsIcon: {
+    width: 20,
+    height: 20,
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  chevron: {
+    tintColor: Module712.colors.TEXT_MUTED
+  }
+}));
+__initData = {
+  code: "function ICYMISharedTsx1(){const{interpolateColor,progress,bgColor,bgColorHighlighted}=this.__closure;return{backgroundColor:interpolateColor(progress.get(),[0,1],[bgColor,bgColorHighlighted])};}"
+};
+export function navigateToPost(a0, a1, a2) {
+  const channelId = a0;
+  const messageId = a2;
+  setTimeout(() => {
+    ack(channelId, {
+      page: AnalyticsPages.ICYMI,
+      object: AnalyticsObjects.ACK_MESSAGE_VIEWED,
+      objectType: AnalyticsObjectTypes.ACK_SEMI_AUTOMATIC
+    }, true, true, messageId);
+  }, 1500);
+  safeTransitionTo_native(Routes.CHANNEL(a1, a0, a2), {
+    openChannel: true,
+    navigationReplace: false
+  });
+  if (a2 != null) {
+    runAfterInteractions(() => {
+      MessageActionCreators.fetchMessages({
+        channelId,
+        limit: MAX_MESSAGES_FOR_JUMP,
+        jump: {
+          messageId,
+          flash: true,
+          jumpType: JumpType.ANIMATED
+        }
+      });
+    }, 150);
+  }
+}
+export { Separator };
+export function truncateUsername(a0) {
+  return a0.length > 20 ? `${a0.slice(0, 17)}...` : a0;
+}
+export { CutoutGuildIcon };
+export { GuildContentPost };
+export function AnnouncementContentPost(props) {
+  const { guild: guild2, channel: channel2, author, timestamp, children, id: id2, mentioned, onHeaderPress, onHeaderLongPress } = props;
+  const r15 = styles();
+  let color = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getMember(guild2.id, author.id))?.colorString;
+  if (color == null) {
+    color = DEFAULT_ROLE_COLOR_HEX;
+  }
+  const name = useName(guild2.id, channel2.id, author);
+  return <GuildContentPost guild={guild2} channel={channel2} timestamp={timestamp} avatar={<CutoutGuildIconWithUser guild={guild2} author={author} />} title={<Text key={channel2.id} style={{
+    maxWidth: 225
+  }} lineClamp={1} variant="text-sm/medium" color="text-muted">{guild2.name}</Text>} subtitle={<Text lineClamp={2} variant="text-md/normal" color="text-default" style={r15.subtitle}>
+    <Text variant="text-md/semibold" onPress={useCallback(() => {
+      ICYMIActionCreators.itemInteracted(id2, "announcement", "open_profile");
+      ICYMIActionCreators.feedItemActioned({
+        itemId: id2,
+        itemType: "announcement",
+        actionParameters: {
+          actionGestureType: "press",
+          actionTargetElement: "item_header",
+          actionIntentType: "open",
+          actionDestinationType: "user"
+        }
+      });
+      showUserProfileActionSheet({
+        userId: author.id,
+        channelId: channel2.id
+      });
+    }, [author.id, channel2.id, id2])} style={{
+      color
+    }}>
+      {(name.length > 20 ? `${name.slice(0, 17)}...` : name) + " "}
+    </Text>
+    <AnnouncementsIcon size="sm" color={Module712.colors.TEXT_SUBTLE} />
+    {" " + contentTypeToText(ContentType.ANNOUNCEMENT, mentioned)}
+  </Text>} onHeaderPress={onHeaderPress} onHeaderLongPress={onHeaderLongPress} id={id2} type="announcement">{children}</GuildContentPost>;
+}
+export function GuildEventPost(props) {
+  let props3;
+  let stateFromStores2;
+  const { guild: guild3, channel: channel3, children, event, type: type2, onHeaderPress } = props;
+  stateFromStores2 = void 0;
+  const r14 = styles();
+  let host_id = event.host_id;
+  if (host_id == null) {
+    host_id = event.creator_id;
+  }
+  const creator_id = host_id;
+  useEnsureHydratedUsers(event.guild_id, creator_id != null ? [creator_id] : []);
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(creator_id));
+  stateFromStores2 = useStateFromStores([GuildMemberStore], () => creator_id != null ? GuildMemberStore.getMember(guild3.id, creator_id) : null);
+  const r47 = [stateFromStores, channel3?.id, event.id, , ,];
+  const highestRoleId = stateFromStores2?.highestRoleId;
+  const r52 = () => {
+    if (stateFromStores != null) {
+      ICYMIActionCreators.itemInteracted(event.id, type2, "open_profile");
+      ICYMIActionCreators.feedItemActioned({
+        itemId: event.id,
+        itemType: "guild_event",
+        actionParameters: {
+          actionGestureType: "press",
+          actionTargetElement: "item_header",
+          actionIntentType: "open",
+          actionDestinationType: "user"
+        }
+      });
+      showUserProfileActionSheet({
+        userId: stateFromStores.id,
+        roleId: stateFromStores2?.highestRoleId,
+        channelId: channel3?.id
+      });
+    }
+  };
+  r47[3] = highestRoleId;
+  r47[4] = type2;
+  const callback = useCallback(r52, r47);
+  let color = stateFromStores2?.colorString;
+  if (color == null) {
+    color = DEFAULT_ROLE_COLOR_HEX;
+  }
+  const r55 = event.host_id != null;
+  const props2 = {
+    guild: guild3,
+    channel: channel3,
+    timestamp: 0,
+    hideTimestamp: true,
+    avatar: stateFromStores != null ? <CutoutGuildIconWithUser guild={guild3} author={stateFromStores} /> : <GuildIcon guild={guild3} size={GuildIconSizes.NORMAL} />,
+    title: <Text key={event.id} style={{
+      maxWidth: 225
+    }} lineClamp={1} variant="text-sm/medium" color="text-muted">{guild3.name}</Text>,
+    subtitle: null,
+    id: null,
+    type: null,
+    onHeaderPress: null,
+    children: null
+  };
+  if (stateFromStores != null) {
+    const username = stateFromStores.username;
+    props3 = {
+      children: [<Text variant="text-md/semibold" onPress={callback} style={{
+        color
+      }}>
+        {(username.length > 20 ? `${username.slice(0, 17)}...` : username) + " "}
+      </Text>, <CalendarIcon size="sm" color={Module712.colors.TEXT_SUBTLE} />, r55 ? " " + intl.string(t["42OrO4"]) : " " + intl.string(t.Vu15se)]
+    };
+  } else {
+    props3 = {
+      children: [<CalendarIcon size="sm" color={Module712.colors.TEXT_SUBTLE} />, " " + intl.string(t.T7MIsc)]
+    };
+  }
+  props2.subtitle = <Text lineClamp={2} variant="text-md/normal" color="text-default" style={r14.subtitle}>
+    <Fragment {...props3} />
+  </Text>;
+  props2.id = event.id;
+  props2.type = type2;
+  props2.onHeaderPress = onHeaderPress;
+  props2.children = children;
+  return <GuildContentPost {...props2} />;
+}
+export function MessageContentPost(props) {
+  const { guild: guild4, channel: channel4, timestamp, author: author2, message, children, id: id3, type: type3, onHeaderPress, onHeaderLongPress } = props;
+  const memo = useMemo(() => determineContentType(channel4, message), [channel4, message]);
+  let color = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getMember(guild4.id, author2.id))?.colorString;
+  if (color == null) {
+    color = DEFAULT_ROLE_COLOR_HEX;
+  }
+  const name = useName(guild4.id, channel4.id, author2);
+  const Component = ContentType.POPULAR_MESSAGE === memo ? FireIcon : ContentType.IMAGE === memo ? ImageIcon : ContentType.VIDEO === memo ? CirclePlayIcon : LightbulbIcon;
+  const callback = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(id3, type3, "open_profile");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: id3,
+      itemType: "message",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "item_header",
+        actionIntentType: "open",
+        actionDestinationType: "user"
+      }
+    });
+    showUserProfileActionSheet({
+      userId: author2.id,
+      channelId: channel4.id
+    });
+  }, [author2.id, channel4.id, id3, type3]);
+  return <GuildContentPost guild={guild4} channel={channel4} timestamp={timestamp} avatar={<CutoutGuildIconWithUser guild={guild4} author={author2} />} title={<Text key={channel4.id} style={{
+    maxWidth: 225
+  }} lineClamp={1} variant="text-sm/medium" color="text-default">{guild4.name}</Text>} subtitle={<Text lineClamp={2} variant="text-md/normal" color="text-default" style={{
+    marginRight: useContext(ICYMIContext).margin
+  }}>
+    <Text style={{
+      color
+    }} onPress={callback} variant="text-md/semibold">
+      {(name.length > 20 ? `${name.slice(0, 17)}...` : name) + " "}
+    </Text>
+    <Component size="sm" color={Module712.colors.TEXT_SUBTLE} />
+    {" " + contentTypeToText(memo)}
+  </Text>} onHeaderPress={onHeaderPress} onHeaderLongPress={onHeaderLongPress} id={id3} type={type3}>{children}</GuildContentPost>;
+}
+export function SimplePost(props) {
+  let props2;
+  const { children, hideDivider, highlight = false } = props;
+  let c21903_0 = highlight;
+  const r13 = styles();
+  const token = useToken(Module712.colors.MESSAGE_HIGHLIGHT_BACKGROUND_DEFAULT, useTheme());
+  const bgColorHighlighted = hexWithOpacity(Module712.unsafe_rawColors.BRAND_360, 0.25);
+  let c21903_2 = bgColorHighlighted;
+  const sharedValue = useSharedValue(0);
+  const c = function c() {
+    return {
+      backgroundColor: _ReanimatedRexport.interpolateColor(sharedValue.get(), [0, 1], [token, c21903_2])
+    };
+  };
+  c.__closure = {
+    interpolateColor: _ReanimatedRexport.interpolateColor,
+    progress: sharedValue,
+    bgColor: token,
+    bgColorHighlighted
+  };
+  c.__workletHash = 11116019021445;
+  c.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(c);
+  useEffect(() => {
+    if (c21903_0) {
+      sharedValue.set(withSequence(withTiming(1, {
+        duration: 500
+      }), withDelay(500, withTiming(0, {
+        duration: 350
+      }))));
+    }
+  }, [highlight, sharedValue]);
+  const r56 = {
+    children: null
+  };
+  if (highlight) {
+    r56.children = [<ReanimatedRexport.View style={[r13.simplePostContent, animatedStyle]}>{children}</ReanimatedRexport.View>, hideDivider ? null : <Separator />];
+    props2 = r56;
+  } else {
+    r56.children = [<View style={r13.simplePostContent}>{children}</View>, hideDivider ? null : <Separator />];
+    props2 = r56;
+  }
+  return <Fragment {...props2} />;
+}
+export function ThreadAsComments(props) {
+  const { guild: guild6, parentMessage, onPress: onPress2, style } = props;
+  let inForum = props.inForum;
+  const r14 = styles();
+  if (inForum == null) {
+    inForum = false;
+  }
+  const guild5 = guild6;
+  const parentMessage2 = parentMessage;
+  let c21905_2 = inForum;
+  const stateFromStoresObject = useStateFromStoresObject([ChannelStore, ThreadMessageStore], () => {
+    const r2 = {
+      thread: ChannelStore.getChannel(parentMessage2.id),
+      messageCount: null,
+      mostRecentMessage: null
+    };
+    let messageCount = ThreadMessageStore.getCount(parentMessage2.id);
+    if (messageCount == null) {
+      messageCount = 0;
+    }
+    r2.messageCount = messageCount;
+    r2.mostRecentMessage = ThreadMessageStore.getMostRecentMessage(parentMessage2.id);
+    return r2;
+  });
+  const { thread, messageCount, mostRecentMessage } = stateFromStoresObject;
+  useEffect(() => {
+    if ((parentMessage2.hasFlag(MessageFlags.HAS_THREAD) || c21905_2) && ThreadMessageStore.getMostRecentMessage(parentMessage2.id) == null) {
+      ChannelActionCreators.preload(guild5.id, parentMessage2.id);
+      MessageActionCreators.fetchMessages({
+        channelId: parentMessage2.id,
+        isPreload: true,
+        limit: 25
+      });
+    }
+  }, [guild5.id, inForum, parentMessage]);
+  if (useStateFromStores([PermissionStore], () => PermissionStore.canWithPartialContext(Permissions.VIEW_CHANNEL, {
+    channelId: parentMessage.id
+  }))) {
+    if (thread != null && mostRecentMessage != null) {
+      const r42 = messageCount > 99 ? "99+" : messageCount;
+      return <PressableHighlight style={[r14.comments, style]} onPress={onPress2}>
+        <Avatar user={mostRecentMessage?.author} guildId={thread.guild_id} size={AvatarSizes.XSMALL} />
+        <Text variant="text-sm/semibold" lineClamp={1} style={r14.recentCommentText}>
+          {mostRecentMessage.content.length > 0 ? MarkupUtils.parseInlineReply(mostRecentMessage.content, true) : intl.string(t["6kp9H2"])}
+        </Text>
+        <View style={r14.commentCount}>
+          <ChatIcon style={r14.commentsIcon} />
+          <Text variant="text-sm/bold" color="interactive-text-default">{r42}</Text>
+          <ChevronSmallRightIcon style={r14.chevron} size="xxs" />
+        </View>
+      </PressableHighlight>;
+    }
+    return <PressableHighlight style={[r14.comments, style]} onPress={onPress2}>
+      <Text variant="text-md/semibold" color="text-muted" lineClamp={1} style={r14.recentCommentText}>
+        {intl.string(t.VMWjXW)}
+      </Text>
+      <View style={r14.commentCount}>
+        <ChatIcon style={r14.commentsIcon} />
+        <ChevronSmallRightIcon style={r14.chevron} size="xxs" />
+      </View>
+    </PressableHighlight>;
+  }
+  return null;
+}

modules/icymi/native/ItemDetailsActionSheet.tsx

@@ -0,0 +1,62 @@
+// Metro module 15328 (f15329).
+import { View } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildStore from "../../../stores/GuildStore";
+import ICYMIStore from "../ICYMIStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useChannelName from "../../channel/useChannelName";
+import useDesignToggle from "../../devtools/design_toggles/useDesignToggle";
+import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+import { isChannelCustomScoreEligible } from "../ICYMIUtils";
+import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
+import { ActionSheetIconHeader } from "../../../design/components/Sheet/native/ActionSheetIconHeader.native";
+import { ChannelScoreSettings, GuildScoreSettings } from "./custom_scores/ICYMIContentSettingControl";
+import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
+import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
+const useStyles = createStyles({
+  divider: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  }
+});
+export default function ItemDetailsActionSheet(props) {
+  const { guildId, channelId, id } = props;
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const stateFromStores3 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
+  const channelName = useChannelName(stateFromStores2, true);
+  const stateFromStores = useStateFromStores([ICYMIStore], () => id != null ? ICYMIStore.getDehydratedItem(id) : null);
+  const designToggle = useDesignToggle("show_icymi_debug_scores");
+  const icon = stateFromStores3 != null ? <GuildIcon guild={stateFromStores3} size={GuildIconSizes.LARGE} /> : stateFromStores2 != null ? <Avatar size={AvatarSizes.LARGE} channel={stateFromStores2} /> : void 0;
+  const styles = useStyles();
+  let r16 = stateFromStores2 != null && stateFromStores3 != null && isChannelCustomScoreEligible(stateFromStores2);
+  let subtitle = stateFromStores3?.name;
+  if (subtitle == null) {
+    subtitle = "";
+  }
+  const props2 = {
+    showGradient: true,
+    startExpanded: true,
+    header: <ActionSheetIconHeader icon={icon} title={channelName} subtitle={subtitle} />,
+    children: null
+  };
+  const children = [r16 ? <ChannelScoreSettings channel={stateFromStores2} guild={stateFromStores3} /> : r16, , ,];
+  let r84 = stateFromStores != null && stateFromStores3 != null;
+  if (r84) {
+    if (r16) {
+      r16 = <View style={styles.divider} />;
+    }
+    r84 = <>
+      {r16}
+      <GuildScoreSettings guild={stateFromStores3} />
+    </>;
+  }
+  children[1] = r84;
+  children[2] = stateFromStores != null ? designToggle ? <TableRowGroup title="Debug details" hasIcons={false}>
+    <TableRow label={"Total Score: " + stateFromStores.score} subLabel={JSON.stringify(stateFromStores.score_components)} />
+  </TableRowGroup> : null : null;
+  props2.children = children;
+  return <ActionSheet {...props2} />;
+};

modules/icymi/native/NativeICYMIActionCreators.tsx

@@ -0,0 +1,71 @@
+// Metro module 15333 (f15334).
+import { Endpoints } from "../../../Constants";
+import { icymiEnabled } from "../ICYMIUtils";
+import { HTTP } from "../../../_bundle/sendRequest";
+import Dispatcher from "../../../Dispatcher";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../intl/index.native";
+const r18 = {
+  customScoreGuild: async ({ guildId, channelScores, guildScore }) => {
+    let c27994_0, c27994_2;
+    let c27994_3 = 0;
+    const r12 = void 0;
+    L15: {
+      try {
+        c27994_0 = r12;
+        if (icymiEnabled("customScores")) {
+          c27994_3 = 1;
+          await HTTP.put({
+            url: Endpoints.GRAVITY_CUSTOM_GUILD_SCORES,
+            body: {
+              guild_id: guildId,
+              channel_scores: channelScores == null ? void 0 : channelScores.map((channelScore) => ({
+                channel_id: channelScore.channelId,
+                score: channelScore.score
+              })),
+              guild_score: guildScore
+            },
+            rejectWithError: true
+          });
+          Dispatcher.dispatch({
+            type: "ICYMI_CUSTOM_SCORES_UPDATED",
+            guildId,
+            channelScores,
+            guildScore
+          });
+          ToastActionCreators.open({
+            key: "GravityGuildScore",
+            content: intl.string(t.OMdbs1)
+          });
+          c27994_3 = 0;
+          break L15;
+        }
+      } catch ($e) {
+        const r30 = $e;
+        let r8 = r30;
+        c27994_2 = r30;
+        if (c27994_3 !== 0) {
+          while (true) {
+            try {
+              c27994_3 = 0;
+              ToastActionCreators.open({
+                key: "GravityGuildScore",
+                content: intl.string(t.CG4Hks)
+              });
+              break L15;
+            } catch (r104) {
+              r8 = r104;
+              c27994_2 = r104;
+              if (c27994_3 === 0) {
+                break;
+              }
+            }
+          }
+        }
+        throw r8;
+      }
+      return void 0;
+    }
+  }
+};
+export default r18;

modules/icymi/native/NativeICYMIUtils.tsx

@@ -0,0 +1,11 @@
+// Metro module 15335 (f15336).
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { ICYMI_INFO_MODAL_KEY } from "./info_modal/ICYMIInfoModalTypes";
+export function pushICYMIInfoModal({ extendedOnboarding, skipIntro }) {
+  ModalActionCreators.pushLazy(import("./info_modal/ICYMIInfoModal"), {
+    extendedOnboarding,
+    skipIntro
+  }, ICYMI_INFO_MODAL_KEY, {
+    presentation: "fullScreenModal"
+  });
+}

modules/icymi/native/NewContentPill.tsx

@@ -0,0 +1,184 @@
+// Metro module 15391 (f15392).
+import { useState, useMemo, useLayoutEffect, useEffect, useCallback } from "react";
+import { ActivityIndicator, View } from "react-native";
+import GuildStore from "../../../stores/GuildStore";
+import ICYMIStore from "../ICYMIStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
+import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
+import { useStateFromStoresArray, useStateFromStores } from "../../../_bundle/Module589";
+import useTheme from "../../../hooks/useTheme";
+import { MIN_ITEMS_FOR_NEW_PILL } from "../ICYMITypes";
+import { isGuildItem } from "../ICYMIUtils";
+import ReanimatedRexport, { useAnimatedStyle, useAnimatedProps } from "../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../design/animation/reanimated/spring/spring";
+import { useIsFocused } from "../../../_bundle/Module1483";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { ArrowSmallUpIcon } from "../../../design/components/Icon/native/redesign/generated/ArrowSmallUpIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { isThemeDark } from "../../../design/shared";
+let useStyles, springConfig, __initData, __initData2;
+const CutoutGuildIcon = function CutoutGuildIcon(props) {
+  return <View style={{
+    width: 24,
+    height: 24
+  }}>
+    <ClipView cutouts={[{
+      shape: CutoutShape.RoundedRect,
+      x: 18,
+      y: -4,
+      width: 32,
+      height: 32,
+      cornerRadius: Module712.radii.md
+    }]}>
+      <GuildIcon guild={props.guild} size={GuildIconSizes.XSMALL} style={useStyles().guildIconBG} />
+    </ClipView>
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    alignSelf: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    paddingRight: 12,
+    paddingLeft: 8,
+    paddingVertical: 6,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND
+  },
+  guildIconBG: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  },
+  refreshMorePillContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: 32,
+    width: "100%",
+    zIndex: 100
+  }
+});
+springConfig = {
+  overshootClamping: true,
+  stiffness: 20,
+  damping: 15,
+  mass: 0.03
+};
+__initData = {
+  code: "function NewContentPillTsx1(){const{withSpring,showingPill,springConfig}=this.__closure;return{transform:[{translateY:withSpring(showingPill?12:0,springConfig)}],opacity:withSpring(showingPill?1:0,springConfig,'respect-motion-settings')};}"
+};
+__initData2 = {
+  code: "function NewContentPillTsx2(){const{showingPill}=this.__closure;return{pointerEvents:showingPill?'box-none':'none'};}"
+};
+export default function NewContentPill(props) {
+  let stateFromStores, state, setState, memo, setState2, state2, isFocused, state3, setState3;
+  const { onPress, isRefreshing } = props;
+  stateFromStores = void 0;
+  state = void 0;
+  setState = void 0;
+  memo = void 0;
+  setState2 = void 0;
+  state2 = void 0;
+  isFocused = void 0;
+  state3 = void 0;
+  setState3 = void 0;
+  const styles = useStyles();
+  const stateFromStoresArray = useStateFromStoresArray([ICYMIStore], () => ICYMIStore.getNewUnreadDehydratedItems());
+  stateFromStores = useStateFromStores([ICYMIStore], () => ICYMIStore.hasNewContent(), []);
+  [state, setState] = useState(stateFromStoresArray);
+  const theme = useTheme();
+  memo = useMemo(() => {
+    const r4 = [];
+    let c28016_0 = r4;
+    state.forEach((item) => {
+      if (!(c28016_0.length >= MIN_ITEMS_FOR_NEW_PILL) && isGuildItem(item) && !c28016_0.includes(item.data.guild_id)) {
+        c28016_0.push(item.data.guild_id);
+      }
+    });
+    return r4;
+  }, [state]);
+  const stateFromStoresArray2 = useStateFromStoresArray([GuildStore], () => memo.map((item) => GuildStore.getGuild(item)).filter(Boolean));
+  let state4;
+  [state4, setState2] = useState(false);
+  state2 = stateFromStores ? state4 : stateFromStores;
+  const y = function y() {
+    return {
+      transform: [{
+        translateY: _spring.withSpring(state2 ? 12 : 0, springConfig)
+      }],
+      opacity: _spring.withSpring(state2 ? 1 : 0, springConfig, "respect-motion-settings")
+    };
+  };
+  y.__closure = {
+    withSpring: _spring.withSpring,
+    showingPill: state2,
+    springConfig
+  };
+  y.__workletHash = 13655660855782;
+  y.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(y);
+  const C = function C() {
+    return {
+      pointerEvents: state2 ? "box-none" : "none"
+    };
+  };
+  C.__closure = {
+    showingPill: state2
+  };
+  C.__workletHash = 876312391659;
+  C.__initData = __initData2;
+  const animatedProps = useAnimatedProps(C);
+  isFocused = useIsFocused();
+  [state3, setState3] = useState(false);
+  useLayoutEffect(() => {
+    let r3 = state3;
+    if (!state3 && (isFocused && stateFromStores)) {
+      setState2(false);
+    } else {
+      if (state3) {
+        r3 = isFocused;
+      }
+      if (r3) {
+        r3 = !stateFromStores;
+      }
+      if (r3) {
+        setState2(true);
+      }
+    }
+    setState3(isFocused);
+  }, [stateFromStores, isFocused, state3]);
+  useEffect(() => {
+    if (!isRefreshing) {
+      setState(stateFromStoresArray);
+    }
+  }, [isRefreshing, stateFromStoresArray, stateFromStores]);
+  const callback = useCallback(() => {
+    onPress();
+  }, [onPress]);
+  return stateFromStoresArray2.length === 0 ? <ReanimatedRexport.View style={[styles.refreshMorePillContainer, animatedStyle]} animatedProps={animatedProps}>
+    <PressableOpacity onPress={callback} style={styles.container}>
+      <ArrowSmallUpIcon size="md" color="interactive-text-active" />
+      <Text style={{
+        marginLeft: 4
+      }} variant="heading-md/bold" color="interactive-text-active">
+        {intl.string(t["4Nl0Rl"])}
+      </Text>
+    </PressableOpacity>
+  </ReanimatedRexport.View> : <ReanimatedRexport.View style={[styles.refreshMorePillContainer, animatedStyle]} animatedProps={animatedProps}>
+    <PressableOpacity onPress={callback} style={styles.container}>
+      {isRefreshing ? <ActivityIndicator color={isThemeDark(theme) ? Module712.unsafe_rawColors.WHITE : Module712.unsafe_rawColors.PRIMARY_500} /> : <ArrowSmallUpIcon size="md" color="interactive-text-active" />}
+      {stateFromStoresArray2.slice(0, stateFromStoresArray2.length - 1).map((item, index) => <View key={item.id} style={{
+        marginLeft: index > 0 ? -2 : 4
+      }}>
+        <CutoutGuildIcon guild={item} />
+      </View>)}
+      <View style={{
+        marginLeft: stateFromStoresArray2.length > 1 ? -2 : 4
+      }}>
+        <GuildIcon guild={stateFromStoresArray2[stateFromStoresArray2.length - 1]} size={GuildIconSizes.XSMALL} style={styles.guildIconBG} />
+      </View>
+    </PressableOpacity>
+  </ReanimatedRexport.View>;
+};

modules/icymi/native/ReplyRow.tsx

@@ -0,0 +1,83 @@
+// Metro module 15379 (f15380).
+import { View } from "react-native";
+import { createICYMIStyles } from "./createICYMIStyles";
+import Module712 from "../../../_bundle/Module712";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../design/components/Text/native/Text";
+import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
+const styles = createICYMIStyles((a0) => ({
+  separator: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginBottom: a0.margin,
+    width: "100%"
+  },
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    marginHorizontal: a0.margin,
+    marginBottom: a0.margin,
+    gap: Module712.space.PX_12
+  },
+  buttonContainer: {
+    flexGrow: 1,
+    flexBasis: 0,
+    height: Module712.space.PX_40
+  },
+  feedbackContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: Module712.space.PX_12,
+    height: Module712.space.PX_40
+  },
+  icon: {
+    width: 20,
+    height: 20
+  },
+  feedbackButtonIcon: {
+    tintColor: Module712.colors.BUTTON_OUTLINE_PRIMARY_TEXT
+  },
+  input: {
+    flex: 1,
+    borderRadius: Module712.radii.round
+  },
+  contentInventoryPressable: {
+    borderRadius: 20,
+    width: "100%",
+    minHeight: 40,
+    backgroundColor: Module712.colors.REDESIGN_CHAT_INPUT_BACKGROUND,
+    justifyContent: "center"
+  },
+  contentInventoryContainer: {
+    marginLeft: a0.margin,
+    marginRight: 10,
+    paddingVertical: Module712.space.PX_8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_4
+  },
+  contentInventoryText: {
+    flexShrink: 1
+  },
+  replyContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginLeft: a0.inset,
+    marginTop: a0.margin
+  }
+}));
+export function ContentInventoryReplyRow(props) {
+  const { reactText, onReply } = props;
+  const r11 = styles();
+  return <View style={r11.replyContainer}>
+    <PressableOpacity accessibilityRole="button" onPress={onReply} style={r11.contentInventoryPressable} accessibilityLabel={reactText} pointerEvents="box-only">
+      <View style={r11.contentInventoryContainer}>
+        <Text variant="text-md/medium" color="input-placeholder-text-default" lineClamp={1} style={r11.contentInventoryText}>{reactText}</Text>
+        <ReactionIcon style={r11.icon} size="custom" />
+      </View>
+    </PressableOpacity>
+  </View>;
+}

modules/icymi/native/SeparatorDot.tsx

@@ -0,0 +1,15 @@
+// Metro module 15382 (f15383).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+const useStyles = createStyles({
+  separatorDot: {
+    width: 4,
+    height: 4,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG
+  }
+});
+export default function SeparatorDot() {
+  return <View style={[useStyles().separatorDot]} />;
+};

modules/icymi/native/content_inventory/Badges.tsx

@@ -0,0 +1,122 @@
+// Metro module 12001 (f12002).
+import { useMemo } from "react";
+import { View } from "react-native";
+import LocaleStore from "../../../user_settings/LocaleStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useTimestampTickedNow } from "../../../content_inventory/memberlist/useTimestampTickedNow";
+import * as _utils from "../../../content_inventory/utils";
+import { formatActiveTimestamp, formatEndedTimestamp, isEntryMarathon, getMarathonDescription, isEntryNew, getStreakCount, getTrendingType, getResurrectedEntryLastPlayTime, getEntryDuration } from "../../../content_inventory/utils";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { GameControllerIcon } from "../../../../design/components/Icon/native/redesign/generated/GameControllerIcon";
+import { TimerIcon } from "../../../../design/components/Icon/native/redesign/generated/TimerIcon";
+import { NewUserIcon } from "../../../../design/components/Icon/native/redesign/generated/NewUserIcon";
+import { intl, t } from "../../../../intl/index.native";
+import { FlashIcon } from "../../../../design/components/Icon/native/redesign/generated/FlashIcon";
+import { TrendingType } from "../../../../_bundle/Module12006";
+import { FireIcon } from "../../../../design/components/Icon/native/redesign/generated/FireIcon";
+import { RetryIcon } from "../../../../design/components/Icon/native/redesign/generated/RetryIcon";
+import { TrophyIcon } from "../../../../design/components/Icon/native/redesign/generated/TrophyIcon";
+import Durations from "../../../../utils/Durations";
+let useStyles, ContentTimestamp, BaseBadge;
+const ActiveTimestamp = function ActiveTimestamp(props) {
+  const { entry, style } = props;
+  const now = useTimestampTickedNow().now;
+  return <Text style={style} variant="text-sm/medium" tabularNumbers color="text-feedback-positive">
+    {useMemo(() => formatActiveTimestamp(entry, now), [entry, now])}
+  </Text>;
+};
+ContentTimestamp = function ContentTimestamp(props) {
+  const entry2 = props.entry;
+  const styles = useStyles();
+  const isEntryActive = _utils.isEntryActive(entry2);
+  const stateFromStores = useStateFromStores([LocaleStore], () => LocaleStore.locale);
+  return isEntryActive ? <ActiveTimestamp entry={entry2} /> : <Text variant="text-sm/medium" style={styles.text}>
+    {formatEndedTimestamp(entry2, stateFromStores)}
+  </Text>;
+};
+BaseBadge = function BaseBadge(props) {
+  const { Icon, iconColor, text } = props;
+  const styles = useStyles();
+  return <View style={styles.badgeContainer}>
+    <Icon style={styles.icon} color={iconColor} />
+    <Text variant="text-sm/medium" style={styles.text}>{text}</Text>
+  </View>;
+};
+useStyles = createStyles({
+  icon: {
+    width: 16,
+    height: 16
+  },
+  badgeContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    paddingVertical: Module712.space.PX_4,
+    paddingLeft: Module712.space.PX_8,
+    paddingRight: 10,
+    borderRadius: Module712.radii.sm
+  },
+  text: {
+    color: Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_SECONDARY
+  }
+});
+export { ActiveTimestamp };
+export function GameTimestampBadge(props) {
+  const entry2 = props.entry;
+  const styles = useStyles();
+  return <View style={styles.badgeContainer}>
+    <GameControllerIcon style={styles.icon} color={_utils.isEntryActive(entry2) ? Module712.colors.STATUS_POSITIVE : Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_SECONDARY} />
+    <ContentTimestamp entry={entry2} />
+  </View>;
+}
+export function MarathonBadge(props) {
+  const entry2 = props.entry;
+  if (isEntryMarathon(entry2)) {
+    const iconColor = _utils.isEntryActive(entry2) ? Module712.colors.STATUS_POSITIVE : Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_SECONDARY;
+    const text = getMarathonDescription(entry2).text;
+    return text != null ? <BaseBadge Icon={TimerIcon} iconColor={iconColor} text={text} /> : null;
+  }
+  return null;
+}
+export function NewGameBadge(props) {
+  return isEntryNew(props.entry) ? <BaseBadge Icon={NewUserIcon} text={intl.string(t.keY6mW)} iconColor={Module712.colors.STATUS_POSITIVE} /> : null;
+}
+export function StreakBadge(props) {
+  const streakCount = getStreakCount(props.entry);
+  return streakCount == null ? null : streakCount < 2 ? null : <BaseBadge Icon={FlashIcon} text={intl.formatToPlainString(t["Klie/P"], {
+    days: streakCount
+  })} iconColor={Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_SECONDARY} />;
+}
+export function TrendingBadge(props) {
+  const trendingType = getTrendingType(props.entry);
+  return trendingType == null ? null : trendingType !== TrendingType.TRENDING_TYPE_UNSPECIFIED ? <BaseBadge Icon={FireIcon} text={intl.string(t.TsWCdW)} iconColor={Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_SECONDARY} /> : null;
+}
+export function ResurrectedBadge(props) {
+  return getResurrectedEntryLastPlayTime(props.entry) != null ? <BaseBadge Icon={RetryIcon} text={intl.string(t.adnLsB)} iconColor={Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_SECONDARY} /> : null;
+}
+export function TopGameBadge(props) {
+  const entryDuration = getEntryDuration(props.entry);
+  if (entryDuration == null) {
+    return null;
+  }
+  const SDRHgr = t.SDRHgr;
+  return <BaseBadge Icon={TrophyIcon} text={<>
+    {intl.string(t["/50eHi"])}
+    {": "}
+    {intl.format(SDRHgr, {
+      hours: Math.round(entryDuration / Durations.Seconds.HOUR)
+    })}
+  </>} iconColor={Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_SECONDARY} />;
+}
+export function CustomStatusTimestampBadge(props) {
+  const entry2 = props.entry;
+  const styles = useStyles();
+  return <View style={styles.badgeContainer}>
+    <TimerIcon style={styles.icon} color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
+    <ContentTimestamp entry={entry2} />
+  </View>;
+}

modules/icymi/native/content_inventory/ContentInventoryEntryContainer.tsx

@@ -0,0 +1,100 @@
+// Metro module 15378 (f15379).
+import { useCallback } from "react";
+import { View } from "react-native";
+import UserStore from "../../../../stores/UserStore";
+import { createICYMIStyles } from "../createICYMIStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import showUserProfileActionSheet from "../../../user_profile/native/showUserProfileActionSheet";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { PressableHighlight } from "../../../../design/void/Pressables/native/Pressables";
+import { SimplePost } from "../ICYMIShared";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+const styles = createICYMIStyles((a0, a1) => ({
+  pressable: {
+    marginTop: a1 ? 0 : a0.margin
+  },
+  container: {
+    marginHorizontal: a0.margin,
+    paddingBottom: a1 ? 0 : a0.margin,
+    paddingTop: a1 ? a0.margin : 0
+  },
+  screenshotContainer: {
+    marginBottom: a0.margin
+  },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_12,
+    marginBottom: a0.margin
+  },
+  headerInfo: {
+    flex: 1
+  },
+  title: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginBottom: isAndroid() ? -1 : 1,
+    marginTop: 2
+  },
+  subTitleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  }
+}));
+export default function ContentInventoryEntryContainer(props) {
+  const { contentId, userId, children, renderForScreenshot = false, title, subtitle, type, highlight = false, onPress } = props;
+  const r18 = styles(renderForScreenshot);
+  const callback = useCallback(() => {
+    if (onPress != null) {
+      ICYMIActionCreators.itemInteracted(contentId, type, "press");
+      ICYMIActionCreators.feedItemActioned({
+        itemId: contentId,
+        itemType: type,
+        actionParameters: {
+          actionGestureType: "press",
+          actionTargetElement: "item_container",
+          actionIntentType: "open",
+          actionDestinationType: null
+        }
+      });
+      onPress();
+    } else {
+      ICYMIActionCreators.itemInteracted(contentId, type, "open_profile");
+      ICYMIActionCreators.feedItemActioned({
+        itemId: contentId,
+        itemType: type,
+        actionParameters: {
+          actionGestureType: "press",
+          actionTargetElement: "item_container",
+          actionIntentType: "open",
+          actionDestinationType: "user"
+        }
+      });
+      showUserProfileActionSheet({
+        userId
+      });
+    }
+  }, [contentId, type, userId, onPress]);
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(userId));
+  return stateFromStores != null ? <PressableHighlight unstable_pressDelay={130} onPress={callback} accessibilityRole="button" style={r18.pressable}>
+    <SimplePost hideDivider={renderForScreenshot} highlight={highlight}>
+      <View style={[r18.container, renderForScreenshot && r18.screenshotContainer]}>
+        <View style={r18.header}>
+          <Avatar key={stateFromStores.id} animate size={AvatarSizes.NORMAL} user={stateFromStores} guildId={void 0} />
+          <View style={r18.headerInfo}>
+            <View style={r18.title}>{title}</View>
+            <View style={r18.subTitleContainer}>{subtitle}</View>
+          </View>
+        </View>
+        {children}
+      </View>
+    </SimplePost>
+  </PressableHighlight> : null;
+};
+export { styles as useStyles };

modules/icymi/native/content_inventory/CustomStatusEntryRow.tsx

@@ -0,0 +1,14 @@
+// Metro module 15380 (f15381).
+import { useReplyActions } from "./useReplyActions";
+import ICYMICustomStatusRow from "./ICYMICustomStatusRow";
+export default function CustomStatusEntryRow(props) {
+  const { content, renderForScreenshot, visible } = props;
+  const replyActions = useReplyActions({
+    content
+  });
+  return <ICYMICustomStatusRow id={content.id} userId={content.author_id} customStatusExtra={content.extra} renderForScreenshot={renderForScreenshot} visible={visible} variant={{
+    kind: "otherUserStatus",
+    handlePressPrimary: replyActions.openReplyActionSheet,
+    handlePressSecondary: replyActions.openEmojiPicker
+  }} />;
+};

modules/icymi/native/content_inventory/GamingLikeEntryRow.tsx

@@ -0,0 +1,210 @@
+// Metro module 15371 (f15372).
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import UserStore from "../../../../stores/UserStore";
+import { NewGameBadge, StreakBadge, TrendingBadge, ResurrectedBadge, MarathonBadge, TopGameBadge } from "./Badges";
+import { isEntryNew, getStreakCount, getTrendingType, isEntryMarathon, isEntryActive } from "../../../content_inventory/utils";
+import { TrendingType } from "../../../../_bundle/Module12006";
+import { createICYMIStyles } from "../createICYMIStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import { useDisplayNameStylesFont } from "../../../display_name_styles/native/useDisplayNameStylesFont";
+import { useGetOrFetchApplication } from "../../../applications/useGetOrFetchApplications";
+import useHeroColors from "../../../content_inventory/memberlist/useHeroColors";
+import useOpenGameProfileModal from "../../../game_profile/hooks/useOpenGameProfileModal";
+import { GameProfileSources } from "../../../game_profile/GameProfileAnalyticUtils";
+import { ContentInventoryEntryType } from "../../../../_bundle/Module7909";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { useReplyActions } from "./useReplyActions";
+import { intl, t } from "../../../../intl/index.native";
+import ContentInventoryEntryContainer from "./ContentInventoryEntryContainer";
+import { Text } from "../../../../design/components/Text/native/Text";
+import UserUtils from "../../../../utils/UserUtils";
+import { getRelativeTimestamp } from "../../../notification_center/NotificationCenterUtils";
+import SnowflakeUtils from "../../../../utils/SnowflakeUtils";
+import Module689 from "../../../../_bundle/Module689";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import FastImage from "../../../../components_native/common/FastImage";
+import { ContentInventoryReplyRow } from "../ReplyRow";
+let styles;
+let c10923_10 = [{
+  Badge: NewGameBadge,
+  predicate: isEntryNew
+}, {
+  Badge: StreakBadge,
+  predicate: (a0) => {
+    let r9 = getStreakCount(a0);
+    if (r9 == null) {
+      r9 = 0;
+    }
+    return r9 >= 2;
+  }
+}, {
+  Badge: TrendingBadge,
+  predicate: (a0) => {
+    const trendingType = getTrendingType(a0);
+    return trendingType != null && trendingType !== TrendingType.TRENDING_TYPE_UNSPECIFIED;
+  }
+}, {
+  Badge: ResurrectedBadge,
+  predicate: () => true
+}, {
+  Badge: MarathonBadge,
+  predicate: (a0) => isEntryMarathon(a0) === true
+}];
+styles = createICYMIStyles((a0) => ({
+  card: {
+    flexDirection: "row",
+    gap: a0.margin,
+    alignItems: "center",
+    padding: a0.margin,
+    marginLeft: a0.inset,
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    ...Module712.shadows.SHADOW_HIGH
+  },
+  cardInnerContainer: {
+    overflow: "hidden",
+    flex: 1
+  },
+  image: {
+    width: 72,
+    height: 72,
+    borderRadius: Module712.radii.sm
+  },
+  gameName: {
+    maxWidth: 275,
+    color: Module712.colors.CONTENT_INVENTORY_OVERLAY_TEXT_PRIMARY
+  },
+  badges: {
+    display: "flex",
+    flexDirection: "row",
+    gap: Module712.space.PX_8,
+    flexWrap: "wrap",
+    alignItems: "center",
+    marginTop: 6
+  }
+}));
+export default function GamingLikeEntryRow(props) {
+  let c21929_2, openReplyActionSheet;
+  const { content, renderForScreenshot } = props;
+  c21929_2 = void 0;
+  openReplyActionSheet = void 0;
+  const r23 = styles();
+  const application_id = content.extra.application_id;
+  const author_id = content.author_id;
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(author_id));
+  const displayNameStylesFont = useDisplayNameStylesFont({
+    displayNameStyles: useDisplayNameStyles({
+      userId: author_id
+    })
+  });
+  const getOrFetchApplication = useGetOrFetchApplication(application_id);
+  const primaryColor = useHeroColors(getOrFetchApplication == null ? void 0 : getOrFetchApplication.getIconURL(72)).primaryColor;
+  const uri = getOrFetchApplication == null ? void 0 : getOrFetchApplication.getIconURL(240);
+  const openGameProfileModal = useOpenGameProfileModal({
+    location: "ICYMI Activity Card",
+    applicationId: application_id,
+    source: GameProfileSources.ActivityCard,
+    trackEntryPointImpression: true,
+    sourceUserId: author_id
+  });
+  c21929_2 = openGameProfileModal;
+  const callback2 = useCallback(() => {
+    if (c21929_2 != null) {
+      c21929_2();
+    }
+  }, [openGameProfileModal]);
+  const memo = useMemo(() => content.content_type === ContentInventoryEntryType.TOP_GAME ? [<TopGameBadge key="topgame" entry={content} />] : c10923_10.map((item) => {
+    const Badge = item.Badge;
+    return (0, item.predicate)(content) ? <Badge key={Badge.name} entry={content} /> : null;
+  }).filter(Boolean), [content]);
+  const callback = useCallback(() => {
+    import("../ICYMIShareModal").then(({ GameShareModal }) => {
+      if (GameShareModal != null) {
+        ICYMIActionCreators.itemInteracted(content.id, "hotwheels_gaming_activity", "press_forward");
+        ICYMIActionCreators.feedItemActioned({
+          itemId: content.id,
+          itemType: "hotwheels_gaming_activity",
+          actionParameters: {
+            actionGestureType: "press",
+            actionTargetElement: "forward_button",
+            actionIntentType: "share",
+            actionDestinationType: null
+          }
+        });
+        ModalActionCreators.pushLazy(() => Promise.resolve(GameShareModal), {
+          content
+        }, "GameShareModal", {
+          presentation: "modal"
+        });
+      }
+    });
+  }, [content]);
+  openReplyActionSheet = useReplyActions({
+    content
+  }).openReplyActionSheet;
+  const callback3 = useCallback(() => {
+    ICYMIActionCreators.itemInteracted(content.id, "hotwheels_gaming_activity", "press");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: content.id,
+      itemType: "hotwheels_gaming_activity",
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "item_container",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    openReplyActionSheet();
+  }, [content, openReplyActionSheet]);
+  if (getOrFetchApplication != null && stateFromStores != null && uri != null) {
+    const r97 = isEntryActive(content) ? intl.string(t.Gk1P8Z) : intl.string(t.ktOTRQ);
+    const props2 = {
+      contentId: content.id,
+      userId: content.author_id,
+      type: "hotwheels_gaming_activity",
+      renderForScreenshot,
+      onPress: callback3,
+      title: <>
+        <Text variant="text-md/semibold" color="mobile-text-heading-primary" style={displayNameStylesFont != null ? {
+          fontFamily: displayNameStylesFont
+        } : void 0}>
+          {UserUtils.getName(stateFromStores)}
+        </Text>
+        <Text lineClamp={1} variant="text-xs/normal" color="text-muted">
+          {getRelativeTimestamp(SnowflakeUtils.extractTimestamp(content.id))}
+        </Text>
+      </>,
+      subtitle: <Text variant="text-sm/normal" lineClamp={1} color={isEntryActive(content) ? "status-positive" : "text-default"}>{r97}</Text>,
+      children: <View>
+        <View style={[r23.card, primaryColor != null ? {
+          backgroundColor: Module689(primaryColor).alpha(0.5).hex()
+        } : null]}>
+          <PressableOpacity onPress={callback2} disabled={openGameProfileModal == null} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["9sZWVp"], {
+            gameName: getOrFetchApplication.name
+          })}>
+            <FastImage source={{
+              uri
+            }} style={r23.image} />
+          </PressableOpacity>
+          <View style={r23.cardInnerContainer}>
+            <PressableOpacity onPress={callback2} disabled={openGameProfileModal == null} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["9sZWVp"], {
+              gameName: getOrFetchApplication.name
+            })}>
+              <Text variant="text-md/semibold" style={r23.gameName}>{getOrFetchApplication.name}</Text>
+            </PressableOpacity>
+            {memo != null && memo.length > 0 && <View style={r23.badges}>{memo}</View>}
+          </View>
+        </View>
+        {renderForScreenshot ? null : <ContentInventoryReplyRow reactText={intl.formatToPlainString(t.ghWi8V, {
+          username: UserUtils.getName(stateFromStores)
+        })} onReply={openReplyActionSheet} onForward={callback} />}
+      </View>
+    };
+    return <ContentInventoryEntryContainer {...props2} />;
+  }
+  return null;
+};

modules/icymi/native/content_inventory/ICYMICustomStatusRow.tsx

@@ -0,0 +1,321 @@
+// Metro module 15381 (f15382).
+import { useState, useMemo } from "react";
+import { View } from "react-native";
+import UserStore from "../../../../stores/UserStore";
+import ICYMIStore from "../../ICYMIStore";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { createICYMIStyles } from "../createICYMIStyles";
+import { Icon, IconSizes } from "../../../../design/void/native";
+import Module9872 from "../../../../_bundle/Module9872";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { useGradientBottom } from "../../../client_themes/native/ClientThemesOverrides";
+import { hexWithOpacity } from "../../../../utils/ColorUtils";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import { useDisplayNameStylesFont } from "../../../display_name_styles/native/useDisplayNameStylesFont";
+import { useGameMentionsAsPlainText } from "../../../game_mentions/hooks/useGameMentionsAsPlainText";
+import ActivityEmoji from "../../../activity_status/native/ActivityEmoji";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import { PressableHighlight } from "../../../../design/void/Pressables/native/Pressables";
+import { TrashIcon } from "../../../../design/components/Icon/native/redesign/generated/TrashIcon";
+import { PencilIcon } from "../../../../design/components/Icon/native/redesign/generated/PencilIcon";
+import { ArrowAngleLeftUpIcon } from "../../../../design/components/Icon/native/redesign/generated/ArrowAngleLeftUpIcon";
+import { ReactionIcon } from "../../../../design/components/Icon/native/redesign/generated/ReactionIcon";
+import SnowflakeUtils from "../../../../utils/SnowflakeUtils";
+import Durations from "../../../../utils/Durations";
+import ContentInventoryEntryContainer from "./ContentInventoryEntryContainer";
+import UserUtils from "../../../../utils/UserUtils";
+import { getRelativeTimestamp } from "../../../notification_center/NotificationCenterUtils";
+import SeparatorDot from "../SeparatorDot";
+import ClipView, { CutoutShape } from "../../../../design/components/Icon/native/ClipView";
+let PX_8, useStyles, styles;
+const UploadPlaceholder = function UploadPlaceholder() {
+  return <View style={styles(false).uploadContainer}>
+    <Icon source={Module9872} size={IconSizes.SMALL} />
+    <Text variant="text-md/normal" color="text-strong">
+      {intl.string(t["3UB9ad"])}
+    </Text>
+  </View>;
+};
+PX_8 = Module712.space.PX_8;
+useStyles = createStyles((a0) => ({
+  background: {
+    backgroundColor: a0,
+    overflow: "hidden"
+  }
+}));
+styles = createICYMIStyles((a0, a1) => ({
+  bubbles: {
+    position: "absolute",
+    top: a1 ? 56 : Module712.space.PX_40
+  },
+  middleBubble: {
+    marginLeft: 32,
+    borderRadius: Module712.radii.round,
+    height: 12,
+    width: 12,
+    overflow: "hidden"
+  },
+  bottomBubble: {
+    marginLeft: 44,
+    marginTop: -4,
+    borderRadius: Module712.radii.round,
+    height: 32,
+    width: 32,
+    overflow: "hidden"
+  },
+  title: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  timestamp: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  cardContainer: {
+    position: "relative",
+    marginLeft: a0.inset
+  },
+  card: {
+    gap: a0.margin,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: a0.margin,
+    borderRadius: Module712.radii.lg,
+    width: "100%",
+    zIndex: 1,
+    marginBottom: a1 ? 0 : 17,
+    overflow: "hidden"
+  },
+  textOnly: {
+    paddingVertical: a0.margin + Module712.space.PX_12
+  },
+  emojiTextContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: a0.margin
+  },
+  emojiText: {
+    flexShrink: 1
+  },
+  leftAlign: {
+    justifyContent: "flex-start"
+  },
+  uploadContainer: {
+    marginHorizontal: a0.margin,
+    marginBottom: a0.margin,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: Module712.space.PX_48,
+    width: "100%",
+    borderStyle: "dashed",
+    borderColor: Module712.colors.BORDER_STRONG,
+    borderWidth: 1,
+    borderRadius: Module712.radii.lg,
+    gap: Module712.space.PX_4,
+    flexDirection: "row"
+  },
+  buttonIcon: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: Module712.radii.md,
+    height: 28,
+    width: 40
+  }
+}));
+export default function GravityCustomStatusEntryRow(props) {
+  let r24, gameMentionsAsPlainText;
+  let setState;
+  const { id, userId, customStatusExtra, renderForScreenshot, variant } = props;
+  setState = void 0;
+  const r28 = styles(renderForScreenshot);
+  let c21942_4 = r28;
+  let r45 = useGradientBottom()?.backgroundColor;
+  if (r45 == null) {
+    r45 = Module712.colors.CARD_BACKGROUND_DEFAULT;
+  }
+  const styles2 = useStyles(r45);
+  const underlayColor = hexWithOpacity(styles2.background.backgroundColor, 0.6);
+  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getUser(userId));
+  const emoji_id = customStatusExtra.emoji_id;
+  const id2 = (emoji_id == null ? void 0 : emoji_id.toString()) !== "0" ? customStatusExtra.emoji_id : null;
+  let emoji_name = customStatusExtra.emoji_name;
+  if (emoji_name == null) {
+    emoji_name = "";
+  }
+  const emoji = {
+    id: id2,
+    name: emoji_name,
+    animated: customStatusExtra.emoji_animated
+  };
+  const displayNameStylesFont = useDisplayNameStylesFont({
+    displayNameStyles: useDisplayNameStyles({
+      userId
+    })
+  });
+  let r23 = customStatusExtra.status != null && customStatusExtra.status.length > 0;
+  L21: {
+    gameMentionsAsPlainText = useGameMentionsAsPlainText(customStatusExtra.status);
+    if (emoji.id == null) {
+      const length = emoji.name.length;
+      r24 = null;
+      if (length === 0) {
+        break L21;
+      }
+    }
+    const style = {
+      lineHeight: isAndroid() ? 36 : 40,
+      fontSize: 36,
+      marginTop: isAndroid() ? 0 : 4
+    };
+    let animated = emoji.animated;
+    if (animated == null) {
+      animated = false;
+    }
+    r24 = <ActivityEmoji style={style} size={40} animate={animated} emoji={emoji} />;
+  }
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(userId));
+  let state;
+  [state, setState] = useState({
+    width: 0,
+    height: 0
+  });
+  const hasStatus = useMemo(() => variant.kind === "ownStatus" ? {
+    hasStatus: variant.hasStatus
+  } : {
+    hasStatus: true
+  }, [variant]).hasStatus;
+  const stateFromStores3 = useStateFromStores([ICYMIStore], () => {
+    const r5 = ICYMIStore.notificationItem();
+    return r5 != null && r5.id === id;
+  }, [id]);
+  const memo = useMemo(() => {
+    let r75;
+    let r2 = null;
+    if (!renderForScreenshot) {
+      if (variant.kind === "ownStatus") {
+        r75 = <>
+          <PressableHighlight onPress={variant.handlePressSecondary} underlayColor={underlayColor} style={[c21942_4.buttonIcon, styles2.background, {
+            position: "absolute",
+            right: Module712.space.PX_16,
+            bottom: 3
+          }]}>
+            <TrashIcon size="xs" />
+          </PressableHighlight>
+          <PressableHighlight onPress={variant.handlePressPrimary} underlayColor={underlayColor} style={[c21942_4.buttonIcon, styles2.background, {
+            position: "absolute",
+            right: Module712.space.PX_16 + 3 + PX_8 + 40,
+            bottom: 3
+          }]}>
+            <PencilIcon size="xs" />
+          </PressableHighlight>
+        </>;
+      } else {
+        r75 = <>
+          <PressableHighlight onPress={variant.handlePressPrimary} underlayColor={underlayColor} style={[c21942_4.buttonIcon, styles2.background, {
+            position: "absolute",
+            right: Module712.space.PX_16,
+            bottom: 3
+          }]}>
+            <ArrowAngleLeftUpIcon size="xs" />
+          </PressableHighlight>
+          <PressableHighlight onPress={variant.handlePressSecondary} underlayColor={underlayColor} style={[c21942_4.buttonIcon, styles2.background, {
+            position: "absolute",
+            right: Module712.space.PX_16 + 3 + PX_8 + 40,
+            bottom: 3
+          }]}>
+            <ReactionIcon size="xs" />
+          </PressableHighlight>
+        </>;
+      }
+      r2 = r75;
+    }
+    return r2;
+  }, [styles2.background, underlayColor, renderForScreenshot, r28.buttonIcon, variant.handlePressPrimary, variant.handlePressSecondary, variant.kind]);
+  if (stateFromStores2 == null) {
+    return null;
+  }
+  const r138 = variant.kind === "otherUserStatus" && SnowflakeUtils.age(id) < 30 * Durations.Millis.MINUTE;
+  const props2 = {
+    contentId: id,
+    userId,
+    type: "hotwheels_custom_status",
+    renderForScreenshot,
+    title: <View style={r28.title}>
+      <Text variant="text-md/semibold" color="mobile-text-heading-primary" style={displayNameStylesFont != null ? {
+        fontFamily: displayNameStylesFont
+      } : void 0}>
+        {UserUtils.getName(stateFromStores)}
+      </Text>
+      <View style={r28.timestamp}>
+        {hasStatus && <Text lineClamp={1} variant="text-sm/normal" color="text-muted">
+          {getRelativeTimestamp(SnowflakeUtils.extractTimestamp(id))}
+        </Text>}
+        {r138 ? <SeparatorDot /> : null}
+        {r138 ? <Text lineClamp={1} variant="text-sm/medium" color="text-brand">
+          {intl.string(t.tWnHcL)}
+        </Text> : null}
+      </View>
+    </View>,
+    subtitle: variant.kind === "otherUserStatus" ? <Text variant="text-sm/normal" lineClamp={1} color="text-default">
+      {intl.string(t.fxOLPR)}
+    </Text> : null,
+    highlight: stateFromStores3,
+    children: null
+  };
+  const children = [<ClipView cutouts={[]} style={r28.bubbles}>
+    <View style={[r28.middleBubble, styles2.background]} />
+    <View style={[r28.bottomBubble, styles2.background]} />
+  </ClipView>, ,];
+  const cutouts = renderForScreenshot ? [] : [{
+    shape: CutoutShape.RoundedRect,
+    x: state.width - Module712.space.PX_16 - 40 - 3,
+    y: state.height - 14 - 3,
+    width: 46,
+    height: 34,
+    cornerRadius: Module712.radii.md + 3
+  }, {
+    shape: CutoutShape.RoundedRect,
+    x: state.width - Module712.space.PX_16 - 86 - PX_8,
+    y: state.height - 14 - 3,
+    width: 46,
+    height: 34,
+    cornerRadius: Module712.radii.md + 3
+  }];
+  const props3 = {
+    onLayout: (a0) => {
+      setState({
+        width: a0.nativeEvent.layout.width,
+        height: a0.nativeEvent.layout.height
+      });
+    },
+    onPress: variant.handlePressPrimary,
+    underlayColor,
+    style: [r28.card, styles2.background, r24 == null ? r28.textOnly : null],
+    children: null
+  };
+  const r297 = [r24, , ,];
+  if (r23) {
+    r23 = <Text style={r28.emojiText} variant="text-md/normal">{gameMentionsAsPlainText}</Text>;
+  }
+  r297[1] = r23;
+  r297[2] = hasStatus ? !hasStatus : <Text variant="text-md/normal">
+    {intl.string(t["6ojWO0"])}
+  </Text>;
+  props3.children = [<View style={[r28.emojiTextContainer]}>{r297}</View>, hasStatus ? !hasStatus : <UploadPlaceholder />];
+  children[1] = <View style={r28.cardContainer}>
+    <ClipView cutouts={cutouts}>
+      <PressableHighlight {...props3} />
+    </ClipView>
+    {memo}
+  </View>;
+  props2.children = children;
+  return <ContentInventoryEntryContainer {...props2} />;
+};

modules/icymi/native/content_inventory/ReactActionSheet.tsx

@@ -0,0 +1,365 @@
+// Metro module 15377 (f15378).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useCallback, useState, useRef, useEffect, useMemo } from "react";
+import { View } from "react-native";
+import { ACTION_SHEET_MAX_WIDTH } from "../../../action_sheet/native/ActionSheetConstants";
+import { EmojiIntention } from "../../../emojis/EmojiConstants";
+import { jsx } from "react/jsx-runtime";
+import { intl, t } from "../../../../intl/index.native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { openEmojiPickerActionSheet } from "../../../emoji_picker/native/openEmojiPickerActionSheet";
+import { ReactionTypes } from "../../../messages/MessageReactionsTypes";
+import { PressableHighlight } from "../../../../design/void/Pressables/native/Pressables";
+import { ReactionIcon } from "../../../../design/components/Icon/native/redesign/generated/ReactionIcon";
+import { ContentInventoryEntryType } from "../../../../_bundle/Module7909";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import { useFrequentlyUsedReactionEmojis } from "../../../emoji_picker/EmojiPickerUtils";
+import useColorThemeBackground from "../../../client_themes/native/useColorThemeBackground";
+import { useClientThemesOverride } from "../../../client_themes/native/ClientThemesOverrides";
+import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
+import { ActionSheet } from "../../../../design/components/Sheet/native/ActionSheet.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import validateOptions from "../../../../_bundle/validateOptions";
+import ThemedGradient from "../../../client_themes/native/ThemedGradient";
+import { OverlayOpacity } from "../../../client_themes/native/ClientThemesUtils";
+import { ThemeContextProvider } from "../../../../_bundle/Module3901";
+import ContentInventoryEntryRow from "../ContentInventoryEntryRow";
+import FastImage from "../../../../components_native/common/FastImage";
+import AvatarUtils from "../../../../utils/AvatarUtils";
+import { TextInput } from "../../../../design/components/TextInput/native/TextInput.native";
+import { getName } from "../../../../utils/UserUtils";
+import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
+import { SendMessageIcon } from "../../../../design/components/Icon/native/redesign/generated/SendMessageIcon";
+import LoadingIndicator from "../../../guild_role_subscriptions/native/components/LoadingIndicator";
+import { ICYMIContextProvider } from "../ICYMIContext";
+import { HermesBuiltin } from "../../../../_hermes/prelude";
+let ReactActionSheetBase, useStyles;
+let env10929 = {};
+const AddEmojiButton = function AddEmojiButton(props) {
+  const { channel, onOpenPicker: onOpenPicker2, onPressEmoji, disabled } = props;
+  const styles = useStyles();
+  return <PressableHighlight onPress={useCallback(() => {
+    onOpenPicker2();
+    openEmojiPickerActionSheet({
+      pickerIntention: EmojiIntention.REACTION,
+      autoFocus: false,
+      startExpanded: false,
+      onPressEmoji,
+      channel,
+      reactionType: ReactionTypes.NORMAL
+    });
+  }, [channel, onPressEmoji, onOpenPicker2])} style={[styles.emoji]} accessible accessibilityLabel={intl.string(t.lfIHs4)} disabled={disabled}>
+    <ReactionIcon size="md" />
+  </PressableHighlight>;
+};
+ReactActionSheetBase = function ReactActionSheetBase(props) {
+  let r10, r13, author, channel2, content, disabled, onPressEmoji2, sendMessage, styles;
+  let env21939;
+  L5: {
+    env21939 = {
+      $parent: env10929
+    };
+    content = props.content;
+    env21939[0] = content;
+    author = props.author;
+    channel2 = props.channel;
+    onPressEmoji2 = props.onPressEmoji;
+    env21939[1] = onPressEmoji2;
+    sendMessage = props.sendMessage;
+    env21939[2] = sendMessage;
+    env21939[3] = void 0;
+    env21939[4] = void 0;
+    env21939[5] = void 0;
+    env21939[6] = void 0;
+    env21939[7] = void 0;
+    env21939[8] = void 0;
+    env21939[9] = void 0;
+    env21939[10] = void 0;
+    env21939[11] = void 0;
+    env21939[12] = void 0;
+    styles = useStyles();
+    env21939[3] = styles;
+    const r42 = _slicedToArray(useState(false), 2);
+    disabled = r42[0];
+    env21939[4] = disabled;
+    env21939[5] = r42[1];
+    r10 = "unknown";
+    env21939[6] = "unknown";
+    const r50 = intl.string(t["5IEsGx"]);
+    const content_type = content.content_type;
+    if (ContentInventoryEntryType.TOP_GAME !== content_type && ContentInventoryEntryType.PLAYED_GAME !== content_type) {
+      const CUSTOM_STATUS = ContentInventoryEntryType.CUSTOM_STATUS;
+      r13 = r50;
+      if (CUSTOM_STATUS !== content_type) {
+        break L5;
+      }
+      env21939[6] = "hotwheels_custom_status";
+      r13 = intl.string(t.umDRYM);
+      r10 = "hotwheels_custom_status";
+    } else {
+      env21939[6] = "hotwheels_gaming_activity";
+      r13 = intl.string(t.XC5YE5);
+      r10 = "hotwheels_gaming_activity";
+    }
+  }
+  let c21940_0;
+  const r84 = _slicedToArray(useState(""), 2);
+  const value = r84[0];
+  env21939[7] = value;
+  const onChange = r84[1];
+  env21939[8] = onChange;
+  const ref = useRef(null);
+  env21939[9] = ref;
+  const r89 = _slicedToArray(useState(null), 2);
+  const r90 = r89[0];
+  env21939[10] = r89[1];
+  useEffect(() => {
+    setTimeout(() => {
+      const current = env21939[9].current;
+      const r2 = current == null;
+      let r7 = void 0;
+      if (!r2) {
+        const capture = current.capture;
+        r7 = capture == null ? void 0 : capture.call(current).then((result) => (0, env21939[10])(result));
+      }
+      return r7;
+    }, 500);
+  }, []);
+  const callback = useCallback(async () => {
+    let c28012_0 = env21939;
+    (0, env21939[5])(true);
+    const r14 = env21939[0];
+    const id = r14.id;
+    const itemType = env21939[6];
+    ICYMIActionCreators.itemInteracted(id, itemType, "press_reply_send");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: r14.id,
+      itemType,
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "reply_button",
+        actionIntentType: "reply",
+        actionDestinationType: null
+      }
+    });
+    await (0, env21939[2])(env21939[7]);
+    (0, env21939[5])(false);
+    (0, env21939[8])("");
+  }, [content.id, r10, value, sendMessage]);
+  c21940_0 = void 0;
+  c21940_0 = async (c30873_0) => {
+    let c30873_1;
+    c30873_1 = void 0;
+    (0, env21939[5])(true);
+    const r15 = env21939[0];
+    const id = r15.id;
+    const itemType = env21939[6];
+    ICYMIActionCreators.itemInteracted(id, itemType, "press_emoji_send");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: r15.id,
+      itemType,
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "reaction_picker_button",
+        actionIntentType: "open",
+        actionDestinationType: null
+      }
+    });
+    await (0, env21939[1])(c30873_0);
+    (0, env21939[5])(false);
+  };
+  const callback2 = useCallback(function() {
+    return c21940_0.apply(this, arguments);
+  }, [content.id, r10, onPressEmoji2]);
+  env21939[11] = callback2;
+  const frequentlyUsedReactionEmojis = useFrequentlyUsedReactionEmojis(null);
+  const colorThemeBackground = useColorThemeBackground();
+  const clientThemesOverride = useClientThemesOverride();
+  const width = useWindowDimensions_native().width;
+  env21939[12] = width;
+  const memo = useMemo(() => Math.floor(Math.min(env21939[12], ACTION_SHEET_MAX_WIDTH) / 52), [width]);
+  const props2 = {
+    header: <View style={styles.header}>
+      <Text variant="heading-lg/semibold" color="mobile-text-heading-primary">{r13}</Text>
+    </View>,
+    children: null
+  };
+  props2.children = <View style={styles.container}>
+    <View style={[styles.preview, r90 == null ? styles.loading : null]}>
+      {jsx(validateOptions, {
+        ref,
+        options: {
+          fileName: "icymi_content",
+          format: "png",
+          quality: 1
+        },
+        children: <View style={styles.base}>
+          <ThemedGradient absolute wide tall mix mixAmount={{
+            dark: OverlayOpacity.LEVEL_7,
+            light: OverlayOpacity.LEVEL_8
+          }} />
+          <ThemeContextProvider gradient={colorThemeBackground}>
+            <View style={[styles.contentContainer, clientThemesOverride]}>
+              <ContentInventoryEntryRow content={content} renderForScreenshot />
+            </View>
+          </ThemeContextProvider>
+        </View>
+      })}
+    </View>
+    {r90 != null ? <>
+      <View style={[styles.emojis, disabled ? styles.submitting : null]}>
+        {frequentlyUsedReactionEmojis.slice(0, memo - 1).map((item) => {
+          let r31;
+          if (item.id != null) {
+            const r42 = env21939[3];
+            r31 = <PressableHighlight onPress={() => (0, env21939[11])(item)} style={r42.emoji} disabled={env21939[4]}>
+              <FastImage key={item.id} style={[r42.defaultEmoji, r42.emojiImage]} source={{
+                uri: AvatarUtils.getEmojiURL({
+                  id: item.id,
+                  animated: item.animated,
+                  size: 48
+                })
+              }} />
+            </PressableHighlight>;
+          } else {
+            const r11 = env21939[3];
+            r31 = <PressableHighlight onPress={() => (0, env21939[11])(item)} style={r11.emoji} disabled={env21939[4]}>
+              {(0, jsx)(Text, {
+                variant: "text-md/medium",
+                color: "interactive-text-default",
+                style: [r11.defaultEmoji, r11.emojiText],
+                allowFontScaling: false,
+                children: item.surrogates
+              })}
+            </PressableHighlight>;
+          }
+          return r31;
+        })}
+        <AddEmojiButton onOpenPicker={() => {
+          const r5 = env21939[0];
+          const id = r5.id;
+          const itemType = env21939[6];
+          ICYMIActionCreators.itemInteracted(id, itemType, "press_reply_reaction_picker");
+          ICYMIActionCreators.feedItemActioned({
+            itemId: r5.id,
+            itemType,
+            actionParameters: {
+              actionGestureType: "press",
+              actionTargetElement: "reaction_picker_button",
+              actionIntentType: "open",
+              actionDestinationType: null
+            }
+          });
+        }} channel={channel2} onPressEmoji={callback2} disabled={disabled} />
+      </View>
+      <View style={styles.inputRow}>
+        <TextInput containerStyle={styles.input} grow isRound placeholder={intl.formatToPlainString(t.m3dK5W, {
+          username: getName(author)
+        })} value={value} onChange={onChange} isDisabled={disabled} />
+        <IconButton accessibilityLabel={intl.string(t.oeb1vg)} icon={<SendMessageIcon size="md" color={Module712.unsafe_rawColors.WHITE} />} size="md" onPress={callback} disabled={value.length === 0} loading={disabled} />
+      </View>
+    </> : <LoadingIndicator />}
+  </View>;
+  return <ActionSheet {...props2} />;
+};
+useStyles = createStyles({
+  header: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    padding: 8
+  },
+  container: {
+    gap: 12
+  },
+  preview: {
+    borderRadius: Module712.radii.md,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_STRONG
+  },
+  loading: {
+    opacity: 0.5
+  },
+  base: {
+    position: "relative"
+  },
+  contentContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  input: {
+    flex: 1,
+    borderRadius: Module712.radii.round
+  },
+  emojis: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  submitting: {
+    opacity: 0.6
+  },
+  emoji: {
+    padding: 8,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND
+  },
+  defaultEmoji: {
+    width: 24,
+    height: 24
+  },
+  emojiImage: {
+    resizeMode: "contain",
+    width: 24,
+    height: 24
+  },
+  emojiText: {
+    lineHeight: 24,
+    fontSize: 20,
+    textAlign: "center",
+    paddingTop: 2
+  }
+});
+export default function ReactActionSheet(props) {
+  if (props == null) {
+    HermesBuiltin.throwTypeError("Cannot destructure 'undefined' or 'null'.");
+    throw new Error("unreachable");
+  }
+  return <ICYMIContextProvider>
+    <ReactActionSheetBase {...HermesBuiltin.copyDataProperties({}, props, void 0)} />
+  </ICYMIContextProvider>;
+};
+export function getStatusReplyContent({ reply, username, status, emojiStr, attachments, isForward = false }) {
+  let r10, r14, r25;
+  if (isForward) {
+    r14 = intl.formatToPlainString(t.S5JNyW, {
+      username
+    });
+    r25 = dependencyMap;
+    r10 = require;
+  } else {
+    r14 = intl.formatToPlainString(t.XPQgL2, {
+      username
+    });
+    r25 = dependencyMap;
+    r10 = require;
+  }
+  const r28 = [];
+  r28.push(`> -# *${r14}*`);
+  if (status.length > 0 || emojiStr.length > 0) {
+    r28.push(`> ${emojiStr} ${status}`);
+  }
+  if (attachments != null && attachments.length > 0) {
+    r28.push(`> -# *${r10(r25[7]).intl.formatToPlainString(r10(r25[7]).t["JiNPo+"], {
+      attachmentsCount: attachments.length
+    })}*`);
+  }
+  r28.push(reply);
+  return r28.join("\n");
+}

modules/icymi/native/content_inventory/useReplyActions.tsx

@@ -0,0 +1,230 @@
+// Metro module 15376 (f15377).
+import { useEffect, useCallback } from "react";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { DraftType } from "../../../../stores/DraftStore";
+import UserStore from "../../../../stores/UserStore";
+import { EmojiIntention } from "../../../emojis/EmojiConstants";
+import { MessageSendLocation } from "../../../messages/MessageConstants";
+import { jsx } from "react/jsx-runtime";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { ContentInventoryEntryType } from "../../../../_bundle/Module7909";
+import UploadAttachmentActionCreators from "../../../../actions/UploadAttachmentActionCreators";
+import ChannelActionCreators from "../../../../actions/ChannelActionCreators";
+import { getStatusReplyContent } from "./ReactActionSheet";
+import UserUtils from "../../../../utils/UserUtils";
+import MessageParser from "../../../messages/MessageParser";
+import MessageActionCreators from "../../../../actions/MessageActionCreators";
+import { sendMessageWithEmbed } from "../../../content_inventory/reactionUtils";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import { ChatCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatCheckIcon";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import { openEmojiPickerActionSheet } from "../../../emoji_picker/native/openEmojiPickerActionSheet";
+import { ReactionTypes } from "../../../messages/MessageReactionsTypes";
+function $mk118477($env) {
+  return () => (0, jsx)(ChatCheckIcon, {});
+}
+let env10928 = {};
+export function useReplyActions(a0) {
+  let r17, content, stateFromStores;
+  let env21936;
+  L5: {
+    env21936 = {
+      $parent: env10928
+    };
+    content = a0.content;
+    env21936[0] = content;
+    env21936[1] = void 0;
+    env21936[2] = void 0;
+    env21936[3] = void 0;
+    env21936[4] = void 0;
+    env21936[5] = void 0;
+    env21936[6] = void 0;
+    stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(env21936[0].author_id));
+    env21936[1] = stateFromStores;
+    r17 = "unknown";
+    env21936[2] = "unknown";
+    const content_type = content.content_type;
+    if (ContentInventoryEntryType.TOP_GAME !== content_type && ContentInventoryEntryType.PLAYED_GAME !== content_type) {
+      if (ContentInventoryEntryType.CUSTOM_STATUS !== content_type) {
+        break L5;
+      }
+      env21936[2] = "hotwheels_custom_status";
+      r17 = "hotwheels_custom_status";
+    } else {
+      env21936[2] = "hotwheels_gaming_activity";
+      r17 = "hotwheels_gaming_activity";
+    }
+  }
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => {
+    const r4 = env21936[1];
+    if (r4 == null) {
+      return null;
+    }
+    return ChannelStore.getChannel(ChannelStore.getDMFromUserId(r4.id));
+  });
+  env21936[3] = stateFromStores2;
+  const r2 = stateFromStores2 != null;
+  env21936[4] = r2;
+  const r42 = [r2, ,];
+  const id = stateFromStores2?.id;
+  let c21937_0;
+  const r44 = () => {
+    if (env21936[4]) {
+      return () => {
+        UploadAttachmentActionCreators.clearAll(env21936[3]?.id, DraftType.ChannelMessage);
+      };
+    }
+  };
+  r42[1] = id;
+  useEffect(r44, r42);
+  c21937_0 = void 0;
+  c21937_0 = async (c30872_0) => {
+    let r205, emoji_name;
+    let c30872_1, c30872_2;
+    L15: {
+      let env31759;
+      c30872_2 = void 0;
+      const r10 = env31759 = {
+        $parent: env10928
+      };
+      c30872_1 = r10;
+      env31759[0] = c30872_0;
+      env31759[1] = void 0;
+      env31759[2] = void 0;
+      env31759[3] = void 0;
+      env31759[4] = void 0;
+      if (env21936[1] != null) {
+        env31759[1] = await ChannelActionCreators.getOrEnsurePrivateChannel(env21936[1].id);
+        env31759[2] = ChannelStore.getChannel(env31759[1]);
+        if (env31759[2] != null) {
+          if (env21936[0].content_type === ContentInventoryEntryType.CUSTOM_STATUS) {
+            const r125 = env21936[0].extra.emoji_name != null;
+            let emojiStr = "";
+            if (r125) {
+              if (env21936[0].extra.emoji_id != null) {
+                if (String(env21936[0].extra.emoji_id) !== "0") {
+                  r205 = `\`:${env21936[0].extra.emoji_name}:\``;
+                } else {
+                  emoji_name = env21936[0].extra.emoji_name;
+                  r205 = `${emoji_name}`;
+                }
+              } else {
+                emoji_name = env21936[0].extra.emoji_name;
+                r205 = `${emoji_name}`;
+              }
+              emojiStr = r205;
+            }
+            env31759[3] = getStatusReplyContent({
+              status: env21936[0].extra.status,
+              emojiStr,
+              reply: env31759[0],
+              username: UserUtils.getName(env21936[1]),
+              attachments: env21936[0].extra.attachments
+            });
+            env31759[4] = MessageParser.parse(env31759[2], env31759[3]);
+            await MessageActionCreators.sendMessage(env31759[2].id, env31759[4], false, {
+              location: MessageSendLocation.ICYMI
+            });
+          } else {
+            await sendMessageWithEmbed({
+              channel: env31759[2],
+              content: env31759[0],
+              entry: env21936[0],
+              whenReady: false,
+              doNotNotifyOnError: false,
+              location: MessageSendLocation.ICYMI
+            });
+          }
+        }
+        ActionSheetActionCreators.hideActionSheet();
+        ToastActionCreators.open({
+          key: "content_inventory_message_sent",
+          content: intl.string(t.fjcCk5),
+          icon: $mk118477(env10928)
+        });
+        break L15;
+      }
+      return void 0;
+    }
+  };
+  const callback = useCallback(function() {
+    return c21937_0.apply(this, arguments);
+  }, [stateFromStores, content]);
+  env21936[5] = callback;
+  const callback2 = useCallback((a0) => {
+    const r8 = env21936[0];
+    const id = r8.id;
+    const itemType = env21936[2];
+    ICYMIActionCreators.itemInteracted(id, itemType, "press_emoji_send");
+    ICYMIActionCreators.feedItemActioned({
+      itemId: r8.id,
+      itemType,
+      actionParameters: {
+        actionGestureType: "press",
+        actionTargetElement: "reaction_reply_button",
+        actionIntentType: "react",
+        actionDestinationType: null
+      }
+    });
+    return env21936[5](a0.id != null ? `:${a0.name}:` : a0.surrogates);
+  }, [content.id, r17, callback]);
+  env21936[6] = callback2;
+  const callback3 = useCallback(() => {
+    let channel = env21936[3];
+    if (channel == null) {
+      channel = void 0;
+    }
+    openEmojiPickerActionSheet({
+      pickerIntention: EmojiIntention.REACTION,
+      autoFocus: false,
+      startExpanded: false,
+      onPressEmoji: env21936[6],
+      channel,
+      reactionType: ReactionTypes.NORMAL
+    });
+  }, [stateFromStores2, callback2]);
+  return {
+    openReplyActionSheet: useCallback(() => {
+      let content, itemType;
+      const author = env21936[1];
+      if (author != null) {
+        L5: {
+          content = env21936[0];
+          const content_type = content.content_type;
+          const CUSTOM_STATUS = ContentInventoryEntryType.CUSTOM_STATUS;
+          itemType = "hotwheels_custom_status";
+          if (CUSTOM_STATUS !== content_type) {
+            if (ContentInventoryEntryType.TOP_GAME !== content_type) {
+              const PLAYED_GAME = ContentInventoryEntryType.PLAYED_GAME;
+              itemType = "unknown";
+              if (PLAYED_GAME !== content_type) {
+                break L5;
+              }
+            }
+            itemType = "hotwheels_gaming_activity";
+          }
+        }
+        ICYMIActionCreators.itemInteracted(content.id, itemType, "press_reply_react");
+        ICYMIActionCreators.feedItemActioned({
+          itemId: content.id,
+          itemType,
+          actionParameters: {
+            actionGestureType: "press",
+            actionTargetElement: "item_container",
+            actionIntentType: "open",
+            actionDestinationType: null
+          }
+        });
+        ActionSheetActionCreators.openLazy(import("./ReactActionSheet"), "ReactActionSheet", {
+          content,
+          author,
+          sendMessage: env21936[5],
+          onPressEmoji: env21936[6]
+        });
+      }
+    }, [stateFromStores, content, callback2, callback]),
+    openEmojiPicker: callback3
+  };
+}

modules/icymi/native/createICYMIStyles.tsx

@@ -0,0 +1,10 @@
+// Metro module 15322 (f15323).
+import { useContext } from "react";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { ICYMIContext } from "./ICYMIContext";
+export function createICYMIStyles(a0) {
+  const useStyles = createStyles(a0);
+  return function(...args) {
+    return useStyles.apply(void 0, [useContext(ICYMIContext), ...args]);
+  };
+}

modules/icymi/native/custom_scores/ICYMIContentSettingControl.tsx

@@ -0,0 +1,181 @@
+// Metro module 15329 (f15330).
+import { useState, useCallback } from "react";
+import { View } from "react-native";
+import UserGuildSettingsStore from "../../../../stores/UserGuildSettingsStore";
+import ICYMIStore from "../../ICYMIStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { ICYMICustomScore, numberToCustomScore, customScoreToNumber } from "../../ICYMIUtils";
+import { intl, t } from "../../../../intl/index.native";
+import { Icon } from "../../../../design/void/native";
+import Module15330 from "../../../../_bundle/Module15330";
+import Module15331 from "../../../../_bundle/Module15331";
+import Module15332 from "../../../../_bundle/Module15332";
+import { useSegmentedControlState } from "../../../../design/components/SegmentedControl/native/SegmentedControlState.native";
+import { SegmentedControl } from "../../../../design/components/SegmentedControl/native/SegmentedControl.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import NativeICYMIActionCreators from "../NativeICYMIActionCreators";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { TableSwitchRow } from "../../../../design/components/TableRow/native/TableSwitchRow.native";
+import useChannelName from "../../../channel/useChannelName";
+let useStyles;
+const ContentSettingsControl = function ContentSettingsControl(props) {
+  const { initialValue, onValueUpdated, disabled } = props;
+  const styles = useStyles();
+  const [state, setState] = useState(initialValue);
+  const items = [{
+    label: intl.string(t.rdt65I),
+    id: "-1",
+    icon: <Icon source={Module15330} style={[styles.icon, state === ICYMICustomScore.LESS ? styles.iconSelected : null]} />,
+    page: null
+  }, , ,];
+  items[1] = {
+    label: intl.string(t.SnrG00),
+    id: "0",
+    icon: <Icon source={Module15331} style={[styles.icon, state === ICYMICustomScore.DEFAULT ? styles.iconSelected : null]} />,
+    page: null
+  };
+  items[2] = {
+    label: intl.string(t.Rxe3jF),
+    id: "1",
+    icon: <Icon source={Module15332} style={[styles.icon, state === ICYMICustomScore.MORE ? styles.iconSelected : null]} />,
+    page: null
+  };
+  return <View style={disabled ? {
+    opacity: 0.7
+  } : null} pointerEvents={disabled ? "none" : "auto"}>
+    <SegmentedControl variant="experimental_Large" state={useSegmentedControlState({
+      pageWidth: 0,
+      onSetActiveIndex: (a0) => {
+        let DEFAULT = ICYMICustomScore.DEFAULT;
+        if (a0 === 0) {
+          DEFAULT = ICYMICustomScore.LESS;
+        } else if (a0 === 2) {
+          DEFAULT = ICYMICustomScore.MORE;
+        }
+        setState(DEFAULT);
+        onValueUpdated(DEFAULT);
+      },
+      items,
+      defaultIndex: ICYMICustomScore.LESS !== state ? ICYMICustomScore.MORE === state ? 2 : 1 : 0
+    })} />
+  </View>;
+};
+useStyles = createStyles({
+  customScoreWrapper: {
+    marginVertical: Module712.space.PX_16
+  },
+  warningText: {
+    marginTop: Module712.space.PX_8,
+    marginHorizontal: Module712.space.PX_12
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    tintColor: Module712.colors.TEXT_MUTED
+  },
+  iconSelected: {
+    tintColor: Module712.colors.INTERACTIVE_TEXT_ACTIVE
+  },
+  muted: {
+    marginTop: Module712.space.PX_16
+  }
+});
+export function GuildScoreSettings(props) {
+  let c21876_1;
+  const guild = props.guild;
+  c21876_1 = void 0;
+  const id = guild.id;
+  const initialValue = numberToCustomScore(useStateFromStores([ICYMIStore], () => ICYMIStore.getCustomGuildScore(id)));
+  c21876_1 = initialValue;
+  const r1 = initialValue === ICYMICustomScore.MUTED;
+  const callback = useCallback((a0) => {
+    NativeICYMIActionCreators.customScoreGuild({
+      guildId: id,
+      guildScore: a0 ? customScoreToNumber(ICYMICustomScore.DEFAULT) : customScoreToNumber(ICYMICustomScore.MUTED)
+    });
+  }, [id]);
+  const callback2 = useCallback((a0) => {
+    if (c21876_1 !== a0) {
+      NativeICYMIActionCreators.customScoreGuild({
+        guildId: id,
+        guildScore: customScoreToNumber(a0)
+      });
+    }
+  }, [initialValue, id]);
+  const styles = useStyles();
+  return <View>
+    <Text variant="text-sm/semibold" color="text-default">
+      {intl.string(t.Clq6km)}
+    </Text>
+    <Text variant="text-xs/normal" color="text-default">
+      {intl.format(t["0DhU2P"], {
+        guildName: guild.name
+      })}
+    </Text>
+    {r1 ? null : <View style={styles.customScoreWrapper}>
+      <ContentSettingsControl initialValue={initialValue} onValueUpdated={callback2} />
+    </View>}
+    <View style={r1 && styles.muted}>
+      <TableSwitchRow value={!r1} onValueChange={callback} label={intl.string(t.oujX73)} start end />
+    </View>
+    <Text variant="text-xs/normal" color="text-muted" style={styles.warningText}>
+      {intl.string(t.vRVs07)}
+    </Text>
+  </View>;
+}
+export function ChannelScoreSettings(props) {
+  const { guild, channel } = props;
+  const id2 = guild.id;
+  const id3 = channel.id;
+  const stateFromStores = useStateFromStores([ICYMIStore, UserGuildSettingsStore], () => {
+    let r8 = ICYMIStore.getCustomChannelScore(id2, id3);
+    if (r8 === ICYMICustomScore.UNKNOWN) {
+      r8 = UserGuildSettingsStore.isChannelMuted(id2, id3) ? ICYMICustomScore.MUTED : ICYMICustomScore.DEFAULT;
+    }
+    return r8;
+  });
+  const channelName = useChannelName(channel, true);
+  const disabled = numberToCustomScore(useStateFromStores([ICYMIStore], () => ICYMIStore.getCustomGuildScore(id2))) === ICYMICustomScore.MUTED;
+  const r1 = stateFromStores === ICYMICustomScore.MUTED;
+  const callback = useCallback((a0) => {
+    if (stateFromStores !== a0) {
+      NativeICYMIActionCreators.customScoreGuild({
+        guildId: id2,
+        channelScores: [{
+          channelId: id3,
+          score: customScoreToNumber(a0)
+        }]
+      });
+    }
+  }, [stateFromStores, id2, id3]);
+  const callback2 = useCallback((a0) => {
+    NativeICYMIActionCreators.customScoreGuild({
+      guildId: id2,
+      channelScores: [{
+        channelId: id3,
+        score: a0 ? customScoreToNumber(ICYMICustomScore.DEFAULT) : customScoreToNumber(ICYMICustomScore.MUTED)
+      }]
+    });
+  }, [id3, id2]);
+  const styles = useStyles();
+  return <View>
+    <Text variant="text-sm/semibold" color="text-default">
+      {intl.string(t["0jRosn"])}
+    </Text>
+    <Text variant="text-xs/normal" color="text-default">
+      {intl.format(t.KzkF1j, {
+        channelName
+      })}
+    </Text>
+    {r1 ? null : <View style={styles.customScoreWrapper}>
+      <ContentSettingsControl disabled={disabled} initialValue={stateFromStores} onValueUpdated={callback} />
+    </View>}
+    <View style={r1 && styles.muted}>
+      <TableSwitchRow value={!r1} onValueChange={callback2} label={intl.string(t.W2aJRS)} disabled={disabled} start end />
+    </View>
+    <Text variant="text-xs/normal" color="text-muted" style={styles.warningText}>
+      {intl.string(t["5lP6Ax"])}
+    </Text>
+  </View>;
+}

modules/icymi/native/custom_scores/ICYMICustomScoreTypes.tsx

@@ -0,0 +1,2 @@
+// Metro module 15334 (f15335).
+export const ICYMI_CUSTOM_SCORES_MODAL_KEY = "icymi-custom-scores-modal";

modules/icymi/native/custom_scores/ICYMICustomScoresGuildScreen.tsx

@@ -0,0 +1,207 @@
+// Metro module 15327 (f15328).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useMemo, useCallback, useEffect } from "react";
+import { View } from "react-native";
+import ChannelListStore from "../../../guild_sidebar/ChannelListStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import GuildStore from "../../../../stores/GuildStore";
+import UserGuildSettingsStore from "../../../../stores/UserGuildSettingsStore";
+import ICYMIStore from "../../ICYMIStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores, useStateFromStoresObject } from "../../../../_bundle/Module589";
+import useChannelName from "../../../channel/useChannelName";
+import { ICYMICustomScore, numberToCustomScore, isChannelCustomScoreEligible } from "../../ICYMIUtils";
+import { intl, t } from "../../../../intl/index.native";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import { getChannelIcon } from "../../../../utils/native/ChannelUtils";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import { Icon, IconSizes } from "../../../../design/void/native";
+import Module10308 from "../../../../_bundle/Module10308";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { SECTION_INDEX_GUILD_ACTIONS, SECTION_INDEX_FAVORITES, SECTION_INDEX_RECENTS, SECTION_INDEX_FIRST_NAMED_CATEGORY } from "../../../guild_sidebar/ChannelListState";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { GuildScoreSettings } from "./ICYMIContentSettingControl";
+import { ChevronSmallDownIcon } from "../../../../design/components/Icon/native/redesign/generated/ChevronSmallDownIcon";
+import { AnimatedFlashList } from "../../../../_bundle/noop_6676";
+let useStyles, keyExtractor;
+const ICYMICustomScoreChannelRow = function ICYMICustomScoreChannelRow(props) {
+  let stateFromStores2, c21872_3;
+  const { channelId, start, end, disabled } = props;
+  stateFromStores2 = void 0;
+  c21872_3 = void 0;
+  const styles2 = useStyles();
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const channelName = useChannelName(stateFromStores);
+  stateFromStores2 = useStateFromStores([ICYMIStore, UserGuildSettingsStore], () => {
+    if (stateFromStores == null) {
+      return ICYMICustomScore.DEFAULT;
+    }
+    let r8 = ICYMIStore.getCustomChannelScore(stateFromStores.guild_id, stateFromStores.id);
+    if (r8 === ICYMICustomScore.UNKNOWN) {
+      r8 = UserGuildSettingsStore.isChannelMuted(stateFromStores.guild_id, stateFromStores.id) ? ICYMICustomScore.MUTED : ICYMICustomScore.DEFAULT;
+    }
+    return r8;
+  });
+  const r1 = stateFromStores2 === ICYMICustomScore.MUTED;
+  c21872_3 = r1;
+  const memo = useMemo(() => c21872_3 ? intl.string(t.lhPHmz) : stateFromStores2 === ICYMICustomScore.MORE ? intl.string(t.Rxe3jF) : stateFromStores2 === ICYMICustomScore.LESS ? intl.string(t.rdt65I) : intl.string(t.SnrG00), [r1, stateFromStores2]);
+  const callback = useCallback(() => {
+    if (stateFromStores != null) {
+      ActionSheetActionCreators.openLazy(import("../ItemDetailsActionSheet"), "ItemDetailsActionSheet", {
+        guildId: stateFromStores.guild_id,
+        channelId: stateFromStores.id
+      });
+    }
+  }, [stateFromStores]);
+  if (stateFromStores == null) {
+    return null;
+  }
+  return <TableRow arrow disabled={disabled} icon={<Icon size={IconSizes.SMALL} source={getChannelIcon(stateFromStores)} />} start={start} end={end} labelLineClamp={1} label={r1 ? <View style={styles2.channelNameContainer}>
+    <Icon source={Module10308} size={Icon.Sizes.SMALL} style={styles2.channelMutedIcon} />
+    <Text variant="text-md/semibold" color="mobile-text-heading-primary" lineClamp={1}>{channelName}</Text>
+  </View> : channelName} trailing={<TableRow.TrailingText text={memo} />} onPress={callback} />;
+};
+keyExtractor = function keyExtractor(a0, a1) {
+  const kind = a0.kind;
+  if (kind === "header") {
+    return "header";
+  }
+  if (kind === "categoryHeader") {
+    return `categoryHeader-${a0.index}`;
+  }
+  if (kind === "channel") {
+    return `channel-${a0.channelId}`;
+  }
+  return `${a1}`;
+};
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    paddingHorizontal: Module712.space.PX_12
+  },
+  guildHeader: {
+    marginBottom: Module712.space.PX_32
+  },
+  categoryHeader: {
+    paddingTop: Module712.space.PX_8,
+    paddingBottom: Module712.space.PX_8,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_4
+  },
+  channelNameContainer: {
+    flexDirection: "row",
+    gap: Module712.space.PX_4
+  },
+  channelMutedIcon: {
+    alignSelf: "center",
+    tintColor: Module712.colors.ICON_MUTED
+  }
+});
+export default function ICYMICustomScoresGuildScreen(props) {
+  let c21873_4, guildChannels;
+  const navigation = props.navigation;
+  const guildId = props.route.params.guildId;
+  c21873_4 = void 0;
+  guildChannels = void 0;
+  const styles = useStyles();
+  const stateFromStores3 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
+  useEffect(() => {
+    let title = stateFromStores3?.name;
+    if (title == null) {
+      title = "";
+    }
+    navigation.setOptions({
+      title
+    });
+  }, [navigation, stateFromStores3?.name]);
+  const r38 = numberToCustomScore(useStateFromStores([ICYMIStore], () => ICYMIStore.getCustomGuildScore(guildId)));
+  c21873_4 = r38;
+  guildChannels = useStateFromStoresObject([ChannelListStore], () => ChannelListStore.getGuild(guildId)).guildChannels;
+  const memo = useMemo(() => {
+    const r0 = [];
+    r0.push({
+      kind: "header"
+    });
+    for (const item of guildChannels.getSections(false).entries()) {
+      const r49 = _slicedToArray(item, 2);
+      const index = r49[0];
+      if (r49[1] !== 0 && index !== SECTION_INDEX_GUILD_ACTIONS && index !== guildChannels.voiceChannelsSectionNumber) {
+        const categoryFromSection = guildChannels.getCategoryFromSection(index);
+        const r66 = categoryFromSection == null ? void 0 : categoryFromSection.getChannelRecords().filter((item) => isChannelCustomScoreEligible(item));
+        if (r66 != null && r66.length !== 0) {
+          let title = intl.string(t.GSfOoo);
+          if (index === SECTION_INDEX_FAVORITES) {
+            title = intl.string(t.mlPMCy);
+          } else if (index === SECTION_INDEX_RECENTS) {
+            title = intl.string(t.gKcrqM);
+          } else if (index >= SECTION_INDEX_FIRST_NAMED_CATEGORY) {
+            const namedCategoryFromSection = guildChannels.getNamedCategoryFromSection(index);
+            let r104 = namedCategoryFromSection == null ? void 0 : namedCategoryFromSection.record.name;
+            if (r104 == null) {
+              r104 = "";
+            }
+            title = r104;
+          }
+          r0.push({
+            kind: "categoryHeader",
+            index,
+            title
+          });
+          for (const item2 of r66.entries()) {
+            const r141 = _slicedToArray(item2, 2);
+            const r22 = r141[0];
+            r0.push({
+              kind: "channel",
+              channelId: r141[1].id,
+              start: r22 === 0,
+              end: r22 === r66.length - 1,
+              disabled: c21873_4 === ICYMICustomScore.MUTED
+            });
+          }
+        }
+      }
+    }
+    const r165 = r0[r0.length - 1];
+    if (r165.kind === "channel") {
+      r165.end = true;
+    }
+    return r0;
+  }, [r38, guildChannels]);
+  return <View style={styles.container}>
+    <AnimatedFlashList contentInset={{
+      bottom: useSafeAreaInsets_native().bottom,
+      top: Module712.space.PX_12
+    }} showsVerticalScrollIndicator={false} renderItem={useCallback(({ item }) => {
+      const kind = item.kind;
+      if (kind === "header") {
+        return stateFromStores3 != null ? <>
+          <View style={styles.guildHeader}>
+            <GuildScoreSettings guild={stateFromStores3} />
+          </View>
+          <Text variant="text-sm/semibold" color="text-default">
+            {intl.string(t["0jRosn"])}
+          </Text>
+          <Text variant="text-xs/normal" color="text-default" style={{
+            marginBottom: Module712.space.PX_16
+          }}>
+            {intl.string(t.l52PX4)}
+          </Text>
+        </> : null;
+      }
+      if (kind === "categoryHeader") {
+        return <View style={styles.categoryHeader}>
+          <ChevronSmallDownIcon size="xs" color={Module712.colors.TEXT_SUBTLE} />
+          <Text variant="text-sm/semibold" color="text-default">{item.title}</Text>
+        </View>;
+      }
+      if (kind === "channel") {
+        return <ICYMICustomScoreChannelRow disabled={item.disabled} channelId={item.channelId} start={item.start} end={item.end} />;
+      }
+      return null;
+    }, [stateFromStores3, styles.categoryHeader, styles.guildHeader])} data={memo} keyExtractor={keyExtractor} />
+  </View>;
+};

modules/icymi/native/custom_scores/ICYMICustomScoresModal.tsx

@@ -0,0 +1,38 @@
+// Metro module 15325 (f15326).
+import { createNativeStackNavigator } from "../../../../_bundle/Module9109";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useAccessibilityNativeStackOptions } from "../../../../design/components/Navigator/native/Navigator.native";
+import { GenericHeaderTitle, getRenderModalCloseImage, getRenderModalBackImage } from "../../../main_tabs_v2/native/shared_components/HeaderShared";
+import { intl, t } from "../../../../intl/index.native";
+import getNavigationModalPresentation from "../../../main_tabs_v2/native/utils/getNavigationModalPresentation";
+import * as _ICYMICustomScoresOverviewScreen from "./ICYMICustomScoresOverviewScreen";
+import * as _ICYMICustomScoresGuildScreen from "./ICYMICustomScoresGuildScreen";
+const nativeStackNavigator = createNativeStackNavigator();
+const useStyles = createStyles({
+  header: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  }
+});
+export default function ICYMICustomScoresModal() {
+  const styles = useStyles();
+  const accessibilityNativeStackOptions = useAccessibilityNativeStackOptions();
+  return <nativeStackNavigator.Navigator screenOptions={() => ({
+    headerStyle: styles.header,
+    headerTitle: (a0) => {
+      const { children, ...rest } = a0;
+      return <GenericHeaderTitle title={a0.children} {...rest} />;
+    },
+    headerTitleAlign: "center",
+    ...accessibilityNativeStackOptions
+  })} initialRouteName="default">
+    <nativeStackNavigator.Screen name="default" options={({ navigation }) => ({
+      title: intl.string(t.jVshKt),
+      headerLeft: getRenderModalCloseImage(navigation),
+      ...getNavigationModalPresentation()
+    })} getComponent={() => _ICYMICustomScoresOverviewScreen.default} />
+    <nativeStackNavigator.Screen name="guild" options={(a0) => ({
+      headerLeft: getRenderModalBackImage(a0.navigation)
+    })} getComponent={() => _ICYMICustomScoresGuildScreen.default} />
+  </nativeStackNavigator.Navigator>;
+};

modules/icymi/native/custom_scores/ICYMICustomScoresOverviewScreen.tsx

@@ -0,0 +1,48 @@
+// Metro module 15326 (f15327).
+import { useMemo, useCallback } from "react";
+import { ScrollView } from "react-native";
+import GuildStore from "../../../../stores/GuildStore";
+import SortedGuildStore from "../../../../stores/SortedGuildStore";
+import ICYMIStore from "../../ICYMIStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { TableRowGroup } from "../../../../design/components/TableRow/native/TableRowGroup.native";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import GuildIcon from "../../../guild/native/GuildIcon";
+import { numberToCustomScore, ICYMICustomScore } from "../../ICYMIUtils";
+import { intl, t } from "../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    paddingHorizontal: Module712.space.PX_12
+  }
+});
+export default function ICYMICustomScoresOverviewScreen(props) {
+  let stateFromStores2, stateFromStores3, callback;
+  const navigation = props.navigation;
+  stateFromStores2 = void 0;
+  stateFromStores3 = void 0;
+  callback = void 0;
+  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuilds());
+  stateFromStores2 = useStateFromStores([SortedGuildStore], () => SortedGuildStore.getFlattenedGuildIds());
+  stateFromStores3 = useStateFromStores([ICYMIStore], () => ICYMIStore.getCustomGuildScores());
+  const memo = useMemo(() => stateFromStores2.map((item) => stateFromStores[item]), [stateFromStores2, stateFromStores]);
+  const styles = useStyles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  callback = useCallback((a0) => navigation.navigate("guild", {
+    guildId: a0
+  }), [navigation]);
+  return <ScrollView showsVerticalScrollIndicator={false} style={styles.container} contentInset={{
+    bottom,
+    top: Module712.space.PX_12
+  }}>
+    <TableRowGroup hasIcons>
+      {memo.map((item) => {
+        return <TableRow key={item.id} onPress={() => callback(item.id)} icon={<GuildIcon guild={item} />} label={item.name} trailing={stateFromStores3[item.id] != null ? numberToCustomScore(stateFromStores3[item.id]) === ICYMICustomScore.MUTED ? <TableRow.TrailingText text={intl.string(t.lhPHmz)} /> : void 0 : void 0} arrow />;
+      })}
+    </TableRowGroup>
+  </ScrollView>;
+};

modules/icymi/native/info_modal/ICYMIInfoModal.tsx

@@ -0,0 +1,56 @@
+// Metro module 15336 (f15337).
+import { useMemo } from "react";
+import { useNavigatorScreens } from "../../../../design/components/Navigator/native/Navigator.native";
+import { ICYMIInfoScreens, ICYMI_INFO_MODAL_KEY } from "./ICYMIInfoModalTypes";
+import { getHeaderCloseButton, getHeaderBackButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
+import ICYMIInfoScreen from "./ICYMIInfoScreen";
+import { ImpressionNames } from "../../../../_bundle/Module503";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { HeaderActionButton } from "../../../../design/components/Navigator/native/HeaderActionButton.native";
+import { intl, t } from "../../../../intl/index.native";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import ICYMITopicsScreen from "./ICYMITopicsScreen";
+import ICYMIJoinGuildsScreen from "./ICYMIJoinGuildsScreen";
+import { Modal } from "../../../../design/components/Modal/native/Modal.native";
+import { StepModal } from "../../../../design/components/Modal/native/StepModal.native";
+export default function ICYMIInfoModal(props) {
+  const { extendedOnboarding, skipIntro } = props;
+  const extendedOnboarding2 = extendedOnboarding;
+  const skipIntro2 = skipIntro;
+  const navigatorScreens = useNavigatorScreens(() => {
+    const r1 = {};
+    r1[ICYMIInfoScreens.DEFAULT] = {
+      headerLeft: getHeaderCloseButton(),
+      render: () => <ICYMIInfoScreen extendedOnboarding={extendedOnboarding2} />,
+      impressionName: ImpressionNames.ICYMI_ONBOARDING_OVERVIEW,
+      impressionProperties: {
+        extended_onboarding: extendedOnboarding2
+      }
+    };
+    r1[ICYMIInfoScreens.TOPICS_CLOUD] = {
+      headerLeft: skipIntro2 ? getHeaderCloseButton(() => ModalActionCreators.popWithKey(ICYMI_INFO_MODAL_KEY)) : getHeaderBackButton(),
+      headerRight: () => skipIntro2 ? null : <HeaderActionButton text={intl.string(t["5Wxrcd"])} onPress={() => {
+        ICYMIAnalytics.trackFeedOnboardingScreenSkipped({
+          location: "topics"
+        });
+        ModalActionCreators.pop();
+      }} />,
+      render: () => <ICYMITopicsScreen />,
+      impressionName: ImpressionNames.ICYMI_ONBOARDING_TOPICS
+    };
+    r1[ICYMIInfoScreens.JOIN_GUILDS] = {
+      headerLeft: getHeaderBackButton(),
+      headerRight: () => <HeaderActionButton text={intl.string(t["5Wxrcd"])} onPress={() => {
+        ICYMIAnalytics.trackFeedOnboardingScreenSkipped({
+          location: "guilds"
+        });
+        ModalActionCreators.pop();
+      }} />,
+      render: () => <ICYMIJoinGuildsScreen />,
+      impressionName: ImpressionNames.ICYMI_ONBOARDING_SELECT_GUILDS
+    };
+    return r1;
+  }, [extendedOnboarding, skipIntro]);
+  const memo = useMemo(() => extendedOnboarding ? skipIntro ? [ICYMIInfoScreens.TOPICS_CLOUD, ICYMIInfoScreens.JOIN_GUILDS] : [ICYMIInfoScreens.DEFAULT, ICYMIInfoScreens.TOPICS_CLOUD, ICYMIInfoScreens.JOIN_GUILDS] : [ICYMIInfoScreens.DEFAULT], [extendedOnboarding, skipIntro]);
+  return extendedOnboarding ? <StepModal screens={navigatorScreens} steps={memo} initialRouteName={skipIntro ? ICYMIInfoScreens.TOPICS_CLOUD : ICYMIInfoScreens.DEFAULT} /> : <Modal screens={navigatorScreens} initialRouteName={ICYMIInfoScreens.DEFAULT} />;
+};

modules/icymi/native/info_modal/ICYMIInfoModalTypes.tsx

@@ -0,0 +1,9 @@
+// Metro module 15337 (f15338).
+const r9 = {
+  DEFAULT: "default",
+  TOPICS_CLOUD: "topics_cloud",
+  JOIN_GUILDS: "join_guilds"
+};
+export const ICYMI_INFO_MODAL_KEY = "icymi-info-modal";
+export const ICYMI_DISCOVERABLE_GUILDS_PAGE_SIZE = 48;
+export { r9 as ICYMIInfoScreens };

modules/icymi/native/info_modal/ICYMIInfoScreen.tsx

@@ -0,0 +1,228 @@
+// Metro module 15338 (f15339).
+import { useCallback, useLayoutEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { ThemeTypes } from "../../../../_bundle/Module505";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import useTheme from "../../../../hooks/useTheme";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import { maybeFetchGuildDiscoveryCategories } from "../../../global_discovery_servers/GuildDiscoveryCategoryActionCreators";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { HeaderIconButton } from "../../../main_tabs_v2/native/shared_components/HeaderShared";
+import Module9126 from "../../../../_bundle/Module9126";
+import { intl, t } from "../../../../intl/index.native";
+import FastImage from "../../../../components_native/common/FastImage";
+import Module15341 from "../../../../_bundle/Module15341";
+import Module15342 from "../../../../_bundle/Module15342";
+import Module15343 from "../../../../_bundle/Module15343";
+import Module15344 from "../../../../_bundle/Module15344";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { ServerIcon } from "../../../../design/components/Icon/native/redesign/generated/ServerIcon";
+import { NewUserIcon } from "../../../../design/components/Icon/native/redesign/generated/NewUserIcon";
+import { CircleCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+function $mk116922($env) {
+  return () => {
+    const r2 = $env;
+    navigation.navigate("topics_cloud");
+    setTimeout($mk118474(r2), 500);
+  };
+}
+function $mk118474($env) {
+  return () => (0, setState)(false);
+}
+const useStyles = createStyles({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    position: "relative",
+    flex: 1
+  },
+  closeIcon: {
+    position: "absolute",
+    justifyContent: "center",
+    left: 12,
+    width: 24,
+    height: NAV_BAR_HEIGHT,
+    zIndex: 2
+  },
+  closeIconColor: {
+    backgroundColor: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
+  },
+  bgImage: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    aspectRatio: 1.2515923566878981,
+    overflow: "visible"
+  },
+  headerImg: {
+    position: "absolute",
+    top: 16,
+    width: 361,
+    height: 240
+  },
+  flashIcon: {
+    marginBottom: 32,
+    marginTop: 132
+  },
+  subContainer: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 16
+  },
+  header: {
+    alignItems: "center",
+    paddingHorizontal: 12
+  },
+  headerText: {
+    textAlign: "center",
+    marginTop: 8
+  },
+  body: {
+    gap: 16,
+    padding: 16,
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    borderRadius: Module712.radii.lg,
+    marginTop: 40
+  },
+  divider: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginLeft: 48
+  },
+  infoRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    gap: 16
+  },
+  infoIcon: {
+    padding: 8,
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+    borderRadius: Module712.radii.round
+  },
+  infoText: {
+    flexShrink: 1
+  },
+  hint: {
+    margin: 12
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_8
+  }
+});
+export default function ICYMIInfoScreen(props) {
+  let setState;
+  const extendedOnboarding = props.extendedOnboarding;
+  setState = void 0;
+  const styles = useStyles();
+  const safeAreaInsets_native = useSafeAreaInsets_native();
+  const { top, bottom } = safeAreaInsets_native;
+  const theme = useTheme();
+  const navigation = useNavigation();
+  const callback = useCallback(async () => {
+    let c27995_0;
+    L14: {
+      c27995_0 = void 0;
+      if (extendedOnboarding) {
+        ICYMIAnalytics.trackFeedOnboardingScreenSkipped({
+          location: "overview"
+        });
+        setState(true);
+        await maybeFetchGuildDiscoveryCategories();
+        setTimeout($mk116922(c27995_0), 100);
+        break L14;
+      }
+      ModalActionCreators.pop();
+      return void 0;
+    }
+  }, [extendedOnboarding, navigation]);
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      header: () => null
+    });
+  }, [navigation]);
+  let loading;
+  [loading, setState] = useState(false);
+  const r76 = [<View style={[{
+    marginTop: top
+  }, styles.closeIcon]}>
+    <HeaderIconButton source={Module9126} onPress={() => ModalActionCreators.pop()} accessibilityLabel={intl.string(t.cpT0Cq)} color={styles.closeIconColor.backgroundColor} />
+  </View>, , ,];
+  r76[1] = <ScrollView style={[styles.container, {
+    marginBottom: bottom
+  }]}>
+    <FastImage source={{
+      uri: Module15341
+    }} style={styles.bgImage} />
+    <View style={[styles.subContainer, {
+      marginTop: top + Module712.space.PX_12
+    }]}>
+      <View style={styles.header}>
+        <FastImage source={{
+          uri: theme === ThemeTypes.LIGHT ? Module15342 : Module15343
+        }} style={styles.headerImg} />
+        <FastImage source={Module15344} style={styles.flashIcon} />
+        <Text variant="heading-xl/bold" color="mobile-text-heading-primary">
+          {intl.string(t["jnXV/V"])}
+        </Text>
+        <Text variant="text-md/normal" color="text-default" style={styles.headerText}>
+          {intl.string(t["9SjvoK"])}
+        </Text>
+      </View>
+      <View>
+        <View style={styles.body}>
+          <View style={styles.infoRow}>
+            <View style={styles.infoIcon}>
+              <ServerIcon size="sm" color="interactive-text-active" />
+            </View>
+            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
+              {intl.string(t.knxfqR)}
+            </Text>
+          </View>
+          <View style={styles.divider} />
+          <View style={styles.infoRow}>
+            <View style={styles.infoIcon}>
+              <NewUserIcon size="sm" color="interactive-text-active" />
+            </View>
+            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
+              {intl.string(t.BnUXZi)}
+            </Text>
+          </View>
+          <View style={styles.divider} />
+          <View style={styles.infoRow}>
+            <View style={styles.infoIcon}>
+              <CircleCheckIcon size="sm" color="interactive-text-active" />
+            </View>
+            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
+              {intl.string(t.itb1rh)}
+            </Text>
+          </View>
+        </View>
+        <Text variant="text-xs/medium" color="text-muted" style={styles.hint}>
+          {intl.format(t["jVS/hc"], {
+            feedbackHook: (a0, a1) => <Text key={a1} variant="text-xs/medium" color="text-link" onPress={() => ActionSheetActionCreators.openLazy(import("../ICYMIFeedbackSheet"), "ICYMIFeedbackSheet", {})}>
+              {a0}
+            </Text>
+          })}
+        </Text>
+      </View>
+    </View>
+  </ScrollView>;
+  r76[2] = <View style={[{
+    marginBottom: bottom
+  }, styles.footer]}>
+    <Button size="lg" loading={loading} text={extendedOnboarding ? intl.string(t.LhlgY9) : intl.string(t["+IrDzN"])} onPress={callback} />
+  </View>;
+  return <>{r76}</>;
+};

modules/icymi/native/info_modal/ICYMIJoinGuildsScreen.tsx

@@ -0,0 +1,310 @@
+// Metro module 15354 (f15355).
+import { useCallback, useState, useRef, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import GuildStore from "../../../../stores/GuildStore";
+import ICYMIPopularGuildsStore from "../../ICYMIPopularGuildsStore";
+import { GuildFeatures } from "../../../../Constants";
+import { createICYMIStyles } from "../createICYMIStyles";
+import Module712 from "../../../../_bundle/Module712";
+import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
+import { ServerIcon } from "../../../../design/components/Icon/native/redesign/generated/ServerIcon";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../../design/animation/reanimated/timing/timing";
+import FastestList_android from "../../../fastest_list/FastestList.android";
+import { useStateFromStores, useStateFromStoresArray } from "../../../../_bundle/Module589";
+import AvatarUtils from "../../../../utils/AvatarUtils";
+import ClipView, { CutoutShape } from "../../../../design/components/Icon/native/ClipView";
+import FastImage from "../../../../components_native/common/FastImage";
+import { PressableHighlight } from "../../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { CircleCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
+import { intl, t } from "../../../../intl/index.native";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { ICYMI_INFO_MODAL_KEY, ICYMI_DISCOVERABLE_GUILDS_PAGE_SIZE } from "./ICYMIInfoModalTypes";
+import { MasonryFlashList } from "../../../../_bundle/noop_6676";
+let SELECTED_SERVER_SIZE_WITH_BORDER, styles, __initData, SelectedServersRow, CutoutGuildBanner, FeaturedServer;
+const SelectedServerIcon = function SelectedServerIcon(props) {
+  const { guild: guild3, index } = props;
+  const r13 = styles();
+  const r2 = index < 3;
+  return <View style={[r13.selectedServerIcon, guild3 == null && r13.noServerContainer, guild3 == null && !r2 && r13.noServerExtraContainer]}>
+    {guild3 != null ? <GuildIcon style={r13.guildIconBorder} guild={guild3} size={GuildIconSizes.LARGE} /> : r2 ? <ServerIcon size="md" color={Module712.colors.ICON_MUTED} /> : null}
+  </View>;
+};
+SelectedServersRow = function SelectedServersRow(props) {
+  let state, setState, ref;
+  const selectedGuilds = props.selectedGuilds;
+  state = void 0;
+  setState = void 0;
+  ref = void 0;
+  const r7 = styles();
+  const callback2 = useCallback((a0, a1) => <SelectedServerIcon guild={a1 < selectedGuilds.length ? selectedGuilds[a1] : void 0} index={a1} />, [selectedGuilds]);
+  [state, setState] = useState(selectedGuilds.length);
+  ref = useRef(null);
+  useEffect(() => {
+    if (state < selectedGuilds.length) {
+      const current = ref.current;
+      if (current != null) {
+        current.scrollToLocation({
+          animated: true,
+          section: 0,
+          item: selectedGuilds.length
+        });
+      }
+      setState(selectedGuilds.length);
+    } else if (state !== selectedGuilds.length) {
+      setState(selectedGuilds.length);
+    }
+  }, [state, selectedGuilds.length]);
+  const _ = function _() {
+    return {
+      opacity: _timing.withTiming(selectedGuilds.length > 0 ? 1 : 0),
+      height: _timing.withTiming(selectedGuilds.length > 0 ? SELECTED_SERVER_SIZE_WITH_BORDER : 0),
+      marginTop: _timing.withTiming(selectedGuilds.length > 0 ? Module712.space.PX_24 : 0)
+    };
+  };
+  _.__closure = {
+    withTiming: _timing.withTiming,
+    selectedGuilds,
+    SELECTED_SERVER_SIZE_WITH_BORDER,
+    tokens: Module712
+  };
+  _.__workletHash = 2911488630455;
+  _.__initData = __initData;
+  return <ReanimatedRexport.View style={[r7.selectedServersRowContainer, useAnimatedStyle(_)]}>
+    <FastestList_android ref={ref} sections={[selectedGuilds.length >= 3 ? selectedGuilds.length + 1 : 3]} insetStart={Module712.space.PX_24} insetEnd={Module712.space.PX_12} renderItem={callback2} estimatedListSize="windowSize" itemSize={SELECTED_SERVER_SIZE_WITH_BORDER + Module712.space.PX_12} horizontal listId="selected-servers-list" showsHorizontalScrollIndicator={false} />
+  </ReanimatedRexport.View>;
+};
+CutoutGuildBanner = function CutoutGuildBanner(props) {
+  const guild = props.guild;
+  const r15 = styles();
+  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const r24 = stateFromStores2 ? !stateFromStores2 : guild.features.has(GuildFeatures.ANIMATED_BANNER);
+  const source = guild.banner != null ? AvatarUtils.getAnimatableSourceWithFallback(r24, (a0) => AvatarUtils.getGuildBannerSource({
+    id: guild.id,
+    banner: guild.banner
+  }, a0)) : void 0;
+  return <View style={r15.bannerImage}>
+    <ClipView cutouts={[{
+      shape: CutoutShape.RoundedRect,
+      x: 8,
+      y: 46,
+      width: 56,
+      height: 56,
+      cornerRadius: 20
+    }]}>
+      {guild.banner != null ? <FastImage style={r15.bannerImage} source={source} resizeMode="cover" /> : <View style={[r15.bannerImage, r15.emptyBanner]} />}
+    </ClipView>
+    <GuildIcon style={[r15.guildIcon, r15.guildIconBorder]} guild={guild} size={GuildIconSizes.LARGE} animate={!stateFromStores2} />
+  </View>;
+};
+FeaturedServer = function FeaturedServer(props) {
+  const { guild: guild2, selected, loading, handlePress } = props;
+  const r10 = styles();
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guild2.id) != null);
+  const callback2 = useCallback(() => {
+    handlePress(guild2);
+  }, [guild2, handlePress]);
+  const r42 = [<CutoutGuildBanner guild={guild2} />, ,];
+  const r50 = [<Text maxFontSizeMultiplier={1} style={r10.featuredServerTitle} variant="text-md/semibold" color="mobile-text-heading-primary">{guild2.name}</Text>, <Text maxFontSizeMultiplier={1} lineClamp={2} variant="text-xs/normal" color="text-default">{guild2.description}</Text>, <View style={r10.buttonContainer}>
+    <Button accessibilityHint="checkbox" accessibilityState={{
+      checked: selected
+    }} disabled={stateFromStores2} icon={selected ? <CircleCheckIcon size="sm" color={Module712.colors.CONTROL_CONNECTED_TEXT_DEFAULT} /> : void 0} text={stateFromStores2 && !loading ? intl.string(t.cEnaWx) : selected ? intl.string(t["TwueC+"]) : intl.string(t.XqMe3N)} size="sm" onPress={callback2} variant={stateFromStores2 ? "secondary" : selected ? "active" : "secondary"} grow />
+  </View>];
+  r42[1] = <View style={r10.featuredServerInnerContainer}>{r50}</View>;
+  return <PressableHighlight underlayColor={r10.pressableUnderlayColor.backgroundColor} unstable_pressDelay={50} style={r10.featuredServerContainer} onPress={callback2}>{r42}</PressableHighlight>;
+};
+SELECTED_SERVER_SIZE_WITH_BORDER = 50;
+styles = createICYMIStyles((a0) => ({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    position: "relative",
+    flex: 1,
+    marginHorizontal: a0.margin
+  },
+  scrollContentContainer: {
+    paddingTop: Module712.space.PX_8
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_8
+  },
+  title: {
+    marginTop: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_8,
+    marginHorizontal: Module712.space.PX_24
+  },
+  subtitle: {
+    marginHorizontal: Module712.space.PX_24
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  featuredServerContainer: {
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    overflow: "hidden",
+    marginHorizontal: Module712.space.PX_8,
+    marginVertical: Module712.space.PX_8
+  },
+  featuredServerInnerContainer: {
+    marginHorizontal: Module712.space.PX_12,
+    marginTop: 36
+  },
+  buttonContainer: {
+    marginBottom: Module712.space.PX_12,
+    marginTop: a0.margin
+  },
+  featuredServerTitle: {
+    marginBottom: Module712.space.PX_8
+  },
+  guildIcon: {
+    position: "absolute",
+    top: 50,
+    left: 12
+  },
+  bannerImage: {
+    height: 73,
+    width: "100%"
+  },
+  emptyBanner: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  guildsScrollContainer: {
+    flex: 1,
+    marginHorizontal: Module712.space.PX_8
+  },
+  guildsColumn: {
+    flex: 1,
+    flexDirection: "column",
+    gap: Module712.space.PX_16
+  },
+  selectedServersRowContainer: {
+    height: SELECTED_SERVER_SIZE_WITH_BORDER,
+    width: "100%",
+    marginBottom: Module712.space.PX_24
+  },
+  selectedServerIcon: {
+    flex: 1,
+    width: SELECTED_SERVER_SIZE_WITH_BORDER,
+    height: SELECTED_SERVER_SIZE_WITH_BORDER,
+    alignItems: "center",
+    justifyContent: "center",
+    borderColor: Module712.colors.BORDER_STRONG,
+    borderRadius: Module712.radii.md,
+    borderWidth: 1
+  },
+  noServerContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderStyle: "dashed"
+  },
+  noServerExtraContainer: {
+    opacity: 0.4
+  },
+  pressableUnderlayColor: {
+    backgroundColor: Module712.colors.INTERACTIVE_BACKGROUND_ACTIVE
+  },
+  guildIconBorder: {
+    borderRadius: Module712.radii.md
+  }
+}));
+__initData = {
+  code: "function ICYMIJoinGuildsScreenTsx1(){const{withTiming,selectedGuilds,SELECTED_SERVER_SIZE_WITH_BORDER,tokens}=this.__closure;return{opacity:withTiming(selectedGuilds.length>0?1:0),height:withTiming(selectedGuilds.length>0?SELECTED_SERVER_SIZE_WITH_BORDER:0),marginTop:withTiming(selectedGuilds.length>0?tokens.space.PX_24:0)};}"
+};
+export default function ICYMIJoinGuildsScreen() {
+  let stateFromStoresArray2, stateFromStores, callback;
+  const r12 = styles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const stateFromStoresArray = useStateFromStoresArray([ICYMIPopularGuildsStore], () => ICYMIPopularGuildsStore.getOnboardingGuilds());
+  stateFromStoresArray2 = useStateFromStoresArray([ICYMIPopularGuildsStore], () => ICYMIPopularGuildsStore.getOnboardingCategoryIds());
+  stateFromStores = useStateFromStores([ICYMIPopularGuildsStore], () => ICYMIPopularGuildsStore.getCurrentOnboardingGuildOffset());
+  const [state2, setState2] = useState(new Set());
+  let [selectedGuilds2, setState3] = useState([]);
+  const [state3, setState4] = useState(0);
+  callback = useCallback((a0) => {
+    ICYMIAnalytics.trackFeedOnboardingGuildToggled({
+      guildId: a0.id,
+      toggled: !state2.has(a0.id)
+    });
+    if (state2.has(a0.id)) {
+      setState2((prevState2) => {
+        prevState2.delete(a0.id);
+        return new Set(prevState2);
+      });
+      setState3((prevState3) => prevState3.filter((item) => a0.id !== item.id));
+    } else {
+      setState2((prevState2) => {
+        prevState2.add(a0.id);
+        return new Set(prevState2);
+      });
+      setState3((prevState3) => [...prevState3, a0]);
+    }
+  }, [state2]);
+  const [state4, setState5] = useState(false);
+  const callback2 = useCallback(async () => {
+    let c28005_0;
+    L16: {
+      c28005_0 = void 0;
+      setState5(true);
+      if (await ICYMIActionCreators.gravityJoinGuild(Array.from(state2), "icymi_info_modal")) {
+        await ICYMIActionCreators.fetchDehydrated({
+          isReloading: true,
+          forceRefresh: true
+        });
+        await ICYMIActionCreators.reloadICYMITab();
+        ICYMIActionCreators.getGuildChannelScores();
+        ICYMIActionCreators.getRecommendedGuilds();
+        ModalActionCreators.popWithKey(ICYMI_INFO_MODAL_KEY);
+        break L16;
+      }
+      ToastActionCreators.open({
+        key: "ICYMIInfoModal",
+        content: intl.string(t.CG4Hks)
+      });
+      ICYMIActionCreators.fetchDehydrated();
+      ICYMIActionCreators.getGuildChannelScores();
+      ICYMIActionCreators.getRecommendedGuilds();
+      ModalActionCreators.popWithKey(ICYMI_INFO_MODAL_KEY);
+      return void 0;
+    }
+  }, [state2]);
+  const callback3 = useCallback(() => {
+    if (!(state3 > stateFromStores) && !(stateFromStoresArray.length >= 150)) {
+      const r13 = stateFromStores + ICYMI_DISCOVERABLE_GUILDS_PAGE_SIZE;
+      setState4(r13);
+      ICYMIActionCreators.fetchPopularGuildsFromCategories(stateFromStoresArray2, r13);
+    }
+  }, [stateFromStoresArray2, stateFromStores, state3, stateFromStoresArray.length]);
+  const callback4 = useCallback(({ item }) => <FeaturedServer key={item.id} guild={item} loading={state4} selected={state2.has(item.id)} handlePress={callback} />, [state4, state2, callback]);
+  return <>
+    <Text variant="heading-xl/semibold" color="mobile-text-heading-primary" style={r12.title}>
+      {intl.string(t["19ldCF"])}
+    </Text>
+    <Text variant="text-sm/normal" color="text-muted" style={r12.subtitle}>
+      {intl.string(t.u0KPUS)}
+    </Text>
+    <SelectedServersRow selectedGuilds={selectedGuilds2} />
+    <View style={r12.separator} />
+    <View style={r12.guildsScrollContainer}>
+      <MasonryFlashList data={stateFromStoresArray} extraData={state2} contentContainerStyle={r12.scrollContentContainer} contentInset={{
+        bottom: 72 + bottom
+      }} numColumns={2} onEndReached={callback3} onEndReachedThreshold={0.5} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} renderItem={callback4} />
+    </View>
+    {state2.size >= 1 && <View style={[{
+      marginBottom: bottom
+    }, r12.footer]}>
+      <Button loading={state4} size="lg" text={intl.string(t.K50GHd)} onPress={callback2} />
+    </View>}
+  </>;
+};

modules/icymi/native/info_modal/ICYMITopicsScreen.tsx

@@ -0,0 +1,144 @@
+// Metro module 15346 (f15347).
+import { useState, useCallback } from "react";
+import { ScrollView, View, StyleSheet } from "react-native";
+import GuildDiscoveryCategoryStore from "../../../global_discovery_servers/GuildDiscoveryCategoryStore";
+import { GuildPrimaryCategory } from "../../../guild_settings/discovery/GuildSettingsDiscoveryConstants";
+import { GameControllerIcon } from "../../../../design/components/Icon/native/redesign/generated/GameControllerIcon";
+import { TvIcon } from "../../../../design/components/Icon/native/redesign/generated/TvIcon";
+import { ForumIcon } from "../../../../design/components/Icon/native/redesign/generated/ForumIcon";
+import { ScienceIcon } from "../../../../design/components/Icon/native/redesign/generated/ScienceIcon";
+import { MusicIcon } from "../../../../design/components/Icon/native/redesign/generated/MusicIcon";
+import { BookCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/BookCheckIcon";
+import { PaintPaletteIcon } from "../../../../design/components/Icon/native/redesign/generated/PaintPaletteIcon";
+import { PiggyBankIcon } from "../../../../design/components/Icon/native/redesign/generated/PiggyBankIcon";
+import { RobotIcon } from "../../../../design/components/Icon/native/redesign/generated/RobotIcon";
+import { MedalIcon } from "../../../../design/components/Icon/native/redesign/generated/MedalIcon";
+import { FoodIcon } from "../../../../design/components/Icon/native/redesign/generated/FoodIcon";
+import { PaintbrushThinIcon } from "../../../../design/components/Icon/native/redesign/generated/PaintbrushThinIcon";
+import { BicycleIcon } from "../../../../design/components/Icon/native/redesign/generated/BicycleIcon";
+import { PencilSparkleIcon } from "../../../../design/components/Icon/native/redesign/generated/PencilSparkleIcon";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useCheckboxA11yNative } from "../../../../_bundle/Module3907";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import { useStateFromStoresArray } from "../../../../_bundle/Module589";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import { Text } from "../../../../design/components/Text/native/Text";
+function $mk116923($env) {
+  return () => (0, setState2)(false);
+}
+let useStyles;
+const WordTopic = function WordTopic(props) {
+  const { topic, categoryid, selected, handlePress } = props;
+  const icon = GuildPrimaryCategory.GAMING === categoryid ? <GameControllerIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.ENTERTAINMENT === categoryid ? <TvIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.GENERAL_CHATTING === categoryid ? <ForumIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.SCIENCE_AND_TECH === categoryid ? <ScienceIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.MUSIC === categoryid ? <MusicIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.EDUCATION === categoryid ? <BookCheckIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.CREATIVE_ARTS === categoryid ? <PaintPaletteIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FINANCE === categoryid ? <PiggyBankIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.BOTS === categoryid ? <RobotIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.SPORTS === categoryid ? <MedalIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.TRAVEL_AND_FOOD === categoryid ? <FoodIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FASHION_AND_BEAUTY === categoryid ? <PaintbrushThinIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FITNESS_AND_HEALTH === categoryid ? <BicycleIcon size="md" color="redesign-button-tertiary-text" /> : categoryid === 16 ? <PencilSparkleIcon size="md" color="redesign-button-tertiary-text" /> : void 0;
+  const checkboxA11yNative = useCheckboxA11yNative({
+    checked: selected
+  });
+  const { accessibilityRole, accessibilityState } = checkboxA11yNative;
+  return icon != null ? <Button accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} variant={selected ? "primary" : "tertiary"} text={topic} onPress={() => handlePress(categoryid)} icon={icon} /> : null;
+};
+useStyles = createStyles({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    flex: 1
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_8
+  },
+  title: {
+    marginTop: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_8,
+    marginHorizontal: Module712.space.PX_24
+  },
+  subtitle: {
+    marginBottom: Module712.space.PX_24,
+    marginHorizontal: Module712.space.PX_24
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  topicsContainer: {
+    flex: 1,
+    marginHorizontal: Module712.space.PX_16,
+    flexWrap: "wrap",
+    flexDirection: "row",
+    gap: Module712.space.PX_12
+  },
+  scrollContentContainer: {
+    paddingTop: Module712.space.PX_24
+  }
+});
+export default function ICYMITopicsScreen() {
+  let callback;
+  const styles = useStyles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const [state, setState] = useState(new Set());
+  const [loading, setState2] = useState(false);
+  const navigation = useNavigation();
+  const callback2 = useCallback(async () => {
+    const r29 = void 0;
+    let c28002_1 = r29;
+    let c28002_0 = r29;
+    setState2(true);
+    await import("../../ICYMIPopularGuildsStore");
+    if (await ICYMIActionCreators.fetchPopularGuildsFromCategories(Array.from(state), 0)) {
+      navigation.push("join_guilds");
+    } else {
+      ToastActionCreators.open({
+        key: "ICYMIInfoModal",
+        content: intl.string(t.CG4Hks)
+      });
+    }
+    setTimeout($mk116923(c28002_0), 500);
+  }, [navigation, state]);
+  const stateFromStoresArray = useStateFromStoresArray([GuildDiscoveryCategoryStore], () => GuildDiscoveryCategoryStore.getAllCategories());
+  callback = useCallback((a0) => {
+    ICYMIAnalytics.trackFeedOnboardingCategoryToggled({
+      categoryId: a0,
+      toggled: !state.has(a0)
+    });
+    if (state.has(a0)) {
+      setState((prevState) => {
+        prevState.delete(a0);
+        return new Set(prevState);
+      });
+    } else {
+      setState((prevState) => {
+        prevState.add(a0);
+        return new Set(prevState);
+      });
+    }
+  }, [state]);
+  return <>
+    <Text variant="heading-xl/semibold" color="mobile-text-heading-primary" style={styles.title}>
+      {intl.string(t.Y5d99L)}
+    </Text>
+    <Text variant="text-sm/normal" color="text-muted" style={styles.subtitle}>
+      {intl.string(t.MGZsfv)}
+    </Text>
+    <View style={styles.separator} />
+    <ScrollView showsVerticalScrollIndicator={false} style={styles.container} contentContainerStyle={styles.scrollContentContainer} contentInset={{
+      bottom: 72 + bottom
+    }}>
+      <View style={styles.topicsContainer}>
+        {stateFromStoresArray.map((item) => <WordTopic key={item.categoryId} selected={state.has(item.categoryId)} topic={item.name} categoryid={item.categoryId} handlePress={callback} />)}
+      </View>
+    </ScrollView>
+    {state.size > 0 && <View style={[{
+      marginBottom: bottom
+    }, styles.footer]}>
+      <Button loading={loading} size="lg" text={intl.string(t.PDTjLN)} onPress={callback2} />
+    </View>}
+  </>;
+};

modules/icymi/native/media/ICYMIMediaMosaic.tsx

@@ -0,0 +1,491 @@
+// Metro module 15367 (f15368).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useState, useMemo, useRef, useCallback, useContext } from "react";
+import { Pressable, View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import ChannelStore from "../../../../stores/ChannelStore";
+import RelationshipStore from "../../../../stores/RelationshipStore";
+import UserStore from "../../../../stores/UserStore";
+import ICYMIStore from "../../ICYMIStore";
+import { AnalyticsObjectTypes, AnalyticsObjects, AnalyticsPages } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { urlMatchesFileExtension } from "../../../messages/MediaFormatTesters";
+import { GIF_RE_IOS } from "../../../../ConstantsIOS";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import Video from "../../../../components_native/common/Video";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../../design/animation/reanimated/timing/timing";
+import { createThumbhashImageFromPlaceholder } from "../../../thumbhash/ThumbhashUtils";
+import FastImage from "../../../../components_native/common/FastImage";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { PlayIcon } from "../../../../design/components/Icon/native/redesign/generated/PlayIcon";
+import { isVideo } from "../../../../utils/native/UploadUtils";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import { VoiceXIcon } from "../../../../design/components/Icon/native/redesign/generated/VoiceXIcon";
+import { VoiceNormalIcon } from "../../../../design/components/Icon/native/redesign/generated/VoiceNormalIcon";
+import { ICYMIContext } from "../ICYMIContext";
+import { extractMediaSourcesFromMessage, flattenSource } from "../../../media_viewer/native/MediaSourceUtil";
+import { GRAVITY_VALID_EMBED_TYPES } from "../../ICYMITypes";
+import { isNotNullish } from "../../../../utils/GlobalUtils";
+import { partition } from "../../../../_bundle/Module12";
+import { ack } from "../../../../actions/ReadStateActionCreators";
+import { openMediaModal } from "../../../media_viewer/native/components/openMediaModal";
+import { computeChannelName } from "../../../channel/useChannelName";
+let useStyles, __initData, MediaMosaicImage, Media, OneImageRow, ThreeImagesRow, TwoImagesRow, ThreeImages, FourImages, SingleImage, GravityAttachmentMediaMosaic;
+const MediaMosaicVideo = function MediaMosaicVideo(props) {
+  const { source: source3, height, width: width2, autoplay, style } = props;
+  const styles = useStyles();
+  let muted = useStateFromStores([ICYMIStore], () => ICYMIStore.videosMuted());
+  let videoURI = source3.videoURI;
+  if (videoURI == null) {
+    videoURI = source3.sourceURI;
+  }
+  if (videoURI == null) {
+    videoURI = source3.uri;
+  }
+  const props2 = {
+    src: {
+      videoURI
+    },
+    height,
+    width: width2,
+    postponeRender: false,
+    paused: !autoplay,
+    muted,
+    resizeMode: "cover",
+    style: [styles.media, style],
+    videoStyle: styles.video,
+    disableFocus: null
+  };
+  if (!muted) {
+    muted = source3.isGIFV;
+  }
+  props2.disableFocus = muted;
+  return <Video {...props2} />;
+};
+MediaMosaicImage = function MediaMosaicImage(props) {
+  const { source, dimensions: dimensions2, style, isSpoiler } = props;
+  const styles = useStyles();
+  const [state, setState] = useState(false);
+  const c = function c() {
+    return {
+      opacity: _timing.withTiming(state ? 0 : 1, {
+        duration: 150
+      })
+    };
+  };
+  c.__closure = {
+    withTiming: _timing.withTiming,
+    imageFinishedLoading: state
+  };
+  c.__workletHash = 7803531897566;
+  c.__initData = __initData;
+  return <>
+    {[<ReanimatedRexport.View style={[useAnimatedStyle(c), styles.thumbhashMedia]}>
+      <FastImage source={useMemo(() => {
+        if (source.placeholder != null) {
+          return {
+            uri: createThumbhashImageFromPlaceholder(source.placeholder),
+            width: source.width,
+            height: source.height
+          };
+        }
+      }, [source.height, source.placeholder, source.width])} style={[style, styles.media, dimensions2]} />
+    </ReanimatedRexport.View>, <ReanimatedRexport.Image key={source.uri} source={source} style={[styles.media, style, dimensions2]} onLoadEnd={() => setState(true)} blurRadius={isSpoiler ? 100 : 0} />]}
+  </>;
+};
+Media = function Media(props) {
+  let stateFromStores;
+  const { source: source3, dimensions: dimensions2, initialIndex, handlePressMedia, style, visible: visible2 } = props;
+  stateFromStores = void 0;
+  const styles = useStyles();
+  const ref = useRef(null);
+  let spoiler = source3.spoiler;
+  if (spoiler == null) {
+    spoiler = false;
+  }
+  const [state2, setState2] = useState(spoiler);
+  const callback2 = useCallback(() => {
+    if (state2) {
+      setState2(false);
+    } else {
+      handlePressMedia({
+        ref,
+        initialIndex
+      });
+    }
+  }, [handlePressMedia, initialIndex, state2]);
+  stateFromStores = useStateFromStores([ICYMIStore], () => ICYMIStore.videosMuted());
+  const stateFromStores3 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const r72 = [state2 ? <View style={styles.centerContainer}>
+    <View style={styles.spoilerText}>
+      <Text maxFontSizeMultiplier={1} variant="heading-md/semibold" color="mobile-text-heading-primary">
+        {intl.string(t["F+x38C"]).toUpperCase()}
+      </Text>
+    </View>
+  </View> : state2, source3.videoURI != null && !state2 && !(source3.isGIFV || urlMatchesFileExtension(source3.sourceURI, GIF_RE_IOS)) && stateFromStores3 && <View style={styles.centerContainer}>
+    <View style={styles.videoIcon}>
+      <PlayIcon color={Module712.colors.REDESIGN_BUTTON_TERTIARY_TEXT} size="lg" />
+    </View>
+  </View>, isVideo(source3.uri) ? source3.isGIFV || urlMatchesFileExtension(source3.sourceURI, GIF_RE_IOS) ? null : <View style={styles.absoluteContainer}>
+    <PressableOpacity style={[styles.muteIcon, stateFromStores ? styles.iconBg : styles.iconBgSelected]} onPress={() => ICYMIActionCreators.setVideosMuted(!stateFromStores)} activeOpacity={0.8}>
+      {stateFromStores ? <VoiceXIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} size="sm" /> : <VoiceNormalIcon color={Module712.colors.BLACK} size="sm" />}
+    </PressableOpacity>
+  </View> : null, !(!isVideo(source3.uri) && !(source3.isGIFV || urlMatchesFileExtension(source3.sourceURI, GIF_RE_IOS))) && source3.videoURI != null ? <MediaMosaicVideo source={source3} height={dimensions2.height} width={dimensions2.width} style={style} autoplay={!!visible2} /> : <MediaMosaicImage source={source3} style={style} dimensions={dimensions2} isSpoiler={state2} />];
+  return <Pressable ref={ref} onPress={callback2} style={dimensions2}>{r72}</Pressable>;
+};
+OneImageRow = function OneImageRow(props) {
+  const { source: source3, handlePressMedia: handlePressMedia5 } = props;
+  let widthOverride3 = props.widthOverride;
+  const styles = useStyles();
+  const context = useContext(ICYMIContext);
+  if (widthOverride3 == null) {
+    widthOverride3 = context?.width - context.inset - 2 * context.margin;
+  }
+  return <View style={[styles.imageRow, styles.topRow]}>
+    <Media handlePressMedia={handlePressMedia5} initialIndex={0} source={source3} dimensions={{
+      width: widthOverride3,
+      height: widthOverride3 / 1.5
+    }} />
+  </View>;
+};
+ThreeImagesRow = function ThreeImagesRow(props) {
+  const sources2 = props.sources;
+  let start = props.start;
+  let end = props.end;
+  const { offset, handlePressMedia: handlePressMedia2 } = props;
+  let widthOverride3 = props.widthOverride;
+  const styles = useStyles();
+  const context = useContext(ICYMIContext);
+  if (widthOverride3 == null) {
+    widthOverride3 = context?.width - context.inset - 2 * context.margin;
+  }
+  let c21917_2 = widthOverride3;
+  const style = [styles.imageRow, , ,];
+  if (start) {
+    start = styles.topRow;
+  }
+  style[1] = start;
+  if (end) {
+    end = styles.bottomRow;
+  }
+  style[2] = end;
+  return <View style={style}>
+    {sources2.map((item, index) => <Media key={offset + index} handlePressMedia={handlePressMedia2} initialIndex={offset + index} source={item} dimensions={{
+      width: (c21917_2 - 8) / 3,
+      height: (c21917_2 - 8) / 3
+    }} />)}
+  </View>;
+};
+TwoImagesRow = function TwoImagesRow(props) {
+  const { sources: sources2, handlePressMedia: handlePressMedia3 } = props;
+  let end = props.end;
+  let widthOverride3 = props.widthOverride;
+  const styles = useStyles();
+  const context = useContext(ICYMIContext);
+  if (widthOverride3 == null) {
+    widthOverride3 = context?.width - context.inset - 2 * context.margin;
+  }
+  const dimensions = {
+    width: (widthOverride3 - 4) / 2,
+    height: (widthOverride3 - 4) / 2 / 0.75
+  };
+  const style = [styles.imageRow, styles.topRow, ,];
+  if (end) {
+    end = styles.bottomRow;
+  }
+  style[2] = end;
+  return <View style={style}>
+    {sources2.map((item, index) => <Media key={index} handlePressMedia={handlePressMedia3} initialIndex={index} source={item} dimensions={dimensions} />)}
+  </View>;
+};
+ThreeImages = function ThreeImages(props) {
+  const { sources: sources2, handlePressMedia: handlePressMedia5 } = props;
+  let widthOverride3 = props.widthOverride;
+  const styles = useStyles();
+  const context = useContext(ICYMIContext);
+  if (widthOverride3 == null) {
+    widthOverride3 = context?.width - context.inset - 2 * context.margin;
+  }
+  return <View style={[styles.imagesContainer, styles.imageRow]}>
+    <View style={styles.leftColumn}>
+      <Media handlePressMedia={handlePressMedia5} initialIndex={0} source={sources2[0]} dimensions={{
+        width: 2 * widthOverride3 / 3 - 4,
+        height: 2 * widthOverride3 / 3
+      }} />
+    </View>
+    <View style={styles.rightColumn}>
+      <Media handlePressMedia={handlePressMedia5} initialIndex={1} source={sources2[1]} dimensions={{
+        width: widthOverride3 / 3,
+        height: widthOverride3 / 3
+      }} />
+      <Media handlePressMedia={handlePressMedia5} initialIndex={2} source={sources2[2]} dimensions={{
+        width: widthOverride3 / 3,
+        height: widthOverride3 / 3
+      }} />
+    </View>
+  </View>;
+};
+FourImages = function FourImages(props) {
+  const { sources: sources2, handlePressMedia: handlePressMedia5 } = props;
+  let widthOverride3 = props.widthOverride;
+  const styles = useStyles();
+  const context = useContext(ICYMIContext);
+  if (widthOverride3 == null) {
+    widthOverride3 = context?.width - context.inset - 2 * context.margin;
+  }
+  const dimensions2 = {
+    width: widthOverride3 / 2 - 4,
+    height: (widthOverride3 / 2 - 4) / 1.5
+  };
+  return <View style={styles.imagesContainer}>
+    <View style={[styles.imageRow, styles.topRow]}>
+      <Media handlePressMedia={handlePressMedia5} initialIndex={0} source={sources2[0]} dimensions={dimensions2} />
+      <Media handlePressMedia={handlePressMedia5} initialIndex={1} source={sources2[1]} dimensions={dimensions2} />
+    </View>
+    <View style={[styles.imageRow, styles.bottomRow]}>
+      <Media handlePressMedia={handlePressMedia5} initialIndex={2} source={sources2[2]} dimensions={dimensions2} />
+      <Media handlePressMedia={handlePressMedia5} initialIndex={3} source={sources2[3]} dimensions={dimensions2} />
+    </View>
+  </View>;
+};
+SingleImage = function SingleImage(props) {
+  const { source: source2, initialIndex: initialIndex2, handlePressMedia: handlePressMedia5, visible: visible2 } = props;
+  let widthOverride3 = props.widthOverride;
+  const styles = useStyles();
+  const context = useContext(ICYMIContext);
+  if (widthOverride3 == null) {
+    widthOverride3 = context?.width - context.inset - 2 * context.margin;
+  }
+  const width = widthOverride3;
+  return <View style={styles.imagesContainer}>
+    <Media handlePressMedia={handlePressMedia5} initialIndex={initialIndex2} source={source2} dimensions={useMemo(() => {
+      const r8 = source2.width / source2.height;
+      if (r8 >= 1) {
+        const width3 = Math.min(source2.width, width);
+        return {
+          height: width3 / r8,
+          width: width3
+        };
+      }
+      const height = Math.min(source2.height, 330);
+      const width2 = height * r8;
+      return width2 > width ? {
+        width,
+        height: width / r8
+      } : {
+        width: width2,
+        height
+      };
+    }, [source2.width, source2.height, width])} style={styles.singleImage} visible={visible2} />
+  </View>;
+};
+GravityAttachmentMediaMosaic = function GravityAttachmentMediaMosaic(props) {
+  const { sources, handlePressMedia: handlePressMedia4, visible: visible2, widthOverride } = props;
+  const length = sources.length;
+  const styles = useStyles();
+  const memo = useMemo(() => {
+    const r3 = length % 3;
+    let r0 = r3 !== 0 ? r3 : 3;
+    const r4 = [];
+    r4.push(sources.slice(0, r0));
+    while (r0 < length) {
+      const r15 = r0 + 3;
+      r4.push(sources.slice(r0, r15));
+      r0 = r15;
+    }
+    return r4;
+  }, [length, sources]);
+  return length !== 0 ? length === 1 ? <SingleImage widthOverride={widthOverride} initialIndex={0} handlePressMedia={handlePressMedia4} source={sources[0]} visible={visible2} /> : length === 3 ? <ThreeImages widthOverride={widthOverride} handlePressMedia={handlePressMedia4} sources={sources} /> : length === 4 ? <FourImages widthOverride={widthOverride} handlePressMedia={handlePressMedia4} sources={sources} /> : <View style={styles.imagesContainer}>
+    {memo.map((item, index) => {
+      if (item.length === 1) {
+        return <OneImageRow key={index} handlePressMedia={handlePressMedia4} source={item[0]} />;
+      }
+      if (item.length === 2) {
+        return <TwoImagesRow key={index} widthOverride={widthOverride} sources={item} handlePressMedia={handlePressMedia4} end={index === memo.length - 1} />;
+      }
+      let offset2 = 0;
+      const start = index === 0;
+      if (!start) {
+        offset2 = memo[0].length + 3 * (index - 1);
+      }
+      return <ThreeImagesRow key={index} widthOverride={widthOverride} handlePressMedia={handlePressMedia4} offset={offset2} sources={item} start={start} end={index === memo.length - 1} />;
+    })}
+  </View> : null;
+};
+useStyles = createStyles(() => ({
+  media: {
+    borderRadius: Module712.radii.xs
+  },
+  video: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  },
+  thumbhashMedia: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 1
+  },
+  container: {
+    gap: 4
+  },
+  imagesContainer: {
+    justifyContent: "center",
+    gap: 4,
+    width: "100%"
+  },
+  imageRow: {
+    flexDirection: "row",
+    gap: 4
+  },
+  topRow: {
+    overflow: "hidden",
+    borderTopEndRadius: Module712.radii.lg,
+    borderTopStartRadius: Module712.radii.lg
+  },
+  bottomRow: {
+    overflow: "hidden",
+    borderBottomEndRadius: Module712.radii.lg,
+    borderBottomStartRadius: Module712.radii.lg
+  },
+  videoIcon: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    borderRadius: Module712.radii.round,
+    padding: 16
+  },
+  muteIcon: {
+    position: "absolute",
+    borderRadius: Module712.radii.round,
+    padding: Module712.space.PX_4,
+    bottom: 8,
+    right: 8
+  },
+  spoilerText: {
+    backgroundColor: Module712.colors.SPOILER_HIDDEN_BACKGROUND,
+    borderRadius: Module712.radii.lg,
+    paddingHorizontal: Module712.space.PX_12,
+    paddingVertical: 6
+  },
+  leftColumn: {
+    overflow: "hidden",
+    borderTopStartRadius: Module712.radii.lg,
+    borderBottomStartRadius: Module712.radii.lg
+  },
+  rightColumn: {
+    overflow: "hidden",
+    borderTopEndRadius: Module712.radii.lg,
+    borderBottomEndRadius: Module712.radii.lg,
+    gap: 4
+  },
+  singleImage: {
+    overflow: "hidden",
+    borderRadius: Module712.radii.lg
+  },
+  centerContainer: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
+  },
+  absoluteContainer: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    zIndex: 2
+  },
+  iconBg: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  },
+  iconBgSelected: {
+    backgroundColor: Module712.colors.WHITE
+  }
+}));
+__initData = {
+  code: "function ICYMIMediaMosaicTsx1(){const{withTiming,imageFinishedLoading}=this.__closure;return{opacity:withTiming(imageFinishedLoading?0:1,{duration:150})};}"
+};
+export default function ICYMIMediaMosaic(props) {
+  let r45;
+  let setState3, visible, allMediaSources, nonEmbedSources, callback;
+  const { message, widthOverride: widthOverride2, visible: visible2, itemType } = props;
+  setState3 = void 0;
+  visible = void 0;
+  allMediaSources = void 0;
+  nonEmbedSources = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(message.getChannelId()));
+  let state;
+  [state, setState3] = useState(false);
+  const r13 = state ? !state : visible2;
+  L7: {
+    visible = r13;
+    const memo2 = useMemo(() => {
+      const allMediaSources2 = extractMediaSourcesFromMessage(message, message, void 0, GRAVITY_VALID_EMBED_TYPES).map((item) => flattenSource(item)).filter(isNotNullish);
+      const r32 = _slicedToArray(partition(allMediaSources2, (a0) => a0.accessoryType === "embed"), 2);
+      return {
+        allMediaSources: allMediaSources2,
+        nonEmbedSources: r32[1],
+        embedSources: r32[0]
+      };
+    }, [message]);
+    allMediaSources = memo2.allMediaSources;
+    nonEmbedSources = memo2.nonEmbedSources;
+    const embedSources = memo2.embedSources;
+    callback = useCallback(({ ref: ref2, initialIndex: initialIndex2 }) => {
+      ICYMIActionCreators.itemInteracted(message.id, "message", "press_media");
+      ICYMIActionCreators.feedItemActioned({
+        itemId: message.id,
+        itemType,
+        actionParameters: {
+          actionGestureType: "press",
+          actionTargetElement: "media_mosaic",
+          actionIntentType: "open",
+          actionDestinationType: null
+        }
+      });
+      ack(message.channel_id, {
+        page: AnalyticsPages.ICYMI,
+        object: AnalyticsObjects.ACK_MEDIA_VIEWED,
+        objectType: AnalyticsObjectTypes.ACK_SEMI_AUTOMATIC
+      }, true, true, message.id);
+      const initialSources = [];
+      let c28009_0 = initialSources;
+      allMediaSources.forEach((allMediaSource) => {
+        c28009_0.push({
+          ...allMediaSource,
+          embedURI: void 0
+        });
+      });
+      setState3(true);
+      openMediaModal({
+        disableDownload: false,
+        initialSources,
+        initialIndex: initialIndex2,
+        analyticsSource: "Channel",
+        channelId: message.channel_id,
+        contextName: stateFromStores2 != null ? computeChannelName(stateFromStores2, UserStore, RelationshipStore) : "",
+        contextIcon: void 0,
+        originViewOrOriginLayout: ref2.current,
+        onClose: () => setState3(false)
+      });
+    }, [message.channel_id, message.id, allMediaSources, stateFromStores2, itemType]);
+    if (nonEmbedSources.length === 0) {
+      const length2 = embedSources.length;
+      r45 = null;
+      if (length2 === 0) {
+        break L7;
+      }
+    }
+    r45 = <View key={`message-image-${message.id}`} style={styles.container}>
+      <GravityAttachmentMediaMosaic widthOverride={widthOverride2} sources={nonEmbedSources} handlePressMedia={callback} visible={visible} />
+      {embedSources == null ? void 0 : embedSources.map((embedSource, index) => <SingleImage key={`gif-${index}`} widthOverride={widthOverride2} handlePressMedia={callback} initialIndex={index + nonEmbedSources.length} source={embedSource} visible={visible} />)}
+    </View>;
+  }
+  return r45;
+};
+export { GravityAttachmentMediaMosaic };

modules/icymi/native/navigator/ICYMINavigator.tsx

@@ -0,0 +1,17 @@
+// Metro module 15319 (f15320).
+import { createNativeStackNavigator } from "../../../../_bundle/Module9109";
+import { useAccessibilityNativeStackOptions } from "../../../../design/components/Navigator/native/Navigator.native";
+import { ICYMITab } from "../ICYMI";
+import { ThemedNotificationsModal } from "../../../main_tabs_v2/native/tabs/notifications/Notifications";
+const nativeStackNavigator = createNativeStackNavigator();
+export default function ICYMINavigator() {
+  const accessibilityNativeStackOptions = useAccessibilityNativeStackOptions();
+  return <nativeStackNavigator.Navigator screenOptions={() => ({
+    headerShown: false,
+    fullScreenGestureEnabled: true,
+    ...accessibilityNativeStackOptions
+  })} initialRouteName="icymi-screen">
+    <nativeStackNavigator.Screen name="icymi-screen" getComponent={() => ICYMITab} />
+    <nativeStackNavigator.Screen name="notifications-screen" getComponent={() => ThemedNotificationsModal} />
+  </nativeStackNavigator.Navigator>;
+};

modules/icymi/native/util/getIconForChannel.tsx

@@ -0,0 +1,29 @@
+// Metro module 15364 (f15365).
+import { ChannelTypes } from "../../../../Constants";
+import { AnnouncementsIcon } from "../../../../design/components/Icon/native/redesign/generated/AnnouncementsIcon";
+import { VoiceNormalIcon } from "../../../../design/components/Icon/native/redesign/generated/VoiceNormalIcon";
+import { StageIcon } from "../../../../design/components/Icon/native/redesign/generated/StageIcon";
+import { TextIcon } from "../../../../design/components/Icon/native/redesign/generated/TextIcon";
+import { ForumIcon } from "../../../../design/components/Icon/native/redesign/generated/ForumIcon";
+import { ImageIcon } from "../../../../design/components/Icon/native/redesign/generated/ImageIcon";
+export function getIconForChannel({ type }) {
+  if (ChannelTypes.GUILD_ANNOUNCEMENT === type) {
+    return AnnouncementsIcon;
+  }
+  if (ChannelTypes.GUILD_VOICE === type) {
+    return VoiceNormalIcon;
+  }
+  if (ChannelTypes.GUILD_STAGE_VOICE === type) {
+    return StageIcon;
+  }
+  if (ChannelTypes.GUILD_TEXT === type) {
+    return TextIcon;
+  }
+  if (ChannelTypes.GUILD_FORUM === type) {
+    return ForumIcon;
+  }
+  if (ChannelTypes.GUILD_MEDIA === type) {
+    return ImageIcon;
+  }
+  return TextIcon;
+}

modules/icymi/native/util/openDetailsActionSheet.tsx

@@ -0,0 +1,21 @@
+// Metro module 15362 (f15363).
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+export function openDetailsActionSheet({ guildId, channelId, id, type }) {
+  ICYMIActionCreators.itemInteracted(id, type, "overflow_menu");
+  ICYMIActionCreators.feedItemActioned({
+    itemId: id,
+    itemType: type,
+    actionParameters: {
+      actionGestureType: "press",
+      actionTargetElement: "overflow_menu_button",
+      actionIntentType: "open",
+      actionDestinationType: null
+    }
+  });
+  ActionSheetActionCreators.openLazy(import("../ItemDetailsActionSheet"), "ItemDetailsActionSheet", {
+    guildId,
+    channelId,
+    id
+  });
+}