Bookmarks Bar

The bookmarks bar appears right below the channel header on Professional and Enterprise licensed servers. The bookmarks bar is not visible on Team edition servers.

Mobile

• The bookmarks bar should be hidden by default on mobile if there are no bookmarks.

• If there are bookmarks however, the bookmark bar would appear.

• There is no way to hide/show the bookmarks bar on a user+channel level on mobile.

• The plus button for adding bookmarks is fixed to the right, while the bookmarks scroll horizontally.

Open

Desktop

The bookmark bar would appear on a channel by default even if you do not have a bookmark.

Open

Adding a bookmark

Mobile

A user can add a bookmark by doing two things.

1. Clicking the plus button on the bookmarks bar.

2. Clicking the plus button in the channel info modal.

Desktop

There is only one way to add a bookmark on desktop, using the + button on the bookmarks bar itself.

Adding a bookmark popup/dropdown

Mobile

If you click on add a bookmark, a popup appears allowing you to choose a file or a link.

Desktop

A dropdown appears, allowing you to add a link or a file.

1. Adding a link

A user can add any valid link. As soon as the user enters a link, we fetch the favicon image and page title, and display it. The user has a choice to change the title or the image to whatever he wants.

A spinner should also appear when the image and title is being fetched.

If no favicon is found, a fallback bookmark icon is used.

Updating bookmark icon

The user should be able to revert to the original bookmark icon if needed. So we would be storing that in the emoji picker. If not that, we can have a reset link if easier to revert back to the original icon.

Mobile

If the link is invalid, we’ll show an error:

If the link cannot pull in a favicon, we’ll show the fallback icon:

Desktop

2. Adding a file

As soon as the user clicks on attach a file, a user can go through the same process as the attach file option in the post menu.

The user can only add one image at the time, and would have the option to change the image icon appearing on the bookmark and title.

Mobile

Desktop

How it displays with other banners

It would always be pinned right below the channel header.

Editing a bookmark

Mobile

You can see bookmark settings by long pressing on it. That would open the edit bookmark menu, allowing you to edit, delete, and share the bookmark.

On mobile we would have these options:

• Edit

• Copy link

  • Will not be visible for files if public links are disabled.

• Share

• Delete

Desktop

On desktop, a “…” icon would appear on hover, that the user can click to get two options.
Edit, and Delete.

On desktop we would have these options:

• Edit

• Copy link

• Delete

Opening bookmarks

1. Opening a file bookmark is going to behave exactly how clicking on a file thumbnail behaves in a post.

2. Opening a link will behave differently if its internal or external

   1. Internal link

      1. Clicking It would behave similarly as a permalink preview.

   2. External link

      1. Open the link in a new tab

Maximum number of bookmarks in a channel

Bookmarks are limited to 50 bookmarks per channel.

Bookmarks overflowing the visible area

Mobile

On mobile, the bookmarks bar scrolls horizontally to account for the overflow. The + button stays anchored to the right side of the bar.

Desktop and web app

On desktop/webapp, the bookmarks bar shouldn’t horizontally scroll. The plus button changes to a ••• button and the overflow bookmarks collapse in to an overflow menu.

Currently we are adding a horizontal scroll due to limited resources/time, but we will be moving overflowing bookmarks to a popover.

Reorder Bookmarks

The user can reorder bookmarks only on desktop, and this would be a channel level change.

Anyone updating a bookmark order would update it for everyone else. There would be no way for a user to update a bookmark only for themselves.

The user can just hover over the bookmarks item, and drag it left and right to change the order of the bookmarks for himself.

Example of notion below.

Include files in bookmarks in search and in the files RHS

The files that anyone adds in a bookmark should be searchable and be shown in the RHS.

Permissions

We will have manage bookmarks setting in the respected sections.

Channel Header change on Desktop

Designs can be seen here

We are moving the channel header items into a single row to save some vertical real estate.

That means rearranging the header UI area in all places, bots, channels, drafts, threads, etc.

Open questions

cc @Eric Sethna

1. Should we allow users to reorder bookmarks on mobile?

   1. No for now.

2. Should we allow users to add a bookmark with just an icon, no label/title? (Slack allows bookmarks without a label).

   1. No for now.

3. Should we include an open link option in the bookmarks dropdown/popover.

   1. No.

4. Should we have a “…” icon for options, or allow right click for options in desktop (both web and desktop app).

   1. No right click, as we’re not doing it anywhere else.

5. Should we expand the chip on “…” or overlap it with text.

   1. Overlap

6. Permissions are linked to channel settings

   1. Update help text to say bookmarks.

7. Should we update channel header UI?

   1. Yes, we’ve decided to do that in V1.

8. Should we have the ability to show/hide bookmarks?

   1. Not in V1, we’ll work on it iteratively.

9. Should people be able to reorder bookmarks

   1. Yes at a channel level, and only for desktop and following the same permissions as editing

10. Copy link icon if they don’t have edit permissions (desktop only)

11. What is the maximum number of bookmarks per channel?

    1. It was decided that 50 would be the max for now. See conversation