Page MenuHomePhabricator

[Reading list roll out] Show both Watchlist and Saved pages in the header on Desktop
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

The ReadingList/Saved pages feature is being planned to be rolled out to all account holding users in early July 2026. This ticket is to ensure that both Watchlist and Saved pages are easily accessible from the header.

User story

As an editor, I want quick access to my Watchlist so that I can quickly look at the pages I am monitoring.
As a reader, I want easy access to my Saved Pages so that I can quickly return to content I’ve saved for later.

Requirements
  • Show both Watchlist and Saved pages in the header as shown in the design
  • Update the Saved pages icon to help differentiate it from Watchlist This is now captured as a separate task T427969
  • Remove the current preference of showing Saved pages to 0 edits/beta user and Watch to others in the header.
  • On smaller viewports on Vector, fold both Watchlist and Saved pages into the user menu. (NOTE: this is current behaviour for items in the user toolbar when the viewport shrinks)

Descoped requirements

Will be handled in T404221: Improving organization of items in the User menu:

  • Update the order of items in the user menu so that "Watchlist" and "Saved" are at the top as shown in the mock below (this is to maintain the order in which they are folded into the menu)
Rollback plan
  • There would be 2 patches (Vector + ReadingLists) to revert.
Technical notes
New Vector.png (1,440×791 px, 377 KB)

QA

https://phabricator.wikimedia.org/T427229#12027134

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@Sneha do we have a new icon yet for "Update the Saved pages icon to help differentiate it from Watchlist"? or could that be done in a follow-up task?

Hey @aude, since there are a few different moving parts in this task, can you please write up a rollback plan in the task description?

@aude yes we already have a new icon that @DTorsani-WMF worked on. Derek, can you let us know what is the status of it being available in Codex?

@Sneha would it be a new icon and the existing bookmarkList icon is remaining? or is the new icon part of https://phabricator.wikimedia.org/T399175 ?

@Sneha @aude The new icon set has been merged (beta Codex site), and will be available in the next Codex/OOUI releases (hopefully within the next week or so).

In T413413 we ensured that "Saved pages" is listed after "Sandbox". With showing both, they are not adjacent to each other in the menu. Do we still want "Saved pages" after "Sandbox" or list it next to Watchlist and Contributions? or try to move "Watchlist" to be after "Saved pages"?

Screenshot 2026-06-02 at 10.28.35 AM.png (902×1,218 px, 161 KB)

@Sneha can updating the icons be separate from this task? so that we are not waiting on the codex release? also I am not sure anything needs to be done on the reading list side, unless we are changing to use a different icon vs updating the existing icons?

The spacing of the icons in the p-vector-user-menu-overflow in the heading does not match spacing of the notification icon buttons:

On tablet (and some laptops) viewports and smaller, Button.less grows header icon-only buttons to a 44px but the adjacent Echo notification badges are pinned to 32px, creating the mismatch in size and spacing.

Screenshot 2026-06-02 at 10.48.28 AM.png (902×1,218 px, 68 KB)

aude set the point value for this task to 3.Jun 2 2026, 3:12 PM
aude moved this task from Needs refinement to Ready for sprint on the Reader Experience Team board.

@aude good call out about the order of things in the user menu. I can add more info on that in this ticket.

And yes we can pull out icon change to a separate ticket.

Change #1296669 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/skins/Vector@master] Show both Watchlist and Saved Pages in header when ReadingLists is enabled

https://gerrit.wikimedia.org/r/1296669

With adding both Watchlist and Saved, at a certain viewport size, the vector-header-end div is positioned below the vector-header-start div (with the logo).

Above ~640px width, everything is shown (including Watchlist and Saved, as well as ULS language selector, link to the user page) and the header wraps. Below 640px, some items in the header are not displayed or collapse into the dropdown.

Screenshot 2026-06-02 at 4.36.19 PM.png (1,290×1,230 px, 155 KB)

Screenshot 2026-06-02 at 4.53.06 PM.png (1,270×1,230 px, 142 KB)

How do we want to handle this?

Maybe we can collapse username + p-vector-user-menu-preferences at a higher breakpoint? while still showing Save and Watchlist until the smaller breakpoint

For changing sizes of the icon buttons, should the notification icon buttons match the others and be 44px?

or the others match the notification buttons and be 32px? 

I think 44px for the notification buttons is the better option for this, to make touch interactions easier and have the spacing/size consistent.

This issue is solved with moving the ULS language selector:

$wgULSPosition = 'interlanguage';

This is what we have configured on Wikipedia.

With adding both Watchlist and Saved, at a certain viewport size, the vector-header-end div is positioned below the vector-header-start div (with the logo).

Above ~640px width, everything is shown (including Watchlist and Saved, as well as ULS language selector, link to the user page) and the header wraps. Below 640px, some items in the header are not displayed or collapse into the dropdown.

Screenshot 2026-06-02 at 4.36.19 PM.png (1,290×1,230 px, 155 KB)

Screenshot 2026-06-02 at 4.53.06 PM.png (1,270×1,230 px, 142 KB)

How do we want to handle this?

Maybe we can collapse username + p-vector-user-menu-preferences at a higher breakpoint? while still showing Save and Watchlist until the smaller breakpoint

aude removed aude as the assignee of this task.Jun 5 2026, 2:07 PM

Test wiki created on Patch demo by Aude using patch(es) linked to this task:
https://c7b28a3058.catalyst.wmcloud.org/w/

I reviewed the patch demo from @aude The spacing and sizing looks good to me.

There are however two issues I see that we should fix:

  • We should add padding around the user menu icon as currently it does not have the same padding we have around other icons. Currently the user menu appears closer to the adjacent icon and making the spacing between them look inconsistent with spacing between other icons.
  • We're currently collapsing items into the user menu at 639px. We should increase that breakpoint to 731px so items are folded into the menu before the header wraps onto a second line.

Test wiki created on Patch demo by Aude using patch(es) linked to this task:
https://f4b715ffdf.catalyst.wmcloud.org/w/

Test wiki created on Patch demo by Aude using patch(es) linked to this task:
https://c59d17c819.catalyst.wmcloud.org/w/

Change #1298314 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/skins/Vector@master] When "Saved Pages" is present, move Watchlist above in user menu

https://gerrit.wikimedia.org/r/1298314

@Sneha I took care of "We're currently collapsing items into the user menu at 639px. We should increase that breakpoint to 731px so items are folded into the menu before the header wraps onto a second line."

"padding around the user menu icon" is still TODO.

Test wiki created on Patch demo by Aude using patch(es) linked to this task:
https://1c0d09ae42.catalyst.wmcloud.org/w/

Change #1298322 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/skins/Vector@master] Adjust breakpoint to collapse user links into dropdown

https://gerrit.wikimedia.org/r/1298322

Change #1296669 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Show both Watchlist and Saved Pages in header

https://gerrit.wikimedia.org/r/1296669

The ordering still needs to be addressed. I have some questions so started a discussion thread and it may make sense to also do this in a separate task. I'll report back.

(Note responsiveness will now be carried out in T428520: [Design spike] Improve responsive behaviour of Vector 2022 when bookmark functionality enabled)

Change #1298314 abandoned by Aude:

[mediawiki/skins/Vector@master] When "Saved Pages" is present, move Watchlist above it in user menu

https://gerrit.wikimedia.org/r/1298314

Change #1298322 abandoned by Aude:

[mediawiki/skins/Vector@master] Adjust breakpoint to collapse user links into dropdown

https://gerrit.wikimedia.org/r/1298322

Test wiki on Patch demo by Aude using patch(es) linked to this task was deleted:

https://9402c6e1f8.catalyst.wmcloud.org/w/

Test wiki on Patch demo by Aude using patch(es) linked to this task was deleted:

https://c7b28a3058.catalyst.wmcloud.org/w/

Test wiki on Patch demo by Aude using patch(es) linked to this task was deleted:

https://1c0d09ae42.catalyst.wmcloud.org/w/

Test wiki on Patch demo by Aude using patch(es) linked to this task was deleted:

https://c59d17c819.catalyst.wmcloud.org/w/

Test wiki on Patch demo by Aude using patch(es) linked to this task was deleted:

https://f4b715ffdf.catalyst.wmcloud.org/w/