Phase 2

Drag and Drop

1. On Mouse Hover

   1. DMs & Public/Private Channels:

      1. When hovering the mouse over channels or DMs in the sidebar, display a small drag handle on to the left of the channel type/status icon

      2. Mouse cursor: Hand pointer finger

   2. Categories

      1. Mouse cursor: Hand pointer finger  

2. Dragging

   1. DMs:

      1. When a DM is picked up, dim and collapse the “Channels” category 

      2. If dragging a DM over the DMs category, show an indication that the entire DMs category is the drop zone (since DMs cannot be reordered manually in the DMs category)

   2. Public/Private Channels:

      1. When a public/private channel is picked up, dim and collapse the entire DMs category

      2. If dragging a channel over the DMs category, do not show an indication that the channel is droppable.

   3. Categories

      1. When a category header itself is picked up, collapse all categories fully (so no channels exist below them)

         1. Implementation restriction: React DND doesn’t support this. Compromise is to dim all channels in the sidebar when dragging.

      2. Fully collapse the category being dragged, so the draggable is only the category header itself (not including the channels)

   4. Dragging Behaviour:

      1. Items can be dragged in any direction (horizontal or vertical axis)

         1. Show the can’t drop cursor if the cursor leaves the channel sidebar area during the drag

      2. Mouse cursor during drag: dragging cursor (closed hand)

      3. Item being dragged floats beneath the mouse cursor during the drag

      4. If dragging a channel or DM directly on top of an expanded category header, show an indication that the channel will drop in the first channel position for the category)

      5. If dragging a channel or DM directly on top of a collapsed category header, allow it to be expanded by hovering for a few seconds

         1. Implementation restriction: React DND doesn’t support this. Compromise is to not expand the category during hover with the draggable.

      6. Scrolling while dragging should be allowed when the user's cursor reaches near the top or bottom of the window with the dragged item. Scrolling while dragging should be smooth, not sticky or jumpy.

      7. Pressing ESC while dragging cancels the drag operation and returns the item to its original position

   5. 
      
      

3. Dropping

   1. DMs

      1. DMs can be dropped in any category except Channels

   2. Public/Private Channels

      1. Channels can be dropped into any category, except Direct Messages

   3. Categories

      1. Categories can only be dropped above or below another category.

      2. Once the category is dropped, scroll the sidebar (if necessary) to make sure the category header is in view

   4. Dropping Behaviour:

      1. Dropping a channel onto a category header directly will always place the channel at the top of that category.

         1. If the channel being dragged is read, expanded the category after the drop

         2. If the channel being dragged is unread, do not change the category collapse state when dropped

      2. If items are dropped in unacceptable drop zones (ie blank spaces in the sidebar, channels dropped in DMs section, etc), return the item to its original position with a brief animation so the users understands what happens

      3. If a category is collapsed but has channels visible within it (ie unreads or the currently active channel), a user can drop a channel between any of the visible channels. The position of the dropped channel when the category is expanded is placed below the visible channel above it.

         1. Don’t expand the category when dropped

Categories

1. Creating Custom Categories

   1. On the plus button in the channel sidebar header, add an option to the menu at the bottom for “Create category”

      1. This opens a modal titled “Create category” with a text box and buttons “Cancel” “Create”

         1. Help Text: “You can drag channels into categories to organize your sidebar.”

         2. Similar to creating channels with long channel names, after a character count of 22 is reached, do not allow user to type more characters

      2. Clicking “Create” adds the category in the channel sidebar as the first category, unless Favorites is the first category, then the new category is added below Favorites.

         1. Scroll the channel sidebar accordingly so the new category is in view for the user

         2. The new category is added in the sidebar with the arrow showing in the expanded state

         3. When a category is created:

            1. Add a “New” badge in the category header

               1. Badge disappears when a channel is added to the category or on page refresh

               2. Badge is replaced with the … icon when hovering over the category header

            2. Show UI indication of the channel drop zone with text “Drag channels here…”. This UI disappears if:

               1. A channel is added to the category

               2. Page is refreshed

               3. Category is collapsed

            3. If the category name is too long to fit in the sidebar, truncate it with …

      3. Rename Category

         1. Click the “Rename Category” item from the category header menu:

            1. This opens a modal titled “Rename Category” with a text box and buttons “Cancel” “Rename”

               1. The “Rename” button should be disabled upon opening the modal

               2. Clearing the input should keep the button disable and show the input placeholder text “Choose a category name”

               3. The category name text should be selected with the text cursor at the end of the string and set the input field to a focused state

            2. Remove the help text under the input field as it’s not needed in this context

            3. Enable the “Rename” button after a change is made to the current category name

            4. Clicking “Rename”:

               1. Closes the modal

               2. Renames the category 

               3. Updates it in the channel sidebar and ‘Move to’ menu options

2. Combine Public Channels and Private Channels categories into a Channels category

   1. Place unmuted channels (sorted alphabetically) above muted channels (sorted alphabetically)

   2. Archived channels will work as they do today, no functional changes.

      1. When a user views an archived channel they’ll appear temporarily in the Channels category

3. Direct Messages Category

   1. Show a persistent “+” button in the direct messages category header

   2. When hovering over the Direct Messages category header, show a button to toggle between recent or alpha sorting for conversations within the Direct Messages category.

      1. When toggle is on recency (the default sort), show the recency icon and sort the channels by order of the most recent message in the channel (your own messages included)

      2. When toggle is on alpha, show the alpha icon and sort the channels in alphabetical order. 

   3. DMs cannot be manually reordered within the DM category 

   4. Show a maximum of 20 direct/group messages in the sidebar

      1. If the user has more than 20 conversations, show the 20 with the most recent activity

         1. Recent activity is considered the greater of “last_viewed_at” time or timestamp of the most recent message in the channel. 

   5. If there are 20 conversations in the sidebar already and the user receives a new message in a DM or GM that isn’t in the sidebar yet, or opens a new DM or GM, then remove the conversation from the sidebar that has the oldest recent activity (as defined above). 

   6. If there are over 20 unread DM’s, show all unreads DMs in the sidebar

1. Muting Channels

   1. Explicitly muting or unmuting a channel in a category keeps the channel in it’s current sort order in the sidebar

Quick Access Menus

• Menus on Categories

  • Three dot icon will be present while hovering over the category header. Clicking the … menu or right-clicking on the category header should open a menu with the following options: 

    • Favorites

      • Mute/Unmute category
        ----------------------------

      • Create new category

    • Channels Categories:

      • Mute/Unmute category

      • Create channel (dependent on user permission)

        • Adds the newly created channel to the top of the category header

      • ------------------------------------------------------------------

      • Create category

    • Direct Messages Category

      • No … menu (See below) on the DM category header

    • Custom Categories

      • Mute/Unmute category

      • Rename category                   

      • Create channel (dependent on user permission)

        • Adds the newly created channel to the top of the Custom Category.

      • Delete category

        • Opens a confirmation modal, title: 

          • Title: “Delete this category?”

          • Help text: “Channels in category_name move back to the Channels and Direct Messages categories. You are not removed from any channels.” 

          • Buttons: [Cancel] [Delete]

      • -------------------------------

      • Create category

• Menus on Individual Channels

  • Three dot icon will be present while hovering over individual channels. Right-clicking on a channel will bring up the same options: 

    • Public and Private Channels

      • “Mark as read”

        • When selected: closes the menu and unbold the channel in the sidebar 

        • If a channel has no new messages, the option will be hidden in the list.

      • “Favorite” / ”Unfavorite”

        • When selected: close the menu, favorite the channel and move it to the top of the Favorites category. 

        • If a channel is favorited, the menu option will read Unfavorite with the star icon filled in to match the state in the channel header.

          • Clicking unfavorite will close the menu, unfavorite the channel and move it to the top of the Channel category.

      • “Mute channel” / “Unmute channel”

        • When selected: close the menu, mute the channel

        • If a channel is muted, the menu option will read Unmute channel with the muted icon showing to match the current state of the channel.

      • “Move to”

        • Hovering over the “Move to” option will open a secondary menu showing: 

          • All the categories that currently exist, except Direct Messages and the current category the channel is in

            • Order of the categories in this submenu should match the order in the sidebar

          • A separator line, followed by a “Move to new category” option

            • Creating a new category from this flow will drop the selected channels into the new category after category creation.

        • Moving a channel via the “Move to” will move it to the top of the category selected.

      • “Copy link”

        • When selected: close the menu, copies the channel URL to the clipboard

      • “Add members”

        • When selected: close the menu, opens the current Add members modal for the channel

        • Only appears if user has permissions to add members

      • “Leave channel”

        • When selected: close the menu, leaves the channel

          • Private channels will open the existing confirmation modal

    • Direct Messages and Group Messages

      • “Mark as read” (only appears if the channel is unread)      

      • “Favorite” / ”Unfavorite”

      • “Mute conversation” / “Unmute conversation”

      • “Move to” 

        • Show all categories in the submenu, except the category the conversation is currently in 

      • “Close conversation”

• Browse or Create New Channels

  • Browsing (joining) a channel via the “Browse Channels”, or creating a new channel via the “Create Channel” option from the top level “+” icon button will place the channel at the top of the “Channels” category.

    • If the “Channels” category is not in view, we should scroll the channel into view

  • If users are added to a channel, place the channel at the top of the “channels” category