mixin navi(key, value, icon, text) - let bits = {[key]: value} if (isStatsPage) bits.shape = "grid" a.s-navigation--item(href="./" + and(bits) class={"is-selected": query && query[key] === value})&attributes(attributes) if icon != icons.get(icon) if text span.ml4= text block doctype html html - let searchText = !filter_field ? null : filter_field === "item_id" ? items[0].item_title : filter head meta(charset="utf-8") - 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.css") link(rel="stylesheet" type="text/css" href="/static/style.css") script(src="/static/htmx.js") script(src="/static/wordcloud.js") script(defer src="/static/player-marker.js") meta(name="htmx-config" content='{"requestClass":"is-loading"}') body.themed.theme-system.overflow-y-scroll(hx-boost="true" hx-swap="outerHTML" hx-target="#page" hx-select="#page") #page(hx-history-elt) header.s-topbar.ps-sticky.t0 .s-topbar--container.wmx9.h-auto button.s-topbar--logo.h-auto.as-stretch.s-btn.s-btn__muted.s-btn__dropdown.pr24.bar0.fc-black(popovertarget="menu") != icons.get("compass-solid", 24) .ml6(class="md:d-none") BC Explorer #menu(popover data-popper-placement="bottom" style="display: revert;").s-popover.overflow-visible.px0.py8 .s-popover--arrow.s-popover--arrow__tc ul.s-menu(role="menu") li.s-menu--title.d-none(class="md:d-block") BC Explorer li(role="menuitem") a.s-block-link.d-flex.ai-center.fc-black(href="/" hx-boost="false") != icons.get("log-out") .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") span.fl-grow1.d-flex.ai-center != icons.get("map-pin") .pl6 Region tags #location-tags-loading input(type="hidden" name="account" value=account) if filter_field input(type="hidden" name="filter_field" value=filter_field) if filter input(type="hidden" name="filter" value=filter) if filter_fuzzy input(type="hidden" name="filter_fuzzy" value=filter_fuzzy) .s-toggle-switch.s-toggle-switch__multiple - const locationTagsSetting = h3.getCookie(event, "bcex-location-tags") || "all" input#location-tags-all(type="radio" name="location_tags" value="all" autocomplete="off" checked=(locationTagsSetting === "all")) label.px8.py6(for="location-tags-all") All input#location-tags-hide(type="radio" name="location_tags" value="hide" autocomplete="off" checked=(locationTagsSetting === "hide")) label.px8.py6(for="location-tags-hide") Hide input#location-tags-only(type="radio" name="location_tags" value="only" autocomplete="off" checked=(locationTagsSetting === "only")) label.px8.py6(for="location-tags-only") Only else .s-block-link.d-flex.ai-center span.fl-grow1.d-flex.ai-center.fc-black-400 != icons.get("map-pin") .pl6 Region tags a.fc-black-400.td-underline(href=and({arrange: "tag"})) Set on tags view li(role="menuitem") form.s-block-link.d-flex.ai-center(hx-post="/api/settings/inline-player" hx-trigger="change" hx-indicator="#inline-player-loading") label.fl-grow1.d-flex.ai-center != icons.get("layout-right") .pl6(for="inline-player-switch") Inline player #inline-player-loading input.s-toggle-switch#inline-player-switch(type="checkbox" name="inline_player" checked=(h3.getCookie(event, "bcex-inline-player-disabled") !== "true")) li(role="menuitem") form.s-block-link.py2.d-flex.ai-center(hx-post="/api/settings/currency" hx-trigger="change" hx-select="#collection-stats" hx-target="#collection-stats" hx-indicator="#currency-loading") label.fl-grow1(for="currency-select").d-flex.ai-center != icons.get("coins") .pl6 Currency #currency-loading input(type="hidden" name="account" value=account) .s-select select#currency-select(name="currency") each currency in currencies option(selected=(currency === count.displayCurrency))= currency .fl-grow1 nav.d-block ul.s-navigation(class="sm:d-grid sm:grid__3") li: +navi("arrange", "album", "album", "Album") li: +navi("arrange", "artist", "people-tag", "Artist") li: +navi("arrange", "label", "flower", "Label") //- asana, flower, component, circle-spark, rhombus, sphere, union-alt, color-wheel, community, combine li: +navi("arrange", "tag", "label", "Tag") li: +navi("arrange", "track", "music-note", "Track") li.d-none(class="md:d-block") a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage}) != icons.get("graph-up") span.ml4 Stats if !isStatsPage nav.shape-nav.pl32(class="md:pl8") ul.s-navigation.s-navigation__toggle.g0 li: +navi("shape", "grid").brr0!= icons.get("view-grid") li: +navi("shape", "list").blr0!= icons.get("align-justify") .fl-grow1 button#toggle-player.s-btn.s-btn__xs.d-none.mr4(class="md:d-block")!= icons.get("playlist") .d-flex.py24.px16.g24.fs-body1.fd-row-reverse(class="md:fd-column") aside.ws340.fl-shrink0 .ps-fixed.ws340.d-flex.fd-column.g12(class="md:ps-static md:jc-center" style="top: 80px") if arrange === "tag" include tag-status.pug 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 #[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.gx12.jc-space-between.baw0(hx-indicator="#search-submit") input.s-input(name="filter" placeholder="Search" autocomplete="off").fl-grow1 input(type="hidden" name="filter_field" value= ( arrange === "artist" ? "band_name" : arrange === "label" ? "band_url" : arrange === "tag" ? "tag" : "item_title")) input(type="hidden" name="filter_fuzzy" value="true") input(type="hidden" name="arrange" value=arrange) input(type="hidden" name="shape" value=shape) button.s-btn.s-btn__xs.s-btn__icon.s-btn__outlined.s-btn__muted#search-submit(style="height: 38px")!= icons.get("search") #player-marker.pe-none(class="md:d-none" style="display: none") #collection-sync.d-none div(class="md:d-none") 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") #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