Initial commit

pug/includes/layout.pug

@@ -0,0 +1,95 @@
+mixin navi(key, value, icon, text)
+  a.s-navigation--item(href=and({[key]: value}) class={"is-selected": query[key] === value})&attributes(attributes)
+    if icon
+      != icons.get(icon)
+    if text
+      span.ml4= text
+    block
+
+doctype html
+html
+  head
+    meta(charset="utf-8")
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    title BC Explorer
+    link(rel="stylesheet" type="text/css" href="/static/stacks.min.css")
+    script(src="/static/htmx.js")
+    meta(name="htmx-config" content='{"requestClass":"is-loading"}')
+    style.
+      .themed {
+        --theme-base-primary-color-h: 191;
+        --theme-base-primary-color-s: 37%;
+        --theme-base-primary-color-l: 48%;
+        --theme-dark-primary-color-h: 191;
+        --theme-dark-primary-color-s: 45%;
+        --theme-dark-primary-color-l: 60%;
+      }
+      .s-navigation--item.is-loading svg, .s-tag.is-loading svg {
+        visibility: hidden;
+      }
+      .s-navigation__toggle.s-navigation {
+        --_na-item-bg: var(--black-150);
+      }
+      .duration-last-col td:last-child {
+        text-align: right;
+        white-space: pre;
+      }
+      .s-tag {
+        white-space: normal;
+      }
+      .s-sidebarwidget th {
+        font-weight: normal;
+        color: var(--black-400);
+      }
+      .album-grid-link {
+        --_li-fc: var(--black);
+        --_li-fc-visited: var(--black-400);
+      }
+  body.themed.theme-system.overflow-y-scroll(hx-boost="true")
+    header.s-topbar
+      .s-topbar--container.wmx9
+        .s-topbar--logo BC Explorer
+        .fl-grow1
+        nav
+          ul.s-navigation
+            li: +navi("arrange", "album", "album", "Album")
+            li: +navi("arrange", "artist", "people-tag", "Artist")
+            li: +navi("arrange", "label", "component", "Label")
+            li: +navi("arrange", "tag", "label", "Tag")
+            li: +navi("arrange", "track", "music-note", "Track")
+        .px16
+        nav
+          ul.s-navigation.s-navigation__toggle.g0
+            li: +navi("shape", "grid").brr0!= icons.get("view-grid")
+            li: +navi("shape", "list").blr0!= icons.get("table-rows")
+        .fl-grow1
+        #player(hx-preserve)
+          button.s-btn.s-btn__outlined.s-btn__xs!= icons.get("play")
+
+    .d-flex.py24.px16.g24.fs-body1
+      .fl-grow1
+        block view
+
+      div
+        .ps-sticky.t24.d-flex.fd-column.g12
+          if filter
+            .s-sidebarwidget.s-sidebarwidget__blue.d-flex.ai-center.gx16.jc-space-between.p8.pl16
+              != icons.get("search")
+              div Searching for #[strong= filter]
+              .fl-grow1
+              a.s-btn.s-notice--btn(href=and({filter: null, filter_field: null})) Clear
+          .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}