Replace "Note about sharing" prompt with an inline hint (#8452)

* add pwi warning to share menu, remove prompt

* add pwi label to web, remove prompt

* add an option to the PWI menu

* conditionally reorder items on web

src/components/Menu/index.tsx

@@ -1,5 +1,11 @@
-import React from 'react'
+import {cloneElement, Fragment, isValidElement, useMemo} from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {
+  Pressable,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -16,12 +22,12 @@ import {
   useMenuItemContext,
 } from '#/components/Menu/context'
 import {
-  ContextType,
+  type ContextType,
-  GroupProps,
+  type GroupProps,
-  ItemIconProps,
+  type ItemIconProps,
-  ItemProps,
+  type ItemProps,
-  ItemTextProps,
+  type ItemTextProps,
-  TriggerProps,
+  type TriggerProps,
 } from '#/components/Menu/types'
 import {Text} from '#/components/Typography'
 
@@ -39,7 +45,7 @@ export function Root({
   control?: Dialog.DialogControlProps
 }>) {
   const defaultControl = Dialog.useDialogControl()
-  const context = React.useMemo<ContextType>(
+  const context = useMemo<ContextType>(
     () => ({
       control: control || defaultControl,
     }),
@@ -276,16 +282,21 @@ export function ContainerItem({
   )
 }
 
-export function LabelText({children}: {children: React.ReactNode}) {
+export function LabelText({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<TextStyle>
+}) {
   const t = useTheme()
   return (
     <Text
       style={[
         a.font_bold,
         t.atoms.text_contrast_medium,
-        {
+        {marginBottom: -8},
-          marginBottom: -8,
+        style,
-        },
       ]}>
       {children}
     </Text>
@@ -304,20 +315,20 @@ export function Group({children, style}: GroupProps) {
         style,
       ]}>
       {flattenReactChildren(children).map((child, i) => {
-        return React.isValidElement(child) &&
+        return isValidElement(child) &&
           (child.type === Item || child.type === ContainerItem) ? (
-          <React.Fragment key={i}>
+          <Fragment key={i}>
             {i > 0 ? (
               <View style={[a.border_b, t.atoms.border_contrast_low]} />
             ) : null}
-            {React.cloneElement(child, {
+            {cloneElement(child, {
               // @ts-expect-error cloneElement is not aware of the types
               style: {
                 borderRadius: 0,
                 borderWidth: 0,
               },
             })}
-          </React.Fragment>
+          </Fragment>
         ) : null
       })}
     </View>

src/components/Menu/index.web.tsx

@@ -1,5 +1,11 @@
-import React from 'react'
+import {forwardRef, useCallback, useId, useMemo, useState} from 'react'
-import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
+import {
+  Pressable,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {DropdownMenu} from 'radix-ui'
@@ -29,10 +35,10 @@ import {Text} from '#/components/Typography'
 export {useMenuContext}
 
 export function useMenuControl(): Dialog.DialogControlProps {
-  const id = React.useId()
+  const id = useId()
-  const [isOpen, setIsOpen] = React.useState(false)
+  const [isOpen, setIsOpen] = useState(false)
 
-  return React.useMemo(
+  return useMemo(
     () => ({
       id,
       ref: {current: null},
@@ -56,13 +62,13 @@ export function Root({
 }>) {
   const {_} = useLingui()
   const defaultControl = useMenuControl()
-  const context = React.useMemo<ContextType>(
+  const context = useMemo<ContextType>(
     () => ({
       control: control || defaultControl,
     }),
     [control, defaultControl],
   )
-  const onOpenChange = React.useCallback(
+  const onOpenChange = useCallback(
     (open: boolean) => {
       if (context.control.isOpen && !open) {
         context.control.close()
@@ -96,7 +102,7 @@ export function Root({
   )
 }
 
-const RadixTriggerPassThrough = React.forwardRef(
+const RadixTriggerPassThrough = forwardRef(
   (
     props: {
       children: (
@@ -355,18 +361,23 @@ export function ItemRadio({selected}: {selected: boolean}) {
   )
 }
 
-export function LabelText({children}: {children: React.ReactNode}) {
+export function LabelText({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<TextStyle>
+}) {
   const t = useTheme()
   return (
     <Text
       style={[
         a.font_bold,
-        a.pt_md,
+        a.p_sm,
-        a.pb_sm,
         t.atoms.text_contrast_low,
-        {
+        a.leading_snug,
-          paddingHorizontal: 10,
+        {paddingHorizontal: 10},
-        },
+        style,
       ]}>
       {children}
     </Text>

src/components/PostControls/PostMenu/PostMenuItems.tsx

@@ -48,7 +48,7 @@ import {
   useProfileMuteMutationQueue,
 } from '#/state/queries/profile'
 import {useToggleReplyVisibilityMutation} from '#/state/queries/threadgate'
-import {useSession} from '#/state/session'
+import {useRequireAuth, useSession} from '#/state/session'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 import * as Toast from '#/view/com/util/Toast'
 import {useDialogControl} from '#/components/Dialog'
@@ -113,6 +113,7 @@ let PostMenuItems = ({
   const {mutateAsync: deletePostMutate} = usePostDeleteMutation()
   const {mutateAsync: pinPostMutate, isPending: isPinPending} =
     usePinnedPostMutation()
+  const requireSignIn = useRequireAuth()
   const hiddenPosts = useHiddenPosts()
   const {hidePost} = useHiddenPostsApi()
   const feedFeedback = useFeedFeedbackContext()
@@ -397,6 +398,8 @@ let PostMenuItems = ({
     openLink(url)
   }
 
+  const onSignIn = () => requireSignIn(() => {})
+
   const gate = useGate()
   const isDiscoverDebugUser =
     IS_INTERNAL ||
@@ -434,7 +437,7 @@ let PostMenuItems = ({
         )}
 
         <Menu.Group>
-          {(!hideInPWI || hasSession) && (
+          {!hideInPWI || hasSession ? (
             <>
               <Menu.Item
                 testID="postDropdownTranslateBtn"
@@ -452,6 +455,14 @@ let PostMenuItems = ({
                 <Menu.ItemIcon icon={ClipboardIcon} position="right" />
               </Menu.Item>
             </>
+          ) : (
+            <Menu.Item
+              testID="postDropdownSignInBtn"
+              label={_(msg`Sign in to view post`)}
+              onPress={onSignIn}>
+              <Menu.ItemText>{_(msg`Sign in to view post`)}</Menu.ItemText>
+              <Menu.ItemIcon icon={Eye} position="right" />
+            </Menu.Item>
           )}
         </Menu.Group>
 

src/components/PostControls/ShareMenu/ShareMenuItems.tsx

@@ -14,6 +14,8 @@ import {isIOS} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
+import {atoms as a} from '#/alf'
+import {Admonition} from '#/components/Admonition'
 import {useDialogControl} from '#/components/Dialog'
 import {SendViaChatDialog} from '#/components/dms/dialogs/ShareViaChatDialog'
 import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ArrowOutOfBoxIcon} from '#/components/icons/ArrowOutOfBox'
@@ -21,7 +23,6 @@ import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/i
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlaneIcon} from '#/components/icons/PaperPlane'
 import * as Menu from '#/components/Menu'
-import * as Prompt from '#/components/Prompt'
 import {useDevMode} from '#/storage/hooks/dev-mode'
 import {RecentChats} from './RecentChats'
 import {type ShareMenuItemsProps} from './ShareMenuItems.types'
@@ -30,11 +31,9 @@ let ShareMenuItems = ({
   post,
   onShare: onShareProp,
 }: ShareMenuItemsProps): React.ReactNode => {
-  const {hasSession, currentAccount} = useSession()
+  const {hasSession} = useSession()
   const {_} = useLingui()
   const navigation = useNavigation<NavigationProp>()
-  const pwiWarningShareControl = useDialogControl()
-  const pwiWarningCopyControl = useDialogControl()
   const sendViaChatControl = useDialogControl()
   const [devModeEnabled] = useDevMode()
 
@@ -52,9 +51,6 @@ let ShareMenuItems = ({
     )
   }, [postAuthor])
 
-  const showLoggedOutWarning =
-    postAuthor.did !== currentAccount?.did && hideInPWI
-
   const onSharePost = () => {
     logger.metric('share:press:nativeShare', {}, {statsig: true})
     const url = toShareUrl(href)
@@ -117,13 +113,7 @@ let ShareMenuItems = ({
           <Menu.Item
             testID="postDropdownShareBtn"
             label={_(msg`Share via...`)}
-            onPress={() => {
+            onPress={onSharePost}>
-              if (showLoggedOutWarning) {
-                pwiWarningShareControl.open()
-              } else {
-                onSharePost()
-              }
-            }}>
             <Menu.ItemText>
               <Trans>Share via...</Trans>
             </Menu.ItemText>
@@ -133,13 +123,7 @@ let ShareMenuItems = ({
           <Menu.Item
             testID="postDropdownShareBtn"
             label={_(msg`Copy link to post`)}
-            onPress={() => {
+            onPress={onCopyLink}>
-              if (showLoggedOutWarning) {
-                pwiWarningCopyControl.open()
-              } else {
-                onCopyLink()
-              }
-            }}>
             <Menu.ItemText>
               <Trans>Copy link to post</Trans>
             </Menu.ItemText>
@@ -147,6 +131,16 @@ let ShareMenuItems = ({
           </Menu.Item>
         </Menu.Group>
 
+        {hideInPWI && (
+          <Menu.Group>
+            <Menu.ContainerItem>
+              <Admonition type="warning" style={[a.flex_1, a.border_0, a.p_0]}>
+                <Trans>This post is only visible to logged-in users.</Trans>
+              </Admonition>
+            </Menu.ContainerItem>
+          </Menu.Group>
+        )}
+
         {devModeEnabled && (
           <Menu.Group>
             <Menu.Item
@@ -171,26 +165,6 @@ let ShareMenuItems = ({
         )}
       </Menu.Outer>
 
-      <Prompt.Basic
-        control={pwiWarningShareControl}
-        title={_(msg`Note about sharing`)}
-        description={_(
-          msg`This post is only visible to logged-in users. It won't be visible to people who aren't signed in.`,
-        )}
-        onConfirm={onSharePost}
-        confirmButtonCta={_(msg`Share anyway`)}
-      />
-
-      <Prompt.Basic
-        control={pwiWarningCopyControl}
-        title={_(msg`Note about sharing`)}
-        description={_(
-          msg`This post is only visible to logged-in users. It won't be visible to people who aren't signed in.`,
-        )}
-        onConfirm={onCopyLink}
-        confirmButtonCta={_(msg`Copy anyway`)}
-      />
-
       <SendViaChatDialog
         control={sendViaChatControl}
         onSelectChat={onSelectChatToShareTo}

src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx

@@ -22,7 +22,6 @@ import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/i
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBracketsIcon} from '#/components/icons/CodeBrackets'
 import {PaperPlane_Stroke2_Corner0_Rounded as Send} from '#/components/icons/PaperPlane'
 import * as Menu from '#/components/Menu'
-import * as Prompt from '#/components/Prompt'
 import {useDevMode} from '#/storage/hooks/dev-mode'
 import {type ShareMenuItemsProps} from './ShareMenuItems.types'
 
@@ -32,11 +31,10 @@ let ShareMenuItems = ({
   timestamp,
   onShare: onShareProp,
 }: ShareMenuItemsProps): React.ReactNode => {
-  const {hasSession, currentAccount} = useSession()
+  const {hasSession} = useSession()
   const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const navigation = useNavigation<NavigationProp>()
-  const loggedOutWarningPromptControl = useDialogControl()
   const embedPostControl = useDialogControl()
   const sendViaChatControl = useDialogControl()
   const [devModeEnabled] = useDevMode()
@@ -56,9 +54,6 @@ let ShareMenuItems = ({
     )
   }, [postAuthor])
 
-  const showLoggedOutWarning =
-    postAuthor.did !== currentAccount?.did && hideInPWI
-
   const onCopyLink = () => {
     logger.metric('share:press:copyLink', {}, {statsig: true})
     const url = toShareUrl(href)
@@ -84,25 +79,22 @@ let ShareMenuItems = ({
     shareText(postAuthor.did)
   }
 
-  return (
+  const copyLinkItem = (
-    <>
-      <Menu.Outer>
-        <Menu.Group>
     <Menu.Item
       testID="postDropdownShareBtn"
       label={_(msg`Copy link to post`)}
-            onPress={() => {
+      onPress={onCopyLink}>
-              if (showLoggedOutWarning) {
-                loggedOutWarningPromptControl.open()
-              } else {
-                onCopyLink()
-              }
-            }}>
       <Menu.ItemText>
         <Trans>Copy link to post</Trans>
       </Menu.ItemText>
       <Menu.ItemIcon icon={ChainLinkIcon} position="right" />
     </Menu.Item>
+  )
+
+  return (
+    <>
+      <Menu.Outer>
+        {!hideInPWI && copyLinkItem}
 
         {hasSession && (
           <Menu.Item
@@ -131,12 +123,20 @@ let ShareMenuItems = ({
             <Menu.ItemIcon icon={CodeBracketsIcon} position="right" />
           </Menu.Item>
         )}
-        </Menu.Group>
+
+        {hideInPWI && (
+          <>
+            {hasSession && <Menu.Divider />}
+            {copyLinkItem}
+            <Menu.LabelText style={{maxWidth: 220}}>
+              <Trans>Note: This post is only visible to logged-in users.</Trans>
+            </Menu.LabelText>
+          </>
+        )}
 
         {devModeEnabled && (
           <>
             <Menu.Divider />
-            <Menu.Group>
             <Menu.Item
               testID="postAtUriShareBtn"
               label={_(msg`Copy post at:// URI`)}
@@ -155,21 +155,10 @@ let ShareMenuItems = ({
               </Menu.ItemText>
               <Menu.ItemIcon icon={ClipboardIcon} position="right" />
             </Menu.Item>
-            </Menu.Group>
           </>
         )}
       </Menu.Outer>
 
-      <Prompt.Basic
-        control={loggedOutWarningPromptControl}
-        title={_(msg`Note about sharing`)}
-        description={_(
-          msg`This post is only visible to logged-in users. It won't be visible to people who aren't signed in.`,
-        )}
-        onConfirm={onCopyLink}
-        confirmButtonCta={_(msg`Share anyway`)}
-      />
-
       {canEmbed && (
         <EmbedDialog
           control={embedPostControl}