Channels-page design update

[gnprice]

The "Channels" page, which lists the user's subscribed channels, has an updated design in Figma. This issue is for implementing the new design.

Design

For details of the design, see Figma:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6205-25974&m=dev

Differences from Figma:

• The design there shows "pinned" status as an icon at the left. For this issue, we'll continue to instead show pinned channels as a distinct section of the list — this matches how they appear in the web app's left sidebar, and saves a bit of horizontal space to make room for channel names.

  (In the future we might change to the icon-based "pinned" design in both the web and mobile clients.)

• The design there shows a "Filter channels" search box at the top. That is a useful feature but will be a separate follow-up issue.

References

• Issue where we originally implemented this page: Offer a stream list, for subscribed streams #187
• Issue to add the related "All channels" page: Offer a list of all channels, and a way to subscribe #188

[Vrushabh102]

Hey @gnprice I would like to work on this issue.

[aikansh008]

hello sir can you please assign this issue to me

[gnprice]

@Vrushabh102 @aikansh008 I recommend taking a look at our contributing guide:
https://zulip.readthedocs.io/en/latest/contributing/contributing.html#finding-an-issue-to-work-on

[MINEGHOST007]

I have started to work on this issue, I have understood the design I'll make some modular components similar to other widgets and use them in the screen.

I would like to claim the issue.

[gnprice]

Welcome. This is a post-launch issue, and we're focusing on launch issues until the app is launched.

If you'd like to contribute to Zulip, I recommend taking a look at our guide to picking an issue:
https://zulip.readthedocs.io/en/latest/contributing/contributing.html#finding-an-issue-to-work-on