Max 1000 items without consent

public/style.css

@@ -24,6 +24,9 @@
 .s-navigation--item.is-loading svg, .s-tag.is-loading svg, .s-sidebarwidget.is-loading svg {
 	visibility: hidden;
 }
+.s-btn.is-loading:not(.s-btn__icon) svg {
+	display: none;
+}
 .s-btn__icon.is-loading {
 	--_li-offset: 0.7em;
 	--_il-size: 1.5em;

pug/includes/layout.pug

@@ -45,6 +45,15 @@ html
                   .ml6 Switch account
               li.s-menu--divider(role="separator")
               li.s-menu--title Settings
+              if query && query.show
+                li(role="menuitem")
+                  .s-block-link.d-flex.ai-center.py2
+                    span.fl-grow1.d-flex.ai-center
+                      != icons.get("eye")
+                      .pl6 Showing all items
+                    a.s-btn.s-btn__filled.s-btn__sm.d-flex.ai-center(href=and({show: null}))
+                      != icons.get("undo", 16)
+                      span.pl6 Undo
               li(role="menuitem")
                 if arrange === "tag"
                   form.s-block-link.d-flex.ai-center(hx-post="/api/settings/location-tags" hx-trigger="change" hx-indicator="#location-tags-loading" hx-select="#tag-page" hx-target="#tag-page")
@@ -144,6 +153,9 @@ html
               include collection-stats.pug
 
         main.fl-grow1
+          if items && items.length >= 1000
+            //- a great deal of performance is spent on htmx's bfcache emulation when navigating away from large pages
+            div(hx-history="false")
           block view
 
     #player-container.ps-fixed.r16.ws340.z-modal(class="md:t64 md:l16 md:r16 md:b16" hx-preserve="true")

pug/too-many-items.pug

@@ -0,0 +1,17 @@
+extends includes/layout.pug
+
+block view
+  .mx-auto.w100.wmx11.fs-body1.d-flex.jc-center#content
+    .s-notice.s-notice__warning
+      .d-flex.gx16.ai-center
+        != icons.get("warning-triangle")
+        div This page has #{itemCount} items, which might slow down your browser.
+      .d-flex.gx8.mt16
+        button.s-btn.s-btn__filled(hx-get=and({}) hx-headers='{"BCEX-Show": "true"}') Show them anyway
+        a.s-btn.s-btn__outlined(href=and({show: true})) Always show
+      p.mt16 Other things to try:
+      ul.mb4
+        li Search for specific items
+        if arrange !== "label"
+          li View items grouped together, like the #[a(href=and({arrange: "label"})) labels tab]
+        li Use #[a(href=and({shape: "list"}) hx-headers='{"BCEX-Show": "true"}') list view], which may be faster

routes/app.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-const {defineEventHandler, getQuery, getValidatedQuery, sendRedirect, createError, getValidatedRouterParams, getCookie} = require("h3")
+const {defineEventHandler, getQuery, getValidatedQuery, sendRedirect, createError, getValidatedRouterParams, getCookie, getRequestHeader} = require("h3")
 const {router, db, sync} = require("../passthrough")
 
 /** @type {import("../pug-sync")} */
@@ -73,7 +73,7 @@ router.get("/:account/", defineEventHandler({
 	handler: async event => {
 		const {account} = await getValidatedRouterParams(event, schema.schema.account.parse)
 		try {
-			var {arrange, shape, filter, filter_field, filter_fuzzy} = await getValidatedQuery(event, schema.schema.appQuery.parse)
+			var {arrange, shape, filter, filter_field, filter_fuzzy, show} = await getValidatedQuery(event, schema.schema.appQuery.parse)
 			if (filter_field === "why" && arrange !== "album") throw new Error("filter not compatible with arrangement")
 		} catch (e) {
 			return sendRedirect(event, "?arrange=album&shape=grid", 302)
@@ -125,6 +125,12 @@ router.get("/:account/", defineEventHandler({
 			throw e
 		}
 
+		show ||= getRequestHeader(event, "BCEX-Show")
+		const itemWarningLimit = arrange === "track" ? 5000 : 1000
+		if (items.length >= itemWarningLimit && !show) {
+			return pugSync.render(event, "too-many-items.pug", {itemCount: items.length, account, query})
+		}
+
 		const locals = {
 			items,
 			account,

routes/schema.js

@@ -10,7 +10,8 @@ const schema = {
 		shape: z.enum(["grid", "list"]),
 		filter_field: z.enum(["band_name", "band_url", "item_title", "item_id", "tag", "why"]).optional(),
 		filter: z.string().regex(/^[^%]+$/).optional(),
-		filter_fuzzy: z.enum(["true"]).optional()
+		filter_fuzzy: z.enum(["true"]).optional(),
+		show: z.string().optional()
 	}),
 	account: z.object({
 		account