Convert message list to new, 2023+ design

[gnprice]

In the current prototype, the visual design of the message list is based closely on Zulip web's design as it was last December, when I started on the prototype and wrote most of the code we have for that so far. This also makes it broadly similar to the zulip-mobile RN app, which uses a design based on the same generation of Zulip web's design.

Since then Zulip web has undergone a substantial redesign, to designs by @terpimost:
https://blog.zulip.com/2023/05/31/zulip-7-0-released/#redesign
and some of the major changes there are in the message list. Among them:

• Stream/topic recipient bars have the stream color the whole way across, are taller, have the stream name and topic in bold, and other changes.
• Background colors for DMs and for messages with @-mentions have changed:
  • content: Highlight non-silent mentions of the self-user #647
  • msglist: Use special background color for DM messages #681
• The styling of @-mention pills themselves has changed. (content: Distinguish direct and wildcard mentions #646)

We should target the new design, instead of the old.

Probably the way to do this is to basically go from scratch, rather than incrementally modify the existing design. (This is one advantage we have as a prototype compared to making the same change in web.) That means:

• In all the places in widgets/message_list.dart and widgets/content.dart where we're controlling styling and layout, expect to rip that code out and replace it with newly-written code. (On the other hand, the code that's about finding appropriate data to show, or walking a ContentNode tree, should mostly not need to change for this.)
• To write the new versions of that code, repeat the reverse-engineering work I did back in 2022-12 on web's design, but this time on the new design. Look at the corresponding rendering in web using browser devtools; refer to the CSS styles for exact values for spacing, a rounded corner's radius, and so on; and use Flutter desktop to put the prototype side by side with web on screen, and Flutter's fast hot reload to dial details in exactly.

We won't want to match web's design exactly:

• Notably there's that wide gutter at the right of the message content, which is costly on a mobile-sized screen and in any case serves no purpose on a touchscreen because it's just reserving space for UI to appear on hover. So we'll cut that gutter.
• The "blue box" cursor is for the sake of keyboard shortcuts, and we'll leave it out.
• There's probably some other aspect of the message list where there'll be a good reason for mobile to differ from web, but I'm not thinking of one right now.

[terpimost]

If confused about anything or willing to simplify design because of any reason please tell me and I try my best to help

[gnprice]

A note for when we take this on: I think it will make sense to pursue both the light theme and dark theme at the same time.

That's because I think that when we're in the midst of doing that reverse-engineering work described above, it will be relatively little work to include the dark-theme version of a given area of the design in addition to the light-theme version, compared to the work that would be involved to complete the reverse-engineering for one theme and then at some later point come back and get back into the reverse-engineering to take care of the other theme.

In the code, this probably means:

• Add some way, possibly crude, to switch between dark and light themes (ui: Implement dark theme #95). For work on this issue, that could be just that you edit the ZulipApp code to pass brightness as demoed in that issue's description, and use hot reload to switch back and forth. A perhaps nicer version might be a switch that appears in the app bar, perhaps only in the app bar of MessageListPage.
• Then whenever specifying a color in the message-list code, use Theme.of(context).colorScheme.brightness to tell if the current theme is dark or light, and condition the color on that.

[gnprice]

Ah, and thanks to @sirpengi for locating the zulip-mobile issue where @terpimost previously walked through a mobile version of the new design for the message list:

• UI redesign: message content layout zulip-mobile#5511

So I think that design is the place to start from. For all the details it doesn't cover, we'll fall back to reverse-engineering web as described above.

Here's also @terpimost's Figma design for the message list:
https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=538-20300

[gnprice]

I've just filed two sub-issues of this:

• New-style stream/topic recipient bars #372
• New-style DM recipient bars #373

which we'll want for the upcoming Beta 1 milestone. We'll pursue the rest of this for Beta 2.

[gnprice]

This umbrella issue has already been partly split up into individual issues. The next step is to finish doing that, and close the umbrella issue so we can track the individual pieces separately.

[gnprice]

We've resolved quite a lot of the content of this umbrella issue already, as seen in the backlinks above from numerous issues and PRs.

I just made a pass through the code mentioned in the description:

In all the places in widgets/message_list.dart and widgets/content.dart where we're controlling styling and layout, […]

and also looked around the message list in the live app to look for anything that seemed like the old design.

I think at this point there's only a few pieces of this umbrella issue that remain open. Those are:

• content: Distinguish direct and wildcard mentions #646
• content: Highlight non-silent mentions of the self-user #647
• msglist: Use special background color for DM messages #681

Also related are:

• Sibling layout interactions in content, like p+ul #162
• Tweak dark theme for slightly higher contrast #973
• Fuse recipient header into app bar for topic narrows #1039
  (which I filed just now, in the course of doing this review)

With that, I'm closing this umbrella issue.