Browser extension: Notification Previews for GitHub

[fregante]

Notification icon hover ( ✅ tanmayrajani/github-notifications-preview)

This is a nitpick for sure, but when I have new notifications, having to do a full page nav just to see if I care about any of them is a bit of a pain. Would be nice to fetch/render a preview when hovering over the icon, when it shows new notifications.

@DrewML in refined-github/refined-github#181

Full preview in notification list

One of the biggest problems I have with lots of GitHub notifications is viewing them without marking them as read. Emails help this but they tend to get buried and are not organized by user/repo. GitHub notifications could use some love

@thejameskyle in refined-github/refined-github#273

[shadowfacts]

I'm working on implementing this, and this is the first proof of concept I've got:

I'll stick the code for this up in a repo once I've got a couple things ironed out and the code cleaned up.

[tanmayrajani]

I did the first of the two parts suggested. (I'm kinda new to contributing so please bear with me,,)

Things it offers:

• Allows to preview the unread notifications on click using pop-overs looking exactly like the ones on the right (profile and new-repo)
• Allows to perform actions like marking as read and unsubscribing on the notifications

Here's how it looks like:

Next steps?

• What should I do with this? Is it good enough? Will this be a part of refined-github extension or maybe a seperate one? Please tell me about it..

code is at tanmayrajani/notifications-preview-github

cheers!

[tanmayrajani]

I've uploaded Notifications preview extension on chrome web-store. (first one from the two suggestions)

Please find it here: Notifications preview for GitHub

Feel free to suggest issues/improvements. Again, code is at tanmayrajani/notifications-preview-github

Thanks, this is my first serious contribution :)

[sindresorhus]

@tanmayrajani Nice work. Some future improvements:

• Improve the styling. See the screenshot in the issue description. Make it look less like an iframe in a popover.
• It should trigger on "hover" not "click". I still want the ability to go to the full notifications page.
• It should have a limited height, maybe half the page height and the content should scroll if it exceeds that.
• I would recommend renaming it to "Notifications Preview for GitHub". If you have "GitHub" in the front, GitHub lawyers will eventually email you asking nicely for you rename it. Happened to me many times.
• Your extension is missing an icon. You could use the notification icon used on GitHub. https://octicons.github.com/icon/bell/

[tanmayrajani]

@sindresorhus Thanks much for suggestions.. I've actually worked upon 'em and have updated the webstore extension as well.

Few things though,

• I had to keep space at the bottom to make tooltips visible on hover of people section of last notification.. tried playing around with z-index of the tooltip but didn't work out..
• For the second part of the original suggestions (Full preview in notification list by @bfred-it), I think it's tough to "view the notification without marking it as read", cause even if we visit the notification thing (say an issue/PR) without clicking on it (say copying link and visiting from next tab), that would mark it as read. Maybe somehow we could visit it without logged-in user...? Not sure!

[fregante]

For the preview, you can get around that issue:

• by fetching without cookies, but that wouldn't work on private repos
• by using the API, probably (it'll need a GH Personal Token in the extension's settings)

[tanmayrajani]

For showing the notifications on hover of bell icon, it conflicts with refined-github when we mark a notification as unread, it would add the notification to the notifications page from browser storage but not in the dropdown which we open on hover.. Hence, it shows bell icon, but when hovered, has nothing to show.

What can I do about this?

[fregante]

Good point. Refined GitHub could/should show a different icon. Perhaps just a different color.

... or it could expose some API to fetch the messages and show them here. A tad complex.

[tanmayrajani]

On a side note, this would not have been a problem had the notification hover thing been inside the refined-github. Just for knowledge.. may I know why it was decided to keep it seperate or how you guys decide to keep a feature seperate in general?

[fregante]

It be nice to have all GitHub's extensions in one, that'd simplify things for everyone, but devs don't want to maintain too many features and users might not want all the features.

Refined GitHub is meant to improve the experience while keeping it simple. Some features are so small that wouldn't make sense as a standalone. Other features are "marketable" and large enough to be on their own. If it were up to me I'd extract the "Mark as unread" feature as well.

I'd say that anything that has a large UI area and/or requires options should be on its own.

[fregante]

@tanmayrajani thanks for the extension! I finally tried it today and it works :)

I'll leave this issue open since the second part is missing, but let's move requests/comments to your repo. I suggest other people interested in the extension to watch the other repo and discuss there.

[tanmayrajani]

For the preview of notification (latest activity), I've been using github-hovercard along with NPG and it serves the purpose well for me.

[fregante]

Oh wow, that’s it then 😃