New crop image dialog

[mozzius]

Motivation: remove the use of unstable__openModal in the edit banner/avatar flow on web and move to the new dialogs (since the old ones are broken)

This introduces a new CropImageDialog which has an promise-based API for opening a dialog.

There is an existing ALF dialog for EditImageDialog - however, this doesn't have an API suitable for the edit banner/avatar flow

const [ref, cropImage] = useImageCropperControl()

return (
  <>
    <Button onPress={async () => {
      const res = await cropImage(image)
      // do something with `res`
    }} />
    <CropImageDialog controlRef={ref} />
  </>
)

Test plan

Check that you can edit your avatar/banner on web

[github-actions]

Old size	New size	Diff
7.92 MB	7.91 MB	-2.06 KB (-0.03%)

---

[surfdude29]

I tested this out a bit on the preview branch in Safari on iOS 17.7.1 and I wanted to mention a couple of things.

It's possible to get into a state where after you've selected the image, the Edit image dialog appears behind the Edit profile dialog. I thought I had found a way to trigger this easily, but I realised that I had content blockers enabled for that situation, and I'm not sure if that "counts" 😅

Nevertheless, I was able to replicate it with content blockers disabled, it just seemed to occur more randomly (or at least, after a more complex series of steps).

Here's a screenshot:

Also, as you can see from the screenshot, Edit image shows up in black text even in the Dim theme.

[mozzius]

Hey @surfdude29, thanks - I'd also noticed this, parking this PR until it can be resolved