From 175872a24eb54763933362b304e12d4ad359f421 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 21:49:28 +0100
Subject: [PATCH 1/3] Drop "All" from the Collapse row

It governed two panels by the end, Analysis and Sections, so one press saved
exactly one press. And it was a third control in this bar wearing that word,
next to a row where "All" already means every stem and, inside that, keeping
the vocals as one track.

What it existed to prove still holds and is now the row's only job: whatever
this row collapses, it can bring back. Each panel has its own button, which is
the only way back from a collapsed one, and the library is still not among them
(#588).

Its wiring goes with it: wireAllToggle, the MutationObserver it kept on .app to
stay honest about a state it no longer reports, and the panels.all and
panels.allTitle keys across all ten tables.

The spec is rewritten around what survives rather than patched: the row is the
panels it governs and nothing else, every panel it puts away it can bring back,
it leaves the library alone, collapsing the library does not disturb it, and a
collapsed panel survives a reload.
---
 static/index.html                |  32 ++++------
 static/js/i18n.js                |  40 ------------
 static/js/ui-chrome.js           |  46 --------------
 tests/e2e/panel-toggles.spec.mjs | 102 +++++++++++++++----------------
 4 files changed, 62 insertions(+), 158 deletions(-)

diff --git a/static/index.html b/static/index.html
index ac1ffaa5..590e100c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -193,26 +193,20 @@
              stub costs most of what collapsing the smaller ones returns. -->
         <div class="daw-panel-toggles">
           <!-- "Collapse" labels the row and is not a control, so the rule sits
-               after it: everything to its right is a button. "All" belongs with
-               the three panel names rather than with the label, because it is
-               the same kind of thing, one press that puts something away.
-               The label is one word because the row has no width for a sentence.
-
-               Its pressed state means what the row's state means, greyed and
-               struck once everything is away. The trap is the threshold: read
-               as "is anything hidden" it struck itself through the moment you
-               hid Analysis on its own, which looks like you pressed it. It is
-               off only when all three are.
-
-               The library is not one of them, and not by omission: "All" used
-               to collapse it too, and nothing in this row could put it back
-               (#588). Its control lives in the rail. -->
+               after it: everything to its right is a button. The label is one
+               word because the row has no width for a sentence.
+
+               There was an "All" here, one press to put every panel away. It
+               governed two panels by the end, so it saved a single press, and
+               it was another control in this bar wearing a word that already
+               means something else two rows up. The panels it governed each
+               have their own button, which is the only way back from a
+               collapsed one.
+
+               The library was never among them, and not by omission: it used to
+               be, and nothing in this row could put it back (#588). Its control
+               lives in the rail. -->
           <span class="daw-panel-toggles-label" data-i18n="panels.collapse">Collapse</span>
-          <button class="daw-panel-toggle daw-panel-toggle-all" type="button" data-panel-all aria-pressed="true"
-                  title="Show or hide every panel" data-i18n-title="panels.allTitle" data-i18n-aria-label="panels.allTitle">
-            <span data-i18n="panels.all">All</span>
-          </button>
-          <span class="daw-panel-toggles-sep" aria-hidden="true">-</span>
           <button class="daw-panel-toggle" type="button" data-panel="analysis" aria-pressed="true"
                   title="Show or hide the track analysis" data-i18n-title="panels.analysisTitle" data-i18n-aria-label="panels.analysisTitle">
             <span data-i18n="panels.analysis">Analysis</span>
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 6d5239bf..323f65d8 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -345,11 +345,7 @@ const en = {
 
   "panels.timelineTitle": "Show or hide the timeline",
 
-  "panels.all": "All",
-
   "panels.collapse": "Collapse",
-
-  "panels.allTitle": "Show or hide every panel",
   "mixer.hint": "Drag fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -964,11 +960,7 @@ const pl = {
 
   "panels.timelineTitle": "Pokaż lub ukryj oś czasu",
 
-  "panels.all": "Wszystko",
-
   "panels.collapse": "Zwiń",
-
-  "panels.allTitle": "Pokaż lub ukryj wszystkie panele",
   "mixer.hint": "Przeciągnij suwak · M/S",
   "stemsPanel.ariaLabel": "Ścieżki",
 
@@ -1573,11 +1565,7 @@ const ja = {
 
   "panels.timelineTitle": "タイムラインの表示を切り替えます",
 
-  "panels.all": "すべて",
-
   "panels.collapse": "折りたたむ",
-
-  "panels.allTitle": "すべてのパネルの表示を切り替えます",
   "mixer.hint": "フェーダーをドラッグ · M/S",
   "stemsPanel.ariaLabel": "パート",
 
@@ -2157,11 +2145,7 @@ const zhHans = {
 
   "panels.timelineTitle": "显示或隐藏时间轴",
 
-  "panels.all": "全部",
-
   "panels.collapse": "折叠",
-
-  "panels.allTitle": "显示或隐藏所有面板",
   "mixer.hint": "拖动推子 · M/S",
   "stemsPanel.ariaLabel": "音轨",
 
@@ -2741,11 +2725,7 @@ const de = {
 
   "panels.timelineTitle": "Zeitleiste ein- oder ausblenden",
 
-  "panels.all": "Alle",
-
   "panels.collapse": "Einklappen",
-
-  "panels.allTitle": "Alle Bereiche ein- oder ausblenden",
   "mixer.hint": "Fader ziehen · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -3336,11 +3316,7 @@ const pt = {
 
   "panels.timelineTitle": "Mostrar ou ocultar a linha do tempo",
 
-  "panels.all": "Tudo",
-
   "panels.collapse": "Recolher",
-
-  "panels.allTitle": "Mostrar ou ocultar todos os painéis",
   "mixer.hint": "Arraste o fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -3933,11 +3909,7 @@ const id = {
 
   "panels.timelineTitle": "Tampilkan atau sembunyikan lini masa",
 
-  "panels.all": "Semua",
-
   "panels.collapse": "Ciutkan",
-
-  "panels.allTitle": "Tampilkan atau sembunyikan semua panel",
   "mixer.hint": "Seret fader · M/S",
   "stemsPanel.ariaLabel": "Stem",
 
@@ -4517,11 +4489,7 @@ const fr = {
 
   "panels.timelineTitle": "Afficher ou masquer la chronologie",
 
-  "panels.all": "Tout",
-
   "panels.collapse": "Réduire",
-
-  "panels.allTitle": "Afficher ou masquer tous les panneaux",
   "mixer.hint": "Glissez le fader · M/S",
   "stemsPanel.ariaLabel": "Pistes",
 
@@ -5230,11 +5198,7 @@ const es = {
 
   "panels.timelineTitle": "Mostrar u ocultar la línea de tiempo",
 
-  "panels.all": "Todo",
-
   "panels.collapse": "Contraer",
-
-  "panels.allTitle": "Mostrar u ocultar todos los paneles",
   "mixer.hint": "Arrastra el fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -5848,11 +5812,7 @@ const ko = {
 
   "panels.timelineTitle": "타임라인 표시하거나 숨기기",
 
-  "panels.all": "전체",
-
   "panels.collapse": "접기",
-
-  "panels.allTitle": "모든 패널 표시하거나 숨기기",
   "mixer.hint": "페이더 드래그 · M/S",
   "stemsPanel.ariaLabel": "스템",
 
diff --git a/static/js/ui-chrome.js b/static/js/ui-chrome.js
index 40eb557c..90119ff0 100644
--- a/static/js/ui-chrome.js
+++ b/static/js/ui-chrome.js
@@ -110,52 +110,6 @@ function wirePanelToggles() {
       persist(name, next);
     });
   }
-
-  wireAllToggle(app, toggles.map((btn) => btn.dataset.panel), apply, persist);
-}
-
-// "All" clears the three panels in one press and brings them back in one more.
-//
-// Deliberately not the library. It used to take that too, and the row could
-// not put it back: the three buttons beside it only know about their own
-// panels, so after an "All" press you could turn Analysis, Sections and
-// Timeline back on, watch "All" light up as though everything had returned,
-// and still be looking at a collapsed library with nothing in this row able to
-// reach it (#588). The library has its own control in the rail, which is where
-// a reader of this row would not think to look for it.
-//
-// It greys and strikes through like the other three once all three are away.
-// The threshold is the whole trick. Read as "is anything hidden", it struck
-// itself through the moment Analysis was hidden on its own, which looks exactly
-// like you pressed it. It is off only when every panel it governs is off, so it
-// describes the row rather than the loudest thing in it.
-//
-// It stores nothing. The state is derived from .app either way, so there is no
-// fourth flag to disagree with the other three.
-function wireAllToggle(app, names, apply, persist) {
-  const btn = document.querySelector(".daw-panel-toggle[data-panel-all]");
-  if (!btn) return;
-
-  const hiddenCount = () =>
-    names.filter((name) => app.classList.contains(`panel-${name}-off`)).length;
-
-  const sync = () => btn.setAttribute("aria-pressed", String(hiddenCount() < names.length));
-
-  btn.addEventListener("click", () => {
-    // Anything still on screen means the press is asking to clear it away.
-    const show = hiddenCount() === names.length;
-    for (const name of names) {
-      apply(name, show);
-      persist(name, show);
-    }
-  });
-
-  // Each panel can also be moved from its own button, and they all land as a
-  // class on .app, so watching that one attribute keeps this button honest
-  // without every other handler having to remember it exists. The library's
-  // class lands there too and is ignored, which is the point.
-  new MutationObserver(sync).observe(app, { attributes: true, attributeFilter: ["class"] });
-  sync();
 }
 
 wirePanelToggles();
diff --git a/tests/e2e/panel-toggles.spec.mjs b/tests/e2e/panel-toggles.spec.mjs
index c176a054..98749106 100644
--- a/tests/e2e/panel-toggles.spec.mjs
+++ b/tests/e2e/panel-toggles.spec.mjs
@@ -1,15 +1,17 @@
 // The Collapse row governs the panels beside it. Not the library.
 //
-// "All" used to take the library with it, and nothing in the row could put it
-// back: the buttons beside it only know about their own panels. So the
-// reported sequence was press All, then turn each panel back on one at a time,
-// and watch All light up as though everything had returned while the library
-// stayed collapsed with no way to reach it from there (#588). The library has
-// its own control in the rail.
+// It used to carry an "All" as well, one press to put every panel away. That
+// button is gone: it governed two panels by the end, so it saved a single
+// press, and it wore a word the Extract row already uses for something else.
+// What survives it is the rule it existed to prove, which is still the thing
+// worth guarding: whatever this row collapses, it can also bring back, and the
+// library is not one of the things it touches.
 //
-// Two panels now, not three. Timeline went with the footer's waveform strip:
-// it governed a region that no longer has anything visible in it, so the
-// button named something that was not there.
+// "All" used to take the library with it, and nothing in the row could put it
+// back: the buttons beside it only know about their own panels, so you could
+// turn each panel on again, see the row looking complete, and still be staring
+// at a collapsed library with no way to reach it from here (#588). The library
+// has its own control in the rail.
 import { test, expect } from "@playwright/test";
 import { openStudio } from "./helpers.mjs";
 
@@ -18,75 +20,69 @@ const PANELS = ["analysis", "sections"];
 const state = (page) =>
   page.evaluate((panels) => {
     const app = document.querySelector(".app");
-    const all = document.querySelector(".daw-panel-toggle[data-panel-all]");
     return {
       hidden: panels.filter((n) => app.classList.contains(`panel-${n}-off`)),
       libraryCollapsed: app.classList.contains("cat-collapsed"),
-      allPressed: all.getAttribute("aria-pressed") === "true",
+      buttons: [...document.querySelectorAll(".daw-panel-toggle")].map((b) => b.textContent.trim()),
     };
   }, PANELS);
 
-const clickAll = (page) => page.locator(".daw-panel-toggle[data-panel-all]").click();
-const clickPanel = (page, name) => page.locator(`.daw-panel-toggle[data-panel="${name}"]`).click();
+const clickPanel = (page, name) =>
+  page.locator(`.daw-panel-toggle[data-panel="${name}"]`).click();
 
 test.describe("collapse row", () => {
-  test("All leaves the library alone in both directions", async ({ page }) => {
+  test("the row is the panels it governs, and nothing else", async ({ page }) => {
     await openStudio(page, { tauri: true });
-    expect((await state(page)).libraryCollapsed).toBe(false);
 
-    await clickAll(page);
-    let s = await state(page);
-    expect(s.hidden, "every panel it governs is away").toEqual(PANELS);
-    expect(s.libraryCollapsed, "the library is not one of them").toBe(false);
-
-    await clickAll(page);
-    s = await state(page);
-    expect(s.hidden).toEqual([]);
-    expect(s.libraryCollapsed).toBe(false);
+    const s = await state(page);
+    expect(s.buttons).toEqual(["Analysis", "Sections"]);
+    // No "All": one press saved is not worth a third control called All in a
+    // bar that already has one.
+    expect(s.buttons).not.toContain("All");
   });
 
-  test("the reporter's sequence leaves nothing stranded", async ({ page }) => {
+  test("every panel it puts away, it can bring back", async ({ page }) => {
     await openStudio(page, { tauri: true });
+    expect((await state(page)).hidden).toEqual([]);
 
-    // Press All, then bring each panel back from its own button.
-    await clickAll(page);
     for (const name of PANELS) await clickPanel(page, name);
+    expect((await state(page)).hidden).toEqual(PANELS);
 
-    const s = await state(page);
-    // The bug was that All read as fully on here while the library was still
-    // collapsed and unreachable from this row.
-    expect(s.allPressed, "All reflects the row").toBe(true);
-    expect(s.hidden).toEqual([]);
-    expect(s.libraryCollapsed, "nothing was left collapsed behind it").toBe(false);
+    // The way back is the same button. Collapsing to nothing is only safe
+    // because of this.
+    for (const name of PANELS) await clickPanel(page, name);
+    expect((await state(page)).hidden).toEqual([]);
   });
 
-  test("All still greys out only when every panel it governs is away", async ({ page }) => {
+  test("it leaves the library alone in both directions", async ({ page }) => {
     await openStudio(page, { tauri: true });
+    expect((await state(page)).libraryCollapsed).toBe(false);
 
-    // One panel hidden must not read as "you pressed All".
-    await clickPanel(page, "analysis");
-    expect((await state(page)).allPressed).toBe(true);
-
-    await clickPanel(page, "sections");
-    expect((await state(page)).allPressed, "both away, so the row is away").toBe(false);
+    for (const name of PANELS) await clickPanel(page, name);
+    // The bug was that the library went with them and this row could not
+    // return it (#588).
+    expect((await state(page)).libraryCollapsed).toBe(false);
   });
 
-  test("collapsing the library does not change what All reports", async ({ page }) => {
-    // The library's class lands on the same element the observer watches, so
-    // this is the check that it is genuinely ignored rather than accidentally
-    // absent from the count.
+  test("collapsing the library does not disturb the panels", async ({ page }) => {
+    // The library's class lands on the same element the panels' classes do, so
+    // this is the check that the two are genuinely independent rather than
+    // accidentally not colliding.
     await openStudio(page, { tauri: true });
+    await clickPanel(page, "analysis");
+
     await page.locator("#sidebarCollapseBtn").click();
-    await expect
-      .poll(async () => (await state(page)).libraryCollapsed, { timeout: 5000 })
-      .toBe(true);
+    await expect.poll(async () => (await state(page)).libraryCollapsed).toBe(true);
 
-    expect((await state(page)).allPressed, "the library is not part of the row").toBe(true);
+    expect((await state(page)).hidden).toEqual(["analysis"]);
+  });
+
+  test("a collapsed panel survives a reload", async ({ page }) => {
+    await openStudio(page, { tauri: true });
+    await clickPanel(page, "sections");
+    expect((await state(page)).hidden).toEqual(["sections"]);
 
-    // And All must not resurrect it on the way past.
-    await clickAll(page);
-    expect((await state(page)).libraryCollapsed).toBe(true);
-    await clickAll(page);
-    expect((await state(page)).libraryCollapsed).toBe(true);
+    await page.reload({ waitUntil: "domcontentloaded" });
+    await expect.poll(async () => (await state(page)).hidden).toEqual(["sections"]);
   });
 });

From 7f1ff91eb10872a8f78e492057d8d445cd3dec39 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 21:49:44 +0100
Subject: [PATCH 2/3] Fold the Extract chips that do not fit, and group Vocals
 with its modes

Two things about that row, both about what it does when there is not enough
width for it.

Vocals, All and Lead + Backing were three loose chips among six stems, so the
two that describe Vocals read as peers of Drums and Bass. They are joined now:
the chip and the mode buttons touch, their facing corners square off, and one
outline in the Vocals colour runs round the three of them. The outline carries
the grouping, the fill carries the state, which is why the active mode still
reads at a glance. Tinting the whole group instead made Lead + Backing look
selected when it is not.

The chips no longer wrap. Whichever ones do not fit move into a panel behind a
three-dot button, one at a time, from the end of the row, and come back as the
window widens. Wrapping was the alternative and it is the wrong one: the bar
went from 96px tall to 168 and then 236 as they spilled onto further lines, so
it grew exactly as the window shrank, and the controls on the right were left
stranded at the top of a column stretched by chips they have nothing to do
with. It is 96px at every width from 2560 down to 900 now.

Measured, not a breakpoint: seven chips in ten languages have no width anyone
can write down. It also retired the 1320px rule that used to drop the Collapse
row onto a third line, which existed only because the chips filled row two.

The observer watches the composer rather than the chip row, and that is the
part worth keeping in mind. Watching the row meant measuring the thing being
changed: emptying it shrank the column it sits in, so at a narrow window the
row collapsed to 127px and widening the window never widened it back, because
the chips that would have done so were in the panel. The chips never came home.

And the now-playing card stops stretching. Filling its column turned spare bar
into spare card with the same text in it, so it has a real ceiling at 460px,
what the meta line needs at its longest. Identical at 1920, 2200 and 2560.
---
 static/css/daw.css | 136 ++++++++++++++++++++++++++++++++++++++++---
 static/index.html  |  37 ++++++++----
 static/js/i18n.js  |  10 ++++
 static/js/main.js  | 142 +++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 307 insertions(+), 18 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index a47219f2..1ebcab65 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -4467,7 +4467,18 @@ input, textarea { font-family: inherit; }
   position: relative;
   grid-column: 2;
   grid-row: 1 / 3;
-  justify-self: stretch;
+  /* As wide as the track it is naming, not as wide as the window.
+     It was stretched to fill its column, so a spare 400px of bar became 400px
+     of card with the same text sitting in it. It sizes to its content now and
+     stops; a long title clips with an ellipsis at the cap rather than dragging
+     the card out to meet it. */
+  justify-self: start;
+  /* A real ceiling, not a percentage of the column: 100% just meant "as wide
+     as the bar allows", so the card was 422px at 1600 and 460 at 1920 with the
+     same text in it. 460 is what the meta line needs at its longest, duration
+     through to the extracted date, so the card is the same size at every
+     window width and a long title clips rather than pushing it wider. */
+  max-width: min(100%, 460px);
   align-self: stretch;
   /* .footer-track-slot is `width: var(--daw-col-w)`, which is the gutter width
      it was built to fill in the footer. Here the column decides the width, so
@@ -4678,13 +4689,6 @@ input, textarea { font-family: inherit; }
 @media (max-width: 1460px) {
   .daw-composer > #nowPlayingPanel { display: none; }
 }
-@media (max-width: 1320px) {
-  .daw-composer > .daw-panel-toggles {
-    grid-column: 1 / -1;
-    grid-row: 3;
-    justify-self: end;
-  }
-}
 
 /* The click-track options with nothing to act on.
  *
@@ -4695,3 +4699,119 @@ input, textarea { font-family: inherit; }
   opacity: 0.4;
   pointer-events: none;
 }
+
+/* Vocals and its two mode buttons, as one thing.
+ *
+ * Grouped by proximity, not by a box. A frame around them needed padding and
+ * borders of its own, which made the group 38px tall in a row of 30px chips:
+ * it hung 8px below everything beside it. Joining them instead costs no height
+ * at all, and a segmented control is what this is.
+ *
+ * So the chip and the toggle touch, their facing corners square off, and the
+ * gap that used to sit between them moves to the outside of the pair. */
+.stem-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin-right: 5px;
+}
+.stem-group:not(:has(.vocal-mode-toggle:not(.hidden))) {
+  margin-right: 0;
+}
+/* Facing edges square, and only one border between them. */
+.stem-group:has(.vocal-mode-toggle:not(.hidden)) .stem-choice[data-stem="vocals"] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.stem-group .vocal-mode-toggle {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+}
+/* The mode buttons take the Vocals chip's border, and only its border, so one
+   outline runs round the three of them.
+ *
+ * The outline is the grouping cue; the fill is not available for it. Tinting
+ * the whole toggle made "Lead + Backing" look selected when it is not, and
+ * left the active mode barely distinguishable from the inactive one, because
+ * that mode's own 16% was sitting on top of the group's 14%. Inside the
+ * outline the three states stay readable: Vocals is tinted because the stem is
+ * selected, the active mode is tinted because it is the mode, and the other
+ * one is plain.
+ *
+ * Keyed off the chip's pressed state, because the toggle is only on screen
+ * while Vocals is selected and should not be left as the one thing still
+ * wearing the colour if that ever changes. */
+.stem-group:has(.stem-choice[data-stem="vocals"][aria-pressed="true"]) .vocal-mode-toggle {
+  --color: var(--vocals);
+  border-color: color-mix(in srgb, var(--color) 60%, transparent);
+}
+/* The divider between All and Lead + Backing comes from the same colour, so it
+   reads as an internal seam rather than a second frame. */
+.stem-group:has(.stem-choice[data-stem="vocals"][aria-pressed="true"]) .vocal-mode-btn + .vocal-mode-btn {
+  border-left: 1px solid color-mix(in srgb, var(--color) 60%, transparent);
+}
+
+/* ── The Extract chips, and what happens when they stop fitting ───────────
+   The row never wraps and the bar never gets taller. As the window narrows,
+   whichever chips no longer fit move into a panel behind a three-dot button,
+   one at a time, from the end of the row. The button sits after the row, on the
+   side the chips are leaving from, and is hidden entirely while everything
+   fits.
+
+   Wrapping was the alternative and it is the wrong one here: the composer went
+   from 96px tall to 168 and then 236 as the chips spilled onto further lines,
+   so the bar grew exactly as the window shrank, and the controls on the right
+   were left stranded at the top of a column stretched by chips they have
+   nothing to do with.
+
+   The measuring is in fitStemChips in main.js; this is only what it looks
+   like.
+   ───────────────────────────────────────────────────────────────────────── */
+.stem-more-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 34px;
+  height: 30px;
+  margin-left: 5px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: none;
+  color: var(--muted-2);
+  cursor: pointer;
+  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+}
+.stem-more-btn[hidden] { display: none; }
+.stem-more-btn:hover { background: var(--panel-2); color: var(--fg); }
+.stem-more-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
+
+/* One line, always. Overflow hidden so a chip mid-move is never half drawn,
+   and so this element's clientWidth is the honest budget fitStemChips
+   measures against. */
+.daw-composer .daw-stem-chips {
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+/* Fixed rather than absolute, for the same reason the footer's options panel
+   is: it has to escape the bar it is anchored in. JS sets left/top from the
+   button's own rect. */
+.stem-overflow {
+  position: fixed;
+  z-index: 320;
+  display: none;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  max-width: min(560px, calc(100vw - 32px));
+  padding: 10px;
+  background: var(--panel);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
+}
+.stem-overflow.open { display: flex; }
diff --git a/static/index.html b/static/index.html
index 590e100c..fbd2260b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -90,17 +90,22 @@
           <!-- Stem selection -->
           <div class="daw-stem-section">
             <span class="daw-extract-label" data-i18n="extract.label">Extract</span>
-            <div class="daw-stem-chips">
+            <div class="daw-stem-chips" id="stemChips">
               <button class="stem-choice stem-choice-all" type="button" id="stemAllBtn" aria-pressed="true" data-i18n="extract.all">All</button>
-              <button class="stem-choice" type="button" data-stem="vocals" aria-pressed="true" style="--color:var(--vocals)">
-                <span data-i18n="stem.vocals">Vocals</span>
-              </button>
-              <!-- On-demand lead/backing vocal split (#275). Shown only while
-                   Vocals is selected above; toggling "Lead + Backing" auto-runs
-                   the split once the import finishes (see main.js/job.js). -->
-              <div class="vocal-mode-toggle hidden" id="vocalModeToggle" role="group" aria-label="Vocals mode" data-i18n-aria-label="vocalMode.groupAria">
-                <button type="button" class="vocal-mode-btn" data-mode="all" aria-pressed="true" data-i18n="vocalMode.all">All</button>
-                <button type="button" class="vocal-mode-btn" data-mode="split" aria-pressed="false" data-i18n="vocalMode.split">Lead + Backing</button>
+              <!-- Vocals and the two things that describe it, in one group.
+                   Loose in the row, the mode buttons read as peers of Drums and
+                   Bass rather than as a choice about the chip beside them. -->
+              <div class="stem-group stem-group-vocals">
+                <button class="stem-choice" type="button" data-stem="vocals" aria-pressed="true" style="--color:var(--vocals)">
+                  <span data-i18n="stem.vocals">Vocals</span>
+                </button>
+                <!-- On-demand lead/backing vocal split (#275). Shown only while
+                     Vocals is selected above; toggling "Lead + Backing" auto-runs
+                     the split once the import finishes (see main.js/job.js). -->
+                <div class="vocal-mode-toggle hidden" id="vocalModeToggle" role="group" aria-label="Vocals mode" data-i18n-aria-label="vocalMode.groupAria">
+                  <button type="button" class="vocal-mode-btn" data-mode="all" aria-pressed="true" data-i18n="vocalMode.all">All</button>
+                  <button type="button" class="vocal-mode-btn" data-mode="split" aria-pressed="false" data-i18n="vocalMode.split">Lead + Backing</button>
+                </div>
               </div>
               <button class="stem-choice" type="button" data-stem="drums" aria-pressed="true" style="--color:var(--drums)">
                 <span data-i18n="stem.drums">Drums</span>
@@ -118,6 +123,18 @@
                 <span data-i18n="stem.other">Other</span>
               </button>
             </div>
+            <button class="stem-more-btn" id="stemMoreBtn" type="button" aria-haspopup="true" aria-expanded="false"
+                    aria-controls="stemOverflow" title="More stems" data-i18n-title="extract.moreAria"
+                    aria-label="More stems" data-i18n-aria-label="extract.moreAria" hidden>
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/>
+              </svg>
+            </button>
+            <!-- Holds whichever chips no longer fit, and nothing else. It
+                 appears the moment the first one has to move and grows as the
+                 window narrows, so the row never wraps and the bar never gets
+                 taller. See fitStemChips in main.js. -->
+            <div class="stem-overflow" id="stemOverflow" role="group" aria-label="More stems" data-i18n-aria-label="extract.moreAria"></div>
           </div>
 
           <!-- Experimental automatic song-structure detection. Off makes the
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 323f65d8..2376e95c 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -242,6 +242,7 @@ const en = {
   "topbar.uploadFile": "Upload audio file",
   "extract.label": "Extract",
   "extract.all": "All",
+  "extract.moreAria": "Choose stems",
   "process.splitStems": "Split stems",
 
   "stem.original": "Original",
@@ -857,6 +858,7 @@ const pl = {
   "topbar.uploadFile": "Wgraj plik audio",
   "extract.label": "Wyodrębnij",
   "extract.all": "Wszystko",
+  "extract.moreAria": "Wybierz ścieżki",
   "process.splitStems": "Rozdziel ścieżki",
 
   "stem.original": "Oryginał",
@@ -1462,6 +1464,7 @@ const ja = {
   "topbar.uploadFile": "音声ファイルをアップロード",
   "extract.label": "抽出",
   "extract.all": "すべて",
+  "extract.moreAria": "抽出するパートを選ぶ",
   "process.splitStems": "パートを分離",
 
   "stem.original": "オリジナル",
@@ -2042,6 +2045,7 @@ const zhHans = {
   "topbar.uploadFile": "上传音频文件",
   "extract.label": "提取",
   "extract.all": "全部",
+  "extract.moreAria": "选择要提取的音轨",
   "process.splitStems": "分离音轨",
 
   "stem.original": "原始",
@@ -2622,6 +2626,7 @@ const de = {
   "topbar.uploadFile": "Audiodatei hochladen",
   "extract.label": "Extrahieren",
   "extract.all": "Alle",
+  "extract.moreAria": "Stems auswählen",
   "process.splitStems": "Stems trennen",
 
   "stem.original": "Original",
@@ -3213,6 +3218,7 @@ const pt = {
   "topbar.uploadFile": "Enviar arquivo de áudio",
   "extract.label": "Extrair",
   "extract.all": "Todos",
+  "extract.moreAria": "Escolher as faixas",
   "process.splitStems": "Separar stems",
 
   "stem.original": "Original",
@@ -3806,6 +3812,7 @@ const id = {
   "topbar.uploadFile": "Unggah file audio",
   "extract.label": "Ekstrak",
   "extract.all": "Semua",
+  "extract.moreAria": "Pilih stem",
   "process.splitStems": "Pisahkan stem",
 
   "stem.original": "Asli",
@@ -4386,6 +4393,7 @@ const fr = {
   "topbar.uploadFile": "Importer un fichier audio",
   "extract.label": "Extraire",
   "extract.all": "Tout",
+  "extract.moreAria": "Choisir les pistes",
   "process.splitStems": "Séparer les pistes",
 
   "stem.original": "Original",
@@ -5095,6 +5103,7 @@ const es = {
   "topbar.uploadFile": "Subir archivo de audio",
   "extract.label": "Extraer",
   "extract.all": "Todo",
+  "extract.moreAria": "Elegir las pistas",
   "process.splitStems": "Separar stems",
 
   "stem.original": "Original",
@@ -5709,6 +5718,7 @@ const ko = {
   "topbar.uploadFile": "오디오 파일 업로드",
   "extract.label": "추출",
   "extract.all": "전체",
+  "extract.moreAria": "추출할 스템 선택",
   "process.splitStems": "스템 분리",
 
   "stem.original": "원본",
diff --git a/static/js/main.js b/static/js/main.js
index e5bbaf5b..74901f89 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -160,6 +160,144 @@ function wireStemChoiceButtons() {
   }
 }
 
+// ─── Extract chips: what happens when they stop fitting ───
+//
+// The row never wraps. Whichever chips no longer fit move into a panel behind
+// a three-dot button, one at a time, from the end of the row.
+//
+// Wrapping was the alternative and it is the wrong one: the bar went from 96px
+// tall to 168 and then 236 as the chips spilled onto further lines, growing
+// exactly as the window shrank, and leaving the controls on the right stranded
+// at the top of a column stretched by chips they have nothing to do with.
+//
+// The order is fixed once, at wiring time, because the measuring below puts
+// everything back inline before it decides and the DOM order is the only
+// record of where each chip belongs.
+
+let _stemChipOrder = null;
+
+/**
+ * Move whatever does not fit into the overflow panel, and nothing more.
+ *
+ * Measured from the row's own clientWidth rather than from a breakpoint: the
+ * chips are seven different widths in ten languages, so the width at which the
+ * fifth one stops fitting is not a number anyone can write down.
+ *
+ * Everything goes back inline first. Deciding from the current, already
+ * collapsed state would mean the row could only ever lose chips and never get
+ * them back as the window grew, which is the same trap the footer's own fit
+ * logic documents.
+ */
+function fitStemChips() {
+  const row = document.getElementById("stemChips");
+  const panel = document.getElementById("stemOverflow");
+  const btn = document.getElementById("stemMoreBtn");
+  if (!row || !panel || !btn || !_stemChipOrder) return;
+
+  for (const el of _stemChipOrder) row.appendChild(el);
+
+  // Measured after everything is back, so the number is what the row can have
+  // rather than what it was left with. A hidden row has no width to fit
+  // anything into, and measuring one would move every chip for nothing.
+  const budget = row.clientWidth;
+  if (!budget) return;
+
+  const gap = parseFloat(getComputedStyle(row).gap) || 0;
+  const widths = _stemChipOrder.map((el) => el.getBoundingClientRect().width);
+
+  let used = 0;
+  let keep = _stemChipOrder.length;
+  for (let i = 0; i < _stemChipOrder.length; i++) {
+    used += widths[i] + (i ? gap : 0);
+    // Half a pixel of rounding is not an overflow; the row is overflow: hidden
+    // and a chip that fits within a pixel is drawn whole.
+    if (used > budget + 0.5) {
+      keep = i;
+      break;
+    }
+  }
+
+  for (let i = keep; i < _stemChipOrder.length; i++) panel.appendChild(_stemChipOrder[i]);
+  btn.hidden = keep === _stemChipOrder.length;
+  if (btn.hidden) closeStemOverflow();
+}
+
+function closeStemOverflow() {
+  const panel = document.getElementById("stemOverflow");
+  const btn = document.getElementById("stemMoreBtn");
+  if (!panel || !btn) return;
+  panel.classList.remove("open");
+  btn.setAttribute("aria-expanded", "false");
+}
+
+// Fixed positioning, placed from the button's own rect, because the panel has
+// to escape the bar it is anchored in.
+function wireStemChipsPopover() {
+  const row = document.getElementById("stemChips");
+  const panel = document.getElementById("stemOverflow");
+  const btn = document.getElementById("stemMoreBtn");
+  if (!row || !panel || !btn) return;
+
+  _stemChipOrder = [...row.children];
+
+  const isOpen = () => btn.getAttribute("aria-expanded") === "true";
+
+  btn.addEventListener("click", (e) => {
+    // Stops the document handler below reading the press that opened the panel
+    // as the click away that shuts it.
+    e.stopPropagation();
+    if (isOpen()) return closeStemOverflow();
+    panel.classList.add("open");
+    btn.setAttribute("aria-expanded", "true");
+    const r = btn.getBoundingClientRect();
+    panel.style.left = `${Math.max(8, Math.min(Math.round(r.left), window.innerWidth - panel.offsetWidth - 8))}px`;
+    panel.style.top = `${Math.round(r.bottom + 6)}px`;
+  });
+
+  // A click on a chip is a click on a control, not a click away from it: the
+  // selection is meant to be changed several times with the panel open.
+  panel.addEventListener("click", (e) => e.stopPropagation());
+  document.addEventListener("click", closeStemOverflow);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && isOpen()) {
+      closeStemOverflow();
+      btn.focus();
+    }
+  });
+
+  // Watch the composer, not the chip row.
+  //
+  // The row is what this function moves things out of, and the column it sits
+  // in is sized by its content, so emptying it shrinks it: at a narrow window
+  // the row collapsed to 127px, and widening the window never widened it back
+  // because the chips that would have done so were in the panel. The observer
+  // then had nothing to report and the chips never came home. Measuring the
+  // thing you are changing.
+  //
+  // The composer's width tracks the window and the sidebar without depending
+  // on where any chip currently lives, so it is the honest trigger. The window
+  // resize below is a belt-and-braces second one.
+  //
+  // Coalesced because a drag on the window edge fires this every frame.
+  let queued = false;
+  const refit = () => {
+    if (queued) return;
+    queued = true;
+    requestAnimationFrame(() => {
+      queued = false;
+      fitStemChips();
+    });
+  };
+  const composer = row.closest(".daw-composer") || row;
+  if (typeof ResizeObserver === "function") new ResizeObserver(refit).observe(composer);
+  window.addEventListener("resize", () => {
+    closeStemOverflow();
+    refit();
+  });
+
+  fitStemChips();
+}
+
 function wireAllButton() {
   const allBtn = document.getElementById("stemAllBtn");
   if (!allBtn) return;
@@ -224,6 +362,7 @@ wireMixerToolbar();
 wireStemChoiceButtons();
 wireAllButton();
 wireVocalModeToggle();
+wireStemChipsPopover();
 wireAutoSectionsToggle();
 wireFileDrop();
 wireAppShellControls();
@@ -235,6 +374,9 @@ initFooterFit();
 // sidebar, see footerFit.js). It is here because select options and button
 // text do vary, and re-measuring costs one frame.
 onLanguageChange(refitFooter);
+// Every chip's label changes width with the language, so the count that fits
+// changes with it too.
+onLanguageChange(fitStemChips);
 
 (async () => {
   await i18nReady;

From 078ded233accc084d639a6da05f7060de7637cd4 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 21:50:18 +0100
Subject: [PATCH 3/3] Add Not Another Audio Podcast to We Recommend

An audio, music and tech industry podcast by working professionals, under
Media & Community.

Both copies of the list, since nothing checks that they agree: FRIEND_GROUPS
for the dialog in the app, and the table in the README. The artwork is bundled
under static/img/friends/ like the rest, so the dialog still renders with no
network.

The role line is in all ten language tables rather than English only, since a
missing key falls back to English silently and would have read untranslated in
nine of them.
---
 README.md                                       |   1 +
 .../img/friends/not-another-audio-podcast.jpg   | Bin 0 -> 10775 bytes
 static/js/catalog.js                            |   7 +++++++
 static/js/i18n.js                               |  10 ++++++++++
 4 files changed, 18 insertions(+)
 create mode 100644 static/img/friends/not-another-audio-podcast.jpg

diff --git a/README.md b/README.md
index 92f18899..af779ba5 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ StemDeck is free and **does not accept any money, sponsorship, or funding**  fro
 | Music & Karaoke Technology | Seratone | TV-based karaoke system | [seratone.audio](https://seratone.audio/) |
 | Media & Community | slashCAM | Camera, video, and post-production media | [@slashcam.de](https://www.instagram.com/slashcam.de) |
 | Media & Community | r/bass | Bass-player community | [r/Bass](https://www.reddit.com/r/Bass) |
+| Media & Community | Not Another Audio Podcast | Audio, music and tech industry podcast by working professionals | [Libsyn](https://directory.libsyn.com/shows/view/id/20f5a1e3-6fea-4d41-8cdf-451ce6fc6cda) |
 | Writers & Storytellers | Alexandre Borges | Portuguese writer, screenwriter, and cultural commentator | [Books & author profile](https://www.instagram.com/alexgram_b/) |
 
 
diff --git a/static/img/friends/not-another-audio-podcast.jpg b/static/img/friends/not-another-audio-podcast.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1e435e505fbf72fac4ad1162fe31d3b1c3d193eb
GIT binary patch
literal 10775
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

literal 0
HcmV?d00001

diff --git a/static/js/catalog.js b/static/js/catalog.js
index c8017f22..05344962 100644
--- a/static/js/catalog.js
+++ b/static/js/catalog.js
@@ -166,6 +166,13 @@ const FRIEND_GROUPS = [
         roleKey: "friends.role.rbass",
         url: "https://www.reddit.com/r/Bass/",
       },
+      {
+        name: "Not Another Audio Podcast",
+        roleKey: "friends.role.notAnotherAudioPodcast",
+        url: "https://directory.libsyn.com/shows/view/id/20f5a1e3-6fea-4d41-8cdf-451ce6fc6cda",
+        logo: "/img/friends/not-another-audio-podcast.jpg",
+        avatar: true,
+      },
     ],
   },
   {
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 2376e95c..14a86dbf 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -503,6 +503,7 @@ const en = {
   "friends.role.seratone": "TV-based karaoke system",
   "friends.role.slashcam": "Camera, video, and post-production media",
   "friends.role.rbass": "Bass-player community",
+  "friends.role.notAnotherAudioPodcast": "Audio, music and tech industry podcast by working professionals",
 
   "release.title": "New release available",
   "release.closeAria": "Close release dialog",
@@ -1117,6 +1118,7 @@ const pl = {
   "friends.role.seratone": "System karaoke na telewizor",
   "friends.role.slashcam": "Media o kamerach, wideo i postprodukcji",
   "friends.role.rbass": "Społeczność basistów",
+  "friends.role.notAnotherAudioPodcast": "Podcast o branży audio, muzycznej i technologicznej, prowadzony przez praktyków",
 
   "release.title": "Dostępna nowa wersja",
   "release.closeAria": "Zamknij okno wydania",
@@ -1722,6 +1724,7 @@ const ja = {
   "friends.role.seratone": "テレビで使えるカラオケシステム",
   "friends.role.slashcam": "カメラ、映像、ポストプロダクションのメディア",
   "friends.role.rbass": "ベーシストのコミュニティ",
+  "friends.role.notAnotherAudioPodcast": "オーディオ、音楽、テック業界のポッドキャスト。現役のプロが語る",
 
   "release.title": "新しいリリースがあります",
   "release.closeAria": "リリースダイアログを閉じる",
@@ -2303,6 +2306,7 @@ const zhHans = {
   "friends.role.seratone": "基于电视的卡拉OK系统",
   "friends.role.slashcam": "相机、视频与后期制作媒体",
   "friends.role.rbass": "贝斯手社区",
+  "friends.role.notAnotherAudioPodcast": "关于音频、音乐与科技行业的播客。由一线从业者主持",
 
   "release.title": "有新版本可用",
   "release.closeAria": "关闭版本对话框",
@@ -2885,6 +2889,7 @@ const de = {
   "friends.role.seratone": "Karaoke-System für den Fernseher",
   "friends.role.slashcam": "Medien zu Kamera, Video und Postproduktion",
   "friends.role.rbass": "Community für Bassistinnen und Bassisten",
+  "friends.role.notAnotherAudioPodcast": "Podcast über die Audio-, Musik- und Tech-Branche von Profis aus der Praxis",
 
   "release.title": "Neue Version verfügbar",
   "release.closeAria": "Versionsdialog schließen",
@@ -3477,6 +3482,7 @@ const pt = {
   "friends.role.seratone": "Sistema de karaokê para TV",
   "friends.role.slashcam": "Mídia sobre câmera, vídeo e pós-produção",
   "friends.role.rbass": "Comunidade de baixistas",
+  "friends.role.notAnotherAudioPodcast": "Podcast sobre a indústria de áudio, música e tecnologia, feito por profissionais da área",
 
   "release.title": "Nova versão disponível",
   "release.closeAria": "Fechar diálogo de versão",
@@ -4070,6 +4076,7 @@ const id = {
   "friends.role.seratone": "Sistem karaoke berbasis TV",
   "friends.role.slashcam": "Media seputar kamera, video, dan pascaproduksi",
   "friends.role.rbass": "Komunitas pemain bas",
+  "friends.role.notAnotherAudioPodcast": "Podcast tentang industri audio, musik, dan teknologi oleh para profesional aktif",
 
   "release.title": "Versi baru tersedia",
   "release.closeAria": "Tutup dialog versi",
@@ -4652,6 +4659,7 @@ const fr = {
   "friends.role.seratone": "Système de karaoké sur téléviseur",
   "friends.role.slashcam": "Médias sur la caméra, la vidéo et la postproduction",
   "friends.role.rbass": "Communauté de bassistes",
+  "friends.role.notAnotherAudioPodcast": "Podcast sur les industries de l'audio, de la musique et de la tech, par des professionnels en activité",
 
   "release.title": "Nouvelle version disponible",
   "release.closeAria": "Fermer la fenêtre de version",
@@ -5362,6 +5370,7 @@ const es = {
   "friends.role.seratone": "Sistema de karaoke para televisión",
   "friends.role.slashcam": "Medios sobre cámara, vídeo y posproducción",
   "friends.role.rbass": "Comunidad de bajistas",
+  "friends.role.notAnotherAudioPodcast": "Podcast sobre la industria del audio, la música y la tecnología, hecho por profesionales en activo",
 
   "release.title": "Nueva versión disponible",
   "release.closeAria": "Cerrar el diálogo de la versión",
@@ -5976,6 +5985,7 @@ const ko = {
   "friends.role.seratone": "TV 기반 노래방 시스템",
   "friends.role.slashcam": "카메라, 영상, 후반 작업 미디어",
   "friends.role.rbass": "베이시스트 커뮤니티",
+  "friends.role.notAnotherAudioPodcast": "현업 전문가들이 전하는 오디오, 음악, 테크 업계 팟캐스트",
 
   "release.title": "새 버전이 나왔어요",
   "release.closeAria": "릴리스 창 닫기",