diff --git a/layout/sidebar/sidebar.pixy b/layout/sidebar/sidebar.pixy index 8b34a054..0c842e73 100644 --- a/layout/sidebar/sidebar.pixy +++ b/layout/sidebar/sidebar.pixy @@ -11,8 +11,10 @@ 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 diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index 46c4fcf7..344012b6 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/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 diff --git a/pages/index.go b/pages/index.go index 80a041f4..37007b69 100644 --- a/pages/index.go +++ b/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) diff --git a/pages/notifications/notifications.go b/pages/notifications/notifications.go index adb1189f..f2c2d488 100644 --- a/pages/notifications/notifications.go +++ b/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) diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index e9efa575..2e3c41fa 100644 --- a/scripts/AnimeNotifier.ts +++ b/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() diff --git a/scripts/NotificationManager.ts b/scripts/NotificationManager.ts new file mode 100644 index 00000000..ff2266d4 --- /dev/null +++ b/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") + } + } +} \ No newline at end of file diff --git a/scripts/ServiceWorkerManager.ts b/scripts/ServiceWorkerManager.ts index 8acb00e2..6902b9cf 100644 --- a/scripts/ServiceWorkerManager.ts +++ b/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) } diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 8e115078..cfa24881 100644 --- a/styles/include/config.scarlet +++ b/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