From b1ab998a4b081b2df0879532ea47dd5823f8308c Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Thu, 10 Apr 2025 15:07:39 +1200
Subject: [PATCH] Show notices for server errors

---
 public/player-marker.js   |  8 ++++++++
 pug/collection-loaded.pug | 19 +++++++++++++------
 pug/includes/layout.pug   |  9 +++++++++
 routes/load-collection.js | 11 ++++++++---
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/public/player-marker.js b/public/player-marker.js
index 87f5635..f3373a3 100644
--- a/public/player-marker.js
+++ b/public/player-marker.js
@@ -62,3 +62,11 @@ function setupTogglePlayerButton(event) {
 }
 setupTogglePlayerButton()
 document.body.addEventListener("htmx:load", setupTogglePlayerButton)
+
+function hideError() {
+	document.getElementById("server-error").setAttribute("aria-hidden", "true")
+}
+document.body.addEventListener("htmx:responseError", event => {
+	document.getElementById("server-error").setAttribute("aria-hidden", "false")
+	document.getElementById("server-error-content").textContent = event.detail.xhr.responseText
+})
diff --git a/pug/collection-loaded.pug b/pug/collection-loaded.pug
index 5522ea3..e21fe17 100644
--- a/pug/collection-loaded.pug
+++ b/pug/collection-loaded.pug
@@ -1,6 +1,13 @@
-#collection-sync.s-notice.s-notice__success
-  .d-flex.ai-center.gx16
-    != icons.get("check-circle")
-    .fl-grow1 Imported #{storedItemCount}/#{count} purchases and #{storedTrackCount} tracks.
-  .mt16
-    a.s-link(href=`/${account}/`) Check it out
+if !error
+  #collection-sync.s-notice.s-notice__success
+    .d-flex.ai-center.gx16
+      != icons.get("check-circle")
+      .fl-grow1 Imported #{storedItemCount}/#{count} purchases and #{storedTrackCount} tracks.
+    .mt16
+      a.s-link(href=`/${account}/`) Check it out
+
+else
+  #collection-sync.s-notice.s-notice__danger
+    .d-flex.ai-center.gx16
+      != icons.get("xmark-circle")
+      .fl-grow1= error.toString()
diff --git a/pug/includes/layout.pug b/pug/includes/layout.pug
index 5d2077b..672be9c 100644
--- a/pug/includes/layout.pug
+++ b/pug/includes/layout.pug
@@ -158,3 +158,12 @@ html
 
     #player-container.ps-fixed.r16.ws340.z-modal(class="md:t64 md:l16 md:r16 md:b16" hx-preserve="true")
       #player
+
+    aside.s-modal#server-error(aria-hidden="true")
+      .s-modal--dialog
+        h1.s-modal--header Server error
+        pre.overflow-auto#server-error-content
+        p If you know what causes this error, #[a(href="https://cadence.moe/contact") please tell Cadence about it!]
+        button.s-modal--close.s-btn.s-btn__muted(aria-label="Close" type="button" onclick="hideError()")!= icons.get("xmark")
+        .s-modal--footer
+          button.s-btn.s-btn__outlined.s-btn__muted(type="button" onclick="hideError()") OK
diff --git a/routes/load-collection.js b/routes/load-collection.js
index cc0d088..7cd04d7 100644
--- a/routes/load-collection.js
+++ b/routes/load-collection.js
@@ -21,6 +21,7 @@ async function loadCollection(inputUsername) {
 	const doc = domino.createDocument(html)
 
 	const first = doc.querySelector(".collection-item-container[data-token]")
+	if (!first) throw new Error("Account does not exist. Please check the username - it's easy to mix it up with the display name, which is different.")
 	assert(first)
 	const token = first.getAttribute("data-token")
 	assert(token)
@@ -94,7 +95,11 @@ async function loadCollection(inputUsername) {
 
 router.post("/api/load-collection", defineEventHandler(async event => {
 	const {account} = await readValidatedBody(event, schema.schema.account.parse)
-	const result = await loadCollection(account)
-	setCookie(event, "accounts", (getCookie(event, "accounts") || "").split("|").concat(account).join("|"))
-	return pugSync.render(event, "collection-loaded.pug", result)
+	try {
+		const result = await loadCollection(account)
+		setCookie(event, "accounts", (getCookie(event, "accounts") || "").split("|").concat(account).join("|"))
+		return pugSync.render(event, "collection-loaded.pug", result)
+	} catch (error) {
+		return pugSync.render(event, "collection-loaded.pug", {error})
+	}
 }))