From 9d9a17955c706331105f7653d677a3ce03003247 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Tue, 2 Jun 2026 02:10:42 +0200
Subject: [PATCH] fix(voice): compact audio bubble + remove emoji from chat
 list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- VoiceNoteBubble: width 72%→60%, paddingVertical 4→2, play button 36→30pt,
  waveform height 32→26pt, gap 8→6, duration font 11→10pt, dot 9→7pt
- Chat list: remove 🎤/📷/📎 emoji prefix from attachment type fallback labels

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/rebreak-native/app/(app)/chat.tsx           |  6 +++---
 .../components/chat/ChatBubble.tsx               | 16 ++++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/rebreak-native/app/(app)/chat.tsx b/apps/rebreak-native/app/(app)/chat.tsx
index df4fdd7..25c2043 100644
--- a/apps/rebreak-native/app/(app)/chat.tsx
+++ b/apps/rebreak-native/app/(app)/chat.tsx
@@ -79,9 +79,9 @@ function DmItem({ conv, onPress }: { conv: DmConversation; onPress: () => void }
             >
               {conv.isOwn ? `${t('chat.you')} ` : ''}
               {conv.lastMessage ||
-                (conv.lastAttachmentType === 'audio' ? `🎤 ${t('chat.voice_message')}` :
-                 conv.lastAttachmentType === 'image' ? `📷 ${t('chat.photo')}` :
-                 `📎 ${t('chat.media_sent')}`)}
+                (conv.lastAttachmentType === 'audio' ? t('chat.voice_message') :
+                 conv.lastAttachmentType === 'image' ? t('chat.photo') :
+                 t('chat.media_sent'))}
             </Text>
             {hasUnread && (
               <View style={styles.unreadBadge}>
diff --git a/apps/rebreak-native/components/chat/ChatBubble.tsx b/apps/rebreak-native/components/chat/ChatBubble.tsx
index 622576b..fd5a15a 100644
--- a/apps/rebreak-native/components/chat/ChatBubble.tsx
+++ b/apps/rebreak-native/components/chat/ChatBubble.tsx
@@ -95,7 +95,7 @@ function VoiceNoteBubble({ url, duration, isOwn }: { url: string; duration: stri
   }
 
   const playedCount = Math.floor(progress * barHeights.length);
-  const DOT_SIZE = 9;
+  const DOT_SIZE = 7;
   const dotLeft = waveWidth > 0 ? Math.max(0, progress * waveWidth - DOT_SIZE / 2) : 0;
 
   const playBtnBg = isOwn ? 'rgba(0,0,0,0.10)' : 'rgba(0,0,0,0.06)';
@@ -107,19 +107,19 @@ function VoiceNoteBubble({ url, duration, isOwn }: { url: string; duration: stri
   const durationColor = isOwn ? bubbleColors.ownText + '99' : colors.textMuted;
   const displayDuration = isPlaying ? fmtSec(currentTime) : (duration || fmtSec(totalSeconds));
 
-  const bubbleW = Math.floor(SCREEN_W * 0.72);
+  const bubbleW = Math.floor(SCREEN_W * 0.60);
 
   return (
-    <View style={{ width: bubbleW, paddingVertical: 4, paddingHorizontal: 0 }}>
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+    <View style={{ width: bubbleW, paddingVertical: 2, paddingHorizontal: 0 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
         <TouchableOpacity onPress={togglePlay} activeOpacity={0.7} hitSlop={8}>
-          <View style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: playBtnBg, alignItems: 'center', justifyContent: 'center' }}>
-            <Ionicons name={isPlaying ? 'pause' : 'play'} size={16} color={playIconColor} style={{ marginLeft: isPlaying ? 0 : 2 }} />
+          <View style={{ width: 30, height: 30, borderRadius: 15, backgroundColor: playBtnBg, alignItems: 'center', justifyContent: 'center' }}>
+            <Ionicons name={isPlaying ? 'pause' : 'play'} size={13} color={playIconColor} style={{ marginLeft: isPlaying ? 0 : 1 }} />
           </View>
         </TouchableOpacity>
 
         <View
-          style={{ flex: 1, height: 32, position: 'relative' }}
+          style={{ flex: 1, height: 26, position: 'relative' }}
           onLayout={(e) => setWaveWidth(e.nativeEvent.layout.width)}
         >
           <View style={{ flexDirection: 'row', alignItems: 'center', height: '100%', justifyContent: 'space-between' }}>
@@ -146,7 +146,7 @@ function VoiceNoteBubble({ url, duration, isOwn }: { url: string; duration: stri
         </View>
       </View>
 
-      <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: durationColor, marginTop: 3, marginLeft: 44, fontVariant: ['tabular-nums'] }}>
+      <Text style={{ fontSize: 10, fontFamily: 'Nunito_600SemiBold', color: durationColor, marginTop: 2, marginLeft: 36, fontVariant: ['tabular-nums'] }}>
         {displayDuration}
       </Text>
     </View>