feat: differentiate audio files from voice messages in player UI

Show filename above waveform for uploaded audio files, hide
transcription button for non-voice audio, and constrain player
width to prevent long filenames from overflowing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JSKitty

src/js/voice.js

@@ -1357,6 +1357,9 @@ function handleAudioAttachment(cAttachment, pMessage, msg) {
     playBtn.classList.add('audio-play-btn');
     playBtn.innerHTML = '<span class="icon icon-play"></span>';
 
+    // Detect voice messages vs uploaded audio files
+    const isVoiceMessage = !cAttachment.name;
+
     // Disable playback for pending (uploading) messages
     const isPending = msg.mine && msg.pending;
     if (isPending) {
@@ -1496,7 +1499,19 @@ function handleAudioAttachment(cAttachment, pMessage, msg) {
 
     // Assemble custom player
     customPlayer.appendChild(playBtn);
-    customPlayer.appendChild(waveform);
+    if (!isVoiceMessage && cAttachment.name) {
+        const waveformWrapper = document.createElement('div');
+        waveformWrapper.classList.add('audio-waveform-wrapper');
+        const filenameLabel = document.createElement('div');
+        filenameLabel.classList.add('audio-filename', 'cutoff');
+        filenameLabel.textContent = cAttachment.name;
+        filenameLabel.title = cAttachment.name;
+        waveformWrapper.appendChild(filenameLabel);
+        waveformWrapper.appendChild(waveform);
+        customPlayer.appendChild(waveformWrapper);
+    } else {
+        customPlayer.appendChild(waveform);
+    }
     customPlayer.appendChild(timeDisplay);
 
     audioContainer.appendChild(customPlayer);
@@ -1724,8 +1739,8 @@ function handleAudioAttachment(cAttachment, pMessage, msg) {
 
     }
 
-    // Only add transcription UI for supported formats and platforms
-    if (platformFeatures.transcription && ['wav', 'mp3', 'flac'].includes(cAttachment.extension)) {
+    // Only add transcription UI for voice messages with supported formats
+    if (isVoiceMessage && platformFeatures.transcription && ['wav', 'mp3', 'flac'].includes(cAttachment.extension)) {
         // Display the Transcribe button
         customPlayer.appendChild(transcribeBtn);
 

src/styles.css

@@ -4971,7 +4971,8 @@ select:disabled:hover {
     border-radius: 12px;
     position: relative;
     overflow: hidden;
-    min-width: 280px;
+    width: min(500px, calc(100vw - 100px));
+    box-sizing: border-box;
     transition: all 0.3s ease;
 }
 
@@ -5080,6 +5081,25 @@ select:disabled:hover {
     cursor: pointer;
 }
 
+.audio-waveform-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 0;
+    gap: 2px;
+    margin: 0 8px;
+}
+
+.audio-waveform-wrapper .audio-waveform {
+    margin: 0;
+}
+
+.audio-filename {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1;
+}
+
 /* Visual feedback on hover */
 .audio-waveform:hover {
     opacity: 1;