UX Spec: Multi-Window UX
Overview
This design spec outlines the enhancements to Mattermost's desktop and web application to allow users to open popout windows for channels, threads, and other functions, facilitating improved multitasking and monitoring capabilities.
This enables users to engage in multiple conversations simultaneously without losing context, thereby enhancing operational efficiency and collaboration.
Definitions
Server: A configured Mattermost server identified by a name and URL. Is housed in a tab.
Primary View: The parent tab for a server. Handles login, logout.
View: A self-contained part of the Mattermost Web App, like a Thread, or a Channel. A View can appear as a Tab or as a Pop-out Window.
Tab: A view attached to the Main Desktop App window similar to a Chrome tab. This can be an isolated view or an entire server view attached to it.
Pop-out Window: A separate standalone window in the Desktop App that houses a single View. It has been ‘popped out’ from the Main Desktop App window.
Server Menu: A dropdown list showing all configured servers in the Desktop App. Clicking a server opens a new tab for that server.
Opening channels in new windows
Users can open any channel in a separate window via an "Open in New Window" option accessible from the channel menu and the left sidebar. When a channel is opened in its own window, it opens in an isolated view without all the other navigation surrounding it.
There are a few ways to do this:
From the left sidebar | From the channel menu | From the channel header |
|---|---|---|
 |  |  |
Command/CTRL-click a channel to open a new window
From the LHS channel list, users can also use Command/CTRL click to open a new window
Question: what about opening in a new tab? What shortcut for that?
Window specifications
Default size: 920px x 640px
Title that displays in title bar: {Channel name} - {Team name}
To start, we will use the native window bar
Navigation within a channel window
Within a channel window, users can:
Threads → open the RHS in the active channel window
Once a thread is open in the RHS, it can also be popped out in to its own window
Channel or thread links external to the active channel → open in the main window (bringing focus to that window)
RHS panels for pinned messages, files, members, info, etc → all open in the RHS in the active channel window
Opening threads in new windows
Users can also open any thread in a separate window via an "Open in New Window" option accessible from the RHS header button or Thread inbox view. When a thread is opened in its own window, it opens in an isolated view without all the other navigation surrounding it.
There are a few ways to do this:
Thread RHS header button | Threads header context menu | Threads header button | Threads list context menu |
|---|---|---|---|
 |  |  |  |
Changes to the RHS Header
The new window button replaces the expand button in the RHS.
The new window button is hidden when the thread is viewed in the popout window
The close button is also hidden in the header when viewed in the popout window
In the Threads view a new window button is added next to the ••• button
Window specifications
Default size: 840px x 720px
Title that displays in title bar: Thread: {Channel name} - {Team name}
To start, we will use the native window bar
Navigation within a thread window
Within a thread window, users can:
No navigation within the thread window. Links external to the active thread → open in the main window (bringing focus to that window)
Opening RHS plugin content in new windows
To start, we’re thinking of allow Playbook Runs and Copilot to be opened up in new windows.
Window specifications
Default size: 920px x 640px
To start, we will use the native window bar
Changes to the tab behavior in the desktop app
In addition to multiple windows for the above views, we will also support multiple tabs.
No more default product tabs
We will be changing the behavior for the ‘Channels, Playbooks, and Boards’ tabs. Those will no longer be default tabs.
Multiple view tabs for a server
The ‘Main Window’ for a server must always be open to maintain the state and notifications for that server. Additional views from a server can be opened through the methods identified above. When switching servers, all tabs within that server are remembered from the last state.
If the title of a tab grows beyond the available (or max width), we will show a tooltip on hover with the full title for the tab. (will need to be a native tooltip)
Max-width for a tab should be 240px
Closing a server tab
Any tab in the desktop app bar can be closed and the re-opened through again through the server menu.
The main tab for a server cannot be closed
Opening a new server tab
Opening a new tab must be done through the ‘open in new tab’ option for a channel, thread or RHS.
Behavior for opening products from product switcher
When a product (e.g. Boards) is clicked from the product switcher menu, by default the current window context will be replaced with that product.
An ‘open in new tab’ icon will be available on hover to open the product as a separate tab. Command/Ctrl-clicking the menu item will also open in a new tab.
Moving a window to a tab
For any window view, right-clicking on the top bar opens a context menu (native OS context menu) with the option to move to the main window. This will then add it as a tab back in the main window for it’s server.
Moving a tab to a new window
For any channel, thread or view that is in it’s own tab (aside from the main server tab), users can right-click to open a context menu (native OS context menu) with the option to “Move to new window”.
NOTE: these options would not be available on the main tab for a server.
Considerations
Notifications and unread sync
If a view is focused, suppress notifications for its content.
If a view is open but not focused, show a notification and shift focus to the view.
Prevent duplicates across multiple open views of the same thread/channel.
Synchronize read/unread states across all open views.
Inactive tabs/windows
If a window or tab has been inactive for more than 1 hour, it can be suspended to reduce memory/CPU usage. When refocused, there will need to be a loading spinner.
If a notification or unread comes in on an inactive view, it can be considered active again and woken up.
Window and Tab Limits
Tabs: If a user opens more than 15 combined views (tabs + windows), we can warn them of performance degredation:
“Opening many windows or tabs may reduce performance. Consider closing unused views.”
Navigation and Deep Linking
The following UX navigation patterns are enforced by the underlying architecture:
Intra-server navigation always stays within the current tab or window.
Cross-server links will:
Open a new tab for the destination server (if not already open), or
Focus an existing tab for that server.
Pop-out window navigation (e.g., thread or plugin views):
Cannot navigate freely—external links or disallowed paths are passed back to the parent window and either opened in a browser window or in a server tab if it’s a link to another server that is configured in the app.
Specialized windows (like the Calls widget) may have custom logic.