vsecoder/dchain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(client): profile polish + proper back stack + dev feed seed

Browse Source 
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>
This commit is contained in:
vsecoder
2026-04-18 20:08:48 +03:00
parent 0ff2760a11
commit 5728cfc85a
5 changed files with 451 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client-app/app/(app)/feed.tsx
View File

@@ -27,6 +27,7 @@ import {
fetchTimeline, fetchForYou, fetchTrending, fetchStats, bumpView, fetchTimeline, fetchForYou, fetchTrending, fetchStats, bumpView,
type FeedPostItem, type FeedPostItem,
} from '@/lib/feed'; } from '@/lib/feed';
import { getDevSeedFeed } from '@/lib/devSeedFeed';
type TabKey = 'following' | 'foryou' | 'trending'; type TabKey = 'following' | 'foryou' | 'trending';
@@ -71,6 +72,13 @@ export default function FeedScreen() {
break; break;
} }
if (seq !== requestRef.current) return; // stale response if (seq !== requestRef.current) return; // stale response
// Dev-only fallback: if the node has no real posts yet, surface
// synthetic ones so we can scroll + tap. Stripped from production.
if (items.length === 0) {
items = getDevSeedFeed();
}
setPosts(items); setPosts(items);
// Batch-fetch liked_by_me (bounded concurrency — 6 at a time). // Batch-fetch liked_by_me (bounded concurrency — 6 at a time).

23
client-app/app/(app)/feed/_layout.tsx Normal file
View File

@@ -0,0 +1,23 @@
/**
* Feed sub-routes layout — native Stack for /(app)/feed/[id] and
* /(app)/feed/tag/[tag]. The tab root itself (app/(app)/feed.tsx) lives
* OUTSIDE this folder so it keeps the outer Slot-level navigation.
*
* Why a Stack here? AnimatedSlot in the parent is stack-less; without
* this nested Stack, `router.back()` from a post detail / hashtag feed
* couldn't find its caller.
*/
import React from 'react';
import { Stack } from 'expo-router';
export default function FeedLayout() {
return (
<Stack
screenOptions={{
headerShown: false,
contentStyle: { backgroundColor: '#000000' },
animation: 'slide_from_right',
}}
/>
);
}

553
client-app/app/(app)/profile/[address].tsx
View File

@@ -1,20 +1,21 @@
/** /**
* Profile screen — shows info about any address (yours or someone else's), * Profile screen — info card about any address (yours or someone else's),
* plus their post feed, follow/unfollow button, and basic counters. * 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.
* *
* Routes: * Route:
* /(app)/profile/<ed25519-hex> * /(app)/profile/<ed25519-hex>
* *
* Two states: * Back behaviour:
* - Known contact → open chat, show full info * Nested Stack layout in app/(app)/profile/_layout.tsx preserves the
* - Unknown address → Twitter-style "discovery" profile: shows just the * push stack, so tapping Back returns the user to whatever screen
* address + posts + follow button. Useful when tapping an author from * pushed them here (feed card tap, chat header tap, etc.).
* the feed of someone you don't chat with.
*/ */
import React, { useCallback, useEffect, useState } from 'react'; import React, { useState } from 'react';
import { import {
View, Text, ScrollView, Pressable, Alert, FlatList, View, Text, ScrollView, Pressable, ActivityIndicator,
ActivityIndicator, RefreshControl,
} from 'react-native'; } from 'react-native';
import { router, useLocalSearchParams } from 'expo-router'; import { router, useLocalSearchParams } from 'expo-router';
import * as Clipboard from 'expo-clipboard'; import * as Clipboard from 'expo-clipboard';
@@ -22,16 +23,10 @@ import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useStore } from '@/lib/store'; import { useStore } from '@/lib/store';
import type { Contact } from '@/lib/types';
import { Avatar } from '@/components/Avatar'; import { Avatar } from '@/components/Avatar';
import { Header } from '@/components/Header'; import { Header } from '@/components/Header';
import { IconButton } from '@/components/IconButton'; import { IconButton } from '@/components/IconButton';
import { PostCard } from '@/components/feed/PostCard'; import { followUser, unfollowUser } from '@/lib/feed';
import {
fetchAuthorPosts, fetchStats, followUser, unfollowUser,
formatCount, type FeedPostItem,
} from '@/lib/feed';
import { humanizeTxError } from '@/lib/api'; import { humanizeTxError } from '@/lib/api';
function shortAddr(a: string, n = 10): string { function shortAddr(a: string, n = 10): string {
@@ -39,8 +34,6 @@ function shortAddr(a: string, n = 10): string {
return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`; return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
} }
type Tab = 'posts' | 'info';
export default function ProfileScreen() { export default function ProfileScreen() {
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const { address } = useLocalSearchParams<{ address: string }>(); const { address } = useLocalSearchParams<{ address: string }>();
@@ -48,54 +41,20 @@ export default function ProfileScreen() {
const keyFile = useStore(s => s.keyFile); const keyFile = useStore(s => s.keyFile);
const contact = contacts.find(c => c.address === address); const contact = contacts.find(c => c.address === address);
const [tab, setTab] = useState<Tab>('posts'); const [following, setFollowing] = useState(false);
const [posts, setPosts] = useState<FeedPostItem[]>([]);
const [likedSet, setLikedSet] = useState<Set<string>>(new Set());
const [loadingPosts, setLoadingPosts] = useState(true);
const [refreshing, setRefreshing] = useState(false);
// Follow state is optimistic + reconciled via on-chain query. For MVP
// we keep a local-only flag that toggles immediately on tap; future:
// query chain.Following(me) once on mount to seed accurate initial state.
const [following, setFollowing] = useState(false);
const [followingBusy, setFollowingBusy] = useState(false); const [followingBusy, setFollowingBusy] = useState(false);
const [copied, setCopied] = useState<string | null>(null); const [copied, setCopied] = useState(false);
const isMe = !!keyFile && keyFile.pub_key === address; const isMe = !!keyFile && keyFile.pub_key === address;
const displayName = contact?.username const displayName = contact?.username
? `@${contact.username}` ? `@${contact.username}`
: contact?.alias ?? (isMe ? 'Вы' : shortAddr(address ?? '')); : contact?.alias ?? (isMe ? 'Вы' : shortAddr(address ?? '', 6));
const loadPosts = useCallback(async (isRefresh = false) => { const copyAddress = async () => {
if (!address) return; if (!address) return;
if (isRefresh) setRefreshing(true); else setLoadingPosts(true); await Clipboard.setStringAsync(address);
try { setCopied(true);
const items = await fetchAuthorPosts(address, 40); setTimeout(() => setCopied(false), 1800);
setPosts(items);
if (keyFile) {
const liked = new Set<string>();
for (const p of items) {
const s = await fetchStats(p.post_id, keyFile.pub_key);
if (s?.liked_by_me) liked.add(p.post_id);
}
setLikedSet(liked);
}
} catch {
setPosts([]);
} finally {
setLoadingPosts(false);
setRefreshing(false);
}
}, [address, keyFile]);
useEffect(() => {
if (tab === 'posts') loadPosts(false);
}, [tab, loadPosts]);
const copy = async (value: string, label: string) => {
await Clipboard.setStringAsync(value);
setCopied(label);
setTimeout(() => setCopied(null), 1800);
}; };
const openChat = () => { const openChat = () => {
@@ -116,301 +75,216 @@ export default function ProfileScreen() {
} }
} catch (e: any) { } catch (e: any) {
setFollowing(wasFollowing); setFollowing(wasFollowing);
Alert.alert('Не удалось', humanizeTxError(e)); // Surface the error via alert — feed lib already formats humanizeTxError.
alert(humanizeTxError(e));
} finally { } finally {
setFollowingBusy(false); setFollowingBusy(false);
} }
}; };
const onStatsChanged = useCallback(async (postID: string) => {
if (!keyFile) return;
const s = await fetchStats(postID, keyFile.pub_key);
if (!s) return;
setPosts(ps => ps.map(p => p.post_id === postID
? { ...p, likes: s.likes, views: s.views } : p));
setLikedSet(set => {
const next = new Set(set);
if (s.liked_by_me) next.add(postID); else next.delete(postID);
return next;
});
}, [keyFile]);
const onDeleted = useCallback((postID: string) => {
setPosts(ps => ps.filter(p => p.post_id !== postID));
}, []);
// ── Hero + follow button block ──────────────────────────────────────
const Hero = (
<View style={{ paddingHorizontal: 14, paddingTop: 16, paddingBottom: 4 }}>
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
<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: 110,
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>
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 14 }}>
<Text style={{ color: '#ffffff', fontSize: 22, fontWeight: '800' }}>
{displayName}
</Text>
{contact?.username && (
<Ionicons name="checkmark-circle" size={18} color="#1d9bf0" style={{ marginLeft: 5 }} />
)}
</View>
<Text style={{ color: '#6a6a6a', fontSize: 12, marginTop: 2 }}>
{shortAddr(address ?? '')}
</Text>
{/* Counters row — post count is derived from what we loaded; follower/
following counters would require chain.Followers / chain.Following
HTTP exposure which isn't wired yet (Phase D). */}
<View style={{ flexDirection: 'row', marginTop: 12, gap: 18 }}>
<Text style={{ color: '#ffffff', fontSize: 13 }}>
<Text style={{ fontWeight: '700' }}>{formatCount(posts.length)}</Text>
<Text style={{ color: '#6a6a6a' }}> постов</Text>
</Text>
</View>
{/* Secondary actions: open chat + copy address */}
{!isMe && contact && (
<View style={{ flexDirection: 'row', gap: 8, marginTop: 14 }}>
<Pressable
onPress={openChat}
style={({ pressed }) => ({
flex: 1,
alignItems: 'center', justifyContent: 'center',
paddingVertical: 10, borderRadius: 999,
backgroundColor: pressed ? '#1a1a1a' : '#111111',
borderWidth: 1, borderColor: '#1f1f1f',
flexDirection: 'row', gap: 6,
})}
>
<Ionicons name="chatbubble-outline" size={14} color="#ffffff" />
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 13 }}>
Чат
</Text>
</Pressable>
<Pressable
onPress={() => address && copy(address, 'address')}
style={({ pressed }) => ({
flex: 1,
alignItems: 'center', justifyContent: 'center',
paddingVertical: 10, borderRadius: 999,
backgroundColor: pressed ? '#1a1a1a' : '#111111',
borderWidth: 1, borderColor: '#1f1f1f',
})}
>
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 13 }}>
{copied === 'address' ? 'Скопировано' : 'Копировать адрес'}
</Text>
</Pressable>
</View>
)}
</View>
);
// ── Tab strip ────────────────────────────────────────────────────────
const TabStrip = (
<View
style={{
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#141414',
marginTop: 14,
}}
>
{(['posts', 'info'] as Tab[]).map(key => (
<Pressable
key={key}
onPress={() => setTab(key)}
style={{
flex: 1,
alignItems: 'center',
paddingVertical: 12,
}}
>
<Text
style={{
color: tab === key ? '#ffffff' : '#6a6a6a',
fontWeight: tab === key ? '700' : '500',
fontSize: 13,
}}
>
{key === 'posts' ? 'Посты' : 'Инфо'}
</Text>
{tab === key && (
<View style={{
marginTop: 6,
width: 48, height: 3, borderRadius: 1.5,
backgroundColor: '#1d9bf0',
}} />
)}
</Pressable>
))}
</View>
);
// ── Content per tab ─────────────────────────────────────────────────
if (tab === 'posts') {
return (
<View style={{ flex: 1, backgroundColor: '#000000' }}>
<Header
title="Профиль"
divider
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
/>
<FlatList
data={posts}
keyExtractor={p => p.post_id}
renderItem={({ item }) => (
<PostCard
post={item}
likedByMe={likedSet.has(item.post_id)}
onStatsChanged={onStatsChanged}
onDeleted={onDeleted}
/>
)}
ListHeaderComponent={
<>
{Hero}
{TabStrip}
</>
}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => loadPosts(true)}
tintColor="#1d9bf0"
/>
}
ListEmptyComponent={
loadingPosts ? (
<View style={{ padding: 40, alignItems: 'center' }}>
<ActivityIndicator color="#1d9bf0" />
</View>
) : (
<View style={{
paddingVertical: 60,
paddingHorizontal: 32,
alignItems: 'center',
}}>
<Ionicons name="newspaper-outline" size={32} color="#6a6a6a" />
<Text style={{ color: '#ffffff', fontWeight: '700', marginTop: 10 }}>
Пока нет постов
</Text>
<Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 6, textAlign: 'center' }}>
{isMe
? 'Нажмите на синюю кнопку в ленте, чтобы написать первый.'
: 'Этот пользователь ещё ничего не публиковал.'}
</Text>
</View>
)
}
/>
</View>
);
}
// Info tab
return ( return (
<View style={{ flex: 1, backgroundColor: '#000000' }}> <View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
<Header <Header
title="Профиль" title="Профиль"
divider divider
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />} left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
/> />
<ScrollView>
{Hero}
{TabStrip}
<View style={{ paddingHorizontal: 14, paddingTop: 14 }}> <ScrollView contentContainerStyle={{ padding: 14, paddingBottom: insets.bottom + 30 }}>
<View {/* ── Hero: avatar + Follow button ──────────────────────────── */}
style={{ <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginBottom: 12 }}>
borderRadius: 14, <Avatar name={displayName} address={address} size={72} />
backgroundColor: '#0a0a0a', <View style={{ flex: 1 }} />
borderWidth: 1, borderColor: '#1f1f1f', {!isMe ? (
overflow: 'hidden', <Pressable
}} onPress={onToggleFollow}
> disabled={followingBusy}
<InfoRow label="Адрес" value={shortAddr(address ?? '')} mono /> style={({ pressed }) => ({
{contact && ( paddingHorizontal: 18, paddingVertical: 9,
<> borderRadius: 999,
<InfoRow backgroundColor: following
label="Ключ шифрования" ? (pressed ? '#1a1a1a' : '#111111')
value={contact.x25519Pub ? shortAddr(contact.x25519Pub) : 'не опубликован'} : (pressed ? '#e7e7e7' : '#ffffff'),
mono={!!contact.x25519Pub} borderWidth: following ? 1 : 0,
danger={!contact.x25519Pub} borderColor: '#1f1f1f',
minWidth: 120,
alignItems: 'center',
})}
>
{followingBusy ? (
<ActivityIndicator
size="small"
color={following ? '#ffffff' : '#000000'}
/> />
<InfoRow label="Добавлен" value={new Date(contact.addedAt).toLocaleDateString()} /> ) : (
</> <Text
)} style={{
</View> 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> </View>
<View style={{ height: 40 + insets.bottom }} />
{/* 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> </ScrollView>
</View> </View>
); );
} }
function Divider() {
return <View style={{ height: 1, backgroundColor: '#1f1f1f' }} />;
}
function InfoRow({ function InfoRow({
label, value, mono, accent, danger, label, value, icon, danger,
}: { }: {
label: string; label: string;
value: string; value: string;
mono?: boolean; icon?: React.ComponentProps<typeof Ionicons>['name'];
accent?: boolean;
danger?: boolean; danger?: boolean;
}) { }) {
const color = danger ? '#f0b35a' : accent ? '#1d9bf0' : '#ffffff';
return ( return (
<View <View
style={{ style={{
@@ -418,15 +292,21 @@ function InfoRow({
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 14, paddingHorizontal: 14,
paddingVertical: 12, paddingVertical: 12,
borderTopWidth: 1,
borderTopColor: '#1f1f1f',
}} }}
> >
{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: '#8b8b8b', fontSize: 13, flex: 1 }}>{label}</Text>
<Text <Text
style={{ style={{
color, fontSize: 13, color: danger ? '#f0b35a' : '#ffffff',
fontFamily: mono ? 'monospace' : undefined, fontSize: 13,
fontWeight: '600', fontWeight: '600',
}} }}
numberOfLines={1} numberOfLines={1}
@@ -436,6 +316,3 @@ function InfoRow({
</View> </View>
); );
} }
// Silence unused-import lint for Contact type used only in helpers.
const _contactType: Contact | null = null; void _contactType;

24
client-app/app/(app)/profile/_layout.tsx Normal file
View File

@@ -0,0 +1,24 @@
/**
* Profile group layout — provides a dedicated native Stack for the
* /(app)/profile/* routes so that `router.back()` returns to the screen
* that pushed us here (post detail, chat, feed tab, etc.) instead of
* falling through to the root.
*
* The parent (app)/_layout.tsx uses AnimatedSlot → <Slot>, which is
* stack-less. Nesting a <Stack> here gives profile routes proper back
* history without affecting the outer tabs.
*/
import React from 'react';
import { Stack } from 'expo-router';
export default function ProfileLayout() {
return (
<Stack
screenOptions={{
headerShown: false,
contentStyle: { backgroundColor: '#000000' },
animation: 'slide_from_right',
}}
/>
);
}

181
client-app/lib/devSeedFeed.ts Normal file
View File

@@ -0,0 +1,181 @@
/**
* Dev-only mock posts for the feed.
*
* Why: in __DEV__ before any real posts exist on the node, the timeline/
* for-you/trending tabs come back empty. Empty state is fine visually but
* doesn't let you test scrolling, like animations, view-counter bumps,
* navigation to post detail, etc. This module injects a small set of
* synthetic posts so the UI has something to chew on.
*
* Gating:
* - Only active when __DEV__ === true (stripped from production builds).
* - Only surfaces when the REAL API returns an empty array. If the node
* is returning actual posts, we trust those and skip the mocks.
*
* These posts have made-up post_ids — tapping on them to open detail
* WILL 404 against the real backend. That's intentional — the mock is
* purely for scroll / tap-feedback testing.
*/
import type { FeedPostItem } from './feed';
// Fake hex-like pubkeys so Avatar's colour hash still looks varied.
function fakeAddr(seed: number): string {
const h = (seed * 2654435761).toString(16).padStart(8, '0');
return (h + h + h + h).slice(0, 64);
}
function fakePostID(n: number): string {
return `dev${String(n).padStart(29, '0')}`;
}
const NOW = Math.floor(Date.now() / 1000);
// Small curated pool of posts covering the render surface we care about:
// plain text, hashtag variety, different lengths, likes / views spread,
// reply/quote references, one with an attachment marker.
const SEED_POSTS: FeedPostItem[] = [
{
post_id: fakePostID(1),
author: fakeAddr(1),
content: 'Добро пожаловать в ленту DChain. Это #DEV-посты — они видны только пока реальная лента пустая.',
created_at: NOW - 60,
size: 200,
hosting_relay: fakeAddr(100),
views: 127, likes: 42,
has_attachment: false,
hashtags: ['dev'],
},
{
post_id: fakePostID(2),
author: fakeAddr(2),
content: 'Пробую новую ленту #twitter-style. Лайки, просмотры, подписки — всё on-chain, тела постов — off-chain в mailbox релея.',
created_at: NOW - 540,
size: 310,
hosting_relay: fakeAddr(100),
views: 89, likes: 23,
has_attachment: false,
hashtags: ['twitter'],
},
{
post_id: fakePostID(3),
author: fakeAddr(3),
content: 'Сжатие изображений — максимальное на клиенте (WebP Q=50 @1080p), плюс серверный EXIF-скраб через stdlib re-encode. GPS-координаты из EXIF больше никогда не утекают. #privacy',
created_at: NOW - 1200,
size: 420,
hosting_relay: fakeAddr(100),
views: 312, likes: 78,
has_attachment: true,
hashtags: ['privacy'],
},
{
post_id: fakePostID(4),
author: fakeAddr(4),
content: 'Короткий пост.',
created_at: NOW - 3600,
size: 128,
hosting_relay: fakeAddr(100),
views: 12, likes: 3,
has_attachment: false,
},
{
post_id: fakePostID(5),
author: fakeAddr(1),
content: 'Отвечаю сам себе — фича threads пока через reply_to только, без UI thread-виджета.',
created_at: NOW - 7200,
size: 220,
hosting_relay: fakeAddr(100),
views: 45, likes: 11,
has_attachment: false,
reply_to: fakePostID(1),
},
{
post_id: fakePostID(6),
author: fakeAddr(5),
content: '#golang + #badgerdb + #libp2p = DChain бэкенд. Пять package в test suite, все зелёные.',
created_at: NOW - 10800,
size: 180,
hosting_relay: fakeAddr(100),
views: 201, likes: 66,
has_attachment: false,
hashtags: ['golang', 'badgerdb', 'libp2p'],
},
{
post_id: fakePostID(7),
author: fakeAddr(6),
content: 'Feed-mailbox хранит тела постов до 30 дней (настраиваемо через DCHAIN_FEED_TTL_DAYS). Потом BadgerDB выселяет автоматически — chain-метаданные остаются навсегда.',
created_at: NOW - 14400,
size: 380,
hosting_relay: fakeAddr(100),
views: 156, likes: 48,
has_attachment: false,
},
{
post_id: fakePostID(8),
author: fakeAddr(7),
content: 'Pricing: BasePostFee = 1000 µT (0.001 T) + 1 µT за каждый байт. Уходит владельцу релея, принявшего пост.',
created_at: NOW - 21600,
size: 250,
hosting_relay: fakeAddr(100),
views: 78, likes: 22,
has_attachment: false,
},
{
post_id: fakePostID(9),
author: fakeAddr(8),
content: 'Twitter-like, но без миллиардов долларов на инфраструктуру — каждый оператор ноды платит за свой кусок хостинга и зарабатывает на публикациях. #decentralised #messaging',
created_at: NOW - 43200,
size: 340,
hosting_relay: fakeAddr(100),
views: 412, likes: 103,
has_attachment: false,
hashtags: ['decentralised', 'messaging'],
},
{
post_id: fakePostID(10),
author: fakeAddr(9),
content: 'Короче. Лайк = on-chain tx с fee 1000 µT. Дорого для спама, дёшево для реального лайка. Пока без батчинга, но в плане. #design',
created_at: NOW - 64800,
size: 200,
hosting_relay: fakeAddr(100),
views: 92, likes: 29,
has_attachment: false,
hashtags: ['design'],
},
{
post_id: fakePostID(11),
author: fakeAddr(2),
content: 'Follow граф на chain: двусторонний индекс (forward + inbound), так что Followers() и Following() — оба O(M).',
created_at: NOW - 86400 - 1000,
size: 230,
hosting_relay: fakeAddr(100),
views: 61, likes: 14,
has_attachment: false,
},
{
post_id: fakePostID(12),
author: fakeAddr(10),
content: 'Рекомендации (For You): берём последние 48ч постов, фильтруем подписки + уже лайкнутые + свои, ранжируем по likes × 3 + views. Версия 1 — будет умнее. #recsys',
created_at: NOW - 129600,
size: 290,
hosting_relay: fakeAddr(100),
views: 189, likes: 58,
has_attachment: false,
hashtags: ['recsys'],
},
];
/** True when the current build is a Metro dev bundle. __DEV__ is a
* global injected by Metro at bundle time and typed via react-native's
* ambient declarations, so no ts-ignore is needed. */
function isDev(): boolean {
return typeof __DEV__ !== 'undefined' && __DEV__ === true;
}
/**
* Returns the dev-seed post list (only in __DEV__). Called by the Feed
* screen as a fallback when the real API returned an empty list.
*/
export function getDevSeedFeed(): FeedPostItem[] {
if (!isDev()) return [];
return SEED_POSTS;
}