Add displayName to contexts (#8814)

27 files changed, 42 insertions, 7 deletions

diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx
index cdb1f0b8b..ea6751955 100644
--- a/src/components/Admonition.tsx
+++ b/src/components/Admonition.tsx
@@ -23,6 +23,7 @@ type Context = {
 const Context = createContext<Context>({
   type: 'info',
 })
+Context.displayName = 'AdmonitionContext'
 
 export function Icon() {
   const t = useTheme()
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index fd56a28cf..5a0f0c1c7 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -109,6 +109,7 @@ const Context = React.createContext<VariantProps & ButtonState>({
   pressed: false,
   disabled: false,
 })
+Context.displayName = 'ButtonContext'
 
 export function useButtonContext() {
   return React.useContext(Context)
diff --git a/src/components/ContextMenu/context.tsx b/src/components/ContextMenu/context.tsx
index cecb6a18d..d09d3e452 100644
--- a/src/components/ContextMenu/context.tsx
+++ b/src/components/ContextMenu/context.tsx
@@ -7,10 +7,13 @@ import {
 } from '#/components/ContextMenu/types'
 
 export const Context = React.createContext<ContextType | null>(null)
+Context.displayName = 'ContextMenuContext'
 
 export const MenuContext = React.createContext<MenuContextType | null>(null)
+MenuContext.displayName = 'ContextMenuMenuContext'
 
 export const ItemContext = React.createContext<ItemContextType | null>(null)
+ItemContext.displayName = 'ContextMenuItemContext'
 
 export function useContextMenuContext() {
   const context = React.useContext(Context)
diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts
index 2ecf5ba61..1caa4eac8 100644
--- a/src/components/Dialog/context.ts
+++ b/src/components/Dialog/context.ts
@@ -23,6 +23,7 @@ export const Context = createContext<DialogContextProps>({
   setDisableDrag: () => {},
   isWithinDialog: false,
 })
+Context.displayName = 'DialogContext'
 
 export function useDialogContext() {
   return useContext(Context)
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index d424634de..2bfac8673 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -1,11 +1,12 @@
 import {createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 
-import {atoms as a, ViewStyleProp} from '#/alf'
+import {atoms as a, type ViewStyleProp} from '#/alf'
 
 const Context = createContext({
   gap: 0,
 })
+Context.displayName = 'GridContext'
 
 export function Row({
   children,
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
index d68f4bd1d..1a049a696 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -77,6 +77,7 @@ export function Outer({
 }
 
 const AlignmentContext = createContext<'platform' | 'left'>('platform')
+AlignmentContext.displayName = 'AlignmentContext'
 
 export function Content({
   children,
diff --git a/src/components/Layout/context.ts b/src/components/Layout/context.ts
index 8e0c5445e..f3ee7d4e5 100644
--- a/src/components/Layout/context.ts
+++ b/src/components/Layout/context.ts
@@ -3,3 +3,4 @@ import React from 'react'
 export const ScrollbarOffsetContext = React.createContext({
   isWithinOffsetView: false,
 })
+ScrollbarOffsetContext.displayName = 'ScrollbarOffsetContext'
diff --git a/src/components/Menu/context.tsx b/src/components/Menu/context.tsx
index 076bc8151..1c4a873b3 100644
--- a/src/components/Menu/context.tsx
+++ b/src/components/Menu/context.tsx
@@ -3,8 +3,10 @@ import React from 'react'
 import {type ContextType, type ItemContextType} from '#/components/Menu/types'
 
 export const Context = React.createContext<ContextType | null>(null)
+Context.displayName = 'MenuContext'
 
 export const ItemContext = React.createContext<ItemContextType | null>(null)
+ItemContext.displayName = 'MenuItemContext'
 
 export function useMenuContext() {
   const context = React.useContext(Context)
diff --git a/src/components/PolicyUpdateOverlay/context.tsx b/src/components/PolicyUpdateOverlay/context.tsx
index 4f6e56e21..abb058d3c 100644
--- a/src/components/PolicyUpdateOverlay/context.tsx
+++ b/src/components/PolicyUpdateOverlay/context.tsx
@@ -28,6 +28,7 @@ const Context = createContext<{
    */
   setIsReadyToShowOverlay: () => {},
 })
+Context.displayName = 'PolicyUpdateOverlayContext'
 
 export function usePolicyUpdateContext() {
   const context = useContext(Context)
diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 4e03d6b08..b4bebce4d 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -28,6 +28,7 @@ export function createPortalGroup() {
     append: () => {},
     remove: () => {},
   })
+  Context.displayName = 'PortalContext'
 
   function Provider(props: React.PropsWithChildren<{}>) {
     const map = useRef<ComponentMap>({})
diff --git a/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx b/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx
index a038403b2..c6e0eec32 100644
--- a/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx
+++ b/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx
@@ -15,6 +15,7 @@ const Context = React.createContext<{
   setActiveView: (viewId: string) => void
   sendViewPosition: (viewId: string, y: number) => void
 } | null>(null)
+Context.displayName = 'ActiveVideoWebContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   if (!isWeb) {
diff --git a/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx b/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
index 6343081da..7db5f9842 100644
--- a/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
+++ b/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
@@ -8,6 +8,7 @@ const Context = React.createContext<{
   volume: number
   setVolume: React.Dispatch<React.SetStateAction<number>>
 } | null>(null)
+Context.displayName = 'VideoVolumeContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [muted, setMuted] = React.useState(true)
diff --git a/src/components/Post/Embed/VideoEmbed/index.web.tsx b/src/components/Post/Embed/VideoEmbed/index.web.tsx
index 5bb54eef8..28341d826 100644
--- a/src/components/Post/Embed/VideoEmbed/index.web.tsx
+++ b/src/components/Post/Embed/VideoEmbed/index.web.tsx
@@ -125,6 +125,7 @@ export function VideoEmbed({
 }
 
 const NearScreenContext = createContext(false)
+NearScreenContext.displayName = 'VideoNearScreenContext'
 
 /**
  * Renders a 100vh tall div and watches it with an IntersectionObserver to
diff --git a/src/components/PostControls/PostControlButton.tsx b/src/components/PostControls/PostControlButton.tsx
index f41f95049..ae69b1322 100644
--- a/src/components/PostControls/PostControlButton.tsx
+++ b/src/components/PostControls/PostControlButton.tsx
@@ -13,6 +13,7 @@ const PostControlContext = createContext<{
   active?: boolean
   color?: {color: string}
 }>({})
+PostControlContext.displayName = 'PostControlContext'
 
 // Base button style, which the the other ones extend
 export function PostControlButton({
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 2ff0c7ccc..626d8316d 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -27,6 +27,7 @@ const Context = React.createContext<{
   titleId: '',
   descriptionId: '',
 })
+Context.displayName = 'PromptContext'
 
 export function Outer({
   children,
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index 4e8e53216..82520f12a 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -34,10 +34,12 @@ type ContextType = {
 } & Pick<RootProps, 'value' | 'onValueChange' | 'disabled'>
 
 const Context = createContext<ContextType | null>(null)
+Context.displayName = 'SelectContext'
 
 const ValueTextContext = createContext<
   [any, React.Dispatch<React.SetStateAction<any>>]
 >([undefined, () => {}])
+ValueTextContext.displayName = 'ValueTextContext'
 
 function useSelectContext() {
   const ctx = useContext(Context)
@@ -229,6 +231,7 @@ const ItemContext = createContext<{
   focused: false,
   pressed: false,
 })
+ItemContext.displayName = 'SelectItemContext'
 
 export function useItemContext() {
   return useContext(ItemContext)
diff --git a/src/components/Select/index.web.tsx b/src/components/Select/index.web.tsx
index 324148683..4e92d3c51 100644
--- a/src/components/Select/index.web.tsx
+++ b/src/components/Select/index.web.tsx
@@ -23,6 +23,7 @@ import {
 } from './types'
 
 const SelectedValueContext = createContext<string | undefined | null>(null)
+SelectedValueContext.displayName = 'SelectSelectedValueContext'
 
 export function Root(props: RootProps) {
   return (
@@ -219,6 +220,7 @@ const ItemContext = createContext<{
   pressed: false,
   selected: false,
 })
+ItemContext.displayName = 'SelectItemContext'
 
 export function useItemContext() {
   return useContext(ItemContext)
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 2d1ea4261..908b470a4 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -24,6 +24,7 @@ export const ICONS = {
 const Context = createContext<ContextType>({
   type: 'default',
 })
+Context.displayName = 'ToastContext'
 
 export function Toast({
   type,
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index fbdb969db..a7d151020 100644
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -53,12 +53,14 @@ const TooltipContext = createContext<TooltipContextType>({
   visible: false,
   onVisibleChange: () => {},
 })
+TooltipContext.displayName = 'TooltipContext'
 
 const TargetContext = createContext<TargetContextType>({
   targetMeasurements: undefined,
   setTargetMeasurements: () => {},
   shouldMeasure: false,
 })
+TargetContext.displayName = 'TargetContext'
 
 export function Outer({
   children,
diff --git a/src/components/Tooltip/index.web.tsx b/src/components/Tooltip/index.web.tsx
index fc5808d7a..69b4cd338 100644
--- a/src/components/Tooltip/index.web.tsx
+++ b/src/components/Tooltip/index.web.tsx
@@ -20,6 +20,7 @@ const TooltipContext = createContext<TooltipContextType>({
   position: 'bottom',
   onVisibleChange: () => {},
 })
+TooltipContext.displayName = 'TooltipContext'
 
 export function Outer({
   children,
diff --git a/src/components/dialogs/Context.tsx b/src/components/dialogs/Context.tsx
index 8c700cafe..bc802482f 100644
--- a/src/components/dialogs/Context.tsx
+++ b/src/components/dialogs/Context.tsx
@@ -27,6 +27,7 @@ type ControlsContext = {
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
+ControlsContext.displayName = 'GlobalDialogControlsContext'
 
 export function useGlobalDialogsControlContext() {
   const ctx = useContext(ControlsContext)
diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index 5529893c0..2daf4a268 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -47,6 +47,7 @@ const Context = React.createContext<Context>({
   activeNux: undefined,
   dismissActiveNux: () => {},
 })
+Context.displayName = 'NuxDialogContext'
 
 export function useNuxDialogContext() {
   return React.useContext(Context)
diff --git a/src/components/dms/MessageContext.tsx b/src/components/dms/MessageContext.tsx
index 84056fb30..645079eb2 100644
--- a/src/components/dms/MessageContext.tsx
+++ b/src/components/dms/MessageContext.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 const MessageContext = React.createContext(false)
+MessageContext.displayName = 'MessageContext'
 
 export function MessageContextProvider({
   children,
diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx
index 3913c3283..9993317d6 100644
--- a/src/components/forms/TextField.tsx
+++ b/src/components/forms/TextField.tsx
@@ -46,6 +46,7 @@ const Context = createContext<{
   onFocus: () => {},
   onBlur: () => {},
 })
+Context.displayName = 'TextFieldContext'
 
 export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}>
 
diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
index 4e3695bbf..9c3564aa5 100644
--- a/src/components/forms/Toggle.tsx
+++ b/src/components/forms/Toggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, View, ViewStyle} from 'react-native'
+import {Pressable, View, type ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'
 
 import {HITSLOP_10} from '#/lib/constants'
@@ -8,9 +8,9 @@ import {
   atoms as a,
   flatten,
   native,
-  TextStyleProp,
+  type TextStyleProp,
   useTheme,
-  ViewStyleProp,
+  type ViewStyleProp,
 } from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check'
@@ -35,6 +35,7 @@ const ItemContext = React.createContext<ItemState>({
   pressed: false,
   focused: false,
 })
+ItemContext.displayName = 'ToggleItemContext'
 
 const GroupContext = React.createContext<{
   values: string[]
@@ -49,6 +50,7 @@ const GroupContext = React.createContext<{
   maxSelectionsReached: false,
   setFieldValue: () => {},
 })
+GroupContext.displayName = 'ToggleGroupContext'
 
 export type GroupProps = React.PropsWithChildren<{
   type?: 'radio' | 'checkbox'
diff --git a/src/components/intents/IntentDialogs.tsx b/src/components/intents/IntentDialogs.tsx
index 244850370..40b227e49 100644
--- a/src/components/intents/IntentDialogs.tsx
+++ b/src/components/intents/IntentDialogs.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import * as Dialog from '#/components/Dialog'
-import {DialogControlProps} from '#/components/Dialog'
+import {type DialogControlProps} from '#/components/Dialog'
 import {VerifyEmailIntentDialog} from '#/components/intents/VerifyEmailIntentDialog'
 
 interface Context {
@@ -11,6 +11,7 @@ interface Context {
 }
 
 const Context = React.createContext({} as Context)
+Context.displayName = 'IntentDialogsContext'
 export const useIntentDialogs = () => React.useContext(Context)
 
 export function Provider({children}: {children: React.ReactNode}) {
diff --git a/src/components/moderation/Hider.tsx b/src/components/moderation/Hider.tsx
index 39f28b403..c6b332e43 100644
--- a/src/components/moderation/Hider.tsx
+++ b/src/components/moderation/Hider.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import {ModerationUI} from '@atproto/api'
+import {type ModerationUI} from '@atproto/api'
 
 import {
-  ModerationCauseDescription,
+  type ModerationCauseDescription,
   useModerationCauseDescription,
 } from '#/lib/moderation/useModerationCauseDescription'
 import {
@@ -22,6 +22,7 @@ type Context = {
 }
 
 const Context = React.createContext<Context>({} as Context)
+Context.displayName = 'HiderContext'
 
 export const useHider = () => React.useContext(Context)