feat: buttons to open external mastodon post + open in pdsls

source:
https://github.com/m-doescode/antlers-social/commit/f45a34d4932bdc25ec6eb014e61d1fdfb1acf226

src/components/PostControls/ShareMenu/ShareMenuItems.tsx

···
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
+import {useOpenLink} from '#/lib/hooks/useOpenLink'
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'
 import {shareText, shareUrl} from '#/lib/sharing'
···
 import {isIOS} from '#/platform/detection'
 import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useShowExternalShareButtons} from '#/state/preferences/external-share-buttons'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
···
 import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlaneIcon} from '#/components/icons/PaperPlane'
+import {SquareArrowTopRight_Stroke2_Corner0_Rounded as ExternalIcon} from '#/components/icons/SquareArrowTopRight'
 import * as Menu from '#/components/Menu'
 import {useDevMode} from '#/storage/hooks/dev-mode'
 import {RecentChats} from './RecentChats'
···
   const sendViaChatControl = useDialogControl()
   const [devModeEnabled] = useDevMode()
   const {isAgeRestricted} = useAgeAssurance()
+  const openLink = useOpenLink()
 
   const postUri = post.uri
   const postAuthor = useProfileShadow(post.author)
···
     shareText(postAuthor.did)
   }
 
+  const showExternalShareButtons = useShowExternalShareButtons()
+  const isBridgyPost = !!post.record.bridgyOriginalUrl
+  const bridgyOriginalUrl = post.record.bridgyOriginalUrl as string | undefined
+
+  const onOpenOriginalPost = () => {
+    bridgyOriginalUrl && openLink(bridgyOriginalUrl, true)
+  }
+
+  const onOpenPostInPdsls = () => {
+    openLink(`https://pdsls.dev/${post.uri}`, true)
+  }
+
   return (
     <>
       <Menu.Outer>
···
                 <Trans>Send via direct message</Trans>
               </Menu.ItemText>
               <Menu.ItemIcon icon={PaperPlaneIcon} position="right" />
+            </Menu.Item>
+          </Menu.Group>
+        )}
+
+        {showExternalShareButtons && (
+          <Menu.Group>
+            {isBridgyPost && (
+              <Menu.Item
+                testID="postDropdownOpenOriginalPost"
+                label={_(msg`Open original post`)}
+                onPress={onOpenOriginalPost}>
+                <Menu.ItemText>
+                  <Trans>Open original post</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={ExternalIcon} position="right" />
+              </Menu.Item>
+            )}
+
+            <Menu.Item
+              testID="postDropdownOpenInPdsls"
+              label={_(msg`Open post in pdsls`)}
+              onPress={onOpenPostInPdsls}>
+              <Menu.ItemText>
+                <Trans>Open post in pdsls</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={ExternalIcon} position="right" />
             </Menu.Item>
           </Menu.Group>
         )}

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

···
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
+import {useOpenLink} from '#/lib/hooks/useOpenLink'
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'
 import {shareText, shareUrl} from '#/lib/sharing'
···
 import {isWeb} from '#/platform/detection'
 import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useShowExternalShareButtons} from '#/state/preferences/external-share-buttons'
 import {useSession} from '#/state/session'
 import {useBreakpoints} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
···
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBracketsIcon} from '#/components/icons/CodeBrackets'
 import {PaperPlane_Stroke2_Corner0_Rounded as Send} from '#/components/icons/PaperPlane'
+import {SquareArrowTopRight_Stroke2_Corner0_Rounded as ExternalIcon} from '#/components/icons/SquareArrowTopRight'
 import * as Menu from '#/components/Menu'
 import {useDevMode} from '#/storage/hooks/dev-mode'
 import {type ShareMenuItemsProps} from './ShareMenuItems.types'
···
   const sendViaChatControl = useDialogControl()
   const [devModeEnabled] = useDevMode()
   const {isAgeRestricted} = useAgeAssurance()
+  const openLink = useOpenLink()
 
   const postUri = post.uri
   const postCid = post.cid
···
     shareText(postAuthor.did)
   }
 
+  const showExternalShareButtons = useShowExternalShareButtons()
+  const isBridgyPost = !!record.bridgyOriginalUrl
+  const bridgyOriginalUrl = record.bridgyOriginalUrl as string | undefined
+
+  const onOpenOriginalPost = () => {
+    bridgyOriginalUrl && openLink(bridgyOriginalUrl, true)
+  }
+
+  const onOpenPostInPdsls = () => {
+    openLink(`https://pdsls.dev/${post.uri}`, true)
+  }
+
   const copyLinkItem = (
     <Menu.Item
       testID="postDropdownShareBtn"
···
     <>
       <Menu.Outer>
         {!hideInPWI && copyLinkItem}
+
+        {showExternalShareButtons && isBridgyPost && (
+          <Menu.Item
+            testID="postDropdownOpenOriginalPost"
+            label={_(msg`Open original post`)}
+            onPress={onOpenOriginalPost}>
+            <Menu.ItemText>
+              <Trans>Open original post</Trans>
+            </Menu.ItemText>
+            <Menu.ItemIcon icon={ExternalIcon} position="right" />
+          </Menu.Item>
+        )}
+
+        {showExternalShareButtons && (
+          <Menu.Item
+            testID="postDropdownOpenInPdsls"
+            label={_(msg`Open post in pdsls`)}
+            onPress={onOpenPostInPdsls}>
+            <Menu.ItemText>
+              <Trans>Open post in pdsls</Trans>
+            </Menu.ItemText>
+            <Menu.ItemIcon icon={ExternalIcon} position="right" />
+          </Menu.Item>
+        )}
 
         {hasSession && !isAgeRestricted && (
           <Menu.Item

src/screens/Settings/ExperimentalSettings.tsx

···
   useDirectFetchRecords,
   useSetDirectFetchRecords,
 } from '#/state/preferences/direct-fetch-records'
+import {
+  useSetShowExternalShareButtons,
+  useShowExternalShareButtons,
+} from '#/state/preferences/external-share-buttons'
 import * as SettingsList from '#/screens/Settings/components/SettingsList'
 import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import * as Toggle from '#/components/forms/Toggle'
 import {Atom_Stroke2_Corner0_Rounded as ExperimentalIcon} from '#/components/icons/Atom'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
 import {Eye_Stroke2_Corner0_Rounded as VisibilityIcon} from '#/components/icons/Eye'
 import {PaintRoller_Stroke2_Corner2_Rounded as PaintRollerIcon} from '#/components/icons/PaintRoller'
 import * as Layout from '#/components/Layout'
···
 
   const directFetchRecords = useDirectFetchRecords()
   const setDirectFetchRecords = useSetDirectFetchRecords()
+
+  const showExternalShareButtons = useShowExternalShareButtons()
+  const setShowExternalShareButtons = useSetShowExternalShareButtons()
 
   const [gates, setGatesView] = useState(Object.fromEntries(useGatesCache()))
   const dangerousSetGate = useDangerousSetGate()
···
               <Toggle.LabelText style={[a.flex_1]}>
                 <Trans>
                   TODO: Fall back to constellation api to find blocked replies
+                </Trans>
+              </Toggle.LabelText>
+              <Toggle.Platform />
+            </Toggle.Item>
+          </SettingsList.Group>
+
+          <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+            <SettingsList.ItemIcon icon={ChainLinkIcon} />
+            <SettingsList.ItemText>
+              <Trans>Bridging and Fediverse</Trans>
+            </SettingsList.ItemText>
+            <Toggle.Item
+              name="external_share_buttons"
+              label={_(
+                msg`Show "Open original post" and "Open post in pdsls" buttons`,
+              )}
+              value={showExternalShareButtons}
+              onChange={value => setShowExternalShareButtons(value)}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>
+                  Show "Open original post" and "Open post in pdsls" buttons
                 </Trans>
               </Toggle.LabelText>
               <Toggle.Platform />

src/state/persisted/schema.ts

···
   directFetchRecords: z.boolean().optional(),
   unfollowConfirm: z.boolean().optional(),
 
+  showExternalShareButtons: z.boolean().optional(),
+
   /** @deprecated */
   mutedThreads: z.array(z.string()),
   trendingDisabled: z.boolean().optional(),
···
   constellationEnabled: false,
   directFetchRecords: false,
   unfollowConfirm: false,
+  showExternalShareButtons: false,
 }
 
 export function tryParse(rawData: string): Schema | undefined {

src/state/preferences/external-share-buttons.tsx

···
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['showExternalShareButtons']
+type SetContext = (v: persisted.Schema['showExternalShareButtons']) => void
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.showExternalShareButtons,
+)
+const setContext = React.createContext<SetContext>(
+  (_: persisted.Schema['showExternalShareButtons']) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(
+    persisted.get('showExternalShareButtons'),
+  )
+
+  const setStateWrapped = React.useCallback(
+    (
+      showExternalShareButtons: persisted.Schema['showExternalShareButtons'],
+    ) => {
+      setState(showExternalShareButtons)
+      persisted.write('showExternalShareButtons', showExternalShareButtons)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(
+      'showExternalShareButtons',
+      nextShowExternalShareButtons => {
+        setState(nextShowExternalShareButtons)
+      },
+    )
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useShowExternalShareButtons() {
+  return React.useContext(stateContext)
+}
+
+export function useSetShowExternalShareButtons() {
+  return React.useContext(setContext)
+}

src/state/preferences/index.tsx

···
 import {Provider as DirectFetchRecordsProvider} from './direct-fetch-records'
 import {Provider as DisableHapticsProvider} from './disable-haptics'
 import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs'
+import {Provider as ExternalShareButtonsProvider} from './external-share-buttons'
 import {Provider as GoLinksProvider} from './go-links-enabled'
 import {Provider as HiddenPostsProvider} from './hidden-posts'
 import {Provider as InAppBrowserProvider} from './in-app-browser'
···
   return (
     <LanguagesProvider>
       <AltTextRequiredProvider>
-        <GoLinksProvider>
-          <DirectFetchRecordsProvider>
-            <ConstellationProvider>
-              <LargeAltBadgeProvider>
-                <ExternalEmbedsProvider>
-                  <HiddenPostsProvider>
-                    <InAppBrowserProvider>
-                      <DisableHapticsProvider>
-                        <AutoplayProvider>
-                          <UsedStarterPacksProvider>
-                            <SubtitlesProvider>
-                              <TrendingSettingsProvider>
-                                <KawaiiProvider>{children}</KawaiiProvider>
-                              </TrendingSettingsProvider>
-                            </SubtitlesProvider>
-                          </UsedStarterPacksProvider>
-                        </AutoplayProvider>
-                      </DisableHapticsProvider>
-                    </InAppBrowserProvider>
-                  </HiddenPostsProvider>
-                </ExternalEmbedsProvider>
-              </LargeAltBadgeProvider>
-            </ConstellationProvider>
-          </DirectFetchRecordsProvider>
-        </GoLinksProvider>
+        <ExternalShareButtonsProvider>
+          <GoLinksProvider>
+            <DirectFetchRecordsProvider>
+              <ConstellationProvider>
+                <LargeAltBadgeProvider>
+                  <ExternalEmbedsProvider>
+                    <HiddenPostsProvider>
+                      <InAppBrowserProvider>
+                        <DisableHapticsProvider>
+                          <AutoplayProvider>
+                            <UsedStarterPacksProvider>
+                              <SubtitlesProvider>
+                                <TrendingSettingsProvider>
+                                  <KawaiiProvider>{children}</KawaiiProvider>
+                                </TrendingSettingsProvider>
+                              </SubtitlesProvider>
+                            </UsedStarterPacksProvider>
+                          </AutoplayProvider>
+                        </DisableHapticsProvider>
+                      </InAppBrowserProvider>
+                    </HiddenPostsProvider>
+                  </ExternalEmbedsProvider>
+                </LargeAltBadgeProvider>
+              </ConstellationProvider>
+            </DirectFetchRecordsProvider>
+          </GoLinksProvider>
+        </ExternalShareButtonsProvider>
       </AltTextRequiredProvider>
     </LanguagesProvider>
   )