Cleanup and remove provider

src/App.web.tsx

@@ -60,7 +60,6 @@ import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialo
 import {Provider as PortalProvider} from '#/components/Portal'
 import {Provider as ActiveVideoProvider} from '#/components/Post/Embed/VideoEmbed/ActiveVideoWebContext'
 import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
-import {Provider as TooltipProvider} from '#/components/Tooltip'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
 
@@ -195,11 +194,9 @@ function App() {
                     <DialogStateProvider>
                       <LightboxStateProvider>
                         <PortalProvider>
-                          <TooltipProvider>
+                          <StarterPackProvider>
-                            <StarterPackProvider>
+                            <InnerApp />
-                              <InnerApp />
+                          </StarterPackProvider>
-                            </StarterPackProvider>
-                          </TooltipProvider>
                         </PortalProvider>
                       </LightboxStateProvider>
                     </DialogStateProvider>

src/components/Tooltip/const.ts

@@ -1,4 +1,6 @@
 import {atoms as a} from '#/alf'
 
-export const TIP_SIZE = 12
+export const ARROW_SIZE = 12
-export const MIN_X_SPACE = a.px_lg.paddingLeft
+export const ARROW_HALF_SIZE = ARROW_SIZE / 2
+export const ARROW_VISUAL_OFFSET = ARROW_SIZE / 3
+export const MIN_EDGE_SPACE = a.px_lg.paddingLeft

src/components/Tooltip/index.tsx

@@ -14,19 +14,14 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {atoms as a, select, useTheme} from '#/alf'
 import {useOnGesture} from '#/components/hooks/useOnGesture'
 import {Portal} from '#/components/Portal'
-import {MIN_EDGE_SPACE, TIP_SIZE} from '#/components/Tooltip/const'
+import {
+  ARROW_HALF_SIZE,
+  ARROW_SIZE,
+  ARROW_VISUAL_OFFSET,
+  MIN_EDGE_SPACE,
+} from '#/components/Tooltip/const'
 import {Text} from '#/components/Typography'
 
-const HALF_TIP = TIP_SIZE / 2
-const TIP_VISUAL_OFFSET = TIP_SIZE / 3
-
-/**
- * Only needed on web
- */
-export function Provider({children}: {children: React.ReactNode}) {
-  return children
-}
-
 type TooltipContextType = {
   position: 'top' | 'bottom'
   ready: boolean
@@ -221,7 +216,7 @@ function Bubble({
       minLeft,
       targetMeasurements.x + targetMeasurements.width / 2 - cw / 2,
     )
-    const tipTranslate = HALF_TIP * -1
+    const tipTranslate = ARROW_HALF_SIZE * -1
     let tipTop = tipTranslate
 
     if (left + cw > maxLeft) {
@@ -229,7 +224,10 @@ function Bubble({
     }
 
     let tipLeft =
-      targetMeasurements.x - left + targetMeasurements.width / 2 - HALF_TIP
+      targetMeasurements.x -
+      left +
+      targetMeasurements.width / 2 -
+      ARROW_HALF_SIZE
 
     let bottom = top + ch
 
@@ -259,11 +257,11 @@ function Bubble({
     }
 
     if (computedPosition === 'bottom') {
-      top += TIP_VISUAL_OFFSET
+      top += ARROW_VISUAL_OFFSET
-      bottom += TIP_VISUAL_OFFSET
+      bottom += ARROW_VISUAL_OFFSET
     } else {
-      top -= TIP_VISUAL_OFFSET
+      top -= ARROW_VISUAL_OFFSET
-      bottom -= TIP_VISUAL_OFFSET
+      bottom -= ARROW_VISUAL_OFFSET
     }
 
     return {
@@ -337,8 +335,8 @@ function Bubble({
             {
               borderTopLeftRadius: a.rounded_2xs.borderRadius,
               borderBottomRightRadius: a.rounded_2xs.borderRadius,
-              width: TIP_SIZE,
+              width: ARROW_SIZE,
-              height: TIP_SIZE,
+              height: ARROW_SIZE,
               transform: [{rotate: '45deg'}],
               top: coords.tipTop,
               left: coords.tipLeft,
@@ -362,7 +360,7 @@ function Bubble({
                 width: 0,
                 // provide more shadow beneath tip
                 height:
-                  TIP_VISUAL_OFFSET *
+                  ARROW_VISUAL_OFFSET *
                   (coords.computedPosition === 'bottom' ? -1 : 1),
               },
             },

src/components/Tooltip/index.web.tsx

@@ -4,11 +4,13 @@ import {Popover} from 'radix-ui'
 
 import {atoms as a, flatten, select, useTheme} from '#/alf'
 import {transparentifyColor} from '#/alf/util/colorGeneration'
-import {MIN_EDGE_SPACE, TIP_SIZE} from '#/components/Tooltip/const'
+import {
+  ARROW_SIZE,
+  ARROW_VISUAL_OFFSET,
+  MIN_EDGE_SPACE,
+} from '#/components/Tooltip/const'
 import {Text} from '#/components/Typography'
 
-const TIP_VISUAL_OFFSET = TIP_SIZE / 3
-
 type TooltipContextType = {
   position: 'top' | 'bottom'
 }
@@ -17,10 +19,6 @@ const TooltipContext = createContext<TooltipContextType>({
   position: 'bottom',
 })
 
-export function Provider({children}: {children: React.ReactNode}) {
-  return children
-}
-
 export function Outer({
   children,
   position = 'bottom',
@@ -43,10 +41,9 @@ export function Outer({
 export function Target({
   children,
 }: {
-  children: (props: object) => React.ReactNode
+  children: (props: {ref: undefined}) => React.ReactNode
 }) {
-  const child = useMemo(() => children({}), [children])
+  return <Popover.Trigger asChild>{children({ref: undefined})}</Popover.Trigger>
-  return <Popover.Trigger asChild>{child}</Popover.Trigger>
 }
 
 export function Content({
@@ -64,7 +61,7 @@ export function Content({
         className="radix-popover-content"
         aria-label={label}
         side={position}
-        sideOffset={(TIP_SIZE / 3) * -1}
+        sideOffset={(ARROW_SIZE / 3) * -1}
         collisionPadding={MIN_EDGE_SPACE}
         style={flatten([
           a.rounded_sm,
@@ -76,15 +73,15 @@ export function Content({
           {
             minWidth: 'max-content',
             boxShadow: select(t.name, {
-              light: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor(
+              light: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor(
                 t.palette.black,
                 0.2,
               )}`,
-              dark: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor(
+              dark: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor(
                 t.palette.black,
                 0.2,
               )}`,
-              dim: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor(
+              dim: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor(
                 t.palette.black,
                 0.2,
               )}`,
@@ -92,8 +89,8 @@ export function Content({
           },
         ])}>
         <Popover.Arrow
-          width={TIP_SIZE}
+          width={ARROW_SIZE}
-          height={TIP_SIZE / 2}
+          height={ARROW_SIZE / 2}
           fill={select(t.name, {
             light: t.atoms.bg.backgroundColor,
             dark: t.atoms.bg_contrast_100.backgroundColor,