feat(studio): make presets the primary path into the FX rack

Presets button becomes the stacked primary control (bold, filled outline);
Add-effect demoted to a small trailing link ("+ effect"). Button onClick
bodies and audition-revert logic are unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-08-20 16:39:23 -07:00
co-authored by Claude Sonnet 5
parent 7a8f8a0b45
commit e966311627
3 changed files with 10 additions and 10 deletions
@@ -469,7 +469,7 @@ describe("AudioFxGroup dynamic carve", () => {
});
document.getElementById("bed")?.setAttribute("src", "bed.wav");
act(() => byTextButton(host, "Audio FX")?.click());
act(() => byTextButton(host, "Add effect")?.click());
act(() => byTextButton(host, "+ effect")?.click());
await act(async () => {
byTextButton(host, "Even Out Levels")?.click();
await new Promise((r) => setTimeout(r, 0));
@@ -581,7 +581,7 @@ describe("AudioFxGroup dynamic carve", () => {
const { release, decoded } = stubGatedDecode();
const { host, onSetAttributeLive } = mount({ "fx-chain": CHAIN });
document.getElementById("bed")?.setAttribute("src", "bed.wav");
act(() => byTextButton(host, "Add effect")?.click());
act(() => byTextButton(host, "+ effect")?.click());
const level = byTextButton(host, "Even Out Levels");
expect(level, "the levelling button was not offered").toBeTruthy();
act(() => level?.focus());
@@ -611,7 +611,7 @@ describe("AudioFxGroup dynamic carve", () => {
const { release, decoded } = stubGatedDecode();
const { host, onSetAttributeLive } = mount({ "fx-chain": CHAIN });
document.getElementById("bed")?.setAttribute("src", "bed.wav");
act(() => byTextButton(host, "Add effect")?.click());
act(() => byTextButton(host, "+ effect")?.click());
act(() => byTextButton(host, "Even Out Levels")?.focus());
// Straight to a neighbour, without ever leaving the shelf.
act(() =>
@@ -875,7 +875,7 @@ describe("FxSection chain", () => {
click(host.querySelector(".hf-fx-add"));
expect(host.querySelector(".hf-fx-add-menu")).toBeNull();
expect(byText(host, "button", "Add effect")).toBeTruthy();
expect(byText(host, "button", "+ effect")).toBeTruthy();
});
it("opens one menu in place of the other", () => {
@@ -1046,7 +1046,7 @@ describe("FxSection chain", () => {
it("auditions an effect the add menu is offering", () => {
const { host, onChainPreview, onChainChange } = mount({ chain: chainOf("peaking") });
click(byText(host, "button", "Add effect"));
click(byText(host, "button", "+ effect"));
enter(byText(host, "button", EFFECT_COPY.reverb?.title ?? ""));
const heard = onChainPreview.mock.calls.at(-1)?.[0] as HfAudioFxChain;
@@ -1063,7 +1063,7 @@ describe("FxSection chain", () => {
onLevel: vi.fn(),
onAuditionLevel,
});
click(byText(host, "button", "Add effect"));
click(byText(host, "button", "+ effect"));
enter(byText(host, "button", "Even Out Levels"));
expect(onAuditionLevel).toHaveBeenLastCalledWith(true);
leave(host, ".hf-fx-add-menu");
@@ -511,10 +511,10 @@ export function FxSection({
opened one and changed their mind had no way back: picking something
was the only thing that set these false, so the only exits were adding
an effect they did not want or deselecting the clip. */}
<div className="flex gap-1">
<div className="flex flex-col gap-1">
<button
type="button"
className="hf-fx-preset w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
className="hf-fx-preset w-full rounded-[4px] border border-panel-text-0 py-1.5 text-[11px] font-semibold text-panel-text-0 disabled:opacity-40"
aria-expanded={picking}
disabled={disabled}
onClick={() => {
@@ -530,7 +530,7 @@ export function FxSection({
</button>
<button
type="button"
className="hf-fx-add w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
className="hf-fx-add self-end px-1 text-[10px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
aria-expanded={adding}
disabled={disabled}
onClick={() => {
@@ -542,7 +542,7 @@ export function FxSection({
setPicking(false);
}}
>
{adding ? "Close" : "Add effect"}
{adding ? "Close" : "+ effect"}
</button>
</div>
</div>