fix transparency on solid mode in specrogram

src/renderer/components/ScopeSettingsSection.tsx

@@ -440,7 +440,7 @@ export default function ScopeSettingsSection({
                 onChange={(value) => onUpdate('spectrogram', { colorScheme: value as ScopeSettings['spectrogram']['colorScheme'] })}
               >
                 <option value="heat">Heat</option>
-                <option value="mono">Mono</option>
+                <option value="mono">Solid</option>
               </SelectControl>
 
               <RangeControl

src/renderer/visualizers/Spectrogram.ts

@@ -1,5 +1,5 @@
 import { audioRouter } from '../audio/AudioRouter'
-import { parseColorToRgba, resolveColorToRgb } from '../utils/color'
+import { parseColorToRgba, resolveColorToRgb, type RgbaColor } from '../utils/color'
 import { defaultVisualizerSessionSource, type VisualizerSessionSource } from './dataSource'
 import { FrameScheduler } from './frameScheduler'
 import { VisualizerFrameLoop } from './visualizerFrameLoop'
@@ -591,9 +591,9 @@ export class Spectrogram {
     if (!this.columnImageData) return
 
     const imageData = this.columnImageData.data
-    const { r: tintR, g: tintG, b: tintB } = this.options.colorScheme === 'mono'
+    const tint: RgbaColor = this.options.colorScheme === 'mono'
-      ? resolveColorToRgb(this.options.lineColor)
+      ? parseColorToRgba(this.options.lineColor) ?? { ...resolveColorToRgb(this.options.lineColor), a: 1 }
-      : { r: 0, g: 0, b: 0 }
+      : { r: 0, g: 0, b: 0, a: 1 }
 
     for (let row = 0; row < values.length; row += 1) {
       const intensity = Math.max(0, Math.min(1, values[row]))
@@ -607,10 +607,10 @@ export class Spectrogram {
         imageData[dataIndex + 2] = this.heatLut[(lutIndex * 4) + 2]
         imageData[dataIndex + 3] = Math.round(this.heatLut[(lutIndex * 4) + 3] * intensity)
       } else {
-        imageData[dataIndex] = Math.round(tintR * intensity)
+        imageData[dataIndex] = tint.r
-        imageData[dataIndex + 1] = Math.round(tintG * intensity)
+        imageData[dataIndex + 1] = tint.g
-        imageData[dataIndex + 2] = Math.round(tintB * intensity)
+        imageData[dataIndex + 2] = tint.b
-        imageData[dataIndex + 3] = 255
+        imageData[dataIndex + 3] = Math.round(255 * tint.a * intensity)
       }
     }
   }

test/renderer-helpers.test.ts

@@ -1466,6 +1466,32 @@ test('Spectrogram heatmap preserves authored alpha in generated image data', ()
   assert.equal(imageData[11], 255)
 })
 
+test('Spectrogram solid color uses intensity as alpha while preserving tint RGB', () => {
+  const imageData = renderSpectrogramColumnImage({
+    colorScheme: 'mono',
+    lineColor: 'rgb(10, 20, 30)',
+  }, [0, 0.5, 1])
+
+  assert.deepEqual(imageData.slice(0, 3), [10, 20, 30])
+  assert.equal(imageData[3], 0)
+  assert.deepEqual(imageData.slice(4, 7), [10, 20, 30])
+  assert.equal(imageData[7], 128)
+  assert.deepEqual(imageData.slice(8, 11), [10, 20, 30])
+  assert.equal(imageData[11], 255)
+})
+
+test('Spectrogram solid color honors authored tint alpha', () => {
+  const imageData = renderSpectrogramColumnImage({
+    colorScheme: 'mono',
+    lineColor: 'rgba(100, 150, 200, 0.5)',
+  }, [0.5, 1])
+
+  assert.deepEqual(imageData.slice(0, 3), [100, 150, 200])
+  assert.equal(imageData[3], 64)
+  assert.deepEqual(imageData.slice(4, 7), [100, 150, 200])
+  assert.equal(imageData[7], 128)
+})
+
 test('Spectrogram keeps the historical display dB range for line thickness', () => {
   const dom = installFakeCanvasDom()
   const dataSource = {