Fix perf issue on web - restore pop behaviour to tabs (#8620)

src/components/Link.tsx

@@ -192,7 +192,7 @@ export function useLink({
               navigation.dispatch(StackActions.replace(screen, params))
             } else if (action === 'navigate') {
               // @ts-expect-error not typed
-              navigation.navigate(screen, params)
+              navigation.navigate(screen, params, {pop: true})
             } else {
               throw Error('Unsupported navigator action.')
             }

src/components/StarterPack/StarterPackCard.tsx

@@ -156,7 +156,6 @@ export function Link({
 
   return (
     <BaseLink
-      action="push"
       to={`/starter-pack/${handleOrDid}/${rkey}`}
       label={_(msg`Navigate to ${record.name}`)}
       onPress={() => {

src/lib/hooks/useNavigationDeduped.ts

@@ -7,6 +7,8 @@ import {type NavigationProp} from '#/lib/routes/types'
 export type DebouncedNavigationProp = Pick<
   NavigationProp,
   | 'popToTop'
+  | 'popTo'
+  | 'pop'
   | 'push'
   | 'navigate'
   | 'canGoBack'
@@ -38,6 +40,12 @@ export function useNavigationDeduped() {
       popToTop: () => {
         dedupe(() => navigation.popToTop())
       },
+      popTo: (...args: Parameters<typeof navigation.popTo>) => {
+        dedupe(() => navigation.popTo(...args))
+      },
+      pop: (...args: Parameters<typeof navigation.pop>) => {
+        dedupe(() => navigation.pop(...args))
+      },
       goBack: () => {
         dedupe(() => navigation.goBack())
       },

src/view/com/util/Link.tsx

@@ -11,7 +11,6 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {sanitizeUrl} from '@braintree/sanitize-url'
-import {StackActions} from '@react-navigation/native'
 
 import {
   type DebouncedNavigationProp,
@@ -421,8 +420,10 @@ function onPressInner(
         if (tabState === TabState.InsideAtRoot) {
           emitSoftReset()
         } else {
+          // note: 'navigate' actually acts the same as 'push' nowadays
+          // therefore we need to add 'pop' -sfn
           // @ts-ignore we're not able to type check on this one -prf
-          navigation.navigate(routeName, params)
+          navigation.navigate(routeName, params, {pop: true})
         }
       } else {
         throw Error('Unsupported navigator action.')

src/view/shell/desktop/LeftNav.tsx

@@ -3,11 +3,7 @@ import {StyleSheet, View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {
-  useLinkTo,
-  useNavigation,
-  useNavigationState,
-} from '@react-navigation/native'
+import {useNavigation, useNavigationState} from '@react-navigation/native'
 
 import {useActorStatus} from '#/lib/actor-status'
 import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
@@ -16,7 +12,10 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
 import {makeProfileLink} from '#/lib/routes/links'
-import {type CommonNavigatorParams} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NavigationProp,
+} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isInvalidHandle, sanitizeHandle} from '#/lib/strings/handles'
@@ -339,7 +338,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
         (currentRouteInfo.params as CommonNavigatorParams['Profile']).name ===
           currentAccount?.handle
       : isTab(currentRouteInfo.name, pathName)
-  const linkTo = useLinkTo()
+  const navigation = useNavigation<NavigationProp>()
   const onPressWrapped = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
       if (e.ctrlKey || e.metaKey || e.altKey) {
@@ -349,10 +348,12 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
       if (isCurrent) {
         emitSoftReset()
       } else {
-        linkTo(href)
+        const [screen, params] = router.matchPath(href)
+        // @ts-expect-error TODO: type matchPath well enough that it can be plugged into navigation.navigate directly
+        navigation.popTo(screen, params)
       }
     },
-    [linkTo, href, isCurrent],
+    [navigation, href, isCurrent],
   )
 
   return (