feat(social): add friends, private chats, inbox and music sharing

apps/mobile/src/app/(tabs)/_layout.tsx

@@ -8,18 +8,21 @@ import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
 import { useColors } from '../../theme';
 import { Cover, Icon, type IconName } from '../../ui/kit';
+import { useSocialUnread } from '../../features/social/Social';
 import { UpdateDialog } from '../../ui/UpdateDialog';
 
-const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', profile: 'person' };
+const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', friends: 'people-outline', profile: 'person' };
 
 export default function TabsLayout() {
   const colors = useColors();
   const { t } = useTranslation();
+  const unread = useSocialUnread();
   const labels: Record<string, string> = {
     index: t('nav.home'),
     search: t('mobile.search'),
     collection: t('nav.collection'),
     profile: t('mobile.profile'),
+    friends: t('social.people'),
   };
   const net = useNetInfo();
   return (
@@ -34,6 +37,7 @@ export default function TabsLayout() {
               routes={state.routes.map((r) => r.name)}
               active={state.index}
               labels={labels}
+              badges={{ friends: unread }}
               onPress={(name) => navigation.navigate(name)}
             />
           </View>
@@ -42,6 +46,7 @@ export default function TabsLayout() {
         <Tabs.Screen name="index" />
         <Tabs.Screen name="search" />
         <Tabs.Screen name="collection" />
+        <Tabs.Screen name="friends" />
         <Tabs.Screen name="profile" />
       </Tabs>
       <UpdateDialog />
@@ -53,11 +58,13 @@ function TabBar({
   routes,
   active,
   labels,
+  badges,
   onPress,
 }: {
   routes: string[];
   active: number;
   labels: Record<string, string>;
+  badges: Record<string, number>;
   onPress: (name: string) => void;
 }) {
   const colors = useColors();
@@ -81,10 +88,13 @@ function TabBar({
             onPress={() => onPress(name)}
             accessibilityRole="tab"
             accessibilityState={{ selected: on }}
-            accessibilityLabel={labels[name]}
+            accessibilityLabel={`${labels[name]}${badges[name] ? ` · ${badges[name]}` : ''}`}
             style={{ flex: 1, alignItems: 'center', paddingVertical: 8, gap: 2 }}
           >
-            <Icon name={ICONS[name] ?? 'circle'} color={on ? colors.accent2 : colors.text3} />
+            <View>
+              <Icon name={ICONS[name] ?? 'circle'} color={on ? colors.accent2 : colors.text3} />
+              {!!badges[name] && <Text style={{ position: 'absolute', top: -5, left: 14, minWidth: 16, paddingHorizontal: 4, borderRadius: 9, backgroundColor: colors['accent-fill'], color: '#fff', fontSize: 10, textAlign: 'center' }}>{badges[name]! > 99 ? '99+' : badges[name]}</Text>}
+            </View>
             <Text style={{ fontSize: 11, color: on ? colors.text : colors.text3, fontWeight: on ? '600' : '400' }}>
               {labels[name]}
             </Text>

apps/mobile/src/app/(tabs)/friends.tsx

@@ -0,0 +1,2 @@
+import { SocialScreen } from '../../features/social/Social';
+export default function FriendsTab() { return <SocialScreen root />; }

apps/mobile/src/app/_layout.tsx

@@ -110,6 +110,9 @@ function Screens() {
         <Stack.Screen name="album/[id]" />
         <Stack.Screen name="artist/[id]" />
         <Stack.Screen name="playlists" />
+        <Stack.Screen name="social" />
+        <Stack.Screen name="social-track" />
+        <Stack.Screen name="social-playlist" />
         <Stack.Screen name="player" options={{ presentation: 'modal', animation: 'slide_from_bottom' }} />
       </Stack.Protected>
     </Stack>

apps/mobile/src/app/player.tsx

@@ -1,7 +1,8 @@
 import { useRouter } from 'expo-router';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, Pressable, Share, Text, View, type LayoutChangeEvent } from 'react-native';
+import { Pressable, Text, View, type LayoutChangeEvent } from 'react-native';
+import { MusicShareSheet } from '../features/social/Social';
 import { trackShareUrl } from '@pipu/core';
 
 import { useSessionCtx, useUser } from '../lib/session';
@@ -39,20 +40,11 @@ export default function PlayerScreen() {
   const duration = st.durationMs || track.duration_ms;
   const progress = duration ? Math.min(st.positionMs / duration, 1) : 0;
   const react = (r: 'like' | 'dislike') => void player.react(track, track.reaction === r ? null : r).catch(() => undefined);
-  const share = async () => {
-    if (!server || sharing) return;
-    setSharing(true);
-    try {
-      await Share.share({ title: track.title, message: trackShareUrl(server, track.id) }, { dialogTitle: t('player.share') });
-    } catch {
-      Alert.alert(t('player.share'), t('player.share_error'));
-    } finally {
-      setSharing(false);
-    }
-  };
+  const share = () => setSharing(true);
 
   return (
     <Screen>
+      {sharing && server && <MusicShareSheet attachment={{ kind: 'track', id: track.id, title: track.title }} url={trackShareUrl(server, track.id)} close={() => setSharing(false)} />}
       <View style={{ flex: 1, padding: 24, gap: 24, justifyContent: 'space-between' }}>
         <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
           <Pressable onPress={() => router.back()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('mobile.close_player')}>

apps/mobile/src/app/playlists.tsx

@@ -1,10 +1,11 @@
 import type { components } from '@pipu/api-client';
+import { MusicShareSheet } from '../features/social/Social';
 import { playlistShareUrl, unwrap } from '@pipu/core';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, FlatList, Modal, ScrollView, Share, View } from 'react-native';
+import { Alert, FlatList, Modal, ScrollView, View } from 'react-native';
 import { useSession, useSessionCtx, useUser } from '../lib/session';
 import { player } from '../player/controller';
 import { Button, ErrorBox, Field, H1, Muted, Screen, TrackRow, formatDuration, useErrorText } from '../ui/kit';
@@ -77,6 +78,7 @@ function Editor({ playlist, track, onClose, onSaved }: { playlist?: Playlist; tr
 }
 
 function Detail({ id }: { id: string }) {
+  const [shareToken, setShareToken] = useState<string | null>(null);
   const session = useSession();
   const { server } = useSessionCtx();
   const user = useUser();
@@ -94,7 +96,7 @@ function Detail({ id }: { id: string }) {
     if (!server || !p) throw new Error('Server unavailable');
     const token = unwrap(await session.client.POST('/api/v1/me/playlists/{id}/share', { params: { path: { id } } })).share_id;
     cache.setQueryData<Playlist>(key, current => current ? { ...current, share_id: token } : current);
-    await Share.share({ title: p.name, message: playlistShareUrl(server, token) }, { dialogTitle: t('playlists.share') });
+    setShareToken(token);
   } });
   const revoke = useMutation({ mutationFn: async () => unwrap(await session.client.DELETE('/api/v1/me/playlists/{id}/share', { params: { path: { id } } })),
     onSuccess: () => { cache.setQueryData<Playlist>(key, current => current ? { ...current, share_id: null } : current); } });
@@ -112,7 +114,7 @@ function Detail({ id }: { id: string }) {
   const move = (index: number, delta: number) => {
     const ids = p!.tracks.map(t => t.id); [ids[index],ids[index+delta]]=[ids[index+delta]!,ids[index]!]; save.mutate(ids);
   };
-  return <Screen><FlatList data={p?.tracks ?? []} keyExtractor={t => t.id} onRefresh={() => void query.refetch()} refreshing={query.isRefetching}
+  return <Screen>{shareToken && server && p && <MusicShareSheet attachment={{ kind: 'playlist', id: shareToken, title: p.name }} url={playlistShareUrl(server, shareToken)} close={() => setShareToken(null)} />}<FlatList data={p?.tracks ?? []} keyExtractor={t => t.id} onRefresh={() => void query.refetch()} refreshing={query.isRefetching}
     ListHeaderComponent={<View style={{ padding:16,gap:12 }}>
       <Button title={t('playlists.title')} variant="ghost" onPress={() => router.back()} />
       <ErrorBox>{query.error || save.error || deletion.error || playError || sharing.error || revoke.error ? errorText(query.error ?? save.error ?? deletion.error ?? playError ?? sharing.error ?? revoke.error) : null}</ErrorBox>

apps/mobile/src/app/social-playlist.tsx

@@ -0,0 +1,2 @@
+import { SharedMusic } from '../features/social/SharedMusic';
+export default function SharedPlaylistScreen() { return <SharedMusic kind="playlist" />; }

apps/mobile/src/app/social-track.tsx

@@ -0,0 +1,2 @@
+import { SharedMusic } from '../features/social/SharedMusic';
+export default function SharedTrackScreen() { return <SharedMusic kind="track" />; }

apps/mobile/src/app/social.tsx

@@ -0,0 +1 @@
+export { SocialScreen as default } from '../features/social/Social';

apps/mobile/src/features/social/SharedMusic.tsx

@@ -0,0 +1,36 @@
+import { unwrap } from '@pipu/core';
+import { useQuery } from '@tanstack/react-query';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlatList, View } from 'react-native';
+import { useSession, useSessionCtx, useUser } from '../../lib/session';
+import { player } from '../../player/controller';
+import { Button, ErrorBox, H1, Muted, Screen, TrackRow, useErrorText } from '../../ui/kit';
+
+export function SharedMusic({ kind }: { kind: 'track' | 'playlist' }) {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const session = useSession();
+  const { server } = useSessionCtx();
+  const user = useUser();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const errorText = useErrorText();
+  const [playError, setPlayError] = useState<unknown>();
+  const query = useQuery({ queryKey: ['shared-music', server, user.id, kind, id], queryFn: async () => {
+    if (kind === 'track') {
+      const track = unwrap(await session.client.GET('/api/v1/tracks/{id}', { params: { path: { id } } }));
+      return { name: track.title, tracks: [track] };
+    }
+    return unwrap(await session.client.GET('/api/v1/shared/playlists/{shareId}', { params: { path: { shareId: id } } }));
+  } });
+  return <Screen><FlatList data={query.data?.tracks ?? []} keyExtractor={x => x.id}
+    ListHeaderComponent={<View style={{ padding: 20, gap: 16 }}>
+      <Button title={t('social.back')} variant="ghost" onPress={() => router.back()} />
+      <H1>{query.data?.name ?? t(kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')}</H1>
+      {query.isPending && <Muted>{t('social.loading')}</Muted>}
+      <ErrorBox>{query.error || playError ? errorText(query.error ?? playError) : null}</ErrorBox>
+    </View>}
+    renderItem={({ item, index }) => <TrackRow track={item} onPress={() => void player.playList(query.data?.tracks ?? [], index, { type: 'collection', id, label: query.data?.name }).catch(setPlayError)} />}
+  /></Screen>;
+}

apps/mobile/src/features/social/Social.tsx

@@ -0,0 +1,147 @@
+import { attachmentPath, socialApi, uuidv7, type MusicAttachment, type SocialAction, type SocialPerson } from '@pipu/core';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useFocusEffect, useRouter } from 'expo-router';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppState, Clipboard, KeyboardAvoidingView, Modal, ScrollView, Share, Text, View } from 'react-native';
+import { useSession, useSessionCtx, useUser } from '../../lib/session';
+import { useColors } from '../../theme';
+import { Button, ErrorBox, Field, H1, Muted, Screen, useErrorText } from '../../ui/kit';
+
+function useSocial() {
+  const session = useSession();
+  const { server } = useSessionCtx();
+  const user = useUser();
+  const api = useMemo(() => socialApi(session), [session]);
+  const [active, setActive] = useState(AppState.currentState === 'active');
+  useEffect(() => { const sub = AppState.addEventListener('change', s => setActive(s === 'active')); return () => sub.remove(); }, []);
+  const key = ['m-social', server, user.id] as const;
+  const inbox = useQuery({ queryKey: key, queryFn: api.inbox, enabled: active, refetchInterval: active ? 15_000 : false });
+  return { api, key, inbox, user, active };
+}
+export function useSocialUnread() { return useSocial().inbox.data?.unread ?? 0; }
+export function MusicShareSheet({ attachment, url, close }: { attachment: MusicAttachment; url: string; close: () => void }) {
+  const { t } = useTranslation();
+  const { inbox, api, key } = useSocial();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const [sent, setSent] = useState<string[]>([]);
+  const [copied, setCopied] = useState(false);
+  const ids = useRef(new Map<string, string>());
+  const send = useMutation({ mutationFn: async (peer: string) => {
+    if (peer === 'copy') { Clipboard.setString(url); setCopied(true); return; }
+    if (peer === 'external') { await Share.share({ title: attachment.title, message: url }); return; }
+    let id = ids.current.get(peer); if (!id) { id = uuidv7(); ids.current.set(peer, id); }
+    await api.send(peer, { id, text: attachment.title, attachment_kind: attachment.kind, attachment_id: attachment.id });
+    setSent(v => [...v, peer]); await cache.invalidateQueries({ queryKey: key });
+  } });
+  return <Modal animationType="slide" onRequestClose={close}><Screen><ScrollView contentContainerStyle={{ padding: 24, gap: 16 }}>
+    <Button title={t('form.cancel')} variant="ghost" onPress={close} />
+    <H1>{t('player.share')}</H1><Muted>{attachment.title}</Muted>
+    <Button title={t(copied ? 'social.copied' : 'social.copy')} disabled={send.isPending} onPress={() => send.mutate('copy')} />
+    <Button title={t('social.external')} variant="secondary" disabled={send.isPending} onPress={() => send.mutate('external')} />
+    <H1>{t('social.send_friend')}</H1>
+    {inbox.isPending && <Muted>{t('social.loading')}</Muted>}
+    {inbox.data && !inbox.data.people.some(p => p.relationship === 'friend') && <Muted>{t('social.no_friends_share')}</Muted>}
+    {inbox.data?.people.filter(p => p.relationship === 'friend').map(p => <Button key={p.id} title={`${p.display_name} · ${t(sent.includes(p.id) ? 'social.sent' : 'social.send')}`} variant="secondary" disabled={send.isPending || sent.includes(p.id)} onPress={() => send.mutate(p.id)} />)}
+    <ErrorBox>{send.error || inbox.error ? errorText(send.error ?? inbox.error) : null}</ErrorBox>
+  </ScrollView></Screen></Modal>;
+}
+
+export function SocialScreen({ root = false }: { root?: boolean }) {
+  const { t } = useTranslation();
+  const colors = useColors();
+  const router = useRouter();
+  const { api, inbox, key } = useSocial();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const [search, setSearch] = useState('');
+  const [q, setQ] = useState('');
+  const [peer, setPeer] = useState('');
+  const [notifications, setNotifications] = useState(false);
+  useEffect(() => { const timer = setTimeout(() => setQ(search.trim()), 300); return () => clearTimeout(timer); }, [search]);
+  const results = useQuery({ queryKey: [...key, 'search', q], queryFn: () => api.search(q), enabled: q.length >= 2 });
+  const act = useMutation({ mutationFn: (body: SocialAction) => api.action(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const selected = inbox.data?.people.find(p => p.id === peer && p.relationship === 'friend');
+  if (selected) return <Screen><Button title={t('social.back')} variant="ghost" onPress={() => setPeer('')} /><Chat key={selected.id} person={selected} /></Screen>;
+  const people = q.length >= 2 ? results.data ?? [] : inbox.data?.people ?? [];
+  return <Screen><ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ padding: 20, gap: 16 }}>
+    {!root && <Button title={t('social.back')} variant="ghost" onPress={() => router.back()} />}
+    <H1>{t('social.title')}</H1><Muted>{t('social.subtitle')}</Muted>
+    <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+      <Button title={t('social.people')} variant={notifications ? 'ghost' : 'primary'} onPress={() => setNotifications(false)} />
+      <Button title={`${t('social.notifications')} ${inbox.data?.unread || ''}`} variant={notifications ? 'primary' : 'ghost'} onPress={() => setNotifications(true)} />
+    </View>
+    <ErrorBox>{inbox.error || results.error || act.error ? errorText(inbox.error ?? results.error ?? act.error) : null}</ErrorBox>
+    {inbox.isPending && <Muted>{t('social.loading')}</Muted>}
+    {notifications ? <>
+      {inbox.data?.notifications.length === 0 && <Muted>{t('social.no_notifications')}</Muted>}
+      {inbox.data?.notifications.map(n => <View key={n.id} style={{ padding: 16, borderRadius: 16, backgroundColor: colors.surface, gap: 10, borderWidth: 1, borderColor: n.read ? colors.line : colors.accent }}>
+        <Text style={{ color: colors.text, fontWeight: '600' }}>{n.actor_name}</Text><Muted>{t(`social.kind_${n.kind}`)}</Muted><Muted>{new Date(n.created_at).toLocaleString()}</Muted>
+        <Button title={t('social.open')} variant="secondary" onPress={() => { setNotifications(false); setSearch(''); setQ(''); setPeer(n.actor_id); }} />
+        {!n.read && <Button title={t('social.mark_read')} variant="ghost" disabled={act.isPending} onPress={() => act.mutate({ action: 'read_notification', target_id: n.id })} />}
+      </View>)}
+    </> : <>
+      <Field label={t('social.search')} value={search} onChangeText={setSearch} maxLength={80} />
+      {q.length >= 2 && results.isFetching && <Muted>{t('social.loading')}</Muted>}
+      {!people.length && inbox.data && !results.isFetching && <Muted>{t(q.length >= 2 ? 'social.no_results' : 'social.empty')}</Muted>}
+      {people.map(p => <View key={p.id} style={{ padding: 16, borderRadius: 16, backgroundColor: colors.surface, gap: 10 }}>
+        <Text style={{ color: colors.text, fontWeight: '600', fontSize: 17 }}>{p.display_name}</Text><Muted>@{p.username} · {t(`social.rel_${p.relationship}`)}</Muted>
+        {p.relationship === 'friend' && <Button title={`${t('social.chat')}${p.unread ? ` · ${p.unread}` : ''}`} onPress={() => setPeer(p.id)} />}
+        {p.relationship === 'none' && <Button title={t('social.add')} disabled={act.isPending} onPress={() => act.mutate({ action: 'request', target_id: p.id })} />}
+        {p.relationship === 'incoming' && <Button title={t('social.accept')} disabled={act.isPending} onPress={() => act.mutate({ action: 'accept', target_id: p.id })} />}
+        {['friend', 'incoming', 'outgoing'].includes(p.relationship) && <Button title={t(p.relationship === 'incoming' ? 'social.decline' : p.relationship === 'outgoing' ? 'social.cancel' : 'social.remove')} variant="ghost" disabled={act.isPending} onPress={() => act.mutate({ action: 'remove', target_id: p.id })} />}
+        <Button title={t(p.relationship === 'blocked' ? 'social.unblock' : 'social.block')} variant="ghost" disabled={act.isPending} onPress={() => act.mutate({ action: p.relationship === 'blocked' ? 'unblock' : 'block', target_id: p.id })} />
+      </View>)}
+    </>}
+  </ScrollView></Screen>;
+}
+function Chat({ person }: { person: SocialPerson }) {
+  const { t } = useTranslation();
+  const colors = useColors();
+  const { server } = useSessionCtx();
+  const { api, key, user, active } = useSocial();
+  const router = useRouter();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const [text, setText] = useState('');
+  const [focused, setFocused] = useState(false);
+  useFocusEffect(useCallback(() => { setFocused(true); return () => setFocused(false); }, []));
+  const pending = useRef<{ id: string; text: string } | null>(null);
+  const messages = useInfiniteQuery({ queryKey: [...key, 'chat', person.id], initialPageParam: undefined as number | undefined,
+    queryFn: ({ pageParam }) => api.messages(person.id, pageParam), getNextPageParam: last => last.length === 50 ? last[0]?.seq : undefined, enabled: active && focused, refetchInterval: active && focused ? 8_000 : false });
+  const list = [...(messages.data?.pages ?? [])].reverse().flat();
+  const last = list.at(-1)?.seq;
+  const unread = list.some(m => m.sender_id !== user.id && !m.read);
+  useEffect(() => {
+    if (last && unread && active && focused) void api.action({ action: 'read_chat', target_id: person.id, up_to_seq: last }).then(() => cache.invalidateQueries({ queryKey: key })).catch(() => undefined);
+  }, [last, unread, active, focused, api, person.id, messages.dataUpdatedAt]);
+  const send = useMutation({ mutationFn: async () => {
+    if (!pending.current || pending.current.text !== text) pending.current = { id: uuidv7(), text };
+    return api.send(person.id, { ...pending.current, attachment_kind: 'none' });
+  }, onSuccess: async () => { setText(''); pending.current = null; await cache.invalidateQueries({ queryKey: key }); } });
+  const scroll = useRef<ScrollView>(null);
+  const [scrollBottom, setScrollBottom] = useState(true);
+  useEffect(() => { setScrollBottom(true); }, [last]);
+  return <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
+    <View style={{ padding: 16, gap: 8 }}><H1>{person.display_name}</H1><Muted>{t('social.chat_hint')}</Muted><ErrorBox>{messages.error || send.error ? errorText(messages.error ?? send.error) : null}</ErrorBox></View>
+    <ScrollView ref={scroll} keyboardShouldPersistTaps="handled" contentContainerStyle={{ padding: 16, gap: 12 }} onContentSizeChange={() => { if (scrollBottom) scroll.current?.scrollToEnd({ animated: false }); }}>
+      {messages.hasNextPage && <Button title={t('social.older')} variant="ghost" busy={messages.isFetchingNextPage} onPress={() => { setScrollBottom(false); void messages.fetchNextPage(); }} />}
+      {messages.isPending && <Muted>{t('social.loading')}</Muted>}
+      {messages.isSuccess && !list.length && <Muted>{t('social.first_message')}</Muted>}
+      {list.map(m => <View key={m.id} style={{ alignSelf: m.sender_id === user.id ? 'flex-end' : 'flex-start', maxWidth: '88%', padding: 14, borderRadius: 16, backgroundColor: m.sender_id === user.id ? colors['accent-soft'] : colors.surface2, gap: 8 }}>
+        <Text style={{ color: colors.text, fontSize: 15 }}>{m.text}</Text>
+        {attachmentPath(m) && <Button title={t(m.attachment_kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')} variant="secondary" onPress={() => {
+          if (!server || !m.attachment_id) return;
+          if (m.attachment_kind === 'track') router.push({ pathname: '/social-track', params: { id: m.attachment_id } });
+          else router.push({ pathname: '/social-playlist', params: { id: m.attachment_id } });
+        }} />}
+        <Muted>{new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}{m.sender_id === user.id ? ` · ${t(m.read ? 'social.read' : 'social.sent')}` : ''}</Muted>
+      </View>)}
+    </ScrollView>
+    <View style={{ padding: 16, gap: 12, borderTopWidth: 1, borderTopColor: colors.line }}>
+      <Field label={t('social.message')} value={text} onChangeText={setText} maxLength={4000} multiline editable={!send.isPending} />
+      <Button title={t('social.send')} disabled={!text.trim()} busy={send.isPending} onPress={() => send.mutate()} />
+    </View>
+  </KeyboardAvoidingView>;
+}