Notifications (#2117)

* Initial

* Progress

* Fix

* Progress

* Notifications list page

* BADGE_MANAGER_ADDED

* Mark as seen initial

* Split tables

* Progress

* Fix styles

* Push notifs initial

* Progress

* Rename

* Routines

* Progress

* Add e2e tests

* Done?

* Try updating actions

* Consistency

* Dep fix

* A couple fixes

app/features/notifications/components/NotificationList.module.css

@@ -0,0 +1,66 @@
+.itemDivider {
+	margin-inline: var(--s-2-5);
+	border-width: 0.5px;
+	border-color: var(--border);
+}
+
+.item {
+	line-height: 1.4;
+	padding: var(--s-1) var(--s-2-5);
+	display: grid;
+	grid-template-areas: "image header" "image timestamp";
+	grid-template-columns: 30px 1fr;
+	column-gap: var(--s-2);
+	padding-block: var(--s-2-5);
+	color: var(--text);
+}
+
+.item:hover .imageContainer {
+	outline: 3px solid var(--theme-transparent);
+}
+
+.item:focus-within .imageContainer {
+	outline: 3px solid var(--theme-transparent);
+}
+
+.unseenDot {
+	background-color: var(--theme);
+	border-radius: 100%;
+	width: 8px;
+	height: 8px;
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	outline: 2px solid var(--theme-transparent);
+}
+
+.imageContainer {
+	place-self: center;
+	grid-area: image;
+	border-radius: 100%;
+	width: 30px;
+	height: 30px;
+	background-color: var(--bg-lightest);
+	display: grid;
+	place-items: center;
+	position: relative;
+}
+
+.itemImage {
+	width: 30px;
+	height: 30px;
+	border-radius: 100%;
+}
+
+.itemHeader {
+	grid-area: header;
+	font-size: var(--fonts-xsm);
+	font-weight: var(--semi-bold);
+}
+
+.timestamp {
+	grid-area: timestamp;
+	color: var(--text-lighter);
+	font-size: var(--fonts-xxs);
+	font-weight: var(--body);
+}