diff --git a/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx b/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx index f27d2359639ad9aba499902438986ab139d13758..ab5476aa4ce22b4105c1a3119105283812cc73e1 100644 --- a/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx +++ b/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx @@ -5,6 +5,7 @@ import { Linking, Platform, Pressable, + Text as SystemText, View, type LayoutChangeEvent, } from "react-native"; @@ -245,6 +246,25 @@ const VoiceWaveform = memo(function VoiceWaveform(props: { ); }); +/** + * Renders the recording time in the system font: DM Sans has no tabular + * figures, so `tabular-nums` alone would still let the width jitter. + */ +export function DictationElapsedTime(props: { + readonly seconds: number; + readonly className?: string; +}) { + return ( + + {Math.floor(props.seconds / 60)}:{String(props.seconds % 60).padStart(2, "0")} + + ); +} + function VoiceActionButton(props: { readonly accessibilityLabel: string; readonly disabled?: boolean; @@ -322,7 +342,6 @@ export function ComposerDictationStatus(props: { if (!props.presentation.statusLabel) return null; const isError = props.presentation.statusKind === "error"; - const elapsedLabel = `${Math.floor(props.elapsedSeconds / 60)}:${String(props.elapsedSeconds % 60).padStart(2, "0")}`; return ( {isError ? ( @@ -357,13 +376,10 @@ export function ComposerDictationStatus(props: { style={waveformStyle} > - - {elapsedLabel} - + diff --git a/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx b/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx index 4159041e285380211aa46cdf7c7bb4faf8b3449b..e08afc06a15f2c51f92417053f9c4031acdd6d14 100644 --- a/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx +++ b/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx @@ -24,7 +24,7 @@ import { AppText as Text } from "../../components/AppText"; import { SymbolView } from "../../components/AppSymbol"; import { useAndroidControlSizing } from "../../components/useAndroidControlSizing"; import { cn } from "../../lib/cn"; -import { CompactVoiceWaveform } from "./ComposerDictationControl"; +import { CompactVoiceWaveform, DictationElapsedTime } from "./ComposerDictationControl"; import { useGlobalVoiceInput } from "./VoiceInputProvider"; import { resolveVoiceComposerPresentation } from "./voiceInputPresentation"; @@ -114,7 +114,6 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void) const isError = phase === "error"; const openSettings = isError && voice.state.errorAction === "settings"; const label = voice.label ?? "Draft"; - const elapsedLabel = `${Math.floor(voice.elapsedSeconds / 60)}:${String(voice.elapsedSeconds % 60).padStart(2, "0")}`; return ( @@ -149,12 +148,10 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void) ) : phase === "recording" ? ( <> - - {elapsedLabel} - + ) : ( @@ -202,12 +199,10 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void) {phase === "recording" ? ( <> - - {elapsedLabel} - +