Show unread counts in list of recent DM conversations

[gnprice]

This is a followup to these two issues:

• Track unread counts #253
• ui: Add list of recent DM conversations #119

Our original implementation of #119, the list of recent DM conversations, didn't show the unread counts, because we didn't yet have the data model #253 for them. Once we have that data model, we should add that UI.

For the design, see #119, in particular #119 (comment) and @terpimost's Figma design at https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=442-18279&mode=design&t=4gzhffidomEdPbSt-0 .

[chrisbobbe]

Greg, @terpimost, do we want to show an "@" sign when the conversation has an unread @-mention in it, as is the norm when showing unreads for streams/topics? It looks like we don't have those for DMs in zulip-mobile or in the web app, but it seems like a nice thing to offer.

There's an SVG "@" sign icon in Figma (taken from a design for a streams/topics list):

<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g opacity="0.5" clip-path="url(#clip0_1475_19582)">
<path d="M7.00008 9.33366C8.28875 9.33366 9.33342 8.28899 9.33342 7.00033C9.33342 5.71166 8.28875 4.66699 7.00008 4.66699C5.71142 4.66699 4.66675 5.71166 4.66675 7.00033C4.66675 8.28899 5.71142 9.33366 7.00008 9.33366Z" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.33342 4.66663V7.5833C9.33342 8.04743 9.5178 8.49255 9.84598 8.82074C10.1742 9.14892 10.6193 9.3333 11.0834 9.3333C11.5476 9.3333 11.9927 9.14892 12.3209 8.82074C12.649 8.49255 12.8334 8.04743 12.8334 7.5833V6.99996C12.8333 5.6834 12.3879 4.40558 11.5695 3.37427C10.7511 2.34297 9.60791 1.61884 8.32579 1.31964C7.04368 1.02043 5.69805 1.16374 4.50771 1.72626C3.31736 2.28878 2.35232 3.23744 1.76949 4.41797C1.18666 5.5985 1.02032 6.94148 1.29752 8.22853C1.57472 9.51558 2.27916 10.671 3.29629 11.507C4.31342 12.3429 5.58342 12.8102 6.89979 12.8328C8.21617 12.8554 9.50148 12.4321 10.5468 11.6316" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_1475_19582">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

and I think that would be easy to bring in with tools/build-icon-font. Vlad, is that a Zulip custom icon that's ready to be used?

[gnprice]

My inclination is no — if you send someone a DM, that's already meant to be as high an indication that you specifically want their attention as an @-mention would be.

I guess the indicator could be helpful for some group threads where there's a lot of discussion that's only immediately actionable for some of the people in the thread. But really the right answer in that situation is to make a stream.

[alya]

Yeah, not showing @ in DMs was an intentional choice in the web app for exactly the reason Greg described.