feat: combined visualizer and fixed menu

.gitignore

@@ -11,6 +11,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
+.claude/
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

src/app.tsx

@@ -8,6 +8,8 @@ import { ColorResult } from "./protobuf/ColorResult";
 import { ErrorData, ErrorHandlerContext, ErrorRecovery } from "./error";
 import DebugVisualizer from "./components/renderer/DebugVisualizer";
 import SpectrumVisualizer from "./components/renderer/SpectrumVisualizer";
+import CombinedVisualizer from "./components/renderer/CombinedVisualizer";
+import TimelineVisualizer from "./components/renderer/TimelineVisualizer";
 import { MainMenuButton } from "./menu";
 import { createVisualizerWindow } from "./window";
 
@@ -24,14 +26,24 @@ export type RendererDefinition = {
 };
 
 const RENDERERS: RendererDefinition[] = [
+	{
+		id: "combined",
+		name: "🌟 All-in-One",
+		renderer: CombinedVisualizer
+	},
+	{
+		id: "timeline",
+		name: "Timeline",
+		renderer: TimelineVisualizer
+	},
 	{
 		id: "ncs",
 		name: "NCS",
 		renderer: NCSVisualizer
 	},
 	{
 		id: "spectrum",
-		name: "Spectrum (very WIP)",
+		name: "Spectrum",
 		renderer: SpectrumVisualizer
 	},
 	{
@@ -43,12 +55,12 @@ const RENDERERS: RendererDefinition[] = [
 
 type VisualizerState =
 	| {
-			state: "loading" | "running";
-	  }
+		state: "loading" | "running";
+	}
 	| {
-			state: "error";
-			errorData: ErrorData;
-	  };
+		state: "error";
+		errorData: ErrorData;
+	};
 
 export default function App(props: { isSecondaryWindow?: boolean; initialRenderer?: string }) {
 	const [rendererId, setRendererId] = useState<string>(props.initialRenderer || "ncs");
@@ -188,12 +200,15 @@ export default function App(props: { isSecondaryWindow?: boolean; initialRendere
 						<MainMenuButton
 							className={styles.main_menu_button}
 							renderers={RENDERERS}
+							currentRendererId={rendererId}
 							onOpenWindow={() => {
 								if (!createVisualizerWindow(rendererId)) {
 									Spicetify.showNotification("Failed to open a new window", true);
 								}
 							}}
-							onSelectRenderer={id => setRendererId(id)}
+							onSelectRenderer={id => {
+								setRendererId(id);
+							}}
 						/>
 					)}
 				</>

src/components/renderer/CombinedVisualizer.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import NCSVisualizer from './NCSVisualizer';
+import SpectrumVisualizer from './SpectrumVisualizer';
+import DebugVisualizer from './DebugVisualizer';
+import TimelineVisualizer from './TimelineVisualizer';
+
+interface CombinedVisualizerProps {
+	themeColor: {
+		rgb: { r: number; g: number; b: number };
+	};
+	audioAnalysis: Spicetify.AudioAnalysis | null;
+	isEnabled: boolean;
+}
+
+export default function CombinedVisualizer(props: CombinedVisualizerProps) {
+	return (
+		<div style={{
+			width: '100%',
+			height: '100%',
+			display: 'grid',
+			gridTemplateColumns: '1fr 1fr',
+			gridTemplateRows: '1fr 1fr 1fr',
+			gap: '1px',
+			background: 'transparent'
+		}}>
+			{/* Top Left: NCS Visualizer */}
+			<div style={{ position: 'relative', overflow: 'hidden', gridColumn: '1', gridRow: '1' }}>
+				<NCSVisualizer
+					themeColor={props.themeColor}
+					audioAnalysis={props.audioAnalysis}
+					isEnabled={props.isEnabled}
+				/>
+				<div style={{
+					position: 'absolute',
+					top: '8px',
+					left: '8px',
+					color: 'rgba(255,255,255,0.7)',
+					fontSize: '12px',
+					fontWeight: 'bold',
+					textShadow: '0 0 4px rgba(0,0,0,0.8)',
+					pointerEvents: 'none'
+				}}>
+					NCS
+				</div>
+			</div>
+
+			{/* Top Right: Spectrum Visualizer */}
+			<div style={{ position: 'relative', overflow: 'hidden', gridColumn: '2', gridRow: '1' }}>
+				<SpectrumVisualizer
+					themeColor={props.themeColor}
+					audioAnalysis={props.audioAnalysis}
+					isEnabled={props.isEnabled}
+				/>
+				<div style={{
+					position: 'absolute',
+					top: '8px',
+					left: '8px',
+					color: 'rgba(255,255,255,0.7)',
+					fontSize: '12px',
+					fontWeight: 'bold',
+					textShadow: '0 0 4px rgba(0,0,0,0.8)',
+					pointerEvents: 'none'
+				}}>
+					Spectrum
+				</div>
+			</div>
+
+			{/* Middle Left: Debug Visualizer */}
+			<div style={{ position: 'relative', overflow: 'hidden', gridColumn: '1', gridRow: '2' }}>
+				<DebugVisualizer
+					themeColor={props.themeColor}
+					audioAnalysis={props.audioAnalysis}
+					isEnabled={props.isEnabled}
+				/>
+				<div style={{
+					position: 'absolute',
+					top: '8px',
+					left: '8px',
+					color: 'rgba(255,255,255,0.7)',
+					fontSize: '12px',
+					fontWeight: 'bold',
+					textShadow: '0 0 4px rgba(0,0,0,0.8)',
+					pointerEvents: 'none'
+				}}>
+					Debug
+				</div>
+			</div>
+
+			{/* Bottom Row: Timeline Visualizer */}
+			<div style={{ position: 'relative', overflow: 'hidden', gridColumn: '1 / span 2', gridRow: '3' }}>
+				<TimelineVisualizer
+					themeColor={props.themeColor}
+					audioAnalysis={props.audioAnalysis}
+					isEnabled={props.isEnabled}
+				/>
+				<div style={{
+					position: 'absolute',
+					top: '8px',
+					left: '8px',
+					color: 'rgba(255,255,255,0.7)',
+					fontSize: '12px',
+					fontWeight: 'bold',
+					textShadow: '0 0 4px rgba(0,0,0,0.8)',
+					pointerEvents: 'none'
+				}}>
+					Timeline
+				</div>
+			</div>
+
+			{/* Audio Info Display */}
+			<div style={{
+				position: 'relative',
+				background: 'linear-gradient(135deg, rgba(20,20,30,0.5), rgba(40,20,60,0.5))',
+				display: 'flex',
+				flexDirection: 'column',
+				justifyContent: 'center',
+				alignItems: 'center',
+				padding: '20px',
+				color: 'white',
+				gridColumn: '2',
+				gridRow: '2'
+			}}>
+				<div style={{
+					fontSize: '14px',
+					fontWeight: 'bold',
+					marginBottom: '10px',
+					textAlign: 'center'
+				}}>
+					Audio Info
+				</div>
+				<div style={{ fontSize: '11px', lineHeight: '1.4', textAlign: 'center' }}>
+					{props.audioAnalysis ? (
+						<>
+							<div>Segments: {props.audioAnalysis.segments?.length || 0}</div>
+							<div>Bars: {props.audioAnalysis.bars?.length || 0}</div>
+							<div>Beats: {props.audioAnalysis.beats?.length || 0}</div>
+							<div>Tatums: {props.audioAnalysis.tatums?.length || 0}</div>
+							<div style={{ marginTop: '8px', fontSize: '10px', opacity: 0.7 }}>
+								Track Analysis Active
+							</div>
+						</>
+					) : (
+						<div style={{ opacity: 0.5 }}>No audio analysis available</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/renderer/NCSVisualizer.tsx

@@ -28,56 +28,56 @@ type CanvasData = {
 
 type RendererState =
 	| {
-			isError: true;
-	  }
+		isError: true;
+	}
 	| {
-			isError: false;
-			particleShader: WebGLProgram;
-			dotShader: WebGLProgram;
-			blurShader: WebGLProgram;
-			finalizeShader: WebGLProgram;
-			viewportSize: number;
-			particleTextureSize: number;
-
-			inPositionLoc: number;
-			inPositionLocDot: number;
-			inPositionLocBlur: number;
-			inPositionLocFinalize: number;
-
-			uNoiseOffsetLoc: WebGLUniformLocation;
-			uAmplitudeLoc: WebGLUniformLocation;
-			uSeedLoc: WebGLUniformLocation;
-			uDotSpacingLoc: WebGLUniformLocation;
-			uDotOffsetLoc: WebGLUniformLocation;
-			uSphereRadiusLoc: WebGLUniformLocation;
-			uFeatherLoc: WebGLUniformLocation;
-			uNoiseFrequencyLoc: WebGLUniformLocation;
-			uNoiseAmplitudeLoc: WebGLUniformLocation;
-
-			uDotCountLoc: WebGLUniformLocation;
-			uDotRadiusLoc: WebGLUniformLocation;
-			uDotRadiusPXLoc: WebGLUniformLocation;
-			uParticleTextureLoc: WebGLUniformLocation;
-
-			uBlurRadiusLoc: WebGLUniformLocation;
-			uBlurDirectionLoc: WebGLUniformLocation;
-			uBlurInputTextureLoc: WebGLUniformLocation;
-
-			uOutputColorLoc: WebGLUniformLocation;
-			uBlurredTextureLoc: WebGLUniformLocation;
-			uOriginalTextureLoc: WebGLUniformLocation;
-
-			quadBuffer: WebGLBuffer;
-
-			particleFramebuffer: WebGLFramebuffer;
-			particleTexture: WebGLTexture;
-			dotFramebuffer: WebGLFramebuffer;
-			dotTexture: WebGLTexture;
-			blurXFramebuffer: WebGLFramebuffer;
-			blurXTexture: WebGLTexture;
-			blurYFramebuffer: WebGLFramebuffer;
-			blurYTexture: WebGLTexture;
-	  };
+		isError: false;
+		particleShader: WebGLProgram;
+		dotShader: WebGLProgram;
+		blurShader: WebGLProgram;
+		finalizeShader: WebGLProgram;
+		viewportSize: number;
+		particleTextureSize: number;
+
+		inPositionLoc: number;
+		inPositionLocDot: number;
+		inPositionLocBlur: number;
+		inPositionLocFinalize: number;
+
+		uNoiseOffsetLoc: WebGLUniformLocation;
+		uAmplitudeLoc: WebGLUniformLocation;
+		uSeedLoc: WebGLUniformLocation;
+		uDotSpacingLoc: WebGLUniformLocation;
+		uDotOffsetLoc: WebGLUniformLocation;
+		uSphereRadiusLoc: WebGLUniformLocation;
+		uFeatherLoc: WebGLUniformLocation;
+		uNoiseFrequencyLoc: WebGLUniformLocation;
+		uNoiseAmplitudeLoc: WebGLUniformLocation;
+
+		uDotCountLoc: WebGLUniformLocation;
+		uDotRadiusLoc: WebGLUniformLocation;
+		uDotRadiusPXLoc: WebGLUniformLocation;
+		uParticleTextureLoc: WebGLUniformLocation;
+
+		uBlurRadiusLoc: WebGLUniformLocation;
+		uBlurDirectionLoc: WebGLUniformLocation;
+		uBlurInputTextureLoc: WebGLUniformLocation;
+
+		uOutputColorLoc: WebGLUniformLocation;
+		uBlurredTextureLoc: WebGLUniformLocation;
+		uOriginalTextureLoc: WebGLUniformLocation;
+
+		quadBuffer: WebGLBuffer;
+
+		particleFramebuffer: WebGLFramebuffer;
+		particleTexture: WebGLTexture;
+		dotFramebuffer: WebGLFramebuffer;
+		dotTexture: WebGLTexture;
+		blurXFramebuffer: WebGLFramebuffer;
+		blurXTexture: WebGLTexture;
+		blurYFramebuffer: WebGLFramebuffer;
+		blurYTexture: WebGLTexture;
+	};
 
 export default function NCSVisualizer(props: RendererProps) {
 	const onError = useContext(ErrorHandlerContext);
@@ -90,9 +90,9 @@ export default function NCSVisualizer(props: RendererProps) {
 		const amplitudeCurve: CurveEntry[] = segments.flatMap(segment =>
 			segment.loudness_max_time
 				? [
-						{ x: segment.start, y: decibelsToAmplitude(segment.loudness_start) },
-						{ x: segment.start + segment.loudness_max_time, y: decibelsToAmplitude(segment.loudness_max) }
-					]
+					{ x: segment.start, y: decibelsToAmplitude(segment.loudness_start) },
+					{ x: segment.start + segment.loudness_max_time, y: decibelsToAmplitude(segment.loudness_max) }
+				]
 				: [{ x: segment.start, y: decibelsToAmplitude(segment.loudness_start) }]
 		);
 
@@ -242,11 +242,11 @@ export default function NCSVisualizer(props: RendererProps) {
 		gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
 		// prettier-ignore
 		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            -1, -1,
-            -1, 1,
-            1, 1,
-            1, -1
-        ]), gl.STATIC_DRAW);
+			-1, -1,
+			-1, 1,
+			1, 1,
+			1, -1
+		]), gl.STATIC_DRAW);
 
 		gl.enable(gl.BLEND);
 		gl.blendEquation(gl.MAX);

src/components/renderer/SpectrumVisualizer.tsx

@@ -166,18 +166,27 @@ export default function SpectrumVisualizer(props: RendererProps) {
 		const spaceWidth = (ctx.canvas.width - barWidth * barCount) / (barCount + 1);
 
 		for (let i = 0; i < barCount; i++) {
-			const value = sampleSegmentedFunction(
+			// Sample the value for this bar
+			let value = sampleSegmentedFunction(
 				data.spectrumData[i],
 				x => x.x,
 				x => x.y,
 				x => x,
 				progress
 			);
+
+			// Amplify the value to make bars taller (1.8x taller)
+			value = Math.min(value * 1.8, 1.0);
+
+			// Calculate bar position and draw it
+			const barHeight = value * ctx.canvas.height;
+			const barY = ctx.canvas.height - barHeight;
+
 			ctx.fillRect(
 				spaceWidth * (i + 1) + barWidth * i,
-				ctx.canvas.height - value * ctx.canvas.height,
+				barY,
 				barWidth,
-				value * ctx.canvas.height
+				barHeight
 			);
 		}
 	}, []);