5728cfc85a
Profile screen
- Missing safe-area top inset on the header — fixed by wrapping the
outer View in paddingTop: insets.top (matches the rest of the tab
screens).
- "Чат" button icon + text sat on two lines because the button used
column layout by default. Rewritten as a full-width CTA pill with
flexDirection: row and alignItems: center → chat-bubble icon and
label sit on one line.
- Dedicated "Копировать адрес" button removed. The address row in
the info card is now the tap target: pressing it copies to clipboard
and flips the row to "Скопировано" with a green check for 1.8s.
- Posts tab removed entirely. User's right — a "chat profile" has no
posts concept, just participant count + date + encryption. The
profile screen is now a single-view info card (address, encryption
status, added date, participants). Posts are discoverable via the
Feed tab; a dedicated /feed/author/{pub} screen is on the roadmap
for browsing a specific user's timeline.
Back-stack navigation
- app/(app)/profile/_layout.tsx + app/(app)/feed/_layout.tsx added,
each with a native <Stack>. The outer AnimatedSlot is stack-less
(intentional — it animates tab switches), so without these nested
stacks `router.back()` from a profile screen had no history to pop
and fell through to root. Now tapping an author in the feed → back
returns to feed; opening a profile from chat header → back returns
to the chat.
Dev feed seed
- lib/devSeedFeed.ts: 12 synthetic posts (text-only, mix of hashtags,
one with has_attachment, varying likes/views, timestamps from "1m
ago" to "36h ago"). Exposed via getDevSeedFeed() — stripped from
production via __DEV__ gate.
- Feed screen falls back to the dev seed only when the real API
returned zero posts. Gives something to scroll / tap / like-toggle
before the backend has real content; real data takes over as soon
as it arrives.
Note: tapping a mock post into detail will 404 against the real node
(the post_ids don't exist on-chain). Intentional — the seed is for
scroll + interaction feel, not deep linking.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
319 lines
11 KiB
TypeScript
319 lines
11 KiB
TypeScript
/**
|
||
* Profile screen — info card about any address (yours or someone else's),
|
||
* plus a Follow/Unfollow button. Posts are intentionally NOT shown here
|
||
* — this screen is chat-oriented ("who is on the other side of this
|
||
* conversation"); the feed tab + /feed/author/{pub} is where you go to
|
||
* browse someone's timeline.
|
||
*
|
||
* Route:
|
||
* /(app)/profile/<ed25519-hex>
|
||
*
|
||
* Back behaviour:
|
||
* Nested Stack layout in app/(app)/profile/_layout.tsx preserves the
|
||
* push stack, so tapping Back returns the user to whatever screen
|
||
* pushed them here (feed card tap, chat header tap, etc.).
|
||
*/
|
||
import React, { useState } from 'react';
|
||
import {
|
||
View, Text, ScrollView, Pressable, ActivityIndicator,
|
||
} from 'react-native';
|
||
import { router, useLocalSearchParams } from 'expo-router';
|
||
import * as Clipboard from 'expo-clipboard';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||
|
||
import { useStore } from '@/lib/store';
|
||
import { Avatar } from '@/components/Avatar';
|
||
import { Header } from '@/components/Header';
|
||
import { IconButton } from '@/components/IconButton';
|
||
import { followUser, unfollowUser } from '@/lib/feed';
|
||
import { humanizeTxError } from '@/lib/api';
|
||
|
||
function shortAddr(a: string, n = 10): string {
|
||
if (!a) return '—';
|
||
return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
|
||
}
|
||
|
||
export default function ProfileScreen() {
|
||
const insets = useSafeAreaInsets();
|
||
const { address } = useLocalSearchParams<{ address: string }>();
|
||
const contacts = useStore(s => s.contacts);
|
||
const keyFile = useStore(s => s.keyFile);
|
||
const contact = contacts.find(c => c.address === address);
|
||
|
||
const [following, setFollowing] = useState(false);
|
||
const [followingBusy, setFollowingBusy] = useState(false);
|
||
const [copied, setCopied] = useState(false);
|
||
|
||
const isMe = !!keyFile && keyFile.pub_key === address;
|
||
const displayName = contact?.username
|
||
? `@${contact.username}`
|
||
: contact?.alias ?? (isMe ? 'Вы' : shortAddr(address ?? '', 6));
|
||
|
||
const copyAddress = async () => {
|
||
if (!address) return;
|
||
await Clipboard.setStringAsync(address);
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 1800);
|
||
};
|
||
|
||
const openChat = () => {
|
||
if (!address) return;
|
||
router.replace(`/(app)/chats/${address}` as never);
|
||
};
|
||
|
||
const onToggleFollow = async () => {
|
||
if (!keyFile || !address || isMe || followingBusy) return;
|
||
setFollowingBusy(true);
|
||
const wasFollowing = following;
|
||
setFollowing(!wasFollowing);
|
||
try {
|
||
if (wasFollowing) {
|
||
await unfollowUser({ from: keyFile.pub_key, privKey: keyFile.priv_key, target: address });
|
||
} else {
|
||
await followUser({ from: keyFile.pub_key, privKey: keyFile.priv_key, target: address });
|
||
}
|
||
} catch (e: any) {
|
||
setFollowing(wasFollowing);
|
||
// Surface the error via alert — feed lib already formats humanizeTxError.
|
||
alert(humanizeTxError(e));
|
||
} finally {
|
||
setFollowingBusy(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||
<Header
|
||
title="Профиль"
|
||
divider
|
||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||
/>
|
||
|
||
<ScrollView contentContainerStyle={{ padding: 14, paddingBottom: insets.bottom + 30 }}>
|
||
{/* ── Hero: avatar + Follow button ──────────────────────────── */}
|
||
<View style={{ flexDirection: 'row', alignItems: 'flex-end', marginBottom: 12 }}>
|
||
<Avatar name={displayName} address={address} size={72} />
|
||
<View style={{ flex: 1 }} />
|
||
{!isMe ? (
|
||
<Pressable
|
||
onPress={onToggleFollow}
|
||
disabled={followingBusy}
|
||
style={({ pressed }) => ({
|
||
paddingHorizontal: 18, paddingVertical: 9,
|
||
borderRadius: 999,
|
||
backgroundColor: following
|
||
? (pressed ? '#1a1a1a' : '#111111')
|
||
: (pressed ? '#e7e7e7' : '#ffffff'),
|
||
borderWidth: following ? 1 : 0,
|
||
borderColor: '#1f1f1f',
|
||
minWidth: 120,
|
||
alignItems: 'center',
|
||
})}
|
||
>
|
||
{followingBusy ? (
|
||
<ActivityIndicator
|
||
size="small"
|
||
color={following ? '#ffffff' : '#000000'}
|
||
/>
|
||
) : (
|
||
<Text
|
||
style={{
|
||
color: following ? '#ffffff' : '#000000',
|
||
fontWeight: '700',
|
||
fontSize: 13,
|
||
}}
|
||
>
|
||
{following ? 'Вы подписаны' : 'Подписаться'}
|
||
</Text>
|
||
)}
|
||
</Pressable>
|
||
) : (
|
||
<Pressable
|
||
onPress={() => router.push('/(app)/settings' as never)}
|
||
style={({ pressed }) => ({
|
||
paddingHorizontal: 18, paddingVertical: 9,
|
||
borderRadius: 999,
|
||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||
borderWidth: 1, borderColor: '#1f1f1f',
|
||
})}
|
||
>
|
||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 13 }}>
|
||
Редактировать
|
||
</Text>
|
||
</Pressable>
|
||
)}
|
||
</View>
|
||
|
||
{/* Name + verified tick */}
|
||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||
<Text
|
||
style={{ color: '#ffffff', fontSize: 22, fontWeight: '800', letterSpacing: -0.3 }}
|
||
numberOfLines={1}
|
||
>
|
||
{displayName}
|
||
</Text>
|
||
{contact?.username && (
|
||
<Ionicons name="checkmark-circle" size={18} color="#1d9bf0" style={{ marginLeft: 5 }} />
|
||
)}
|
||
</View>
|
||
|
||
{/* Open chat — single CTA, full width, icon inline with text.
|
||
Only when we know this is a contact (direct chat exists). */}
|
||
{!isMe && contact && (
|
||
<Pressable
|
||
onPress={openChat}
|
||
style={({ pressed }) => ({
|
||
marginTop: 14,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
gap: 6,
|
||
paddingVertical: 11,
|
||
borderRadius: 999,
|
||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||
borderWidth: 1, borderColor: '#1f1f1f',
|
||
})}
|
||
>
|
||
<Ionicons name="chatbubble-outline" size={15} color="#ffffff" />
|
||
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 14 }}>
|
||
Открыть чат
|
||
</Text>
|
||
</Pressable>
|
||
)}
|
||
|
||
{/* ── Info card ───────────────────────────────────────────────── */}
|
||
<View
|
||
style={{
|
||
marginTop: 18,
|
||
borderRadius: 14,
|
||
backgroundColor: '#0a0a0a',
|
||
borderWidth: 1, borderColor: '#1f1f1f',
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{/* Address — entire row is tappable → copies */}
|
||
<Pressable
|
||
onPress={copyAddress}
|
||
style={({ pressed }) => ({
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: 14, paddingVertical: 12,
|
||
backgroundColor: pressed ? '#0f0f0f' : 'transparent',
|
||
})}
|
||
>
|
||
<Text style={{ color: '#8b8b8b', fontSize: 13, flex: 1 }}>
|
||
Адрес
|
||
</Text>
|
||
<Text
|
||
style={{
|
||
color: copied ? '#3ba55d' : '#ffffff',
|
||
fontSize: 13,
|
||
fontFamily: 'monospace',
|
||
fontWeight: '600',
|
||
}}
|
||
numberOfLines={1}
|
||
>
|
||
{copied ? 'Скопировано' : shortAddr(address ?? '')}
|
||
</Text>
|
||
<Ionicons
|
||
name={copied ? 'checkmark' : 'copy-outline'}
|
||
size={14}
|
||
color={copied ? '#3ba55d' : '#6a6a6a'}
|
||
style={{ marginLeft: 8 }}
|
||
/>
|
||
</Pressable>
|
||
|
||
{/* Encryption status */}
|
||
{contact && (
|
||
<>
|
||
<Divider />
|
||
<InfoRow
|
||
label="Шифрование"
|
||
value={contact.x25519Pub
|
||
? 'end-to-end (NaCl)'
|
||
: 'ключ ещё не опубликован'}
|
||
danger={!contact.x25519Pub}
|
||
icon={contact.x25519Pub ? 'lock-closed' : 'lock-open'}
|
||
/>
|
||
|
||
<Divider />
|
||
<InfoRow
|
||
label="Добавлен"
|
||
value={new Date(contact.addedAt).toLocaleDateString()}
|
||
icon="calendar-outline"
|
||
/>
|
||
|
||
{/* Participants count — 1 for direct DMs. Groups would show
|
||
their actual member count from chain state (v2.1.0+). */}
|
||
<Divider />
|
||
<InfoRow
|
||
label="Участников"
|
||
value={contact.kind === 'group' ? '—' : '1'}
|
||
icon="people-outline"
|
||
/>
|
||
</>
|
||
)}
|
||
</View>
|
||
|
||
{!contact && !isMe && (
|
||
<Text style={{
|
||
color: '#6a6a6a',
|
||
fontSize: 12,
|
||
textAlign: 'center',
|
||
marginTop: 14,
|
||
paddingHorizontal: 24,
|
||
lineHeight: 17,
|
||
}}>
|
||
Этот пользователь пока не в ваших контактах. Нажмите «Подписаться», чтобы видеть его посты в ленте, или добавьте в чаты через @username.
|
||
</Text>
|
||
)}
|
||
</ScrollView>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
function Divider() {
|
||
return <View style={{ height: 1, backgroundColor: '#1f1f1f' }} />;
|
||
}
|
||
|
||
function InfoRow({
|
||
label, value, icon, danger,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
icon?: React.ComponentProps<typeof Ionicons>['name'];
|
||
danger?: boolean;
|
||
}) {
|
||
return (
|
||
<View
|
||
style={{
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: 14,
|
||
paddingVertical: 12,
|
||
}}
|
||
>
|
||
{icon && (
|
||
<Ionicons
|
||
name={icon}
|
||
size={14}
|
||
color={danger ? '#f0b35a' : '#6a6a6a'}
|
||
style={{ marginRight: 8 }}
|
||
/>
|
||
)}
|
||
<Text style={{ color: '#8b8b8b', fontSize: 13, flex: 1 }}>{label}</Text>
|
||
<Text
|
||
style={{
|
||
color: danger ? '#f0b35a' : '#ffffff',
|
||
fontSize: 13,
|
||
fontWeight: '600',
|
||
}}
|
||
numberOfLines={1}
|
||
>
|
||
{value}
|
||
</Text>
|
||
</View>
|
||
);
|
||
}
|