Function IOSIconPicker

packages/webapp/components/IOSIconPicker.tsx:72–265

()

};

export const IOSIconPicker = (): ReactElement => {
  const [appIcons, setAppIcons] = useState<AppIconOption[]>([]);
  const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
  const [supportsAlternateIcons, setSupportsAlternateIcons] = useState(false);
  const [appIconLoading, setAppIconLoading] = useState(false);
  const [appIconError, setAppIconError] = useState<string | null>(null);

  const appIconOptions = useMemo<RadioItemProps[]>(() => {
    return appIcons.map((icon) => {
      const iconName = icon.name ?? 'main';
      const previewUrl = resolveAppIconPreview(iconName);
      return {
        label: (
          <span className="flex items-center gap-2">
            <span className="border-border-subtle h-7 w-7 overflow-hidden rounded-10 border bg-surface-primary">
              <img
                src={previewUrl}
                alt={`${icon.displayName} app icon`}
                className="h-full w-full object-cover"
                loading="lazy"
              />
            </span>
            <span>{icon.displayName}</span>
          </span>
        ),
        value: icon.name ?? 'default',
      };
    });
  }, [appIcons]);

  const parseEventDetail = <T,>(rawDetail: unknown): T | null => {
    if (typeof rawDetail === 'string') {
      return parseOrDefault<T>(rawDetail) as T;
    }
    return rawDetail as T;
  };

  const handleGetIconResult = (detail: AppIconResult): void => {
    const selected =
      detail.selectedName ??
      detail.icons?.find((icon) => icon.isSelected)?.name ??
      null;

    setAppIcons(detail.icons ?? []);
    setSelectedIcon(selected);
    setSupportsAlternateIcons(!!detail.supportsAlternateIcons);
    setAppIconError(null);
    setAppIconLoading(false);
  };

  const handleSetIconResult = (detail: AppIconResult): void => {
    setSelectedIcon(detail.selectedName ?? null);
    setAppIconError(null);
    setAppIconLoading(false);
  };

  const handleAppIconResult = useCallback((event: Event) => {
    const detail = parseEventDetail<AppIconResult>(