Add global music player, invoicing/payment system, account subpages, mail account admin, and the qualityiron.vegas Jet 2.0 port

Jet interpreter (Tag.cpp, __call.cpp, __imap*.cpp/h, __smtpsend.cpp/h,
__imapemptyfolder.cpp/h - new): assorted parser/tag fixes found across
this work - a stray literal-tag-in-comment and backslash-quote parser
corruption class, a dangling-pointer fix, a __call.cpp fd leak, IMAP
folder-management tags, multi-account/per-host IMAP support, and a
smtpsend Message-ID fix.

barant.com site (jetc/barant-site/):
- A site-wide persistent music player (header band, playlist/queue,
  stereo FFT EQ, session-persisted state) fed by new library/
  ianslibrary/music song-list subpages.
- /account split into info/phones/invoices subpages; a full invoicing
  and Square payment system (create/edit/copy/pay/email invoice);
  admin invoice management and mail-account management subpages.
- /services split into overview/hosting/siptrunking/documents
  subpages, retiring the old standalone pages.
- SIPPHONE.tag: a Jet 2.0 WebRTC softphone tag.
- main.css/spa.js/email.js: the SPA loading indicator, the music
  player band styling, and assorted fixes accumulated alongside this
  work.

qualityiron-site/: the qualityiron.vegas job/contractor/customer/
document management app, ported from its original Jet 1.4 codebase to
Jet 2.0 as barant.coms APIServers second multi-tenant site.

wcwc/wcwc.jet: the WCWC site Jet source (wcwc.jtc build output not
included).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

jetc/barant-site/assets/images/email.js

@@ -43,6 +43,13 @@
     pageNext:
       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
       '<path d="M9 18l6-6-6-6"/>' +
+      '</svg>',
+    emptyFolder:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+      '<path d="M4 7h16"/>' +
+      '<path d="M9 7V4h6v3"/>' +
+      '<path d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/>' +
+      '<path d="M9.5 12.5l5 5M14.5 12.5l-5 5"/>' +
       '</svg>'
   };
 
@@ -109,6 +116,15 @@
     var links = document.querySelectorAll('.email-folder-link');
     for (var i = 0; i < links.length; i++)
       links[i].classList.toggle('email-folder-selected', links[i].getAttribute('data-folder') === currentFolder);
+    // Only Spam/Trash ever offer this - emptying Inbox (or any future
+    // folder) as a single destructive click isn't something any real
+    // mail client exposes, and the server enforces the exact same
+    // Spam/Trash-only allowlist independently (see email.jet) - this is
+    // just keeping the button from ever being visible somewhere it
+    // would 400 anyway, not the actual safety boundary.
+    var emptyBtn = document.getElementById('email-empty-folder-btn');
+    if (emptyBtn)
+      emptyBtn.hidden = (currentFolder !== 'Spam' && currentFolder !== 'Trash');
   }
 
   function escapeHtml(s) {
@@ -158,6 +174,7 @@
       '<button type="button" id="email-search-btn" class="icon-btn" title="Search">' + ICONS.search + '</button>' +
       '</span>' +
       '<button type="button" id="email-compose-btn" class="icon-btn" title="New Mail">' + ICONS.compose + '</button>' +
+      '<button type="button" id="email-empty-folder-btn" class="icon-btn" title="Permanently empty this folder" hidden>' + ICONS.emptyFolder + '</button>' +
       '<button type="button" id="email-refresh-btn" class="icon-btn" title="Refresh">' + ICONS.refresh + '</button>' +
       '</span>' +
       '</div>' +
@@ -218,6 +235,7 @@
     document.getElementById('email-refresh-btn').addEventListener('click', function() {
       loadMessageList();
     });
+    document.getElementById('email-empty-folder-btn').addEventListener('click', emptyCurrentFolder);
 
     // Matches sender, subject, or body content in whatever folder is
     // currently open (see __imap.cpp's searchMessages()) - an empty
@@ -444,6 +462,38 @@
     });
   }
 
+  // Permanently deletes every message in the CURRENT folder (only ever
+  // reachable while viewing Spam or Trash - see syncActiveFolder()'s own
+  // button-visibility gate, and email.jet's independent server-side
+  // allowlist, which is the real enforcement). Unlike trashMessage()
+  // there's no undo, no "move somewhere" - a real, human-readable confirm()
+  // is the whole safety net here, matching how Gmail/Outlook both gate
+  // "Empty Trash now" behind exactly one extra click and nothing fancier.
+  function emptyCurrentFolder() {
+    if (currentFolder !== 'Spam' && currentFolder !== 'Trash')
+      return;
+    if (!window.confirm('Permanently delete every message in ' + currentFolder + '? This cannot be undone.'))
+      return;
+    var btn = document.getElementById('email-empty-folder-btn');
+    if (btn) btn.disabled = true;
+    post('/email/emptyfolder', { folder: currentFolder })
+      .then(function(res) {
+        if (btn) btn.disabled = false;
+        if (!res.ok) {
+          window.alert(res.error || 'Could not empty the folder.');
+          return;
+        }
+        currentUid = null;
+        document.getElementById('email-reading-pane').innerHTML =
+          '<div id="email-empty-state">Select a message to read it.</div>';
+        loadMessageList();
+      })
+      .catch(function() {
+        if (btn) btn.disabled = false;
+        window.alert('Empty-folder request failed.');
+      });
+  }
+
   // Same fade-out/fetch-concurrently/fade-in shape as openMessage() and
   // spa.js's own navigate() - every list refresh (folder switch,
   // refresh button) gets the same smooth transition instead of a flash
@@ -488,8 +538,10 @@
         if (!skipFade)
           list.classList.remove('email-fading');
       })
-      .catch(function() {
-        list.innerHTML = '<div id="email-empty-state">Could not load messages.</div>';
+      .catch(function(err) {
+        console.error('loadMessageList failed:', err);
+        list.innerHTML = '<div id="email-empty-state">Could not load messages' +
+          (err && err.message ? ': ' + escapeHtml(err.message) : '.') + '</div>';
         if (!skipFade)
           list.classList.remove('email-fading');
       });
@@ -506,8 +558,10 @@
   // cosmetic problem, not worth surfacing as a user-visible failure.
   function loadFolderCounts() {
     post('/email/folders', {}).then(function(res) {
-      if (res.error)
+      if (res.error) {
+        console.error('loadFolderCounts server error:', res.error);
         return;
+      }
       var folders = ['Inbox', 'Spam', 'Trash'];
       for (var i = 0; i < folders.length; i++) {
         var f = folders[i];
@@ -515,7 +569,9 @@
         if (span && res[f])
           span.textContent = res[f].messages > 0 ? (res[f].unseen + '/' + res[f].messages) : '';
       }
-    }).catch(function() {});
+    }).catch(function(err) {
+      console.error('loadFolderCounts failed:', err);
+    });
   }
 
   function loadAccounts() {
@@ -756,8 +812,10 @@
         }
         pane.classList.remove('email-fading');
       })
-      .catch(function() {
-        pane.innerHTML = '<div id="email-empty-state">Could not load message.</div>';
+      .catch(function(err) {
+        console.error('openMessage failed:', err);
+        pane.innerHTML = '<div id="email-empty-state">Could not load message' +
+          (err && err.message ? ': ' + escapeHtml(err.message) : '.') + '</div>';
         pane.classList.remove('email-fading');
       });
   }

jetc/barant-site/assets/images/main.css

@@ -13,16 +13,16 @@
 
 @font-face {
     font-family: avenir;
-    src: url('https://barant.com/fonts/AvenirLTStd-Light.ttf');
+    src: url('https://barant.com/assets/AvenirLTStd-Light.ttf');
 }
 @font-face {
     font-family: source;
-    src: url('https://barant.com/fonts/jackinput.TTF');
+    src: url('https://barant.com/assets/jackinput.TTF');
 }
 
 @font-face {
     font-family: exo2;
-    src: url('https://barant.com/fonts/Exo2-RegularCondensed.otf');
+    src: url('https://barant.com/assets/Exo2-RegularCondensed.otf');
 }
 
 :root {
@@ -283,7 +283,7 @@ textarea.fieldinputerror {
   background: linear-gradient(180deg, #131318, #0d0d10);
   border-radius: 5px 5px 0px 0px;
   border-bottom: 1px solid var(--bond-line);
-  max-height: 80px;
+  max-height: 125px;
 }
 .entryform {
   background: #232330;
@@ -365,24 +365,43 @@ textarea.fieldinputerror {
   transition: color 0.2s ease, border-color 0.2s ease;
   }
 
-/* The currently-active entry in a page's own sidebar submenu (e.g.
-   opensource.menu's list of subpages) - a background highlight rather
-   than baritemselected's "raised tab" treatment, since these are plain
-   inline links stacked in a list, not tabs sitting on a bar edge.
-   Applied server-side (see opensource.menu) by comparing each
-   linkbutton's own subpage against $[SUBPAGE] - spa.js already
-   re-renders and swaps this menu's markup on every client-side
-   navigation (see its #_spa_panelmenu handling), so this stays correct
-   without any script of its own. */
+/* Every entry in a page's own sidebar submenu (e.g. opensource.menu's
+   list of subpages) shares this same box model - selected and
+   unselected alike - so the only thing that changes when an item
+   becomes active is its background/border, never its box size or the
+   position of its own text. Giving only the active item padding/margin
+   (the original approach) made its text visibly shift the moment it
+   was selected, since the unselected items sat flush with none. */
+#panelmenu a {
+  display: block;
+  padding: 2px 6px;
+  margin: 2px 0;
+  }
+
+/* The currently-active entry - a background highlight rather than
+   baritemselected's "raised tab" treatment, since these are plain
+   links stacked in a list, not tabs sitting on a bar edge. Applied
+   server-side (see opensource.menu) by comparing each linkbutton's own
+   subpage against $[SUBPAGE] - spa.js also applies it instantly client-
+   side on click (see its #panelmenu click listener) and then
+   re-confirms it from the server's own #_spa_panelmenu markup once the
+   fetch resolves, so this stays correct either way. */
 .submenuitem-active {
   background: var(--bond-panel-2);
   color: var(--bond-gold-bright) !important;
-  padding: 2px 6px;
-  margin: -2px -6px;
   border-radius: 3px;
   box-shadow: inset 0 0 0 1px var(--bond-gold);
   }
 
+/* Every menu entry's own markup is <linkbutton...></linkbutton><br> - that
+   <br> was needed to force a line break after an inline link, but every
+   entry is display:block now (its own implicit line break), so the
+   trailing <br> doubles up into a blank line for every item, not just
+   the active one. */
+#panelmenu a + br {
+  display: none;
+  }
+
 .panel {
   background: var(--bond-panel);
   margin: 10px;
@@ -861,3 +880,499 @@ textarea.fieldinputerror {
 .filemgr-progress-fill { height: 100%; width: 0%; background: var(--bond-gold-bright); transition: width 0.15s ease; }
 .filemgr-item.filemgr-done .filemgr-progress-fill { background: #6c6; }
 .filemgr-item.filemgr-failed .filemgr-progress-fill { background: #c66; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Fades in during an SPA navigation fetch - lives outside #content (a
+   content.innerHTML swap would just wipe it out otherwise), positioned
+   relative to the viewport rather than the resizable content column so
+   dragging #panelmenu-resizer narrower/wider never throws its centering
+   off. The transition duration alone (no separate timer) is what keeps
+   a fast load from ever showing it at a noticeable opacity before the
+   class comes back off. */
+.spa-loading-indicator {
+  position: fixed;
+  top: 90px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--bond-text-dim);
+  font-size: 10pt;
+  letter-spacing: 1px;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  pointer-events: none;
+  z-index: 500;
+}
+.spa-loading-indicator.spa-loading-visible {
+  opacity: 1;
+}
+
+
+/* Fades in during an SPA navigation fetch - lives outside #content (a
+   content.innerHTML swap would just wipe it out otherwise), positioned
+   relative to the viewport rather than the resizable content column so
+   dragging #panelmenu-resizer narrower/wider never throws its centering
+   off. The transition duration alone (no separate timer) is what keeps
+   a fast load from ever showing it at a noticeable opacity before the
+   class comes back off. */
+.spa-loading-indicator {
+  position: fixed;
+  top: 90px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--bond-text-dim);
+  font-size: 10pt;
+  letter-spacing: 1px;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  pointer-events: none;
+  z-index: 500;
+}
+.spa-loading-indicator.spa-loading-visible {
+  opacity: 1;
+}
+
+
+/* Keeps the music/library/ianslibrary subpages pinned to the browser
+   window's height (footer always visible, no whole-page scroll) while
+   the song list itself scrolls internally - the exact same pattern
+   already proven for the email app's own message list
+   (.pageclass:has(#email-app)), just scoped to this marker instead and
+   adapted for <sectionframe>'s own heading-then-contents structure
+   (the heading needs to stay a fixed size above the scrolling list,
+   not get swept into the same scroll region). height:100% has to be
+   set explicitly at every level down to .music-song-list itself -
+   percentage heights only resolve against an ancestor with its own
+   definite height, and a plain block element's default is auto, which
+   does not count, so skipping any one level here would silently break
+   the whole chain. #main-subpage (main.page's generic per-subpage
+   wrapper, between #content and .sectionframe) is exactly that kind of
+   skip - missing it let .sectionframe's height:100% resolve to auto,
+   so .music-song-list sized itself to its full content height instead
+   of a scrollable box, and the overflow got clipped by .pageclass's
+   own overflow:hidden with no scrollbar to show for it. */
+.pageclass:has(.music-song-list) {
+  height: calc(100vh - 150px);
+  overflow: hidden;
+}
+#content:has(.music-song-list) {
+  height: 100%;
+  overflow: hidden;
+}
+#main-subpage:has(.music-song-list) {
+  height: 100%;
+  overflow: hidden;
+}
+.sectionframe:has(.music-song-list) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.sectionframe:has(.music-song-list) .sectionframecontents {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.music-song-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Fades in during an SPA navigation fetch - lives outside #content (a
+   content.innerHTML swap would just wipe it out otherwise), positioned
+   relative to the viewport rather than the resizable content column so
+   dragging #panelmenu-resizer narrower/wider never throws its centering
+   off. The transition duration alone (no separate timer) is what keeps
+   a fast load from ever showing it at a noticeable opacity before the
+   class comes back off. */
+.spa-loading-indicator {
+  position: fixed;
+  top: 90px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--bond-text-dim);
+  font-size: 10pt;
+  letter-spacing: 1px;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  pointer-events: none;
+  z-index: 500;
+}
+.spa-loading-indicator.spa-loading-visible {
+  opacity: 1;
+}
+
+/* Global persistent music player band - slides open only while playing */
+.globalplayer-band {
+  max-height: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bond-panel);
+  border-bottom: 1pt solid var(--bond-line);
+  padding: 0 16px;
+  box-sizing: border-box;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+}
+.globalplayer-band.globalplayer-open {
+  max-height: 54px;
+  padding: 10px 16px;
+}
+.globalplayer-title {
+  position: relative;
+  flex: 1;
+  /* A flex item's default min-width is its content's own min-content
+     size, not 0 - without this, a long song name would force the whole
+     LCD panel wider (squeezing the volume slider/buttons) rather than
+     actually truncating against the space it is given. */
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: #000;
+  border: 1px solid #333;
+  border-radius: 4px;
+  padding: 4px 10px;
+  box-sizing: border-box;
+  box-shadow: inset 0 0 8px rgba(26,143,196,0.12), inset 0 2px 4px rgba(0,0,0,0.8);
+}
+.globalplayer-duration {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-size: 10pt;
+  color: #1a8fc4;
+  text-shadow: 0 0 4px rgba(26,143,196,0.7);
+  opacity: 0.85;
+}
+.globalplayer-random-indicator {
+  position: absolute;
+  top: 20px;
+  right: 8px;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-size: 7pt;
+  letter-spacing: 1px;
+  color: #1a8fc4;
+  text-shadow: 0 0 4px rgba(26,143,196,0.7);
+  opacity: 0.85;
+  display: none;
+}
+.globalplayer-random-indicator.globalplayer-random-indicator-visible {
+  display: block;
+}
+.globalplayer-title-text {
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-size: 20pt;
+  line-height: 1.1;
+  color: #1a8fc4;
+  text-shadow: 0 0 5px rgba(26,143,196,0.8), 0 0 1px rgba(26,143,196,0.9);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.globalplayer-progress {
+  position: relative;
+  height: 8px;
+  width: 100%;
+  background: rgba(26,143,196,0.15);
+  border-radius: 4px;
+  margin-top: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  touch-action: none;
+}
+.globalplayer-progress-fill {
+  height: 100%;
+  width: 0%;
+  background: #1a8fc4;
+  border-radius: 4px 0 0 4px;
+  box-shadow: 0 0 4px rgba(26,143,196,0.8);
+  transition: width 0.2s linear;
+  pointer-events: none;
+}
+.globalplayer-progress-handle {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #fff6d0 0%, #d4af37 55%, #6b5313 100%);
+  border: 1px solid #5a4410;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.7);
+  transform: translate(-50%, -50%);
+  transition: left 0.2s linear;
+  pointer-events: none;
+}
+.globalplayer-progress.globalplayer-progress-dragging .globalplayer-progress-fill,
+.globalplayer-progress.globalplayer-progress-dragging .globalplayer-progress-handle {
+  transition: none;
+}
+
+/* Square, touch-tone-style buttons for the player band - same dished
+   gold-on-black look as the sipphone tag's dialpad keys. */
+.globalplayer-btn {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: radial-gradient(circle at 50% 50%, #8a6a22 0%, #b8903a 32%, #d4af37 55%, #ecce79 80%, #fff6d0 100%);
+  border: 1px solid #5a4410;
+  box-shadow:
+    0 2px 0 #4a3a0f,
+    0 3px 5px rgba(0,0,0,0.5),
+    inset 0 3px 5px rgba(0,0,0,0.45),
+    inset 0 -1px 1px rgba(255,255,255,0.5);
+  color: #3a2d05;
+  cursor: pointer;
+  transition: transform 0.06s ease, box-shadow 0.06s ease;
+}
+.globalplayer-btn svg { width: 16px; height: 16px; }
+.globalplayer-btn:active {
+  transform: translateY(2px);
+  box-shadow:
+    inset 0 4px 8px rgba(0,0,0,0.6),
+    inset 0 -1px 1px rgba(255,255,255,0.3);
+}
+.globalplayer-btn-text {
+  width: auto;
+  padding: 0 12px;
+  font-size: 10px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  white-space: nowrap;
+}
+
+/* Stereo FFT-style bar graph - left channel above the midline, right
+   channel below it, drawn directly onto a small canvas. */
+.globalplayer-eq {
+  flex-shrink: 0;
+  width: 60px;
+  height: 32px;
+  background: #000;
+  border: 1px solid #333;
+  border-radius: 4px;
+}
+
+/* Playlist dropdown - its own independent sliding strip directly below
+   the player band, NOT nested inside it: the band's own overflow:hidden
+   (needed for its slide animation) would otherwise clip anything
+   positioned to pop out below it, which is why this was invisible
+   before despite the open/close class toggling correctly in JS. */
+.globalplayer-queue {
+  max-height: 0;
+  overflow: hidden;
+  background: var(--bond-panel-2);
+  border-bottom: 1pt solid var(--bond-line);
+  transition: max-height 0.25s ease;
+}
+.globalplayer-queue.globalplayer-queue-open {
+  max-height: 240px;
+  overflow-y: auto;
+}
+.globalplayer-queue-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 6px 10px;
+  padding: 8px 14px;
+  border: 1px solid var(--bond-line);
+  border-radius: 8px;
+  background: rgba(255,255,255,0.03);
+  color: var(--bond-text-dim);
+}
+.globalplayer-queue-name {
+  font-size: 18pt;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.globalplayer-queue-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+.globalplayer-queue-handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--bond-text-dim);
+  cursor: grab;
+}
+.globalplayer-queue-handle svg {
+  width: 14px;
+  height: 14px;
+}
+.globalplayer-queue-item.globalplayer-queue-dragging {
+  opacity: 0.4;
+}
+.globalplayer-queue-item.globalplayer-queue-dragover {
+  border-top: 2px solid var(--bond-gold-bright);
+}
+.globalplayer-queue-right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.globalplayer-queue-duration {
+  flex-shrink: 0;
+  font-size: 9pt;
+  opacity: 0.75;
+}
+.globalplayer-queue-remove {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin: 0;
+  border-radius: 6px;
+  border: 1px solid var(--bond-line);
+  background: linear-gradient(180deg, #1c1c24, #131318);
+  color: var(--bond-text-dim);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+.globalplayer-queue-remove svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+.globalplayer-queue-remove:hover {
+  border-color: var(--bond-red);
+  color: var(--bond-red);
+  box-shadow: 0 0 0.5em rgba(161,58,58,0.35);
+  background: linear-gradient(180deg, #24242e, #1a1a20);
+}
+.globalplayer-queue-item.globalplayer-queue-current {
+  color: var(--bond-gold-bright);
+  font-weight: 600;
+  border-color: var(--bond-gold);
+  background: rgba(212,175,55,0.08);
+}
+
+/* Tactile feedback for clicking a song to queue it: an immediate flash
+   on the row, plus a lasting checkmark so it is clear at a glance which
+   songs are already in the queue. */
+/* Scoped to the name span, not the row itself: the row is a flex
+   container with justify-content:space-between, and a ::before on it
+   directly becomes its own flex item - with 3 items instead of 2, the
+   name ends up looking centered between the checkmark and the duration/
+   remove group instead of staying left-aligned. Putting it on the name
+   span keeps it as ordinary inline content inside that one flex item. */
+.song-queued .music-song-name::before {
+  content: "\2713  ";
+  color: var(--bond-gold-bright);
+}
+.song-queued-flash {
+  animation: songQueuedFlash 0.6s ease;
+}
+@keyframes songQueuedFlash {
+  0% { background: var(--bond-gold-bright); color: var(--bond-bg); }
+  100% { background: transparent; }
+}
+
+/* Song-picker rows (music/jukebox subpages) - same boxed, rounded-corner
+   look as the playlist dropdown's own entries, for visual consistency
+   between "songs you can pick" and "what's in the queue". */
+.music-song-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 4px 0;
+  padding: 5px 10px;
+  border: 1px solid var(--bond-line);
+  border-radius: 8px;
+  background: rgba(255,255,255,0.03);
+  color: var(--bond-text-dim);
+  cursor: pointer;
+}
+.music-song-row:hover {
+  border-color: var(--bond-gold);
+  background: rgba(255,255,255,0.06);
+}
+.music-song-name {
+  font-size: 12pt;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.music-song-duration {
+  flex-shrink: 0;
+  font-size: 8pt;
+  opacity: 0.75;
+}
+
+/* Volume slider - a small gold knob riding a thin gold-tinted track */
+.globalplayer-volume {
+  -webkit-appearance: none;
+  appearance: none;
+  flex-shrink: 0;
+  width: 70px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--bond-line);
+  outline: none;
+  cursor: pointer;
+}
+.globalplayer-volume::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #fff6d0 0%, #d4af37 55%, #6b5313 100%);
+  border: 1px solid #5a4410;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
+  cursor: pointer;
+}
+.globalplayer-volume::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--bond-line);
+}
+.globalplayer-volume::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #fff6d0 0%, #d4af37 55%, #6b5313 100%);
+  border: 1px solid #5a4410;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
+  cursor: pointer;
+}

jetc/barant-site/assets/images/spa.js

@@ -1,6 +1,7 @@
 (function() {
   var content = document.getElementById('content');
   var form = document.getElementById('mainform');
+  var loadingIndicator = document.getElementById('spa-loading-indicator');
   // Lives outside #content (a sibling in the persistent shell, next to
   // the menu bar/form) - a fragment swap never touches it on its own,
   // so a per-page side menu would otherwise stay frozen on whichever
@@ -220,6 +221,12 @@
   function navigate(url, push) {
     var sep = url.indexOf('?') === -1 ? '?' : '&';
     content.classList.add('spa-fading');
+    // Opacity transition alone (see the CSS) means a fetch that resolves
+    // quickly never gets the indicator past a barely-visible opacity
+    // before this removes the class again - exactly the "do not flash
+    // this for a fast load" behavior wanted, with no separate delay
+    // timer needed to achieve it.
+    if (loadingIndicator) loadingIndicator.classList.add('spa-loading-visible');
     Promise.all([
       fetch(url + sep + '_fragment=1', { credentials: 'same-origin' }).then(function(r) { return r.text(); }),
       delay(180)
@@ -233,6 +240,7 @@
           syncActiveTab(finalUrl.split('?')[0]);
         }
         content.classList.remove('spa-fading');
+        if (loadingIndicator) loadingIndicator.classList.remove('spa-loading-visible');
       });
   }
 
@@ -254,6 +262,7 @@
       var subpage = fd.get('SUBPAGE') || '';
       var url = formPrefix + '/' + page + (subpage ? '/' + subpage : '');
       content.classList.add('spa-fading');
+      if (loadingIndicator) loadingIndicator.classList.add('spa-loading-visible');
       Promise.all([
         fetch(url + '?_fragment=1', {
           method: 'POST',
@@ -271,6 +280,7 @@
             syncActiveTab(finalUrl.split('?')[0]);
           }
           content.classList.remove('spa-fading');
+          if (loadingIndicator) loadingIndicator.classList.remove('spa-loading-visible');
         });
     });
   }
@@ -279,6 +289,24 @@
     navigate(window.location.pathname + window.location.search, false);
   });
 
+  // Instant visual feedback on a side-menu click - without this, the
+  // active-item highlight only updated once applyResponse() swapped in
+  // the new #_spa_panelmenu markup after the fetch finished, which read
+  // as unresponsive (the click did nothing visible until the whole
+  // subpage had already loaded). That server-rendered swap is still the
+  // authoritative source of truth and will correct this on arrival (e.g.
+  // if a click ends up redirected somewhere else entirely), so this is
+  // purely an optimistic bridge, not a second source of truth.
+  if (panelMenu) {
+    panelMenu.addEventListener('click', function(e) {
+      var a = e.target.closest('a');
+      if (!a || !panelMenu.contains(a)) return;
+      var current = panelMenu.querySelector('.submenuitem-active');
+      if (current) current.classList.remove('submenuitem-active');
+      a.classList.add('submenuitem-active');
+    });
+  }
+
   // Drag-to-resize for the side menu (#panelmenu) against the main
   // content column - the resizer bar (#panelmenu-resizer) lives in the
   // persistent shell right alongside panelMenu itself (see its own