Migrate remaining emoji/sticker pickers to fun picker

ts/components/fun/FunButton.tsx

@@ -0,0 +1,98 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+import React, { useMemo } from 'react';
+import { VisuallyHidden } from 'react-aria';
+import { Button } from 'react-aria-components';
+import type { LocalizerType } from '../../types/I18N';
+import {
+  type EmojiVariantKey,
+  getEmojiParentByKey,
+  getEmojiParentKeyByVariantKey,
+  getEmojiVariantByKey,
+} from './data/emojis';
+import { FunStaticEmoji } from './FunEmoji';
+
+/**
+ * Fun Picker Button
+ */
+
+export type FunPickerButtonProps = Readonly<{
+  i18n: LocalizerType;
+}>;
+
+export function FunPickerButton(props: FunPickerButtonProps): JSX.Element {
+  const { i18n } = props;
+  return (
+    <Button className="FunButton">
+      <span className="FunButton__Icon FunButton__Icon--FunPicker" />
+      <VisuallyHidden>{i18n('icu:FunButton__Label--FunPicker')}</VisuallyHidden>
+    </Button>
+  );
+}
+
+/**
+ * Emoji Picker Button
+ */
+
+export type FunEmojiPickerButtonProps = Readonly<{
+  selectedEmoji?: EmojiVariantKey | null;
+  i18n: LocalizerType;
+}>;
+
+export function FunEmojiPickerButton(
+  props: FunEmojiPickerButtonProps
+): JSX.Element {
+  const { i18n } = props;
+
+  const selectedEmojiData = useMemo(() => {
+    if (props.selectedEmoji == null) {
+      return null;
+    }
+
+    const variantKey = props.selectedEmoji;
+    const variant = getEmojiVariantByKey(variantKey);
+    const parentKey = getEmojiParentKeyByVariantKey(variantKey);
+    const parent = getEmojiParentByKey(parentKey);
+    return { variant, parent };
+  }, [props.selectedEmoji]);
+
+  return (
+    <Button className="FunButton">
+      {selectedEmojiData ? (
+        <FunStaticEmoji
+          role="img"
+          size={20}
+          aria-label={selectedEmojiData.parent.englishShortNameDefault}
+          emoji={selectedEmojiData.variant}
+        />
+      ) : (
+        <span className="FunButton__Icon FunButton__Icon--EmojiPicker" />
+      )}
+      <VisuallyHidden>
+        {i18n('icu:FunButton__Label--EmojiPicker')}
+      </VisuallyHidden>
+    </Button>
+  );
+}
+
+/**
+ * Sticker Picker Button
+ */
+
+export type FunStickerPickerButtonProps = Readonly<{
+  i18n: LocalizerType;
+}>;
+
+export function FunStickerPickerButton(
+  props: FunStickerPickerButtonProps
+): JSX.Element {
+  const { i18n } = props;
+  return (
+    <Button className="FunButton">
+      <span className="FunButton__Icon FunButton__Icon--StickerPicker" />
+      <VisuallyHidden>
+        {i18n('icu:FunButton__Label--StickerPicker')}
+      </VisuallyHidden>
+    </Button>
+  );
+}