Show notices for server errors

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
+})

pug/collection-loaded.pug

@@ -1,6 +1,13 @@
-#collection-sync.s-notice.s-notice__success
+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()

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

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)
+	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})
+	}
 }))