Add displayName to contexts (#8814)

src/state/preferences/alt-text-required.tsx

@@ -8,9 +8,11 @@ type SetContext = (v: persisted.Schema['requireAltTextEnabled']) => void
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.requireAltTextEnabled,
 )
+stateContext.displayName = 'AltTextRequiredStateContext'
 const setContext = React.createContext<SetContext>(
   (_: persisted.Schema['requireAltTextEnabled']) => {},
 )
+setContext.displayName = 'AltTextRequiredSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(

src/state/preferences/autoplay.tsx

@@ -8,7 +8,9 @@ type SetContext = (v: boolean) => void
 const stateContext = React.createContext<StateContext>(
   Boolean(persisted.defaults.disableAutoplay),
 )
+stateContext.displayName = 'AutoplayStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'AutoplaySetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState(

src/state/preferences/disable-haptics.tsx

@@ -8,7 +8,9 @@ type SetContext = (v: boolean) => void
 const stateContext = React.createContext<StateContext>(
   Boolean(persisted.defaults.disableHaptics),
 )
+stateContext.displayName = 'DisableHapticsStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'DisableHapticsSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState(

src/state/preferences/external-embeds-prefs.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {EmbedPlayerSource} from '#/lib/strings/embed-player'
+import {type EmbedPlayerSource} from '#/lib/strings/embed-player'
 import * as persisted from '#/state/persisted'
 
 type StateContext = persisted.Schema['externalEmbeds']
@@ -12,7 +12,9 @@ type SetContext = (
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.externalEmbeds,
 )
+stateContext.displayName = 'ExternalEmbedsPrefsStateContext'
 const setContext = React.createContext<SetContext>({} as SetContext)
+setContext.displayName = 'ExternalEmbedsPrefsSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('externalEmbeds'))

src/state/preferences/hidden-posts.tsx

@@ -14,10 +14,12 @@ type ApiContext = {
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.hiddenPosts,
 )
+stateContext.displayName = 'HiddenPostsStateContext'
 const apiContext = React.createContext<ApiContext>({
   hidePost: () => {},
   unhidePost: () => {},
 })
+apiContext.displayName = 'HiddenPostsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('hiddenPosts'))

src/state/preferences/in-app-browser.tsx

@@ -8,9 +8,11 @@ type SetContext = (v: persisted.Schema['useInAppBrowser']) => void
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.useInAppBrowser,
 )
+stateContext.displayName = 'InAppBrowserStateContext'
 const setContext = React.createContext<SetContext>(
   (_: persisted.Schema['useInAppBrowser']) => {},
 )
+setContext.displayName = 'InAppBrowserSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('useInAppBrowser'))

src/state/preferences/kawaii.tsx

@@ -8,6 +8,7 @@ type StateContext = persisted.Schema['kawaii']
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.kawaii,
 )
+stateContext.displayName = 'KawaiiStateContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('kawaii'))

src/state/preferences/label-defs.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import {AppBskyLabelerDefs, InterpretedLabelValueDefinition} from '@atproto/api'
+import {
+  type AppBskyLabelerDefs,
+  type InterpretedLabelValueDefinition,
+} from '@atproto/api'
 
 import {useLabelDefinitionsQuery} from '../queries/preferences'
 
@@ -12,6 +15,7 @@ const stateContext = React.createContext<StateContext>({
   labelDefs: {},
   labelers: [],
 })
+stateContext.displayName = 'LabelDefsStateContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const state = useLabelDefinitionsQuery()

src/state/preferences/languages.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {AppLanguage} from '#/locale/languages'
+import {type AppLanguage} from '#/locale/languages'
 import * as persisted from '#/state/persisted'
 
 type SetStateCb = (
@@ -20,6 +20,7 @@ type ApiContext = {
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.languagePrefs,
 )
+stateContext.displayName = 'LanguagePrefsStateContext'
 const apiContext = React.createContext<ApiContext>({
   setPrimaryLanguage: (_: string) => {},
   setPostLanguage: (_: string) => {},
@@ -29,6 +30,7 @@ const apiContext = React.createContext<ApiContext>({
   savePostLanguageToHistory: () => {},
   setAppLanguage: (_: AppLanguage) => {},
 })
+apiContext.displayName = 'LanguagePrefsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('languagePrefs'))

src/state/preferences/large-alt-badge.tsx

@@ -8,9 +8,11 @@ type SetContext = (v: persisted.Schema['largeAltBadgeEnabled']) => void
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.largeAltBadgeEnabled,
 )
+stateContext.displayName = 'LargeAltBadgeStateContext'
 const setContext = React.createContext<SetContext>(
   (_: persisted.Schema['largeAltBadgeEnabled']) => {},
 )
+setContext.displayName = 'LargeAltBadgeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(

src/state/preferences/moderation-opts.tsx

@@ -1,5 +1,5 @@
-import React, {createContext, useContext, useMemo} from 'react'
-import {BskyAgent, ModerationOpts} from '@atproto/api'
+import {createContext, useContext, useMemo} from 'react'
+import {BskyAgent, type ModerationOpts} from '@atproto/api'
 
 import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
 import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
@@ -9,11 +9,13 @@ import {usePreferencesQuery} from '../queries/preferences'
 export const moderationOptsContext = createContext<ModerationOpts | undefined>(
   undefined,
 )
+moderationOptsContext.displayName = 'ModerationOptsContext'
 
 // used in the moderation state devtool
 export const moderationOptsOverrideContext = createContext<
   ModerationOpts | undefined
 >(undefined)
+moderationOptsOverrideContext.displayName = 'ModerationOptsOverrideContext'
 
 export function useModerationOpts() {
   return useContext(moderationOptsContext)

src/state/preferences/subtitles.tsx

@@ -8,7 +8,9 @@ type SetContext = (v: boolean) => void
 const stateContext = React.createContext<StateContext>(
   Boolean(persisted.defaults.subtitlesEnabled),
 )
+stateContext.displayName = 'SubtitlesStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'SubtitlesSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState(

src/state/preferences/trending.tsx

@@ -22,10 +22,12 @@ const StateContext = React.createContext<StateContext>({
   trendingDisabled: Boolean(persisted.defaults.trendingDisabled),
   trendingVideoDisabled: Boolean(persisted.defaults.trendingVideoDisabled),
 })
+StateContext.displayName = 'TrendingStateContext'
 const ApiContext = React.createContext<ApiContext>({
   setTrendingDisabled() {},
   setTrendingVideoDisabled() {},
 })
+ApiContext.displayName = 'TrendingApiContext'
 
 function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
   const [value, _set] = React.useState(() => {

src/state/preferences/used-starter-packs.tsx

@@ -6,7 +6,9 @@ type StateContext = boolean | undefined
 type SetContext = (v: boolean) => void
 
 const stateContext = React.createContext<StateContext>(false)
+stateContext.displayName = 'UsedStarterPacksStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'UsedStarterPacksSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState<StateContext>(() =>