Add tag cloud

pug/album_grid.pug

@@ -9,12 +9,12 @@ block view
             img(loading="lazy" src=item.item_art_url width=210 height=210)
             p.fs-body3.mb8= item.item_title
           .d-flex.fw-wrap.g4
-            span.s-tag.s-tag__xs
-              span.s-tag--sponsor!= icons.get("compact-disc", 16)
-              = item.total_duration
             a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "item_id", filter: item.item_id}))
               span.s-tag--sponsor!= icons.get("music-note", 16)
               = item.track_count
+            span.s-tag.s-tag__xs
+              span.s-tag--sponsor!= icons.get("compact-disc", 16)
+              = item.total_duration
             a.s-tag.s-tag__xs(href=and({filter_field: "band_name", filter: item.band_name}))
               span.s-tag--sponsor!= icons.get("people-tag", 16)
               = item.band_name

pug/includes/layout.pug

@@ -14,6 +14,7 @@ html
     title BC Explorer
     link(rel="stylesheet" type="text/css" href="/static/stacks.min.css")
     script(src="/static/htmx.js")
+    script(src="/static/wordcloud.js")
     meta(name="htmx-config" content='{"requestClass":"is-loading"}')
     style.
       .themed {
@@ -40,11 +41,17 @@ html
       .s-sidebarwidget th {
         font-weight: normal;
         color: var(--black-400);
+        text-align: right;
       }
       .album-grid-link {
         --_li-fc: var(--black);
         --_li-fc-visited: var(--black-400);
       }
+      .wc-hl {
+        cursor: pointer;
+        color: blue;
+        outline: 1px solid black;
+      }
   body.themed.theme-system.overflow-y-scroll(hx-boost="true")
     header.s-topbar
       .s-topbar--container.wmx9
@@ -81,15 +88,7 @@ html
           .s-sidebarwidget.wmn3
             .s-sidebarwidget--header Collection
             table.s-sidebarwidget--content.s-sidebarwidget__items
-              tr.s-sidebarwidget--item
-                th albums
-                td= albumCount
-              tr.s-sidebarwidget--item
-                th singles
-                td= singleCount
-              tr.s-sidebarwidget--item
-                th tracks
-                td= trackCount
-              tr.s-sidebarwidget--item
-                th value
-                td #{displayCurrencySymbol}#{purchaseValue} #{displayCurrency}
+              each stat in count
+                tr.s-sidebarwidget--item
+                  th= stat[0]
+                  td= stat[1]

pug/tag_grid.pug

@@ -0,0 +1,40 @@
+extends includes/layout.pug
+
+block view
+  .mx-auto.w100.wmx11.fs-body1#content(style="cursor: default")
+  script
+    | var items =
+    != JSON.stringify(items)
+  script.
+    setTimeout(() => {
+      const content = document.getElementById("content")
+      content.style.height = `${Math.round(Math.min(content.clientWidth, window.innerHeight)*0.8)}px`
+      WordCloud(content, {
+        list: items,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif',
+        fontWeight: "bold",
+        color: "random-dark",
+        minSize: 4,
+        gridSize: Math.round(content.clientWidth / 200),
+        weightFactor: size => size * content.clientWidth / 180,
+        rotateRatio: 0,
+        click: item => {
+          const highlightedItem = document.querySelector(".wc-hl")?.textContent || item[0]
+          const newURL = new URL(location)
+          newURL.searchParams.set("filter", highlightedItem)
+          newURL.searchParams.set("filter_field", "tag")
+          newURL.searchParams.set("arrange", "label")
+          location = newURL
+        }
+      })
+      content.addEventListener("wordcloudstop", () => {
+        for (const child of content.children) {
+          child.addEventListener("mouseenter", () => {
+            child.classList.add("wc-hl")
+          })
+          child.addEventListener("mouseleave", () => {
+            child.classList.remove("wc-hl")
+          })
+        }
+      })
+    })