feat: graph header on gain panel

2026-09-09 20:56:35 +02:00
parent 20182a8e36
commit 037d17ff3d
6 changed files with 141 additions and 40 deletions
@@ -2,23 +2,19 @@
  display: flex;
  align-items: center;
  justify-content: center;
-
  box-sizing: border-box;

  min-height: var(--card-control-height);
-
  padding: 0 var(--space-4);

  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);

  font-family: var(--font-ui);
-  font-size: var(--font-md);
+  font-size: 13px;
  font-weight: var(--font-weight-medium);

  cursor: pointer;
-
-  font-size: 13px;
 }

 .btn:disabled {
@@ -26,27 +22,49 @@
  cursor: not-allowed;
 }

+/* ------------------------------------------------------------------ */
+/* Variants                                                           */
+/* ------------------------------------------------------------------ */
+
 .btn-primary {
  background: var(--accent-brand);
  color: var(--bg-void);
 }

+/* Ghost + Toggle */
 .btn-ghost,
-.btn-toggle,
-.btn-outline {
+.btn-toggle {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-muted);
 }

+/* Outline */
+.btn-outline {
+  background: transparent;
+  border-color: var(--accent-brand);
+  color: #fff;
+}
+
+/* ------------------------------------------------------------------ */
+/* Hover                                                              */
+/* ------------------------------------------------------------------ */
+
 .btn-ghost:hover:not(:disabled),
-.btn-toggle:hover:not(:disabled),
-.btn-outline:hover:not(:disabled) {
+.btn-toggle:hover:not(:disabled) {
  background: var(--bg-raised);
  color: var(--text-primary);
 }

-/* Active toggle states */
+.btn-outline:hover:not(:disabled) {
+  border-color: var(--accent-brand);
+  color: var(--text-muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* Active toggle states                                                */
+/* ------------------------------------------------------------------ */
+
 .btn-toggle.active-info {
  background: var(--accent-brand);
  border-color: var(--accent-brand);
@@ -65,7 +83,10 @@
  color: var(--bg-void);
 }

-/* Optional: active state hover */
+/* ------------------------------------------------------------------ */
+/* Active toggle hover                                                 */
+/* ------------------------------------------------------------------ */
+
 .btn-toggle.active-info:hover:not(:disabled) {
  background: var(--accent-brand);
  border-color: var(--accent-brand);
@@ -1,18 +1,21 @@
 .channel-group {
  position: relative;
-  /* flex: 1 1 0; */
-  min-height: 0;

+  flex: 0 0 auto;
+  width: fit-content;
+  min-width: 0;
+
+  min-height: 0;
  display: flex;

  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
-
  padding: 6cqh var(--space-3) 1cqh;
  margin-bottom: 1cqh;
  margin-top: 1cqh;
+
  box-sizing: border-box;
-  overflow: visible; /* in case something upstream set hidden */
+  overflow: visible;
 }

 .channel-group__label {
@@ -36,6 +39,9 @@
  display: flex;
  flex-direction: row;
  align-items: stretch;
+
+  width: fit-content;
  height: 100%;
+
  gap: var(--space-1);
 }
@@ -22,8 +22,9 @@
 }

 .gain-panels {
+  display: grid;
+  grid-auto-flow: column;
  height: 100%;
-  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
 }
@@ -106,37 +107,94 @@

 .gain-graph-title-row {
  flex: 0 0 auto;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  gap: 0.75cqh;
+  padding: 1cqh 1.5cqh;
+
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* First row: title left, Show stages right */
+.gain-graph-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
+
+  width: 100%;
+  min-width: 0;
  gap: 1cqh;
-  padding: 1cqh 1.5cqh;
-  flex-wrap: wrap;
 }

-.gain-graph-title-row .gain-graph-title {
+.gain-graph-title-line .gain-graph-title {
+  flex: 1 1 auto;
+  min-width: 0;
+
  padding: 0;
+
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

+/* Compact button on the right */
+.gain-stages-toggle {
+  flex: 0 0 auto;
+
+  width: auto !important;
+  min-width: max-content;
+
+  padding: 0.4cqh 1cqh;
+  font-size: 1.8cqh;
+  line-height: 1.2;
+
+  white-space: nowrap;
+}
+
+/* Channel Selector */
 .magnitude-selector {
+  width: 100%;
+  min-width: 0;
+
  display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  flex-wrap: nowrap;
+
  gap: 0.5cqh;
+
+  overflow: hidden;
 }

 .magnitude-selector__chip {
+  flex: 0 1 auto;
+  min-width: 0;
+
  display: flex;
  align-items: center;
+
  gap: 0.6cqh;
+
  font-family: var(--font-ui);
  font-size: 1.8cqh;
+
  padding: 0.4cqh 1cqh;
+
  background: var(--bg-void);
  color: var(--text-muted);
+
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-sm);
+
  cursor: pointer;
  opacity: 0.5;
+
+  white-space: nowrap;
+  overflow: hidden;
 }

 .magnitude-selector__chip.active {
@@ -148,7 +206,17 @@
 .magnitude-selector__swatch {
  width: 1.2cqh;
  height: 1.2cqh;
+
  border-radius: 50%;
  background: var(--chip-color);
+
  flex: 0 0 auto;
 }
+
+.magnitude-selector__label {
+  min-width: 0;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
@@ -117,7 +117,7 @@ function buildCurvesForChannels<T extends string>(
 ): Curve[] {
  const curves: Curve[] = [];

-  channels.forEach((channel) => {
+  [...channels].reverse().forEach((channel) => {
    if (!selected.has(channel)) return;
    const { geq, peqCrossover, total } = getCurves(channel);
    const color = colors[channel];
@@ -292,9 +292,10 @@ function ChannelSelector<T extends string>({
            className={`magnitude-selector__chip${isOn ? ' active' : ''}`}
            style={{ '--chip-color': colors[channel] } as React.CSSProperties}
            onClick={() => onToggle(channel)}
+            title={labels[channel]}
          >
            <span className="magnitude-selector__swatch" />
-            {labels[channel]}
+            <span className="magnitude-selector__label">{labels[channel]}</span>
          </button>
        );
      })}
@@ -427,14 +428,16 @@ function GainSection({
      <div className="gain-linear-graph-section">
        <div className="gain-graph-panel">
          <div className="gain-graph-title-row">
-            <div className="gain-graph-title">Input Response</div>
-            <Button
-              variant="toggle"
-              className={showInputStages ? 'active' : ''}
-              onClick={() => setShowInputStages((v) => !v)}
-            >
-              Show stages
-            </Button>
+            <div className="gain-graph-title-line">
+              <div className="gain-graph-title">Input Response</div>
+              <Button
+                variant={showInputStages ? 'outline' : 'ghost'}
+                className="gain-stages-toggle"
+                onClick={() => setShowInputStages((v) => !v)}
+              >
+                Show stages
+              </Button>
+            </div>
            <ChannelSelector
              channels={INPUT_ORDER}
              labels={inputLabels}
@@ -471,14 +474,17 @@ function GainSection({

        <div className="gain-graph-panel">
          <div className="gain-graph-title-row">
-            <div className="gain-graph-title">Output Response</div>
-            <Button
-              variant="toggle"
-              className={showOutputStages ? 'active' : ''}
-              onClick={() => setShowOutputStages((v) => !v)}
-            >
-              Show stages
-            </Button>
+            <div className="gain-graph-title-line">
+              <div className="gain-graph-title">Output Response</div>
+              <Button
+                variant={showOutputStages ? 'outline' : 'ghost'}
+                className="gain-stages-toggle"
+                onClick={() => setShowOutputStages((v) => !v)}
+              >
+                Show stages
+              </Button>
+            </div>
+
            <ChannelSelector
              channels={OUTPUT_ORDER}
              labels={outputLabels}