From 546c80e4aeb1d7d24f8a5b6856c27925ae581c3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 15:28:35 +0100
Subject: [PATCH] feat: display dB values and use gauge icon for level meters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed level meter display to show professional dB values instead
of percentages, and replaced volume icon with gauge icon.

Display Changes:
- Show dB values (-60 to 0) instead of percentage (0-100%)
- Use monospace font for consistent digit alignment
- Show "-∞" for silence (level = 0) instead of "-60"
- Rounded to nearest integer dB (no decimals for cleaner display)

Icon Updates:
- Replaced Volume2 icon with Gauge icon for playback levels
- Kept Mic icon for recording input levels
- Gauge better represents metering/measurement vs audio control

dB Conversion:
- Formula: dB = (normalized * 60) - 60
- Reverse of: normalized = (dB + 60) / 60
- Range: -60dB (silence) to 0dB (full scale)

Display Examples:
  0.00 (0%) = -∞   (silence)
  0.17 (17%) = -50dB (very quiet)
  0.50 (50%) = -30dB (moderate)
  0.83 (83%) = -10dB (loud)
  1.00 (100%) = 0dB (full scale)

Benefits:
✅ Professional dB notation matching industry standards
✅ Clearer for audio engineers and musicians
✅ Easier to identify levels relative to 0dBFS
✅ Gauge icon better conveys "measurement"
✅ Monospace font prevents number jumping

Now meters show "-18" instead of "70%" making it immediately
clear where you are in the dynamic range.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/Track.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 72ebdaf..1f3c076 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, CircleArrowOutUpRight, Upload, Plus, Mic } from 'lucide-react';
+import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, CircleArrowOutUpRight, Upload, Plus, Mic, Gauge } from 'lucide-react';
 import type { Track as TrackType } from '@/types/track';
 import { Button } from '@/components/ui/Button';
 import { Slider } from '@/components/ui/Slider';
@@ -559,7 +559,7 @@ export function Track({
                   </>
                 ) : (
                   <>
-                    <Volume2 className="h-3 w-3" />
+                    <Gauge className="h-3 w-3" />
                     Level
                   </>
                 )}
@@ -570,8 +570,14 @@ export function Track({
                   orientation="horizontal"
                 />
               </div>
-              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
-                {Math.round((track.recordEnabled || isRecording ? recordingLevel : playbackLevel) * 100)}%
+              <span className="text-xs text-muted-foreground w-12 text-right flex-shrink-0 font-mono">
+                {(() => {
+                  const level = track.recordEnabled || isRecording ? recordingLevel : playbackLevel;
+                  // Convert normalized (0-1) back to dB
+                  // normalized = (dB - (-60)) / 60, so dB = (normalized * 60) - 60
+                  const db = (level * 60) - 60;
+                  return level === 0 ? '-∞' : `${db.toFixed(0)}`;
+                })()}
               </span>
             </div>
           </>