feat: action plan download updates (M2-7207)

[qiushihe]

📝 Description

🔗 Jira Ticket M2-7207

This PR updates the "download" feature for Action Plan:

• Action Plan cards are now downloaded separately as individual files
• Downloaded images are now JPEG
• Downloaded images now have proper filename formatting
• Images are now downloaded with 3x magnification¹
• The "download" button now triggers the share dialog on mobile devices²

📸 Screenshots

N/A

🪤 Peer Testing

Preparation

• Create an applet with a phrasal template that's long enough to result in truncation of Action Plan card content

On Desktop browser:

1. Start the applet and continue until the phrasal template step
2. Click the "Download" button

• At this point, the browser should download multiple images as individual JPEG files³

On Mobile browser:

1. Start the applet and continue until the phrasal template step
2. Click the "Download" button

• At this point, the "share" dialog should appear offering to share multiple images as individual JPEG files⁴

✏️ Notes

¹: Due to the way the scale attribute works for html2canvas, the 3x magnification actually means 3x of normal dpi, and not 3x of whatever is rendered on screen. This means, if the device is already rendering the page at greater than 1x dpi (i.e. with OS-level scaling on high-dpi displays), then the downloaded images would only scale up to 3x dpi.

²: Mobile device detection relies on the isMobile flag from react-device-detect.

³: Different browser have different ways of facilitating this "multiple download in a single user action" feature: Firefox will simply allow it without question; Chrome will immediately download the first image, then ask permission to download the rest of them; And Safari will ask permission to download each image.

⁴: There is no way to view those shared images unless they are saved somewhere. So for test, one just have to save them to the device (or on iOS, saved to a "Note").

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-538.d15zn9do8xbzga.amplifyapp.com

[farmerpaul]

Code looks good, and UX is great. Nice work.

One thing I found, though, was that pagination happened differently on desktop browser vs. via the mobile browser. For the same Phrase Builder + responses, I got images with these dimensions:

Image #	Chrome macOS	Safari iOS
1	1836 x 6144 (aspect ratio 0.3)	1035 x 5889 (aspect ratio 0.17 😬)
2	1836 x 5208 (aspect ratio 0.35)

The one image downloaded on mobile is extremely tall and narrow, and I imagine not what design intended?

Does this relate to your comment about the DPI? I think I understood your comment, but I don't understand what the consequences are, and why you felt it important to draw attention to it.

[qiushihe]

The image size is likely related to truncation logic (plus some difference in things like font size and whatnot). I'm working on a separate ticket for that right now (https://mindlogger.atlassian.net/browse/M2-7861) and I think it's better that I address it there.