chahine/rebreak-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(voice): compact audio bubble + remove emoji from chat list

Browse Source 
- 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>
This commit is contained in:
chahinebrini 2026-06-02 02:10:42 +02:00
parent 2e49aad386
commit 9d9a17955c
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/rebreak-native/app/(app)/chat.tsx
View File

@ -79,9 +79,9 @@ function DmItem({ conv, onPress }: { conv: DmConversation; onPress: () => void }
> >
{conv.isOwn ? `${t('chat.you')} ` : ''} {conv.isOwn ? `${t('chat.you')} ` : ''}
{conv.lastMessage || {conv.lastMessage ||
(conv.lastAttachmentType === 'audio' ? `🎤 ${t('chat.voice_message')}` : (conv.lastAttachmentType === 'audio' ? t('chat.voice_message') :
conv.lastAttachmentType === 'image' ? `📷 ${t('chat.photo')}` : conv.lastAttachmentType === 'image' ? t('chat.photo') :
`📎 ${t('chat.media_sent')}`)} t('chat.media_sent'))}
</Text> </Text>
{hasUnread && ( {hasUnread && (
<View style={styles.unreadBadge}> <View style={styles.unreadBadge}>

16
apps/rebreak-native/components/chat/ChatBubble.tsx
View File

@ -95,7 +95,7 @@ function VoiceNoteBubble({ url, duration, isOwn }: { url: string; duration: stri
} }
const playedCount = Math.floor(progress * barHeights.length); 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 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)'; 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 durationColor = isOwn ? bubbleColors.ownText + '99' : colors.textMuted;
const displayDuration = isPlaying ? fmtSec(currentTime) : (duration || fmtSec(totalSeconds)); 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 ( return (
<View style={{ width: bubbleW, paddingVertical: 4, paddingHorizontal: 0 }}> <View style={{ width: bubbleW, paddingVertical: 2, paddingHorizontal: 0 }}>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
<TouchableOpacity onPress={togglePlay} activeOpacity={0.7} hitSlop={8}> <TouchableOpacity onPress={togglePlay} activeOpacity={0.7} hitSlop={8}>
<View style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: playBtnBg, alignItems: 'center', justifyContent: 'center' }}> <View style={{ width: 30, height: 30, borderRadius: 15, backgroundColor: playBtnBg, alignItems: 'center', justifyContent: 'center' }}>
<Ionicons name={isPlaying ? 'pause' : 'play'} size={16} color={playIconColor} style={{ marginLeft: isPlaying ? 0 : 2 }} /> <Ionicons name={isPlaying ? 'pause' : 'play'} size={13} color={playIconColor} style={{ marginLeft: isPlaying ? 0 : 1 }} />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View <View
style={{ flex: 1, height: 32, position: 'relative' }} style={{ flex: 1, height: 26, position: 'relative' }}
onLayout={(e) => setWaveWidth(e.nativeEvent.layout.width)} onLayout={(e) => setWaveWidth(e.nativeEvent.layout.width)}
> >
<View style={{ flexDirection: 'row', alignItems: 'center', height: '100%', justifyContent: 'space-between' }}> <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>
</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} {displayDuration}
</Text> </Text>
</View> </View>