UI redesign: compose box

[terpimost]

The new design for the compose box, discussed here

Light	Dark

Work on this issue is being tracked as:

• UI redesign: compose box - typeahead (popovers for autocomplete) #25116
• UI redesign: compose box - send options #25117
• UI redesign: compose box - banners #25118
• Migrate compose typeaheads to Tippy #28592
• UI redesign: add counter to compose box Drafts button #28696
• Redesign "go to conversation" button #28697
• UI redesign: popover menus #28699
• Change "copy" icon #28700
• Redesign "View message source" UI #28701
• Move compose box buttons into text area #28702
• Remove denominator in character counter #28706 (colors)
• Move compose expand/collapse button into text area #28791
• Update compose box icons #28792
• Remove color block from the stream dropdown #28796
• Implement 3-way compose box resizing #29966

We will likely file additional specific issues as we close out these ones. #28588 also tracks some follow-ups to be filed.

---

Live demo with the source code on GitHub. Here is the decomposed source code archive (possibly outdated; consult the GitHub links):
compose-decomposed.zip

The css code is split to decomposed areas but all the js code is in a single file. The file isn't big so it is easier to follow the logic of interactions between html and js.

Not all interactions are handled. Prototype is focused on styles and new interactions which are not currently present.
For example it doesn't suggest TAB order but does suggest focus styles on different elements.

The integration is expected to be complex. With clarifications and tuning during the process.

Notes on this interactive prototype

Inline editor

First editor is in not editable state and with a copy button:

Character counter should be enabled once the input reaches the limit (I didn't do that logic for inline editor)

Popovers

• No pointing arrows for typeahead (autocomplete) popovers.
• For send-more menu I don't think we need a pointing arrow but I'm not against it:
• Drafts becomes an item of send more popover in mobile version:
• Radio buttons should be switched by JS reacting on click on the whole row:
• In typeahead popover there could be no 2 selected items like this , so when one item is highlighted and mouse hovers another element, the previous element should be de-highlighted.
• Scroll bars made via styling browser bars, but we might want to use simple bar here for the better control.
• Popover background isn't white, to be able to place interactive input field with white background like this
  . Also it is ok to have styles of these popovers not like styles of general context menu popovers.
• We had discussion about colors of user statuses and agreed with @alya on the latest contrast

Drafts

Drafts button is present in the desktop version, but the counter of drafts should be shown only for the relevant conversations when there is any number. For other than desktop versions we hid this counter due to space limitation.
The space should be enough to fit all the translations of the Drafts keyword, but it is ok to cut it if it doesn't fit.

The maximum displayed number is 99+

Topics

Click on the topics selects the whole input
. This is intentional, so the user can replace topic with another one.

This prototype assumes that we have feature of naming (no-topic) with General chat in english version. Here is one of the related discussions.

Go to topic button appears in front of the topic/users input field:

Streams

This prototype assumes that we have switcher to DMs with Streams selector:
. DM should be shortened in the selected state, so input filed of users could be wider.

Banners

Updated styles of banners is provided. To see them, click on Send button: . Also input 9,500 characters and above 10,000 to see error and warning banners:

Message input field

The message input field is content editable block and not a text area. So many cases of pasting the content are not handled. For example images and their styles. If we are going to show images here their styles should have width:100% to not extend the compose box width. Or there could be other ways to constrain the width of the message input box.

[zulipbot]

Hello @zulip/design, @zulip/server-compose members, this issue was labeled with the "area: compose", "redesign" labels, so you may want to check it out!

[Ddharmani3]

@terpimost I would like to work on this issue can you please assign this to me?

[alya]

@Ddharmani3 As noted in the contributor guide, please choose an issue with the "help wanted" label. Thanks!

[zulipbot]

@karlstolley You have been unassigned from this issue because you have not made any updates for over 14 days. Please feel free to reclaim the issue if you decide to pick up again. Thanks!

[tgross35]

Has the collapsed compose box & draft behavior been considered as part of the design?

I think the current behavior is somewhat confusing, where clicking or ESCing both hides the compose box and creates a draft. It's a bit too easy to accidentally click somewhere and send your message to a draft.

My suggestion is that the collapsed compose box should be thought of as having the same state/content of the normal compose box, just condensed and read-only: that is, clicking/ESCing should continue to minimize the box, but the minimzed box should have the first line of text visible instead of the Message #general>... subtle text. Then clicking on this maximize the box. I would prefer an explicit "save draft" button, or to save the draft when navigating away.

This relates to #18555, but it seems that is more about handling when drafts are stored to the server as opposed to keeping them in the same view when the box is minimized.

[terpimost]

Note from Zulipchat:

• We use X button in open compose box instead of New Topic
  In the closed compose state, starting a new topic is the main action we expect this button to be used for, since replying to an existing topic is likely to be done by navigating to it in the sidebar.
• In a stream view, same as the current "New topic" button.
• In a DM view, same as the current "New direct message" button. Note that the plan has been do drop the "New direct message" button in the new design.
• In other views (e.g., Recent conversations), open the compose box with the destination dropdown open, like the "New stream message" button in the version currently deployed on CZO.