refactor(emojis): drop componentName args from context hook calls

Remove the `componentName` label argument from the picker's context hook calls across the
emoji plugin (`useEmojiPickerContext`, `useEmojiPickerPreviewContext`, and the core
`useTranslationContext` / `useMessageComposer*` hooks). `useEmojiPickerContext` and
`useEmojiPickerPreviewContext` are now zero-param and throw a single generic
"must be rendered within a StreamEmojiPicker.Root" error.

Author: oliverlaz

src/plugins/Emojis/EmojiPicker.tsx

@@ -57,8 +57,8 @@ const classNames: Pick<
  * packages. See the emoji section of `AI.md` for migration notes.
  */
 export const EmojiPicker = (props: EmojiPickerProps) => {
-  const { t } = useTranslationContext('EmojiPicker');
-  const { textareaRef } = useMessageComposerContext('EmojiPicker');
+  const { t } = useTranslationContext();
+  const { textareaRef } = useMessageComposerContext();
   const { textComposer } = useMessageComposerController();
   const isCooldownActive = useIsCooldownActive();
   const [displayPicker, setDisplayPicker] = useState(false);

src/plugins/Emojis/StreamEmojiPicker.tsx

@@ -68,8 +68,8 @@ const classNames: Pick<
 };
 
 const StreamEmojiPickerComponent = (props: StreamEmojiPickerProps) => {
-  const { t } = useTranslationContext('EmojiPicker');
-  const { textareaRef } = useMessageComposerContext('EmojiPicker');
+  const { t } = useTranslationContext();
+  const { textareaRef } = useMessageComposerContext();
   const { textComposer } = useMessageComposerController();
   const isCooldownActive = useIsCooldownActive();
   // Skin tone and frequently-used live here (not in the panel) so they survive the

src/plugins/Emojis/components/CategoryNav.tsx

@@ -14,7 +14,7 @@ const NAV_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
  */
 export const CategoryNav = () => {
   const { activeCategoryId, categories, isSearching, requestScrollToCategory } =
-    useEmojiPickerContext('CategoryNav');
+    useEmojiPickerContext();
   const navRef = useRef<HTMLDivElement>(null);
   const active = isSearching ? undefined : activeCategoryId;
   const rovingId = active ?? categories[0]?.id;

src/plugins/Emojis/components/EmojiButton.tsx

@@ -12,7 +12,7 @@ export type EmojiButtonProps = {
  * skin tone. Memoized because the grid can render ~1800 of these.
  */
 export const EmojiButton = memo(function EmojiButton({ emoji }: EmojiButtonProps) {
-  const { resolveNative, selectEmoji } = useEmojiPickerContext('EmojiButton');
+  const { resolveNative, selectEmoji } = useEmojiPickerContext();
   const { setPreviewedEmoji } = useEmojiPickerPreviewContext();
 
   return (

src/plugins/Emojis/components/EmojiGrid.tsx

@@ -39,7 +39,7 @@ const CategorySection = ({ category }: { category: EmojiPickerCategory }) => (
  */
 export const EmojiGrid = () => {
   const { categories, isSearching, scrollTarget, searchResults, setActiveCategory } =
-    useEmojiPickerContext('EmojiGrid');
+    useEmojiPickerContext();
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const atBottomRef = useRef(false);
   const bodyRef = useRef<HTMLDivElement>(null);

src/plugins/Emojis/components/EmojiPickerRoot.tsx

@@ -101,7 +101,7 @@ export const EmojiPickerRoot = ({
   style,
   theme,
 }: EmojiPickerRootProps) => {
-  const { t } = useTranslationContext('EmojiPickerRoot');
+  const { t } = useTranslationContext();
   const { data, error, retry } = useEmojiPickerState();
   const status: 'error' | 'loading' | 'ready' = data
     ? 'ready'

src/plugins/Emojis/components/EmptyResults.tsx

@@ -9,7 +9,7 @@ export type EmptyResultsProps = {
  * Shown in place of the emoji grid when a search yields no matches.
  */
 export const EmptyResults = ({ emoji }: EmptyResultsProps) => {
-  const { t } = useTranslationContext('EmojiPicker');
+  const { t } = useTranslationContext();
 
   return (
     <div className='str-chat__emoji-picker__empty' role='status'>

src/plugins/Emojis/components/PreviewPane.tsx

@@ -10,8 +10,8 @@ import { useTranslationContext } from '../../../context';
  * so hovering does not re-render the emoji grid).
  */
 export const PreviewPane = () => {
-  const { t } = useTranslationContext('EmojiPickerPreview');
-  const { resolveNative } = useEmojiPickerContext('PreviewPane');
+  const { t } = useTranslationContext();
+  const { resolveNative } = useEmojiPickerContext();
   const { previewedEmoji } = useEmojiPickerPreviewContext();
 
   return (

src/plugins/Emojis/components/SearchInput.tsx

@@ -16,8 +16,8 @@ export type SearchInputProps = {
  * enclosing picker dialog (the default grid's DOM contract).
  */
 export const SearchInput = ({ autoFocus = true }: SearchInputProps) => {
-  const { t } = useTranslationContext('EmojiPickerSearchInput');
-  const { query, setQuery } = useEmojiPickerContext('SearchInput');
+  const { t } = useTranslationContext();
+  const { query, setQuery } = useEmojiPickerContext();
   const inputId = useStableId();
   const inputRef = useRef<HTMLInputElement>(null);
 

src/plugins/Emojis/components/SkinToneSelector.tsx

@@ -14,9 +14,8 @@ const ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', '
  * `setSkinTone`.
  */
 export const SkinToneSelector = () => {
-  const { t } = useTranslationContext('EmojiPickerSkinTone');
-  const { setSkinTone, skinToneIndex, skinTones } =
-    useEmojiPickerContext('SkinToneSelector');
+  const { t } = useTranslationContext();
+  const { setSkinTone, skinToneIndex, skinTones } = useEmojiPickerContext();
   const maxIndex = skinTones.length - 1;
   const [expanded, setExpanded] = useState(false);
   const toggleRef = useRef<HTMLButtonElement>(null);