Add page titles

.gitignore

@@ -5,3 +5,4 @@
 scripts/*.har
 scripts/collection_*
 node_modules
+.vscode

pug/album_grid.pug

@@ -1,11 +1,14 @@
 extends includes/layout.pug
 
+block title
+  - title = `Albums | ${title}`
+
 block view
   .mx-auto.w100.wmx11.fs-body1#content
-    .d-grid.gx8.gy12.jc-center(style="grid-template-columns: repeat(auto-fit, 210px)")
+    .d-grid.gx8.gy12.jc-center.break-word(style="grid-template-columns: repeat(auto-fit, 210px)")
       each item in items
         div
-          a.album-grid-link(href=item.item_url)
+          a.album-grid-link(href=item.item_url target="_blank")
             img(loading="lazy" src=item.item_art_url width=210 height=210)
             p.fs-body3.mb8= item.item_title
           .d-flex.fw-wrap.g4

pug/artist_grid.pug

@@ -1,5 +1,8 @@
 extends includes/layout.pug
 
+block title
+  - title = `Artists | ${title}`
+
 block view
   .mx-auto.w100.wmx9.fs-body1#content
     .d-flex.fd-column.g4
@@ -24,5 +27,5 @@ block view
                   span.s-tag--sponsor!= icons.get("flower", 16)
                   = label
           each preview in item.previews
-            a.d-flex(href=preview.item_url)
+            a.d-flex(href=preview.item_url target="_blank")
               img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: auto; width: auto; max-height: 70px")

pug/includes/layout.pug

@@ -8,10 +8,17 @@ mixin navi(key, value, icon, text)
 
 doctype html
 html
+  - let searchText = !filter_field ? null : filter_field === "item_id" ? items[0].item_title : filter
+
   head
     meta(charset="utf-8")
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    title BC Explorer
+    - let title = "BC Explorer"
+    block title
+    if searchText
+      - title = `${searchText} | ${title}`
+    title#title= title
+    link(rel="icon" href="/favicon.png")
     link(rel="stylesheet" type="text/css" href="/static/stacks.min.css")
     script(src="/static/htmx.js")
     script(src="/static/wordcloud.js")
@@ -98,11 +105,7 @@ html
           if filter && filter_field
             .s-sidebarwidget.s-sidebarwidget__blue.d-flex.ai-center.gx16.jc-space-between.p8.pl16
               != icons.get("search")
-              .fl-grow1= `Searching for `
-                if filter_field === "item_id"
-                  strong= items[0].item_title
-                else
-                  strong= filter
+              .fl-grow1 Searching for #[strong= searchText]
               a.s-btn.s-notice--btn(href=and({filter: null, filter_field: null, filter_fuzzy: null})) Clear
           else
             form.d-flex.ai-stretch.gx8.jc-space-between.baw0(hx-indicator="#search-submit")

pug/includes/tag-status.pug

@@ -1,4 +1,4 @@
-if downloader.total > 0
+if downloader.total > 0 || downloader.outcome
   #tag-download
     if !downloader.running && !downloader.outcome
       form.s-notice.s-notice__info.d-flex.ai-center.p8.gx16.pl16(role="status" hx-swap="outerHTML" hx-target="#tag-download" hx-post="/api/tag-download")
@@ -15,6 +15,7 @@ if downloader.total > 0
           #tag-status-indicator
         p.mt12 You can keep using BC Explorer while this continues in the background.
         - let percentage = `${Math.round(downloader.processed/downloader.total*100)}%`
+        title#title(hx-swap-oob="true") #{percentage} | Tags | BC Explorer
         .s-progress.mt16
           .s-progress--bar(style=`width: ${percentage}`)
         .d-flex.jc-space-between.fs-fine
@@ -23,12 +24,14 @@ if downloader.total > 0
 
     else if downloader.outcome === "Success"
       .s-notice.s-notice__success.p8.gx16.pl16.d-flex.ai-center.wmn3
+        title#title(hx-swap-oob="true") * Tags downloaded! | BC Explorer
         != icons.get("cloud-check")
         .fl-grow1 Tags downloaded.
-        - downloadManager.resolve(account)
+        - downloader.resolve()
         a.s-btn.s-btn__outlined(href="") Refresh
 
     else
       .s-notice.s-notice__danger.p8.gx16.pl16.d-flex.ai-center.wmn3
+        title#title(hx-swap-oob="true") * Tag download failed! | BC Explorer
         != icons.get("cloud-xmark")
         .fl-grow1= downloader.outcome

pug/label_grid.pug

@@ -1,5 +1,8 @@
 extends includes/layout.pug
 
+block title
+  - title = `Labels | ${title}`
+
 block view
   .mx-auto.w100.wmx9.fs-body1#content
     .d-flex.fd-column.g4
@@ -24,5 +27,5 @@ block view
                   span.s-tag--sponsor!= icons.get("compact-disc", 16)
                   = item.total_duration
           each preview in item.previews
-            a.d-flex(href=preview.item_url)
+            a.d-flex(href=preview.item_url target="_blank")
               img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: auto; width: auto; max-height: 70px")

pug/tag_grid.pug

@@ -1,5 +1,8 @@
 extends includes/layout.pug
 
+block title
+  - title = `Tags | ${title}`
+
 block view
   script
     | var items =

pug/track_list.pug

@@ -1,5 +1,8 @@
 extends includes/layout.pug
 
+block title
+  - title = `Tracks | ${title}`
+
 block view
   .mx-auto.w100.wmx11#content
     .s-table-container
@@ -18,7 +21,7 @@ block view
                   | ☆
                 else
                   = item.track_number || "-"
-              td: a(href=item.item_url)= item.title
+              td: a(href=item.item_url target="_blank")= item.title
               td= item.artist
               td= item.item_title
               - let label = item.band_url.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1")

start.js

@@ -66,5 +66,13 @@ router.get("/static/wordcloud.js", defineEventHandler({
 	}
 }))
 
+router.get("/favicon.png", defineEventHandler({
+	handler: async event => {
+		handleCacheHeaders(event, {maxAge: 86400})
+		defaultContentType(event, "text/javascript")
+		return fs.promises.readFile("public/favicon.png")
+	}
+}))
+
 createServer(toNodeListener(app)).listen(2239)
 console.log("running on http://localhost:2239")