Make new notifications behave more like old notifications UI

Some people like the new UI, some people hate it.

GitHub (I don’t know when) added “group by repository” which kinda makes the UI look like the old one (I personally like this view), but there are some things missing from this and some things that can be removed.

1. Linkify user/repo when grouping by notifications is applied, allows you to quickly go to a repo (there is no link on notifications UI that lets you do this).
2. Remove redundant user/repo on each notification when grouping by notifications is applied, also move issue/PR id down.
3. Move notification count and notification reasons on top of each other, thay should make more room for notification title
4. Convert blue dots on the left to blue bars, similar to how it looks like on issue/PR lists

Why am I opening this issue: reading this https://twitter.com/ljharb/status/1253018009091731456 (/cc @ljharb) Why don’t I have any screenshots included: I’m opening this issue from mobile.

Some personal preferences in here, open to discussion and be proven wrong.

Related: #2891, #2961.

[notlmn]

Quick testing with CSS for option 1:

Style 1

CSS

[id^="notification"] {
    flex-direction: row !important;
    align-items: center;
}

[id^="notification"] > .text-normal {
    order: -1;
    margin-right: 8px !important;
}

[id^="notification"] > .d-flex > .f6 {
    font-size: 0 !important;
}

[id^="notification"] > .d-flex > .f6 > span {
    font-size: 12px;
    word-break: keep-all;
    margin-right: 8px;
}

Style 2

CSS

[id^="notification"] {
    flex-direction: row !important;
    align-items: center;
}

/* [id^="notification"] > .text-normal {
    order: -1;
    margin-right: 8px !important;
} */

[id^="notification"] > .d-flex > .f6 {
    font-size: 0 !important;
}

[id^="notification"] > .d-flex > .f6 > span {
    font-size: 12px;
    word-break: keep-all;
    margin-right: 8px;
}

---

Some font-size trickery going on here, but IMO it’s fine (considering GH moved to using utility classes for everything).

Style 2 looks good structurally, but only if all issue/PR numbers contain the same number of digits. This also fails for releases, invitations, vulnerabilities, and types of notifications.

Style 1 looks promising, considering that the id’s are already all over the place.

WDYT?

---

For option 2, that would require JS.

[netniV]

Actually, I tweaked it again so it’s now:

.notifications-list-item .Label, .f6
{
	display: none;
}

And this gives me:

So much neater to me and I can see a lot more in one window than I could before, so again @fregante thanks for the idea