Improved notifications view

pages/index.go

@@ -214,6 +214,7 @@ func Configure(app *aero.Application) {
 	app.Get("/api/popular/anime/titles/:count", popular.AnimeTitles)
 	app.Get("/api/test/notification", notifications.Test)
 	app.Get("/api/count/notifications/unseen", notifications.CountUnseen)
+	app.Get("/api/mark/notifications/seen", notifications.MarkNotificationsAsSeen)
 
 	// Legal stuff
 	l.Page("/terms", terms.Get)

pages/notifications/api.go

@@ -0,0 +1,66 @@
+package notifications
+
+import (
+	"net/http"
+	"strconv"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+	"github.com/animenotifier/notify.moe/utils"
+)
+
+// CountUnseen sends the number of unseen notifications.
+func CountUnseen(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+
+	if user == nil {
+		return ctx.Error(http.StatusBadRequest, "Not logged in", nil)
+	}
+
+	notifications := user.Notifications().Notifications()
+	unseen := 0
+
+	for _, notification := range notifications {
+		if notification.Seen == "" {
+			unseen++
+		}
+	}
+
+	return ctx.Text(strconv.Itoa(unseen))
+}
+
+// MarkNotificationsAsSeen marks all notifications as seen.
+func MarkNotificationsAsSeen(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+
+	if user == nil {
+		return ctx.Error(http.StatusBadRequest, "Not logged in", nil)
+	}
+
+	notifications := user.Notifications().Notifications()
+
+	for _, notification := range notifications {
+		notification.Seen = arn.DateTimeUTC()
+		notification.Save()
+	}
+
+	return "ok"
+}
+
+// Test sends a test notification to the logged in user.
+func Test(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+
+	if user == nil {
+		return ctx.Error(http.StatusBadRequest, "Not logged in", nil)
+	}
+
+	user.SendNotification(&arn.PushNotification{
+		Title:   "Anime Notifier",
+		Message: "Yay, it works!",
+		Icon:    "https://" + ctx.App.Config.Domain + "/images/brand/220.png",
+		Type:    arn.NotificationTypeTest,
+	})
+
+	return "ok"
+}

pages/notifications/notifications.go

@@ -3,14 +3,14 @@ package notifications
 import (
 	"net/http"
 	"sort"
-	"strconv"
 
 	"github.com/aerogo/aero"
-	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
 	"github.com/animenotifier/notify.moe/utils"
 )
 
+const maxNotifications = 50
+
 // All shows all notifications sent so far.
 func All(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
@@ -26,43 +26,10 @@ func All(ctx *aero.Context) string {
 		return notifications[i].Created > notifications[j].Created
 	})
 
+	// Limit results
+	if len(notifications) > maxNotifications {
+		notifications = notifications[:maxNotifications]
+	}
+
 	return ctx.HTML(components.Notifications(notifications, user))
 }
-
-// CountUnseen sends the number of unseen notifications.
-func CountUnseen(ctx *aero.Context) string {
-	user := utils.GetUser(ctx)
-
-	if user == nil {
-		return ctx.Error(http.StatusBadRequest, "Not logged in", nil)
-	}
-
-	notifications := user.Notifications().Notifications()
-	unseen := 0
-
-	for _, notification := range notifications {
-		if notification.Seen == "" {
-			unseen++
-		}
-	}
-
-	return ctx.Text(strconv.Itoa(unseen))
-}
-
-// Test sends a test notification to the logged in user.
-func Test(ctx *aero.Context) string {
-	user := utils.GetUser(ctx)
-
-	if user == nil {
-		return ctx.Error(http.StatusBadRequest, "Not logged in", nil)
-	}
-
-	user.SendNotification(&arn.PushNotification{
-		Title:   "Anime Notifier",
-		Message: "Yay, it works!",
-		Icon:    "https://" + ctx.App.Config.Domain + "/images/brand/220.png",
-		Type:    arn.NotificationTypeTest,
-	})
-
-	return "ok"
-}

pages/notifications/notifications.pixy

@@ -12,7 +12,7 @@ component Notifications(notifications []*arn.Notification, user *arn.User)
 				Notification(notification)
 
 component Notification(notification *arn.Notification)
-	.notification
+	a.notification(href=notification.Link, target="_blank", data-seen=notification.Seen)
 		.notification-icon
 			img.lazy(data-src=notification.Icon, alt=notification.Title)
 		
@@ -20,4 +20,8 @@ component Notification(notification *arn.Notification)
 			h3.notification-title= notification.Title
 			.notification-footer
 				p.notification-text= notification.Message
-				.notification-date.utc-date(data-date=notification.Created)
+				.notification-date.utc-date(data-date=notification.Created)
+		
+		if notification.Seen != ""
+			.notification-seen
+				RawIcon("check")

pages/notifications/notifications.scarlet

@@ -12,6 +12,11 @@
 	ui-element
 	padding 1rem
 	margin-bottom 0.5rem
+	position relative
+	opacity 0.25
+
+.notification[data-seen=""]
+	opacity 1.0
 
 .notification-icon
 	margin-right 1rem
@@ -24,6 +29,8 @@
 .notification-info
 	vertical
 	flex 1
+	color text-color
+	text-shadow none
 
 .notification-footer
 	horizontal
@@ -31,7 +38,14 @@
 .notification-text
 	flex 1
 	margin 0
+	opacity 0.9
 
 .notification-date
 	opacity 0.5
-	font-size 0.9em
+	font-size 0.9em
+	align-self flex-end
+
+.notification-seen
+	position absolute
+	top 1rem
+	right 1rem

scripts/Actions/Notifications.ts

@@ -20,4 +20,17 @@ export async function testNotification(arn: AnimeNotifier) {
 
 	// Update notification counter
 	arn.notificationManager.update()
+}
+
+// Mark notifications as seen
+export async function markNotificationsAsSeen(arn: AnimeNotifier) {
+	await fetch("/api/mark/notifications/seen", {
+		credentials: "same-origin"
+	})
+
+	// Update notification counter
+	arn.notificationManager.update()
+
+	// Update notifications
+	arn.reloadContent()
 }

scripts/NotificationManager.ts

@@ -8,6 +8,11 @@ export class NotificationManager {
 
 		let body = await response.text()
 		this.unseen = parseInt(body)
+
+		if(this.unseen > 99) {
+			this.unseen = 99
+		}
+
 		this.render()
 	}
 

tests.go

@@ -274,6 +274,8 @@ var routeTests = map[string][]string{
 	"/api/userfollows/:id/get/:item/:property":       nil,
 	"/api/pushsubscriptions/:id/get/:item":           nil,
 	"/api/pushsubscriptions/:id/get/:item/:property": nil,
+	"/api/count/notifications/unseen":                nil,
+	"/api/mark/notifications/seen":                   nil,
 	"/paypal/success":                                nil,
 	"/paypal/cancel":                                 nil,
 	"/anime/:id/edit":                                nil,