From 8371369b4c3f5b787ff66409ec04500ae97130d4 Mon Sep 17 00:00:00 2001
From: Beingpax <prakashjoshipaxtek@gmail.com>
Date: Sun, 25 May 2025 17:51:23 +0545
Subject: [PATCH] Created a better visualizer and layout styling for mini
 recorder and notch recorder

---
 .../Views/Recorder/AudioVisualizerView.swift  | 113 ++++++++++
 .../{ => Recorder}/MiniRecorderPanel.swift    |   0
 .../{ => Recorder}/MiniRecorderView.swift     |  28 ++-
 .../{ => Recorder}/MiniWindowManager.swift    |   0
 .../{ => Recorder}/NotchRecorderPanel.swift   |   4 +-
 .../{ => Recorder}/NotchRecorderView.swift    | 198 +++---------------
 .../Views/{ => Recorder}/NotchShape.swift     |   0
 .../{ => Recorder}/NotchWindowManager.swift   |   0
 VoiceInk/VisualizerView.swift                 |  91 --------
 9 files changed, 161 insertions(+), 273 deletions(-)
 create mode 100644 VoiceInk/Views/Recorder/AudioVisualizerView.swift
 rename VoiceInk/Views/{ => Recorder}/MiniRecorderPanel.swift (100%)
 rename VoiceInk/Views/{ => Recorder}/MiniRecorderView.swift (80%)
 rename VoiceInk/Views/{ => Recorder}/MiniWindowManager.swift (100%)
 rename VoiceInk/Views/{ => Recorder}/NotchRecorderPanel.swift (97%)
 rename VoiceInk/Views/{ => Recorder}/NotchRecorderView.swift (64%)
 rename VoiceInk/Views/{ => Recorder}/NotchShape.swift (100%)
 rename VoiceInk/Views/{ => Recorder}/NotchWindowManager.swift (100%)
 delete mode 100644 VoiceInk/VisualizerView.swift

diff --git a/VoiceInk/Views/Recorder/AudioVisualizerView.swift b/VoiceInk/Views/Recorder/AudioVisualizerView.swift
new file mode 100644
index 0000000..9bc4929
--- /dev/null
+++ b/VoiceInk/Views/Recorder/AudioVisualizerView.swift
@@ -0,0 +1,113 @@
+import SwiftUI
+
+struct AudioVisualizer: View {
+    let audioMeter: AudioMeter
+    let color: Color
+    let isActive: Bool
+    
+    private let barCount = 12
+    private let minHeight: CGFloat = 4
+    private let maxHeight: CGFloat = 28
+    private let barWidth: CGFloat = 3.0
+    private let barSpacing: CGFloat = 2.0
+    private let hardThreshold: Double = 0.3
+    
+    private let sensitivityMultipliers: [Double]
+    
+    @State private var barHeights: [CGFloat]
+    @State private var targetHeights: [CGFloat]
+    
+    init(audioMeter: AudioMeter, color: Color, isActive: Bool) {
+        self.audioMeter = audioMeter
+        self.color = color
+        self.isActive = isActive
+        
+        self.sensitivityMultipliers = (0..<barCount).map { _ in
+            Double.random(in: 0.2...1.9)
+        }
+        
+        _barHeights = State(initialValue: Array(repeating: minHeight, count: barCount))
+        _targetHeights = State(initialValue: Array(repeating: minHeight, count: barCount))
+    }
+    
+    var body: some View {
+        HStack(spacing: barSpacing) {
+            ForEach(0..<barCount, id: \.self) { index in
+                RoundedRectangle(cornerRadius: 1.5)
+                    .fill(color)
+                    .frame(width: barWidth, height: barHeights[index])
+            }
+        }
+        .onChange(of: audioMeter) { _, newValue in
+            if isActive {
+                updateBars(with: Float(newValue.averagePower))
+            } else {
+                resetBars()
+            }
+        }
+        .onChange(of: isActive) { _, newValue in
+            if !newValue {
+                resetBars()
+            }
+        }
+    }
+    
+    private func updateBars(with audioLevel: Float) {
+        let rawLevel = max(0, min(1, Double(audioLevel)))
+        let adjustedLevel = rawLevel < hardThreshold ? 0 : (rawLevel - hardThreshold) / (1.0 - hardThreshold)
+        
+        let range = maxHeight - minHeight
+        let center = barCount / 2
+        
+        for i in 0..<barCount {
+            let distanceFromCenter = abs(i - center)
+            let positionMultiplier = 1.0 - (Double(distanceFromCenter) / Double(center)) * 0.4
+            
+            // Use randomized sensitivity
+            let sensitivityAdjustedLevel = adjustedLevel * positionMultiplier * sensitivityMultipliers[i]
+            
+            let targetHeight = minHeight + CGFloat(sensitivityAdjustedLevel) * range
+            
+            let isDecaying = targetHeight < targetHeights[i]
+            let smoothingFactor: CGFloat = isDecaying ? 0.6 : 0.3 // Adjusted smoothing
+            
+            targetHeights[i] = targetHeights[i] * (1 - smoothingFactor) + targetHeight * smoothingFactor
+            
+            // Only update if change is significant enough to matter visually
+            if abs(barHeights[i] - targetHeights[i]) > 0.5 {
+                withAnimation(
+                    isDecaying
+                    ? .spring(response: 0.4, dampingFraction: 0.8)
+                    : .spring(response: 0.3, dampingFraction: 0.7)
+                ) {
+                    barHeights[i] = targetHeights[i]
+                }
+            }
+        }
+    }
+    
+    private func resetBars() {
+        withAnimation(.easeOut(duration: 0.15)) {
+            barHeights = Array(repeating: minHeight, count: barCount)
+            targetHeights = Array(repeating: minHeight, count: barCount)
+        }
+    }
+}
+
+struct StaticVisualizer: View {
+    private let barCount = 12
+    private let barWidth: CGFloat = 3.0
+    private let staticHeight: CGFloat = 3.0
+    private let barSpacing: CGFloat = 2.0
+    let color: Color
+    
+    var body: some View {
+        HStack(spacing: barSpacing) {
+            ForEach(0..<barCount, id: \.self) { index in
+                RoundedRectangle(cornerRadius: 1.5)
+                    .fill(color)
+                    .frame(width: barWidth, height: staticHeight)
+            }
+        }
+    }
+}
diff --git a/VoiceInk/Views/MiniRecorderPanel.swift b/VoiceInk/Views/Recorder/MiniRecorderPanel.swift
similarity index 100%
rename from VoiceInk/Views/MiniRecorderPanel.swift
rename to VoiceInk/Views/Recorder/MiniRecorderPanel.swift
diff --git a/VoiceInk/Views/MiniRecorderView.swift b/VoiceInk/Views/Recorder/MiniRecorderView.swift
similarity index 80%
rename from VoiceInk/Views/MiniRecorderView.swift
rename to VoiceInk/Views/Recorder/MiniRecorderView.swift
index 645ea2c..0b214ec 100644
--- a/VoiceInk/Views/MiniRecorderView.swift
+++ b/VoiceInk/Views/Recorder/MiniRecorderView.swift
@@ -39,36 +39,33 @@ struct MiniRecorderView: View {
                             .strokeBorder(Color.white.opacity(0.1), lineWidth: 0.5)
                     }
                     .overlay {
-                        HStack(spacing: 16) {
-                            // Record Button
+                        HStack(spacing: 0) {
+                            // Record Button - on the left
                             NotchRecordButton(
                                 isRecording: whisperState.isRecording,
                                 isProcessing: whisperState.isProcessing
                             ) {
                                 Task { await whisperState.toggleRecord() }
                             }
-                            .frame(width: 18)
-                            .padding(.leading, -4)
+                            .frame(width: 24)
+                            .padding(.leading, 8)
                             
-                            // Visualizer - moved to middle position
+                            // Visualizer - centered and expanded
                             Group {
                                 if whisperState.isProcessing {
-                                    NotchStaticVisualizer(color: .white)
+                                    StaticVisualizer(color: .white)
                                 } else {
-                                    NotchAudioVisualizer(
+                                    AudioVisualizer(
                                         audioMeter: recorder.audioMeter,
                                         color: .white,
                                         isActive: whisperState.isRecording
                                     )
                                 }
                             }
-                            .frame(width: 18)
+                            .frame(maxWidth: .infinity)
+                            .padding(.horizontal, 8)
                             
-                            // Empty space for future use
-                            Spacer()
-                                .frame(width: 18)
-                            
-                            // Power Mode Button - moved to last position
+                            // Power Mode Button - on the right
                             NotchToggleButton(
                                 isEnabled: powerModeManager.isPowerModeEnabled,
                                 icon: powerModeManager.currentActiveConfiguration.emoji,
@@ -76,13 +73,12 @@ struct MiniRecorderView: View {
                             ) {
                                 showPowerModePopover.toggle()
                             }
-                            .frame(width: 18)
-                            .padding(.trailing, -4)
+                            .frame(width: 24)
+                            .padding(.trailing, 8)
                             .popover(isPresented: $showPowerModePopover, arrowEdge: .bottom) {
                                 PowerModePopover()
                             }
                         }
-                        .padding(.horizontal, 8)
                         .padding(.vertical, 8)
                     }
                     .opacity(windowManager.isVisible ? 1 : 0)
diff --git a/VoiceInk/Views/MiniWindowManager.swift b/VoiceInk/Views/Recorder/MiniWindowManager.swift
similarity index 100%
rename from VoiceInk/Views/MiniWindowManager.swift
rename to VoiceInk/Views/Recorder/MiniWindowManager.swift
diff --git a/VoiceInk/Views/NotchRecorderPanel.swift b/VoiceInk/Views/Recorder/NotchRecorderPanel.swift
similarity index 97%
rename from VoiceInk/Views/NotchRecorderPanel.swift
rename to VoiceInk/Views/Recorder/NotchRecorderPanel.swift
index db03620..d598a0d 100644
--- a/VoiceInk/Views/NotchRecorderPanel.swift
+++ b/VoiceInk/Views/Recorder/NotchRecorderPanel.swift
@@ -29,7 +29,7 @@ class NotchRecorderPanel: KeyablePanel {
             
             // Calculate total width including controls and padding
             // 16pt padding on each side + space for controls
-            let controlsWidth: CGFloat = 44 // Space for buttons on each side (22 * 2)
+            let controlsWidth: CGFloat = 64 // Space for buttons on each side (increased width)
             let paddingWidth: CGFloat = 32 // 16pt on each side
             let totalWidth = baseNotchWidth + controlsWidth * 2 + paddingWidth
             
@@ -101,7 +101,7 @@ class NotchRecorderPanel: KeyablePanel {
         let baseNotchWidth: CGFloat = safeAreaInsets.left > 0 ? safeAreaInsets.left * 2 : 200
         
         // Calculate total width including controls and padding
-        let controlsWidth: CGFloat = 44 // Space for buttons on each side (22 * 2)
+        let controlsWidth: CGFloat = 64 // Space for buttons on each side (increased width)
         let paddingWidth: CGFloat = 32 // 16pt on each side
         let totalWidth = baseNotchWidth + controlsWidth * 2 + paddingWidth
         
diff --git a/VoiceInk/Views/NotchRecorderView.swift b/VoiceInk/Views/Recorder/NotchRecorderView.swift
similarity index 64%
rename from VoiceInk/Views/NotchRecorderView.swift
rename to VoiceInk/Views/Recorder/NotchRecorderView.swift
index 675db46..f4bf1af 100644
--- a/VoiceInk/Views/NotchRecorderView.swift
+++ b/VoiceInk/Views/Recorder/NotchRecorderView.swift
@@ -47,36 +47,7 @@ struct NotchRecorderView: View {
                         }
                         .frame(width: 22)
                         
-                        // Empty space for future use
-                        Spacer()
-                            .frame(width: 22)
-                    }
-                    .frame(width: 44) // Fixed width for controls
-                    .padding(.leading, 16)
-                    
-                    // Center section with exact notch width
-                    Rectangle()
-                        .fill(Color.clear)
-                        .frame(width: exactNotchWidth)
-                        .contentShape(Rectangle()) // Make the entire area tappable
-                    
-                    // Right side group with fixed width
-                    HStack(spacing: 8) {
-                        // Visualizer - moved to first position
-                        Group {
-                            if whisperState.isProcessing {
-                                NotchStaticVisualizer(color: .white)
-                            } else {
-                                NotchAudioVisualizer(
-                                    audioMeter: recorder.audioMeter,
-                                    color: .white,
-                                    isActive: whisperState.isRecording
-                                )
-                            }
-                        }
-                        .frame(width: 22)
-                        
-                        // Power Mode Button - moved to second position
+                        // Power Mode Button - moved from right side
                         NotchToggleButton(
                             isEnabled: powerModeManager.isPowerModeEnabled,
                             icon: powerModeManager.currentActiveConfiguration.emoji,
@@ -88,8 +59,40 @@ struct NotchRecorderView: View {
                         .popover(isPresented: $showPowerModePopover, arrowEdge: .bottom) {
                             PowerModePopover()
                         }
+                        
+                        Spacer()
                     }
-                    .frame(width: 44) // Fixed width for controls
+                    .frame(width: 64) // Increased width for both controls
+                    .padding(.leading, 16)
+                    
+                    // Center section with exact notch width
+                    Rectangle()
+                        .fill(Color.clear)
+                        .frame(width: exactNotchWidth)
+                        .contentShape(Rectangle()) // Make the entire area tappable
+                    
+                    // Right side group with visualizer only
+                    HStack(spacing: 0) {
+                        Spacer() // Push visualizer to the right
+                        
+                        // Visualizer - contained within right area with scaling
+                        Group {
+                            if whisperState.isProcessing {
+                                StaticVisualizer(color: .white)
+                            } else {
+                                AudioVisualizer(
+                                    audioMeter: recorder.audioMeter,
+                                    color: .white,
+                                    isActive: whisperState.isRecording
+                                )
+                                // Apply a vertical scale transform to fit within the menu bar
+                                .scaleEffect(y: min(1.0, (menuBarHeight - 8) / 25), anchor: .center)
+                            }
+                        }
+                        .frame(width: 30)
+                        .padding(.trailing, 8) // Add padding to keep it away from the edge
+                    }
+                    .frame(width: 64) // Increased width to match left side
                     .padding(.trailing, 16)
                 }
                 .frame(height: menuBarHeight)
@@ -248,139 +251,6 @@ struct NotchRecordButton: View {
     }
 }
 
-struct NotchAudioVisualizer: View {
-    let audioMeter: AudioMeter
-    let color: Color
-    let isActive: Bool
-    
-    private let barCount = 5
-    private let minHeight: CGFloat = 3
-    private let maxHeight: CGFloat = 18
-    private let audioThreshold: CGFloat = 0.01
-    
-    @State private var barHeights: [BarLevel] = []
-    
-    struct BarLevel {
-        var average: CGFloat
-        var peak: CGFloat
-    }
-    
-    init(audioMeter: AudioMeter, color: Color, isActive: Bool) {
-        self.audioMeter = audioMeter
-        self.color = color
-        self.isActive = isActive
-        _barHeights = State(initialValue: Array(repeating: BarLevel(average: minHeight, peak: minHeight), count: 5))
-    }
-    
-    var body: some View {
-        HStack(spacing: 2) {
-            ForEach(0..<barCount, id: \.self) { index in
-                NotchVisualizerBar(
-                    averageHeight: barHeights[index].average,
-                    peakHeight: barHeights[index].peak,
-                    color: color
-                )
-            }
-        }
-        .onChange(of: audioMeter) { oldValue, newValue in
-           
-            if isActive {
-                updateBars()
-            } else {
-                resetBars()
-            }
-        }
-    }
-    
-    private func updateBars() {
-        for i in 0..<barCount {
-            let targetHeight = calculateTargetHeight(for: i)
-            let speed = CGFloat.random(in: 0.4...0.8)
-            
-            withAnimation(.spring(response: 0.2, dampingFraction: 0.7)) {
-                barHeights[i].average += (targetHeight.average - barHeights[i].average) * speed
-                barHeights[i].peak += (targetHeight.peak - barHeights[i].peak) * speed
-            }
-        }
-    }
-    
-    private func resetBars() {
-        withAnimation(.spring(response: 0.2, dampingFraction: 0.7)) {
-            for i in 0..<barCount {
-                barHeights[i].average = minHeight
-                barHeights[i].peak = minHeight
-            }
-        }
-    }
-    
-    private func calculateTargetHeight(for index: Int) -> BarLevel {
-        let positionFactor = CGFloat(index) / CGFloat(barCount - 1)
-        let curve = sin(positionFactor * .pi)
-        
-        let randomFactor = Double.random(in: 0.8...1.2)
-        let averageBase = audioMeter.averagePower * randomFactor
-        let peakBase = audioMeter.peakPower * randomFactor
-        
-        let averageHeight = CGFloat(averageBase) * maxHeight * 1.7 * curve
-        let peakHeight = CGFloat(peakBase) * maxHeight * 1.7 * curve
-        
-        let finalAverage = max(minHeight, min(averageHeight, maxHeight))
-        let finalPeak = max(minHeight, min(peakHeight, maxHeight))
-        
-        
-        return BarLevel(
-            average: finalAverage,
-            peak: finalPeak
-        )
-    }
-}
-
-struct NotchVisualizerBar: View {
-    let averageHeight: CGFloat
-    let peakHeight: CGFloat
-    let color: Color
-    
-    var body: some View {
-        ZStack(alignment: .bottom) {
-            // Average level bar
-            RoundedRectangle(cornerRadius: 1.5)
-                .fill(
-                    LinearGradient(
-                        gradient: Gradient(colors: [
-                            color.opacity(0.6),
-                            color.opacity(0.8),
-                            color
-                        ]),
-                        startPoint: .bottom,
-                        endPoint: .top
-                    )
-                )
-                .frame(width: 2, height: averageHeight)
-        
-        }
-        .animation(.spring(response: 0.2, dampingFraction: 0.7, blendDuration: 0), value: averageHeight)
-        .animation(.spring(response: 0.2, dampingFraction: 0.7, blendDuration: 0), value: peakHeight)
-    }
-}
-
-struct NotchStaticVisualizer: View {
-    private let barCount = 5
-    private let barHeights: [CGFloat] = [0.7, 0.5, 0.8, 0.4, 0.6]
-    let color: Color
-    
-    var body: some View {
-        HStack(spacing: 2) {
-            ForEach(0..<barCount, id: \.self) { index in
-                NotchVisualizerBar(
-                    averageHeight: barHeights[index] * 18,
-                    peakHeight: barHeights[index] * 18,
-                    color: color
-                )
-            }
-        }
-    }
-}
-
 struct ProcessingIndicator: View {
     @State private var rotation: Double = 0
     let color: Color
diff --git a/VoiceInk/Views/NotchShape.swift b/VoiceInk/Views/Recorder/NotchShape.swift
similarity index 100%
rename from VoiceInk/Views/NotchShape.swift
rename to VoiceInk/Views/Recorder/NotchShape.swift
diff --git a/VoiceInk/Views/NotchWindowManager.swift b/VoiceInk/Views/Recorder/NotchWindowManager.swift
similarity index 100%
rename from VoiceInk/Views/NotchWindowManager.swift
rename to VoiceInk/Views/Recorder/NotchWindowManager.swift
diff --git a/VoiceInk/VisualizerView.swift b/VoiceInk/VisualizerView.swift
deleted file mode 100644
index 34e0378..0000000
--- a/VoiceInk/VisualizerView.swift
+++ /dev/null
@@ -1,91 +0,0 @@
-import SwiftUI
-
-struct VisualizerView: View {
-    @ObservedObject var recorder: Recorder
-    private let barCount = 50
-    @State private var levels: [BarLevel] = []
-    private let smoothingFactor: Double = 0.3
-    
-    struct BarLevel: Equatable {
-        var average: CGFloat
-        var peak: CGFloat
-    }
-    
-    var body: some View {
-        GeometryReader { geometry in
-            HStack(alignment: .center, spacing: 4) {
-                ForEach(0..<barCount, id: \.self) { index in
-                    VisualizerBar(level: levels.isEmpty ? BarLevel(average: 0, peak: 0) : levels[index])
-                        .frame(width: (geometry.size.width - CGFloat(barCount - 1) * 4) / CGFloat(barCount))
-                }
-            }
-            .frame(width: geometry.size.width, height: geometry.size.height)
-            .background(Color.black.opacity(0.1))
-            .cornerRadius(10)
-            .onAppear {
-                levels = Array(repeating: BarLevel(average: 0, peak: 0), count: barCount)
-            }
-            .onReceive(recorder.$audioMeter) { newMeter in
-                updateLevels(with: newMeter)
-            }
-        }
-    }
-    
-    private func updateLevels(with meter: AudioMeter) {
-        // Create new levels with randomization for visual interest
-        var newLevels: [BarLevel] = []
-        for i in 0..<barCount {
-            let randomFactor = Double.random(in: 0.8...1.2)
-            let targetAverage = min(max(meter.averagePower * randomFactor, 0), 1)
-            let targetPeak = min(max(meter.peakPower * randomFactor, 0), 1)
-            
-            let currentLevel = levels[i]
-            let smoothedAverage = currentLevel.average + (CGFloat(targetAverage) - currentLevel.average) * CGFloat(smoothingFactor)
-            let smoothedPeak = currentLevel.peak + (CGFloat(targetPeak) - currentLevel.peak) * CGFloat(smoothingFactor)
-            
-            newLevels.append(BarLevel(
-                average: smoothedAverage,
-                peak: smoothedPeak
-            ))
-        }
-        
-        withAnimation(.easeInOut(duration: 0.15)) {
-            levels = newLevels
-        }
-    }
-}
-
-struct VisualizerBar: View {
-    let level: VisualizerView.BarLevel
-    
-    var body: some View {
-        GeometryReader { geometry in
-            ZStack(alignment: .bottom) {
-                // Average level bar
-                RoundedRectangle(cornerRadius: 2)
-                    .fill(
-                        LinearGradient(
-                            gradient: Gradient(colors: [.blue.opacity(0.7), .purple.opacity(0.7)]),
-                            startPoint: .bottom,
-                            endPoint: .top
-                        )
-                    )
-                    .frame(height: level.average * geometry.size.height)
-                
-                // Peak level indicator
-                RoundedRectangle(cornerRadius: 2)
-                    .fill(
-                        LinearGradient(
-                            gradient: Gradient(colors: [.blue, .purple]),
-                            startPoint: .bottom,
-                            endPoint: .top
-                        )
-                    )
-                    .frame(height: 2)
-                    .offset(y: -level.peak * geometry.size.height + 1)
-                    .opacity(level.peak > 0.01 ? 1 : 0)
-            }
-            .frame(maxHeight: geometry.size.height, alignment: .bottom)
-        }
-    }
-}