Home View

Important Links

Summary of what’s new

1. Sidebar = Home

2. Header Updates

3. A new Team Menu

4. UI Updates to Channel Menu Items - including the use of avatars for DMs

5. Collapsable custom categories (will be done in v1 of the app: MM-28474: RN: Implement mobile MVP for Channel Sidebar CategoriesResolved)

6. Access to Threads view (above the channel list)

7. Revised Channel Organization

8. A New ‘Find Channels’ UX

9. A new Team Sidebar

10. Multi-Server Support

Home View

With the new mobile v2 app, the sidebar is no longer a sidebar, but the ‘Home’ view, which is accessible from the new bottom tab bar.

Header Updates

The new Header in the Channel Sidebar now displays:

• The Team name

• The Server name

• A new Team Menu to access key team functions not currently accessible in the app

• Updated Jump to input to Find Channels. Details for the Find Channels UX: Find Channels

• A new Servers button (see below)

Multiple Teams - No Servers Button

 

Open

When a user has multiple teams, the Servers Button does not display in the header area - it displays above the team sidebar (see below)

Single Team - Server Button Visible

 

Open

When a user only has one team, the Servers button displays as part of the Channel Sidebar Header since the Team Sidebar is not visible.

In Context

And this is how it displays in the context of the rest of the Home Screen.

When multi-server is not allowed

In cases where EMM providers do not allow their end-users to add other servers, the server button does not display. When this is the case the layout needs to adjust slightly. For multiple teams scenario, the team bar moves up to collapse the space where the servers button was. For a single team scenario, the the header moves to the left to collapse the space where the server button was. See screens below for reference.

Connectivity issues

Team Menu

The new team menu is accessed through the dropdown menu at the Home screen. Depending on scope and complexity, certain elements from this menu may not be included in phase 1. The proposed menu items are:

• View Members: a new modal that would show a listing of Team Members (similar to the web app). This item may be cut for phase 1

• Invite People to this Team: a new modal for inviting members. This item may be cut for phase 1 due to complexity of introducing an entirely new flow

• Join Another Team: This menu item only shows if the user has access to create or join other teams. If so, this opens the Join Team Bottom Sheet.

• Leave This Team: Opens an alert to confirm the destructive action. Once confirmed, removes the current team from the sidebar.

Plus + Menu

• Open Direct Message: opens the existing ‘New Conversation’ modal

• Create a New Channel: opens an action sheet to choose between New Public Channel and New Private Channel

• Channel Directory: opens the existing 'More Channels' modal

Access to Global Threads

Once the new threads UX is implemented, a global ‘Threads’ menu item will display above all channels in the sidebar.

UI Updates to Channel Menu Items

The Channel Menu Item component has been updated with the following:

• Avatars for DMs

• Larger channel icons for better balance

• Updated Mention Badges to align with web app badges

States

Unread, Mentions

Types

Collapsable Custom Categories

Custom categories are now introduced to align with desktop. These categories are expandable/collapsable. This work is currently underway with v1 of the app and should carry over to v2. See the Jira ticket.

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.

In Context

Below shows the expandable/collapsable categories in context of the entire sidebar.

Collapse/Expand Animation

animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
animation-duration: 250ms;

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’)

Gesture Transitions between Channel View and Home View

• From the Channel screen, swipe right from the left edge to return Home

• From the Home screen, swipe left from the right edge to return to the last active channel

Tablet Layout

Landscape

Portrait