Added notification count badge

layout/sidebar/sidebar.pixy

@@ -11,9 +11,11 @@ component Sidebar(user *arn.User)
 				a.badge.left-badge.ajax(href="/settings")
 					RawIcon("cog")
 				
-				a.badge.right-badge.ajax(href="/notifications")
+				a#notification-icon.badge.right-badge.ajax(href="/notifications")
 					RawIcon("bell")
 				
+				a#notification-count.badge.right-badge.ajax.badge-important.hidden(href="/notifications") 0
+
 		//- Sidebar buttons
 		if user != nil
 			SidebarButton("Home", "/animelist/watching", "home")

layout/sidebar/sidebar.scarlet

@@ -67,6 +67,9 @@ sidebar-spacing-y = 0.7rem
 		margin-right 0.75rem
 
 .badge
+	horizontal
+	justify-content center
+	align-items center
 	position absolute
 	top 50%
 	background reverse-light-color
@@ -74,6 +77,8 @@ sidebar-spacing-y = 0.7rem
 	transform translateY(-50%)
 	padding 0.5rem
 	color text-color
+	width 30px
+	height 30px
 
 	:hover
 		color text-color
@@ -88,4 +93,7 @@ sidebar-spacing-y = 0.7rem
 .right-badge
 	right 12%
 
-
+.badge-important
+	background badge-important-bg-color
+	color badge-important-text-color
+	font-weight bold

pages/index.go

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

pages/notifications/notifications.go

@@ -3,6 +3,7 @@ package notifications
 import (
 	"net/http"
 	"sort"
+	"strconv"
 
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
@@ -28,6 +29,26 @@ func All(ctx *aero.Context) string {
 	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)

scripts/AnimeNotifier.ts

@@ -4,6 +4,7 @@ import { MutationQueue } from "./MutationQueue"
 import { StatusMessage } from "./StatusMessage"
 import { PushManager } from "./PushManager"
 import { TouchController } from "./TouchController"
+import { NotificationManager } from "./NotificationManager"
 import { Analytics } from "./Analytics"
 import { SideBar } from "./SideBar"
 import { InfiniteScroller } from "./InfiniteScroller"
@@ -24,6 +25,7 @@ export class AnimeNotifier {
 	visibilityObserver: IntersectionObserver
 	pushManager: PushManager
 	serviceWorkerManager: ServiceWorkerManager
+	notificationManager: NotificationManager
 	touchController: TouchController
 	sideBar: SideBar
 	infiniteScroller: InfiniteScroller
@@ -131,6 +133,9 @@ export class AnimeNotifier {
 		// Push manager
 		this.pushManager = new PushManager()
 
+		// Notification manager
+		this.notificationManager = new NotificationManager()
+
 		// Analytics
 		this.analytics = new Analytics()
 
@@ -186,6 +191,11 @@ export class AnimeNotifier {
 			this.statusMessage.showError("You are viewing an offline version of the site now.")
 		}
 
+		// Notification manager
+		if(this.user) {
+			this.notificationManager.update()
+		}
+
 		// Download popular anime titles for the search
 		// let response = await fetch("/api/popular/anime/titles/500")
 		// let titles = await response.json()

scripts/NotificationManager.ts

@@ -0,0 +1,31 @@
+export class NotificationManager {
+	unseen: number
+
+	async update() {
+		let response = await fetch("/api/count/notifications/unseen", {
+			credentials: "same-origin"
+		})
+
+		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")
+
+		notificationCount.innerText = this.unseen.toString()
+
+		if(this.unseen === 0) {
+			notificationCount.classList.add("hidden")
+			notificationIcon.classList.remove("hidden")
+		} else {
+			notificationIcon.classList.add("hidden")
+			notificationCount.classList.remove("hidden")
+		}
+	}
+}

scripts/ServiceWorkerManager.ts

@@ -51,7 +51,7 @@ export class ServiceWorkerManager {
 				message.url = window.location.href
 			}
 
-			console.log("checking for updates:", message.url)
+			// console.log("checking for updates:", message.url)
 
 			this.postMessage(message)
 		}

styles/include/config.scarlet

@@ -50,6 +50,10 @@ post-highlight-color = rgba(248, 165, 130, 0.7)
 // Avatar
 avatar-size = 50px
 
+// Badge
+badge-important-bg-color = rgb(215, 38, 15)
+badge-important-text-color = white
+
 // Quote
 quote-color = hsl(0, 0%, 45%)
 quote-side-border-color = quote-color