Feature/tooltip (#20)

* generated

* add basic tooltip

* generated

* remove import

* remove space

* Add delay

* Patch onHoverIn/onHoverOut

* move to root of components

* Remove //

* lint fix

* Remove slashes

* Remove slashes

* Use stable ref for portal name

* Verify that child is an instance of pressable

* Use a combined state

Author: SeanBarker182

app/app.tsx

@@ -14,6 +14,7 @@ import { Titlebar } from "./components/Titlebar"
 import { Sidebar } from "./components/Sidebar/Sidebar"
 import { useSidebar } from "./state/useSidebar"
 import { AppHeader } from "./components/AppHeader"
+import { PortalHost } from "./components/Portal"
 
 if (__DEV__) {
   // This is for debugging Reactotron with ... Reactotron!
@@ -24,7 +25,6 @@ if (__DEV__) {
 function App(): React.JSX.Element {
   const { colors } = useTheme()
   const { toggleSidebar } = useSidebar()
-
   const menuConfig = useMemo(
     () => ({
       remove: ["File", "Edit", "Format"],
@@ -83,6 +83,7 @@ function App(): React.JSX.Element {
           <TimelineScreen />
         </View>
       </View>
+      <PortalHost />
     </View>
   )
 }

app/components/DetailPanel.tsx

@@ -13,6 +13,7 @@ import { themed } from "../theme/theme"
 import { TimelineItem } from "../types"
 import { TreeViewWithProvider } from "./TreeView"
 import ActionButton from "./ActionButton"
+import { Tooltip } from "./Tooltip"
 import IRClipboard from "../native/IRClipboard/NativeIRClipboard"
 import { $flex } from "../theme/basics"
 import { formatTime } from "../utils/formatTime"
@@ -82,10 +83,14 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
           </View>
         </View>
         <View style={$headerActions()}>
-          <ActionButton
-            icon={({ size }) => <Text style={{ fontSize: size }}>📋</Text>}
-            onClick={() => IRClipboard.setString(JSON.stringify(selectedItem.payload))}
-          />
+          <Tooltip label="Copy payload">
+            <Pressable
+              style={$copyButton()}
+              onPress={() => IRClipboard.setString(JSON.stringify(selectedItem.payload))}
+            >
+              <Text style={$copyButtonText()}>📋</Text>
+            </Pressable>
+          </Tooltip>
           {onClose && (
             <ActionButton
               icon={({ size }) => <Text style={{ fontSize: size }}>✕</Text>}
@@ -442,3 +447,17 @@ const $image = themed<ImageStyle>(() => ({
   height: 200,
   resizeMode: "contain",
 }))
+
+const $copyButton = themed<ViewStyle>(({ spacing }) => ({
+  marginHorizontal: spacing.sm,
+  padding: spacing.sm,
+  justifyContent: "center",
+  alignItems: "center",
+  cursor: "pointer",
+  borderRadius: spacing.xs,
+  backgroundColor: "transparent",
+}))
+
+const $copyButtonText = themed<TextStyle>(() => ({
+  fontSize: 20,
+}))

app/components/Portal.tsx

@@ -0,0 +1,70 @@
+import { View, type ViewStyle } from "react-native"
+import { useState, useEffect, type ReactNode } from "react"
+
+// Global registry for portal content and their listeners
+const portals = new Map<string, ReactNode>()
+const listeners = new Set<() => void>()
+
+/**
+ * Notifies all PortalHost components that portal content has changed
+ */
+function emit() {
+  listeners.forEach((listener) => listener())
+}
+
+/**
+ * A portal component that renders its children in a different location in the component tree.
+ * Instead of rendering where it's declared, the content appears in the PortalHost.
+ * Useful for modals, tooltips, and other overlays that need to appear above other content.
+ */
+export function Portal({ name, children }: { name: string; children: ReactNode }) {
+  useEffect(() => {
+    // Register this portal's content in the global registry
+    portals.set(name, children)
+    emit() // Notify PortalHost to re-render with new content
+
+    return () => {
+      // Clean up when portal unmounts
+      portals.delete(name)
+      emit() // Notify PortalHost to re-render without this content
+    }
+  }, [name, children])
+
+  // Portal doesn't render anything in its original location
+  return null
+}
+
+/**
+ * The host component that renders all portal content.
+ * Should be placed once in your app tree, typically at the root level.
+ * All Portal components will render their content here instead of their original location.
+ */
+export function PortalHost() {
+  const [, forceUpdate] = useState({})
+
+  useEffect(() => {
+    // Listen for portal changes and force re-render when they occur
+    const listener = () => forceUpdate({})
+    listeners.add(listener)
+    return () => listeners.delete(listener)
+  }, [])
+
+  return (
+    <View style={$overlay} pointerEvents="box-none">
+      {Array.from(portals.values())}
+    </View>
+  )
+}
+
+// Overlay that covers the entire screen for portal content
+// Uses high z-index to appear above other content
+// pointerEvents="box-none" allows touches to pass through to underlying content
+const $overlay: ViewStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 9999,
+  pointerEvents: "box-none",
+}

app/components/Tooltip.tsx

@@ -0,0 +1,157 @@
+import {
+  useState,
+  cloneElement,
+  isValidElement,
+  useRef,
+  type ComponentPropsWithRef,
+  type ReactElement,
+} from "react"
+import {
+  View,
+  Text,
+  Pressable,
+  type ViewStyle,
+  type TextStyle,
+  type LayoutChangeEvent,
+  type PressableProps,
+} from "react-native"
+import { themed } from "../theme/theme"
+import { Portal } from "./Portal"
+import { getUUID } from "../utils/random/getUUID"
+
+type TooltipState = "hidden" | "showing" | "positioned"
+
+type TooltipProps = {
+  /**
+   * The text to display in the tooltip
+   */
+  label: string
+  /**
+   * The trigger element that will show the tooltip on hover
+   */
+  children: ReactElement<PressableProps>
+  /**
+   * Delay in milliseconds before showing the tooltip
+   * @default 500
+   */
+  delay?: number
+}
+
+/**
+ * A tooltip component that displays helpful text when the user long-presses a trigger element.
+ * The tooltip appears positioned below the trigger and is automatically centered.
+ * Uses the Portal system to render outside the normal component tree for proper layering.
+ */
+export function Tooltip({ label, children, delay = 500 }: TooltipProps) {
+  const [tooltipState, setTooltipState] = useState<TooltipState>("hidden")
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+  const triggerRef = useRef<View>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const portalNameRef = useRef<string>(`tooltip-${getUUID()}`)
+
+  if (!isValidElement(children)) {
+    return <>{children}</>
+  }
+
+  const child = children
+
+  if (__DEV__) {
+    const isPressable = child?.type === Pressable
+    if (!isPressable) {
+      console.warn("Tooltip: child should be a Pressable to support onHoverIn/onHoverOut handlers.")
+    }
+  }
+
+  // Shows the tooltip for measurement after delay
+  const showTooltip = () => {
+    if (timeoutRef.current || tooltipState !== "hidden") return
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = null
+      setTooltipState("showing")
+    }, delay)
+  }
+
+  // Cancels any pending tooltip show
+  const cancelTooltip = () => {
+    if (!timeoutRef.current) return
+    clearTimeout(timeoutRef.current)
+    timeoutRef.current = null
+  }
+
+  // Hides the tooltip immediately
+  const hideTooltip = () => {
+    cancelTooltip()
+    setTooltipState("hidden")
+  }
+
+  // Updates tooltip position when the tooltip is laid out
+  const onTooltipLayout = (event: LayoutChangeEvent) => {
+    if (!triggerRef.current) return
+    const { width } = event.nativeEvent.layout
+    // Calculate proper centered position
+    triggerRef.current.measureInWindow((x, y, triggerWidth, height) => {
+      setPosition({
+        x: x + triggerWidth / 2 - width / 2, // Center tooltip under trigger
+        y: y + height + 2, // Position below with small gap
+      })
+      setTooltipState("positioned") // Now show the tooltip
+    })
+  }
+
+  const enhancedChild = cloneElement<ComponentPropsWithRef<typeof Pressable>>(child, {
+    ...child.props,
+    ref: triggerRef,
+    onHoverIn: (e) => {
+      showTooltip()
+      child.props?.onHoverIn?.(e)
+    },
+    onHoverOut: (e) => {
+      hideTooltip()
+      child.props?.onHoverOut?.(e)
+    },
+    onPress: (e) => {
+      child.props?.onPress?.(e)
+    },
+  })
+
+  return (
+    <>
+      {enhancedChild}
+      {tooltipState !== "hidden" && (
+        <Portal name={portalNameRef.current}>
+          <View
+            onLayout={onTooltipLayout}
+            style={[$tooltipBubble(), $tooltipPosition(position, tooltipState === "positioned")]}
+            pointerEvents="none"
+          >
+            <Text style={$tooltipText()}>{label}</Text>
+          </View>
+        </Portal>
+      )}
+    </>
+  )
+}
+
+const $tooltipBubble = themed<ViewStyle>(({ colors, spacing }) => ({
+  position: "absolute",
+  backgroundColor: colors.cardBackground,
+  borderColor: colors.border,
+  borderWidth: 1,
+  paddingHorizontal: spacing.xs,
+  paddingVertical: spacing.xs,
+  borderRadius: spacing.xs,
+  alignItems: "center",
+  justifyContent: "center",
+}))
+
+const $tooltipPosition = (position: { x: number; y: number }, positioned: boolean) => ({
+  left: position.x,
+  top: position.y,
+  opacity: positioned ? 1 : 0,
+})
+
+const $tooltipText = themed<TextStyle>(({ colors }) => ({
+  color: colors.mainText,
+  fontSize: 12,
+  textAlign: "center",
+}))