Enhance update status display and audio sample components

- Improved the UpdateStatus component to show download progress and total bytes downloaded during updates.
- Refactored AudioSampleRecording and AudioSampleSystem components for cleaner button rendering and consistent layout.
- Updated import order in SampleUpload component for better organization.

app/src/components/ServerSettings/UpdateStatus.tsx

@@ -71,11 +71,23 @@ export function UpdateStatus() {
 
         {status.downloading && (
           <div className="space-y-2">
-            <div className="flex items-center gap-2 text-sm">
-              <Download className="h-4 w-4" />
-              Downloading update...
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-2">
+                <Download className="h-4 w-4" />
+                Downloading update...
+              </div>
+              {status.downloadProgress !== undefined && (
+                <span className="text-muted-foreground">
+                  {status.downloadProgress}%
+                </span>
+              )}
             </div>
-            <Progress />
+            <Progress value={status.downloadProgress} />
+            {status.downloadedBytes !== undefined && status.totalBytes !== undefined && status.totalBytes > 0 && (
+              <div className="text-xs text-muted-foreground">
+                {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB / {(status.totalBytes / 1024 / 1024).toFixed(1)} MB
+              </div>
+            )}
           </div>
         )}
 

app/src/components/VoiceProfiles/AudioSampleRecording.tsx

@@ -1,4 +1,4 @@
-import { Mic, Square, Play, Pause } from 'lucide-react';
+import { Mic, Pause, Play, Square } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { formatAudioDuration } from '@/lib/utils/audio';
@@ -35,12 +35,7 @@ export function AudioSampleRecording({
         <div className="space-y-4">
           {!isRecording && !file && (
             <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-dashed rounded-lg min-h-[180px]">
-              <Button
-                type="button"
-                onClick={onStart}
-                size="lg"
-                className="flex items-center gap-2"
-              >
+              <Button type="button" onClick={onStart} size="lg" className="flex items-center gap-2">
                 <Mic className="h-5 w-5" />
                 Start Recording
               </Button>
@@ -81,16 +76,9 @@ export function AudioSampleRecording({
                 <Mic className="h-5 w-5 text-primary" />
                 <span className="font-medium">Recording complete</span>
               </div>
-              <p className="text-sm text-muted-foreground text-center">
-                File: {file.name}
-              </p>
+              <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
               <div className="flex gap-2">
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="outline"
-                  onClick={onPlayPause}
-                >
+                <Button type="button" size="icon" variant="outline" onClick={onPlayPause}>
                   {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                 </Button>
                 <Button

app/src/components/VoiceProfiles/AudioSampleSystem.tsx

@@ -1,4 +1,4 @@
-import { Monitor, Square, Play, Pause, Mic } from 'lucide-react';
+import { Mic, Monitor, Pause, Play, Square } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { formatAudioDuration } from '@/lib/utils/audio';
@@ -35,12 +35,7 @@ export function AudioSampleSystem({
         <div className="space-y-4">
           {!isRecording && !file && (
             <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-dashed rounded-lg min-h-[180px]">
-              <Button
-                type="button"
-                onClick={onStart}
-                size="lg"
-                className="flex items-center gap-2"
-              >
+              <Button type="button" onClick={onStart} size="lg" className="flex items-center gap-2">
                 <Monitor className="h-5 w-5" />
                 Start Capture
               </Button>
@@ -81,16 +76,9 @@ export function AudioSampleSystem({
                 <Monitor className="h-5 w-5 text-primary" />
                 <span className="font-medium">Capture complete</span>
               </div>
-              <p className="text-sm text-muted-foreground text-center">
-                File: {file.name}
-              </p>
+              <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
               <div className="flex gap-2">
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="outline"
-                  onClick={onPlayPause}
-                >
+                <Button type="button" size="icon" variant="outline" onClick={onPlayPause}>
                   {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                 </Button>
                 <Button

app/src/components/VoiceProfiles/SampleUpload.tsx

@@ -22,15 +22,15 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
-import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
 import { useAudioPlayer } from '@/lib/hooks/useAudioPlayer';
+import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
 import { useAddSample, useProfile } from '@/lib/hooks/useProfiles';
 import { useSystemAudioCapture } from '@/lib/hooks/useSystemAudioCapture';
 import { useTranscription } from '@/lib/hooks/useTranscription';
 import { isTauri } from '@/lib/tauri';
-import { AudioSampleUpload } from './AudioSampleUpload';
 import { AudioSampleRecording } from './AudioSampleRecording';
 import { AudioSampleSystem } from './AudioSampleSystem';
+import { AudioSampleUpload } from './AudioSampleUpload';
 
 const sampleSchema = z.object({
   file: z.instanceof(File, { message: 'Please select an audio file' }),