More conventional pattern

src/components/FeedInterstitials.tsx

@@ -26,6 +26,7 @@ import {
   web,
 } from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
 import * as FeedCard from '#/components/FeedCard'
 import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
@@ -33,7 +34,7 @@ import {InlineLinkText} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
-import {useFollowDialogControl} from './ProgressGuide/FollowDialog'
+import {FollowDialogWithoutGuide} from './ProgressGuide/FollowDialog'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 165
@@ -251,7 +252,7 @@ export function ProfileGrid({
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const {gtMobile} = useBreakpoints()
-  const followDialog = useFollowDialogControl()
+  const followDialogControl = useDialogControl()
 
   const isLoading = isSuggestionsLoading || !moderationOpts
   const isProfileHeaderContext = viewContext === 'profileHeader'
@@ -393,7 +394,7 @@ export function ProfileGrid({
           <Button
             label={_(msg`See more suggested profiles`)}
             onPress={() => {
-              followDialog.control.open()
+              followDialogControl.open()
               logEvent('suggestedUser:seeMore', {
                 logContext: isFeedContext ? 'Explore' : 'Profile',
               })
@@ -416,7 +417,7 @@ export function ProfileGrid({
         )}
       </View>
 
-      <followDialog.Dialog />
+      <FollowDialogWithoutGuide control={followDialogControl} />
 
       {gtMobile ? (
         <View style={[a.p_lg, a.pt_md]}>
@@ -437,7 +438,7 @@ export function ProfileGrid({
             {!isProfileHeaderContext && (
               <SeeMoreSuggestedProfilesCard
                 onPress={() => {
-                  followDialog.control.open()
+                  followDialogControl.open()
                   logger.metric('suggestedUser:seeMore', {
                     logContext: 'Explore',
                   })

src/components/ProgressGuide/FollowDialog.tsx

@@ -84,19 +84,21 @@ export function FollowDialog({guide}: {guide?: Follow10ProgressGuide}) {
   )
 }
 
-export function useFollowDialogControl() {
+/**
-  const control = Dialog.useDialogControl()
+ * Same as {@link FollowDialog} but without a progress guide.
+ */
+export function FollowDialogWithoutGuide({
+  control,
+}: {
+  control: Dialog.DialogOuterProps['control']
+}) {
   const {height: minHeight} = useWindowDimensions()
-
+  return (
-  return {
+    <Dialog.Outer control={control} nativeOptions={{minHeight}}>
-    control,
+      <Dialog.Handle />
-    Dialog: ({guide}: {guide?: Follow10ProgressGuide}) => (
+      <DialogInner />
-      <Dialog.Outer control={control} nativeOptions={{minHeight}}>
+    </Dialog.Outer>
-        <Dialog.Handle />
+  )
-        <DialogInner guide={guide} />
-      </Dialog.Outer>
-    ),
-  }
 }
 
 // Fine to keep this top-level.