feat: show recording input meter

src/recorder/StatusBar.ts

@@ -12,6 +12,7 @@ export class StatusBar {
 	statusBarItem: HTMLElement | null = null;
 	status: RecordingStatus = RecordingStatus.Idle;
 	private listeners: Array<(status: RecordingStatus) => void> = [];
+	private meterBars: HTMLElement[] = [];
 
 	constructor(plugin: Plugin) {
 		this.plugin = plugin;
@@ -33,27 +34,61 @@ export class StatusBar {
 		this.listeners.forEach((fn) => fn(status));
 	}
 
+	updateInputLevel(level: number): void {
+		if (this.status !== RecordingStatus.Recording) return;
+
+		const clampedLevel = Math.max(0, Math.min(1, level));
+		const activeBars = Math.round(clampedLevel * this.meterBars.length);
+
+		this.meterBars.forEach((bar, index) => {
+			bar.toggleClass("nibbleai-meter-bar-active", index < activeBars);
+		});
+	}
+
 	updateStatusBarItem() {
-		if (this.statusBarItem) {
-			switch (this.status) {
-				case RecordingStatus.Recording:
-					this.statusBarItem.textContent = "NibbleAI Recording...";
-					this.statusBarItem.style.color = "red";
-					break;
-				case RecordingStatus.Paused:
-					this.statusBarItem.textContent = "NibbleAI Paused";
-					this.statusBarItem.style.color = "yellow";
-					break;
-				case RecordingStatus.Processing:
-					this.statusBarItem.textContent = "NibbleAI Processing...";
-					this.statusBarItem.style.color = "gray";
-					break;
-				case RecordingStatus.Idle:
-				default:
-					this.statusBarItem.textContent = "NibbleAI Idle";
-					this.statusBarItem.style.color = "green";
-					break;
-			}
+		if (!this.statusBarItem) return;
+
+		this.statusBarItem.empty();
+		this.statusBarItem.removeClass("nibbleai-status-recording");
+		this.statusBarItem.removeClass("nibbleai-status-paused");
+		this.statusBarItem.removeClass("nibbleai-status-processing");
+		this.statusBarItem.removeClass("nibbleai-status-idle");
+		this.meterBars = [];
+
+		switch (this.status) {
+			case RecordingStatus.Recording:
+				this.statusBarItem.addClass("nibbleai-status-recording");
+				this.statusBarItem.createSpan({ text: "NibbleAI " });
+				this.createInputMeter();
+				break;
+			case RecordingStatus.Paused:
+				this.statusBarItem.addClass("nibbleai-status-paused");
+				this.statusBarItem.setText("NibbleAI Paused");
+				break;
+			case RecordingStatus.Processing:
+				this.statusBarItem.addClass("nibbleai-status-processing");
+				this.statusBarItem.setText("NibbleAI Processing...");
+				break;
+			case RecordingStatus.Idle:
+			default:
+				this.statusBarItem.addClass("nibbleai-status-idle");
+				this.statusBarItem.setText("NibbleAI Idle");
+				break;
+		}
+	}
+
+	private createInputMeter(): void {
+		if (!this.statusBarItem) return;
+
+		const meter = this.statusBarItem.createSpan({
+			cls: "nibbleai-input-meter",
+			attr: { "aria-label": "Recording input level" },
+		});
+
+		for (let i = 0; i < 8; i++) {
+			this.meterBars.push(
+				meter.createSpan({ cls: "nibbleai-meter-bar" })
+			);
 		}
 	}