feat(soundboard): clip duration, playing indicator, volume layout, name wrap

Editor (SoundboardPackEditor): show each clip's length in seconds (stored on
upload via getAudioDurationMs, and captured on preview for existing clips); the
preview button now toggles play/stop with a 'now playing' equalizer indicator;
reworked the volume control into a fixed cell with a % readout so the slider's
max no longer collides with the delete button.

Call soundboard: clip names wrap (up to 3 lines, word-break) instead of being
truncated with an ellipsis; cards grow to fit.

TODO: logged the basic audio-editor / video->audio-extractor as a large project.

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

LOTUS_TODO.md

@@ -148,6 +148,10 @@ After Phases A–C the client spec is ~complete. What's left, flagged by **what
 
 ## 📋 Open Feature Backlog
 
+### [ ] Basic in-app audio editor / video→audio extractor (LARGE PROJECT)
+
+A minimal audio editor for soundboard clips and voice content. Scope: (1) **trim/clip** an audio file to a chosen start/end (waveform scrubber, in/out handles); (2) **upload a video file → strip and discard the video track, keep only the audio** (extract audio, then the source video is dropped — never uploaded/stored); (3) minimal edits only (trim, maybe gain/normalize, fade in/out) — not a full DAW. Likely Web Audio API (`AudioContext.decodeAudioData` → trim `AudioBuffer` → re-encode) + `MediaRecorder`/an encoder for output; video demux via a `<video>`+`MediaElementSource` capture or ffmpeg.wasm (weigh bundle cost). Feeds the soundboard uploader (`utils/soundboardClips.ts`, `SoundboardPackEditor`) and attachments. Design under TDS + native-cinny law. Big build — plan a dedicated session; evaluate ffmpeg.wasm size/CSP (wasm) before committing.
+
 ### [ ] P4-4 · Math / LaTeX Rendering (LOW PRIORITY)
 
 Render `$…$` / `$$…$$` via KaTeX; graceful fallback to raw text. **Sanitizer must be patched** — `src/app/utils/sanitize.ts` (sanitize-html, `disallowedTagsMode:'discard'`) strips all MathML: add `<math><mi><mo><mn><mrow><mfrac><msqrt><mroot><msub><msup><msubsup><munder><mover><mtable><mtr><mtd>…` + `annotation` to `permittedHtmlTags`, and `xmlns`/`display`/`mathvariant` to `permittedTagToAttributes`. Parser: split text nodes on `/(\$\$.*?\$\$|\$.*?\$)/g` in `react-custom-html-parser.tsx` → `<KaTeX>`. Lazy-import `katex/dist/katex.min.css` only when a math block renders. Verify KaTeX bundle-size impact.

src/app/components/DeviceVerificationSetup.tsx

@@ -13,9 +13,9 @@ import {
   color,
   Spinner,
 } from 'folds';
-import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
+import { useSaveFile } from '../hooks/useSaveFile';
 import { useModalStyle } from '../hooks/useModalStyle';
 import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
@@ -230,6 +230,7 @@ type RecoveryKeyDisplayProps = {
 };
 function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
   const [show, setShow] = useState(false);
+  const saveFile = useSaveFile();
 
   const handleCopy = () => {
     copyToClipboard(recoveryKey);
@@ -239,7 +240,7 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
     const blob = new Blob([recoveryKey], {
       type: 'text/plain;charset=us-ascii',
     });
-    FileSaver.saveAs(blob, 'recovery-key.txt');
+    saveFile(blob, 'recovery-key.txt');
   };
 
   const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -19,7 +19,7 @@ import {
   config,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import FileSaver from 'file-saver';
+import { useSaveFile } from '../../hooks/useSaveFile';
 import * as css from './PdfViewer.css';
 import { AsyncStatus } from '../../hooks/useAsyncCallback';
 import { useZoom } from '../../hooks/useZoom';
@@ -36,6 +36,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
   ({ className, name, src, requestClose, ...props }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const scrollRef = useRef<HTMLDivElement>(null);
+    const saveFile = useSaveFile();
     const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
 
     const [pdfJSState, loadPdfJS] = usePdfJSLoader();
@@ -76,7 +77,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
     }, [docState, pageNo, zoom]);
 
     const handleDownload = () => {
-      FileSaver.saveAs(src, name);
+      saveFile(src, name);
     };
 
     const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {

src/app/components/RenderMessageContent.tsx

@@ -31,7 +31,29 @@ import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
-import { IImageContent } from '../../types/matrix/common';
+import { IAudioContent, IFileContent, IImageContent } from '../../types/matrix/common';
+
+// Audio is frequently sent as m.file (bridges/other clients, or when the browser
+// reported a non-audio/* mime on upload). Detect that so we can play it inline
+// like m.audio instead of showing only a download button.
+const AUDIO_EXT_MIME: Record<string, string> = {
+  mp3: 'audio/mpeg',
+  m4a: 'audio/mp4',
+  aac: 'audio/aac',
+  oga: 'audio/ogg',
+  ogg: 'audio/ogg',
+  opus: 'audio/ogg',
+  wav: 'audio/wav',
+  flac: 'audio/flac',
+  weba: 'audio/webm',
+};
+const resolveInlineAudioMime = (content: IFileContent): string | undefined => {
+  const mime = content.info?.mimetype;
+  if (typeof mime === 'string' && mime.startsWith('audio')) return mime;
+  const name = content.filename ?? content.body ?? '';
+  const ext = name.split('.').pop()?.toLowerCase();
+  return ext ? AUDIO_EXT_MIME[ext] : undefined;
+};
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -276,6 +298,29 @@ export function RenderMessageContent({
   }
 
   if (msgType === MsgType.File) {
+    // If an m.file is actually audio, play it inline (like m.audio) instead of
+    // only offering a download. MAudio falls back to renderFile if playback fails.
+    const audioMime = resolveInlineAudioMime(getContent<IFileContent>());
+    if (audioMime) {
+      const fileContent = getContent<IFileContent>();
+      const audioContent = {
+        ...fileContent,
+        info: { ...(fileContent.info ?? {}), mimetype: audioMime },
+      } as unknown as IAudioContent;
+      return (
+        <>
+          <MAudio
+            content={audioContent}
+            renderAsFile={renderFile}
+            renderAudioContent={(props) => (
+              <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
+            )}
+            outlined={outlineAttachment}
+          />
+          {renderCaption()}
+        </>
+      );
+    }
     return renderFile();
   }
 

src/app/components/image-viewer/ImageViewer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import FileSaver from 'file-saver';
 import classNames from 'classnames';
 import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import { useSaveFile } from '../../hooks/useSaveFile';
 import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
@@ -17,12 +17,13 @@ export type ImageViewerProps = {
 export const ImageViewer = as<'div', ImageViewerProps>(
   ({ className, alt, src, requestClose, ...props }, ref) => {
     const { t } = useTranslation();
+    const saveFile = useSaveFile();
     const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
     const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
 
     const handleDownload = async () => {
       const fileContent = await downloadMedia(src);
-      FileSaver.saveAs(fileContent, alt);
+      saveFile(fileContent, alt);
     };
 
     return (

src/app/components/message/FileHeader.tsx

@@ -1,8 +1,8 @@
 import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds';
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import FileSaver from 'file-saver';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
+import { useSaveFile } from '../../hooks/useSaveFile';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
@@ -24,6 +24,7 @@ type FileDownloadButtonProps = {
 export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDownloadButtonProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
+  const saveFile = useSaveFile();
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
@@ -34,18 +35,19 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
         : await downloadMedia(mediaUrl);
 
       const fileURL = URL.createObjectURL(fileContent);
-      FileSaver.saveAs(fileURL, filename);
+      saveFile(fileURL, filename);
       return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, filename]),
+    }, [mx, url, useAuthentication, mimeType, encInfo, filename, saveFile]),
   );
 
   const downloading = downloadState.status === AsyncStatus.Loading;
   const hasError = downloadState.status === AsyncStatus.Error;
+  const succeeded = downloadState.status === AsyncStatus.Success;
   return (
     <IconButton
       disabled={downloading}
       onClick={download}
-      variant={hasError ? 'Critical' : 'SurfaceVariant'}
+      variant={hasError ? 'Critical' : succeeded ? 'Success' : 'SurfaceVariant'}
       size="300"
       radii="300"
       aria-label={
@@ -53,13 +55,15 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
           ? 'Downloading...'
           : hasError
             ? 'Download failed, click to retry'
-            : 'Download file'
+            : succeeded
+              ? 'Downloaded — click to download again'
+              : 'Download file'
       }
     >
       {downloading ? (
         <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />
       ) : (
-        <Icon size="100" src={Icons.Download} />
+        <Icon size="100" src={succeeded ? Icons.Check : Icons.Download} />
       )}
     </IconButton>
   );

src/app/components/message/content/FileContent.tsx

@@ -14,10 +14,10 @@ import {
   TooltipProvider,
   as,
 } from 'folds';
-import FileSaver from 'file-saver';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FocusTrap from 'focus-trap-react';
 import { IFileInfo } from '../../../../types/matrix/common';
+import { useSaveFile } from '../../../hooks/useSaveFile';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { bytesToSize } from '../../../utils/common';
@@ -252,6 +252,7 @@ export type DownloadFileProps = {
 export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFileProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
+  const saveFile = useSaveFile();
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
@@ -262,9 +263,9 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
         : await downloadMedia(mediaUrl);
 
       const fileURL = URL.createObjectURL(fileContent);
-      FileSaver.saveAs(fileURL, body);
+      saveFile(fileURL, body);
       return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, body]),
+    }, [mx, url, useAuthentication, mimeType, encInfo, body, saveFile]),
   );
 
   return downloadState.status === AsyncStatus.Error ? (
@@ -277,7 +278,7 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
       size="400"
       onClick={() =>
         downloadState.status === AsyncStatus.Success
-          ? FileSaver.saveAs(downloadState.data, body)
+          ? saveFile(downloadState.data, body)
           : download()
       }
       disabled={downloadState.status === AsyncStatus.Loading}

src/app/components/soundboard-pack-view/SoundboardPackEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Box,
   Button,
@@ -21,6 +21,7 @@ import { uniqueShortcode } from '../../plugins/soundboard/utils';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import {
+  getAudioDurationMs,
   playClipLocally,
   resolveClipObjectUrl,
   SOUNDBOARD_ACCEPT,
@@ -29,6 +30,49 @@ import {
 } from '../../utils/soundboardClips';
 import { stopPropagation } from '../../utils/keyboard';
 
+// Injected once: the little "now playing" equalizer bars animation.
+const EQ_STYLE_ID = 'lotus-soundboard-eq-keyframes';
+function ensureEqKeyframes() {
+  if (typeof document === 'undefined' || document.getElementById(EQ_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = EQ_STYLE_ID;
+  style.textContent = `
+    @keyframes lotusSbEq { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
+    @media (prefers-reduced-motion: reduce) { @keyframes lotusSbEq { 0%,100% { transform: scaleY(0.6); } } }
+  `;
+  document.head.appendChild(style);
+}
+
+function PlayingBars() {
+  return (
+    <Box alignItems="Center" gap="100" style={{ height: toRem(14) }} aria-hidden>
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          style={{
+            display: 'inline-block',
+            width: toRem(3),
+            height: toRem(14),
+            borderRadius: toRem(2),
+            background: color.Primary.Main,
+            transformOrigin: 'center bottom',
+            animation: `lotusSbEq 0.7s ease-in-out ${i * 0.15}s infinite`,
+          }}
+        />
+      ))}
+    </Box>
+  );
+}
+
+// Short clip length shown while adjusting a sound: "3.2s", or "1:04" if ≥ 60s.
+const formatClipSeconds = (seconds: number): string => {
+  if (!Number.isFinite(seconds) || seconds < 0) return '';
+  if (seconds < 60) return `${seconds.toFixed(1)}s`;
+  const m = Math.floor(seconds / 60);
+  const s = Math.round(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
 type ClipDraft = {
   url: string;
   body: string;
@@ -59,9 +103,20 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
   const [error, setError] = useState<string>();
   const [emojiFor, setEmojiFor] = useState<string>(); // shortcode currently picking an emoji
   const [busyPreview, setBusyPreview] = useState<string>();
+  const [playingKey, setPlayingKey] = useState<string>();
+  const [durations, setDurations] = useState<Map<string, number>>(new Map()); // shortcode -> seconds
+  const audioElRef = useRef<HTMLAudioElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const emojiAnchorRef = useRef<HTMLElement | null>(null);
 
+  useEffect(() => {
+    ensureEqKeyframes();
+    return () => {
+      audioElRef.current?.pause();
+      audioElRef.current = null;
+    };
+  }, []);
+
   const existing = useMemo(() => pack.getClips(), [pack]);
   const clipCount = existing.filter((c) => !deleted.has(c.shortcode)).length + uploads.length;
 
@@ -78,19 +133,47 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
     });
   };
 
+  const stopPlayback = useCallback(() => {
+    audioElRef.current?.pause();
+    audioElRef.current = null;
+    setPlayingKey(undefined);
+  }, []);
+
   const preview = useCallback(
     async (id: string, mxc: string, volume: number) => {
+      // Clicking the clip that's already playing stops it (toggle).
+      if (audioElRef.current && playingKey === id) {
+        stopPlayback();
+        return;
+      }
+      stopPlayback(); // stop any other clip first
       setBusyPreview(id);
       try {
         const url = await resolveClipObjectUrl(mx, mxc);
-        playClipLocally(url, volume / 100);
+        const audio = playClipLocally(url, volume / 100);
+        if (audio) {
+          audioElRef.current = audio;
+          setPlayingKey(id);
+          audio.addEventListener('loadedmetadata', () => {
+            if (Number.isFinite(audio.duration)) {
+              setDurations((prev) => new Map(prev).set(id, audio.duration));
+            }
+          });
+          const clear = () => {
+            if (audioElRef.current === audio) audioElRef.current = null;
+            setPlayingKey((k) => (k === id ? undefined : k));
+          };
+          audio.addEventListener('ended', clear);
+          audio.addEventListener('pause', clear);
+          audio.addEventListener('error', clear);
+        }
       } catch {
         /* ignore preview errors */
       } finally {
         setBusyPreview(undefined);
       }
     },
-    [mx],
+    [mx, playingKey, stopPlayback],
   );
 
   const handleFiles = useCallback(
@@ -112,6 +195,8 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
             throw new Error(`"${file.name}" is too large (max 1 MB).`);
           }
           // eslint-disable-next-line no-await-in-loop
+          const durationMs = await getAudioDurationMs(file);
+          // eslint-disable-next-line no-await-in-loop
           const res = await mx.uploadContent(file, { type: file.type || 'audio/mpeg' });
           const mxc = res.content_uri;
           if (!mxc) throw new Error('Upload failed.');
@@ -126,7 +211,7 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
               body: name,
               emoji: '',
               volume: 100,
-              info: { mimetype: file.type || undefined, size: file.size },
+              info: { mimetype: file.type || undefined, size: file.size, duration: durationMs },
             },
           ]);
         }
@@ -182,6 +267,9 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
         setDraft(key, patch, base);
       }
     };
+    const isPlaying = playingKey === key;
+    const clipSeconds =
+      durations.get(key) ?? (base.info?.duration != null ? base.info.duration / 1000 : undefined);
     return (
       <Box
         key={key}
@@ -197,12 +285,16 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
         <IconButton
           size="300"
           radii="300"
-          variant="Secondary"
+          variant={isPlaying ? 'Primary' : 'Secondary'}
           disabled={busyPreview === key}
           onClick={() => preview(key, base.url, rowVolume)}
-          aria-label={`Preview ${rowBody}`}
+          aria-label={isPlaying ? `Stop ${rowBody}` : `Preview ${rowBody}`}
         >
-          {busyPreview === key ? <Spinner size="100" /> : <Icon size="100" src={Icons.Play} />}
+          {busyPreview === key ? (
+            <Spinner size="100" />
+          ) : (
+            <Icon size="100" src={isPlaying ? Icons.Pause : Icons.Play} filled={isPlaying} />
+          )}
         </IconButton>
         <IconButton
           size="300"
@@ -227,7 +319,24 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
             aria-label="Clip name"
           />
         </Box>
-        <Box alignItems="Center" gap="100" shrink="No" style={{ width: toRem(120) }}>
+        <Box
+          alignItems="Center"
+          justifyContent="End"
+          gap="100"
+          shrink="No"
+          style={{ width: toRem(52) }}
+        >
+          {isPlaying ? (
+            <PlayingBars />
+          ) : (
+            clipSeconds !== undefined && (
+              <Text size="T200" priority="300" style={{ whiteSpace: 'nowrap' }}>
+                {formatClipSeconds(clipSeconds)}
+              </Text>
+            )
+          )}
+        </Box>
+        <Box alignItems="Center" gap="100" shrink="No" style={{ width: toRem(148) }}>
           <Icon size="50" src={Icons.VolumeHigh} />
           <input
             type="range"
@@ -237,9 +346,12 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
             defaultValue={rowVolume}
             disabled={!canEdit || markedDeleted}
             onChange={(e) => commit({ volume: parseInt(e.target.value, 10) })}
-            style={{ flexGrow: 1 }}
+            style={{ flexGrow: 1, minWidth: 0 }}
             aria-label="Clip volume"
           />
+          <Text size="T200" priority="300" style={{ width: toRem(30), textAlign: 'right' }}>
+            {rowVolume}%
+          </Text>
         </Box>
         {canEdit && !isUpload && (
           <IconButton
@@ -308,7 +420,13 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
         {existing.map((c) =>
           renderRow(
             c.shortcode,
-            { url: c.url, body: c.body ?? c.shortcode, emoji: c.emoji ?? '', volume: c.volume },
+            {
+              url: c.url,
+              body: c.body ?? c.shortcode,
+              emoji: c.emoji ?? '',
+              volume: c.volume,
+              info: c.info,
+            },
             false,
             deleted.has(c.shortcode),
           ),

src/app/features/call/CallSoundboard.tsx

@@ -196,7 +196,8 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
                                   aria-label={`Play ${clip.name}`}
                                   style={{
                                     width: toRem(76),
-                                    height: toRem(76),
+                                    minHeight: toRem(76),
+                                    height: 'auto',
                                     padding: config.space.S100,
                                     borderRadius: config.radii.R400,
                                     border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
@@ -215,7 +216,19 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
                                       clip.emoji || '🔊'
                                     )}
                                   </Text>
-                                  <Text size="T200" truncate style={{ maxWidth: '100%' }}>
+                                  <Text
+                                    size="T200"
+                                    style={{
+                                      maxWidth: '100%',
+                                      textAlign: 'center',
+                                      wordBreak: 'break-word',
+                                      lineHeight: 1.15,
+                                      display: '-webkit-box',
+                                      WebkitLineClamp: 3,
+                                      WebkitBoxOrient: 'vertical',
+                                      overflow: 'hidden',
+                                    }}
+                                  >
                                     {clip.name}
                                   </Text>
                                 </Box>

src/app/features/settings/devices/LocalBackup.tsx

@@ -1,6 +1,6 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
 import { Box, Button, color, Icon, Icons, Spinner, Text, toRem } from 'folds';
-import FileSaver from 'file-saver';
+import { useSaveFile } from '../../../hooks/useSaveFile';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCardStyle } from '../styles.css';
@@ -15,6 +15,7 @@ import { useFilePicker } from '../../../hooks/useFilePicker';
 function ExportKeys() {
   const mx = useMatrixClient();
   const alive = useAlive();
+  const saveFile = useSaveFile();
 
   const [exportState, exportKeys] = useAsyncCallback<void, Error, [string]>(
     useCallback(
@@ -28,9 +29,9 @@ function ExportKeys() {
         const blob = new Blob([encKeys], {
           type: 'text/plain;charset=us-ascii',
         });
-        FileSaver.saveAs(blob, 'lotus-keys.txt');
+        saveFile(blob, 'lotus-keys.txt');
       },
-      [mx],
+      [mx, saveFile],
     ),
   );
 

src/app/features/toast/LotusToastContainer.tsx

@@ -171,7 +171,11 @@ function ToastCard({ toast }: ToastCardProps) {
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') handleCardClick();
       }}
-      aria-label={`Notification from ${toast.displayName} in ${toast.roomName}`}
+      aria-label={
+        toast.roomName
+          ? `Notification from ${toast.displayName} in ${toast.roomName}`
+          : `${toast.displayName}: ${toast.body}`
+      }
     >
       <span style={{ position: 'absolute', top: config.space.S100, right: config.space.S100 }}>
         <IconButton
@@ -187,7 +191,11 @@ function ToastCard({ toast }: ToastCardProps) {
         </IconButton>
       </span>
       <div style={rowStyle}>
-        {toast.avatarUrl ? (
+        {toast.iconSrc ? (
+          <div style={initialsStyle} aria-hidden="true">
+            <Icon size="100" src={toast.iconSrc} />
+          </div>
+        ) : toast.avatarUrl ? (
           <img src={toast.avatarUrl} alt="" style={avatarStyle} aria-hidden="true" />
         ) : (
           <div style={initialsStyle} aria-hidden="true">
@@ -197,7 +205,7 @@ function ToastCard({ toast }: ToastCardProps) {
         <span style={nameStyle}>{toast.displayName}</span>
       </div>
       <div style={bodyStyle}>{toast.body}</div>
-      <div style={roomNameStyle}>{toast.roomName}</div>
+      {toast.roomName && <div style={roomNameStyle}>{toast.roomName}</div>}
     </div>
   );
 }

src/app/hooks/useSaveFile.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useSetAtom } from 'jotai';
+import { Icons } from 'folds';
+import FileSaver from 'file-saver';
+import { createDownloadToast, toastQueueAtom } from '../state/toast';
+
+/**
+ * Save a blob/URL to disk AND surface a "Downloaded <filename>" toast.
+ *
+ * The desktop (Tauri) app has no native download UI, so `FileSaver.saveAs` saved
+ * files silently — users re-clicked because nothing confirmed success. This gives
+ * uniform, visible feedback across web + desktop for every download call site.
+ */
+export const useSaveFile = () => {
+  const setToast = useSetAtom(toastQueueAtom);
+
+  return useCallback(
+    (data: Blob | string, filename: string) => {
+      FileSaver.saveAs(data, filename);
+      setToast(createDownloadToast(filename, Icons.Check));
+    },
+    [setToast],
+  );
+};

src/app/state/toast.test.ts

@@ -1,7 +1,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { createStore } from 'jotai';
-import { toastQueueAtom, dismissToastAtom, ToastNotif } from './toast';
+import { toastQueueAtom, dismissToastAtom, ToastNotif, createDownloadToast } from './toast';
 
 // The queue lives in an unexported baseAtom; we drive the two write-only setters
 // (toastQueueAtom append + null no-op guard, dismissToastAtom remove-by-id)
@@ -85,3 +85,15 @@ test('dismissToastAtom for an unknown id is a no-op', () => {
     ['a'],
   );
 });
+
+test('createDownloadToast: filename in body, no room navigation, unique ids', () => {
+  const a = createDownloadToast('photo.jpg');
+  assert.equal(a.displayName, 'Downloaded');
+  assert.equal(a.body, 'photo.jpg');
+  // roomId empty + an onClick present → clicking dismisses without navigating to a room.
+  assert.equal(a.roomId, '');
+  assert.equal(a.roomName, '');
+  assert.equal(typeof a.onClick, 'function');
+  const b = createDownloadToast('photo.jpg');
+  assert.notEqual(a.id, b.id);
+});

src/app/state/toast.ts

@@ -1,8 +1,10 @@
 import { atom } from 'jotai';
+import type { IconSrc } from 'folds';
 
 export type ToastNotif = {
   id: string;
   avatarUrl?: string;
+  iconSrc?: IconSrc; // folds Icon src for a "system" toast (shown instead of an avatar/initials)
   displayName: string;
   body: string;
   roomName: string;
@@ -12,6 +14,19 @@ export type ToastNotif = {
   sticky?: boolean; // when true, does not auto-dismiss — use for action toasts that require a click
 };
 
+// Build a "download complete" system toast. Kept folds-free here (the icon src is
+// passed in) so this stays a pure, testable builder. roomId is empty + onClick is
+// set so a click only dismisses (never navigates to a room).
+export const createDownloadToast = (filename: string, iconSrc?: IconSrc): ToastNotif => ({
+  id: `download-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+  displayName: 'Downloaded',
+  body: filename,
+  roomName: '',
+  roomId: '',
+  iconSrc,
+  onClick: () => undefined,
+});
+
 const baseAtom = atom<ToastNotif[]>([]);
 
 // Write-only setter used in ClientNonUIFeatures

src/app/utils/soundboardClips.ts

@@ -53,3 +53,20 @@ export const playClipLocally = (
     return undefined;
   }
 };
+
+/** Read an audio file's duration in milliseconds from its metadata (no playback). */
+export const getAudioDurationMs = (file: Blob): Promise<number | undefined> =>
+  new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const audio = new Audio();
+    audio.preload = 'metadata';
+    const done = (ms: number | undefined) => {
+      URL.revokeObjectURL(url);
+      resolve(ms);
+    };
+    audio.addEventListener('loadedmetadata', () =>
+      done(Number.isFinite(audio.duration) ? Math.round(audio.duration * 1000) : undefined),
+    );
+    audio.addEventListener('error', () => done(undefined));
+    audio.src = url;
+  });