Cleanup

pages/settings/settings.pixy

@@ -89,19 +89,19 @@ component SettingsNotifications(user *arn.User)
 		.widget.mountable
 			h3.widget-title
 				Icon("bell")
-				span Push notifications
+				span Instant notifications
 			
 			#enable-notifications.widget-section
-				label Enable:
+				label Instant notifications:
 				button.action(data-action="enableNotifications", data-trigger="click")
 					Icon("toggle-off")
-					span Enable push notifications
+					span OFF
 
 			#disable-notifications.widget-section.hidden
-				label Disable:
+				label Instant notifications:
 				button.action(data-action="disableNotifications", data-trigger="click")
 					Icon("toggle-on")
-					span Disable push notifications
+					span ON
 
 			#test-notification.widget-section
 				label Test:

scripts/Actions/InfiniteScroller.ts

@@ -1,7 +1,8 @@
 import { AnimeNotifier } from "../AnimeNotifier"
+import { Diff } from "../Diff"
 
 // Load more
-export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) {
+export async function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) {
 	// Prevent firing this event multiple times
 	if(arn.isLoading || button.disabled || button.classList.contains("hidden")) {
 		return
@@ -13,10 +14,15 @@ export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) {
 	let target = arn.app.find("load-more-target")
 	let index = button.dataset.index
 
-	fetch("/_" + arn.app.currentPath + "/from/" + index, {
-		credentials: "same-origin"
-	})
-	.then(response => {
+	try {
+		let response = await fetch("/_" + arn.app.currentPath + "/from/" + index, {
+			credentials: "same-origin"
+		})
+
+		if(!response.ok) {
+			throw response.statusText
+		}
+
 		let newIndex = response.headers.get("X-LoadMore-Index")
 
 		// End of data?
@@ -27,26 +33,24 @@ export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) {
 			button.dataset.index = newIndex
 		}
 
-		return response
-	})
-	.then(response => response.text())
-	.then(body => {
+		let body = await response.text()
+
 		let tmp = document.createElement(target.tagName)
 		tmp.innerHTML = body
 
 		let children = [...tmp.childNodes]
 
-		window.requestAnimationFrame(() => {
+		Diff.mutations.queue(() => {
 			for(let child of children) {
 				target.appendChild(child)
 			}
 
 			arn.app.emit("DOMContentLoaded")
 		})
-	})
-	.catch(err => arn.statusMessage.showError(err))
-	.then(() => {
+	} catch(err) {
+		arn.statusMessage.showError(err)
+	} finally {
 		arn.loading(false)
 		button.disabled = false
-	})
+	}
 }

scripts/Actions/Notifications.ts

@@ -2,18 +2,18 @@ import { AnimeNotifier } from "../AnimeNotifier"
 
 // Enable notifications
 export async function enableNotifications(arn: AnimeNotifier, button: HTMLElement) {
-	arn.statusMessage.showInfo("Enabling push notifications...")
+	arn.statusMessage.showInfo("Enabling instant notifications...")
 	await arn.pushManager.subscribe(arn.user.dataset.id)
 	arn.updatePushUI()
-	arn.statusMessage.showInfo("Enabled push notifications for this device.")
+	arn.statusMessage.showInfo("Enabled instant notifications for this device.")
 }
 
 // Disable notifications
 export async function disableNotifications(arn: AnimeNotifier, button: HTMLElement) {
-	arn.statusMessage.showInfo("Disabling push notifications...")
+	arn.statusMessage.showInfo("Disabling instant notifications...")
 	await arn.pushManager.unsubscribe(arn.user.dataset.id)
 	arn.updatePushUI()
-	arn.statusMessage.showInfo("Disabled push notifications for this device.")
+	arn.statusMessage.showInfo("Disabled instant notifications for this device.")
 }
 
 // Test notification

scripts/NotificationManager.ts

@@ -1,5 +1,14 @@
+import { Diff } from "./Diff"
+
 export class NotificationManager {
 	unseen: number
+	icon: HTMLElement
+	counter: HTMLElement
+
+	constructor() {
+		this.icon = document.getElementById("notification-icon")
+		this.counter = document.getElementById("notification-count")
+	}
 
 	async update() {
 		let response = await fetch("/api/count/notifications/unseen", {
@@ -17,17 +26,16 @@ export class NotificationManager {
 	}
 
 	render() {
-		let notificationIcon = document.getElementById("notification-icon")
-		let notificationCount = document.getElementById("notification-count")
+		Diff.mutations.queue(() => {
+			this.counter.innerText = this.unseen.toString()
 
-		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")
-		}
+			if(this.unseen === 0) {
+				this.counter.classList.add("hidden")
+				this.icon.classList.remove("hidden")
+			} else {
+				this.icon.classList.add("hidden")
+				this.counter.classList.remove("hidden")
+			}
+		})
 	}
 }