Optimise

pug/includes/layout.pug

@@ -20,81 +20,11 @@ html
     title#title= title
     link(rel="icon" href="/favicon.png")
     link(rel="stylesheet" type="text/css" href="/static/stacks.min.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"}')
-    style.
-      .ws340 {
-        width: 340px;
-      }
-      .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, .s-sidebarwidget.is-loading svg {
-        visibility: hidden;
-      }
-      .s-btn__icon.is-loading {
-        --_li-offset: 0.7em;
-        --_il-size: 1.5em;
-      }
-      .s-btn__icon.is-loading svg {
-        display: none;
-      }
-      .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);
-        text-align: right;
-      }
-      .album-grid-link {
-        --_li-fc: var(--black);
-        --_li-fc-visited: var(--black-400);
-        display: block;
-      }
-      .album-grid-link__play {
-        pointer-events: none;
-        position: absolute;
-        color: #000;
-        opacity: 0;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        transition: 1s ease-out;
-      }
-      .album-grid-link img {
-        transition: 1s ease-out;
-      }
-      .album-grid-link:hover img {
-        transition: 2s ease-out 0.7s;
-        opacity: 0.3;
-      }
-      .album-grid-link:hover .album-grid-link__play {
-        transition: 2s ease-out 0.7s;
-        opacity: 1;
-      }
-      .wc-hl {
-        cursor: pointer;
-        color: blue;
-        outline: 1px solid black;
-      }
-      svg {
-        flex-shrink: 0;
-      }
   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
@@ -122,7 +52,7 @@ html
         main.fl-grow1
           block view
 
-        aside.ws340
+        aside.ws340.fl-shrink0
           .ps-fixed.ws340.d-flex.fd-column.g12(style="top: 80px")
             if arrange === "tag"
               include tag-status.pug
@@ -147,8 +77,14 @@ html
 
             #player-marker.pe-none(style="display: none")
 
+            #collection-sync.d-none
+
             .s-sidebarwidget
               .s-sidebarwidget--header Collection
+                .s-sidebarwidget--action
+                  input(type="hidden" name="account" value=account)
+                  button.s-link(hx-post="/api/load-collection" hx-target="#collection-sync" hx-select="#collection-sync" hx-include="previous input") Sync
+
               table.s-sidebarwidget--content.s-sidebarwidget__items
                 tr.s-sidebarwidget--item
                   th items