Friends

import { router, useFocusEffect } from 'expo-router'; import { useCallback, useState } from 'react'; import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import useSWR from 'swr'; import type { FollowListItemDTO, UserSummaryDTO } from '@musicshare/shared'; import { AmbientBackground } from '@/components/AmbientBackground'; import { Avatar } from '@/components/Avatar'; import { PersonRow, emptyFollowText, useFollowList } from '@/components/FollowList'; import { Body, Button, Chip, Field, Row, Title } from '@/components/ui'; import { useSession } from '@/lib/session'; import { useDebounced } from '@/lib/useDebounced'; import { colors, space } from '@/lib/theme'; /** Friends: who you follow and who follows you, plus search and QR codes to find new people. */ export default function FriendsScreen() { const { me } = useSession(); const [q, setQ] = useState(''); const [tab, setTab] = useState<'following' | 'followers'>('following'); const query = useDebounced(q.trim(), 250); const searching = query.length >= 2; const { data: found } = useSWR(searching ? `/users/search?q=${encodeURIComponent(query)}` : null); const list = useFollowList(me?.username, tab); // Follows change on profiles and elsewhere; catch up when coming back to this tab. const { refresh } = list; useFocusEffect( useCallback(() => { refresh(); }, [refresh]), ); // One list for both, so the search field keeps focus while results swap in. const rows: (UserSummaryDTO | FollowListItemDTO)[] = searching ? (found ?? []) : list.users; return ( u.id} keyboardShouldPersistTaps="handled" contentContainerStyle={styles.list} onEndReached={searching ? undefined : list.loadMore} ListHeaderComponent={ Friends