feat(D3): apply terminal theme to voice message recorder
CI / Build & Quality Checks (push) Successful in 10m22s
CI / Build & Quality Checks (push) Successful in 10m22s
When lotusTerminal is enabled, the recording dot turns orange (#FF6B00), the duration timer uses JetBrains Mono in green (#00FF88), and the waveform bars match green — consistent with the PTT badge and GIF picker terminal aesthetics. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,7 @@
|
|||||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import { Box, Icon, IconButton, Icons, Text, config, toRem } from 'folds';
|
import { Box, Icon, IconButton, Icons, Text, config, toRem } from 'folds';
|
||||||
|
import { useSetting } from '../state/hooks/settings';
|
||||||
|
import { settingsAtom } from '../state/settings';
|
||||||
|
|
||||||
type RecorderState = 'idle' | 'recording' | 'preview';
|
type RecorderState = 'idle' | 'recording' | 'preview';
|
||||||
|
|
||||||
@@ -31,6 +33,7 @@ function normalizeWaveform(samples: number[]): number[] {
|
|||||||
const WAVEFORM_BARS = 40;
|
const WAVEFORM_BARS = 40;
|
||||||
|
|
||||||
export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
|
export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
|
||||||
|
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
|
||||||
const [state, setState] = useState<RecorderState>('idle');
|
const [state, setState] = useState<RecorderState>('idle');
|
||||||
const [durationMs, setDurationMs] = useState(0);
|
const [durationMs, setDurationMs] = useState(0);
|
||||||
const [waveformBars, setWaveformBars] = useState<number[]>(Array(WAVEFORM_BARS).fill(0));
|
const [waveformBars, setWaveformBars] = useState<number[]>(Array(WAVEFORM_BARS).fill(0));
|
||||||
@@ -200,12 +203,21 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
|
|||||||
width: toRem(8),
|
width: toRem(8),
|
||||||
height: toRem(8),
|
height: toRem(8),
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
background: 'var(--tc-danger-normal)',
|
background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)',
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
animation: 'pttLivePulse 900ms ease-in-out infinite',
|
animation: 'pttLivePulse 900ms ease-in-out infinite',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Text size="T200" style={{ minWidth: toRem(32), fontVariantNumeric: 'tabular-nums' }}>
|
<Text
|
||||||
|
size="T200"
|
||||||
|
style={{
|
||||||
|
minWidth: toRem(32),
|
||||||
|
fontVariantNumeric: 'tabular-nums',
|
||||||
|
...(lotusTerminal
|
||||||
|
? { fontFamily: 'JetBrains Mono, monospace', color: '#00FF88', fontWeight: 700 }
|
||||||
|
: {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
{formatDuration(durationMs)}
|
{formatDuration(durationMs)}
|
||||||
</Text>
|
</Text>
|
||||||
<Box
|
<Box
|
||||||
@@ -222,7 +234,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
|
|||||||
width: toRem(2),
|
width: toRem(2),
|
||||||
height: toRem(2 + (h / barMax) * 16),
|
height: toRem(2 + (h / barMax) * 16),
|
||||||
borderRadius: toRem(1),
|
borderRadius: toRem(1),
|
||||||
background: 'var(--tc-primary-normal)',
|
background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)',
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user