fix(newsletter): profile subscriber row layout and first-class Email digest action

src/components/newsletterSenderInfo/index.ts

@@ -1 +1,2 @@
 export { default as NewsletterSenderInfo } from './newsletterSenderInfo';
+export { NEWSLETTER_SENDER_INFO_HEIGHT } from './newsletterSenderInfo';

src/components/newsletterSenderInfo/newsletterSenderInfo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 import { useIntl } from 'react-intl';
 import { useNavigation } from '@react-navigation/native';
@@ -11,8 +11,18 @@ import { useAppDispatch, useAuth } from '../../hooks';
 import { toastNotification } from '../../redux/actions/uiAction';
 import { IconButton } from '../iconButton';
 
+/**
+ * Fixed row height, exported so ProfileSummaryView can report it through the
+ * summary card's moreHeight channel: the CollapsibleCard measures its content
+ * ONCE, so anything that appears after a query resolves must announce the
+ * space it takes or it gets clipped (vision-mobile#3522).
+ */
+export const NEWSLETTER_SENDER_INFO_HEIGHT = 28;
+
 interface Props {
   username: string;
+  /** Reports whether the row occupies space; stable identity expected. */
+  onVisibilityChange?: (visible: boolean) => void;
 }
 
 /**
@@ -22,7 +32,7 @@ interface Props {
  * view is gated to the list owner server-side, so this mounts only on the
  * own profile and stays silent while the lookup is unresolved or refused.
  */
-const NewsletterSenderInfo = ({ username }: Props) => {
+const NewsletterSenderInfo = ({ username, onVisibilityChange }: Props) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const navigation = useNavigation();
@@ -33,6 +43,15 @@ const NewsletterSenderInfo = ({ username }: Props) => {
   );
 
   const subscribers = senderQuery.data?.subscribers;
+  const visible = !!subscribers;
+
+  useEffect(() => {
+    onVisibilityChange?.(visible);
+    return () => {
+      onVisibilityChange?.(false);
+    };
+  }, [visible, onVisibilityChange]);
+
   if (!subscribers) {
     return null;
   }
@@ -44,7 +63,7 @@ const NewsletterSenderInfo = ({ username }: Props) => {
 
   return (
     <View style={styles.row}>
-      <Text style={styles.countText}>
+      <Text style={styles.countText} numberOfLines={1}>
         {intl.formatMessage(
           { id: 'newsletter.subscriber_count' },
           { weekly: subscribers.weekly ?? 0, monthly: subscribers.monthly ?? 0 },
@@ -66,13 +85,14 @@ const NewsletterSenderInfo = ({ username }: Props) => {
 
 const styles = EStyleSheet.create({
   row: {
+    height: NEWSLETTER_SENDER_INFO_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     paddingHorizontal: 16,
-    paddingTop: 6,
   },
   countText: {
+    flexShrink: 1,
     fontSize: 13,
     color: '$primaryDarkGray',
   },

src/components/profileSummary/view/profileSummaryView.tsx

@@ -24,7 +24,7 @@ import { makeCountFriendly } from '../../../utils/formatter';
 import styles from './profileSummaryStyles';
 import getWindowDimensions from '../../../utils/getWindowDimensions';
 import { SheetNames } from '../../../navigation/sheets';
-import { NewsletterSenderInfo } from '../../newsletterSenderInfo';
+import { NEWSLETTER_SENDER_INFO_HEIGHT, NewsletterSenderInfo } from '../../newsletterSenderInfo';
 
 const DEVICE_WIDTH = getWindowDimensions().width;
 
@@ -33,9 +33,30 @@ class ProfileSummaryView extends PureComponent<any, any> {
     super(props);
     this.state = {
       isShowPercentText: props.isShowPercentText,
+      senderInfoVisible: false,
     };
   }
 
+  // The summary card's moreHeight channel is single-valued, so every consumer
+  // of extra height reports through this ONE combiner: the VP/RC bars toggle
+  // and the subscriber row would otherwise overwrite each other's height and
+  // the card would clip whichever reported first (vision-mobile#3522).
+  _reportMoreHeight = () => {
+    const { handleUIChange } = this.props;
+    const { isShowPercentText, senderInfoVisible } = this.state;
+    if (handleUIChange) {
+      handleUIChange(
+        (isShowPercentText ? 30 : 0) + (senderInfoVisible ? NEWSLETTER_SENDER_INFO_HEIGHT : 0),
+      );
+    }
+  };
+
+  _handleSenderInfoVisibility = (visible: boolean) => {
+    if (this.state.senderInfoVisible !== visible) {
+      this.setState({ senderInfoVisible: visible }, this._reportMoreHeight);
+    }
+  };
+
   _handleOnPressLink = (url: any) => {
     if (url) {
       Linking.openURL(url);
@@ -277,7 +298,7 @@ class ProfileSummaryView extends PureComponent<any, any> {
 
   _renderBars = () => {
     const { isShowPercentText } = this.state;
-    const { handleUIChange, hoursRC, hoursVP, isDarkTheme, percentRC, percentVP } = this.props;
+    const { hoursRC, hoursVP, isDarkTheme, percentRC, percentVP } = this.props;
 
     const votingPowerHoursText = hoursVP && `• Full in ${hoursVP} hours`;
     const votingPowerText = `Voting power: ${percentVP}% ${votingPowerHoursText || ''}`;
@@ -288,9 +309,7 @@ class ProfileSummaryView extends PureComponent<any, any> {
       <TouchableOpacity
         style={styles.barsContainer}
         onPress={() =>
-          this.setState({ isShowPercentText: !isShowPercentText }, () => {
-            handleUIChange(!isShowPercentText ? 30 : 0);
-          })
+          this.setState({ isShowPercentText: !isShowPercentText }, this._reportMoreHeight)
         }
       >
         <PercentBar
@@ -323,7 +342,12 @@ class ProfileSummaryView extends PureComponent<any, any> {
         {this._renderIdentity()}
         {this._renderMetadata()}
         {this._renderFollowerStats()}
-        {!!isOwnProfile && !!username && <NewsletterSenderInfo username={username} />}
+        {!!isOwnProfile && !!username && (
+          <NewsletterSenderInfo
+            username={username}
+            onVisibilityChange={this._handleSenderInfoVisibility}
+          />
+        )}
         {this._renderBars()}
       </Fragment>
     );