Improved notifications view

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