Page Comparison

Important Links

Goals

As the new channel sidebar in the web app now includes custom categories, we are proposing a V1 improvement to the Mobile app sidebar that includes these categories as well as a few other minor UI updates.

Collapsable Custom Categories

Custom categories are now introduced to align with desktop. These categories are expandable/collapsable.

When a category is collapsed (notice the ‘Favourites’ category below), the channels in that category hide, and the chevron icon points to the right instead of down.

Channel organization

• The ‘Unreads’ category always shows at the top above all other categories

• Use the order for every other category that is in the webapp (including favourites, direct messages, etc).

• Combine Public and Private channels categories in to one ‘Channels’ category (as per webapp)

• Each category is collapsable (except for ‘Unreads’)

Plus buttons

• A New Global + button is added next to the jump to

  • Clicking this will open a bottom sheet with options

• Each category will have a + button to the right of it

  • Clicking the + will open a bottom sheet with options

• The + associated with DMs, will behave as-is (launching the ‘New Conversation’ modal)

Image Added

Animation samples

Collapsing categories animation

• Fade away all channels within so that only the category name remains

• The chevron arrow rotates to point right instead of down

• As the channels hide, the content below collpases upwards

• All the above happens simultaneously with ease-in-out function over a duration of 150ms

Image Added

Other Minor UI Updates

Small refinements to the channel sidebar include:

• Improved alignment with the jump to input

• Changed ‘Jump to…’ to ‘Find channels…’

• Added the global + button

• Rounded corner radius set properly to 4 on team button and jump to input

• Removes the keylines between the header and channels

• Removes the keylines between categories

• Small refinement to the selected state active sliver (algins with web app) for active channel

• Slightly improved contrast on category names and channels that are read

• Slightly enlarged icons for channels