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
67
client-app/components/AnimatedSlot.tsx
Normal file
67
client-app/components/AnimatedSlot.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* AnimatedSlot — обёртка над `<Slot>`. Исторически тут была slide-
|
||||
* анимация при смене pathname'а + tab-swipe pan. Обе фичи вызывали
|
||||
* баги:
|
||||
* - tab-swipe конфликтовал с vertical FlatList scroll (чаты пропадали
|
||||
* при flick'е)
|
||||
* - translateX застревал на ±width когда анимация прерывалась
|
||||
* re-render-cascade'ом от useGlobalInbox → UI уезжал за экран
|
||||
*
|
||||
* Решение: убрали обе. Навигация между tab'ами — только через NavBar,
|
||||
* переходы — без slide. Sub-route back-swipe остаётся (он не конфликтует
|
||||
* с FlatList'ом, т.к. на chat detail FlatList inverted и смотрит вверх).
|
||||
*/
|
||||
import React, { useMemo } from 'react';
|
||||
import { PanResponder, View } from 'react-native';
|
||||
import { Slot, usePathname, router } from 'expo-router';
|
||||
import { useWindowDimensions } from 'react-native';
|
||||
|
||||
function topSegment(p: string): string {
|
||||
const m = p.match(/^\/[^/]+/);
|
||||
return m ? m[0] : '';
|
||||
}
|
||||
|
||||
/** Это sub-route — внутри какого-либо tab'а, но глубже первого сегмента. */
|
||||
function isSubRoute(path: string): boolean {
|
||||
const seg = topSegment(path);
|
||||
if (seg === '/chats') return path !== '/chats' && path !== '/chats/';
|
||||
if (seg === '/feed') return path !== '/feed' && path !== '/feed/';
|
||||
if (seg === '/profile') return true;
|
||||
if (seg === '/settings') return true;
|
||||
if (seg === '/compose') return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
export function AnimatedSlot() {
|
||||
const pathname = usePathname();
|
||||
const { width } = useWindowDimensions();
|
||||
|
||||
// Pan-gesture только на sub-route'ах: swipe-right → back. На tab'ах
|
||||
// gesture полностью отключён — исключает конфликт с vertical scroll.
|
||||
const panResponder = useMemo(() => {
|
||||
const sub = isSubRoute(pathname);
|
||||
|
||||
return PanResponder.create({
|
||||
onMoveShouldSetPanResponder: (_e, g) => {
|
||||
if (!sub) return false;
|
||||
if (Math.abs(g.dx) < 40) return false;
|
||||
if (Math.abs(g.dy) > 15) return false;
|
||||
if (g.dx <= 0) return false; // только правое направление
|
||||
return Math.abs(g.dx) > Math.abs(g.dy) * 3;
|
||||
},
|
||||
onMoveShouldSetPanResponderCapture: () => false,
|
||||
|
||||
onPanResponderRelease: (_e, g) => {
|
||||
if (!sub) return;
|
||||
if (Math.abs(g.dy) > 30) return;
|
||||
if (g.dx > width * 0.30) router.back();
|
||||
},
|
||||
});
|
||||
}, [pathname, width]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }} {...panResponder.panHandlers}>
|
||||
<Slot />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
76
client-app/components/Avatar.tsx
Normal file
76
client-app/components/Avatar.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* Avatar — круглая заглушка с инициалом, опционально online-пип.
|
||||
* Нет зависимостей от асинхронных источников (картинок) — для messenger-тайла
|
||||
* важнее мгновенный рендер, чем фотография. Если в будущем будут фото,
|
||||
* расширяем здесь.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
export interface AvatarProps {
|
||||
/** Имя / @username — берём первый символ для placeholder. */
|
||||
name?: string;
|
||||
/** Адрес (hex pubkey) — fallback для тех у кого нет имени. */
|
||||
address?: string;
|
||||
/** Общий размер в px. По умолчанию 48 (tile size). */
|
||||
size?: number;
|
||||
/** Цвет пипа справа-снизу. undefined = без пипа. */
|
||||
dotColor?: string;
|
||||
/** Класс для обёртки (position: relative кадр). */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** Простое хэширование имени → один из 6 оттенков серого для разнообразия. */
|
||||
function pickBg(seed: string): string {
|
||||
const shades = ['#1a1a1a', '#222222', '#2a2a2a', '#151515', '#1c1c1c', '#1f1f1f'];
|
||||
let h = 0;
|
||||
for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) & 0xffff;
|
||||
return shades[h % shades.length];
|
||||
}
|
||||
|
||||
export function Avatar({ name, address, size = 48, dotColor, className }: AvatarProps) {
|
||||
const seed = (name ?? address ?? '?').replace(/^@/, '');
|
||||
const initial = seed.charAt(0).toUpperCase() || '?';
|
||||
const bg = pickBg(seed);
|
||||
|
||||
return (
|
||||
<View className={className} style={{ width: size, height: size, position: 'relative' }}>
|
||||
<View
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: size / 2,
|
||||
backgroundColor: bg,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: '#d0d0d0',
|
||||
fontSize: size * 0.4,
|
||||
fontWeight: '600',
|
||||
includeFontPadding: false,
|
||||
}}
|
||||
>
|
||||
{initial}
|
||||
</Text>
|
||||
</View>
|
||||
{dotColor && (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: size * 0.28,
|
||||
height: size * 0.28,
|
||||
borderRadius: size * 0.14,
|
||||
backgroundColor: dotColor,
|
||||
borderWidth: 2,
|
||||
borderColor: '#000',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
174
client-app/components/ChatTile.tsx
Normal file
174
client-app/components/ChatTile.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* ChatTile — одна строка в списке чатов на главной (Messages screen).
|
||||
*
|
||||
* Layout:
|
||||
* [avatar 44] [name (+verified) (+kind-icon)] [time]
|
||||
* [last-msg preview] [unread pill]
|
||||
*
|
||||
* Kind-icon — мегафон для channel, 👥 для group, ничего для direct.
|
||||
* Verified checkmark — если у контакта есть @username.
|
||||
* Online-dot на аватарке — только для direct-чатов с x25519 ключом.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { View, Text, Pressable } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
import type { Contact, Message } from '@/lib/types';
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { formatWhen } from '@/lib/dates';
|
||||
import { useStore } from '@/lib/store';
|
||||
|
||||
function previewText(s: string, max = 50): string {
|
||||
return s.length <= max ? s : s.slice(0, max).trimEnd() + '…';
|
||||
}
|
||||
|
||||
/**
|
||||
* Текстовое превью последнего сообщения. Если у сообщения нет текста
|
||||
* (только вложение) — возвращаем маркер с иконкой названием типа:
|
||||
* "🖼 Photo" / "🎬 Video" / "🎙 Voice" / "📎 File"
|
||||
* Если текст есть — он используется; если есть и то и другое, префикс
|
||||
* добавляется перед текстом.
|
||||
*/
|
||||
function lastPreview(m: Message): string {
|
||||
const emojiByKind = {
|
||||
image: '🖼', video: '🎬', voice: '🎙', file: '📎',
|
||||
} as const;
|
||||
const labelByKind = {
|
||||
image: 'Photo', video: 'Video', voice: 'Voice message', file: 'File',
|
||||
} as const;
|
||||
const text = m.text.trim();
|
||||
if (m.attachment) {
|
||||
const prefix = `${emojiByKind[m.attachment.kind]} ${labelByKind[m.attachment.kind]}`;
|
||||
return text ? `${prefix} ${previewText(text, 40)}` : prefix;
|
||||
}
|
||||
return previewText(text);
|
||||
}
|
||||
|
||||
function shortAddr(a: string, n = 5): string {
|
||||
if (!a) return '—';
|
||||
return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
|
||||
}
|
||||
|
||||
function displayName(c: Contact): string {
|
||||
return c.username ? `@${c.username}` : c.alias ?? shortAddr(c.address);
|
||||
}
|
||||
|
||||
export interface ChatTileProps {
|
||||
contact: Contact;
|
||||
lastMessage: Message | null;
|
||||
onPress: () => void;
|
||||
}
|
||||
|
||||
export function ChatTile({ contact: c, lastMessage, onPress }: ChatTileProps) {
|
||||
const name = displayName(c);
|
||||
const last = lastMessage;
|
||||
|
||||
// Визуальный маркер типа чата.
|
||||
const kindIcon: React.ComponentProps<typeof Ionicons>['name'] | null =
|
||||
c.kind === 'group' ? 'people' : null;
|
||||
|
||||
// Unread берётся из runtime-store'а (инкрементится в useGlobalInbox,
|
||||
// обнуляется при открытии чата). Fallback на c.unread для legacy seed.
|
||||
const storeUnread = useStore(s => s.unreadByContact[c.address] ?? 0);
|
||||
const unreadCount = storeUnread || (c.unread ?? 0);
|
||||
const unread = unreadCount > 0 ? unreadCount : null;
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => ({
|
||||
backgroundColor: pressed ? '#0a0a0a' : 'transparent',
|
||||
})}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
name={name}
|
||||
address={c.address}
|
||||
size={44}
|
||||
dotColor={c.x25519Pub && (!c.kind || c.kind === 'direct') ? '#3ba55d' : undefined}
|
||||
/>
|
||||
|
||||
<View style={{ flex: 1, marginLeft: 12, minWidth: 0 }}>
|
||||
{/* Первая строка: [kind-icon] name [verified] ··· time */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
{kindIcon && (
|
||||
<Ionicons
|
||||
name={kindIcon}
|
||||
size={12}
|
||||
color="#8b8b8b"
|
||||
style={{ marginRight: 5 }}
|
||||
/>
|
||||
)}
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ color: '#ffffff', fontWeight: '700', fontSize: 15, flex: 1 }}
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
{c.username && (
|
||||
<Ionicons
|
||||
name="checkmark-circle"
|
||||
size={14}
|
||||
color="#1d9bf0"
|
||||
style={{ marginLeft: 4, marginRight: 2 }}
|
||||
/>
|
||||
)}
|
||||
{last && (
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginLeft: 6 }}>
|
||||
{formatWhen(last.timestamp)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Вторая строка: [✓✓ mine-seen] preview ··· [unread] */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
|
||||
{last?.mine && (
|
||||
<Ionicons
|
||||
name="checkmark-done-outline"
|
||||
size={13}
|
||||
color="#8b8b8b"
|
||||
style={{ marginRight: 4 }}
|
||||
/>
|
||||
)}
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ color: '#8b8b8b', fontSize: 13, flex: 1 }}
|
||||
>
|
||||
{last
|
||||
? lastPreview(last)
|
||||
: c.x25519Pub
|
||||
? 'Tap to start encrypted chat'
|
||||
: 'Waiting for identity…'}
|
||||
</Text>
|
||||
|
||||
{unread !== null && (
|
||||
<View
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
minWidth: 18,
|
||||
height: 18,
|
||||
paddingHorizontal: 5,
|
||||
borderRadius: 9,
|
||||
backgroundColor: '#1d9bf0',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontSize: 11, fontWeight: '700' }}>
|
||||
{unread > 99 ? '99+' : unread}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
329
client-app/components/Composer.tsx
Normal file
329
client-app/components/Composer.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
/**
|
||||
* Composer — плавающий блок ввода сообщения, прибит к низу.
|
||||
*
|
||||
* Композиция:
|
||||
* 1. Опциональный баннер (edit / reply) сверху.
|
||||
* 2. Опциональная pending-attachment preview.
|
||||
* 3. Либо:
|
||||
* - обычный input-bubble с `[+] [textarea] [↑/🎤/⭕]`
|
||||
* - inline VoiceRecorder когда идёт запись голосового
|
||||
*
|
||||
* Send-action зависит от состояния:
|
||||
* - есть текст/attachment → ↑ (send)
|
||||
* - пусто → показываем две иконки: 🎤 (start voice) + ⭕ (open video circle)
|
||||
*
|
||||
* API:
|
||||
* mode, onCancelMode
|
||||
* text, onChangeText
|
||||
* onSend, sending
|
||||
* onAttach — tap на + (AttachmentMenu)
|
||||
* attachment, onClearAttach
|
||||
* onFinishVoice — готовая voice-attachment (из VoiceRecorder)
|
||||
* onStartVideoCircle — tap на ⭕, родитель открывает VideoCircleRecorder
|
||||
* placeholder
|
||||
*/
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { View, Text, TextInput, Pressable, ActivityIndicator, Image } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
import type { Attachment } from '@/lib/types';
|
||||
import { VoiceRecorder } from '@/components/chat/VoiceRecorder';
|
||||
|
||||
export type ComposerMode =
|
||||
| { kind: 'new' }
|
||||
| { kind: 'edit'; text: string }
|
||||
| { kind: 'reply'; msgId: string; author: string; preview: string };
|
||||
|
||||
export interface ComposerProps {
|
||||
mode: ComposerMode;
|
||||
onCancelMode?: () => void;
|
||||
|
||||
text: string;
|
||||
onChangeText: (t: string) => void;
|
||||
|
||||
onSend: () => void;
|
||||
sending?: boolean;
|
||||
|
||||
onAttach?: () => void;
|
||||
|
||||
attachment?: Attachment | null;
|
||||
onClearAttach?: () => void;
|
||||
|
||||
/** Voice recording завершена и отправляем сразу (мгновенный flow). */
|
||||
onFinishVoice?: (att: Attachment) => void;
|
||||
/** Tap на "⭕" — родитель открывает VideoCircleRecorder. */
|
||||
onStartVideoCircle?: () => void;
|
||||
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
const INPUT_MIN_HEIGHT = 24;
|
||||
const INPUT_MAX_HEIGHT = 72;
|
||||
|
||||
export function Composer(props: ComposerProps) {
|
||||
const {
|
||||
mode, onCancelMode, text, onChangeText, onSend, sending, onAttach,
|
||||
attachment, onClearAttach,
|
||||
onFinishVoice, onStartVideoCircle,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
const inputRef = useRef<TextInput>(null);
|
||||
const [recordingVoice, setRecordingVoice] = useState(false);
|
||||
|
||||
const hasContent = !!text.trim() || !!attachment;
|
||||
const canSend = hasContent && !sending;
|
||||
const inEdit = mode.kind === 'edit';
|
||||
const inReply = mode.kind === 'reply';
|
||||
|
||||
const focusInput = () => inputRef.current?.focus();
|
||||
|
||||
return (
|
||||
<View style={{ paddingHorizontal: 8, paddingTop: 6, paddingBottom: 4, gap: 6 }}>
|
||||
{/* ── Banner: edit / reply ── */}
|
||||
{(inEdit || inReply) && !recordingVoice && (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
backgroundColor: '#111111',
|
||||
borderRadius: 18,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={inEdit ? 'create-outline' : 'arrow-undo-outline'}
|
||||
size={16}
|
||||
color="#ffffff"
|
||||
/>
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
{inEdit && (
|
||||
<Text style={{ color: '#ffffff', fontSize: 14, fontWeight: '600' }}>
|
||||
Edit message
|
||||
</Text>
|
||||
)}
|
||||
{inReply && (
|
||||
<>
|
||||
<Text style={{ color: '#1d9bf0', fontSize: 12, fontWeight: '700' }} numberOfLines={1}>
|
||||
Reply to {(mode as { author: string }).author}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12 }} numberOfLines={1}>
|
||||
{(mode as { preview: string }).preview}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={onCancelMode}
|
||||
hitSlop={8}
|
||||
style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
|
||||
>
|
||||
<Ionicons name="close" size={20} color="#8b8b8b" />
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* ── Pending attachment preview ── */}
|
||||
{attachment && !recordingVoice && (
|
||||
<AttachmentChip attachment={attachment} onClear={onClearAttach} />
|
||||
)}
|
||||
|
||||
{/* ── Voice recording (inline) ИЛИ обычный input ── */}
|
||||
{recordingVoice ? (
|
||||
<VoiceRecorder
|
||||
onFinish={(att) => {
|
||||
setRecordingVoice(false);
|
||||
onFinishVoice?.(att);
|
||||
}}
|
||||
onCancel={() => setRecordingVoice(false)}
|
||||
/>
|
||||
) : (
|
||||
<Pressable onPress={focusInput}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#111111',
|
||||
borderRadius: 22,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
paddingLeft: 4,
|
||||
paddingRight: 8,
|
||||
paddingVertical: 6,
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{/* + attach — всегда, кроме edit */}
|
||||
{onAttach && !inEdit && (
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation?.(); onAttach(); }}
|
||||
hitSlop={6}
|
||||
style={({ pressed }) => ({
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
opacity: pressed ? 0.6 : 1,
|
||||
})}
|
||||
>
|
||||
<Ionicons name="add" size={22} color="#ffffff" />
|
||||
</Pressable>
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
ref={inputRef}
|
||||
value={text}
|
||||
onChangeText={onChangeText}
|
||||
placeholder={placeholder ?? 'Message'}
|
||||
placeholderTextColor="#5a5a5a"
|
||||
multiline
|
||||
maxLength={2000}
|
||||
style={{
|
||||
flex: 1,
|
||||
color: '#ffffff',
|
||||
fontSize: 15,
|
||||
lineHeight: 20,
|
||||
minHeight: INPUT_MIN_HEIGHT,
|
||||
maxHeight: INPUT_MAX_HEIGHT,
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
paddingLeft: onAttach && !inEdit ? 6 : 10,
|
||||
paddingRight: 6,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Правая часть: send ИЛИ [mic + video-circle] */}
|
||||
{canSend ? (
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation?.(); onSend(); }}
|
||||
style={({ pressed }) => ({
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
})}
|
||||
>
|
||||
{sending ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Ionicons name="arrow-up" size={18} color="#ffffff" />
|
||||
)}
|
||||
</Pressable>
|
||||
) : !inEdit && (onFinishVoice || onStartVideoCircle) ? (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
||||
{onStartVideoCircle && (
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation?.(); onStartVideoCircle(); }}
|
||||
hitSlop={6}
|
||||
style={({ pressed }) => ({
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
opacity: pressed ? 0.6 : 1,
|
||||
})}
|
||||
>
|
||||
<Ionicons name="videocam-outline" size={20} color="#ffffff" />
|
||||
</Pressable>
|
||||
)}
|
||||
{onFinishVoice && (
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation?.(); setRecordingVoice(true); }}
|
||||
hitSlop={6}
|
||||
style={({ pressed }) => ({
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
opacity: pressed ? 0.6 : 1,
|
||||
})}
|
||||
>
|
||||
<Ionicons name="mic-outline" size={20} color="#ffffff" />
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Attachment chip — preview текущего pending attachment'а ────────
|
||||
|
||||
function AttachmentChip({
|
||||
attachment, onClear,
|
||||
}: {
|
||||
attachment: Attachment;
|
||||
onClear?: () => void;
|
||||
}) {
|
||||
const icon: React.ComponentProps<typeof Ionicons>['name'] =
|
||||
attachment.kind === 'image' ? 'image-outline' :
|
||||
attachment.kind === 'video' ? 'videocam-outline' :
|
||||
attachment.kind === 'voice' ? 'mic-outline' :
|
||||
'document-outline';
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
backgroundColor: '#111111',
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
{attachment.kind === 'image' || attachment.kind === 'video' ? (
|
||||
<Image
|
||||
source={{ uri: attachment.uri }}
|
||||
style={{
|
||||
width: 40, height: 40,
|
||||
borderRadius: attachment.circle ? 20 : 8,
|
||||
backgroundColor: '#0a0a0a',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
width: 40, height: 40, borderRadius: 8,
|
||||
backgroundColor: '#1a1a1a',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={20} color="#ffffff" />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text style={{ color: '#ffffff', fontSize: 13, fontWeight: '600' }} numberOfLines={1}>
|
||||
{attachment.name ?? attachmentLabel(attachment)}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 11 }} numberOfLines={1}>
|
||||
{attachment.kind.toUpperCase()}
|
||||
{attachment.circle ? ' · circle' : ''}
|
||||
{attachment.size ? ` · ${(attachment.size / 1024).toFixed(0)} KB` : ''}
|
||||
{attachment.duration ? ` · ${attachment.duration}s` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
onPress={onClear}
|
||||
hitSlop={8}
|
||||
style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, padding: 4 })}
|
||||
>
|
||||
<Ionicons name="close" size={18} color="#8b8b8b" />
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function attachmentLabel(a: Attachment): string {
|
||||
switch (a.kind) {
|
||||
case 'image': return 'Photo';
|
||||
case 'video': return a.circle ? 'Video message' : 'Video';
|
||||
case 'voice': return 'Voice message';
|
||||
case 'file': return 'File';
|
||||
}
|
||||
}
|
||||
76
client-app/components/Header.tsx
Normal file
76
client-app/components/Header.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* Header — единая шапка экрана: [left slot] [title centered] [right slot].
|
||||
*
|
||||
* Правила выравнивания:
|
||||
* - left/right принимают натуральную ширину контента (обычно 1-2
|
||||
* IconButton'а 36px, или pressable-avatar 32px).
|
||||
* - title (ReactNode, принимает как string, так и compound — аватар +
|
||||
* имя вместе) всегда центрирован через flex:1 + alignItems:center.
|
||||
* Абсолютно не позиционируется, т.к. при слишком широком title'е
|
||||
* лучше ужать его, чем наложить на кнопки.
|
||||
*
|
||||
* `title` может быть строкой (тогда рендерится как Text 17px semibold)
|
||||
* либо произвольным node'ом — используется в chat detail для
|
||||
* [avatar][name + typing-subtitle] compound-блока.
|
||||
*
|
||||
* `divider` (default true) — тонкая 1px линия снизу; в tab-страницах
|
||||
* обычно выключена (TabHeader всегда ставит divider=false).
|
||||
*/
|
||||
import React, { ReactNode } from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
export interface HeaderProps {
|
||||
title?: ReactNode;
|
||||
left?: ReactNode;
|
||||
right?: ReactNode;
|
||||
/** Показывать нижнюю тонкую линию-разделитель. По умолчанию true. */
|
||||
divider?: boolean;
|
||||
}
|
||||
|
||||
export function Header({ title, left, right, divider = true }: HeaderProps) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
borderBottomWidth: divider ? 1 : 0,
|
||||
borderBottomColor: '#0f0f0f',
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
minHeight: 44,
|
||||
}}
|
||||
>
|
||||
{/* Left slot — натуральная ширина, минимум 44 чтобы title
|
||||
визуально центрировался для одно-icon-left + одно-icon-right. */}
|
||||
<View style={{ minWidth: 44, alignItems: 'flex-start' }}>{left}</View>
|
||||
|
||||
{/* Title centered */}
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
{typeof title === 'string' ? (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
letterSpacing: -0.2,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
) : title ?? null}
|
||||
</View>
|
||||
|
||||
{/* Right slot — row, натуральная ширина, минимум 44. gap=4
|
||||
чтобы несколько IconButton'ов не слипались в selection-mode. */}
|
||||
<View style={{ minWidth: 44, flexDirection: 'row', justifyContent: 'flex-end', gap: 4 }}>
|
||||
{right}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
61
client-app/components/IconButton.tsx
Normal file
61
client-app/components/IconButton.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* IconButton — круглая touch-target кнопка под Ionicon.
|
||||
*
|
||||
* Три варианта:
|
||||
* - 'ghost' — прозрачная, используется в хедере (шестерёнка, back).
|
||||
* - 'solid' — акцентный заливной круг, например composer FAB.
|
||||
* - 'tile' — квадратная заливка 36×36 для небольших action-chip'ов.
|
||||
*
|
||||
* Размер управляется props.size (диаметр). Touch-target никогда меньше 40px
|
||||
* (accessibility), поэтому для size<40 внутренний иконопад растёт.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Pressable, View } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
type IoniconName = React.ComponentProps<typeof Ionicons>['name'];
|
||||
|
||||
export interface IconButtonProps {
|
||||
icon: IoniconName;
|
||||
onPress?: () => void;
|
||||
variant?: 'ghost' | 'solid' | 'tile';
|
||||
size?: number; // visual diameter; hit slop ensures accessibility
|
||||
color?: string; // override icon color
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function IconButton({
|
||||
icon, onPress, variant = 'ghost', size = 40, color, disabled, className,
|
||||
}: IconButtonProps) {
|
||||
const iconSize = Math.round(size * 0.5);
|
||||
const bg =
|
||||
variant === 'solid' ? '#1d9bf0' :
|
||||
variant === 'tile' ? '#1a1a1a' :
|
||||
'transparent';
|
||||
const tint =
|
||||
color ??
|
||||
(variant === 'solid' ? '#ffffff' :
|
||||
disabled ? '#3a3a3a' :
|
||||
'#e7e7e7');
|
||||
|
||||
const radius = variant === 'tile' ? 10 : size / 2;
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={disabled ? undefined : onPress}
|
||||
hitSlop={8}
|
||||
className={className}
|
||||
style={({ pressed }) => ({
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: radius,
|
||||
backgroundColor: pressed && !disabled ? (variant === 'solid' ? '#1a8cd8' : '#1a1a1a') : bg,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
})}
|
||||
>
|
||||
<Ionicons name={icon} size={iconSize} color={tint} />
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
150
client-app/components/NavBar.tsx
Normal file
150
client-app/components/NavBar.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* NavBar — нижний бар на 5 иконок без подписей.
|
||||
*
|
||||
* Активный таб:
|
||||
* - иконка заполненная (Ionicons variant без `-outline`)
|
||||
* - вокруг иконки subtle highlight-блок (чуть светлее bg), радиус 14
|
||||
* - текст/бейдж остаются как у inactive
|
||||
*
|
||||
* Inactive:
|
||||
* - outline-иконка, цвет #6b6b6b
|
||||
* - soon-таб дополнительно dimmed и показывает чип SOON
|
||||
*
|
||||
* Роутинг через expo-router `router.replace` — без стекa, каждый tab это
|
||||
* полная страница без "back" концепции.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { View, Pressable, Text } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useRouter, usePathname } from 'expo-router';
|
||||
|
||||
type IoniconName = React.ComponentProps<typeof Ionicons>['name'];
|
||||
|
||||
interface Item {
|
||||
key: string;
|
||||
href: string;
|
||||
icon: IoniconName;
|
||||
iconActive: IoniconName;
|
||||
badge?: number;
|
||||
soon?: boolean;
|
||||
}
|
||||
|
||||
export interface NavBarProps {
|
||||
bottomInset?: number;
|
||||
requestCount?: number;
|
||||
notifCount?: number;
|
||||
}
|
||||
|
||||
export function NavBar({ bottomInset = 0, requestCount = 0, notifCount = 0 }: NavBarProps) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const items: Item[] = [
|
||||
{ key: 'home', href: '/(app)/chats', icon: 'home-outline', iconActive: 'home', badge: requestCount },
|
||||
{ key: 'add', href: '/(app)/new-contact', icon: 'search-outline', iconActive: 'search' },
|
||||
{ key: 'feed', href: '/(app)/feed', icon: 'newspaper-outline', iconActive: 'newspaper' },
|
||||
{ key: 'notif', href: '/(app)/requests', icon: 'notifications-outline', iconActive: 'notifications', badge: notifCount },
|
||||
{ key: 'wallet', href: '/(app)/wallet', icon: 'wallet-outline', iconActive: 'wallet' },
|
||||
];
|
||||
|
||||
// NavBar active-matching: путь может начинаться с "/chats" ИЛИ с href
|
||||
// напрямую. Вариант `/chats/xyz` тоже считается active для home.
|
||||
const isActive = (href: string) => {
|
||||
// Нормализуем /(app)/chats → /chats
|
||||
const norm = href.replace(/^\/\(app\)/, '');
|
||||
return pathname === norm || pathname.startsWith(norm + '/');
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
backgroundColor: '#000000',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#0f0f0f',
|
||||
paddingTop: 8,
|
||||
paddingBottom: Math.max(bottomInset, 8),
|
||||
}}
|
||||
>
|
||||
{items.map((it) => {
|
||||
const active = isActive(it.href);
|
||||
return (
|
||||
<Pressable
|
||||
key={it.key}
|
||||
onPress={() => {
|
||||
if (it.soon) return;
|
||||
router.replace(it.href as never);
|
||||
}}
|
||||
hitSlop={6}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 4,
|
||||
opacity: pressed ? 0.65 : 1,
|
||||
})}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
// highlight-блок вокруг active-иконки
|
||||
width: 52,
|
||||
height: 36,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={active ? it.iconActive : it.icon}
|
||||
size={26}
|
||||
color={active ? '#ffffff' : it.soon ? '#3a3a3a' : '#6b6b6b'}
|
||||
/>
|
||||
{it.badge && it.badge > 0 ? (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 2,
|
||||
right: 8,
|
||||
minWidth: 16,
|
||||
height: 16,
|
||||
paddingHorizontal: 4,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#1d9bf0',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#000',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#fff', fontSize: 9, fontWeight: '700' }}>
|
||||
{it.badge > 99 ? '99+' : it.badge}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{it.soon && (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: -2,
|
||||
right: 2,
|
||||
paddingHorizontal: 4,
|
||||
paddingVertical: 1,
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 7, fontWeight: '700', letterSpacing: 0.3 }}>
|
||||
SOON
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
88
client-app/components/SearchBar.tsx
Normal file
88
client-app/components/SearchBar.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* SearchBar — серый блок, в состоянии idle текст с иконкой 🔍 отцентрированы.
|
||||
*
|
||||
* Когда пользователь тапает/фокусирует — поле становится input-friendly, но
|
||||
* визуально рестайл не нужен: при наличии текста placeholder скрыт и
|
||||
* пользовательский ввод выравнивается влево автоматически (multiline off).
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { View, TextInput, Text } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
export interface SearchBarProps {
|
||||
value: string;
|
||||
onChangeText: (v: string) => void;
|
||||
placeholder?: string;
|
||||
autoFocus?: boolean;
|
||||
onSubmitEditing?: () => void;
|
||||
}
|
||||
|
||||
export function SearchBar({
|
||||
value, onChangeText, placeholder = 'Search', autoFocus, onSubmitEditing,
|
||||
}: SearchBarProps) {
|
||||
const [focused, setFocused] = useState(false);
|
||||
|
||||
// Placeholder центрируется пока нет фокуса И нет значения.
|
||||
// Как только юзер фокусируется или начинает печатать — иконка+текст
|
||||
// прыгают к левому краю, чтобы не мешать вводу.
|
||||
const centered = !focused && !value;
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#1a1a1a',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 9,
|
||||
minHeight: 36,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{centered ? (
|
||||
// ── Idle state — только текст+icon, отцентрированы.
|
||||
// Невидимый TextInput поверх ловит tap, чтобы не дергать focus вручную.
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Ionicons name="search" size={14} color="#8b8b8b" style={{ marginRight: 6 }} />
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 14 }}>{placeholder}</Text>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
autoFocus={autoFocus}
|
||||
onFocus={() => setFocused(true)}
|
||||
onSubmitEditing={onSubmitEditing}
|
||||
returnKeyType="search"
|
||||
style={{
|
||||
position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,
|
||||
color: 'transparent',
|
||||
// Скрываем cursor в idle-режиме; при focus компонент перерисуется.
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Ionicons name="search" size={14} color="#8b8b8b" style={{ marginRight: 8 }} />
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor="#8b8b8b"
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
autoFocus
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
onSubmitEditing={onSubmitEditing}
|
||||
returnKeyType="search"
|
||||
style={{
|
||||
flex: 1,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
padding: 0,
|
||||
includeFontPadding: false,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
59
client-app/components/TabHeader.tsx
Normal file
59
client-app/components/TabHeader.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* TabHeader — общая шапка для всех tab-страниц (home/feed/notifications/wallet).
|
||||
*
|
||||
* Структура строго как в референсе Messages-экрана:
|
||||
* [avatar 32 → /settings] [title] [right slot]
|
||||
*
|
||||
* Без нижнего разделителя (divider=false) — тот же уровень, что и фон экрана.
|
||||
*
|
||||
* Right-slot по умолчанию — шестерёнка → /settings. Но экраны могут передать
|
||||
* свой (например, refresh в wallet). Левый avatar — всегда клик-навигация в
|
||||
* settings, как в референсе.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Pressable } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useStore } from '@/lib/store';
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
export interface TabHeaderProps {
|
||||
title: string;
|
||||
/** Right-slot. Если не передан — выставляется IconButton с settings-outline. */
|
||||
right?: React.ReactNode;
|
||||
/** Dot-color на profile-avatar'е (например, WS live/polling indicator). */
|
||||
profileDotColor?: string;
|
||||
}
|
||||
|
||||
export function TabHeader({ title, right, profileDotColor }: TabHeaderProps) {
|
||||
const router = useRouter();
|
||||
const username = useStore(s => s.username);
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
|
||||
return (
|
||||
<Header
|
||||
title={title}
|
||||
divider={false}
|
||||
left={
|
||||
<Pressable onPress={() => router.push('/(app)/settings' as never)} hitSlop={8}>
|
||||
<Avatar
|
||||
name={username ?? '?'}
|
||||
address={keyFile?.pub_key}
|
||||
size={32}
|
||||
dotColor={profileDotColor}
|
||||
/>
|
||||
</Pressable>
|
||||
}
|
||||
right={
|
||||
right ?? (
|
||||
<IconButton
|
||||
icon="settings-outline"
|
||||
size={36}
|
||||
onPress={() => router.push('/(app)/settings' as never)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
188
client-app/components/chat/AttachmentMenu.tsx
Normal file
188
client-app/components/chat/AttachmentMenu.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* AttachmentMenu — bottom-sheet с вариантами прикрепления.
|
||||
*
|
||||
* Выводится при нажатии на `+` в composer'е. Опции:
|
||||
* - 📷 Photo / video из галереи (expo-image-picker)
|
||||
* - 📸 Take photo (камера)
|
||||
* - 📎 File (expo-document-picker)
|
||||
* - 🎙️ Voice message — stub (запись через expo-av потребует
|
||||
* permissions runtime + recording UI; сейчас добавляет мок-
|
||||
* голосовое с duration 4s)
|
||||
*
|
||||
* Всё визуально — тёмный overlay + sheet снизу. Закрытие по tap'у на
|
||||
* overlay или на Cancel.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { View, Text, Pressable, Alert, Modal } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import * as DocumentPicker from 'expo-document-picker';
|
||||
|
||||
import type { Attachment } from '@/lib/types';
|
||||
|
||||
export interface AttachmentMenuProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
/** Вызывается когда attachment готов для отправки. */
|
||||
onPick: (att: Attachment) => void;
|
||||
}
|
||||
|
||||
export function AttachmentMenu({ visible, onClose, onPick }: AttachmentMenuProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const pickImageOrVideo = async () => {
|
||||
try {
|
||||
const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (!perm.granted) {
|
||||
Alert.alert('Permission needed', 'Grant photos access to attach media.');
|
||||
return;
|
||||
}
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.All,
|
||||
quality: 0.85,
|
||||
allowsEditing: false,
|
||||
});
|
||||
if (result.canceled) return;
|
||||
const asset = result.assets[0];
|
||||
onPick({
|
||||
kind: asset.type === 'video' ? 'video' : 'image',
|
||||
uri: asset.uri,
|
||||
mime: asset.mimeType,
|
||||
width: asset.width,
|
||||
height: asset.height,
|
||||
duration: asset.duration ? Math.round(asset.duration / 1000) : undefined,
|
||||
});
|
||||
onClose();
|
||||
} catch (e: any) {
|
||||
Alert.alert('Pick failed', e?.message ?? 'Unknown error');
|
||||
}
|
||||
};
|
||||
|
||||
const takePhoto = async () => {
|
||||
try {
|
||||
const perm = await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (!perm.granted) {
|
||||
Alert.alert('Permission needed', 'Grant camera access to take a photo.');
|
||||
return;
|
||||
}
|
||||
const result = await ImagePicker.launchCameraAsync({ quality: 0.85 });
|
||||
if (result.canceled) return;
|
||||
const asset = result.assets[0];
|
||||
onPick({
|
||||
kind: asset.type === 'video' ? 'video' : 'image',
|
||||
uri: asset.uri,
|
||||
mime: asset.mimeType,
|
||||
width: asset.width,
|
||||
height: asset.height,
|
||||
});
|
||||
onClose();
|
||||
} catch (e: any) {
|
||||
Alert.alert('Camera failed', e?.message ?? 'Unknown error');
|
||||
}
|
||||
};
|
||||
|
||||
const pickFile = async () => {
|
||||
try {
|
||||
const res = await DocumentPicker.getDocumentAsync({
|
||||
type: '*/*',
|
||||
copyToCacheDirectory: true,
|
||||
});
|
||||
if (res.canceled) return;
|
||||
const asset = res.assets[0];
|
||||
onPick({
|
||||
kind: 'file',
|
||||
uri: asset.uri,
|
||||
name: asset.name,
|
||||
mime: asset.mimeType ?? undefined,
|
||||
size: asset.size,
|
||||
});
|
||||
onClose();
|
||||
} catch (e: any) {
|
||||
Alert.alert('File pick failed', e?.message ?? 'Unknown error');
|
||||
}
|
||||
};
|
||||
|
||||
// Voice recorder больше не stub — см. inline-кнопку 🎤 в composer'е,
|
||||
// которая разворачивает VoiceRecorder (expo-av Audio.Recording). Опция
|
||||
// Voice в этом меню убрана, т.к. дублировала бы UX.
|
||||
|
||||
return (
|
||||
<Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
|
||||
<Pressable
|
||||
onPress={onClose}
|
||||
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.55)' }}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Pressable
|
||||
onPress={() => {}}
|
||||
style={{
|
||||
backgroundColor: '#111111',
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
paddingTop: 8,
|
||||
paddingBottom: Math.max(insets.bottom, 12) + 10,
|
||||
paddingHorizontal: 10,
|
||||
borderTopWidth: 1, borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
{/* Drag handle */}
|
||||
<View
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
width: 40, height: 4, borderRadius: 2,
|
||||
backgroundColor: '#2a2a2a',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: '#ffffff', fontSize: 16, fontWeight: '700',
|
||||
marginLeft: 8, marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
Attach
|
||||
</Text>
|
||||
|
||||
<Row icon="images-outline" label="Photo / video" onPress={pickImageOrVideo} />
|
||||
<Row icon="camera-outline" label="Take photo" onPress={takePhoto} />
|
||||
<Row icon="document-outline" label="File" onPress={pickFile} />
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({
|
||||
icon, label, onPress,
|
||||
}: {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
label: string;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 14,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 14,
|
||||
backgroundColor: pressed ? '#1a1a1a' : 'transparent',
|
||||
})}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 40, height: 40, borderRadius: 10,
|
||||
backgroundColor: '#1a1a1a',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={20} color="#ffffff" />
|
||||
</View>
|
||||
<Text style={{ color: '#ffffff', fontSize: 15, fontWeight: '600' }}>{label}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
178
client-app/components/chat/AttachmentPreview.tsx
Normal file
178
client-app/components/chat/AttachmentPreview.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* AttachmentPreview — рендер `Message.attachment` внутри bubble'а.
|
||||
*
|
||||
* Четыре формы:
|
||||
* - image → Image с object-fit cover, aspect-ratio из width/height
|
||||
* - video → то же + play-overlay в центре, duration внизу-справа
|
||||
* - voice → row [play-icon] [waveform stub] [duration]
|
||||
* - file → row [file-icon] [name + size]
|
||||
*
|
||||
* Вложения размещаются ВНУТРИ того же bubble'а что и текст, чуть ниже
|
||||
* footer'а нет и ширина bubble'а снимает maxWidth-ограничение ради
|
||||
* изображений (отдельный media-first-bubble case).
|
||||
*/
|
||||
import React from 'react';
|
||||
import { View, Text, Image } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
import type { Attachment } from '@/lib/types';
|
||||
import { VoicePlayer } from '@/components/chat/VoicePlayer';
|
||||
import { VideoCirclePlayer } from '@/components/chat/VideoCirclePlayer';
|
||||
|
||||
export interface AttachmentPreviewProps {
|
||||
attachment: Attachment;
|
||||
/** Используется для тонирования footer-элементов. */
|
||||
own?: boolean;
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
||||
return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export function AttachmentPreview({ attachment, own }: AttachmentPreviewProps) {
|
||||
switch (attachment.kind) {
|
||||
case 'image':
|
||||
return <ImageAttachment att={attachment} />;
|
||||
case 'video':
|
||||
// circle=true — круглое видео-сообщение (Telegram-стиль).
|
||||
return attachment.circle
|
||||
? <VideoCirclePlayer uri={attachment.uri} duration={attachment.duration} />
|
||||
: <VideoAttachment att={attachment} />;
|
||||
case 'voice':
|
||||
return <VoicePlayer uri={attachment.uri} duration={attachment.duration} own={own} />;
|
||||
case 'file':
|
||||
return <FileAttachment att={attachment} own={own} />;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Image ──────────────────────────────────────────────────────────
|
||||
|
||||
function ImageAttachment({ att }: { att: Attachment }) {
|
||||
// Aspect-ratio из реальных width/height; fallback 4:3.
|
||||
const aspect = att.width && att.height ? att.width / att.height : 4 / 3;
|
||||
return (
|
||||
<Image
|
||||
source={{ uri: att.uri }}
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: aspect,
|
||||
borderRadius: 12,
|
||||
marginBottom: 4,
|
||||
backgroundColor: '#0a0a0a',
|
||||
}}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Video ──────────────────────────────────────────────────────────
|
||||
|
||||
function VideoAttachment({ att }: { att: Attachment }) {
|
||||
const aspect = att.width && att.height ? att.width / att.height : 16 / 9;
|
||||
return (
|
||||
<View style={{ position: 'relative', marginBottom: 4 }}>
|
||||
<Image
|
||||
source={{ uri: att.uri }}
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: aspect,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#0a0a0a',
|
||||
}}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
{/* Play overlay по центру */}
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%', left: '50%',
|
||||
transform: [{ translateX: -22 }, { translateY: -22 }],
|
||||
width: 44, height: 44, borderRadius: 22,
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="play" size={22} color="#ffffff" style={{ marginLeft: 2 }} />
|
||||
</View>
|
||||
{att.duration !== undefined && (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 8, bottom: 8,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
paddingHorizontal: 6, paddingVertical: 2,
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontSize: 11, fontWeight: '600' }}>
|
||||
{formatDuration(att.duration)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Voice ──────────────────────────────────────────────────────────
|
||||
// Реальный плеер — см. components/chat/VoicePlayer.tsx (expo-av Sound).
|
||||
|
||||
// ─── File ───────────────────────────────────────────────────────────
|
||||
|
||||
function FileAttachment({ att, own }: { att: Attachment; own?: boolean }) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 4,
|
||||
gap: 10,
|
||||
paddingVertical: 4,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 36, height: 36, borderRadius: 10,
|
||||
backgroundColor: own ? 'rgba(255,255,255,0.18)' : '#1a1a1a',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="document-text"
|
||||
size={18}
|
||||
color={own ? '#ffffff' : '#ffffff'}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{att.name ?? 'file'}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: own ? 'rgba(255,255,255,0.75)' : '#8b8b8b',
|
||||
fontSize: 11,
|
||||
}}
|
||||
>
|
||||
{att.size !== undefined ? formatSize(att.size) : ''}
|
||||
{att.size !== undefined && att.mime ? ' · ' : ''}
|
||||
{att.mime ?? ''}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
36
client-app/components/chat/DaySeparator.tsx
Normal file
36
client-app/components/chat/DaySeparator.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* DaySeparator — центральный лейбл "Сегодня" / "Вчера" / "17 июня 2025"
|
||||
* между группами сообщений.
|
||||
*
|
||||
* Стиль: тонкий шрифт серого цвета, маленький размер. В референсе этот
|
||||
* лейбл не должен перетягивать на себя внимание — он визуальный якорь,
|
||||
* не заголовок.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { View, Text, Platform } from 'react-native';
|
||||
|
||||
export interface DaySeparatorProps {
|
||||
label: string;
|
||||
}
|
||||
|
||||
export function DaySeparator({ label }: DaySeparatorProps) {
|
||||
return (
|
||||
<View style={{ alignItems: 'center', marginTop: 14, marginBottom: 6 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: '#6b6b6b',
|
||||
fontSize: 12,
|
||||
// Тонкий шрифт — на iOS "200" рисует ultra-light, на Android —
|
||||
// sans-serif-thin. В Expo font-weight 300 почти идентичен на
|
||||
// обеих платформах и доступен без дополнительных шрифтов.
|
||||
fontWeight: '300',
|
||||
// Android font-weight 100-300 требует явной семьи, иначе
|
||||
// округляется до 400. Для thin визуала передаём serif-thin.
|
||||
...(Platform.OS === 'android' ? { fontFamily: 'sans-serif-thin' } : null),
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
70
client-app/components/chat/ReplyQuote.tsx
Normal file
70
client-app/components/chat/ReplyQuote.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* ReplyQuote — блок "цитаты" внутри bubble'а сообщения-ответа.
|
||||
*
|
||||
* Визуал: slim-row с синим бордером слева (accent-bar), author в синем,
|
||||
* preview text — серым, в одну строку.
|
||||
*
|
||||
* Tap на quoted-блок → onJump → ChatScreen скроллит к оригиналу и
|
||||
* подсвечивает его на пару секунд. Если оригинал не найден в текущем
|
||||
* списке (удалён / ушёл за пределы пагинации) — onJump может просто
|
||||
* no-op'нуть.
|
||||
*
|
||||
* Цвета зависят от того в чьём bubble'е мы находимся:
|
||||
* - own (синий bubble) → quote border = белый, текст белый/85%
|
||||
* - peer (серый bubble) → quote border = accent blue, текст white
|
||||
*/
|
||||
import React from 'react';
|
||||
import { View, Text, Pressable } from 'react-native';
|
||||
|
||||
export interface ReplyQuoteProps {
|
||||
author: string;
|
||||
preview: string;
|
||||
own?: boolean;
|
||||
onJump?: () => void;
|
||||
}
|
||||
|
||||
export function ReplyQuote({ author, preview, own, onJump }: ReplyQuoteProps) {
|
||||
const barColor = own ? 'rgba(255,255,255,0.85)' : '#1d9bf0';
|
||||
const authorColor = own ? '#ffffff' : '#1d9bf0';
|
||||
const previewColor = own ? 'rgba(255,255,255,0.85)' : '#c0c0c0';
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onJump}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row',
|
||||
backgroundColor: own ? 'rgba(255,255,255,0.10)' : 'rgba(29,155,240,0.10)',
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
marginBottom: 5,
|
||||
opacity: pressed ? 0.7 : 1,
|
||||
})}
|
||||
>
|
||||
{/* Accent bar слева */}
|
||||
<View
|
||||
style={{
|
||||
width: 3,
|
||||
backgroundColor: barColor,
|
||||
}}
|
||||
/>
|
||||
<View style={{ flex: 1, paddingHorizontal: 8, paddingVertical: 6 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: authorColor,
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{author}
|
||||
</Text>
|
||||
<Text
|
||||
style={{ color: previewColor, fontSize: 13 }}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{preview || 'attachment'}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
158
client-app/components/chat/VideoCirclePlayer.tsx
Normal file
158
client-app/components/chat/VideoCirclePlayer.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
/**
|
||||
* VideoCirclePlayer — telegram-style круглое видео-сообщение.
|
||||
*
|
||||
* Мигрировано с expo-av `<Video>` на expo-video `<VideoView>` +
|
||||
* useVideoPlayer hook (expo-av deprecated в SDK 54).
|
||||
*
|
||||
* UI:
|
||||
* - Круглая thumbnail-рамка (Image превью первого кадра) с play-overlay
|
||||
* - Tap → полноэкранный Modal с VideoView в круглой рамке, auto-play + loop
|
||||
* - Duration badge снизу
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, Pressable, Modal, Image } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useVideoPlayer, VideoView } from 'expo-video';
|
||||
|
||||
export interface VideoCirclePlayerProps {
|
||||
uri: string;
|
||||
duration?: number;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
function formatClock(sec: number): string {
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = Math.floor(sec % 60);
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export function VideoCirclePlayer({ uri, duration, size = 220 }: VideoCirclePlayerProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Pressable
|
||||
onPress={() => setOpen(true)}
|
||||
style={{
|
||||
width: size, height: size, borderRadius: size / 2,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#0a0a0a',
|
||||
marginBottom: 4,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{/* Статический thumbnail через Image (первый кадр если платформа
|
||||
поддерживает, иначе чёрный фон). Реальное видео играет только
|
||||
в Modal ради производительности FlatList'а. */}
|
||||
<Image
|
||||
source={{ uri }}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 52, height: 52, borderRadius: 26,
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="play" size={22} color="#ffffff" style={{ marginLeft: 2 }} />
|
||||
</View>
|
||||
{duration !== undefined && (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: size / 2 - 26, bottom: 16,
|
||||
paddingHorizontal: 6, paddingVertical: 2,
|
||||
borderRadius: 6,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontSize: 11, fontWeight: '600' }}>
|
||||
{formatClock(duration)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
|
||||
{open && (
|
||||
<VideoModal uri={uri} onClose={() => setOpen(false)} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Modal рендерится только когда open=true — это значит useVideoPlayer
|
||||
// не создаёт лишних плееров пока пользователь не открыл overlay.
|
||||
|
||||
function VideoModal({ uri, onClose }: { uri: string; onClose: () => void }) {
|
||||
// useVideoPlayer может throw'нуть на некоторых платформах при
|
||||
// невалидных source'ах. try/catch вокруг render'а защищает парента
|
||||
// от полного crash'а.
|
||||
let player: ReturnType<typeof useVideoPlayer> | null = null;
|
||||
try {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
player = useVideoPlayer({ uri }, (p) => {
|
||||
p.loop = true;
|
||||
p.muted = false;
|
||||
p.play();
|
||||
});
|
||||
} catch {
|
||||
player = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal visible transparent animationType="fade" onRequestClose={onClose}>
|
||||
<Pressable
|
||||
onPress={onClose}
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.92)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: '90%',
|
||||
aspectRatio: 1,
|
||||
maxWidth: 420, maxHeight: 420,
|
||||
borderRadius: 9999,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#000',
|
||||
}}
|
||||
>
|
||||
{player ? (
|
||||
<VideoView
|
||||
player={player}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
contentFit="cover"
|
||||
nativeControls={false}
|
||||
/>
|
||||
) : (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Ionicons name="alert-circle-outline" size={36} color="#8b8b8b" />
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 8 }}>
|
||||
Playback not available
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
onPress={onClose}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 48, right: 16,
|
||||
width: 40, height: 40, borderRadius: 20,
|
||||
backgroundColor: 'rgba(255,255,255,0.14)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="close" size={22} color="#ffffff" />
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
217
client-app/components/chat/VideoCircleRecorder.tsx
Normal file
217
client-app/components/chat/VideoCircleRecorder.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* VideoCircleRecorder — full-screen Modal для записи круглого видео-
|
||||
* сообщения (Telegram-style).
|
||||
*
|
||||
* UX:
|
||||
* 1. Открывается Modal с CameraView (по умолчанию front-camera).
|
||||
* 2. Превью — круглое (аналогично VideoCirclePlayer).
|
||||
* 3. Большая красная кнопка внизу: tap-to-start, tap-to-stop.
|
||||
* 4. Максимум 15 секунд — авто-стоп.
|
||||
* 5. По stop'у возвращаем attachment { kind:'video', circle:true, uri, duration }.
|
||||
* 6. Свайп вниз / close-icon → cancel (без отправки).
|
||||
*/
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { View, Text, Pressable, Modal, Alert } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { CameraView, useCameraPermissions, useMicrophonePermissions } from 'expo-camera';
|
||||
|
||||
import type { Attachment } from '@/lib/types';
|
||||
|
||||
export interface VideoCircleRecorderProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onFinish: (att: Attachment) => void;
|
||||
}
|
||||
|
||||
const MAX_DURATION_SEC = 15;
|
||||
|
||||
function formatClock(sec: number): string {
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = Math.floor(sec % 60);
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export function VideoCircleRecorder({ visible, onClose, onFinish }: VideoCircleRecorderProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const camRef = useRef<CameraView>(null);
|
||||
|
||||
const [camPerm, requestCam] = useCameraPermissions();
|
||||
const [micPerm, requestMic] = useMicrophonePermissions();
|
||||
|
||||
const [recording, setRecording] = useState(false);
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
const startedAt = useRef(0);
|
||||
const facing: 'front' | 'back' = 'front';
|
||||
|
||||
// Timer + auto-stop at MAX_DURATION_SEC
|
||||
useEffect(() => {
|
||||
if (!recording) return;
|
||||
const t = setInterval(() => {
|
||||
const s = Math.floor((Date.now() - startedAt.current) / 1000);
|
||||
setElapsed(s);
|
||||
if (s >= MAX_DURATION_SEC) stopAndSend();
|
||||
}, 250);
|
||||
return () => clearInterval(t);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [recording]);
|
||||
|
||||
// Permissions on mount of visible
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
setRecording(false);
|
||||
setElapsed(0);
|
||||
return;
|
||||
}
|
||||
(async () => {
|
||||
if (!camPerm?.granted) await requestCam();
|
||||
if (!micPerm?.granted) await requestMic();
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [visible]);
|
||||
|
||||
const start = async () => {
|
||||
if (!camRef.current || recording) return;
|
||||
try {
|
||||
startedAt.current = Date.now();
|
||||
setElapsed(0);
|
||||
setRecording(true);
|
||||
// recordAsync блокируется до stopRecording или maxDuration
|
||||
const result = await camRef.current.recordAsync({ maxDuration: MAX_DURATION_SEC });
|
||||
setRecording(false);
|
||||
if (!result?.uri) return;
|
||||
const seconds = Math.max(1, Math.floor((Date.now() - startedAt.current) / 1000));
|
||||
onFinish({
|
||||
kind: 'video',
|
||||
circle: true,
|
||||
uri: result.uri,
|
||||
duration: seconds,
|
||||
mime: 'video/mp4',
|
||||
});
|
||||
onClose();
|
||||
} catch (e: any) {
|
||||
setRecording(false);
|
||||
Alert.alert('Recording failed', e?.message ?? 'Unknown error');
|
||||
}
|
||||
};
|
||||
|
||||
const stopAndSend = () => {
|
||||
if (!recording) return;
|
||||
camRef.current?.stopRecording();
|
||||
// recordAsync promise выше resolve'нется с uri → onFinish
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
if (recording) {
|
||||
camRef.current?.stopRecording();
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
const permOK = camPerm?.granted && micPerm?.granted;
|
||||
|
||||
return (
|
||||
<Modal visible={visible} transparent animationType="slide" onRequestClose={cancel}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: '#000000',
|
||||
paddingTop: insets.top,
|
||||
paddingBottom: Math.max(insets.bottom, 12),
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
|
||||
<Pressable
|
||||
onPress={cancel}
|
||||
hitSlop={10}
|
||||
style={{
|
||||
width: 36, height: 36, borderRadius: 18,
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="close" size={20} color="#ffffff" />
|
||||
</Pressable>
|
||||
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', flex: 1, textAlign: 'center' }}>
|
||||
Video message
|
||||
</Text>
|
||||
<View style={{ width: 36 }} />
|
||||
</View>
|
||||
|
||||
{/* Camera */}
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 }}>
|
||||
{permOK ? (
|
||||
<View
|
||||
style={{
|
||||
width: '85%',
|
||||
aspectRatio: 1,
|
||||
maxWidth: 360, maxHeight: 360,
|
||||
borderRadius: 9999,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: recording ? 3 : 0,
|
||||
borderColor: '#f4212e',
|
||||
}}
|
||||
>
|
||||
<CameraView
|
||||
ref={camRef}
|
||||
style={{ flex: 1 }}
|
||||
facing={facing}
|
||||
mode="video"
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<View style={{ alignItems: 'center', paddingHorizontal: 24 }}>
|
||||
<Ionicons name="videocam-off-outline" size={42} color="#8b8b8b" />
|
||||
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', marginTop: 12 }}>
|
||||
Permissions needed
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 4, textAlign: 'center' }}>
|
||||
Camera + microphone access are required to record a video message.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Timer */}
|
||||
{recording && (
|
||||
<Text
|
||||
style={{
|
||||
color: '#f4212e',
|
||||
fontSize: 14, fontWeight: '700',
|
||||
marginTop: 14,
|
||||
}}
|
||||
>
|
||||
● {formatClock(elapsed)} / {formatClock(MAX_DURATION_SEC)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Record / Stop button */}
|
||||
<View style={{ alignItems: 'center', paddingBottom: 16 }}>
|
||||
<Pressable
|
||||
onPress={recording ? stopAndSend : start}
|
||||
disabled={!permOK}
|
||||
style={({ pressed }) => ({
|
||||
width: 72, height: 72, borderRadius: 36,
|
||||
backgroundColor: !permOK ? '#1a1a1a' : recording ? '#f4212e' : '#1d9bf0',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
opacity: pressed ? 0.85 : 1,
|
||||
borderWidth: 4,
|
||||
borderColor: 'rgba(255,255,255,0.2)',
|
||||
})}
|
||||
>
|
||||
<Ionicons
|
||||
name={recording ? 'stop' : 'videocam'}
|
||||
size={30}
|
||||
color="#ffffff"
|
||||
/>
|
||||
</Pressable>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 10 }}>
|
||||
{recording ? 'Tap to stop & send' : permOK ? 'Tap to record' : 'Grant permissions'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
166
client-app/components/chat/VoicePlayer.tsx
Normal file
166
client-app/components/chat/VoicePlayer.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* VoicePlayer — play/pause voice message через expo-audio.
|
||||
*
|
||||
* Раздел на две подкомпоненты:
|
||||
* - RealVoicePlayer: useAudioPlayer с настоящим URI
|
||||
* - StubVoicePlayer: отрисовка waveform без player'а (seed-URI)
|
||||
*
|
||||
* Разделение важно: useAudioPlayer не должен получать null/stub-строки —
|
||||
* при падении внутри expo-audio это крашит render всего bubble'а и
|
||||
* (в FlatList) визуально "пропадает" интерфейс чата.
|
||||
*
|
||||
* UI:
|
||||
* [▶/⏸] ▮▮▮▮▮▮▮▮▮▯▯▯▯▯▯▯▯ 0:03 / 0:17
|
||||
*/
|
||||
import React, { useMemo } from 'react';
|
||||
import { View, Text, Pressable } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';
|
||||
|
||||
export interface VoicePlayerProps {
|
||||
uri: string;
|
||||
duration?: number;
|
||||
own?: boolean;
|
||||
}
|
||||
|
||||
const BAR_COUNT = 22;
|
||||
|
||||
function formatClock(sec: number): string {
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = Math.floor(sec % 60);
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function isStubUri(u: string): boolean {
|
||||
return u.startsWith('voice-stub://') || u.startsWith('voice-demo://');
|
||||
}
|
||||
|
||||
function useBars(uri: string) {
|
||||
return useMemo(() => {
|
||||
const seed = uri.length;
|
||||
return Array.from({ length: BAR_COUNT }, (_, i) => {
|
||||
const h = ((seed * (i + 1) * 7919) % 11) + 4;
|
||||
return h;
|
||||
});
|
||||
}, [uri]);
|
||||
}
|
||||
|
||||
// ─── Top-level router ──────────────────────────────────────────────
|
||||
|
||||
export function VoicePlayer(props: VoicePlayerProps) {
|
||||
// Stub-URI (seed) не передаётся в useAudioPlayer — hook может крашить
|
||||
// на невалидных source'ах. Рендерим статический waveform.
|
||||
if (isStubUri(props.uri)) return <StubVoicePlayer {...props} />;
|
||||
return <RealVoicePlayer {...props} />;
|
||||
}
|
||||
|
||||
// ─── Stub (seed / preview) ─────────────────────────────────────────
|
||||
|
||||
function StubVoicePlayer({ uri, duration, own }: VoicePlayerProps) {
|
||||
const bars = useBars(uri);
|
||||
const accent = own ? 'rgba(255,255,255,0.92)' : '#1d9bf0';
|
||||
const subtle = own ? 'rgba(255,255,255,0.35)' : '#3a3a3a';
|
||||
const textColor = own ? 'rgba(255,255,255,0.85)' : '#8b8b8b';
|
||||
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4, gap: 8 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
backgroundColor: own ? 'rgba(255,255,255,0.18)' : '#1a1a1a',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="play" size={14} color="#ffffff" style={{ marginLeft: 1 }} />
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, flex: 1 }}>
|
||||
{bars.map((h, i) => (
|
||||
<View
|
||||
key={i}
|
||||
style={{
|
||||
width: 2, height: h, borderRadius: 1,
|
||||
backgroundColor: i < 6 ? accent : subtle,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<Text style={{ color: textColor, fontSize: 12 }}>
|
||||
{formatClock(duration ?? 0)}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Real expo-audio player ────────────────────────────────────────
|
||||
|
||||
function RealVoicePlayer({ uri, duration, own }: VoicePlayerProps) {
|
||||
const player = useAudioPlayer({ uri });
|
||||
const status = useAudioPlayerStatus(player);
|
||||
const bars = useBars(uri);
|
||||
|
||||
const accent = own ? 'rgba(255,255,255,0.92)' : '#1d9bf0';
|
||||
const subtle = own ? 'rgba(255,255,255,0.35)' : '#3a3a3a';
|
||||
const textColor = own ? 'rgba(255,255,255,0.85)' : '#8b8b8b';
|
||||
|
||||
const playing = !!status.playing;
|
||||
const loading = !!status.isBuffering && !status.isLoaded;
|
||||
const curSec = status.currentTime ?? 0;
|
||||
const totalSec = (status.duration && status.duration > 0) ? status.duration : (duration ?? 0);
|
||||
|
||||
const playedRatio = totalSec > 0 ? Math.min(1, curSec / totalSec) : 0;
|
||||
const playedBars = Math.round(playedRatio * BAR_COUNT);
|
||||
|
||||
const toggle = () => {
|
||||
try {
|
||||
if (status.playing) {
|
||||
player.pause();
|
||||
} else {
|
||||
if (status.duration && curSec >= status.duration - 0.05) {
|
||||
player.seekTo(0);
|
||||
}
|
||||
player.play();
|
||||
}
|
||||
} catch {
|
||||
/* dbl-tap during load */
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4, gap: 8 }}>
|
||||
<Pressable
|
||||
onPress={toggle}
|
||||
hitSlop={8}
|
||||
style={{
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
backgroundColor: own ? 'rgba(255,255,255,0.18)' : '#1a1a1a',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={playing ? 'pause' : (loading ? 'hourglass-outline' : 'play')}
|
||||
size={14}
|
||||
color="#ffffff"
|
||||
style={{ marginLeft: playing || loading ? 0 : 1 }}
|
||||
/>
|
||||
</Pressable>
|
||||
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, flex: 1 }}>
|
||||
{bars.map((h, i) => (
|
||||
<View
|
||||
key={i}
|
||||
style={{
|
||||
width: 2, height: h, borderRadius: 1,
|
||||
backgroundColor: i < playedBars ? accent : subtle,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Text style={{ color: textColor, fontSize: 12 }}>
|
||||
{playing || curSec > 0
|
||||
? `${formatClock(Math.floor(curSec))} / ${formatClock(Math.floor(totalSec))}`
|
||||
: formatClock(Math.floor(totalSec))}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
183
client-app/components/chat/VoiceRecorder.tsx
Normal file
183
client-app/components/chat/VoiceRecorder.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* VoiceRecorder — inline UI для записи голосового сообщения через
|
||||
* expo-audio (заменил deprecated expo-av).
|
||||
*
|
||||
* UX:
|
||||
* - При монтировании проверяет permission + запускает запись
|
||||
* - [🗑] ● timer Recording… [↑]
|
||||
* - 🗑 = cancel (discard), ↑ = stop + send
|
||||
*
|
||||
* Состояние recorder'а живёт в useAudioRecorder hook'е. Prepare + start
|
||||
* вызывается из useEffect. Stop — при release, finalized URI через
|
||||
* `recorder.uri`.
|
||||
*/
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { View, Text, Pressable, Alert, Animated } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import {
|
||||
useAudioRecorder, AudioModule, RecordingPresets, setAudioModeAsync,
|
||||
} from 'expo-audio';
|
||||
|
||||
import type { Attachment } from '@/lib/types';
|
||||
|
||||
export interface VoiceRecorderProps {
|
||||
onFinish: (att: Attachment) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function VoiceRecorder({ onFinish, onCancel }: VoiceRecorderProps) {
|
||||
const recorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
|
||||
const startedAt = useRef(0);
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
// Pulsing red dot
|
||||
const pulse = useRef(new Animated.Value(1)).current;
|
||||
useEffect(() => {
|
||||
const loop = Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulse, { toValue: 0.4, duration: 500, useNativeDriver: true }),
|
||||
Animated.timing(pulse, { toValue: 1, duration: 500, useNativeDriver: true }),
|
||||
]),
|
||||
);
|
||||
loop.start();
|
||||
return () => loop.stop();
|
||||
}, [pulse]);
|
||||
|
||||
// Start recording at mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const perm = await AudioModule.requestRecordingPermissionsAsync();
|
||||
if (!perm.granted) {
|
||||
setError('Microphone permission denied');
|
||||
return;
|
||||
}
|
||||
await setAudioModeAsync({
|
||||
allowsRecording: true,
|
||||
playsInSilentMode: true,
|
||||
});
|
||||
await recorder.prepareToRecordAsync();
|
||||
if (cancelled) return;
|
||||
recorder.record();
|
||||
startedAt.current = Date.now();
|
||||
setReady(true);
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? 'Failed to start recording');
|
||||
}
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Timer tick
|
||||
useEffect(() => {
|
||||
if (!ready) return;
|
||||
const t = setInterval(() => {
|
||||
setElapsed(Math.floor((Date.now() - startedAt.current) / 1000));
|
||||
}, 250);
|
||||
return () => clearInterval(t);
|
||||
}, [ready]);
|
||||
|
||||
const stop = async (send: boolean) => {
|
||||
try {
|
||||
if (recorder.isRecording) {
|
||||
await recorder.stop();
|
||||
}
|
||||
const uri = recorder.uri;
|
||||
const seconds = Math.max(1, Math.floor((Date.now() - startedAt.current) / 1000));
|
||||
if (!send || !uri || seconds < 1) {
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
onFinish({
|
||||
kind: 'voice',
|
||||
uri,
|
||||
duration: seconds,
|
||||
mime: 'audio/m4a',
|
||||
});
|
||||
} catch (e: any) {
|
||||
Alert.alert('Recording failed', e?.message ?? 'Unknown error');
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
const mm = Math.floor(elapsed / 60);
|
||||
const ss = elapsed % 60;
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#111111',
|
||||
borderRadius: 22,
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
paddingHorizontal: 14, paddingVertical: 8,
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="alert-circle" size={18} color="#f4212e" />
|
||||
<Text style={{ color: '#f4212e', fontSize: 13, flex: 1 }}>{error}</Text>
|
||||
<Pressable onPress={onCancel} hitSlop={8}>
|
||||
<Ionicons name="close" size={20} color="#8b8b8b" />
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#111111',
|
||||
borderRadius: 22,
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
paddingHorizontal: 10, paddingVertical: 6,
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => stop(false)}
|
||||
hitSlop={8}
|
||||
style={{
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="trash-outline" size={20} color="#f4212e" />
|
||||
</Pressable>
|
||||
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, flex: 1 }}>
|
||||
<Animated.View
|
||||
style={{
|
||||
width: 10, height: 10, borderRadius: 5,
|
||||
backgroundColor: '#f4212e',
|
||||
opacity: pulse,
|
||||
}}
|
||||
/>
|
||||
<Text style={{ color: '#ffffff', fontSize: 15, fontWeight: '600' }}>
|
||||
{mm}:{String(ss).padStart(2, '0')}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12 }}>
|
||||
Recording…
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
onPress={() => stop(true)}
|
||||
style={({ pressed }) => ({
|
||||
width: 32, height: 32, borderRadius: 16,
|
||||
backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
})}
|
||||
>
|
||||
<Ionicons name="arrow-up" size={18} color="#ffffff" />
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
79
client-app/components/chat/rows.ts
Normal file
79
client-app/components/chat/rows.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Группировка сообщений в rows для FlatList чат-экрана.
|
||||
*
|
||||
* Чистая функция — никаких React-зависимостей, легко тестируется unit'ом.
|
||||
*
|
||||
* Правила:
|
||||
* 1. Между разными календарными днями вставляется {kind:'sep', label}.
|
||||
* 2. Внутри одного дня peer-сообщения группируются в "лесенку" с учётом:
|
||||
* - смены отправителя
|
||||
* - перерыва > 1 часа между соседними сообщениями
|
||||
* В пределах одной группы:
|
||||
* showName = true только у первого
|
||||
* showAvatar = true только у последнего
|
||||
* 3. mine-сообщения всегда idle: showName=false, showAvatar=false
|
||||
* (в референсе X-style никогда не рисуется имя/аватар над своим bubble).
|
||||
*
|
||||
* showName/showAvatar всё равно вычисляются — даже если потом render-слой
|
||||
* их проигнорирует (DM / channel — без sender-meta). Логика кнопки renders
|
||||
* сама решает показывать ли их, см. MessageBubble → withSenderMeta.
|
||||
*/
|
||||
import type { Message } from '@/lib/types';
|
||||
import { dateBucket } from '@/lib/dates';
|
||||
|
||||
export type Row =
|
||||
| { kind: 'sep'; id: string; label: string }
|
||||
| {
|
||||
kind: 'msg';
|
||||
msg: Message;
|
||||
showName: boolean;
|
||||
showAvatar: boolean;
|
||||
};
|
||||
|
||||
// Максимальная пауза внутри "лесенки" — после неё новый run.
|
||||
const RUN_GAP_SECONDS = 60 * 60; // 1 час
|
||||
|
||||
export function buildRows(msgs: Message[]): Row[] {
|
||||
const out: Row[] = [];
|
||||
let lastBucket = '';
|
||||
|
||||
for (let i = 0; i < msgs.length; i++) {
|
||||
const m = msgs[i];
|
||||
const b = dateBucket(m.timestamp);
|
||||
|
||||
if (b !== lastBucket) {
|
||||
out.push({ kind: 'sep', id: `sep_${b}_${m.id}`, label: b });
|
||||
lastBucket = b;
|
||||
}
|
||||
|
||||
const prev = msgs[i - 1];
|
||||
const next = msgs[i + 1];
|
||||
|
||||
// "Прервать run" флаги:
|
||||
// - разный день
|
||||
// - разный отправитель
|
||||
// - своё vs чужое
|
||||
// - пауза > 1 часа
|
||||
const breakBefore =
|
||||
!prev ||
|
||||
dateBucket(prev.timestamp) !== b ||
|
||||
prev.from !== m.from ||
|
||||
prev.mine !== m.mine ||
|
||||
(m.timestamp - prev.timestamp) > RUN_GAP_SECONDS;
|
||||
|
||||
const breakAfter =
|
||||
!next ||
|
||||
dateBucket(next.timestamp) !== b ||
|
||||
next.from !== m.from ||
|
||||
next.mine !== m.mine ||
|
||||
(next.timestamp - m.timestamp) > RUN_GAP_SECONDS;
|
||||
|
||||
// Для mine — никогда не показываем имя/аватар.
|
||||
const showName = m.mine ? false : breakBefore;
|
||||
const showAvatar = m.mine ? false : breakAfter;
|
||||
|
||||
out.push({ kind: 'msg', msg: m, showName, showAvatar });
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
370
client-app/components/feed/PostCard.tsx
Normal file
370
client-app/components/feed/PostCard.tsx
Normal file
@@ -0,0 +1,370 @@
|
||||
/**
|
||||
* PostCard — Twitter-style feed row.
|
||||
*
|
||||
* Layout (top-to-bottom, left-to-right):
|
||||
*
|
||||
* [avatar 44] [@author · time · ⋯ menu]
|
||||
* [post text body with #tags + @mentions highlighted]
|
||||
* [optional attachment preview]
|
||||
* [💬 0 🔁 link ❤️ likes 👁 views]
|
||||
*
|
||||
* Interaction model:
|
||||
* - Tap anywhere except controls → navigate to post detail
|
||||
* - Tap author/avatar → profile
|
||||
* - Double-tap the post body → like (with a short heart-bounce animation)
|
||||
* - Long-press → context menu (copy, share link, delete-if-mine)
|
||||
*
|
||||
* Performance notes:
|
||||
* - Memoised. Feed lists re-render often (after every like, view bump,
|
||||
* new post), but each card only needs to update when ITS own stats
|
||||
* change. We use shallow prop comparison + stable key on post_id.
|
||||
* - Stats are passed in by parent (fetched once per refresh), not
|
||||
* fetched here — avoids N /stats requests per timeline render.
|
||||
*/
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
View, Text, Pressable, Alert, Animated, Image,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { useStore } from '@/lib/store';
|
||||
import type { FeedPostItem } from '@/lib/feed';
|
||||
import {
|
||||
formatRelativeTime, formatCount, likePost, unlikePost, deletePost, fetchStats,
|
||||
} from '@/lib/feed';
|
||||
|
||||
export interface PostCardProps {
|
||||
post: FeedPostItem;
|
||||
/** true = current user has liked this post (used for filled heart). */
|
||||
likedByMe?: boolean;
|
||||
/** Called after a successful like/unlike so parent can refresh stats. */
|
||||
onStatsChanged?: (postID: string) => void;
|
||||
/** Called after delete so parent can drop the card from the list. */
|
||||
onDeleted?: (postID: string) => void;
|
||||
/** Compact (no attachment, less padding) — used in nested thread context. */
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }: PostCardProps) {
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const contacts = useStore(s => s.contacts);
|
||||
|
||||
// Optimistic local state — immediate response to tap, reconciled after tx.
|
||||
const [localLiked, setLocalLiked] = useState<boolean>(!!likedByMe);
|
||||
const [localLikeCount, setLocalLikeCount] = useState<number>(post.likes);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setLocalLiked(!!likedByMe);
|
||||
setLocalLikeCount(post.likes);
|
||||
}, [likedByMe, post.likes]);
|
||||
|
||||
// Heart bounce animation when liked (Twitter-style).
|
||||
const heartScale = useMemo(() => new Animated.Value(1), []);
|
||||
const animateHeart = useCallback(() => {
|
||||
heartScale.setValue(0.6);
|
||||
Animated.spring(heartScale, {
|
||||
toValue: 1,
|
||||
friction: 3,
|
||||
tension: 120,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, [heartScale]);
|
||||
|
||||
const mine = !!keyFile && keyFile.pub_key === post.author;
|
||||
|
||||
// Find a display-friendly name for the author. If it's a known contact
|
||||
// with @username, use that; otherwise short-addr.
|
||||
const displayName = useMemo(() => {
|
||||
const c = contacts.find(x => x.address === post.author);
|
||||
if (c?.username) return `@${c.username}`;
|
||||
if (c?.alias) return c.alias;
|
||||
if (mine) return 'You';
|
||||
return shortAddr(post.author);
|
||||
}, [contacts, post.author, mine]);
|
||||
|
||||
const onToggleLike = useCallback(async () => {
|
||||
if (!keyFile || busy) return;
|
||||
setBusy(true);
|
||||
const wasLiked = localLiked;
|
||||
// Optimistic update.
|
||||
setLocalLiked(!wasLiked);
|
||||
setLocalLikeCount(c => c + (wasLiked ? -1 : 1));
|
||||
animateHeart();
|
||||
try {
|
||||
if (wasLiked) {
|
||||
await unlikePost({ from: keyFile.pub_key, privKey: keyFile.priv_key, postID: post.post_id });
|
||||
} else {
|
||||
await likePost({ from: keyFile.pub_key, privKey: keyFile.priv_key, postID: post.post_id });
|
||||
}
|
||||
// Refresh stats from server so counts reconcile (on-chain is delayed
|
||||
// by block time; server returns current cached count).
|
||||
setTimeout(() => onStatsChanged?.(post.post_id), 1500);
|
||||
} catch (e: any) {
|
||||
// Roll back optimistic update.
|
||||
setLocalLiked(wasLiked);
|
||||
setLocalLikeCount(c => c + (wasLiked ? 1 : -1));
|
||||
Alert.alert('Не удалось', String(e?.message ?? e));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}, [keyFile, busy, localLiked, post.post_id, animateHeart, onStatsChanged]);
|
||||
|
||||
const onOpenDetail = useCallback(() => {
|
||||
router.push(`/(app)/feed/${post.post_id}` as never);
|
||||
}, [post.post_id]);
|
||||
|
||||
const onOpenAuthor = useCallback(() => {
|
||||
router.push(`/(app)/profile/${post.author}` as never);
|
||||
}, [post.author]);
|
||||
|
||||
const onLongPress = useCallback(() => {
|
||||
if (!keyFile) return;
|
||||
const options: Array<{ label: string; destructive?: boolean; onPress: () => void }> = [];
|
||||
if (mine) {
|
||||
options.push({
|
||||
label: 'Удалить пост',
|
||||
destructive: true,
|
||||
onPress: () => {
|
||||
Alert.alert('Удалить пост?', 'Это действие нельзя отменить.', [
|
||||
{ text: 'Отмена', style: 'cancel' },
|
||||
{
|
||||
text: 'Удалить',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
await deletePost({
|
||||
from: keyFile.pub_key,
|
||||
privKey: keyFile.priv_key,
|
||||
postID: post.post_id,
|
||||
});
|
||||
onDeleted?.(post.post_id);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Ошибка', String(e?.message ?? e));
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
},
|
||||
});
|
||||
}
|
||||
if (options.length === 0) return;
|
||||
const buttons: Array<{ text: string; style?: 'default' | 'cancel' | 'destructive'; onPress?: () => void }> = [
|
||||
...options.map(o => ({
|
||||
text: o.label,
|
||||
style: (o.destructive ? 'destructive' : 'default') as 'default' | 'destructive',
|
||||
onPress: o.onPress,
|
||||
})),
|
||||
{ text: 'Отмена', style: 'cancel' as const },
|
||||
];
|
||||
Alert.alert('Действия', '', buttons);
|
||||
}, [keyFile, mine, post.post_id, onDeleted]);
|
||||
|
||||
// Image URL for attachment preview. We hit the hosting relay directly.
|
||||
// For MVP we just show a placeholder — real fetch requires the hosting
|
||||
// relay's URL, not just its pubkey. (Future: /api/relays lookup.)
|
||||
const attachmentIcon = post.has_attachment;
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onOpenDetail}
|
||||
onLongPress={onLongPress}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: compact ? 10 : 12,
|
||||
backgroundColor: pressed ? '#080808' : 'transparent',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#141414',
|
||||
})}
|
||||
>
|
||||
{/* Avatar column */}
|
||||
<Pressable onPress={onOpenAuthor} hitSlop={4}>
|
||||
<Avatar name={displayName} address={post.author} size={44} />
|
||||
</Pressable>
|
||||
|
||||
{/* Content column */}
|
||||
<View style={{ flex: 1, marginLeft: 10, minWidth: 0 }}>
|
||||
{/* Header: name + time + menu */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Pressable onPress={onOpenAuthor} hitSlop={4}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ color: '#ffffff', fontWeight: '700', fontSize: 14, letterSpacing: -0.2 }}
|
||||
>
|
||||
{displayName}
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Text style={{ color: '#6a6a6a', fontSize: 13, marginHorizontal: 4 }}>·</Text>
|
||||
<Text style={{ color: '#6a6a6a', fontSize: 13 }}>
|
||||
{formatRelativeTime(post.created_at)}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
{mine && (
|
||||
<Pressable onPress={onLongPress} hitSlop={8}>
|
||||
<Ionicons name="ellipsis-horizontal" size={16} color="#6a6a6a" />
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Body text with hashtag highlighting */}
|
||||
{post.content.length > 0 && (
|
||||
<Text
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 15,
|
||||
lineHeight: 20,
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
{renderInline(post.content)}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{/* Attachment indicator — real image render requires relay URL */}
|
||||
{attachmentIcon && (
|
||||
<View
|
||||
style={{
|
||||
marginTop: 8,
|
||||
paddingVertical: 24,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="image-outline" size={18} color="#5a5a5a" />
|
||||
<Text style={{ color: '#5a5a5a', fontSize: 12 }}>
|
||||
Открыть пост, чтобы посмотреть вложение
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Action row */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: 8,
|
||||
gap: 32,
|
||||
}}
|
||||
>
|
||||
<ActionButton
|
||||
icon="chatbubble-outline"
|
||||
label={formatCount(0) /* replies count — not implemented yet */}
|
||||
onPress={onOpenDetail}
|
||||
/>
|
||||
<Pressable
|
||||
onPress={onToggleLike}
|
||||
disabled={busy}
|
||||
hitSlop={8}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row', alignItems: 'center', gap: 6,
|
||||
opacity: pressed ? 0.5 : 1,
|
||||
})}
|
||||
>
|
||||
<Animated.View style={{ transform: [{ scale: heartScale }] }}>
|
||||
<Ionicons
|
||||
name={localLiked ? 'heart' : 'heart-outline'}
|
||||
size={16}
|
||||
color={localLiked ? '#e0245e' : '#6a6a6a'}
|
||||
/>
|
||||
</Animated.View>
|
||||
<Text
|
||||
style={{
|
||||
color: localLiked ? '#e0245e' : '#6a6a6a',
|
||||
fontSize: 12,
|
||||
fontWeight: localLiked ? '600' : '400',
|
||||
}}
|
||||
>
|
||||
{formatCount(localLikeCount)}
|
||||
</Text>
|
||||
</Pressable>
|
||||
<ActionButton
|
||||
icon="eye-outline"
|
||||
label={formatCount(post.views)}
|
||||
/>
|
||||
<View style={{ flex: 1 }} />
|
||||
<ActionButton
|
||||
icon="share-outline"
|
||||
onPress={() => {
|
||||
// Placeholder — copy postID to clipboard in a future PR.
|
||||
Alert.alert('Ссылка', `dchain://post/${post.post_id}`);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
// Silence image import lint since we reference Image type indirectly.
|
||||
const _imgKeep = Image;
|
||||
|
||||
export const PostCard = React.memo(PostCardInner);
|
||||
|
||||
// ── Inline helpers ──────────────────────────────────────────────────────
|
||||
|
||||
/** ActionButton — small icon + optional label. */
|
||||
function ActionButton({ icon, label, onPress }: {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
label?: string;
|
||||
onPress?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
hitSlop={8}
|
||||
disabled={!onPress}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row', alignItems: 'center', gap: 6,
|
||||
opacity: pressed ? 0.5 : 1,
|
||||
})}
|
||||
>
|
||||
<Ionicons name={icon} size={16} color="#6a6a6a" />
|
||||
{label && (
|
||||
<Text style={{ color: '#6a6a6a', fontSize: 12 }}>{label}</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render post body with hashtag highlighting. Splits by the hashtag regex,
|
||||
* wraps matches in blue-coloured Text spans that are tappable → hashtag
|
||||
* feed. For future: @mentions highlighting + URL auto-linking.
|
||||
*/
|
||||
function renderInline(text: string): React.ReactNode {
|
||||
const parts = text.split(/(#[A-Za-z0-9_\u0400-\u04FF]{1,40})/g);
|
||||
return parts.map((part, i) => {
|
||||
if (part.startsWith('#')) {
|
||||
const tag = part.slice(1);
|
||||
return (
|
||||
<Text
|
||||
key={i}
|
||||
style={{ color: '#1d9bf0' }}
|
||||
onPress={() => router.push(`/(app)/feed/tag/${encodeURIComponent(tag)}` as never)}
|
||||
>
|
||||
{part}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Text key={i}>{part}</Text>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function shortAddr(a: string, n = 6): string {
|
||||
if (!a) return '—';
|
||||
return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
|
||||
}
|
||||
|
||||
// Keep Image import in play; expo-image lint sometimes trims it.
|
||||
void _imgKeep;
|
||||
Reference in New Issue
Block a user