feat(client): Twitter-style social feed UI (Phase C of v2.0.0)
Ships the client side of the v2.0.0 feed feature. Folds client-app/
into the monorepo (was previously .gitignored as "tracked separately"
but no separate repo ever existed — for v2.0.0 the client is
first-class).
Feed screens
app/(app)/feed.tsx — Feed tab
- Three-way tab strip: Подписки / Для вас / В тренде backed by
/feed/timeline, /feed/foryou, /feed/trending respectively
- Default landing tab is "Для вас" — surfaces discovery without
requiring the user to follow anyone first
- FlatList with pull-to-refresh + viewability-driven view counter
bump (posts visible ≥ 60% for ≥ 1s trigger POST /feed/post/…/view)
- Floating blue compose button → /compose
- Per-post liked_by_me fetched in batches of 6 after list load
app/(app)/compose.tsx — post composer modal
- Fullscreen, Twitter-like header (✕ left, Опубликовать right)
- Auto-focused multiline TextInput, 4000 char cap
- Hashtag preview chips that auto-update as you type
- expo-image-picker + expo-image-manipulator pipeline: resize to
1080px max-dim, JPEG Q=50 (client-side first-pass compression
before the mandatory server-side scrub)
- Live fee estimate + balance guard with a confirmation modal
("Опубликовать пост? Цена: 0.00X T · Размер: N KB")
- Exif: false passed to ImagePicker as an extra privacy layer
app/(app)/feed/[id].tsx — post detail
- Full PostCard rendering + detailed info panel (views, likes,
size, fee, hosting relay, hashtags as tappable chips)
- Triggers bumpView on mount
- 410 (on-chain soft-delete) routes back to the feed
app/(app)/feed/tag/[tag].tsx — hashtag feed
app/(app)/profile/[address].tsx — rebuilt
- Twitter-ish profile: avatar, name, address short-form, post count
- Posts | Инфо tab strip
- Follow / Unfollow button for non-self profiles (optimistic UI)
- Edit button on self profile → settings
- Secondary actions (chat, copy address) when viewing a known contact
Supporting library
lib/feed.ts — HTTP wrappers + tx builders for every /feed/* endpoint:
- publishPost (POST /feed/publish, signed)
- publishAndCommit (publish → on-chain CREATE_POST)
- fetchPost / fetchStats / bumpView
- fetchAuthorPosts / fetchTimeline / fetchForYou / fetchTrending /
fetchHashtag
- buildCreatePostTx / buildDeletePostTx
- buildFollowTx / buildUnfollowTx
- buildLikePostTx / buildUnlikePostTx
- likePost / unlikePost / followUser / unfollowUser / deletePost
(high-level helpers that bundle build + submitTx)
- formatFee, formatRelativeTime, formatCount — Twitter-like display
helpers
components/feed/PostCard.tsx — core card component
- Memoised for performance (N-row re-render on every like elsewhere
would cost a lot otherwise)
- Optimistic like toggle with heart-bounce spring animation
- Hashtag highlighting in body text (tappable → hashtag feed)
- Long-press context menu (Delete, owner-only)
- Views / likes / share-link / reply icons in footer row
Navigation cleanup
- NavBar: removed the SOON pill on the Feed tab (it's shipped now)
- (app)/_layout: hide NavBar on /compose and /feed/* sub-routes
- AnimatedSlot: treat /feed/<id>, /feed/tag/<t>, /compose as
sub-routes so back-swipe-right closes them
Channel removal (client side)
- lib/types.ts: ContactKind stripped to 'direct' | 'group'; legacy
'channel' flag removed. `kind` field kept for backward compat with
existing AsyncStorage records.
- lib/devSeed.ts: dropped the 5 channel seed contacts.
- components/ChatTile.tsx: removed channel kindIcon branch.
Dependencies
- expo-image-manipulator added for client-side image compression.
- expo-file-system/legacy used for readAsStringAsync (SDK 54 moved
that API to the legacy sub-path; the new streaming API isn't yet
stable).
Type check
- npx tsc --noEmit — clean, 0 errors.
Next (not in this commit)
- Direct attachment-bytes endpoint on the server so post-detail can
actually render the image (currently shows placeholder with URL)
- Cross-relay body fetch via /api/relays + hosting_relay pubkey
- Mentions (@username) with notifications
- Full-text search
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
vsecoder
374
client-app/components/chat/MessageBubble.tsx
Normal file
374
client-app/components/chat/MessageBubble.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
/**
|
||||
* MessageBubble — рендер одного сообщения с gesture interactions.
|
||||
*
|
||||
* Гестуры — разведены по двум примитивам во избежание конфликта со
|
||||
* скроллом FlatList'а:
|
||||
*
|
||||
* 1. Swipe-left (reply): PanResponder на Animated.View обёртке
|
||||
* bubble'а. `onMoveShouldSetPanResponder` клеймит responder ТОЛЬКО
|
||||
* когда пользователь сдвинул палец > 6px влево и горизонталь
|
||||
* преобладает над вертикалью. Для вертикального скролла
|
||||
* `onMoveShouldSet` возвращает false — FlatList получает gesture.
|
||||
* Touchdown ничего не клеймит (onStartShouldSetPanResponder
|
||||
* отсутствует).
|
||||
*
|
||||
* 2. Long-press / tap: через View.onTouchStart/End. Primitive touch
|
||||
* events bubble'ятся независимо от responder'а. Long-press запускаем
|
||||
* timer'ом на 550ms, cancel при `onTouchMove` с достаточной
|
||||
* амплитудой. Tap — короткое касание без move в selection mode.
|
||||
*
|
||||
* 3. `selectionMode=true` — PanResponder disabled (в selection режиме
|
||||
* свайпы не работают).
|
||||
*
|
||||
* 4. ReplyQuote — отдельный Pressable над bubble-текстом; tap прыгает
|
||||
* к оригиналу через onJumpToReply.
|
||||
*
|
||||
* 5. highlight prop — bubble-row мерцает accent-blue фоном, использует
|
||||
* Animated.Value; управляется из ChatScreen после scrollToIndex.
|
||||
*/
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import {
|
||||
View, Text, Pressable, ViewStyle, Animated, PanResponder,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
import type { Message } from '@/lib/types';
|
||||
import { relTime } from '@/lib/dates';
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { AttachmentPreview } from '@/components/chat/AttachmentPreview';
|
||||
import { ReplyQuote } from '@/components/chat/ReplyQuote';
|
||||
|
||||
export const PEER_AVATAR_SLOT = 34;
|
||||
const SWIPE_THRESHOLD = 60;
|
||||
const LONG_PRESS_MS = 550;
|
||||
const TAP_MAX_MOVEMENT = 8;
|
||||
const TAP_MAX_ELAPSED = 300;
|
||||
|
||||
export interface MessageBubbleProps {
|
||||
msg: Message;
|
||||
peerName: string;
|
||||
peerAddress?: string;
|
||||
withSenderMeta?: boolean;
|
||||
showName: boolean;
|
||||
showAvatar: boolean;
|
||||
|
||||
onReply?: (m: Message) => void;
|
||||
onLongPress?: (m: Message) => void;
|
||||
onTap?: (m: Message) => void;
|
||||
onOpenProfile?: () => void;
|
||||
onJumpToReply?: (originalId: string) => void;
|
||||
|
||||
selectionMode?: boolean;
|
||||
selected?: boolean;
|
||||
/** Mgnt-управляемый highlight: row мерцает accent-фоном ~1-2 секунды. */
|
||||
highlighted?: boolean;
|
||||
}
|
||||
|
||||
// ─── Bubble styles ──────────────────────────────────────────────────
|
||||
|
||||
const bubbleBase: ViewStyle = {
|
||||
borderRadius: 18,
|
||||
paddingHorizontal: 14,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 6,
|
||||
};
|
||||
|
||||
const peerBubble: ViewStyle = {
|
||||
...bubbleBase,
|
||||
backgroundColor: '#1a1a1a',
|
||||
borderBottomLeftRadius: 6,
|
||||
};
|
||||
|
||||
const ownBubble: ViewStyle = {
|
||||
...bubbleBase,
|
||||
backgroundColor: '#1d9bf0',
|
||||
borderBottomRightRadius: 6,
|
||||
};
|
||||
|
||||
const bubbleText = { color: '#ffffff', fontSize: 15, lineHeight: 20 } as const;
|
||||
|
||||
// ─── Main ───────────────────────────────────────────────────────────
|
||||
|
||||
export function MessageBubble(props: MessageBubbleProps) {
|
||||
if (props.msg.mine) return <RowShell {...props} variant="own" />;
|
||||
if (!props.withSenderMeta) return <RowShell {...props} variant="peer-compact" />;
|
||||
return <RowShell {...props} variant="group-peer" />;
|
||||
}
|
||||
|
||||
type Variant = 'own' | 'peer-compact' | 'group-peer';
|
||||
|
||||
function RowShell({
|
||||
msg, peerName, peerAddress, showName, showAvatar,
|
||||
onReply, onLongPress, onTap, onOpenProfile, onJumpToReply,
|
||||
selectionMode, selected, highlighted, variant,
|
||||
}: MessageBubbleProps & { variant: Variant }) {
|
||||
const translateX = useRef(new Animated.Value(0)).current;
|
||||
const startTs = useRef(0);
|
||||
const moved = useRef(false);
|
||||
const lpTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const clearLp = () => {
|
||||
if (lpTimer.current) { clearTimeout(lpTimer.current); lpTimer.current = null; }
|
||||
};
|
||||
|
||||
// Touch start — запускаем long-press timer (НЕ клеймим responder).
|
||||
const onTouchStart = () => {
|
||||
startTs.current = Date.now();
|
||||
moved.current = false;
|
||||
clearLp();
|
||||
if (onLongPress) {
|
||||
lpTimer.current = setTimeout(() => {
|
||||
if (!moved.current) onLongPress(msg);
|
||||
lpTimer.current = null;
|
||||
}, LONG_PRESS_MS);
|
||||
}
|
||||
};
|
||||
|
||||
const onTouchMove = (e: { nativeEvent: { pageX: number; pageY: number } }) => {
|
||||
// Если пользователь двигает палец — отменяем long-press timer.
|
||||
// Малые движения (< TAP_MAX_MOVEMENT) игнорируем — устраняют
|
||||
// fale-cancel от дрожания пальца.
|
||||
// Здесь нет точного dx/dy от gesture-системы, используем primitive
|
||||
// touch coords отсчитываемые по абсолютным координатам. Проще —
|
||||
// всегда отменяем на first move (PanResponder ниже отнимет
|
||||
// responder если leftward).
|
||||
moved.current = true;
|
||||
clearLp();
|
||||
};
|
||||
|
||||
const onTouchEnd = () => {
|
||||
const elapsed = Date.now() - startTs.current;
|
||||
clearLp();
|
||||
// Короткий tap без движения → в selection mode toggle.
|
||||
if (!moved.current && elapsed < TAP_MAX_ELAPSED && selectionMode) {
|
||||
onTap?.(msg);
|
||||
}
|
||||
};
|
||||
|
||||
// Swipe-to-reply: PanResponder клеймит ТОЛЬКО leftward-dominant move.
|
||||
// Для vertical scroll / rightward swipe / start-touch возвращает false,
|
||||
// FlatList / AnimatedSlot получают gesture.
|
||||
const panResponder = useRef(
|
||||
PanResponder.create({
|
||||
onMoveShouldSetPanResponder: (_e, g) => {
|
||||
if (selectionMode) return false;
|
||||
// Leftward > 6px и горизонталь преобладает.
|
||||
return g.dx < -6 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5;
|
||||
},
|
||||
onPanResponderGrant: () => {
|
||||
// Как только мы заклеймили gesture, отменяем long-press
|
||||
// (пользователь явно свайпает, не удерживает).
|
||||
clearLp();
|
||||
moved.current = true;
|
||||
},
|
||||
onPanResponderMove: (_e, g) => {
|
||||
translateX.setValue(Math.min(0, g.dx));
|
||||
},
|
||||
onPanResponderRelease: (_e, g) => {
|
||||
if (g.dx <= -SWIPE_THRESHOLD) onReply?.(msg);
|
||||
Animated.spring(translateX, {
|
||||
toValue: 0, friction: 6, tension: 80, useNativeDriver: true,
|
||||
}).start();
|
||||
},
|
||||
onPanResponderTerminate: () => {
|
||||
Animated.spring(translateX, {
|
||||
toValue: 0, friction: 6, tension: 80, useNativeDriver: true,
|
||||
}).start();
|
||||
},
|
||||
}),
|
||||
).current;
|
||||
|
||||
// Highlight fade: при переключении highlighted=true крутим короткую
|
||||
// анимацию "flash + fade out" через Animated.Value (0→1→0 за ~1.8s).
|
||||
const highlightAnim = useRef(new Animated.Value(0)).current;
|
||||
useEffect(() => {
|
||||
if (!highlighted) return;
|
||||
highlightAnim.setValue(0);
|
||||
Animated.sequence([
|
||||
Animated.timing(highlightAnim, { toValue: 1, duration: 150, useNativeDriver: false }),
|
||||
Animated.delay(1400),
|
||||
Animated.timing(highlightAnim, { toValue: 0, duration: 450, useNativeDriver: false }),
|
||||
]).start();
|
||||
}, [highlighted, highlightAnim]);
|
||||
|
||||
const highlightBg = highlightAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: ['rgba(29,155,240,0)', 'rgba(29,155,240,0.22)'],
|
||||
});
|
||||
|
||||
const isMine = variant === 'own';
|
||||
const hasAttachment = !!msg.attachment;
|
||||
const hasReply = !!msg.replyTo;
|
||||
const attachmentOnly = hasAttachment && !msg.text.trim();
|
||||
const bubbleStyle = attachmentOnly
|
||||
? { ...(isMine ? ownBubble : peerBubble), padding: 4 }
|
||||
: (isMine ? ownBubble : peerBubble);
|
||||
|
||||
const bubbleNode = (
|
||||
<Animated.View
|
||||
{...panResponder.panHandlers}
|
||||
style={{
|
||||
transform: [{ translateX }],
|
||||
maxWidth: hasAttachment ? '80%' : '85%',
|
||||
minWidth: hasAttachment || hasReply ? 220 : undefined,
|
||||
}}
|
||||
>
|
||||
<View style={bubbleStyle}>
|
||||
{msg.replyTo && (
|
||||
<ReplyQuote
|
||||
author={msg.replyTo.author}
|
||||
preview={msg.replyTo.text}
|
||||
own={isMine}
|
||||
onJump={() => onJumpToReply?.(msg.replyTo!.id)}
|
||||
/>
|
||||
)}
|
||||
{msg.attachment && (
|
||||
<AttachmentPreview attachment={msg.attachment} own={isMine} />
|
||||
)}
|
||||
{msg.text.trim() ? (
|
||||
<Text style={bubbleText}>{msg.text}</Text>
|
||||
) : null}
|
||||
<BubbleFooter
|
||||
edited={!!msg.edited}
|
||||
time={relTime(msg.timestamp)}
|
||||
own={isMine}
|
||||
read={!!msg.read}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
|
||||
const contentRow =
|
||||
variant === 'own' ? (
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
|
||||
{bubbleNode}
|
||||
</View>
|
||||
) : variant === 'peer-compact' ? (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
|
||||
{bubbleNode}
|
||||
</View>
|
||||
) : (
|
||||
<View>
|
||||
{showName && (
|
||||
<Pressable
|
||||
onPress={onOpenProfile}
|
||||
hitSlop={4}
|
||||
style={{ marginLeft: PEER_AVATAR_SLOT, marginBottom: 3 }}
|
||||
>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12 }} numberOfLines={1}>
|
||||
{peerName}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
|
||||
<View style={{ width: PEER_AVATAR_SLOT, alignItems: 'flex-start' }}>
|
||||
{showAvatar ? (
|
||||
<Pressable onPress={onOpenProfile} hitSlop={4}>
|
||||
<Avatar name={peerName} address={peerAddress} size={26} />
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
{bubbleNode}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
onTouchStart={onTouchStart}
|
||||
onTouchMove={onTouchMove}
|
||||
onTouchEnd={onTouchEnd}
|
||||
onTouchCancel={() => { clearLp(); moved.current = true; }}
|
||||
style={{
|
||||
paddingHorizontal: 8,
|
||||
marginBottom: 6,
|
||||
// Selection & highlight накладываются: highlight flash побеждает
|
||||
// когда анимация > 0, иначе статичный selection-tint.
|
||||
backgroundColor: selected ? 'rgba(29,155,240,0.12)' : highlightBg,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{contentRow}
|
||||
{selectionMode && (
|
||||
<CheckDot
|
||||
selected={!!selected}
|
||||
onPress={() => onTap?.(msg)}
|
||||
/>
|
||||
)}
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Clickable check-dot ────────────────────────────────────────────
|
||||
|
||||
function CheckDot({ selected, onPress }: { selected: boolean; onPress: () => void }) {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
hitSlop={12}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 4,
|
||||
top: 0, bottom: 0,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: selected ? '#1d9bf0' : 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 2,
|
||||
borderColor: selected ? '#1d9bf0' : '#6b6b6b',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{selected && <Ionicons name="checkmark" size={12} color="#ffffff" />}
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Footer ─────────────────────────────────────────────────────────
|
||||
|
||||
interface FooterProps {
|
||||
edited: boolean;
|
||||
time: string;
|
||||
own?: boolean;
|
||||
read?: boolean;
|
||||
}
|
||||
|
||||
function BubbleFooter({ edited, time, own, read }: FooterProps) {
|
||||
const textColor = own ? 'rgba(255,255,255,0.78)' : '#8b8b8b';
|
||||
const dotColor = own ? 'rgba(255,255,255,0.55)' : '#5a5a5a';
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: 2,
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{edited && (
|
||||
<>
|
||||
<Text style={{ color: textColor, fontSize: 11 }}>Edited</Text>
|
||||
<Text style={{ color: dotColor, fontSize: 11 }}>·</Text>
|
||||
</>
|
||||
)}
|
||||
<Text style={{ color: textColor, fontSize: 11 }}>{time}</Text>
|
||||
{own && (
|
||||
<Ionicons
|
||||
name={read ? 'checkmark-circle' : 'checkmark-circle-outline'}
|
||||
size={13}
|
||||
color={read ? '#ffffff' : 'rgba(255,255,255,0.78)'}
|
||||
style={{ marginLeft: 2 }}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user