yeet

modules/main_tabs_v2/native/sidebar/details/ChannelDetails.tsx

@@ -0,0 +1,240 @@
+// Metro module 15460 (f15461).
+import * as Module19 from "react";
+import { useEffect, useRef, useContext, useMemo, useLayoutEffect, useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import SearchQueryStore from "../../../../search/native/stores/SearchQueryStore";
+import ChannelStore from "../../../../../stores/ChannelStore";
+import { deleteChannelDetailsSearchState, useChannelDetailsSearchActiveSource, useIsChannelDetailsSearchActive } from "./stores/ChannelDetailsStore";
+import { SPRING_CHANNEL_HEADER, CHANNEL_DETAILS_TOP_MARGIN } from "./ChannelDetailsConstants";
+import Module712 from "../../../../../_bundle/Module712";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import { useChannelDetailsSearchContext } from "../../../../search/native/hooks/useSearchContext";
+import { useSearchSuggestionsGesture } from "../../../../search/native/components/layout/autocomplete/useSearchSuggestionsGesture";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../../app_analytics/AnalyticsLocation";
+import { SwipeForMemberListContext } from "../../channel/SwipeForMemberListWrapper";
+import { useIsScreenReaderEnabled } from "../../../../a11y/native/useIsScreenReaderEnabled.native";
+import useIsWindowLarge from "../../../../screen/native/useIsWindowLarge";
+import useSafeAreaInsets_native from "../../../../safe_area/useSafeAreaInsets.native";
+import { isAndroid } from "../../../../../utils/PlatformUtils";
+import { isIpadOS } from "../../../../../utils/native/DeviceUtils";
+import { trackAppUIViewed } from "../../../../tti_analytics/native/TTIAnalyticsUtils";
+import SearchPlatformActionCreators from "../../../../search/native/SearchPlatformActionCreators";
+import SearchPlatformUtils from "../../../../search/native/SearchPlatformUtils";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../../../design/animation/reanimated/timing/timing";
+import * as _timingPresets from "../../../../../design/animation/reanimated/timing/timingPresets";
+import * as _spring from "../../../../../design/animation/reanimated/spring/spring";
+import SearchActionCreators from "../../../../search/SearchActionCreators";
+import { getBestActiveInputForChannelId } from "../../../../../utils/native/ChatInputUtils";
+import { GestureDetector } from "../../../../../_bundle/Module5273";
+import ChannelDetailsSearchBar from "./ChannelDetailsSearchBar";
+import SearchScreenLayout from "../../../../search/native/components/layout/SearchScreenLayout";
+import ChannelDetailsNavigationBar from "./header_v2/ChannelDetailsNavigationBar";
+import ChannelNameHeader from "./header_v2/ChannelNameHeader";
+import ChannelDetailsLinkedLobby from "./ChannelDetailsLinkedLobby";
+import ChannelDetailsTopic from "./ChannelDetailsTopic";
+import { Freeze } from "../../../../../_bundle/Suspender";
+const PX_8 = Module712.space.PX_8;
+const useStyles = createStyles({
+  detailsContainer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND,
+    flex: 1
+  },
+  information: {
+    marginHorizontal: Module712.space.PX_16,
+    gap: Module712.space.PX_12,
+    paddingTop: PX_8
+  },
+  linkedLobby: {
+    marginTop: Module712.space.PX_12,
+    marginBottom: Module712.space.PX_4
+  },
+  search: {
+    flex: 1,
+    flexGrow: 1
+  },
+  searchLocked: {
+    marginTop: CHANNEL_DETAILS_TOP_MARGIN,
+    marginBottom: Module712.space.PX_16
+  },
+  autocompleteSuggestions: {
+    zIndex: 10
+  },
+  newHeader: {
+    paddingBottom: Module712.space.PX_12,
+    zIndex: 10
+  }
+});
+const __initData = {
+  code: "function ChannelDetailsTsx1(){const{headerHeight,isSearchActive,withTiming,timingFast,withSpring,SPRING_CHANNEL_HEADER}=this.__closure;const height=headerHeight.get();return{position:'relative',pointerEvents:isSearchActive?'none':'auto',opacity:withTiming(isSearchActive?0:1,timingFast,'animate-always'),height:height!=null&&height>=0?withSpring(isSearchActive?0:height,{...SPRING_CHANNEL_HEADER,clamp:{min:0,max:height}}):undefined};}"
+};
+const r88 = Module19.memo(function ChannelDetails(props) {
+  let props3;
+  let channelDetailsSearchContext, isChannelDetailsSearchActive, channelDetailsSearchActiveSource, ref, context, top, sharedValue;
+  const { channelId, isSearchLocked, onBackPress, componentWidth, isShowing = true } = props;
+  let c22028_2 = isShowing;
+  const { onChannelDeleted, expandTopic = false } = props;
+  channelDetailsSearchContext = void 0;
+  isChannelDetailsSearchActive = void 0;
+  channelDetailsSearchActiveSource = void 0;
+  ref = void 0;
+  context = void 0;
+  top = void 0;
+  sharedValue = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const guild_id = stateFromStores?.guild_id;
+  useEffect(() => {
+    if (stateFromStores == null && onChannelDeleted != null) {
+      onChannelDeleted();
+    }
+  }, [stateFromStores, onChannelDeleted]);
+  channelDetailsSearchContext = useChannelDetailsSearchContext(channelId, guild_id);
+  const searchSuggestionsGesture = useSearchSuggestionsGesture(channelDetailsSearchContext);
+  const { gesture, dismissed, setDismissed, onLayoutMeasure } = searchSuggestionsGesture;
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.CHANNEL_DETAILS).analyticsLocations;
+  isChannelDetailsSearchActive = useIsChannelDetailsSearchActive(channelId);
+  channelDetailsSearchActiveSource = useChannelDetailsSearchActiveSource(channelId);
+  ref = useRef(null);
+  context = useContext(SwipeForMemberListContext);
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  let showBackButton = useIsWindowLarge();
+  top = useSafeAreaInsets_native().top;
+  const memo = useMemo(() => !isAndroid() && !isIpadOS() ? context != null ? {
+    paddingTop: top
+  } : null : {
+    paddingTop: top
+  }, [top, context]);
+  useLayoutEffect(() => trackAppUIViewed(), []);
+  useEffect(() => {
+    if (!isSearchLocked && channelDetailsSearchActiveSource !== "initial") {
+      const current = ref.current;
+      if (isChannelDetailsSearchActive) {
+        if (current != null) {
+          current.focus();
+        }
+      } else {
+        if (current != null) {
+          current.blur();
+        }
+        if (SearchQueryStore.isInitialSearchQuery(channelDetailsSearchContext)) {
+          return void 0;
+        }
+        SearchPlatformActionCreators.updateSearchQuery(channelDetailsSearchContext, (a0) => a0.reset());
+        SearchPlatformUtils.fetchInitialMessages(channelDetailsSearchContext);
+      }
+    }
+  }, [isChannelDetailsSearchActive, isSearchLocked, channelDetailsSearchActiveSource, channelDetailsSearchContext]);
+  sharedValue = useSharedValue(void 0);
+  const callback = useCallback((a0) => {
+    const height = a0.nativeEvent.layout.height;
+    if (!(height <= PX_8)) {
+      const r14 = sharedValue.get();
+      if (!(r14 != null && Math.abs(height - r14) < 0.001)) {
+        sharedValue.set(height);
+      }
+    }
+  }, [sharedValue]);
+  const Q = function Q() {
+    const max = sharedValue.get();
+    return {
+      position: "relative",
+      pointerEvents: isChannelDetailsSearchActive ? "none" : "auto",
+      opacity: _timing.withTiming(isChannelDetailsSearchActive ? 0 : 1, _timingPresets.timingFast, "animate-always"),
+      height: max != null ? max >= 0 ? _spring.withSpring(isChannelDetailsSearchActive ? 0 : max, {
+        ...SPRING_CHANNEL_HEADER,
+        clamp: {
+          min: 0,
+          max
+        }
+      }) : void 0 : void 0
+    };
+  };
+  Q.__closure = {
+    headerHeight: sharedValue,
+    isSearchActive: isChannelDetailsSearchActive,
+    withTiming: _timing.withTiming,
+    timingFast: _timingPresets.timingFast,
+    withSpring: _spring.withSpring,
+    SPRING_CHANNEL_HEADER
+  };
+  Q.__workletHash = 8423441529588;
+  Q.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(Q);
+  useEffect(() => {
+    SearchActionCreators.initializeAutocomplete(channelDetailsSearchContext);
+    SearchPlatformActionCreators.initializeSearchQuery(channelDetailsSearchContext);
+  }, [channelDetailsSearchContext]);
+  useEffect(() => {
+    if (c22028_2) {
+      SearchActionCreators.clearAllSearchMesssages();
+      SearchPlatformActionCreators.updateSearchQuery(channelDetailsSearchContext, (a0) => a0.reset());
+    }
+  }, [channelDetailsSearchContext, isShowing]);
+  useEffect(() => () => {
+    SearchActionCreators.clearAllSearchMesssages();
+    deleteChannelDetailsSearchState(channelId);
+    SearchPlatformActionCreators.deleteSearchQuery(channelDetailsSearchContext);
+  }, [channelId, channelDetailsSearchContext]);
+  useEffect(() => {
+    const bestActiveInputForChannelId = getBestActiveInputForChannelId(channelId);
+    if (bestActiveInputForChannelId != null) {
+      bestActiveInputForChannelId.closeCustomKeyboard();
+    }
+  }, [channelId]);
+  const r130 = stateFromStores == null;
+  const guildId = guild_id;
+  let r132 = null;
+  if (!r130) {
+    const r146 = {
+      style: [styles.detailsContainer, memo],
+      accessibilityViewIsModal: true,
+      onAccessibilityEscape: onBackPress,
+      children: null
+    };
+    const props2 = {
+      style: null,
+      children: null
+    };
+    if (isSearchLocked) {
+      props2.style = [styles.searchLocked, styles.autocompleteSuggestions];
+      if (!showBackButton) {
+        showBackButton = isScreenReaderEnabled;
+      }
+      if (!showBackButton) {
+        showBackButton = isAndroid();
+      }
+      if (showBackButton) {
+        showBackButton = onBackPress != null;
+      }
+      props2.children = <ChannelDetailsSearchBar ref={ref} channelId={channelId} guildId={guildId} onSuggestionsLayoutMesure={onLayoutMeasure} onBackPress={onBackPress} suggestionsDismissed={dismissed} setSuggestionsDismissed={setDismissed} showBackButton={showBackButton} />;
+      r146.children = [<View {...props2} />, <SearchScreenLayout searchContext={channelDetailsSearchContext} width={componentWidth} />];
+      props3 = r146;
+    } else {
+      props2.style = styles.newHeader;
+      props2.children = [<ChannelDetailsNavigationBar ref={ref} channel={stateFromStores} onBackPress={onBackPress} onSuggestionsLayoutMeasure={onLayoutMeasure} suggestionsDismissed={dismissed} setSuggestionsDismissed={setDismissed} componentWidth={componentWidth} />, <ReanimatedRexport.View style={animatedStyle}>
+        <ReanimatedRexport.View style={styles.information} onLayout={callback}>
+          <ChannelNameHeader channel={stateFromStores} />
+          <ChannelDetailsLinkedLobby channel={stateFromStores} containerStyle={styles.linkedLobby} />
+          {stateFromStores.isPrivate() ? null : <ChannelDetailsTopic channel={stateFromStores} textAlign="left" initialExpanded={expandTopic} />}
+        </ReanimatedRexport.View>
+      </ReanimatedRexport.View>];
+      r146.children = [<View {...props2} />, <Freeze freeze={!isShowing}>
+        <View style={styles.search} collapsable={false}>
+          <SearchScreenLayout searchContext={channelDetailsSearchContext} width={componentWidth} />
+        </View>
+      </Freeze>];
+      props3 = r146;
+    }
+    r132 = <AnalyticsLocationProvider value={analyticsLocations}>
+      <GestureDetector gesture={gesture}>
+        <View {...props3} />
+      </GestureDetector>
+    </AnalyticsLocationProvider>;
+  }
+  return r132;
+});
+export default r88;

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsConstants.tsx

@@ -0,0 +1,36 @@
+// Metro module 9100 (f9101).
+import { SEARCH_BAR_HEIGHT } from "../../../../search/SearchConstants";
+const r18 = {
+  DETAILS: "root",
+  MUTE: "mute",
+  THREADS: "threads",
+  SETTINGS: "settings",
+  PINNED_MESSAGES: "pinned-messages"
+};
+const r22 = {
+  SEARCH: "search",
+  MUTE: "mute",
+  THREADS: "threads",
+  SETTINGS: "settings",
+  MORE: "more"
+};
+const r24 = SEARCH_BAR_HEIGHT + 40;
+export { r18 as ChannelDetailsNavigatorScreens };
+export { r22 as ChannelDetailsButtonTypes };
+export const CHANNEL_DETAILS_MARGIN = 16;
+export const CHANNEL_DETAILS_TOP_MARGIN = 24;
+export const CHANNEL_DETAILS_BODY_TOP_MARGIN = 20;
+export { r24 as CHANNEL_DETAILS_SEARCH_HEIGHT };
+export const BUTTON_DEFAULT_HEIGHT = 120;
+export const CHANNEL_TOPIC_LINE_CLAMP = 3;
+export const DESCRIPTION_HORIZONTAL_MARGIN = 24;
+export const SPRING_CHANNEL_DETAILS = {
+  mass: 1,
+  damping: 30,
+  stiffness: 300
+};
+export const SPRING_CHANNEL_HEADER = {
+  mass: 1,
+  damping: 80,
+  stiffness: 1280
+};

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsLinkedLobby.tsx

@@ -0,0 +1,39 @@
+// Metro module 15566 (f15567).
+import { View } from "react-native";
+import { HelpdeskArticles } from "../../../../../Constants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { useGetOrFetchApplication } from "../../../../applications/useGetOrFetchApplications";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../intl/index.native";
+import HelpdeskUtils from "../../../../../utils/HelpdeskUtils";
+const useStyles = createStyles({
+  container: {
+    alignItems: "center"
+  },
+  divider: {
+    height: 1,
+    width: 48,
+    marginTop: 12,
+    backgroundColor: Module712.colors.BORDER_STRONG
+  }
+});
+export default function ChannelDetailsLinkedLobby(props) {
+  const { channel, containerStyle } = props;
+  const styles = useStyles();
+  const getOrFetchApplication = useGetOrFetchApplication(channel.linkedLobby?.application_id);
+  return channel.linkedLobby == null ? null : <View style={[styles.container, containerStyle]}>
+    <Text variant="text-sm/normal" color="text-default">
+      <>
+        {getOrFetchApplication != null ? intl.format(t.SgxMJs, {
+          applicationName: getOrFetchApplication.name
+        }) : intl.string(t.yQqVss)}
+        {"  •  "}
+        {intl.format(t.BPDKoA, {
+          helpdeskArticle: HelpdeskUtils.getArticleURL(HelpdeskArticles.LINKED_LOBBIES)
+        })}
+      </>
+    </Text>
+    <View style={styles.divider} />
+  </View>;
+};

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsMoreButton.tsx

@@ -0,0 +1,34 @@
+// Metro module 15564 (f15565).
+import { useCallback } from "react";
+import { openChannelLongPressActionSheet } from "../../../../channel/native/openChannelLongPressActionSheet";
+import PressableNavigatorButtonWrapper from "../../shared_components/navigator/PressableNavigatorButtonWrapper";
+import { HeaderIconButton } from "../../shared_components/HeaderShared";
+import { intl, t } from "../../../../../intl/index.native";
+import Module8334 from "../../../../../_bundle/Module8334";
+export default function MoreButton(props) {
+  let r17;
+  let channel;
+  L4: {
+    channel = props.channel;
+    const callback = useCallback(() => {
+      if (channel != null && (channel.isDM() || channel.isMultiUserDM())) {
+        openChannelLongPressActionSheet(channel.id);
+      }
+    }, [channel]);
+    const r1 = channel == null;
+    r17 = null;
+    if (!r1) {
+      if (!channel.isDM()) {
+        const isGroupDM = channel.isGroupDM();
+        r17 = null;
+        if (!isGroupDM) {
+          break L4;
+        }
+      }
+      r17 = <PressableNavigatorButtonWrapper>
+        <HeaderIconButton accessibilityLabel={intl.string(t["UKOtz+"])} source={Module8334} onPress={callback} />
+      </PressableNavigatorButtonWrapper>;
+    }
+  }
+  return r17;
+};

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsNavigator.tsx

@@ -0,0 +1,152 @@
+// Metro module 15637 (f15638).
+import * as Module19 from "react";
+import { useCallback, useEffect, useMemo } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../../../stores/ChannelStore";
+import { ChannelDetailsNavigatorScreens } from "./ChannelDetailsConstants";
+import { AnalyticEvents } from "../../../../../Constants";
+import { SearchNavigatorScreens } from "../../../../search/native/components/navigator/SearchNavigatorConstants";
+import { createNativeStackNavigator } from "../../../../../_bundle/Module9109";
+import { useStateFromStores } from "../../../../../_bundle/defaultAreStatesEqual";
+import { useCanStartThread } from "../../../../threads/ThreadHooks";
+import { navigateToThreadCreation } from "../../../../threads/native/navigateToThreadCreation";
+import { HeaderIconButton, renderGenericTitle, renderHeader, getRenderBackImage, getRenderModalCloseImage, getRenderModalBackImage } from "../../shared_components/HeaderShared";
+import { intl, t } from "../../../../../intl/index.native";
+import Module11872 from "../../../../../_bundle/Module11872";
+import AnalyticsUtils from "../../../../../utils/AnalyticsUtils";
+import { useChannelSettingsScreensStyles, getChannelSettingsScreens } from "../../../../../components_native/channel_settings/ChannelSettingsModal";
+import { useAccessibilityNativeStackOptions } from "../../../../../design/components/Navigator/native/Navigator.native";
+import { useNavigatorBackPressHandler } from "../../../../../design/components/Navigator/native/useNavigatorBackPressHandler.native";
+import { getRootNavigationRef } from "../../../RootNavigationRef.native";
+import useSafeAreaInsets_native from "../../../../safe_area/useSafeAreaInsets.native";
+import * as _ChannelDetailsScreen from "./ChannelDetailsScreen";
+import { isAndroid } from "../../../../../utils/PlatformUtils";
+import SearchNavigatorPreviewHeader from "../../../../search/native/components/navigator/SearchNavigatorPreviewHeader";
+import * as _SearchNavigatorPreviewScreen from "../../../../search/native/components/navigator/SearchNavigatorPreviewScreen";
+import * as _PinsScreen from "./screens/PinsScreen";
+import * as _MuteSettingsScreen from "./screens/MuteSettingsScreen";
+import * as _ThreadsScreen from "./screens/ThreadsScreen";
+let c11160_11, nativeStackNavigator, CreateThreadHeaderButton;
+const ConnectedCreateThreadHeaderButton = function ConnectedCreateThreadHeaderButton(props) {
+  const channelId = props.channelId;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  return stateFromStores != null ? <CreateThreadHeaderButton channel={stateFromStores} /> : null;
+};
+CreateThreadHeaderButton = function CreateThreadHeaderButton(props) {
+  const channel = props.channel;
+  const canStartThread = useCanStartThread(channel);
+  const callback = useCallback(() => {
+    navigateToThreadCreation(channel, "Thread Browser Toolbar");
+  }, [channel]);
+  return canStartThread ? <HeaderIconButton accessibilityLabel={intl.string(t.rBIGBL)} onPress={callback} source={Module11872} /> : null;
+};
+c11160_11 = Object.freeze({});
+nativeStackNavigator = createNativeStackNavigator();
+const r45 = Module19.memo(function(a0) {
+  let styles, guildId;
+  const params = a0.route.params;
+  const { channelId: channelId2, applicationId, search, expandTopic, source, initialRouteName = ChannelDetailsNavigatorScreens.DETAILS } = params;
+  const DETAILS = initialRouteName;
+  styles = void 0;
+  guildId = void 0;
+  useEffect(() => {
+    const channel2 = ChannelStore.getChannel(channelId2);
+    if (channel2 != null) {
+      AnalyticsUtils.track(AnalyticEvents.CHANNEL_SIDEBAR_VIEWED, {
+        channel_id: channel2.id,
+        guild_id: channel2.getGuildId(),
+        channel_type: channel2.type,
+        initial_route_name: DETAILS,
+        source
+      });
+    }
+  }, [channelId2, DETAILS, source]);
+  styles = useChannelSettingsScreensStyles();
+  const memo2 = useMemo(() => ({
+    initialParams: {
+      channelId: channelId2
+    }
+  }), [channelId2]);
+  const accessibilityNativeStackOptions = useAccessibilityNativeStackOptions();
+  const channel2 = ChannelStore.getChannel(channelId2);
+  guildId = channel2 == null ? void 0 : channel2.getGuildId();
+  const memo = useMemo(() => guildId != null ? getChannelSettingsScreens(channelId2, guildId, styles) : {}, [channelId2, guildId, styles]);
+  useNavigatorBackPressHandler(() => {
+    const rootNavigationRef = getRootNavigationRef();
+    const r0 = rootNavigationRef == null || !rootNavigationRef.isReady();
+    let r13 = !r0;
+    if (!r0) {
+      let r17 = !!rootNavigationRef.canGoBack();
+      if (r17) {
+        rootNavigationRef.goBack();
+        r17 = true;
+      }
+      r13 = r17;
+    }
+    return r13;
+  });
+  const safeAreaInsets_native = useSafeAreaInsets_native();
+  return <View style={[styles.container, {
+    paddingLeft: safeAreaInsets_native.left,
+    paddingRight: safeAreaInsets_native.right
+  }]}>
+    <nativeStackNavigator.Navigator id="channel-details-navigator" screenOptions={{
+      headerTitle: renderGenericTitle,
+      ...accessibilityNativeStackOptions
+    }} initialRouteName={DETAILS}>
+      <nativeStackNavigator.Screen initialParams={{
+        channelId: channelId2,
+        search,
+        expandTopic
+      }} name={ChannelDetailsNavigatorScreens.DETAILS} options={{
+        headerShown: false
+      }} getComponent={() => _ChannelDetailsScreen.default} />
+      <nativeStackNavigator.Screen name={SearchNavigatorScreens.SEARCH_CHAT_PREVIEW} options={(a0) => {
+        const route = a0.route;
+        return {
+          header: (a0) => renderHeader({
+            ...a0,
+            shouldHandleSafeArea: isAndroid()
+          }),
+          headerTitle: () => <SearchNavigatorPreviewHeader channelId={route.params.channelId} />,
+          headerLeft: getRenderBackImage(a0.navigation)
+        };
+      }} getComponent={() => _SearchNavigatorPreviewScreen.default} />
+      <nativeStackNavigator.Screen name={ChannelDetailsNavigatorScreens.PINNED_MESSAGES} initialParams={{
+        channelId: channelId2
+      }} options={({ navigation, route: route3 }) => ({
+        title: intl.string(t["mp1N/2"]),
+        headerLeft: DETAILS === route3.name ? getRenderModalCloseImage(navigation) : getRenderModalBackImage(navigation)
+      })} getComponent={() => _PinsScreen.default} />
+      <nativeStackNavigator.Screen initialParams={{
+        channelId: channelId2,
+        applicationId
+      }} name={ChannelDetailsNavigatorScreens.MUTE} options={({ navigation, route: route3 }) => ({
+        title: intl.string(t.w4m945),
+        headerLeft: DETAILS === route3.name ? getRenderModalCloseImage(navigation) : getRenderModalBackImage(navigation)
+      })} getComponent={() => _MuteSettingsScreen.default} />
+      <nativeStackNavigator.Screen {...memo2} name={ChannelDetailsNavigatorScreens.THREADS} options={({ navigation, route: route2 }) => ({
+        title: intl.string(t.B2panI),
+        headerLeft: DETAILS === route2.name ? getRenderModalCloseImage(navigation) : getRenderModalBackImage(navigation),
+        headerRight: () => <ConnectedCreateThreadHeaderButton channelId={route2.params.channelId} />
+      })} getComponent={() => _ThreadsScreen.default} />
+      {Object.entries(memo).map((item) => {
+        let [c28115_0, c28115_1] = item;
+        const key = c28115_0;
+        return <nativeStackNavigator.Screen key={key} name={key} options={({ navigation }) => ({
+          title: c28115_1.title,
+          headerLeft: DETAILS === c28115_0 ? getRenderModalCloseImage(navigation) : getRenderModalBackImage(navigation)
+        })}>
+          {({ route: route3, navigation }) => {
+            let params = route3.params;
+            if (params == null) {
+              params = c11160_11;
+            }
+            return c28115_1.render(params, navigation);
+          }}
+        </nativeStackNavigator.Screen>;
+      })}
+    </nativeStackNavigator.Navigator>
+  </View>;
+});
+export default r45;

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsScreen.tsx

@@ -0,0 +1,17 @@
+// Metro module 15686 (f15687).
+import { memo, useCallback } from "react";
+import { useRoute } from "../../../../../_bundle/Module1481";
+import useBaseAppContainerDimensions from "../../../../screen/native/useBaseAppContainerDimensions";
+import ChannelDetails from "./ChannelDetails";
+const r20 = memo(function({ navigation }) {
+  const route = useRoute();
+  const search = route.params.search;
+  const channelId = route.params.channelId;
+  const expandTopic = route.params.expandTopic;
+  const width = useBaseAppContainerDimensions().width;
+  const callback = useCallback(() => {
+    navigation.goBack();
+  }, [navigation]);
+  return <ChannelDetails channelId={channelId} isSearchLocked={search === true} onBackPress={callback} componentWidth={width} onChannelDeleted={callback} expandTopic={expandTopic === true} />;
+});
+export default r20;

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsSearchBar.tsx

@@ -0,0 +1,55 @@
+// Metro module 15462 (f15463).
+import { memo, forwardRef, useEffect, useCallback } from "react";
+import SearchQueryStore from "../../../../search/native/stores/SearchQueryStore";
+import { setIsChannelDetailsSearchActive } from "./stores/ChannelDetailsStore";
+import { CHANNEL_DETAILS_MARGIN } from "./ChannelDetailsConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import { SEARCH_BAR_HEIGHT } from "../../shared_components/SearchButton";
+import { useChannelDetailsSearchContext } from "../../../../search/native/hooks/useSearchContext";
+import Tracking from "../../../../search/native/tracking/Tracking";
+import SearchPlatformActionCreators from "../../../../search/native/SearchPlatformActionCreators";
+import SearchScreenSearchBar from "../../../../search/native/components/layout/SearchScreenSearchBar";
+import { PressableOpacity } from "../../../../../design/void/Pressables/native/Pressables";
+import { intl, t } from "../../../../../intl/index.native";
+import { ChevronLargeLeftIcon } from "../../../../../design/components/Icon/native/redesign/generated/ChevronLargeLeftIcon";
+const useStyles = createStyles({
+  back: {
+    justifyContent: "center",
+    height: SEARCH_BAR_HEIGHT,
+    paddingStart: CHANNEL_DETAILS_MARGIN,
+    paddingEnd: 8
+  }
+});
+const r39 = memo(forwardRef(function({ channelId, guildId, onSuggestionsLayoutMesure, onBackPress, suggestionsDismissed, setSuggestionsDismissed, showBackButton = true }, a1) {
+  let callback, callback2;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const channelDetailsSearchContext = useChannelDetailsSearchContext(channelId, guildId);
+  useEffect(() => () => {
+    Tracking.trackSearchClosed({
+      searchContext: channelDetailsSearchContext
+    });
+  }, [channelId, channelDetailsSearchContext]);
+  callback = useCallback(() => {
+    if (!SearchQueryStore.isInitialSearchQuery(channelDetailsSearchContext)) {
+      SearchPlatformActionCreators.updateSearchQuery(channelDetailsSearchContext, (a0) => a0.reset());
+    }
+  }, [channelDetailsSearchContext]);
+  callback2 = useCallback(() => {
+    callback();
+    setIsChannelDetailsSearchActive(channelId, false, "action");
+  }, [channelId, callback]);
+  const callback3 = useCallback(() => {
+    callback();
+    if (onBackPress !== void 0) {
+      onBackPress();
+    } else {
+      callback2();
+    }
+  }, [onBackPress, callback2, callback]);
+  return <SearchScreenSearchBar ref={a1} searchContext={channelDetailsSearchContext} onSuggestionsLayoutMesure={onSuggestionsLayoutMesure} suggestionsDismissed={suggestionsDismissed} setSuggestionsDismissed={setSuggestionsDismissed} backButton={showBackButton ? <PressableOpacity accessibilityRole="button" onPress={callback3} style={styles.back} accessibilityLabel={intl.string(t["13/7kX"])}>
+    <ChevronLargeLeftIcon size="sm" color="interactive-text-default" />
+  </PressableOpacity> : null} />;
+}));
+export default r39;

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsTopic.tsx

@@ -0,0 +1,216 @@
+// Metro module 15567 (f15568).
+import * as Module19 from "react";
+import { useMemo, useState, useCallback, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import UserStore from "../../../../../stores/UserStore";
+import { CHANNEL_TOPIC_LINE_CLAMP, SPRING_CHANNEL_DETAILS } from "./ChannelDetailsConstants";
+import { VerticalGradient } from "../../../../../Constants";
+import { isAndroid } from "../../../../../utils/PlatformUtils";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import { useToken } from "../../../../../design/tokens/native/useToken";
+import Module712 from "../../../../../_bundle/Module712";
+import Module689 from "../../../../../_bundle/Module689";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../../../design/animation/reanimated/spring/spring";
+import MarkupUtils from "../../../../markup/MarkupUtils";
+import { PressableOpacity } from "../../../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import Module4611 from "../../../../../_bundle/Module4611";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import UserUtils from "../../../../../utils/UserUtils";
+import { getPrivateChannelUserTagsString } from "../../../../../utils/ChannelUtils";
+let mentionPillOffsetY, useStyles, EMPTY_STYLE, c11092_17, __initData, __initData2, __initData3, PrivateChannelDetailsTopic, GroupDMChannelDetailsTopic;
+const GuildChannelDetailsTopic = function GuildChannelDetailsTopic(props) {
+  let state, setState, state2, setState2, sharedValue, sharedValue2, sharedValue3;
+  const { channel, textAlign, initialExpanded = false } = props;
+  let c22198_1 = initialExpanded;
+  state = void 0;
+  setState = void 0;
+  state2 = void 0;
+  setState2 = void 0;
+  sharedValue = void 0;
+  sharedValue2 = void 0;
+  sharedValue3 = void 0;
+  const styles = useStyles();
+  const token = useToken(Module712.colors.BACKGROUND_BASE_LOWER);
+  const memo = useMemo(() => [Module689(token).alpha(0).hex(), token], [token]);
+  [state, setState] = useState(true);
+  [state2, setState2] = useState(initialExpanded);
+  sharedValue = useSharedValue(void 0);
+  sharedValue2 = useSharedValue(void 0);
+  sharedValue3 = useSharedValue(c11092_17.HIDDEN);
+  const _ = function _() {
+    let r18;
+    const r7 = sharedValue2.get();
+    let r9 = sharedValue.get();
+    if (r9 != null && r7 != null) {
+      if (state2) {
+        r9 = r7;
+      }
+      r18 = {
+        height: _spring.withSpring(r9, SPRING_CHANNEL_DETAILS)
+      };
+    } else {
+      r18 = EMPTY_STYLE;
+    }
+    return r18;
+  };
+  let r27 = EMPTY_STYLE;
+  _.__closure = {
+    expandedHeight: sharedValue2,
+    truncatedHeight: sharedValue,
+    EMPTY_STYLE,
+    withSpring: _spring.withSpring,
+    expanded: state2,
+    SPRING_CHANNEL_DETAILS
+  };
+  _.__workletHash = 11932535786068;
+  _.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(_);
+  const f = function f() {
+    return sharedValue2.get() == null ? EMPTY_STYLE : {
+      height: sharedValue2.get()
+    };
+  };
+  f.__closure = {
+    expandedHeight: sharedValue2,
+    EMPTY_STYLE
+  };
+  f.__workletHash = 13643982891313;
+  f.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(f);
+  const L = () => ({
+    opacity: _spring.withSpring(sharedValue3.get(), SPRING_CHANNEL_DETAILS)
+  });
+  L.__closure = {
+    withSpring: _spring.withSpring,
+    gradient: sharedValue3,
+    SPRING_CHANNEL_DETAILS
+  };
+  L.__workletHash = 12423301233362;
+  L.__initData = __initData3;
+  const animatedStyle3 = useAnimatedStyle(L);
+  const callback2 = useCallback((a0) => {
+    const r0 = a0.nativeEvent.lines.length > CHANNEL_TOPIC_LINE_CLAMP;
+    setState(r0);
+    sharedValue3.set(r0 && !state2 ? c11092_17.VISIBLE : c11092_17.HIDDEN);
+  }, [sharedValue3, state2]);
+  const callback3 = useCallback((a0) => sharedValue2.set(a0.nativeEvent.layout.height), [sharedValue2]);
+  const memo2 = useMemo(() => {
+    if (state) {
+      return () => {
+        setState2(!state2);
+        sharedValue3.set(state2 ? c11092_17.VISIBLE : c11092_17.HIDDEN);
+      };
+    }
+  }, [state, state2, sharedValue3]);
+  const callback = useCallback((a0) => {
+    sharedValue.set(a0.nativeEvent.layout.height);
+  }, [sharedValue]);
+  let r24 = useMemo(() => MarkupUtils.parseTopic(`${channel.topic}`.replace(/(\r\n|\n|\r)/gm, " "), true, {
+    channelId: channel.id,
+    shouldNavigateBack: true,
+    mentionPillOffsetY
+  }), [channel.id, channel.topic]);
+  const memo3 = useMemo(() => MarkupUtils.parseTopic(channel.topic, true, {
+    channelId: channel.id,
+    shouldNavigateBack: true,
+    mentionPillOffsetY
+  }), [channel.id, channel.topic]);
+  useEffect(() => {
+    sharedValue.set(void 0);
+    sharedValue2.set(void 0);
+    setState2(c22198_1);
+  }, [channel.id, sharedValue, sharedValue2, initialExpanded]);
+  const Component = memo2 == null ? View : PressableOpacity;
+  const r134 = [<View style={styles.hidden} pointerEvents="none" importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+    <Text variant="heading-sm/normal" style={styles.topicText} onTextLayout={callback2} onLayout={callback3}>{memo3}</Text>
+  </View>, ,];
+  const pointerEvents = state2 ? void 0 : state ? "none" : void 0;
+  const lineClamp = state2 ? void 0 : CHANNEL_TOPIC_LINE_CLAMP;
+  const style = [styles.topicText, , ,];
+  if (!(!state2 && state)) {
+    r27 = styles.expanded;
+  }
+  style[1] = r27;
+  style[2] = {
+    textAlign
+  };
+  if (state2) {
+    r24 = memo3;
+  }
+  r134[1] = <ReanimatedRexport.View style={[styles.topic, animatedStyle]}>
+    <ReanimatedRexport.View style={animatedStyle2}>
+      <Component onPress={memo2} activeOpacity={0.7}>
+        <View pointerEvents={pointerEvents}>
+          <Text color="interactive-text-default" variant="heading-sm/normal" onLayout={callback} lineClamp={lineClamp} style={style}>{r24}</Text>
+        </View>
+      </Component>
+    </ReanimatedRexport.View>
+    <ReanimatedRexport.View style={[StyleSheet.absoluteFill, animatedStyle3]} pointerEvents="none">
+      <Module4611 style={styles.gradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={memo} />
+    </ReanimatedRexport.View>
+  </ReanimatedRexport.View>;
+  return <>{r134}</>;
+};
+PrivateChannelDetailsTopic = function PrivateChannelDetailsTopic(props) {
+  const { channel: channel2, textAlign } = props;
+  const stateFromStores = useStateFromStores([UserStore], () => {
+    const user = UserStore.getUser(channel2.getRecipientId());
+    return user?.isProvisional ? null : UserUtils.getUserTag(user);
+  });
+  return stateFromStores != null ? <Text variant="heading-sm/normal" color="interactive-text-default" style={{
+    textAlign
+  }}>{stateFromStores}</Text> : null;
+};
+GroupDMChannelDetailsTopic = function GroupDMChannelDetailsTopic(props) {
+  const { channel: channel3, textAlign } = props;
+  const stateFromStores = useStateFromStores([UserStore], () => getPrivateChannelUserTagsString(channel3.recipients, UserStore));
+  return stateFromStores != null ? <Text variant="heading-sm/normal" color="interactive-text-default" style={{
+    textAlign
+  }}>{stateFromStores}</Text> : null;
+};
+mentionPillOffsetY = isAndroid() ? 4 : 2;
+useStyles = createStyles({
+  hidden: {
+    flex: 1,
+    flexGrow: 1,
+    position: "absolute",
+    opacity: 0
+  },
+  topic: {
+    overflow: "hidden"
+  },
+  gradient: {
+    flex: 1,
+    flexGrow: 1
+  },
+  expanded: {
+    textAlign: "center"
+  },
+  topicText: {
+    paddingVertical: 5
+  }
+});
+EMPTY_STYLE = {};
+c11092_17 = {
+  HIDDEN: 0,
+  0: "HIDDEN",
+  VISIBLE: 1,
+  1: "VISIBLE"
+};
+__initData = {
+  code: "function ChannelDetailsTopicTsx1(){const{expandedHeight,truncatedHeight,EMPTY_STYLE,withSpring,expanded,SPRING_CHANNEL_DETAILS}=this.__closure;const _expandedHeight=expandedHeight.get();const _truncatedHeight=truncatedHeight.get();if(_truncatedHeight==null||_expandedHeight==null)return EMPTY_STYLE;return{height:withSpring(expanded?_expandedHeight:_truncatedHeight,SPRING_CHANNEL_DETAILS)};}"
+};
+__initData2 = {
+  code: "function ChannelDetailsTopicTsx2(){const{expandedHeight,EMPTY_STYLE}=this.__closure;if(expandedHeight.get()==null)return EMPTY_STYLE;return{height:expandedHeight.get()};}"
+};
+__initData3 = {
+  code: "function ChannelDetailsTopicTsx3(){const{withSpring,gradient,SPRING_CHANNEL_DETAILS}=this.__closure;return{opacity:withSpring(gradient.get(),SPRING_CHANNEL_DETAILS)};}"
+};
+const r65 = Module19.memo(function ChannelDetailsTopic(props) {
+  const { channel: channel4, containerStyle, textAlign = "center", initialExpanded = false } = props;
+  const r7 = channel4.isDM() ? <PrivateChannelDetailsTopic channel={channel4} textAlign={textAlign} /> : channel4.isGroupDM() ? <GroupDMChannelDetailsTopic channel={channel4} textAlign={textAlign} /> : channel4.topic != null && channel4.topic.trim() !== "" ? <GuildChannelDetailsTopic channel={channel4} textAlign={textAlign} initialExpanded={initialExpanded} /> : void 0;
+  return r7 != null ? <View style={containerStyle}>{r7}</View> : null;
+});
+export default r65;

modules/main_tabs_v2/native/sidebar/details/ChannelDetailsUtils.tsx

@@ -0,0 +1,14 @@
+// Metro module 10920 (f10921).
+import { ChannelDetailsButtonTypes } from "./ChannelDetailsConstants";
+import { ChannelTypes } from "../../../../../_bundle/Module692";
+export function getChannelDetailsButtons(a0, r4 = false) {
+  const r14 = a0.type === ChannelTypes.GUILD_DIRECTORY ? [] : [ChannelDetailsButtonTypes.SEARCH, ChannelDetailsButtonTypes.MUTE, ChannelDetailsButtonTypes.SETTINGS];
+  return r4 ? r14.filter((item) => item !== ChannelDetailsButtonTypes.MUTE) : r14;
+}
+export function navigateToChannelDetailsScreen(a0, a1, a2, a3) {
+  a0.navigate("sidebar", {
+    screen: a1,
+    channelId: a2,
+    source: a3
+  });
+}

modules/main_tabs_v2/native/sidebar/details/header_v2/ChannelDetailsNavigationBar.tsx

@@ -0,0 +1,248 @@
+// Metro module 15563 (f15564).
+import * as Module19 from "react";
+import { useCallback, useMemo, forwardRef } from "react";
+import { View } from "react-native";
+import LurkingStore from "../../../../../lurker_mode/LurkingStore";
+import JoinedThreadsStore from "../../../../../threads/JoinedThreadsStore";
+import ChannelStore from "../../../../../../stores/ChannelStore";
+import UserGuildSettingsStore from "../../../../../../stores/UserGuildSettingsStore";
+import { setIsChannelDetailsSearchActive, useIsChannelDetailsSearchActive } from "../stores/ChannelDetailsStore";
+import { ChannelDetailsButtonTypes, ChannelDetailsNavigatorScreens } from "../ChannelDetailsConstants";
+import { ChannelSettingsSections } from "../../../../../../Constants";
+import { SearchEntrypointAnalyticsLocations } from "../../../../../search/native/tracking/TrackingConstants";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import { SEARCH_BAR_HEIGHT } from "../../../shared_components/SearchButton";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useToken } from "../../../../../../design/tokens/native/useToken";
+import { useStateFromStores } from "../../../../../../_bundle/Module589";
+import { useNavigation } from "../../../../../../design/components/Navigator/native/useNavigation.native";
+import { IconButton } from "../../../../../../design/components/Button/native/IconButton.native";
+import { intl, t } from "../../../../../../intl/index.native";
+import Module10228 from "../../../../../../_bundle/Module10228";
+import Module7732 from "../../../../../../_bundle/Module7732";
+import { getChannelDetailsSearchContext } from "../../../../../search/native/hooks/useSearchContext";
+import Tracking from "../../../../../search/native/tracking/Tracking";
+import { useShouldHideChannelContent } from "../../../../../age_gate/AgeGateUtils";
+import Module8295 from "../../../../../../_bundle/Module8295";
+import { openChannelLongPressActionSheet } from "../../../../../channel/native/openChannelLongPressActionSheet";
+import ChannelSettingsActionCreators from "../../../../../../actions/ChannelSettingsActionCreators";
+import Module9012 from "../../../../../../_bundle/Module9012";
+import ChannelDetailsMoreButton from "../ChannelDetailsMoreButton";
+import { TransitionStates, TransitionGroup } from "../../../../../../design/components/TransitionGroup/TransitionGroup";
+import * as _ReanimatedRexport from "../../../../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../../../../design/animation/reanimated/timing/timing";
+import ChannelDetailsSearchBar from "../ChannelDetailsSearchBar";
+import * as _timingPresets from "../../../../../../design/animation/reanimated/timing/timingPresets";
+import { getChannelDetailsButtons } from "../ChannelDetailsUtils";
+import { PressableOpacity } from "../../../../../../design/void/Pressables/native/Pressables";
+import { ArrowLargeLeftIcon } from "../../../../../../design/components/Icon/native/redesign/generated/ArrowLargeLeftIcon";
+let useStyles, c11088_18, SearchButton, SettingsButton, __initData, __initData2, Component, __initData3, __initData4, NavigationHeader, getItemKey;
+const MuteButton = function MuteButton(props) {
+  let navigation;
+  const channelId = props.channelId;
+  navigation = void 0;
+  const stateFromStores2 = useStateFromStores([ChannelStore, JoinedThreadsStore, UserGuildSettingsStore], () => {
+    const channel4 = ChannelStore.getChannel(channelId);
+    return channel4 != null && (channel4.isThread() ? JoinedThreadsStore.isMuted(channel4.id) : UserGuildSettingsStore.isChannelMuted(channel4.getGuildId(), channel4.id));
+  });
+  navigation = useNavigation();
+  const callback = useCallback(() => {
+    navigation.navigate("sidebar", {
+      screen: ChannelDetailsNavigatorScreens.MUTE,
+      channelId,
+      source: "channel-details-navigation-bar"
+    });
+  }, [channelId, navigation]);
+  const token = useToken(Module712.modules.mobile.CHANNEL_DETAILS_NAV_ICON_BUTTON_SIZE);
+  const token2 = useToken(Module712.modules.mobile.CHANNEL_DETAILS_NAV_ICON_BUTTON_VARIANT);
+  return <IconButton key={ChannelDetailsButtonTypes.MUTE} accessibilityLabel={intl.string(t.w4m945)} onPress={callback} variant={token2} size={token} icon={stateFromStores2 ? Module10228 : Module7732} />;
+};
+SearchButton = function SearchButton(props) {
+  const channelId2 = props.channelId;
+  const callback = useCallback(() => {
+    setIsChannelDetailsSearchActive(channelId2, true, "action");
+    const channel4 = ChannelStore.getChannel(channelId2);
+    if (channel4 != null) {
+      Tracking.trackSearchOpened({
+        searchContext: getChannelDetailsSearchContext(channelId2, channel4.getGuildId(), channel4.isThread()),
+        searchLocation: channel4.isPrivate() ? SearchEntrypointAnalyticsLocations.INDIVIDUAL_DM : SearchEntrypointAnalyticsLocations.CHANNEL_DETAILS_HEADER
+      });
+    }
+  }, [channelId2]);
+  const shouldHideChannelContent = useShouldHideChannelContent(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId2)));
+  const token = useToken(Module712.modules.mobile.CHANNEL_DETAILS_NAV_ICON_BUTTON_SIZE);
+  const token2 = useToken(Module712.modules.mobile.CHANNEL_DETAILS_NAV_ICON_BUTTON_VARIANT);
+  return <IconButton key={ChannelDetailsButtonTypes.SEARCH} accessibilityLabel={intl.string(t["5h0QOP"])} onPress={callback} variant={token2} size={token} icon={Module8295} disabled={shouldHideChannelContent} />;
+};
+SettingsButton = function SettingsButton(props) {
+  const channel = props.channel;
+  const navigation2 = useNavigation();
+  const callback = useCallback(() => {
+    L5: {
+      if (channel != null) {
+        if (!channel.isDM() && !channel.isMultiUserDM()) {
+          ChannelSettingsActionCreators.init(channel.id);
+          navigation2.navigate("sidebar", {
+            screen: ChannelSettingsSections.OVERVIEW,
+            channelId: channel.id,
+            source: "channel-details-navigation-bar"
+          });
+          break L5;
+        }
+        openChannelLongPressActionSheet(channel.id);
+      }
+    }
+  }, [channel, navigation2]);
+  const token = useToken(Module712.modules.mobile.CHANNEL_DETAILS_NAV_ICON_BUTTON_SIZE);
+  const token2 = useToken(Module712.modules.mobile.CHANNEL_DETAILS_NAV_ICON_BUTTON_VARIANT);
+  return <IconButton key={ChannelDetailsButtonTypes.SETTINGS} accessibilityLabel={intl.string(t["3D5yo/"])} onPress={callback} accessibilityRole="button" variant={token2} size={token} icon={Module9012} />;
+};
+NavigationHeader = function NavigationHeader(props) {
+  const { channel: channel2, onBackPress: onBackPress2, transitionState, width, cleanUp } = props;
+  const styles = useStyles();
+  const isActive = transitionState < TransitionStates.YEETED;
+  let c22189_3 = isActive;
+  const guild_id = channel2.guild_id;
+  const stateFromStores = useStateFromStores([LurkingStore], () => guild_id != null && LurkingStore.isLurking(guild_id), [guild_id]);
+  const r33 = () => {
+    const pointerEvents = c22189_3 ? "auto" : "none";
+    const r0 = c22189_3 ? 1 : 0;
+    const r22 = function n(a0) {
+      if (a0) {
+        _ReanimatedRexport.runOnJS(cleanUp)();
+      }
+    };
+    r22.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      cleanUp
+    };
+    r22.__workletHash = 17272451769590;
+    r22.__initData = __initData4;
+    return {
+      pointerEvents,
+      opacity: _timing.withTiming(r0, _timingPresets.timingFast, "animate-always", r22),
+      width
+    };
+  };
+  r33.__closure = {
+    isActive,
+    withTiming: _timing.withTiming,
+    timingFast: _timingPresets.timingFast,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    cleanUp,
+    width
+  };
+  r33.__workletHash = 15139742229370;
+  r33.__initData = __initData3;
+  const animatedStyle = useAnimatedStyle(r33);
+  const memo = useMemo(() => getChannelDetailsButtons(channel2, stateFromStores).map((item) => ChannelDetailsButtonTypes.SEARCH === item ? <SearchButton key={item} channelId={channel2.id} /> : ChannelDetailsButtonTypes.MUTE === item ? <MuteButton key={item} channelId={channel2.id} /> : ChannelDetailsButtonTypes.SETTINGS === item ? <SettingsButton key={item} channel={channel2} /> : ChannelDetailsButtonTypes.MORE === item ? <ChannelDetailsMoreButton key={item} channel={channel2} /> : void 0), [channel2, stateFromStores]);
+  return <ReanimatedRexport.View style={[styles.navigationHeader, animatedStyle]}>
+    <PressableOpacity accessibilityLabel={intl.string(t["13/7kX"])} onPress={onBackPress2}>
+      <ArrowLargeLeftIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
+    </PressableOpacity>
+    <View style={styles.buttonsContainer}>{memo}</View>
+  </ReanimatedRexport.View>;
+};
+getItemKey = function getItemKey(a0) {
+  return a0;
+};
+useStyles = createStyles({
+  container: {
+    position: "relative",
+    zIndex: 1,
+    height: SEARCH_BAR_HEIGHT,
+    marginTop: Module712.space.PX_8
+  },
+  navigationHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_4,
+    position: "absolute",
+    height: SEARCH_BAR_HEIGHT
+  },
+  buttonsContainer: {
+    flex: 1,
+    flexDirection: "row",
+    gap: Module712.modules.mobile.CHANNEL_DETAILS_NAV_BUTTONS_GAP,
+    justifyContent: "flex-end"
+  },
+  searchHeader: {
+    position: "absolute"
+  }
+});
+c11088_18 = {
+  BUTTONS: "buttons",
+  SEARCH: "search"
+};
+__initData = {
+  code: "function ChannelDetailsNavigationBarTsx1(){const{isActive,withTiming,Easing,runOnJS,cleanUp,width}=this.__closure;return{pointerEvents:isActive?'auto':'none',opacity:withTiming(isActive?1:0,{duration:200,easing:Easing.bezier(0.25,0.1,0.25,1.0)},'animate-always',function(finished){if(finished)runOnJS(cleanUp)();}),width:width};}"
+};
+__initData2 = {
+  code: "function ChannelDetailsNavigationBarTsx2(finished){const{runOnJS,cleanUp}=this.__closure;if(finished)runOnJS(cleanUp)();}"
+};
+Component = forwardRef(function({ channel: channel4, onSuggestionsLayoutMeasure: onSuggestionsLayoutMeasure2, suggestionsDismissed: suggestionsDismissed2, setSuggestionsDismissed: setSuggestionsDismissed2, transitionState, width: width2, cleanUp: cleanUp2 }, a1) {
+  const styles = useStyles();
+  const isActive = transitionState !== TransitionStates.YEETED;
+  let c22190_2 = isActive;
+  const r26 = () => {
+    const pointerEvents = c22190_2 ? "auto" : "none";
+    const r0 = c22190_2 ? 1 : 0;
+    const r10 = {
+      duration: 200,
+      easing: _ReanimatedRexport.Easing.bezier(0.25, 0.1, 0.25, 1)
+    };
+    const r26 = function n(a0) {
+      if (a0) {
+        _ReanimatedRexport.runOnJS(cleanUp2)();
+      }
+    };
+    r26.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      cleanUp: cleanUp2
+    };
+    r26.__workletHash = 10411737901360;
+    r26.__initData = __initData2;
+    return {
+      pointerEvents,
+      opacity: _timing.withTiming(r0, r10, "animate-always", r26),
+      width: width2
+    };
+  };
+  r26.__closure = {
+    isActive,
+    withTiming: _timing.withTiming,
+    Easing: _ReanimatedRexport.Easing,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    cleanUp: cleanUp2,
+    width: width2
+  };
+  r26.__workletHash = 1270940013897;
+  r26.__initData = __initData;
+  return <ReanimatedRexport.View style={[styles.searchHeader, useAnimatedStyle(r26)]}>
+    <ChannelDetailsSearchBar ref={a1} channelId={channel4.id} guildId={channel4.guild_id} onSuggestionsLayoutMesure={onSuggestionsLayoutMeasure2} suggestionsDismissed={suggestionsDismissed2} setSuggestionsDismissed={setSuggestionsDismissed2} showBackButton />
+  </ReanimatedRexport.View>;
+});
+__initData3 = {
+  code: "function ChannelDetailsNavigationBarTsx3(){const{isActive,withTiming,timingFast,runOnJS,cleanUp,width}=this.__closure;return{pointerEvents:isActive?'auto':'none',opacity:withTiming(isActive?1:0,timingFast,'animate-always',function(finished){if(finished)runOnJS(cleanUp)();}),width:width};}"
+};
+__initData4 = {
+  code: "function ChannelDetailsNavigationBarTsx4(finished){const{runOnJS,cleanUp}=this.__closure;if(finished)runOnJS(cleanUp)();}"
+};
+const r95 = Module19.memo(forwardRef(function({ channel: channel3, onBackPress, componentWidth, onSuggestionsLayoutMeasure, suggestionsDismissed, setSuggestionsDismissed }, a1) {
+  const ref = a1;
+  const styles = useStyles();
+  const isChannelDetailsSearchActive = useIsChannelDetailsSearchActive(channel3.id);
+  return <View style={styles.container}>
+    <TransitionGroup items={useMemo(() => isChannelDetailsSearchActive ? [c11088_18.SEARCH] : [c11088_18.BUTTONS], [isChannelDetailsSearchActive])} getItemKey={getItemKey} renderItem={useCallback((a0, a1, a2, a3) => {
+      if (c11088_18.BUTTONS === a1) {
+        return <NavigationHeader key={a0} channel={channel3} onBackPress={onBackPress} transitionState={a2} width={componentWidth} cleanUp={a3} />;
+      }
+      if (c11088_18.SEARCH === a1) {
+        return <Component key={a0} ref={ref} channel={channel3} onSuggestionsLayoutMeasure={onSuggestionsLayoutMeasure} suggestionsDismissed={suggestionsDismissed} setSuggestionsDismissed={setSuggestionsDismissed} transitionState={a2} width={componentWidth} cleanUp={a3} />;
+      }
+    }, [channel3, onBackPress, componentWidth, a1, onSuggestionsLayoutMeasure, suggestionsDismissed, setSuggestionsDismissed])} />
+  </View>;
+}));
+export default r95;

modules/main_tabs_v2/native/sidebar/details/header_v2/ChannelNameHeader.tsx

@@ -0,0 +1,154 @@
+// Metro module 15565 (f15566).
+import * as Module19 from "react";
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../../../../stores/ChannelStore";
+import GuildStore from "../../../../../../stores/GuildStore";
+import PermissionStore from "../../../../../../stores/PermissionStore";
+import PresenceStore from "../../../../../../stores/PresenceStore";
+import UserStore from "../../../../../../stores/UserStore";
+import { Permissions, StatusTypes } from "../../../../../../Constants";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useStateFromStores, useStateFromStoresObject } from "../../../../../../_bundle/Module589";
+import { Avatar, AvatarSizes } from "../../../../../../design/void/native";
+import useChannelName from "../../../../../channel/useChannelName";
+import { useNavigation } from "../../../../../../design/components/Navigator/native/useNavigation.native";
+import { transitionToChannel } from "../../../../../routing/transitionToChannel";
+import { PressableOpacity } from "../../../../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../../intl/index.native";
+import { getPrivateChannelUserTagsString, channelTypeString } from "../../../../../../utils/ChannelUtils";
+import GroupDMAvatar from "../../../../../group_dm/native/GroupDMAvatar";
+import { getChannelIconComponent } from "../../../../../../utils/native/ChannelUtils";
+import UsernameWithEffects from "../../../../../display_name_styles/native/UsernameWithEffects";
+import useAnalyticsLocations from "../../../../../app_analytics/useAnalyticsLocations";
+import showUserProfileActionSheet from "../../../../../user_profile/native/showUserProfileActionSheet";
+let useStyles, ThreadParentChannelLink, ChannelSubtitle, ChannelNameHeaderContent, DMChannelNameHeader, DefaultChannelNameHeader;
+const DirectMessageIcon = function DirectMessageIcon(props) {
+  const channel = props.channel;
+  const styles2 = useStyles();
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(channel.getRecipientId()));
+  const stateFromStoresObject = useStateFromStoresObject([PresenceStore], () => ({
+    isMobileOnline: stateFromStores != null && PresenceStore.isMobileOnline(stateFromStores.id),
+    isVROnline: stateFromStores != null && PresenceStore.isVROnline(stateFromStores.id),
+    status: stateFromStores != null ? PresenceStore.getStatus(stateFromStores.id) : StatusTypes.UNKNOWN
+  }), [stateFromStores]);
+  const { isMobileOnline, isVROnline, status } = stateFromStoresObject;
+  return stateFromStores == null ? null : <Avatar avatarDecoration={stateFromStores.avatarDecoration} user={stateFromStores} guildId={void 0} size={AvatarSizes.NORMAL} status={(stateFromStores == null ? void 0 : stateFromStores.isSystemUser()) ? null : status} isMobileOnline={isMobileOnline} isVROnline={isVROnline} statusStyle={styles2.statusStyle} />;
+};
+ThreadParentChannelLink = function ThreadParentChannelLink(props) {
+  const channel2 = props.channel;
+  const children = useChannelName(channel2, true);
+  const navigation = useNavigation();
+  return <PressableOpacity onPress={useCallback(() => {
+    navigation.goBack();
+    transitionToChannel(channel2.id, {
+      navigationReplace: true
+    });
+  }, [channel2.id, navigation])}>
+    <Text variant="text-sm/medium" color="mobile-text-heading-primary" lineClamp={1}>
+      {intl.format(t.YbkB3U, {
+        channelName: children,
+        channelNameHook: () => <Text variant="text-sm/medium" color="text-brand" lineClamp={1}>{children}</Text>
+      })}
+    </Text>
+  </PressableOpacity>;
+};
+ChannelSubtitle = function ChannelSubtitle(props) {
+  const channel3 = props.channel;
+  let r16 = useStateFromStores([UserStore], () => channel3.isPrivate() ? getPrivateChannelUserTagsString(channel3.recipients, UserStore) : null, [channel3]);
+  if (!channel3.isPrivate()) {
+    r16 = channelTypeString(channel3);
+  }
+  return r16 == null ? null : r16 !== "" ? <Text variant="text-sm/medium" color="text-muted" lineClamp={1}>{r16}</Text> : null;
+};
+ChannelNameHeaderContent = function ChannelNameHeaderContent(props) {
+  let stateFromStores3, stateFromStores4;
+  const channel4 = props.channel;
+  stateFromStores3 = void 0;
+  stateFromStores4 = void 0;
+  const styles = useStyles();
+  const channelName = useChannelName(channel4);
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => channel4.isThread() ? ChannelStore.getChannel(channel4.parent_id) : null, [channel4]);
+  stateFromStores3 = useStateFromStores([PermissionStore], () => stateFromStores2 != null && PermissionStore.can(Permissions.VIEW_CHANNEL, stateFromStores2), [stateFromStores2]);
+  stateFromStores4 = useStateFromStores([GuildStore], () => GuildStore.getGuild(channel4.guild_id)?.rulesChannelId === channel4.id, [channel4.id, channel4.guild_id]);
+  const memo = useMemo(() => stateFromStores2 != null && stateFromStores3 ? <ThreadParentChannelLink channel={stateFromStores2} /> : <ChannelSubtitle channel={channel4} />, [channel4, stateFromStores2, stateFromStores3]);
+  return <>
+    {useMemo(() => {
+      if (channel4.isDM()) {
+        return <View style={styles.channelIcon}>
+          <DirectMessageIcon channel={channel4} />
+        </View>;
+      }
+      if (channel4.isGroupDM()) {
+        return <View style={styles.channelIcon}>
+          <GroupDMAvatar channel={channel4} size={AvatarSizes.REFRESH_MEDIUM_32} />
+        </View>;
+      }
+      const ChannelIconComponent = getChannelIconComponent(channel4, {
+        isRulesChannel: stateFromStores4
+      });
+      return ChannelIconComponent != null ? <View style={[styles.channelIcon, styles.channelTypeBox]}>
+        <ChannelIconComponent size="md" color="mobile-text-heading-primary" />
+      </View> : null;
+    }, [channel4, stateFromStores4, styles])}
+    <View style={styles.channelData}>
+      {channel4.isDM() ? <UsernameWithEffects userId={channel4.getRecipientId()} guildId={channel4.guild_id} userName={channelName} variant="redesign/heading-18/bold" defaultColor="mobile-text-heading-primary" lineClamp={1} ellipsizeMode="tail" /> : <Text variant="redesign/heading-18/bold" color="mobile-text-heading-primary" lineClamp={1} ellipsizeMode="tail">{channelName}</Text>}
+      {memo}
+    </View>
+  </>;
+};
+DMChannelNameHeader = function DMChannelNameHeader(props) {
+  const { channel: channel5, containerStyle } = props;
+  const styles2 = useStyles();
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  return <PressableOpacity style={[styles2.container, containerStyle]} onPress={useCallback(() => {
+    const recipientId = channel5.getRecipientId();
+    if (recipientId != null) {
+      showUserProfileActionSheet({
+        userId: recipientId,
+        channelId: channel5.id,
+        sourceAnalyticsLocations: analyticsLocations
+      });
+    }
+  }, [channel5, analyticsLocations])}>
+    <ChannelNameHeaderContent channel={channel5} />
+  </PressableOpacity>;
+};
+DefaultChannelNameHeader = function DefaultChannelNameHeader(props) {
+  const { channel: channel6, containerStyle } = props;
+  return <View style={[useStyles().container, containerStyle]}>
+    <ChannelNameHeaderContent channel={channel6} />
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    flexDirection: "row",
+    gap: Module712.space.PX_12,
+    alignItems: "center"
+  },
+  channelIcon: {
+    height: 40,
+    width: 40,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  channelTypeBox: {
+    borderRadius: Module712.modules.mobile.CHANNEL_NAME_CHANNEL_ICON_RADIUS,
+    borderWidth: Module712.modules.mobile.CHANNEL_NAME_CHANNEL_BORDER_WIDTH,
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
+  },
+  channelData: {
+    flex: 1
+  },
+  statusStyle: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  }
+});
+const r81 = Module19.memo(function ChannelNameHeader(props) {
+  const { channel: channel6, containerStyle } = props;
+  return channel6.isDM() ? <DMChannelNameHeader channel={channel6} containerStyle={containerStyle} /> : <DefaultChannelNameHeader channel={channel6} containerStyle={containerStyle} />;
+});
+export default r81;

modules/main_tabs_v2/native/sidebar/details/screens/MuteSettingsActionSheet.tsx

@@ -0,0 +1,94 @@
+// Metro module 10305 (f10306).
+import { useMemo, useCallback } from "react";
+import ChannelStore from "../../../../../../stores/ChannelStore";
+import GuildStore from "../../../../../../stores/GuildStore";
+import RelationshipStore from "../../../../../../stores/RelationshipStore";
+import UserStore from "../../../../../../stores/UserStore";
+import { UserNotificationSettings } from "../../../../../../Constants";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../../intl/index.native";
+import { getMuteSettings, handleMuteSettingPress, handleUnmutePress, getMuteSettingLabel, getMuteSettingSublabel, getMuteOptions } from "./MuteSettingsUtils";
+import ActionSheetActionCreators from "../../../../../action_sheet/native/ActionSheetActionCreators";
+import { TableRowGroup } from "../../../../../../design/components/TableRow/native/TableRowGroup.native";
+import { TableRow } from "../../../../../../design/components/TableRow/native/TableRow.native";
+import { Icon } from "../../../../../../design/void/native";
+import Module10308 from "../../../../../../_bundle/Module10308";
+import { computeChannelName } from "../../../../../channel/useChannelName";
+import MutedUntilText, { MuteSettingType } from "./MutedUntilText";
+import { ActionSheet } from "../../../../../../design/components/Sheet/native/ActionSheet.native";
+import { BottomSheetTitleHeader } from "../../../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+export default function MuteSettings(props) {
+  let callback;
+  const { guildId, channelId, onOptionPress } = props;
+  callback = void 0;
+  const guild = GuildStore.getGuild(guildId);
+  const channel = ChannelStore.getChannel(channelId);
+  const memo = useMemo(() => getMuteSettings(channelId), [channelId]);
+  const { muteConfig, muted } = memo;
+  callback = useCallback((a0) => {
+    ActionSheetActionCreators.hideActionSheet();
+    handleMuteSettingPress({
+      channelId,
+      guildId,
+      muteDurationSeconds: a0,
+      onOptionPress
+    });
+  }, [channelId, guildId, onOptionPress]);
+  const callback2 = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+    handleUnmutePress(channelId, guildId);
+  }, [channelId, guildId]);
+  const memo2 = useMemo(() => getMuteSettingLabel(channel, guild), [channel, guild]);
+  const memo3 = useMemo(() => getMuteSettingSublabel(channel, guild), [channel, guild]);
+  return <ActionSheet>
+    <BottomSheetTitleHeader title={memo2} subtitle={memo3} />
+    {channel != null && muted ? <>
+      {[<TableRowGroup hasIcons>
+        <TableRow icon={<Icon disableColor source={Module10308} />} label={intl.format(t["eC+9rj"], {
+          name: computeChannelName(channel, UserStore, RelationshipStore, true)
+        })} onPress={callback2} />
+      </TableRowGroup>, <MutedUntilText muteConfig={muteConfig} type={channel.isPrivate() ? MuteSettingType.DM : MuteSettingType.CHANNEL} />]}
+    </> : <TableRowGroup hasIcons={false}>
+      {getMuteOptions().map(({ label, duration }) => <TableRow key={label} label={label} onPress={() => callback(duration)} />)}
+    </TableRowGroup>}
+  </ActionSheet>;
+};
+export function MuteSettingsHint(props) {
+  let r14;
+  L15: {
+    const { isMuted, isGuildMuted, guildMessageNotifications } = props;
+    if (isMuted) {
+      r14 = <Text variant="text-sm/medium" color="text-default">
+        {intl.string(t.t0mEt2)}
+      </Text>;
+    } else if (isGuildMuted) {
+      r14 = <Text variant="text-sm/medium" color="text-default">
+        {intl.format(t.O34r15, {
+          mutedHook: (a0, a1) => <Text key={a1} variant="text-sm/medium" color="text-feedback-critical">
+            {a0}
+          </Text>
+        })}
+      </Text>;
+    } else if (guildMessageNotifications === UserNotificationSettings.NO_MESSAGES) {
+      r14 = <Text variant="text-sm/medium" color="text-default">
+        {intl.format(t.nRwUIL, {
+          notificationHook: (a0, a1) => <Text key={a1} variant="text-sm/medium" color="text-feedback-warning">
+            {a0}
+          </Text>
+        })}
+      </Text>;
+    } else {
+      if (guildMessageNotifications !== UserNotificationSettings.ALL_MESSAGES) {
+        const ONLY_MENTIONS = UserNotificationSettings.ONLY_MENTIONS;
+        r14 = null;
+        if (guildMessageNotifications !== ONLY_MENTIONS) {
+          break L15;
+        }
+      }
+      r14 = <Text variant="text-sm/medium" color="text-default">
+        {guildMessageNotifications === UserNotificationSettings.ALL_MESSAGES ? intl.string(t.mUbulW) : intl.string(t.GGAdHV)}
+      </Text>;
+    }
+  }
+  return r14;
+}

modules/main_tabs_v2/native/sidebar/details/screens/MuteSettingsScreen.tsx

@@ -0,0 +1,165 @@
+// Metro module 15690 (f15691).
+import * as Module19 from "react";
+import { useCallback, useMemo, useLayoutEffect } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../../../../stores/ChannelStore";
+import GuildStore from "../../../../../../stores/GuildStore";
+import RelationshipStore from "../../../../../../stores/RelationshipStore";
+import UserStore from "../../../../../../stores/UserStore";
+import { ChannelSettingsSections } from "../../../../../../Constants";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import ThreadActionCreators from "../../../../../threads/ThreadActionCreators";
+import NotificationSettingsModalActionCreators from "../../../../../../actions/NotificationSettingsModalActionCreators";
+import { NotificationLabel } from "../../../../../../utils/NotificationSettingsUtils";
+import { handleUnmutePress, getMuteOptions, handleMuteSettingPress, getMessageNotificationsText, getMuteSettingLabel, getMuteSettingSublabel, getMuteSettings } from "./MuteSettingsUtils";
+import { TableRow } from "../../../../../../design/components/TableRow/native/TableRow.native";
+import { Icon } from "../../../../../../design/void/native";
+import Module10308 from "../../../../../../_bundle/Module10308";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../../intl/index.native";
+import { computeChannelName } from "../../../../../channel/useChannelName";
+import MutedUntilText, { MuteSettingType } from "./MutedUntilText";
+import { useNavigation } from "../../../../../../design/components/Navigator/native/useNavigation.native";
+import { showThreadNotificationsBottomSheet } from "../../../../../threads/native/threadActionSheets";
+import { MuteSettingsHint } from "./MuteSettingsActionSheet";
+import { useRoute } from "../../../../../../_bundle/Module1481";
+import { useStateFromStores } from "../../../../../../_bundle/defaultAreStatesEqual";
+import { GenericHeaderTitle } from "../../../shared_components/HeaderShared";
+import useSafeAreaInsets_native from "../../../../../safe_area/useSafeAreaInsets.native";
+let useStyles, MuteOptions, NotificationSettingsButton;
+const UnmuteOptions = function UnmuteOptions(props) {
+  const { channel, muteConfig, navigation } = props;
+  const styles = useStyles();
+  const callback2 = useCallback(() => {
+    navigation.goBack();
+    handleUnmutePress(channel.id, channel.guild_id);
+  }, [channel.guild_id, channel.id, navigation]);
+  return <View style={styles.options}>
+    <TableRow icon={<Icon disableColor source={Module10308} />} label={<Text variant="text-md/semibold" color="mobile-text-heading-primary">
+      {intl.format(t["eC+9rj"], {
+        name: computeChannelName(channel, UserStore, RelationshipStore, true)
+      })}
+    </Text>} onPress={callback2} start end />
+    <MutedUntilText muteConfig={muteConfig} type={channel.isPrivate() ? MuteSettingType.DM : MuteSettingType.CHANNEL} />
+  </View>;
+};
+MuteOptions = function MuteOptions(props) {
+  let callback;
+  const { channel: channel2, applicationId, navigation: navigation2 } = props;
+  callback = void 0;
+  const styles = useStyles();
+  const memo = useMemo(() => getMuteOptions(), []);
+  callback = useCallback((a0) => {
+    navigation2.goBack();
+    handleMuteSettingPress({
+      channelId: channel2.id,
+      guildId: channel2.guild_id,
+      onOptionPress: (a0) => {
+        const muted = a0.muted;
+        let mute_config = a0.mute_config;
+        if (mute_config === void 0) {
+          mute_config = null;
+        }
+        if (muted !== void 0) {
+          if (channel2.isThread()) {
+            if (mute_config == null) {
+              mute_config = null;
+            }
+            ThreadActionCreators.setNotificationSettings(channel2, {
+              muted,
+              mute_config
+            });
+          } else if (applicationId != null) {
+            NotificationSettingsModalActionCreators.updateAppDMOverrideSettings(channel2.getGuildId(), channel2.id, applicationId, {
+              muted,
+              mute_config: mute_config == null ? null : mute_config
+            }, NotificationLabel.muted(muted));
+          } else {
+            NotificationSettingsModalActionCreators.updateChannelOverrideSettings(channel2.getGuildId(), channel2.id, {
+              muted,
+              mute_config: mute_config == null ? null : mute_config
+            }, NotificationLabel.muted(muted));
+          }
+        }
+      },
+      muteDurationSeconds: a0
+    });
+  }, [channel2, navigation2, applicationId]);
+  return <View style={styles.options}>
+    {memo.map(({ label, duration }, index) => <TableRow key={label} label={label} onPress={() => callback(duration)} start={index === 0} end={index === memo.length - 1} />)}
+  </View>;
+};
+NotificationSettingsButton = function NotificationSettingsButton(props) {
+  const { channel: channel3, isMuted, isGuildMuted, messageNotifications, guildMessageNotifications } = props;
+  const styles = useStyles();
+  const navigation3 = useNavigation();
+  const callback2 = useCallback(() => {
+    if (channel3.isThread()) {
+      showThreadNotificationsBottomSheet(channel3);
+    } else {
+      navigation3.navigate(ChannelSettingsSections.NOTIFICATIONS);
+    }
+  }, [channel3, navigation3]);
+  const memo4 = useMemo(() => getMessageNotificationsText(messageNotifications), [messageNotifications]);
+  return <>
+    <TableRow label={intl.string(t.h850Ss)} onPress={callback2} trailing={<View style={styles.trailing}>
+      <Text variant="text-md/medium" color="text-muted">{memo4}</Text>
+      <TableRow.Arrow />
+    </View>} disabled={isMuted || isGuildMuted} start end />
+    <View style={styles.hint}>
+      <MuteSettingsHint isMuted={isMuted} isGuildMuted={isGuildMuted} guildMessageNotifications={guildMessageNotifications} />
+    </View>
+  </>;
+};
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    padding: 16
+  },
+  options: {
+    marginBottom: 16
+  },
+  trailing: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  hint: {
+    marginTop: 8,
+    paddingHorizontal: 12
+  }
+});
+const r52 = Module19.memo(function() {
+  let stateFromStores2, memo2, memo3;
+  const styles = useStyles();
+  const navigation4 = useNavigation();
+  const route = useRoute();
+  const channelId = route.params.channelId;
+  const applicationId2 = route.params.applicationId;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(stateFromStores?.guild_id));
+  memo2 = useMemo(() => getMuteSettingLabel(stateFromStores, stateFromStores2), [stateFromStores, stateFromStores2]);
+  memo3 = useMemo(() => getMuteSettingSublabel(stateFromStores, stateFromStores2), [stateFromStores, stateFromStores2]);
+  useLayoutEffect(() => {
+    navigation4.setOptions({
+      title: `${memo2} (${memo3})`,
+      headerTitle: () => <GenericHeaderTitle title={memo2} subtitle={memo3} />,
+      headerTitleAlign: "center"
+    });
+  });
+  const memo4 = useMemo(() => getMuteSettings(channelId), [channelId]);
+  const { muteConfig, messageNotifications: messageNotifications2, guildMessageNotifications, muted, guildMuted } = memo4;
+  const bottom = useSafeAreaInsets_native().bottom;
+  let r61 = null;
+  if (stateFromStores != null) {
+    const r75 = [muted ? <UnmuteOptions channel={stateFromStores} applicationId={applicationId2} muteConfig={muteConfig} navigation={navigation4} /> : <MuteOptions channel={stateFromStores} applicationId={applicationId2} navigation={navigation4} />, ,];
+    const isPrivate = stateFromStores.isPrivate();
+    r75[1] = isPrivate ? !isPrivate : <NotificationSettingsButton isMuted={muted} isGuildMuted={guildMuted} channel={stateFromStores} messageNotifications={messageNotifications2} guildMessageNotifications={guildMessageNotifications} />;
+    r61 = <View style={[styles.container, {
+      paddingBottom: bottom
+    }]}>{r75}</View>;
+  }
+  return r61;
+});
+export default r52;

modules/main_tabs_v2/native/sidebar/details/screens/MuteSettingsUtils.tsx

@@ -0,0 +1,117 @@
+// Metro module 10306 (f10307).
+import JoinedThreadsStore from "../../../../../threads/JoinedThreadsStore";
+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 { ChannelTypes, UserNotificationSettings } from "../../../../../../Constants";
+import { MuteUntilSeconds } from "../../../../../user_settings/UserSettingsConstants";
+import { intl, t } from "../../../../../../intl/index.native";
+import { computeChannelName } from "../../../../../channel/useChannelName";
+import ThreadActionCreators from "../../../../../threads/ThreadActionCreators";
+import NotificationSettingsModalActionCreators from "../../../../../../actions/NotificationSettingsModalActionCreators";
+import { NotificationLabels } from "../../../../../../utils/NotificationSettingsUtils";
+import * as _ChannelMuteUtils from "../../../../../channel/ChannelMuteUtils";
+export function getMuteSettingLabel(a0, a1) {
+  return a0 != null ? a0.isPrivate() ? intl.string(t["Z/uD9+"]) : a0.type === ChannelTypes.GUILD_CATEGORY ? intl.string(t.Z33kYz) : a0.isForumPost() ? intl.string(t.lbN8mz) : a0.isThread() ? intl.string(t["wR+Fuo"]) : intl.string(t.OsNx14) : a1 != null ? intl.string(t.mvxGko) : void 0;
+}
+export function getMuteSettingSublabel(a0, a1) {
+  return a0 != null ? computeChannelName(a0, UserStore, RelationshipStore, true) : a1 != null ? a1.name : void 0;
+}
+export function handleUnmutePress(a0, a1) {
+  const channel = ChannelStore.getChannel(a0);
+  if (channel != null) {
+    if (channel.isThread()) {
+      ThreadActionCreators.setNotificationSettings(channel, {
+        muted: false
+      });
+    } else {
+      NotificationSettingsModalActionCreators.updateChannelOverrideSettings(a1, channel.id, {
+        muted: false,
+        mute_config: null
+      }, NotificationLabels.Unmuted);
+    }
+  }
+}
+export function handleMuteSettingPress({ channelId, guildId, muteDurationSeconds, onOptionPress }) {
+  const muteSettings = _ChannelMuteUtils.getMuteSettings(muteDurationSeconds);
+  const channel = ChannelStore.getChannel(channelId);
+  const guild = GuildStore.getGuild(guildId);
+  if (onOptionPress != null) {
+    onOptionPress(muteSettings);
+  } else if (channel != null) {
+    if (channel.isThread()) {
+      ThreadActionCreators.setNotificationSettings(channel, muteSettings);
+    } else {
+      NotificationSettingsModalActionCreators.updateChannelOverrideSettings(guildId, channel.id, muteSettings, NotificationLabels.Muted);
+    }
+  } else if (guild != null) {
+    NotificationSettingsModalActionCreators.updateGuildNotificationSettings(guild.id, muteSettings, NotificationLabels.Muted);
+  }
+}
+export function getMuteSettings(a0) {
+  let r23, r25;
+  const channel = ChannelStore.getChannel(a0);
+  const r16 = channel != null;
+  let guildMessageNotifications = void 0;
+  let guildMuted = void 0;
+  let messageNotifications = void 0;
+  let muted = void 0;
+  let muteConfig = void 0;
+  if (r16) {
+    const guildId = channel.getGuildId();
+    if (channel.isThread()) {
+      r23 = JoinedThreadsStore.getMuteConfig(channel.id);
+      r25 = JoinedThreadsStore.isMuted(channel.id);
+    } else {
+      r23 = UserGuildSettingsStore.getChannelMuteConfig(guildId, channel.id);
+      r25 = UserGuildSettingsStore.isChannelMuted(guildId, channel.id);
+    }
+    messageNotifications = UserGuildSettingsStore.getChannelMessageNotifications(guildId, channel.id);
+    guildMuted = UserGuildSettingsStore.isMuted(guildId);
+    guildMessageNotifications = UserGuildSettingsStore.getMessageNotifications(guildId);
+    muted = r25;
+    muteConfig = r23;
+  }
+  return {
+    muteConfig,
+    muted,
+    messageNotifications,
+    guildMuted,
+    guildMessageNotifications
+  };
+}
+export function getMessageNotificationsText(a0) {
+  if (UserNotificationSettings.ALL_MESSAGES === a0) {
+    return intl.string(t.DZi15z);
+  }
+  if (UserNotificationSettings.ONLY_MENTIONS === a0) {
+    return intl.string(t.xGICju);
+  }
+  if (UserNotificationSettings.NO_MESSAGES === a0) {
+    return intl.string(t.CtVGyQ);
+  }
+  return null;
+}
+export function getMuteOptions() {
+  return [{
+    label: intl.string(t["8ot6gv"]),
+    duration: MuteUntilSeconds.MINUTES_15
+  }, {
+    label: intl.string(t.UMWBZr),
+    duration: MuteUntilSeconds.HOURS_1
+  }, {
+    label: intl.string(t.QmYWtu),
+    duration: MuteUntilSeconds.HOURS_3
+  }, {
+    label: intl.string(t.EpAXPC),
+    duration: MuteUntilSeconds.HOURS_8
+  }, {
+    label: intl.string(t["755t4q"]),
+    duration: MuteUntilSeconds.HOURS_24
+  }, {
+    label: intl.string(t.r3LawO),
+    duration: MuteUntilSeconds.ALWAYS
+  }];
+}

modules/main_tabs_v2/native/sidebar/details/screens/MutedUntilText.tsx

@@ -0,0 +1,68 @@
+// Metro module 10309 (f10310).
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import { t, intl } from "../../../../../../intl/index.native";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+let c6889_3 = {
+  SERVER: 0,
+  0: "SERVER",
+  CHANNEL: 1,
+  1: "CHANNEL",
+  DM: 2,
+  2: "DM",
+  CATEGORY: 3,
+  3: "CATEGORY"
+};
+const useStyles = createStyles({
+  formHintText: {
+    lineHeight: 18,
+    marginBottom: 8,
+    marginTop: 8,
+    paddingHorizontal: 16
+  }
+});
+export default function MutedUntilText(props) {
+  let r31, MQfdK9;
+  const { muteConfig, type } = props;
+  const styles = useStyles();
+  if (muteConfig != null && muteConfig.end_time != null) {
+    if (c6889_3.SERVER === type) {
+      MQfdK9 = t.MQfdK9;
+    } else if (c6889_3.CHANNEL === type) {
+      MQfdK9 = t["N/kd49"];
+    } else if (c6889_3.DM === type) {
+      MQfdK9 = t.c4aY0P;
+    } else {
+      if (c6889_3.CATEGORY !== type) {
+        return null;
+      }
+      MQfdK9 = t.N2NXMd;
+    }
+    return <Text style={styles.formHintText} variant="text-sm/medium" color="text-muted">
+      {intl.format(MQfdK9, {
+        endTime: new Date(muteConfig.end_time).toLocaleString(intl.currentLocale, {
+          month: "numeric",
+          day: "numeric",
+          hour: "numeric",
+          minute: "2-digit"
+        }),
+        endTimeHook: (a0) => <Text key="muted" variant="text-sm/medium" color="control-brand-foreground">
+          {a0}
+        </Text>
+      })}
+    </Text>;
+  }
+  if (c6889_3.SERVER === type) {
+    r31 = intl.string(t["/b/DU7"]);
+  } else if (c6889_3.CHANNEL === type) {
+    r31 = intl.string(t.utURT8);
+  } else if (c6889_3.DM === type) {
+    r31 = intl.string(t.jxF9er);
+  } else {
+    if (c6889_3.CATEGORY !== type) {
+      return null;
+    }
+    r31 = intl.string(t["6+wqqt"]);
+  }
+  return <Text style={styles.formHintText} variant="text-sm/medium" color="text-muted">{r31}</Text>;
+};
+export { c6889_3 as MuteSettingType };

modules/main_tabs_v2/native/sidebar/details/screens/PinsScreen.tsx

@@ -0,0 +1,25 @@
+// Metro module 15689 (f15690).
+import { memo } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../../../../stores/ChannelStore";
+import { SearchTabs } from "../../../../../search/SearchConstants";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useRoute } from "../../../../../../_bundle/Module1483";
+import { useStateFromStores } from "../../../../../../_bundle/Module589";
+import { useChannelDetailsSearchContext } from "../../../../../search/native/hooks/useSearchContext";
+import PinsScreen from "../../../../../search/native/components/tabs/pages/messages/PinsScreen";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  }
+});
+const r38 = memo(function() {
+  const channelId = useRoute().params.channelId;
+  const channelDetailsSearchContext = useChannelDetailsSearchContext(channelId, useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId)?.guild_id));
+  return <View style={useStyles().container}>
+    <PinsScreen searchContext={channelDetailsSearchContext} isFocused tab={SearchTabs.PINS} />
+  </View>;
+});
+export default r38;

modules/main_tabs_v2/native/sidebar/details/screens/ThreadsScreen.tsx

@@ -0,0 +1,61 @@
+// Metro module 15538 (f15539).
+import { useCallback, memo } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../../../../stores/ChannelStore";
+import { SearchTypes } from "../../../../../../Constants";
+import { OpenThreadAnalyticsLocations } from "../../../../../threads/ThreadConstants";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useCanStartThread } from "../../../../../threads/ThreadHooks";
+import useSafeAreaInsetsKeyboardAware_native from "../../../../../safe_area/useSafeAreaInsetsKeyboardAware.native";
+import { navigateToThreadCreation } from "../../../../../threads/native/navigateToThreadCreation";
+import { transitionToThread } from "../../../../../routing/transitionToChannel";
+import ThreadList from "../../../../../threads/native/components/redesign/ThreadList";
+import { useStateFromStores } from "../../../../../../_bundle/defaultAreStatesEqual";
+import { useRoute } from "../../../../../../_bundle/Module1481";
+let useStyles;
+const ThreadsScreen = function ThreadsScreen(props) {
+  const { style, channel } = props;
+  const styles = useStyles();
+  const canStartThread = useCanStartThread(channel);
+  const insets = useSafeAreaInsetsKeyboardAware_native({
+    includeKeyboardHeight: true
+  }).insets;
+  const callback = useCallback(() => {
+    navigateToThreadCreation(channel, "Thread Browser Empty State");
+  }, [channel]);
+  return <View style={[styles.container, style]}>
+    <ThreadList channel={channel} onCreateThreadPress={canStartThread ? callback : void 0} onThreadPress={useCallback((a0) => {
+      const channel2 = ChannelStore.getChannel(a0);
+      if (channel2 != null) {
+        transitionToThread(channel2, {
+          source: OpenThreadAnalyticsLocations.BROWSER
+        });
+      }
+    }, [])} contentContainerStyle={{
+      paddingBottom: insets.bottom + Module712.space.PX_16,
+      paddingHorizontal: 16
+    }} />
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    flex: 1
+  },
+  screen: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  }
+});
+const r43 = memo(function({ searchContext }) {
+  const channelId = searchContext.type !== SearchTypes.CHANNEL ? searchContext.type === SearchTypes.GUILD_CHANNEL ? searchContext.channelId : null : searchContext.channelId;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  return stateFromStores != null ? <ThreadsScreen channel={stateFromStores} /> : null;
+});
+const r46 = memo(function() {
+  const channelId2 = useRoute().params.channelId;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId2));
+  const styles = useStyles();
+  return stateFromStores != null ? <ThreadsScreen style={styles.screen} channel={stateFromStores} /> : null;
+});
+export default r46;
+export { r43 as SearchTabsThreadScreen };

modules/main_tabs_v2/native/sidebar/details/stores/ChannelDetailsStore.tsx

@@ -0,0 +1,86 @@
+// Metro module 9128 (f9129).
+import { create } from "../../../../../../_bundle/Module644";
+import { batchUpdates } from "../../../../../../_bundle/Module705";
+function $mk81921($env) {
+  return (a0) => {
+    const r1 = $env;
+    let r8 = a0.states.get(r1[0]);
+    if (r8 == null) {
+      r8 = {
+        ...$env.$parent[2]
+      };
+    }
+    return (0, r1[1])(r8);
+  };
+}
+let env5985 = {};
+const c5985_2 = {
+  isSearchActive: false,
+  searchActiveSource: "initial"
+};
+const c5985_3 = create(() => ({
+  states: new Map()
+}));
+export { c5985_3 as useChannelDetailsStore };
+export function deleteChannelStates() {
+  batchUpdates(() => c5985_3.setState({
+    states: new Map()
+  }));
+}
+export function useIsChannelDetailsSearchActive(a0) {
+  let env16982;
+  const r1 = env16982 = {
+    $parent: env5985
+  };
+  env16982[0] = a0;
+  env16982[1] = (a0) => a0.isSearchActive;
+  return c5985_3($mk81921(r1));
+}
+export function useChannelDetailsSearchActiveSource(a0) {
+  let env16983;
+  const r1 = env16983 = {
+    $parent: env5985
+  };
+  env16983[0] = a0;
+  env16983[1] = (a0) => a0.searchActiveSource;
+  return c5985_3($mk81921(r1));
+}
+export function setIsChannelDetailsSearchActive(a0, a1, a2) {
+  const r3 = {
+    isSearchActive: a1,
+    searchActiveSource: a2
+  };
+  const states3 = c5985_3.getState().states;
+  let r15 = states3.get(a0);
+  if (r15 == null) {
+    r15 = {
+      ...c5985_2
+    };
+  }
+  const r18 = {
+    ...r15,
+    ...r3
+  };
+  const states = new Map(states3);
+  states.set(a0, r18);
+  batchUpdates(() => c5985_3.setState({
+    states
+  }));
+}
+export function getIsChannelDetailsSearchActive(a0) {
+  let r10 = c5985_3.getState().states.get(a0);
+  if (r10 == null) {
+    r10 = {
+      ...c5985_2
+    };
+  }
+  return r10.isSearchActive;
+}
+export function deleteChannelDetailsSearchState(a0) {
+  const states3 = c5985_3.getState().states;
+  states3.delete(a0);
+  const states2 = new Map(states3);
+  batchUpdates(() => c5985_3.setState({
+    states: states2
+  }));
+}

modules/main_tabs_v2/native/sidebar/member_list/SwipeToMemberListUtils.tsx

@@ -0,0 +1,9 @@
+// Metro module 10118 (f10119).
+import { useSwipeToReplySettingValue, getSwipeToReplySettingValue } from "../../../../user_settings/defs/native/ChatGestureSettings";
+import { SwipeRightToLeftMode } from "../../../../../_bundle/Module1306";
+export function useIsSwipeToMemberListEnabled() {
+  return useSwipeToReplySettingValue() === SwipeRightToLeftMode.SWIPE_RIGHT_TO_LEFT_CHANNEL_DETAILS;
+}
+export function isSwipeToMemberListEnabled() {
+  return getSwipeToReplySettingValue() === SwipeRightToLeftMode.SWIPE_RIGHT_TO_LEFT_CHANNEL_DETAILS;
+}