Improve stream topic view

[alya]

At present, it's possible to view the list of topics in a stream by clicking the three-dot/line icon the stream header bar. We would like to make this view more prominent, likely as a default stream view. As a pre-requisite, we should make some improvements to this view:

1. Add a stream header bar. This should be the same as the bar we have in the interleaved stream view, but with a different icon replacing the three-dot/line icon. That icon should take the user to the interleaved stream view. I'm not sure what icon to use -- perhaps three lines without dots?

2. Move search to a separate view. The primary use of the list of topics is not search, so we should move topic search to a separate view, which will be accessed via a new magnifying glass icon in the header bar.

3. Make topics list more clickable. At the moment, it's not very obvious that one is intended to click on topics; they parse more as a bunch of text. We can try to address this by adding decorators (perhaps >) and increasing line spacing. The latter will also decrease the chance of mis-clicks. (For example, channel lists in Slack and Discord have decorators and much more spacing.)

Related issues: #4529, #4535.

---

Update: We will not need a special icon in (1) or decorators in (3); this is the redesign direction:

[merilaclau]

Hi @alya I'd love to try this one out! I have a couple questions though.

1. Add a stream header bar. --> Do you mean that after clicking on the three-dot/line icon, there should be a header above the current search bar?
2. Move search to a separate view. --> Aside from the search input field, should this view still display the entire list of topics below the input field?
3. Make topics list more clickable. --> we could definitely add decorators. Another possible solution could be to give each topic the same background color as the stream and a 50% border radius (which would look pretty much like the help wanted label in this issue).

[alya]

1) Yes, though we'll actually remove the current search bar in (2). 2) Yes, I think the topics list can stay the same. 3) Please feel free to try both options and post screenshots for feedback.

Thanks! I'm excited to have your help on this issue!

[merilaclau]

Hey @alya Quick question =) Started working on subitem 3 first. Just wanted to check with you if the decorators should also be visible on the home screen or if they should only be displayed when accessing the topic list from the stream header button. Please see screenshots below:

[alya]

Good question! I was originally thinking just the one-stream view, but I think it would be worth discussing the home screen question on a CZO thread.

[sumj25]

Hey @alya @merilaclau can i work on this issue?

[alya]

Looks like @merilaclau hasn't been active for a while on this issue, so assigning it to @sumj25 .

[johnathanz]

A bit late to the party, but I was checking out this feature for Zulip as we're in search of a Thread, async first chat app.

Coming from Twist, which unfortunately is no longer being developed, the way it handles Threads list is pretty simple.

Currently when I click a Channel name in Zulip, I go to the first Thread (in Web app) - which doesn't make much sense to me.

Whereas in Twist, clicking a Channel name:

• displays the list of all Threads in Channel, grouped by when they were started, along with the last reply in the thread
• indication icons next to Thread if there are notifications specific to me
• I can scroll down the list to see all Threads in the Channel

See https://www.youtube.com/watch?v=2Q29kcmj9mI

Might be a design pattern that Zulip could borrow / improve upon?

[alya]

@johnathanz Thanks for the suggestion! In the Zulip web app, you can see a similar view in Inbox and Recent conversations. There are @-mention indicators, and you can follow topics as well.

The issue for implementing this view separately for each channel as well is https://github.com/zulip/zulip/issues/29574; it's likely that this will be picked up for the next major release.