yeet

modules/conversations/components/native/ConversationCoachmark.tsx

@@ -0,0 +1,57 @@
+// Metro module 10124 (f10125).
+import { useRef, useMemo, useCallback } from "react";
+import { View } from "react-native";
+import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { useSelectedDismissibleContent } from "../../../dismissible_content/hooks/useSelectedDismissibleContent";
+import { useCoachmark } from "../../../../design/components/Coachmark/native/useCoachmark.native";
+let TOPICAL_NAVIGATION_HEADER_COACHMARK, c6741_8, useStyles;
+const NewBadge = function NewBadge() {
+  return <View style={useStyles().badge}>
+    <Text variant="text-sm/bold" color="text-default">
+      {intl.string(t.c2GSIl)}
+    </Text>
+  </View>;
+};
+TOPICAL_NAVIGATION_HEADER_COACHMARK = DismissibleContent.TOPICAL_NAVIGATION_HEADER_COACHMARK;
+c6741_8 = [TOPICAL_NAVIGATION_HEADER_COACHMARK];
+useStyles = createStyles({
+  badge: {
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    paddingVertical: 2,
+    paddingHorizontal: Module712.space.PX_8,
+    borderRadius: Module712.radii.round
+  },
+  coachmarkWrapper: {
+    marginRight: Module712.space.PX_12
+  }
+});
+export function ConversationCoachmark(props) {
+  const { children, isLast } = props;
+  const styles = useStyles();
+  const ref = useRef(null);
+  const [r23, r24] = useSelectedDismissibleContent(c6741_8);
+  let c17714_0 = r23;
+  let c17714_1 = r24;
+  useCoachmark(ref, useMemo(() => ({
+    title: intl.string(t.UcQjDe),
+    description: intl.string(t.QeJIbA),
+    position: "bottom",
+    visible: c17714_0 === TOPICAL_NAVIGATION_HEADER_COACHMARK,
+    onDismiss: () => {
+      c17714_1(ContentDismissActionType.USER_DISMISS);
+    },
+    renderImgComponent: () => <NewBadge />
+  }), [r24, r23]));
+  return <View style={isLast ? void 0 : styles.coachmarkWrapper}>
+    <View ref={ref}>
+      {children(useCallback(() => {
+        c17714_1(ContentDismissActionType.USER_DISMISS);
+      }, [r24]))}
+    </View>
+  </View>;
+}

modules/conversations/components/native/ConversationFocusScreen.tsx

@@ -0,0 +1,83 @@
+// Metro module 9305 (f9306).
+import { useCallback, useMemo } from "react";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import ConversationsStore from "../../ConversationsStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useRoute } from "../../../../_bundle/Module1483";
+import { useStateFromStores, useStateFromStoresObject } from "../../../../_bundle/Module589";
+import { ConversationsAnalytics } from "../../ConversationsAnalytics";
+import { closeConversationsAndJumpToMessage } from "./ConversationNavigatorUtils";
+import { intl, t } from "../../../../intl/index.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { ChatPreview } from "../../../../components_native/common/ChatPreview";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  pendingContent: {
+    flex: 1,
+    paddingVertical: Module712.space.PX_24,
+    alignItems: "center",
+    gap: Module712.space.PX_32,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  }
+});
+export default function ConversationFocusScreen() {
+  let startMessageId, callback;
+  const styles = useStyles();
+  const params = useRoute().params;
+  const { channelId, conversationId } = params;
+  const stateFromStores = useStateFromStores([ConversationsStore], () => ConversationsStore.getHydratedMessages(channelId, conversationId), [channelId, conversationId]);
+  const stateFromStoresObject = useStateFromStoresObject([ConversationsStore], () => {
+    const conversationMetadata = ConversationsStore.getConversationMetadata(channelId, conversationId);
+    let fullyHydrated = conversationMetadata?.fullyHydrated;
+    if (fullyHydrated == null) {
+      fullyHydrated = false;
+    }
+    const r10 = {
+      fullyHydrated,
+      isFullFetchPending: ConversationsStore.isConversationFetchPending(conversationId, true),
+      startMessageId: null
+    };
+    let startMessageId2 = conversationMetadata == null ? void 0 : conversationMetadata.conversation.startMessageId;
+    if (startMessageId2 == null) {
+      startMessageId2 = null;
+    }
+    r10.startMessageId = startMessageId2;
+    return r10;
+  }, [channelId, conversationId]);
+  const { fullyHydrated, isFullFetchPending } = stateFromStoresObject;
+  startMessageId = stateFromStoresObject.startMessageId;
+  callback = useCallback((a0) => {
+    if (a0 === "footer_cta") {
+      ConversationsAnalytics.trackFocusModeDismissed({
+        channelId,
+        conversationId,
+        dismissReason: "jump_to_conversation"
+      });
+    }
+  }, [channelId, conversationId]);
+  const callback2 = useCallback(() => {
+    if (startMessageId != null) {
+      closeConversationsAndJumpToMessage(channelId, startMessageId);
+    }
+  }, [channelId, startMessageId]);
+  const memo = useMemo(() => ({
+    jumpToChatText: intl.string(t["bz/ik0"]),
+    jumpTargetId: startMessageId,
+    onBeforeJumpToMessage: callback
+  }), [startMessageId, callback]);
+  return !fullyHydrated && isFullFetchPending ? <View style={styles.pendingContent}>
+    <ActivityIndicator />
+  </View> : fullyHydrated ? <ScrollView horizontal scrollEnabled={false} bounces={false} contentContainerStyle={styles.container}>
+    <ChatPreview channelId={channelId} messages={stateFromStores} jumpToChatProps={memo} initialScrollToTop allowReactions />
+  </ScrollView> : <View style={styles.pendingContent}>
+    <Text variant="text-md/normal" color="text-muted">
+      {intl.string(t.eylmYW)}
+    </Text>
+    {startMessageId != null && <Button variant="tertiary" text={intl.string(t.aBNTxl)} onPress={callback2} />}
+  </View>;
+};

modules/conversations/components/native/ConversationListItem.tsx

@@ -0,0 +1,113 @@
+// Metro module 9287 (f9288).
+import * as Module19 from "react";
+import { useMemo, useCallback } from "react";
+import { View } from "react-native";
+import ConversationsStore from "../../ConversationsStore";
+import { MOBILE_PREVIEW_MESSAGE_COUNT } from "../../ConversationConstants";
+import { VerticalGradient } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import Module689 from "../../../../_bundle/Module689";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { fetchConversationMessages } from "../../ConversationsActionCreators";
+import { ConversationNavigatorScreens } from "./ConversationNavigatorUtils";
+import { ConversationsAnalytics } from "../../ConversationsAnalytics";
+import { Card } from "../../../../design/components/Card/native/Card.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import ConversationPreviewSkeleton from "./ConversationPreviewSkeleton";
+import ConversationPreviewMessage from "./ConversationPreviewMessage";
+import Module4611 from "../../../../_bundle/Module4611";
+let locations, useStyles;
+const ConversationListItemBase = function ConversationListItemBase(props) {
+  let stateFromStores;
+  const conversation = props.conversation;
+  stateFromStores = void 0;
+  const styles = useStyles();
+  const navigation = useNavigation();
+  const token = useToken(Module712.colors.BACKGROUND_SURFACE_HIGH);
+  const memo = useMemo(() => [Module689(token).alpha(0).hex(), token], [token]);
+  stateFromStores = useStateFromStores([ConversationsStore], () => ConversationsStore.getHydratedMessages(conversation.channelId, conversation.id), [conversation.channelId, conversation.id]);
+  const memo2 = useMemo(() => {
+    let r7 = stateFromStores == null ? void 0 : stateFromStores.slice(0, MOBILE_PREVIEW_MESSAGE_COUNT);
+    if (r7 == null) {
+      r7 = null;
+    }
+    return r7;
+  }, [stateFromStores]);
+  return <Card style={styles.card} onPress={useCallback(() => {
+    fetchConversationMessages(conversation.channelId, conversation.guildId, conversation.id, {
+      includeReactions: true,
+      includeMessageReferences: true
+    });
+    navigation.navigate(ConversationNavigatorScreens.FOCUS, {
+      channelId: conversation.channelId,
+      guildId: conversation.guildId,
+      conversationId: conversation.id,
+      title: conversation.title
+    });
+    ConversationsAnalytics.trackTopicsUnitClicked({
+      channelId: conversation.channelId,
+      conversationId: conversation.id,
+      isFocusMode: false
+    });
+  }, [navigation, conversation.channelId, conversation.guildId, conversation.id, conversation.title])} accessibilityLabel={conversation.title}>
+    <View style={styles.headerContainer}>
+      <Text variant="text-md/semibold" color="text-default" lineClamp={1} style={styles.title}>{conversation.title}</Text>
+      <Text variant="text-sm/medium" color="text-muted" lineClamp={1} style={styles.timestamp}>
+        {intl.formatToPlainString(t.poZZGL, {
+          count: conversation.messageCount
+        })}
+      </Text>
+    </View>
+    <View style={styles.previews}>
+      {memo2 == null ? <ConversationPreviewSkeleton /> : memo2.map((item) => <ConversationPreviewMessage key={item.id} message={item} guildId={conversation.guildId} channelId={conversation.channelId} />)}
+    </View>
+    <Module4611 style={styles.bottomFade} start={VerticalGradient.START} end={VerticalGradient.END} colors={memo} locations={locations} />
+  </Card>;
+};
+locations = [0, 0.8];
+useStyles = createStyles({
+  card: {
+    marginBottom: Module712.space.PX_12,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_MUTED,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    height: 232,
+    overflow: "hidden"
+  },
+  title: {
+    flexShrink: 1,
+    minWidth: 0
+  },
+  timestamp: {
+    flexShrink: 0
+  },
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: Module712.space.PX_8,
+    paddingBottom: Module712.space.PX_8
+  },
+  previews: {
+    marginTop: Module712.space.PX_8,
+    gap: Module712.space.PX_16
+  },
+  bottomFade: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: -Module712.space.PX_4,
+    height: Module712.space.PX_64,
+    zIndex: 1
+  }
+});
+const r82 = Module19.memo(function ConversationListItem(props) {
+  const { channelId, conversationId } = props;
+  const stateFromStores2 = useStateFromStores([ConversationsStore], () => ConversationsStore.getConversationMetadata(channelId, conversationId)?.conversation, [channelId, conversationId]);
+  return stateFromStores2 != null ? <ConversationListItemBase conversation={stateFromStores2} /> : null;
+});
+export default r82;

modules/conversations/components/native/ConversationListScreen.tsx

@@ -0,0 +1,217 @@
+// Metro module 9286 (f9287).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import * as Module19 from "react";
+import { useState, useMemo, useCallback, useRef } from "react";
+import { View, ActivityIndicator } from "react-native";
+import ConversationsStore from "../../ConversationsStore";
+import { MOBILE_FETCH_LIMIT, MOBILE_PREVIEW_MESSAGE_COUNT, MAX_CONVERSATIONS_PER_CHANNEL } from "../../ConversationConstants";
+import { jsx } from "react/jsx-runtime";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import ConversationListItem from "./ConversationListItem";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { useRoute } from "../../../../_bundle/Module1483";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useConversationBackoffRef } from "../../useConversationBackoffRef";
+import { useStateFromStoresArray, useStateFromStores } from "../../../../_bundle/Module589";
+import SnowflakeUtils from "../../../../utils/SnowflakeUtils";
+import { fetchChannelConversations } from "../../ConversationsActionCreators";
+import { ConversationsAnalytics } from "../../ConversationsAnalytics";
+import { FlashList } from "../../../../_bundle/noop_6676";
+let keyExtractor, c6111_13, useStyles, useStyles2, c6111_18;
+let env6111 = {};
+const renderItem = function renderItem({ item }) {
+  return (0, jsx)(ConversationListItem, {
+    channelId: item.channelId,
+    conversationId: item.conversationId
+  });
+};
+keyExtractor = function keyExtractor(a0) {
+  return a0.conversationId;
+};
+c6111_13 = {
+  waitForInteraction: false,
+  itemVisiblePercentThreshold: 50,
+  minimumViewTime: 1000
+};
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  content: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_16
+  },
+  spinner: {
+    paddingVertical: Module712.space.PX_16,
+    alignItems: "center"
+  }
+});
+useStyles2 = createStyles({
+  empty: {
+    paddingVertical: Module712.space.PX_24,
+    paddingHorizontal: Module712.space.PX_16
+  }
+});
+c6111_18 = Module19.memo(function() {
+  return <View style={useStyles2().empty}>
+    <Text variant="text-md/normal" color="text-muted">
+      {intl.string(t.LJuFRG)}
+    </Text>
+  </View>;
+});
+export default function ConversationListScreen() {
+  let c17115_0, _handleEndReached2;
+  let env17114 = {
+    $parent: env6111
+  };
+  const styles = useStyles();
+  env17114[0] = styles;
+  const params = useRoute().params;
+  const channelId = params.channelId;
+  env17114[1] = channelId;
+  const guildId = params.guildId;
+  env17114[2] = guildId;
+  const bottom = useSafeAreaInsets_native().bottom;
+  const conversationBackoffRef = useConversationBackoffRef();
+  env17114[3] = conversationBackoffRef;
+  const r36 = _slicedToArray(useState(false), 2);
+  const r37 = r36[0];
+  env17114[4] = r37;
+  env17114[5] = r36[1];
+  const stateFromStoresArray = useStateFromStoresArray([ConversationsStore], () => {
+    let r6 = ConversationsStore.getChannelConversations(env17114[1]);
+    if (r6 == null) {
+      r6 = [];
+    }
+    return r6.map((item) => item.id);
+  }, [channelId]);
+  env17114[6] = stateFromStoresArray;
+  const memo = useMemo(() => env17114[6].slice().sort((a, b) => SnowflakeUtils.compare(b, a)).map((item) => ({
+    channelId: env17114[1],
+    conversationId: item
+  })), [stateFromStoresArray, channelId]);
+  env17114[7] = memo;
+  let r51 = useStateFromStores([ConversationsStore], () => ConversationsStore.getEdgeMarker(env17114[1], "before") == null, [channelId]);
+  const stateFromStores = useStateFromStores([ConversationsStore], () => ConversationsStore.isPendingFetch(env17114[1]), [channelId]);
+  env17114[8] = stateFromStores;
+  c17115_0 = void 0;
+  _handleEndReached2 = function _handleEndReached() {
+    return c17115_0.apply(this, arguments);
+  };
+  c17115_0 = async () => {
+    let c30081_2 = 0;
+    L16: {
+      L15: {
+        try {
+          const channelId = env17114[1];
+          const channelConversations = ConversationsStore.getChannelConversations(channelId);
+          if (channelConversations != null && channelConversations.length > 0) {
+            const r39 = env17114[7];
+            if (r39.length > 0 && r39[0].conversationId === channelConversations[channelConversations.length - 1].id) {
+              const r49 = r39[r39.length - 1];
+              c30081_2 = 1;
+              await fetchChannelConversations({
+                channelId,
+                guildId: env17114[2],
+                direction: "before",
+                anchor: r49.conversationId,
+                limit: MOBILE_FETCH_LIMIT,
+                throwOnError: true,
+                hydrateMessages: {
+                  limit: MOBILE_PREVIEW_MESSAGE_COUNT
+                }
+              });
+              c30081_2 = 0;
+              env17114[3].current.succeed();
+              (0, env17114[5])(false);
+              break L15;
+            }
+          }
+          env17114[3].current.succeed();
+          (0, env17114[5])(false);
+          break L16;
+        } catch ($e) {
+          let r27 = $e;
+          if (c30081_2 !== 0) {
+            while (true) {
+              try {
+                c30081_2 = 0;
+                env17114[3].current.fail(_handleEndReached2);
+                (0, env17114[5])(true);
+              } catch ($e) {
+                r27 = $e;
+                if (c30081_2 === 0) {
+                  break;
+                }
+                continue;
+              }
+              return void 0;
+            }
+          }
+          throw r27;
+        }
+      }
+      return void 0;
+    }
+  };
+  const callback = useCallback(_handleEndReached2, [memo, channelId, guildId, conversationBackoffRef]);
+  const memo2 = useMemo(() => {
+    let r7, jsx2;
+    if (!env17114[8]) {
+      const r2 = env17114[4];
+      r7 = null;
+      if (r2) {
+        jsx2 = jsx;
+        r7 = jsx2(View, {
+          style: env17114[0].spinner,
+          children: jsx2(ActivityIndicator, {})
+        });
+      }
+    } else {
+      jsx2 = jsx;
+      r7 = jsx2(View, {
+        style: env17114[0].spinner,
+        children: jsx2(ActivityIndicator, {})
+      });
+    }
+    return r7;
+  }, [styles.spinner, stateFromStores, r37]);
+  if (r51) {
+    r51 = memo.length > 0;
+  }
+  if (r51) {
+    r51 = memo.length < MAX_CONVERSATIONS_PER_CHANNEL;
+  }
+  if (r51) {
+    r51 = !stateFromStores;
+  }
+  if (r51) {
+    r51 = !r37;
+  }
+  env17114[9] = useRef(void 0);
+  return <View style={[styles.container, {
+    paddingBottom: bottom
+  }]}>
+    <FlashList data={memo} renderItem={renderItem} keyExtractor={keyExtractor} contentContainerStyle={styles.content} onEndReached={r51 ? callback : void 0} ListEmptyComponent={c6111_18} ListFooterComponent={memo2} onViewableItemsChanged={useCallback(({ viewableItems }) => {
+      const r2 = env17114[9];
+      if (r2.current == null) {
+        r2.current = new Set();
+      }
+      for (const item of viewableItems) {
+        const conversationId = item.item.conversationId;
+        const r37 = env17114[9];
+        if (!r37.current.has(conversationId)) {
+          ConversationsAnalytics.trackPreviewImpression({
+            channelId: env17114[1],
+            conversationId,
+            isFocusMode: false
+          });
+          r37.current.add(conversationId);
+        }
+      }
+    }, [channelId])} viewabilityConfig={c6111_13} />
+  </View>;
+};

modules/conversations/components/native/ConversationNavigator.tsx

@@ -0,0 +1,58 @@
+// Metro module 9283 (f9284).
+import { useToken } from "../../../../design/tokens/native/useToken";
+import Module712 from "../../../../_bundle/Module712";
+import { renderHeader, getRenderBackImage } from "../../../main_tabs_v2/native/shared_components/HeaderShared";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import { createNativeStackNavigator } from "../../../../_bundle/Module9109";
+import { useAccessibilityNativeStackOptions } from "../../../../design/components/Navigator/native/Navigator.native";
+import { ConversationNavigatorScreens } from "./ConversationNavigatorUtils";
+import ConversationNavigatorHeader from "./ConversationNavigatorHeader";
+import { intl, t } from "../../../../intl/index.native";
+import * as _ConversationListScreen from "./ConversationListScreen";
+import ConversationNavigatorMoreMenu from "./ConversationNavigatorMoreMenu";
+import * as _ConversationFocusScreen from "./ConversationFocusScreen";
+import { getRootNavigationRef } from "../../../main_tabs_v2/RootNavigationRef.native";
+let nativeStackNavigator;
+const HeaderWithBorder = function HeaderWithBorder(a0) {
+  const token = useToken(Module712.colors.BORDER_SUBTLE);
+  return renderHeader({
+    ...a0,
+    shouldHandleSafeArea: isAndroid(),
+    style: {
+      borderColor: token
+    }
+  });
+};
+nativeStackNavigator = createNativeStackNavigator();
+export default function ConversationNavigator(props) {
+  const params = props.route.params;
+  const { channelId, guildId } = params;
+  return <nativeStackNavigator.Navigator id="conversation-navigator" screenOptions={useAccessibilityNativeStackOptions()}>
+    <nativeStackNavigator.Screen initialParams={{
+      channelId,
+      guildId
+    }} name={ConversationNavigatorScreens.LIST} options={(a0) => ({
+      header: (a0) => <HeaderWithBorder {...a0} />,
+      headerLeft: getRenderBackImage(a0.navigation),
+      headerTitle: () => <ConversationNavigatorHeader channelId={channelId} title={intl.string(t.T3WBRp)} />
+    })} getComponent={() => _ConversationListScreen.default} />
+    <nativeStackNavigator.Screen name={ConversationNavigatorScreens.FOCUS} options={(a0) => {
+      const route = a0.route;
+      return {
+        header: (a0) => <HeaderWithBorder {...a0} />,
+        headerLeft: getRenderBackImage(a0.navigation),
+        headerTitle: () => <ConversationNavigatorHeader channelId={route.params.channelId} title={route.params.title} hasRightAction />,
+        headerRight: () => <ConversationNavigatorMoreMenu channelId={route.params.channelId} conversationId={route.params.conversationId} />
+      };
+    }} getComponent={() => _ConversationFocusScreen.default} />
+  </nativeStackNavigator.Navigator>;
+};
+export function openConversationNavigator({ channelId: channelId2, guildId }) {
+  const rootNavigationRef = getRootNavigationRef();
+  if (rootNavigationRef != null && rootNavigationRef.isReady()) {
+    rootNavigationRef.navigate("conversations", {
+      channelId: channelId2,
+      guildId
+    });
+  }
+}

modules/conversations/components/native/ConversationNavigatorHeader.tsx

@@ -0,0 +1,28 @@
+// Metro module 9285 (f9286).
+import { View } from "react-native";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useChannelName from "../../../channel/useChannelName";
+import { GenericHeaderTitle } from "../../../main_tabs_v2/native/shared_components/HeaderShared";
+const useStyles = createStyles((a0) => ({
+  container: {
+    flex: 1,
+    paddingVertical: Module712.space.PX_16,
+    paddingRight: a0 ? 0 : Module712.space.PX_64,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+export default function ConversationNavigatorHeader(props) {
+  const { channelId, title, hasRightAction = false } = props;
+  const styles = useStyles(hasRightAction);
+  let subtitle = useChannelName(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]), true);
+  if (subtitle == null) {
+    subtitle = void 0;
+  }
+  return <View style={styles.container}>
+    <GenericHeaderTitle title={title} subtitle={subtitle} variant="heading-lg/semibold" subtitleColor="text-muted" />
+  </View>;
+};

modules/conversations/components/native/ConversationNavigatorMoreMenu.tsx

@@ -0,0 +1,57 @@
+// Metro module 9294 (f9295).
+import { useMemo } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { intl, t } from "../../../../intl/index.native";
+import { ThumbsUpIcon } from "../../../../design/components/Icon/native/redesign/generated/ThumbsUpIcon";
+import { setConversationFeedbackRating } from "../../ConversationsActionCreators";
+import { ConversationsAnalytics } from "../../ConversationsAnalytics";
+import { presentFeedbackSent } from "../../../toast/native/ToastUtils";
+import { ThumbsDownIcon } from "../../../../design/components/Icon/native/redesign/generated/ThumbsDownIcon";
+import { ContextMenu } from "../../../../design/components/ContextMenu/native/ContextMenu.native";
+import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
+import { MoreHorizontalIcon } from "../../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
+const useStyles = createStyles({
+  container: {
+    paddingHorizontal: Module712.space.PX_12
+  }
+});
+export default function ConversationNavigatorMoreMenu(props) {
+  const { channelId, conversationId } = props;
+  const styles = useStyles();
+  return <ContextMenu items={useMemo(() => [{
+    label: intl.string(t["7iRs51"]),
+    IconComponent: ThumbsUpIcon,
+    action: () => {
+      setConversationFeedbackRating(channelId, conversationId, "up");
+      ConversationsAnalytics.trackThumbsClicked({
+        channelId,
+        conversationId,
+        isThumbsUp: true,
+        isFocusMode: true
+      });
+      presentFeedbackSent();
+    }
+  }, {
+    label: intl.string(t.uNGhdg),
+    IconComponent: ThumbsDownIcon,
+    action: () => {
+      setConversationFeedbackRating(channelId, conversationId, "down");
+      ConversationsAnalytics.trackThumbsClicked({
+        channelId,
+        conversationId,
+        isThumbsUp: false,
+        isFocusMode: true
+      });
+      presentFeedbackSent();
+    }
+  }], [channelId, conversationId])}>
+    {(a0) => {
+      const { ref, ...rest } = a0;
+      return <View style={styles.container} ref={a0.ref}>
+        <IconButton {...rest} size="sm" variant="tertiary" accessibilityLabel={intl.string(t["6Ic4Ev"])} icon={<MoreHorizontalIcon size="sm" />} />
+      </View>;
+    }}
+  </ContextMenu>;
+};

modules/conversations/components/native/ConversationNavigatorUtils.tsx

@@ -0,0 +1,17 @@
+// Metro module 9284 (f9285).
+import { getRootNavigationRef } from "../../../main_tabs_v2/RootNavigationRef.native";
+import { transitionToMessage } from "../../../routing/transitionToChannel";
+const r11 = {
+  LIST: "conversation_list",
+  FOCUS: "conversation_focus"
+};
+export function closeConversationsAndJumpToMessage(a0, a1) {
+  const rootNavigationRef = getRootNavigationRef();
+  if (rootNavigationRef != null) {
+    rootNavigationRef.goBack();
+  }
+  transitionToMessage(a0, a1, {
+    navigationReplace: true
+  });
+}
+export { r11 as ConversationNavigatorScreens };

modules/conversations/components/native/ConversationPreviewMessage.tsx

@@ -0,0 +1,73 @@
+// Metro module 9289 (f9290).
+import { useMemo } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import GuildMemberStore from "../../../../stores/GuildMemberStore";
+import RowGenerator from "../../../messages/native/renderer/RowGenerator";
+import { MessageContextType } from "../../../messages/native/renderer/RowGeneratorTypes";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { useName } from "../../../../utils/NicknameUtils";
+import { useProcessColorStringsArray, useIsRoleStyleAndRoleColorsEligibleForERC } from "../../../premium/enhanced_role_colors/native/EnhancedRoleColorUtils";
+import { TimestampHourCycle } from "../../../user_settings/UserSettings";
+import { calendarFormat } from "../../../../utils/DateUtils";
+import { Avatar, AvatarSizes, RoleDot } from "../../../../design/void/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import ChatItem from "../../../../components_native/chat/ChatItem";
+let rowGenerator, useStyles;
+const modifyRow = function modifyRow(a0) {
+  a0.contextType = MessageContextType.SEARCH;
+  a0.renderContentOnly = true;
+};
+rowGenerator = new RowGenerator();
+rowGenerator.setOptions({
+  renderReplies: false,
+  renderReactions: false
+});
+useStyles = createStyles({
+  container: {
+    gap: Module712.space.PX_4
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  authorRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_4
+  },
+  headerTimestamp: {
+    flex: 1
+  }
+});
+export default function ConversationPreviewMessage(props) {
+  let setting;
+  const { message, guildId, channelId } = props;
+  setting = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.roleStyle);
+  const stateFromStores2 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getMember(guildId, message.author.id), [guildId, message.author.id]);
+  const name = useName(guildId, channelId, message.author);
+  const style = stateFromStores === "username" ? stateFromStores2?.colorString != null ? {
+    color: stateFromStores2.colorString
+  } : {} : {};
+  const processColorStringsArray = useProcessColorStringsArray(stateFromStores2?.colorStrings);
+  const isRoleStyleAndRoleColorsEligibleForERC = useIsRoleStyleAndRoleColorsEligibleForERC(guildId, message.author.id, stateFromStores, processColorStringsArray);
+  setting = TimestampHourCycle.useSetting();
+  return <View style={styles.container}>
+    <View style={styles.header}>
+      <Avatar user={message.author} guildId={guildId} size={AvatarSizes.XXSMALL} />
+      <View style={styles.authorRow}>
+        {stateFromStores === "dot" && stateFromStores2?.colorString != null && <RoleDot size="small" color={stateFromStores2.colorString} colors={stateFromStores2.colorStrings} />}
+        <Text variant="text-md/medium" lineClamp={1} style={style} gradientColors={isRoleStyleAndRoleColorsEligibleForERC ? processColorStringsArray : void 0}>{name}</Text>
+      </View>
+      <Text variant="text-xs/normal" color="text-muted" lineClamp={1} style={styles.headerTimestamp}>
+        {useMemo(() => calendarFormat(message.timestamp, true, setting), [message.timestamp, setting])}
+      </Text>
+    </View>
+    <ChatItem pointerEvents="none" horizontalOffset={0} modifyRow={modifyRow} message={message} rowGenerator={rowGenerator} />
+  </View>;
+};

modules/conversations/components/native/ConversationPreviewSkeleton.tsx

@@ -0,0 +1,71 @@
+// Metro module 9288 (f9289).
+import { useEffect } from "react";
+import { View } from "react-native";
+import { MOBILE_PREVIEW_MESSAGE_COUNT } from "../../ConversationConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import ReanimatedRexport, { useSharedValue, withRepeat, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
+const useStyles = createStyles({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8,
+    marginTop: Module712.space.PX_4
+  },
+  rowSpacing: {
+    marginTop: Module712.space.PX_26
+  },
+  avatar: {
+    width: 24,
+    height: 24,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG
+  },
+  lines: {
+    flex: 1,
+    gap: Module712.space.PX_4
+  },
+  lineName: {
+    height: 10,
+    width: "35%",
+    borderRadius: Module712.radii.xs,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG
+  },
+  lineText: {
+    height: 10,
+    borderRadius: Module712.radii.xs,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG
+  }
+});
+const __initData = {
+  code: "function ConversationPreviewSkeletonTsx1(){const{opacity}=this.__closure;return{opacity:opacity.get()};}"
+};
+export default function ConversationPreviewSkeleton() {
+  const styles = useStyles();
+  const sharedValue = useSharedValue(0.4);
+  useEffect(() => {
+    sharedValue.set(withRepeat(withTiming(1, {
+      duration: 700
+    }), -1, true));
+  }, [sharedValue]);
+  const r20 = () => ({
+    opacity: sharedValue.get()
+  });
+  r20.__closure = {
+    opacity: sharedValue
+  };
+  r20.__workletHash = 11432452203963;
+  r20.__initData = __initData;
+  return <ReanimatedRexport.View style={useAnimatedStyle(r20)} aria-hidden>
+    {Array.from({
+      length: MOBILE_PREVIEW_MESSAGE_COUNT
+    }, (a0, a1) => <View key={a1} style={[styles.row, a1 > 0 && styles.rowSpacing]}>
+      <View style={styles.avatar} />
+      <View style={styles.lines}>
+        <View style={styles.lineName} />
+        <View style={styles.lineText} />
+      </View>
+    </View>)}
+  </ReanimatedRexport.View>;
+};

modules/conversations/components/native/useConversationsHeaderButton.tsx

@@ -0,0 +1,135 @@
+// Metro module 9267 (f9268).
+import { useCallback, useEffect, useRef, useMemo } from "react";
+import ConversationsStore from "../../ConversationsStore";
+import { MOBILE_FETCH_LIMIT, MOBILE_PREVIEW_MESSAGE_COUNT, CONVERSATION_HAS_MORE_EXPIRATION_MS } from "../../ConversationConstants";
+import { useIsTopicalNavEnabled } from "../../ConversationExperiments";
+import { ChannelTypes } from "../../../../_bundle/Module692";
+import { useConversationBackoffRef } from "../../useConversationBackoffRef";
+import { fetchChannelConversations, trackTopicalNavigationEntrypointImpression } from "../../ConversationsActionCreators";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { PaperIcon } from "../../../../design/components/Icon/native/redesign/generated/PaperIcon";
+import { ConversationsAnalytics } from "../../ConversationsAnalytics";
+import { openConversationNavigator } from "./ConversationNavigator";
+import { intl, t } from "../../../../intl/index.native";
+let env6097 = {};
+export function useConversationsHeaderButton(a0) {
+  let env17103 = {
+    $parent: env6097
+  };
+  env17103[0] = a0;
+  let r18 = useIsTopicalNavEnabled(a0.guild_id, "channel_header") && a0.type === ChannelTypes.GUILD_TEXT;
+  let c17104_0;
+  env17103[1] = r18;
+  const conversationBackoffRef = useConversationBackoffRef([a0.id]);
+  env17103[2] = conversationBackoffRef;
+  c17104_0 = void 0;
+  const fetchPage2 = function fetchPage() {
+    return c17104_0.apply(this, arguments);
+  };
+  c17104_0 = async () => {
+    let c30074_2 = 0;
+    L13: {
+      try {
+        if (env17103[1]) {
+          c30074_2 = 1;
+          const r15 = env17103[0];
+          await fetchChannelConversations({
+            channelId: r15.id,
+            guildId: r15.guild_id,
+            direction: "before",
+            anchor: null,
+            limit: MOBILE_FETCH_LIMIT,
+            isJump: true,
+            throwOnError: true,
+            hydrateMessages: {
+              limit: MOBILE_PREVIEW_MESSAGE_COUNT
+            }
+          });
+          env17103[2].current.succeed();
+          c30074_2 = 0;
+          break L13;
+        }
+      } catch ($e) {
+        let r24 = $e;
+        if (c30074_2 !== 0) {
+          while (true) {
+            try {
+              c30074_2 = 0;
+              env17103[2].current.fail(fetchPage2);
+              break L13;
+            } catch ($e) {
+              r24 = $e;
+              if (c30074_2 === 0) {
+                break;
+              }
+            }
+          }
+        }
+        throw r24;
+      }
+      return void 0;
+    }
+  };
+  const callback = useCallback(fetchPage2, [a0.id, a0.guild_id, r18, conversationBackoffRef]);
+  env17103[3] = callback;
+  useEffect(() => {
+    const r3 = env17103[1];
+    if (!((r3 ? ConversationsStore.hasChannelData(env17103[0].id) : !r3) || ConversationsStore.isPendingFetch(env17103[0].id))) {
+      (0, env17103[3])();
+    }
+  }, [a0.id, a0.guild_id, r18, callback]);
+  const stateFromStores = useStateFromStores([ConversationsStore], () => ConversationsStore.getEdgeMarker(env17103[0].id, "after"), [a0.id]);
+  env17103[4] = stateFromStores;
+  useEffect(() => {
+    if (env17103[1]) {
+      const r4 = env17103[4];
+      if (r4 != null) {
+        const r12 = r4 + CONVERSATION_HAS_MORE_EXPIRATION_MS - Date.now();
+        if (r12 > 0) {
+          let c26405_0 = setTimeout(env17103[3], r12);
+          return () => clearTimeout(c26405_0);
+        }
+        (0, env17103[3])();
+      }
+    }
+  }, [stateFromStores, r18, callback]);
+  const stateFromStores2 = useStateFromStores([ConversationsStore], () => {
+    let r10 = ConversationsStore.getChannelConversations(env17103[0].id)?.length;
+    if (r10 == null) {
+      r10 = 0;
+    }
+    return r10;
+  }, [a0.id]);
+  env17103[5] = stateFromStores2;
+  if (r18) {
+    r18 = stateFromStores2 > 0;
+  }
+  env17103[6] = r18;
+  env17103[7] = useRef(null);
+  useEffect(() => {
+    if (env17103[6] && env17103[7].current !== env17103[0].id) {
+      const r7 = env17103[7];
+      const r8 = env17103[0];
+      r7.current = r8.id;
+      trackTopicalNavigationEntrypointImpression(r8.id, env17103[5]);
+    }
+  }, [r18, stateFromStores2, a0.id]);
+  return useMemo(() => env17103[6] ? {
+    source: null,
+    IconComponent: PaperIcon,
+    onPress: () => {
+      env17103[2].current.cancel();
+      const r14 = env17103[0];
+      ConversationsAnalytics.trackTopicsUnitImpression({
+        channelId: r14.id,
+        conversationIds: [],
+        isFocusMode: false
+      });
+      openConversationNavigator({
+        channelId: r14.id,
+        guildId: r14.guild_id
+      });
+    },
+    accessibilityLabel: intl.string(t.u54FxB)
+  } : null, [r18, conversationBackoffRef, a0.id, a0.guild_id]);
+}