Improved notifications view

layout/sidebar/sidebar.scarlet

@@ -97,3 +97,8 @@ sidebar-spacing-y = 0.7rem
 	background badge-important-bg-color
 	color badge-important-text-color
 	font-weight bold
+
+	:hover
+		background badge-important-hover-bg-color
+		color badge-important-text-color
+		text-shadow none

pages/notifications/notifications.pixy

@@ -1,9 +1,15 @@
 component Notifications(notifications []*arn.Notification, user *arn.User)
 	h1 Notifications
 
-	.notifications
+	.corner-buttons
-		each notification in notifications
+		button.action(data-action="markNotificationsAsSeen", data-trigger="click")
-			Notification(notification)
+			Icon("check")
+			span Mark all as seen
+
+	.notifications-container
+		.notifications
+			each notification in notifications
+				Notification(notification)
 
 component Notification(notification *arn.Notification)
 	.notification
@@ -11,6 +17,7 @@ component Notification(notification *arn.Notification)
 			img.lazy(data-src=notification.Icon, alt=notification.Title)
 		
 		.notification-info
-			h3= notification.Title
+			h3.notification-title= notification.Title
-			p= notification.Message
+			.notification-footer
-			.notification-date.utc-date(data-date=notification.Created)
+				p.notification-text= notification.Message
+				.notification-date.utc-date(data-date=notification.Created)

pages/notifications/notifications.scarlet

@@ -1,5 +1,11 @@
+.notifications-container
+	horizontal
+	justify-content center
+
 .notifications
 	vertical
+	width 100%
+	max-width 800px
 
 .notification
 	horizontal
@@ -17,6 +23,14 @@
 
 .notification-info
 	vertical
+	flex 1
+
+.notification-footer
+	horizontal
+
+.notification-text
+	flex 1
+	margin 0
 
 .notification-date
 	opacity 0.5

scripts/Actions/Notifications.ts

@@ -13,8 +13,11 @@ export async function disableNotifications(arn: AnimeNotifier, button: HTMLEleme
 }
 
 // Test notification
-export function testNotification(arn: AnimeNotifier) {
+export async function testNotification(arn: AnimeNotifier) {
-	fetch("/api/test/notification", {
+	await fetch("/api/test/notification", {
 		credentials: "same-origin"
 	})
+
+	// Update notification counter
+	arn.notificationManager.update()
 }

scripts/NotificationManager.ts

@@ -8,13 +8,10 @@ export class NotificationManager {
 
 		let body = await response.text()
 		this.unseen = parseInt(body)
-		this.unseen = 2
 		this.render()
 	}
 
 	render() {
-		console.log("notification count", this.unseen)
-
 		let notificationIcon = document.getElementById("notification-icon")
 		let notificationCount = document.getElementById("notification-count")
 

styles/include/config.scarlet

@@ -52,6 +52,7 @@ avatar-size = 50px
 
 // Badge
 badge-important-bg-color = rgb(215, 38, 15)
+badge-important-hover-bg-color = rgb(242, 60, 30)
 badge-important-text-color = white
 
 // Quote