v6.8

frontend/src/components/AudioAnalysis.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Button } from "@/components/ui/button";
 import {
@@ -17,13 +17,15 @@ interface AudioAnalysisProps {
   analyzing: boolean;
   onAnalyze?: () => void;
   showAnalyzeButton?: boolean;
+  filePath?: string;
 }
 
 export function AudioAnalysis({
   result,
   analyzing,
   onAnalyze,
-  showAnalyzeButton = true
+  showAnalyzeButton = true,
+  filePath
 }: AudioAnalysisProps) {
   if (analyzing) {
     return (
@@ -43,7 +45,7 @@ export function AudioAnalysis({
       <Card>
         <CardContent className="px-6">
           <div className="flex flex-col items-center justify-center py-8 gap-4">
-            <Activity className="h-12 w-12 text-muted-foreground/50" />
+            <Activity className="h-12 w-12 text-primary" />
             <div className="text-center space-y-2">
               <p className="font-medium">Audio Quality Analysis</p>
               <p className="text-sm text-muted-foreground">
@@ -82,85 +84,60 @@ export function AudioAnalysis({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Activity className="h-5 w-5" />
-          Audio Quality Analysis
-        </CardTitle>
+        {filePath && (
+          <p className="text-sm font-mono truncate">{filePath}</p>
+        )}
       </CardHeader>
 
-      <CardContent className="px-6 space-y-6">
-
-        {/* Technical Specifications */}
-        <div className="grid grid-cols-2 gap-4">
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Radio className="h-3 w-3" />
-              Sample Rate
-            </div>
-            <p className="font-semibold">{(result.sample_rate / 1000).toFixed(1)} kHz</p>
+      <CardContent className="space-y-2">
+        {/* Audio Properties - Single line */}
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+          <div className="flex items-center gap-1">
+            <Radio className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Sample Rate:</span>
+            <span className="font-semibold">{(result.sample_rate / 1000).toFixed(1)} kHz</span>
           </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <FileAudio className="h-3 w-3" />
-              Bit Depth
-            </div>
-            <p className="font-semibold">{result.bit_depth}</p>
+          <div className="flex items-center gap-1">
+            <FileAudio className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Bit Depth:</span>
+            <span className="font-semibold">{result.bit_depth}</span>
           </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Waves className="h-3 w-3" />
-              Channels
-            </div>
-            <p className="font-semibold">{result.channels === 2 ? "Stereo" : result.channels === 1 ? "Mono" : `${result.channels} channels`}</p>
+          <div className="flex items-center gap-1">
+            <Waves className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Channels:</span>
+            <span className="font-semibold">{result.channels === 2 ? "Stereo" : result.channels === 1 ? "Mono" : `${result.channels}`}</span>
           </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Clock className="h-3 w-3" />
-              Duration
-            </div>
-            <p className="font-semibold">{formatDuration(result.duration)}</p>
+          <div className="flex items-center gap-1">
+            <Clock className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Duration:</span>
+            <span className="font-semibold">{formatDuration(result.duration)}</span>
           </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Gauge className="h-3 w-3" />
-              Nyquist Frequency
-            </div>
-            <p className="font-semibold">{(nyquistFreq / 1000).toFixed(1)} kHz</p>
+          <div className="flex items-center gap-1">
+            <Gauge className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Nyquist:</span>
+            <span className="font-semibold">{(nyquistFreq / 1000).toFixed(1)} kHz</span>
           </div>
         </div>
 
-        {/* Dynamic Range Analysis */}
-        <div className="border rounded-lg p-4 space-y-3 bg-muted/30">
-          <div className="flex items-center gap-2 text-sm font-medium">
-            <TrendingUp className="h-4 w-4" />
-            Dynamic Range Analysis
+        {/* Dynamic Range - Single line */}
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs border-t pt-2">
+          <div className="flex items-center gap-1">
+            <TrendingUp className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Dynamic Range:</span>
+            <span className="font-semibold">{formatNumber(result.dynamic_range)} dB</span>
           </div>
-
-          <div className="grid grid-cols-3 gap-3 text-sm">
-            <div>
-              <p className="text-xs text-muted-foreground">Dynamic Range</p>
-              <p className="font-semibold">{formatNumber(result.dynamic_range)} dB</p>
-            </div>
-            <div>
-              <p className="text-xs text-muted-foreground">Peak Level</p>
-              <p className="font-semibold">{formatNumber(result.peak_amplitude)} dB</p>
-            </div>
-            <div>
-              <p className="text-xs text-muted-foreground">RMS Level</p>
-              <p className="font-semibold">{formatNumber(result.rms_level)} dB</p>
-            </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">Peak:</span>
+            <span className="font-semibold">{formatNumber(result.peak_amplitude)} dB</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">RMS:</span>
+            <span className="font-semibold">{formatNumber(result.rms_level)} dB</span>
+          </div>
+          <div className="flex items-center gap-1 ml-auto">
+            <span className="text-muted-foreground">Samples:</span>
+            <span className="font-semibold">{result.total_samples.toLocaleString()}</span>
           </div>
-        </div>
-
-        {/* Technical Info Footer */}
-        <div className="pt-2 border-t">
-          <p className="text-xs text-muted-foreground">
-            Total Samples: {result.total_samples.toLocaleString()}
-          </p>
         </div>
       </CardContent>
     </Card>