From 10f0093f8ed614fabc76e658d795bdfd77790e50 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 30 May 2026 17:48:49 -0400
Subject: [PATCH] feat(D3): apply terminal theme to voice message recorder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/components/VoiceMessageRecorder.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/components/VoiceMessageRecorder.tsx b/src/app/components/VoiceMessageRecorder.tsx
index c8de02d1e..77f40fe87 100644
--- a/src/app/components/VoiceMessageRecorder.tsx
+++ b/src/app/components/VoiceMessageRecorder.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 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';
 
@@ -31,6 +33,7 @@ function normalizeWaveform(samples: number[]): number[] {
 const WAVEFORM_BARS = 40;
 
 export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
   const [state, setState] = useState<RecorderState>('idle');
   const [durationMs, setDurationMs] = useState(0);
   const [waveformBars, setWaveformBars] = useState<number[]>(Array(WAVEFORM_BARS).fill(0));
@@ -200,12 +203,21 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             width: toRem(8),
             height: toRem(8),
             borderRadius: '50%',
-            background: 'var(--tc-danger-normal)',
+            background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)',
             flexShrink: 0,
             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)}
         </Text>
         <Box
@@ -222,7 +234,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
                 width: toRem(2),
                 height: toRem(2 + (h / barMax) * 16),
                 borderRadius: toRem(1),
-                background: 'var(--tc-primary-normal)',
+                background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)',
                 flexShrink: 0,
               }}
             />