web: improve attaching attachments UX

[01zulfi]

Description

This PR improves the UX of attaching bulk attachments by showing a unified dialog with all states of the attaching progress. Single files will also be attached through this flow. Encryption and attaching to editor hasn't been changed as well.

Example of the new dialog: (compression & encryption manually throttled)

notesnook.mp4

Type of Change

• Bug fix
• Feature

Visuals

• Attached relevant screenshots / screen recording / GIF
• N/A (not a feature or no UI changes)

Testing

• Ran all E2E tests
• Ran all integration tests
• Added/updated tests for this change (if needed)
• N/A (tests not needed — explanation provided below)

If tests were not added, explain why

Platform

• Web
• Mobile
• Desktop

Sign-off

• QA passed
• UI/UX passed

[github-actions]

Cloudflare Pages Preview

https://7a69453c.notesnook-app.pages.dev

Commit: d81bc08

[github-actions]

Desktop Previews

• macOS
• Linux x64
• Linux arm64
• Windows x64

Commit: d81bc08

[github-actions]

iOS App Preview

https://appdistribution.firebase.google.com/testerapps/1:178156234792:ios:7d0d8b7b6332eb72d06d1d/releases/6n0a38fkpggj8?utm_source=firebase-tools

Commit: 2a2bf67

[github-actions]

Android App Preview

https://appdistribution.firebase.google.com/testerapps/1:178156234792:android:5c60019871e79043d06d1d/releases/07hvupkakio6g?utm_source=firebase-tools

Commit: 2a2bf67

[thecodrr]

This is a good implementation but I am left wondering about the actual utility of a specially designed batch attachment dialog instead of just using the TaskManager to show progress for multiple attachments. The only difference I see is the ability to toggle compression for each attachment separately but I think we can just add support for multiple files in our ImagePickerDialog.

That will simplify a lot of things without us having to change the whole attachment flow.

[thecodrr]

Use intl strings here.

[thecodrr]

I don't think we should couple the editor logic with this. The previous behavior of returning the attachments array was good. That allowed the user of attachFiles to decide what to do with the attachments.

[01zulfi]

The new attachFiles still returns only the attachments. I added the editor coupling to pass the editorId to the dialog as I wanted to have the editor.attachFile happen inside the dialog rather than outside of it

[thecodrr]

Let's keep the editor logic outside. It'll keep things explicit.

[01zulfi]

using the TaskManager to show progress for multiple attachments.

I did not think about that, will look into it

we can just add support for multiple files in our ImagePickerDialog.

that is true, when a user uploads multiple images, the ImagePickerDialog can be repurposed to support multiple entries

But when user uploads different kind of attachments in bulk, the experience could still be fragmented with these changes suggested. Imagine a user uploads 2 images and 3 text files, the ImagePickerDialog will first open to ask for compression, and then the TaskManager's dialog will open for encryption. With a unified dialog, we can provide a consistent UX