compose: multiselect for recipient field

[ajmalwashere]

Added mutiselect for compose recipient field.

using headless ui as planned because shadcn doesn't support multi select in combobox.

i also noticed headless ui combobox doesn't support editable dropdown. we need that for typing or copy pasting email address :) Refer -> (https://github.com/tailwindlabs/headlessui/discussions/1228)

need to decide how to proceed from here for adding editable field -> try workaround or use another component

[vercel[bot]]

@ajmalwashere is attempting to deploy a commit to the Inbox Zero Team on Vercel.

A member of the Team first needs to authorize it.

[elie222]

Allow Custom Values doesn't solve the problem? https://headlessui.com/react/combobox#allowing-custom-values

Okay going with another library if HUI doesn't do everything we need.

[elie222]

Ah, I see that link is mentioned a few times in the issue you linked to. And it's limiting.

Some features we'd want for an email client:

• Supports free form text
• Supports multi select
• Full control of styling so it can look something like we're used to in email clients (eg Gmail)

Worth taking a look at alternative libraries that offer this.

[elie222]

Two potential libraries: https://www.npmjs.com/package/react-select https://www.npmjs.com/package/downshift

[ajmalwashere]

@elie222 I have used the workaround with invisible Combobox.Option.

You give it a try locally and see if its fits all requirements.

I used zod to validate if its valid email

[elie222]

Great. Thanks!

When no search result is found we should not show the dropdown:

For styling, I think we can try without any border shown. Similar to what you have in other email clients. But also will impact on how much we can style Novel editor. If it's limited right now maybe we just keep the other inputs the same style as Novel.

Styling from two other email editors for inspiration: