v6.8

frontend/src/components/AudioAnalysisPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Upload, ArrowLeft } from "lucide-react";
+import { Upload, ArrowLeft, Trash2 } from "lucide-react";
 import { AudioAnalysis } from "@/components/AudioAnalysis";
 import { SpectrumVisualization } from "@/components/SpectrumVisualization";
 import { useAudioAnalysis } from "@/hooks/useAudioAnalysis";
@@ -13,15 +13,13 @@ interface AudioAnalysisPageProps {
 }
 
 export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
-  const { analyzing, result, analyzeFile, clearResult } = useAudioAnalysis();
-  const [selectedFilePath, setSelectedFilePath] = useState<string>("");
+  const { analyzing, result, analyzeFile, clearResult, selectedFilePath, spectrumLoading } = useAudioAnalysis();
   const [isDragging, setIsDragging] = useState(false);
 
   const handleSelectFile = async () => {
     try {
       const filePath = await SelectFile();
       if (filePath) {
-        setSelectedFilePath(filePath);
         await analyzeFile(filePath);
       }
     } catch (err) {
@@ -46,7 +44,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
         return;
       }
 
-      setSelectedFilePath(filePath);
       await analyzeFile(filePath);
     },
     [analyzeFile]
@@ -64,19 +61,26 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
 
   const handleAnalyzeAnother = () => {
     clearResult();
-    setSelectedFilePath("");
   };
 
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex items-center gap-4">
-        {onBack && (
-          <Button variant="ghost" size="icon" onClick={onBack}>
-            <ArrowLeft className="h-5 w-5" />
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          {onBack && (
+            <Button variant="ghost" size="icon" onClick={onBack}>
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+          )}
+          <h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
+        </div>
+        {result && (
+          <Button onClick={handleAnalyzeAnother} variant="outline" size="sm">
+            <Trash2 className="h-4 w-4" />
+            Clear
           </Button>
         )}
-        <h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
       </div>
 
       {/* File Selection */}
@@ -102,7 +106,7 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
           style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
         >
           <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
-            <Upload className="h-8 w-8 text-muted-foreground" />
+            <Upload className="h-8 w-8 text-primary" />
           </div>
           <p className="text-sm text-muted-foreground mb-4 text-center">
             {isDragging
@@ -127,25 +131,23 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
       {/* Analysis Results */}
       {result && (
         <div className="space-y-4">
-          {/* File Info with Analyze Another Button */}
-          <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
-            <p className="text-sm font-mono truncate flex-1 min-w-0">{selectedFilePath}</p>
-            <Button onClick={handleAnalyzeAnother} variant="outline" size="sm" className="ml-4 shrink-0">
-              <Upload className="h-4 w-4" />
-              Analyze Another File
-            </Button>
-          </div>
+          {/* Detailed Analysis */}
+          <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} filePath={selectedFilePath} />
 
           {/* Spectrum Visualization */}
-          <SpectrumVisualization
-            sampleRate={result.sample_rate}
-            bitsPerSample={result.bits_per_sample}
-            duration={result.duration}
-            spectrumData={result.spectrum}
-          />
-
-          {/* Detailed Analysis */}
-          <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} />
+          {spectrumLoading ? (
+            <div className="flex flex-col items-center justify-center py-16 border rounded-lg">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-2"></div>
+              <p className="text-sm text-muted-foreground">Loading spectrum data...</p>
+            </div>
+          ) : (
+            <SpectrumVisualization
+              sampleRate={result.sample_rate}
+              bitsPerSample={result.bits_per_sample}
+              duration={result.duration}
+              spectrumData={result.spectrum}
+            />
+          )}
         </div>
       )}
     </div>