Phase 1

Expand and Collapse Categories

• All categories will be collapsable:

  • Favorites

  • Public and Private Channels

    • Phase 2: We’ll be combining Private and Public in to a single category

  • Direct Messages

• Collapsing

  • Collapsing categories only displays unread channels

  • Channels drop off from view once a channel has been read and a user switches to another channel (via selecting another channel or using keyboard shortcuts + channel switcher).

• Expanding

  • Show all channels in the category

• Expanded and collapsed states

  • Saved through reload when the unread filter is OFF

  • Expanding or collapsing categories with the filter ON does not save those expand collapse states if the unread filter is turned off

  • Expanded and collapsed states should apply to other sessions in real time

• Animations

  • Expanding and collapsing categories will be subtle with a 50ms transition

    • Will this cause performance issues?

  • Hovering effect over the category header will be instant

  • See prototype for behavior

• Click area for collapsing/expanding is the entire header and blank space to the right (see prototype). 

• No sorting changes are applied when the categories are collapsed/expanded

• Muted channels

  • Muted channels with unread messages will collapse, unless there are mentions

• Future considerations

  • Collapsing categories may collapse all read and unread channels/direct messages, rather than just the read channels. We may consider adding a setting for how collapsing behaves

Unread filter mechanism. 

• This button acts as a toggle to apply or remove the unreads filter

  • Functionality: Turning the filter on, quick collapses (see above notes on collapsing) all sections to display unread channels only.

• States:

  • Default (unselected) with the following display text next to the button (see design for details):

    • Title: VIEWING:

    • Label: All channels

  • Hover with a tooltip that reads:

    • When the filter is OFF: “Filter by unread”

    • When the filter is ON: “Show all channels”

  • Selected with the following display text:

    • Title: FILTERED BY:

    • Label: Unread

• Refreshing the page when the unread filter is turned ON will turn OFF the unreads filter and revert the collapse/expand states to how they were set before the unreads filter was enabled.

• Future considerations

  • Unread filter may extend to other filter options, like:

    • Mentions only

  • Should the button have an indicator that there are actually unread channels?

• 
  
  

Channel switcher moves to the top of the sidebar

• Remove the channel switcher from the bottom of the LHS and move it to the top of the LHS directly below the header with updated UI (see prototype)

• Clicking the input with open the Channel Switcher modal, keeping the current functionality

• Fix the position to the top of the sidebar so it does not scroll with the categories

• On hover reveal the keyboard shortcut in the button with the hover effect (see prototype)

  • Windows: Ctrl+K

  • Mac: Command symbol + K

• Future considerations

  • Channel switcher filtering channels in the LHS similar to mobile jump to rather than opening a separate modal. In this case:

    • Clicking the input will expand the input control to the full width of the LHS (minus the margins)

    • Once a user inputs a character(s), the channels with filter out to match the character input

    • A clear ‘X’ will be present on the right of the input to allow users to click to clear the input and reset the channels list

    • Clicking outside of the input will close the input and return it to its default state

    • The list will stay filtered while the input is selected

      • Corner cases: Introduce a notification toast if the user leaves the input selected for an extended period of time to prevent them from missing messages

History arrows to go back and forth through viewed channels/direct messages:

• We’re adding controls to the UI for the already functioning keyboard shortcuts:

  • Back in history: ⌘[

  • Forward in history: ⌘]

• History arrows show on desktop only

  • On webapp, the Jump to... bounding box should extend the entire width of LHS

• Enable BOTH arrows when a user can move back and forth between recently viewed channels.

• Disable the BACK (left) arrow when a user navigates to the channel they landed on when opening Mattermost for the first time or clear cache/history.

• Disable the FORWARD (right) arrow when a user navigates to the most recently viewed channel

New entry point for creating and joining channels

• We are consolidating and moving the Browse and Create channel actions to the top of the LHS

• Add a + button inline with the Unread filter but float to the right (see prototype)

  • The + button will open a menu with the following options

    • “Browse channels”

      • Opens the More channels modal, keep the current functionality

    • “Create new channel”

      • Opens the create new channel modal, defaulting the modal to the “public” radio button

    • Phase 2: “Create a category”

      • Clicking the option will open a Create category modal and users will be able to name the category and add it to the sidebar

    • Permissions considerations

      • If no permissions for creating public or private channels

        • “+” button should directly open the More channels modal, no dropdown should exist. 

      • If permissions exist for creating public channels but not private

        • Use the currently existing “Create new channel” modal that only allows public channel creation

      • If permissions exist for creating private channels but not public

        • Use the currently existing “Create new channel” modal that only allows private channel creation

  • Remove the More… text link from the bottom of the public channel category

  • Remove the + button in the Public and Private channel category headers

    • Keep the + button for Direct Messages only

    • Open the Direct Message creation modal, keep the current functionality