Popup redesign

[JJ]

I’d like to suggest few changes to the popup required by multiple upcoming features or simply for improved UX

‌

1. Change this button to reflect current state of article (nothing/saved/archived) and change action executed by clicking on it depending on the state (probably allow users to choose in settings if clicking it for saved article should archive it or delete)
2. I suggest removing this button and adding this functionality in settings as it shouldn’t be required often
3. Favicon
4. Remove/Archive/Edit buttons, moved below the title line as covering the main piece information on hover is less than ideal user experience, users tend to move pointer over element they are interested in. Clicking the edit button should display form with Title and Tags inputs, Tags input should allow selecting existing tags and adding new ones

Additionally I suggest removing the scrollbar when it is not required and displaying tooltips on hover for Title and buttons

[Pierre-Adrien Buisson]

1. Agree with this, this is certainly the most sensible way of doing this
2. What do you mean by “adding this functionality in settings”? ‡
3. .
4. I see what you mean, and I’ve already put quite some thought into this, tbh. It was not an easy choice to make. The right-side actions do take lot of room and are displayed over the content which is not ideal, but only if you hover the particular line, which seem like a pretty good trade-off to me (if the action bother the user for reading the end of the title, he can just move the mouse). To put them under the title line, we’d need either to make them smaller (usability would suffer, just have a look at iwillril on chrome that uses very small icons, it’s painful to use, I wanted to avoid this actually), or make the item lines bigger (and therefore see less content in the popup at once). I’m not found of either solutions.
5. Domain instead of URL: why not. The best solution would be to make this customizable : what goes on the first line, is there a second line, what goes on the second line, etc.

Also, agree for the tooltip on hover, to be honest I though it was already implemented

[Pierre-Adrien Buisson]

Another solution I’m exploring as for the current page interactions : bring the current page item to the top of the list (with sticky positioning), displayed in a different manner, so that all interactions with this current page would be done as usual (no need for another way of doing one same action), just like any other page in the list, but with a visual indicator to differentiate the current page from the other ones.

Something like that (even though the colour choice might not be the best one haha, just something to illustrate the idea ) :

[JJ]

2. Since it isn’t used too often exposing it here may not be the best idea, it should be available in case of emergency, but putting it somewhere in Options page wouldn’t hurt probably
4. Putting another button there would make the cover on hover effect even worse, maybe it would be possible to make these buttons barely opaque on line hover to indicate these are there and fully only when in their area? Probably making it more or less configurable would be the best for users but also time consuming.

I am still not sure how exactly the edit function should work, especially tags input, but possibly using https://yaireo.github.io/tagify/ would help a lot

This solution you are exploring now could allow some interesting interactions like if page is not in the list it has two buttons: save quickly and edit before adding (or add, open edit form and allow modification just like Firefox does with bookmarks)